Update: updated...

.storybook/preview.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Preview } from '@storybook/react';
+import { ThemeProvider } from 'styled-components';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { GlobalStore } from '../src/global-store';
+import { theme, GlobalStyles } from '../src/design-system';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <GlobalStyles theme={theme} />
+        <QueryClientProvider client={new QueryClient()}>
+          <GlobalStore>
+            <div style={{ width: '100vw', height: '100vh', backgroundColor: '#fff' }}>
+              <Story />
+            </div>
+          </GlobalStore>
+        </QueryClientProvider>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -12,8 +12,8 @@
     "test:cv": "yarn run test --coverage --watchAll=false",
     "lint": "eslint . --ext .ts --ext .tsx",
     "format": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "sb": "storybook dev -p 6006",
+    "build:sb": "storybook build",
     "pkgs:audit": " yarn audit --json > audit.json",
     "performance:audit": "lighthouse http://localhost:3000/",
     "pre:commit": "yarn run  lint",

src/shared/components/async-renderer/index.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { TextLoader } from 'shared/components';
+
+type PrimitiveDivPropTypes = React.ComponentPropsWithoutRef<'div'>;
+type AsyncRendererElement = React.ElementRef<'div'>;
+
+interface AsyncRendererPropTypes<DataType> extends Omit<PrimitiveDivPropTypes, 'children'> {
+  isLoading?: boolean;
+  error?: Error | null;
+  data?: DataType | null;
+  loader?: React.ReactNode;
+  children?: ((data: DataType) => React.ReactNode) | React.ReactNode;
+}
+
+export const AsyncRenderer = React.forwardRef<AsyncRendererElement, AsyncRendererPropTypes<any>>(
+  ({ isLoading, error, data, loader, children, ...rest }, forwardedRef) => {
+    if (isLoading) {
+      return (
+        <div {...rest} ref={forwardedRef}>
+          {loader || <TextLoader isLoading={isLoading} />}
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div {...rest} ref={forwardedRef}>
+          {error.message}
+        </div>
+      );
+    }
+
+    return (
+      <div {...rest} ref={forwardedRef}>
+        {typeof children === 'function' ? children(data) : children}
+      </div>
+    );
+  }
+);

src/shared/components/async-renderer/index.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { StoryFn, Meta } from '@storybook/react';
+
+import { AsyncRenderer } from './index.component';
+
+export default {
+  title: 'Components/AsyncRenderer',
+  component: AsyncRenderer,
+} as Meta<typeof AsyncRenderer>;
+
+export const IsLoading: StoryFn<typeof AsyncRenderer> = () => <AsyncRenderer isLoading />;
+
+export const WithError: StoryFn<typeof AsyncRenderer> = () => (
+  <AsyncRenderer error={new Error('Not authorized!')} />
+);
+
+export const WithJsxData: StoryFn<typeof AsyncRenderer> = () => (
+  <AsyncRenderer>Hello, World!</AsyncRenderer>
+);
+
+export const WithFCCData: StoryFn<typeof AsyncRenderer> = () => (
+  <AsyncRenderer data={{ name: 'Foo Bar Baz' }}>{(data) => data.name}</AsyncRenderer>
+);

src/shared/components/async-renderer/index.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from 'test';
+
+import { AsyncRenderer } from './index.component';
+
+describe('<AsyncRenderer/>', () => {
+  it('should render loader when isLoading is true', () => {
+    render(
+      <AsyncRenderer
+        isLoading={true}
+        error={null}
+        data={null}
+        loader="Loading..."
+        children={() => null}
+      />
+    );
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render error message when error is not null', () => {
+    render(
+      <AsyncRenderer
+        isLoading={false}
+        error={new Error('Error message')}
+        data={null}
+        children={() => null}
+      />
+    );
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+  });
+
+  it('should render children when isLoading is false and error is null', () => {
+    render(
+      <AsyncRenderer
+        isLoading={false}
+        error={null}
+        data={{ name: 'Foo Bar Baz' }}
+        children={(data) => data.name}
+      />
+    );
+    expect(screen.getByText('Foo Bar Baz')).toBeInTheDocument();
+  });
+
+  it('should render children when isLoading is false and error is null', () => {
+    render(
+      <AsyncRenderer isLoading={false} error={null} data={null}>
+        Children
+      </AsyncRenderer>
+    );
+    expect(screen.getByText('Children')).toBeInTheDocument();
+  });
+});

src/shared/components/index.ts

@@ -1,3 +1,5 @@
+export * from './loader/index.component';
 export * from './headings/index.component';
 export * from './error-boundary/index.component';
+export * from './async-renderer/index.component';
 export * from './internet-notifier/index.component';

src/shared/components/internet-notifier/index.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+
+import { Meta } from '@storybook/react';
 
 import { InternetNotifier } from './index.component';
 
@@ -8,6 +9,4 @@ export default {
   component: InternetNotifier,
 } as Meta<typeof InternetNotifier>;
 
-export const TurnOnAndOffYourWifiToSee: StoryFn<typeof InternetNotifier> = () => (
-  <InternetNotifier />
-);
+export const TurnOnAndOffYourWifiToSee = () => <InternetNotifier />;

