storybook: add Button and Spinner examples

apps/portal/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Button, CounterButton } from '@tih/ui';
+import { Button, Spinner } from '@tih/ui';
 
 export default function HomePage() {
   return (
@@ -8,8 +8,8 @@ export default function HomePage() {
           <h1 className="text-center text-4xl font-bold text-red-600">
             Homepage
           </h1>
-          <CounterButton />
           <Button label="Button text" size="md" variant="primary" />
+          <Spinner size="md" />
         </div>
       </div>
     </main>

apps/storybook/.storybook/main.js

@@ -2,7 +2,18 @@ const path = require('path');
 
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: [
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+  ],
   framework: '@storybook/react',
   core: {
     builder: '@storybook/builder-vite',

apps/storybook/.storybook/preview.js

@@ -1 +1,6 @@
+import 'tailwindcss/tailwind.css';
 import '@tih/ui/dist/styles.css';
+
+export const parameters = {
+  controls: { expanded: true },
+};

apps/storybook/package.json

@@ -14,17 +14,21 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@heroicons/react": "^2.0.11",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-docs": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-vite": "^0.1.33",
     "@storybook/react": "^6.4.18",
     "@tih/tailwind-config": "*",
     "@tih/tsconfig": "*",
     "@vitejs/plugin-react": "^1.3.2",
+    "autoprefixer": "^10.4.12",
     "eslint-config-tih": "*",
     "serve": "^13.0.2",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.8.3",
     "vite": "^2.9.9"
   }

apps/storybook/postcss.config.js

@@ -1,13 +1,6 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-const config = require('@tih/tailwind-config/tailwind.config.js');
-
 module.exports = {
   plugins: {
-    // Specifying the config is not necessary in most cases, but it is included
+    tailwindcss: {},
-    // here to share the same config across the entire monorepo
-    tailwindcss: { config },
     autoprefixer: {},
   },
 };

apps/storybook/stories/button.stories.tsx

@@ -1,33 +1,243 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 
-import { Button } from '@tih/ui';
+import {
+  Button,
+  ButtonAddOnPosition,
+  ButtonDisplay,
+  ButtonSize,
+  ButtonType,
+  ButtonVariant,
+} from '@tih/ui';
 import React from 'react';
+import { EnvelopeIcon } from '@heroicons/react/24/solid';
+
+const buttonTypes: ReadonlyArray<ButtonType> = ['button', 'reset', 'submit'];
+const buttonSizes: ReadonlyArray<ButtonSize> = ['sm', 'md', 'lg'];
+const buttonAddOnPositions: ReadonlyArray<ButtonAddOnPosition> = [
+  'start',
+  'end',
+];
+const buttonDisplays: ReadonlyArray<ButtonDisplay> = ['block', 'inline'];
+const buttonVariants: ReadonlyArray<ButtonVariant> = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'special',
+  'success',
+];
 
-//👇 This default export determines where your story goes in the story list
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
   title: 'Button',
   component: Button,
+  argTypes: {
+    addonPosition: {
+      options: buttonAddOnPositions,
+      control: { type: 'select' },
+    },
+    display: {
+      options: buttonDisplays,
+      control: { type: 'select' },
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    isLoading: {
+      control: 'boolean',
+    },
+    label: {
+      control: 'string',
+    },
+    size: {
+      options: buttonSizes,
+      control: { type: 'select' },
+    },
+    type: {
+      options: buttonTypes,
+      control: { type: 'select' },
+    },
+    variant: {
+      options: buttonVariants,
+      control: { type: 'select' },
+    },
+  },
 } as ComponentMeta<typeof Button>;
 
-//👇 We create a “template” of how args map to rendering
+export const Basic = {
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+  args: {
+    label: 'Click Me',
+    size: 'md',
+    variant: 'primary',
+  },
+};
 
-export const PrimaryButton = Template.bind({});
+export function Variant() {
+  return (
+    <div className="space-x-4">
+      {buttonVariants.map((variant) => (
+        <Button key={variant} label="Click Me" size="md" variant={variant} />
+      ))}
+    </div>
+  );
+}
 
-PrimaryButton.args = {
+export function Size() {
-  label: 'Button text',
+  return (
-  size: 'md',
+    <div className="space-x-4">
-  variant: 'primary',
+      {buttonSizes.map((size) => (
-};
+        <Button key={size} label="Click Me" size={size} variant="primary" />
+      ))}
+    </div>
+  );
+}
 
-export const SecondaryButton = Template.bind({});
+export function Display() {
+  return (
+    <div className="space-y-4">
+      {buttonSizes.map((size) => (
+        <Button
+          key={size}
+          display="block"
+          label="Click Me"
+          size={size}
+          variant="primary"
+        />
+      ))}
+    </div>
+  );
+}
 
-SecondaryButton.args = {
+export function Disabled() {
-  label: 'Button text',
+  return (
-  size: 'md',
+    <div className="space-x-4">
-  variant: 'secondary',
+      {buttonVariants.map((variant) => (
-};
+        <Button
+          isDisabled={true}
+          key={variant}
+          label="Click Me"
+          size="md"
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function Loading() {
+  return (
+    <div className="space-y-4">
+      <div className="space-x-4">
+        {buttonVariants.map((variant) => (
+          <Button
+            isLoading={true}
+            key={variant}
+            label="Click Me"
+            size="md"
+            variant={variant}
+          />
+        ))}
+      </div>
+      <div className="space-x-4">
+        {buttonVariants.map((variant) => (
+          <Button
+            isDisabled={true}
+            isLoading={true}
+            key={variant}
+            label="Click Me"
+            size="md"
+            variant={variant}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function Icons() {
+  return (
+    <div className="space-y-4">
+      <div className="space-x-4">
+        {buttonSizes.map((size) => (
+          <Button
+            key={size}
+            icon={EnvelopeIcon}
+            label="Click Me"
+            size={size}
+            variant="primary"
+          />
+        ))}
+        <Button
+          icon={EnvelopeIcon}
+          isDisabled={true}
+          label="Click Me"
+          size="lg"
+          variant="primary"
+        />
+      </div>
+      <div className="space-x-4">
+        {buttonSizes.map((size) => (
+          <Button
+            key={size}
+            addonPosition="start"
+            icon={EnvelopeIcon}
+            label="Click Me"
+            size={size}
+            variant="primary"
+          />
+        ))}
+        <Button
+          addonPosition="start"
+          icon={EnvelopeIcon}
+          isDisabled={true}
+          label="Click Me"
+          size="lg"
+          variant="primary"
+        />
+      </div>
+      <div className="space-y-4">
+        {buttonSizes.map((size) => (
+          <Button
+            key={size}
+            display="block"
+            icon={EnvelopeIcon}
+            label="Click Me"
+            size={size}
+            variant="primary"
+          />
+        ))}
+        <Button
+          display="block"
+          icon={EnvelopeIcon}
+          isDisabled={true}
+          label="Click Me"
+          size="lg"
+          variant="primary"
+        />
+      </div>
+    </div>
+  );
+}
+
+export function HiddenLabel() {
+  return (
+    <div className="space-x-4">
+      {buttonSizes.map((size) => (
+        <Button
+          key={size}
+          icon={EnvelopeIcon}
+          isLabelHidden={true}
+          label="Click Me"
+          size={size}
+          variant="primary"
+        />
+      ))}
+      <Button
+        icon={EnvelopeIcon}
+        isDisabled={true}
+        isLabelHidden={true}
+        label="Click Me"
+        size="lg"
+        variant="primary"
+      />
+    </div>
+  );
+}

apps/storybook/stories/counterbutton.stories.mdx

@@ -1,20 +0,0 @@
-import { CounterButton } from '@tih/ui';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-<Meta title="Components/Button" component={CounterButton} />
-
-# Button
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod.
-
-## Props
-
-<ArgsTable of={CounterButton} />
-
-## Examples
-
-<Canvas>
-  <Story name="Default">
-    <CounterButton>Hello</CounterButton>
-  </Story>
-</Canvas>

apps/storybook/stories/spinner.stories.tsx

@@ -0,0 +1,57 @@
+import { ComponentMeta } from '@storybook/react';
+
+import { Spinner, SpinnerColor, SpinnerSize, SpinnerDisplay } from '@tih/ui';
+import React from 'react';
+
+const spinnerColors: ReadonlyArray<SpinnerColor> = ['default', 'inherit'];
+const spinnerDisplays: ReadonlyArray<SpinnerDisplay> = ['block', 'inline'];
+const spinnerSizes: ReadonlyArray<SpinnerSize> = ['xs', 'sm', 'md', 'lg'];
+
+export default {
+  title: 'Spinner',
+  component: Spinner,
+  argTypes: {
+    color: {
+      options: spinnerColors,
+      control: { type: 'select' },
+    },
+    display: {
+      options: spinnerDisplays,
+      control: { type: 'select' },
+    },
+    label: {
+      control: 'string',
+    },
+    size: {
+      options: spinnerSizes,
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof Spinner>;
+
+export const Basic = {
+  args: {
+    label: 'Loading data',
+    size: 'md',
+  },
+};
+
+export function Size() {
+  return (
+    <div className="space-x-4">
+      {spinnerSizes.map((size) => (
+        <Spinner key={size} label="Loading..." size={size} />
+      ))}
+    </div>
+  );
+}
+
+export function Display() {
+  return (
+    <div className="space-y-4">
+      {spinnerSizes.map((size) => (
+        <Spinner key={size} display="block" label="Loading..." size={size} />
+      ))}
+    </div>
+  );
+}

apps/storybook/tailwind.config.js

@@ -0,0 +1,7 @@
+const config = require('@tih/tailwind-config/tailwind.config.js');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...config,
+  content: [...config.content, './stories/**/*.{js,jsx,ts,tsx,md,mdx}'],
+};

packages/ui/package.json

@@ -30,6 +30,7 @@
     "@tih/tsconfig": "*",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "autoprefixer": "^10.4.12",
     "concurrently": "^7.4.0",
     "eslint": "^8.24.0",
     "eslint-config-tih": "*",

packages/ui/src/Button/Button.tsx

@@ -4,8 +4,10 @@ import type { UrlObject } from 'url';
 
 import Spinner from '../Spinner';
 
+export type ButtonAddOnPosition = 'end' | 'start';
 export type ButtonDisplay = 'block' | 'inline';
 export type ButtonSize = 'lg' | 'md' | 'sm';
+export type ButtonType = 'button' | 'reset' | 'submit';
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
@@ -14,7 +16,7 @@ export type ButtonVariant =
   | 'tertiary';
 
 type Props = Readonly<{
-  addonPosition?: 'end' | 'start';
+  addonPosition?: ButtonAddOnPosition;
   'aria-controls'?: string;
   className?: string;
   display?: ButtonDisplay;
@@ -26,7 +28,7 @@ type Props = Readonly<{
   label: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   size?: ButtonSize;
-  type?: 'button' | 'submit';
+  type?: ButtonType;
   variant: ButtonVariant;
 }>;
 

packages/ui/src/CounterButton.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-export function CounterButton() {
-  const [count, setCount] = React.useState(0);
-  return (
-    <div
-      style={{
-        background: `rgba(0,0,0,0.05)`,
-        borderRadius: `8px`,
-        fontWeight: 500,
-        padding: '1.5rem',
-      }}>
-      <p className="text-green-500" style={{ margin: '0 0 1.5rem 0' }}>
-        This component is from{' '}
-        <code
-          style={{
-            background: `rgba(0,0,0,0.1)`,
-            borderRadius: '0.25rem',
-            padding: '0.2rem 0.3rem',
-          }}>
-          @tih/ui
-        </code>
-      </p>
-      <div>
-        <button
-          style={{
-            background: 'black',
-            border: 'none',
-            borderRadius: '0.25rem',
-            color: 'white',
-            cursor: 'pointer',
-            display: 'inline-block',
-            padding: '0.5rem 1rem',
-          }}
-          type="button"
-          onClick={() => setCount((c) => c + 1)}>
-          Count: {count}
-        </button>
-      </div>
-    </div>
-  );
-}

packages/ui/src/NewTabLink.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-export function NewTabLink({
-  children,
-  href,
-  ...other
-}: {
-  children: React.ReactNode;
-  href: string;
-}) {
-  return (
-    <a href={href} rel="noreferrer" target="_blank" {...other}>
-      {children}
-    </a>
-  );
-}

packages/ui/src/index.tsx

@@ -1,4 +1,4 @@
 export { default as Button } from './Button';
 export * from './Button';
-export { CounterButton } from './CounterButton';
+export { default as Spinner } from './Spinner';
-export { NewTabLink } from './NewTabLink';
+export * from './Spinner';

yarn.lock

@@ -2372,6 +2372,17 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-postcss@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498"
+  integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==
+  dependencies:
+    "@storybook/node-logger" "^6.1.14"
+    css-loader "^3.6.0"
+    postcss "^7.0.35"
+    postcss-loader "^4.2.0"
+    style-loader "^1.3.0"
+
 "@storybook/addon-toolbars@6.5.12":
   version "6.5.12"
   resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.12.tgz#ea81c63ae56eae8bc1d3b5a358cff66ae5a2d66e"
@@ -2858,7 +2869,7 @@
     prettier ">=2.2.1 <=2.3.0"
     ts-dedent "^2.0.0"
 
-"@storybook/node-logger@6.5.12":
+"@storybook/node-logger@6.5.12", "@storybook/node-logger@^6.1.14":
   version "6.5.12"
   resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.12.tgz#0f9efcd1a37c7aae493b22fe33cacca87c135b9b"
   integrity sha512-jdLtT3mX5GQKa+0LuX0q0sprKxtCGf6HdXlKZGD5FEuz4MgJUGaaiN0Hgi+U7Z4tVNOtSoIbYBYXHqfUgJrVZw==
@@ -11442,7 +11453,7 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
   integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==