feat/storybook #3

.storybook/main.js

@@ -1,10 +1,8 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-postcss',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+};

.storybook/preview.js

@@ -1,9 +1,23 @@
+import 'reflect-metadata';
+import { Provider } from 'inversify-react';
+import { globalContainer } from '../src';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};
+
+const withInversifyProvider = (Story, context) => {
+  return (
+    <Provider container={globalContainer}>
+      <Story {...context} />
+    </Provider>
+  );
+};
+
+export const decorators = [withInversifyProvider];

package.json

@@ -42,10 +42,11 @@
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.3.12",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "^6.4.0",
     "@testing-library/react": "^12.1.2",
     "@types/faker": "^5.5.9",
     "@types/jest": "^27.0.3",

postcss.config.js

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')({
+      flexbox: 'no-2009',
+    }),
+  ],
+};

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,36 @@
+import { action } from '@storybook/addon-actions';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { useEffect } from 'react';
+import Breadcrumbs from '.';
+import useUIStore from '../../hooks/useUIStore';
+
+const onClickAction = action('onClickAction');
+
+export default {
+  title: 'Breadcrumbs',
+  component: Breadcrumbs,
+} as ComponentMeta<typeof Breadcrumbs>;
+
+const Template: ComponentStory<typeof Breadcrumbs> = (args) => {
+  const uiStore = useUIStore();
+
+  useEffect(() => {
+    uiStore.breadcrumb.setPaths([
+      {
+        label: 'Home',
+        onClick: () => onClickAction('Home'),
+      },
+      {
+        label: 'About',
+        onClick: () => onClickAction('About'),
+      },
+      {
+        label: 'Contact',
+      },
+    ]);
+  }, []);
+  return <Breadcrumbs {...args} />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {};

src/components/Breadcrumb/index.tsx → src/components/Breadcrumbs/index.tsx

@@ -1,21 +1,37 @@
-import useUIStore from '../../hooks/useUIStore';
 import MuiBreadcrumbs, { BreadcrumbsProps } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
+import useUIStore from '../../hooks/useUIStore';
+import { BreadcrumbPath } from './types';
+
+function handleClickLink(
+  path: BreadcrumbPath
+): MouseEventHandler<HTMLAnchorElement> {
+  return (e) => {
+    e.preventDefault();
+    if (path.onClick && !path.link) {
+      path.onClick();
+    }
+  };
+}
 
 function Breadcrumbs(props: BreadcrumbsProps) {
   const uiStore = useUIStore();
 
   return (
     <MuiBreadcrumbs {...props}>
-      {uiStore.breadcrumb.paths.map((path) => (
+      {uiStore.breadcrumb.linkedPaths.map((path) => (
         <Link
           key={path.link}
           underline="hover"
           color="inherit"
           href={path.link}
+          onClick={handleClickLink(path)}
+          sx={{
+            cursor: 'pointer',
+          }}
         >
           {path.label}
         </Link>

src/components/Breadcrumbs/types.ts

@@ -0,0 +1,5 @@
+export interface BreadcrumbPath {
+  label: string;
+  link?: string;
+  onClick?: () => void;
+}

src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Typography } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { useEffect } from 'react';
+import Dialog from '.';
+import useUIStore from '../../hooks/useUIStore';
+
+const onAcceptAction = action('onAccept');
+const onRejectAction = action('onReject');
+
+export default {
+  title: 'Dialog',
+  component: Dialog,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+  argTypes: {
+    title: {
+      control: 'text',
+      defaultValue: 'Dialog title',
+    },
+    content: {
+      control: 'text',
+      defaultValue: 'Dialog content',
+    },
+    onReject: {
+      control: 'boolean',
+    },
+    onAccept: {
+      control: 'boolean',
+    },
+  },
+} as ComponentMeta<typeof Dialog>;
+
+const Template: ComponentStory<typeof Dialog> = (args) => {
+  const uiStore = useUIStore();
+
+  useEffect(() => {
+    uiStore.dialog.set({
+      title: 'Template Title',
+      content: (
+        <Typography>
+          Template Content, you can add any JSX element here, like images, form
+          and another element
+        </Typography>
+      ),
+      onReject: () => onRejectAction('onReject clicked'),
+      onAccept: () => onAcceptAction('onAccept clicked'),
+    });
+    uiStore.dialog.open();
+  }, []);
+  return <Dialog {...args} />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: 'Dialog Title',
+  confirmLabel: 'Confirm',
+  cancelLabel: 'Cancel',
+};
+
+export const Custom = ({
+  title,
+  content,
+  onReject,
+  onAccept,
+}: {
+  title: string;
+  content: string;
+  onReject: boolean;
+  onAccept: boolean;
+}) => {
+  const uiStore = useUIStore();
+
+  useEffect(() => {
+    uiStore.dialog.set({
+      title,
+      content: <Typography>{content}</Typography>,
+      onReject: onReject ? () => onRejectAction('onReject clicked') : undefined,
+      onAccept: onAccept ? () => onAcceptAction('onAccept clicked') : undefined,
+    });
+    uiStore.dialog.open();
+  }, [title, content, onReject, onAccept]);
+
+  return <Dialog confirmLabel="Confirm" cancelLabel="Cancel" />;
+};

src/components/Dialog/index.tsx

@@ -1,4 +1,3 @@
-import useUIStore from '../../hooks/useUIStore';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { Backdrop } from '@mui/material';
 import Button from '@mui/material/Button';
@@ -8,6 +7,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import useUIStore from '../../hooks/useUIStore';
 import { DialogProps } from './types';
 
 function Dialog({
@@ -21,14 +21,9 @@ function Dialog({
     <Backdrop
       sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
       open={uiStore.dialog.isOpen}
-      onClick={uiStore.dialog.onReject}
+      onClick={uiStore.dialog.close}
     >
-      <MuiDialog
-        {...rest}
-        open={uiStore.dialog.isOpen}
-        keepMounted
-        onClose={uiStore.dialog.onReject}
-      >
+      <MuiDialog {...rest} open={uiStore.dialog.isOpen} keepMounted>
         {uiStore.dialog.title ? (
           <DialogTitle>{uiStore.dialog.title}</DialogTitle>
         ) : null}
@@ -42,7 +37,7 @@ function Dialog({
           {uiStore.dialog.onAccept && (
             <LoadingButton
               loading={false}
-              onClick={uiStore.dialog.onReject}
+              onClick={uiStore.dialog.onAccept}
               color="primary"
               variant="contained"
             >

src/components/Dialog/types.ts

@@ -1,7 +1,7 @@
 import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
 
-export interface DialogProps extends MuiDialogProps {
+export interface DialogProps extends Omit<MuiDialogProps, 'open'> {
   cancelLabel?: string;
   confirmLabel?: string;
-  open: boolean;
+  open?: boolean;
 }

src/components/Snackbar/Snackbar.stories.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { AlertColor } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
+import React, { useEffect } from 'react';
+import Snackbar from '.';
+import useUIStore from '../../hooks/useUIStore';
+
+const onClickAction = action('onClickAction');
+
+export default {
+  title: 'Snackbar',
+  component: Snackbar,
+  argTypes: {
+    message: {
+      control: 'text',
+      defaultValue: 'Snackbar title',
+    },
+    severity: {
+      options: ['success', 'info', 'warning', 'error', null],
+      control: { type: 'radio' },
+      defaultValue: 'info',
+    },
+    actionLabel: {
+      control: 'text',
+      defaultValue: 'Confirm',
+    },
+  },
+} as ComponentMeta<typeof Snackbar>;
+
+export const Custom = ({
+  message,
+  severity,
+  actionLabel,
+}: {
+  message: string;
+  actionLabel: string;
+  severity: AlertColor;
+}) => {
+  const uiStore = useUIStore();
+
+  useEffect(() => {
+    uiStore.snackbar.show({
+      message,
+      severity,
+      actionLabel,
+      onActionClick: () => onClickAction('Snackbar button clicked'),
+    });
+  }, [message, severity, actionLabel]);
+
+  return <Snackbar />;
+};