src/shared/components/loader/base/index.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useBaseLogic } from './useBaseLogic';
+
+type PrimitiveDivPropTypes = React.ComponentPropsWithoutRef<'div'>;
+export type LoaderElement = React.ElementRef<'div'>;
+export interface BasePropTypes extends PrimitiveDivPropTypes {
+  isLoading: boolean;
+  benefitOf?: number;
+}
+
+export const Base = React.forwardRef<LoaderElement, BasePropTypes>(function Base(
+  { isLoading, benefitOf, children, ...restProps },
+  forwardedRef
+) {
+  const { isDoneLoading } = useBaseLogic({ isLoading, benefitOf });
+
+  return (
+    <div {...restProps} ref={forwardedRef} aria-live="polite" aria-busy={isLoading}>
+      <div>{children}</div>
+      {isDoneLoading && <p>Done Loading</p>}
+    </div>
+  );
+});

src/shared/components/loader/base/useBaseLogic.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+
+type ArgType = {
+  isLoading: boolean;
+  /**
+   * @benefitOf the maximum time in milliseconds if the
+   * side effect if not DoneLoading the loader will be shown
+   */
+  benefitOf?: number;
+};
+
+export const useBaseLogic = ({ isLoading, benefitOf = 2000 }: ArgType) => {
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * @isDoneLoading is a state that will be set to true to notify
+   * the accessibility gadget users that loading is done
+   */
+  const [isDoneLoading, setDoneLoading] = useState(false);
+
+  /**
+   * Give the side effect a benefit of 20000ms to show the loader
+   */
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isLoading) timer = setTimeout(() => setLoading(true), benefitOf);
+    return () => clearTimeout(timer);
+  });
+
+  /**
+   * Tell accessibility gadget users that loading is done
+   */
+  useEffect(() => {
+    if (loading && !isLoading && !isDoneLoading) {
+      setLoading(false);
+      setDoneLoading(true);
+    }
+  }, [isDoneLoading, isLoading, loading]);
+
+  /**
+   * Turn isDoneLoading to false after 2000ms
+   */
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isDoneLoading) timer = setTimeout(() => setDoneLoading(false), 2000);
+    return () => clearTimeout(timer);
+  });
+
+  return {
+    loading,
+    isDoneLoading,
+  };
+};

src/shared/components/loader/gif/index.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { OuterRing, InnerRing } from './index.style';
+import { Base, LoaderElement, BasePropTypes } from '../base/index.component';
+
+export const GifLoader = React.forwardRef<LoaderElement, BasePropTypes>(
+  function GifLoader(props, forwardedRef) {
+    return (
+      <Base {...props} ref={forwardedRef}>
+        <OuterRing />
+        <InnerRing />
+      </Base>
+    );
+  }
+);

src/shared/components/loader/gif/index.style.tsx

@@ -0,0 +1,41 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+    0% {
+        transform:rotate(0deg);
+    }
+
+    100% {
+        transform:rotate(360deg);
+    }
+`;
+
+const OuterRing = styled.div`
+  position: absolute;
+  left: calc(50% - 150px);
+  height: 150px;
+  width: 150px;
+  border-radius: 50%;
+  background-image: linear-gradient(
+    135deg,
+    #feed07 0%,
+    #fe6a50 5%,
+    #ed00aa 15%,
+    #2fe3fe 50%,
+    #8900ff 100%
+  );
+  animation-duration: 2s;
+  animation-name: ${rotate};
+  animation-iteration-count: infinite;
+`;
+
+const InnerRing = styled.div`
+  position: absolute;
+  left: calc(50% - 140px);
+  height: 140px;
+  width: 140px;
+  border-radius: 50%;
+  background-image: linear-gradient(0deg, #36295e, #1c1045);
+`;
+
+export { OuterRing, InnerRing };

src/shared/components/loader/index.component.tsx

@@ -0,0 +1,3 @@
+export * from './base/index.component';
+export * from './gif/index.component';
+export * from './text/index.component';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+
+import * as Loaders from './index.component';
+
+export default {
+  title: 'Components/Loaders',
+  component: Loaders.Base,
+} as Meta<typeof Loaders.Base>;
+
+export const TextLoader = () => <Loaders.TextLoader isLoading />;
+
+export const GifLoader = () => <Loaders.GifLoader isLoading />;

src/shared/components/loader/index.test.tsx

@@ -0,0 +1,9 @@
+import * as Loaders from './index.component';
+
+describe('<Loaders/>', () => {
+  describe('<TextLoader/>', () => {});
+
+  describe('<GifLoader/>', () => {});
+
+  describe('<SkeletonLoader/>', () => {});
+});

src/shared/components/loader/text/index.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Text } from './index.style';
+import { Base, LoaderElement, BasePropTypes } from '../base/index.component';
+
+export const TextLoader = React.forwardRef<LoaderElement, BasePropTypes>(
+  function TextLoader(props, forwardedRef) {
+    return (
+      <Base {...props} ref={forwardedRef}>
+        <Text>Loading...</Text>
+      </Base>
+    );
+  }
+);

src/shared/components/loader/text/index.style.tsx

@@ -0,0 +1,16 @@
+import styled, { keyframes } from 'styled-components';
+
+const dim = keyframes`
+  0% {
+    color: inherit;
+  }
+
+  100% {
+    color: hsl(200, 20%, 95%);
+  }
+`;
+
+export const Text = styled.p`
+  opacity: 0.7;
+  animation: ${dim} 1s linear infinite alternate;
+`;