Docs(web-react): Introduce new Stories for Button, Modal and Pill

.storybook/main.ts

@@ -44,6 +44,7 @@ const config: StorybookViteConfig = {
 
   docs: {
     autodocs: true,
+    defaultName: 'Overview',
   },
 };
 

.storybook/preview.ts

@@ -9,6 +9,9 @@ export const parameters = {
       color: /(background|color)$/i,
       date: /Date$/,
     },
+    expanded: true,
+    sort: 'alpha',
+    hideNoControlsWarning: true,
   },
   docs: {
     theme: SpiritTheme,

package.json

@@ -63,6 +63,7 @@
     "@storybook/addon-links": "7.3.2",
     "@storybook/addon-mdx-gfm": "7.3.2",
     "@storybook/addons": "7.3.2",
+    "@storybook/blocks": "7.3.2",
     "@storybook/client-api": "7.3.2",
     "@storybook/html": "7.3.2",
     "@storybook/react": "7.3.2",

packages/web-react/.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.md', 'raw', '.md?raw'],
       },
     },
   },
@@ -63,6 +63,15 @@ module.exports = {
     'no-param-reassign': ['warn', { props: false }],
     // support monorepos
     'import/no-extraneous-dependencies': ['error', { packageDir: ['./', '../../'] }],
+    'import/no-unresolved': [
+      2,
+      {
+        ignore: [
+          // Ignore vite's ?raw imports
+          '.*?raw',
+        ],
+      },
+    ],
     // disable double quotes
     quotes: ['warn', 'single'],
   },

packages/web-react/src/components/Button/Button.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+import { args, argTypes } from './stories/args';
+import ReadMe from './README.md?raw';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    ...argTypes,
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+  },
+  args: {
+    ...args,
+    type: 'button',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Playground: Story = {
+  name: 'Button',
+};

packages/web-react/src/components/Button/ButtonLink.stories.tsx

@@ -1,26 +1,26 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import ButtonLink from './ButtonLink';
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import { ButtonLink } from './ButtonLink';
+import { args, argTypes } from './stories/args';
+import ReadMe from './README.md?raw';
+
+const meta: Meta<typeof ButtonLink> = {
   title: 'Components/ButtonLink',
   component: ButtonLink,
   parameters: {
     docs: {
-      description: {
-        component: 'ButtonLinks allow users to take actions.',
-      },
-    },
-  },
-  argTypes: {
-    ...argTypes,
-    href: {
-      control: {
-        type: 'text',
-      },
-      defaultValue: '#',
+      page: () => <Markdown>{ReadMe}</Markdown>,
     },
   },
-} as ComponentMeta<typeof ButtonLink>;
+  argTypes,
+  args,
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonLink>;
 
-export { default as ButtonLink } from './demo/ButtonLink';
+export const Playground: Story = {
+  name: 'ButtonLink',
+};

packages/web-react/src/components/Button/stories/args.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ActionColors, EmotionColors, Sizes } from '../../../constants';
+import { Icon } from '../../Icon';
+
+export const argTypes = {
+  children: {
+    control: 'text',
+    description:
+      'This is the place for the content of the button. In the real code you can pass in any JSX. ' +
+      'In this demo you can set any text you want, or use one of the predefined texts: `<Icon />` ' +
+      '(to see how it looks with an Icon) or `<Icon /> Text` (to see how it looks with an Icon ' +
+      'and text).  Please note the predefined texts in this demo are not customizable and have ' +
+      'to be written exactly as shown.',
+    mapping: {
+      '<Icon />': <Icon name="profile" />,
+      '<Icon /> Text': (
+        <>
+          <Icon name="profile" UNSAFE_className="mr-400" /> Text
+        </>
+      ),
+    },
+  },
+  color: {
+    control: 'select',
+    options: [...Object.values(ActionColors), ...Object.values(EmotionColors)],
+    table: {
+      defaultValue: { summary: ActionColors.PRIMARY },
+    },
+  },
+  isBlock: {
+    control: 'boolean',
+  },
+  isDisabled: {
+    control: 'boolean',
+  },
+  isLoading: {
+    control: 'boolean',
+  },
+  isSquare: {
+    control: 'boolean',
+  },
+  size: {
+    control: 'select',
+    options: [...Object.values(Sizes)],
+  },
+};
+
+export const args = {
+  children: 'Click me',
+  color: ActionColors.PRIMARY,
+  isBlock: false,
+  isDisabled: false,
+  isLoading: false,
+  isSquare: false,
+  size: Sizes.MEDIUM,
+};

packages/web-react/src/components/Modal/Modal.stories.tsx

@@ -1,16 +1,78 @@
-import { ComponentMeta } from '@storybook/react';
-import Modal from './Modal';
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import { SpiritModalProps } from '../../types';
+import { Button } from '../Button';
+import ReadMe from './README.md?raw';
+import { Modal, ModalHeader, ModalDialog, ModalBody, ModalFooter } from '.';
+
+const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
   component: Modal,
   parameters: {
     docs: {
-      description: {
-        component: 'Add dialogs to your site for lightboxes, user notifications, or completely custom content.',
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    id: {
+      control: 'text',
+    },
+    isOpen: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
       },
     },
+    onClose: {
+      control: 'function',
+    },
+  },
+  args: {
+    id: 'modal',
+    isOpen: false,
   },
-} as ComponentMeta<typeof Modal>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+const ModalWithHooks = (args: SpiritModalProps) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const toggleModal = () => setModalOpen(!isModalOpen);
+
+  const handleClose = () => {
+    setModalOpen(false);
+  };
+
+  const { isOpen } = args;
+
+  return (
+    <>
+      <Button onClick={toggleModal} aria-expanded={isOpen || isModalOpen}>
+        Open Modal
+      </Button>
+      <Modal {...args} isOpen={isOpen || isModalOpen} onClose={handleClose}>
+        <ModalDialog preferredHeightOnMobile="500px">
+          <ModalHeader>Modal Header</ModalHeader>
+          <ModalBody>Body</ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={handleClose}>
+              Confirm
+            </Button>
+            <Button color="tertiary" onClick={handleClose}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+    </>
+  );
+};
 
-export { default as Modal } from './demo/Modal';
+export const Playground: Story = {
+  name: 'Modal',
+  render: (args) => <ModalWithHooks {...args} />,
+};