feat: add Loader component

src/components/loader/__docs__/docs.mdx

@@ -0,0 +1,28 @@
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs';
+import {Loader} from '../loader';
+
+<Meta title="Components/Loader" of={Loader} />
+
+# Loader
+
+<Canvas>
+  <Story id="components-loader--basic" />
+</Canvas>
+<Canvas>
+  <Story id="components-loader--big" />
+</Canvas>
+
+```typescript
+import {Loader} from '@frontapp/ui-kit';
+```
+
+Indicates that content is loading or that an action is taking place.
+
+<br />
+
+## Props
+
+<ArgsTable of={Loader} />
+
+<hr />
+<hr />

src/components/loader/__docs__/index.stories.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable storybook/story-exports */
+import {ComponentMeta} from '@storybook/react';
+
+import {Loader} from '../loader';
+import DocumentationMDX from './docs.mdx';
+
+/*
+ * Storybook.
+ */
+
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+  parameters: {
+    docs: {
+      page: DocumentationMDX
+    },
+    previewTabs: {
+      canvas: {
+        hidden: true
+      }
+    },
+    viewMode: 'docs'
+  },
+  id: 'Components/Loader'
+} as ComponentMeta<typeof Loader>;
+
+export {Basic, Big} from './stories/basic.stories';

src/components/loader/__docs__/stories/basic.stories.tsx

@@ -0,0 +1,19 @@
+import {ComponentStory} from '@storybook/react';
+import React from 'react';
+
+import {VisualSizesEnum} from '../../../../helpers/fontHelpers';
+import {Loader, LoaderColorVariantsEnum} from '../../loader';
+
+export const Basic: ComponentStory<typeof Loader> = (args) => (
+  <div style={{display: 'flex', gap: 10}}>
+    <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.BLUE} />
+    <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.GREY} />
+  </div>
+);
+
+export const Big: ComponentStory<typeof Loader> = (args) => (
+  <div style={{display: 'flex', gap: 20}}>
+    <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.BLUE} />
+    <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.GREY} />
+  </div>
+);

src/components/loader/loader.tsx

@@ -0,0 +1,89 @@
+import React, {FC} from 'react';
+import styled, {css, keyframes} from 'styled-components';
+
+import loader from '../../assets/images/loader.png';
+import loaderGrey from '../../assets/images/loaderGrey.png';
+import loaderGreySmall from '../../assets/images/loaderGreySmall.png';
+import loaderSmall from '../../assets/images/loaderSmall.png';
+import {VisualSizesEnum} from '../../helpers/fontHelpers';
+import {makeSizeConstants} from '../../helpers/styleHelpers';
+
+/*
+ * Props.
+ */
+
+export enum LoaderColorVariantsEnum {
+  BLUE = 'BASE',
+  GREY = 'GREY'
+}
+
+interface LoaderProps {
+  className?: string;
+  /** Size of the loader. */
+  size?: VisualSizesEnum;
+  /** Color scheme of the loader. */
+  color?: LoaderColorVariantsEnum;
+  /** Whether or not the loader rotates. */
+  isEnabled?: boolean;
+}
+
+const defaultProps = {
+  size: VisualSizesEnum.LARGE,
+  variant: LoaderColorVariantsEnum.BLUE,
+  isEnabled: true
+};
+
+/*
+ * Style.
+ */
+
+const sizes = makeSizeConstants(16, 20, 40);
+const images = {
+  [LoaderColorVariantsEnum.BLUE]: makeSizeConstants(loaderSmall, loaderSmall, loader),
+  [LoaderColorVariantsEnum.GREY]: makeSizeConstants(loaderGreySmall, loaderGreySmall, loaderGrey)
+};
+
+interface LoaderStyleProps {
+  $size: VisualSizesEnum;
+  $variant: LoaderColorVariantsEnum;
+  $isEnabled: boolean;
+}
+const StyledLoaderDiv = styled.div<LoaderStyleProps>`
+  width: ${(p) => sizes[p.$size]}px;
+  height: ${(p) => sizes[p.$size]}px;
+  background-image: url(${(p) => images[p.$variant][p.$size]});
+  background-size: ${(p) => sizes[p.$size]}px;
+
+  ${(p) => maybeAnimate(p.$isEnabled)};
+`;
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+function maybeAnimate(isEnabled: boolean) {
+  if (!isEnabled) return '';
+
+  return css`
+    animation: ${rotate360} 0.6s linear infinite;
+  `;
+}
+
+/*
+ * Component.
+ */
+
+export const Loader: FC<LoaderProps> = (props) => (
+  <StyledLoaderDiv
+    $size={props.size ?? defaultProps.size}
+    $variant={props.color ?? defaultProps.variant}
+    $isEnabled={props.isEnabled ?? defaultProps.isEnabled}
+    className={props.className}
+    data-testid="loader"
+  />
+);

src/custom.d.ts

@@ -7,3 +7,8 @@ declare module '*.svg' {
   export {ReactComponent};
   export default ReactComponent;
 }
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}