[FRNT-517] implement loader component (#130)

* feat: implement loader component

* refactor: simplify spinner, use dynamic sizes

* refactor: add more examples in usages, fix typos, move spinner to separate file

* refactor: replace fragment with short syntax variant

* refactor: make example more detailed

src/lib/playground.tsx

@@ -28,6 +28,11 @@ interface StateType {
   initial: any;
 }
 
+export interface StateCallback {
+  change: (value: any) => any;
+  value: any;
+}
+
 export const State = ({ initial, change, children }: StateType) => {
   const [value, setValue] = React.useState(initial);
 

src/static/icons/index.ts

@@ -10,3 +10,4 @@ export { default as IconEyeOpened } from './eye-opened.svg';
 export { default as IconPlus } from './plus.svg';
 export { default as IconSearch } from './search.svg';
 export { default as IconFilledUnchecked } from './check-filled-unchecked.svg';
+export { default as IconSpinner } from './spinner.svg';

src/ui/atoms/index.ts

@@ -10,6 +10,7 @@ export { ListItem, ListContainer } from './list';
 export { Notification } from './notification';
 export { Separator } from './separator';
 export { Surface } from './surface';
+export { Loader } from './loader';
 export { Table, Thead, Tbody, Tr, Td, Th } from './table';
 export { Text } from './text';
 export { TextArea } from './text-area';

src/ui/atoms/loader/example.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ListContainer, ListItem } from 'ui';
+import { StateCallback } from 'lib/playground';
+
+export const loadUsers = async ({ value, change }: StateCallback) => {
+  change({ ...value, loading: true });
+
+  const response = await fetch('https://jsonplaceholder.typicode.com/users').then(
+    (response) => response.json() as Promise<User[]>,
+  );
+  setTimeout(() => {
+    change({
+      data: response,
+      loading: false,
+    });
+  }, 1500);
+};
+
+interface User {
+  id: number;
+  name: string;
+}
+
+interface UsersListProps {
+  data: User[];
+}
+
+export const UsersList = ({ data }: UsersListProps) => (
+  <ListContainer variant="primary" style={{ width: '100%' }}>
+    {data.map(({ id, name }) => (
+      <ListItem key={id} as="li" text={name} />
+    ))}
+  </ListContainer>
+);

src/ui/atoms/loader/index.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import styled, { StyledComponent, keyframes } from 'styled-components';
+import { IconSpinner } from 'static/icons';
+import { Variant } from 'lib/types';
+import { box } from 'ui/elements';
+
+interface LoaderProps {
+  className?: string;
+  description?: React.ReactChild;
+}
+
+const LoaderBase = ({
+  className,
+  description = 'Loading...',
+  variant = 'secondary',
+}: LoaderProps & Variant) => {
+  return (
+    <div className={className} data-variant={variant}>
+      <div data-loader>
+        <IconSpinner data-track />
+        <div data-description>{description}</div>
+      </div>
+    </div>
+  );
+};
+
+const trackAnimation = keyframes`
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg)
+  }
+`;
+
+const spinnerAnimation = keyframes`
+ 0%,
+  25% {
+    stroke-dashoffset: 280;
+
+    transform: rotate(0);
+  }
+
+  50%,
+  75% {
+    stroke-dashoffset: 75;
+
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 280;
+
+    transform: rotate(360deg);
+  }
+`;
+
+export const Loader = styled(LoaderBase)`
+  ${box}
+  --local-track-size: 42px;
+  --local-vertical-gap: 12px;
+  --local-track-color: var(--woly-canvas-default);
+  --local-spinner-color: var(--woly-shape-default);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  [data-loader] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  [data-track] {
+    width: var(--local-track-size);
+    height: var(--local-track-size);
+    margin-bottom: var(--local-vertical-gap);
+
+    transform-origin: 50% 50%;
+
+    animation: 2s linear infinite ${trackAnimation};
+
+    fill: transparent;
+  }
+
+  [data-track] circle {
+    transform-origin: 50% 50%;
+
+    animation: 1.4s ease-in-out infinite both ${spinnerAnimation};
+
+    fill: none;
+
+    stroke: var(--local-spinner-color);
+    stroke-linecap: round;
+    stroke-dashoffset: 280;
+    stroke-dasharray: 283;
+  }
+
+  [data-description] {
+    color: var(--woly-canvas-text-default);
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 21px;
+    text-align: center;
+  }
+` as StyledComponent<'div', Record<string, unknown>, LoaderProps & Variant>;

src/ui/atoms/loader/usage.mdx

@@ -0,0 +1,73 @@
+---
+name: loader
+category: atoms
+package: 'woly'
+---
+
+import {Loader, Button, Text} from 'ui';
+import {Playground, State, StateEvent} from 'lib/playground';
+import {loadUsers, UsersList} from './example';
+
+`Loader` component is used when retrieving data or performing slow computations and helps to notify users that loading is underway.
+Description text below animated spinner provides more details on the current operation.
+
+Use a `Loader` component whenever the wait time is anticipated to be longer than three seconds.
+
+### Example
+
+<Playground>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <Button text="Toggle loader" onClick={change} variant="primary" />
+        {value ? (
+          <div style={{ width: 300 }}>
+            <Loader description={<Text type="S">Some action in progress...</Text>} />
+          </div>
+        ) : null}
+      </>
+    )}
+  </State>
+</Playground>
+
+### Example with data fetching
+
+<Playground>
+  <StateEvent
+    initial={{
+      loading: false,
+      data: null,
+    }}
+    change={(i) => i}
+  >
+    {(value, change) =>
+      value.loading ? (
+        <div style={{ width: 300 }}>
+          <Loader
+            variant="primary"
+            description={<Text weight="medium">Fetching users, please wait</Text>}
+          />
+        </div>
+      ) : value.data ? (
+        <>
+          <UsersList data={value.data} style={{ marginBottom: 10 }} />
+          <Button
+            variant="primary"
+            text="Reset"
+            onClick={() => change({ loading: false, data: null })}
+          />
+        </>
+      ) : (
+        <Button variant="primary" text="Fetch users" onClick={() => loadUsers({ value, change })} />
+      )
+    }
+  </StateEvent>
+</Playground>
+
+### Props
+
+| Name          | Type             | Default       | Description                                     |
+| ------------- | ---------------- | ------------- | ----------------------------------------------- |
+| `description` | `string`         | 'Loading...'  | Description text below the animated spinner     |
+| `variant`     | `string`         | `'secondary'` | Variant prop to style Loader component          |
+| `...`         | `HTMLDivElement` | `{}`          | Other props are inherited from `HTMLDivElement` |