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/ui/atoms/loader/example.tsx

@@ -1,69 +1,34 @@
 import React from 'react';
-import { Button, ListContainer, ListItem, Loader, Text } from 'ui';
+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 ExampleState {
-  loading: boolean;
-  data: User[] | null;
+interface UsersListProps {
+  data: User[];
 }
 
-const initialState: ExampleState = {
-  loading: false,
-  data: null,
-};
-
-export const ExampleDataFetching = () => {
-  const [{ loading, data }, setExampleState] = React.useState<ExampleState>(initialState);
-
-  const handleClick = () => {
-    const loadUsers = async () => {
-      setExampleState((current) => ({ ...current, loading: true }));
-
-      const response = await fetch('https://jsonplaceholder.typicode.com/users').then(
-        (response) => response.json() as Promise<User[]>,
-      );
-      setTimeout(() => {
-        setExampleState({
-          data: response,
-          loading: false,
-        });
-      }, 1500);
-    };
-
-    loadUsers();
-  };
-
-  const reset = () => {
-    setExampleState(initialState);
-  };
-
-  if (loading) {
-    return (
-      <div style={{ width: 300 }}>
-        <Loader
-          variant="primary"
-          description={<Text weight="medium">Fetching users, please wait</Text>}
-        />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return <Button variant="primary" text="Fetch users" onClick={handleClick} />;
-  }
-
-  return (
-    <>
-      <ListContainer variant="primary" style={{ width: '100%' }}>
-        {data.map(({ id, name }) => (
-          <ListItem key={id} as="li" text={name} />
-        ))}
-      </ListContainer>
-      <Button text="Reset" onClick={reset} />
-    </>
-  );
-};
+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

@@ -5,14 +5,14 @@ import { Variant } from 'lib/types';
 import { box } from 'ui/elements';
 
 interface LoaderProps {
-  description?: React.ReactChild;
   className?: string;
+  description?: React.ReactChild;
 }
 
 const LoaderBase = ({
+  className,
   description = 'Loading...',
   variant = 'secondary',
-  className,
 }: LoaderProps & Variant) => {
   return (
     <div className={className} data-variant={variant}>

src/ui/atoms/loader/usage.mdx

@@ -5,8 +5,8 @@ package: 'woly'
 ---
 
 import {Loader, Button, Text} from 'ui';
-import {Playground, State} from 'lib/playground';
-import {ExampleDataFetching} from './example';
+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.
@@ -19,7 +19,7 @@ Use a `Loader` component whenever the wait time is anticipated to be longer than
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <>
-        <Button text="Toggle loader" onClick={change} />
+        <Button text="Toggle loader" onClick={change} variant="primary" />
         {value ? (
           <div style={{ width: 300 }}>
             <Loader description={<Text type="S">Some action in progress...</Text>} />
@@ -33,7 +33,35 @@ Use a `Loader` component whenever the wait time is anticipated to be longer than
 ### Example with data fetching
 
 <Playground>
-  <ExampleDataFetching />
+  <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