[Doc-43] add stories to atoms

package.json

@@ -80,12 +80,12 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.3.2",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-links": "^6.3.2",
-    "@storybook/node-logger": "^6.3.2",
+    "@storybook/addon-actions": "^6.3.6",
+    "@storybook/addon-essentials": "^6.3.6",
+    "@storybook/addon-links": "^6.3.6",
+    "@storybook/node-logger": "^6.3.6",
     "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.2",
+    "@storybook/react": "^6.3.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",

public/locales/en/translation.json

@@ -83,7 +83,7 @@
     "all": "all"
   },
   "header": {
-    "Search":"Search",
+    "Search": "Search",
     "User Greeting": "Hello",
     "User Info Update": "Update Info"
   },

public/locales/he/translation.json

@@ -83,7 +83,7 @@
     "all": "הכל"
   },
   "header": {
-    "Search":"חיפוש",
+    "Search": "חיפוש",
     "User Greeting": "שלום",
     "User Info Update": "פרטי משתמש"
   },

src/components/atoms/Button.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Button as MatButton, IconButton as MatIconButton } from '@material-ui/core';
 
-interface IProps {
+export interface IProps {
   onClick?: () => any;
   isSubmit?: boolean;
 }
@@ -25,7 +25,11 @@ const TextButton: FC<IProps> = ({ isSubmit = false, onClick, children }) => (
   </MatButton>
 );
 
-const IconButton: FC<IProps> = ({ onClick, children }) => <MatIconButton onClick={onClick}>{children}</MatIconButton>;
+const IconButton: FC<IProps> = ({ isSubmit = false, onClick, children }) => (
+  <MatIconButton type={isSubmit ? 'submit' : 'button'} onClick={onClick}>
+    {children}
+  </MatIconButton>
+);
 
 const Button = {
   Standard: StandardButton,

src/components/atoms/Link.tsx

@@ -12,7 +12,7 @@ const useStyles = makeStyles({
     },
   },
 });
-interface IProps extends LinkProps {
+export interface IProps extends LinkProps {
   to: string;
 }
 

src/components/atoms/Loader.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
-interface IProps {
-}
+export interface IProps {}
 
-const Loader: FC<IProps> = () => <CircularProgress />
-export default Loader;
+const Loader: FC<IProps> = () => <CircularProgress />;
+export default Loader;

src/components/atoms/Menu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactElement } from 'react';
 import MaterialMenu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-interface IProps {
+export interface IProps {
   items: Array<ReactElement>;
   handleClose: () => any;
   anchorEl: HTMLElement | null;

src/components/atoms/stories/AnyWayButton.stories.tsx

@@ -0,0 +1,16 @@
+import React, { ComponentProps } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { AnyWayButton } from '../AnyWayButton';
+
+export default {
+  title: 'Components/atoms/AnyWayButton',
+  component: AnyWayButton,
+} as Meta;
+
+const Template: Story<ComponentProps<typeof AnyWayButton>> = (args) => <AnyWayButton {...args} />;
+
+export const AnyWayButtonS = Template.bind({});
+AnyWayButtonS.args = {
+  onClick: () => console.log('You clicked it!'),
+  children: 'Anyway Button',
+};

src/components/atoms/stories/AppBar.stories.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps } from 'react';
+import { Story, Meta } from '@storybook/react';
+import AppBar from '../AppBar';
+
+export default {
+  title: 'Components/atoms/AppBar',
+  component: AppBar,
+} as Meta;
+
+const Template: Story<ComponentProps<typeof AppBar>> = (args) => <AppBar {...args} />;
+
+export const AppBarS = Template.bind({});
+AppBarS.args = {
+  children: <div>This is the AppBar</div>,
+};

src/components/atoms/stories/Button.stories.tsx

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Story, Meta } from '@storybook/react';
+import Button, { IProps } from 'components/atoms/Button';
+
+export default {
+  title: 'Components/atoms/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['outlined', 'standard', 'icon', 'text'],
+      control: { type: 'select' },
+    },
+  },
+} as unknown as Meta;
+
+const Template: Story = ({ children, ...args }) => {
+  if (args.variant === 'standard') {
+    return <Button.Standard {...args}>{children}</Button.Standard>;
+  } else if (args.variant === 'outlined') {
+    return <Button.Outlined {...args}>{children}</Button.Outlined>;
+  } else if (args.variant === 'icon') {
+    return <Button.Icon {...args}>{children}</Button.Icon>;
+  } else if (args.variant === 'text') {
+    return <Button.Text {...args}>{children}</Button.Text>;
+  } else {
+    return <div>This component must have a type prop</div>;
+  }
+};
+
+export const Buttons = Template.bind({});
+Buttons.args = {
+  children: 'Button',
+  variant: 'standard',
+  isSubmit: false,
+  onClick: () => 'text',
+};
+
+// export const ButtonOutlinedS = Template.bind({});
+// ButtonOutlinedS.args = {
+//   type: 'outlined',
+//   children: 'Button',
+// };
+
+// export const ButtonIconS = Template.bind({});
+// ButtonIconS.args = {
+//   type: 'icon',
+//   children: 'Button',
+// };

src/components/atoms/stories/Dialog.stories.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps } from 'react';
+import { Story, Meta } from '@storybook/react';
+import Dialog from '../Dialog';
+
+export default {
+  title: 'Components/atoms/Dialog',
+  component: Dialog,
+} as Meta;
+
+const Template: Story<ComponentProps<typeof Dialog>> = (args) => <Dialog {...args} />;
+
+export const DialogS = Template.bind({});
+DialogS.args = {
+  children: 'DialogS',
+};

src/components/atoms/stories/Grid.stories.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps } from 'react';
+import { Story, Meta } from '@storybook/react';
+import Grid from '../Grid';
+
+export default {
+  title: 'Components/atoms/Grid',
+  component: Grid,
+} as unknown as Meta;
+
+const Template: Story<ComponentProps<typeof Grid.Container>> = (args) => <Grid.Container {...args} />;
+
+export const GridS = Template.bind({});
+GridS.args = {
+  children: 'GridS',
+};

src/components/atoms/stories/Link.stories.tsx

@@ -0,0 +1,22 @@
+import React, { ComponentProps } from 'react';
+import { Story, Meta } from '@storybook/react';
+import Link, { IProps } from '../Link';
+import { BrowserRouter as Router } from 'react-router-dom';
+export default {
+  title: 'Components/atoms/Link',
+  component: Link,
+} as Meta;
+
+const Template: Story<IProps> = (args) => {
+  return (
+    <Router>
+      <Link {...args} />
+    </Router>
+  );
+};
+
+export const LinkS = Template.bind({});
+LinkS.args = {
+  children: 'Example link',
+  to: '#',
+};

src/components/atoms/stories/Loader.stories.tsx

@@ -0,0 +1,10 @@
+import React, { ComponentProps, FC } from 'react';
+import { Story, Meta } from '@storybook/react';
+import Loader, { IProps } from '../Loader';
+
+export default {
+  title: 'Components/atoms/Loader',
+  component: Loader,
+} as Meta;
+
+export const LoaderS: FC<IProps> = (args) => <Loader {...args} />;

src/components/atoms/stories/Menu.stories.tsx

@@ -0,0 +1,34 @@
+import React, { ComponentProps, FC } from 'react';
+import { Story, Meta } from '@storybook/react';
+import Menu, { IProps } from '../Menu';
+
+export default {
+  title: 'Components/atoms/Menu',
+  component: Menu,
+  argTypes: {
+    anchorEl: {
+      control: { type: 'boolean' },
+    },
+  },
+} as Meta;
+
+const Item: FC<ItemProps> = ({ number }) => {
+  return <div>Item no^{number}</div>;
+};
+const NUM_ITEMS = Array.from(Array(10).keys());
+const Items = NUM_ITEMS.map((itemNum) => <Item number={itemNum} />);
+
+const handleClose = () => console.log('Menu Close Function');
+
+const Template: Story<ComponentProps<typeof Menu>> = (args) => <Menu {...args} />;
+
+export const MenuS = Template.bind({});
+MenuS.args = {
+  items: Items,
+  handleClose,
+  anchorEl: document.body,
+};
+
+interface ItemProps {
+  number: number;
+}

src/components/molecules/Header.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box } from '@material-ui/core';
-import { AppBar,Button, Logo } from 'components/atoms';
+import { AppBar, Button, Logo } from 'components/atoms';
 import LogInLinkGoogle from './LogInLinkGoogle';
 import { useStore } from 'store/storeConfig';
 import RootStore from 'store/root.store';
@@ -15,7 +15,6 @@ import { SignInIcon } from 'components/atoms/SignInIcon';
 import MapDialog from 'components/molecules/MapDialog';
 import { IPoint } from 'models/Point';
 
-
 const useStyles = makeStyles({
   userSection: {
     display: 'flex',
@@ -49,7 +48,7 @@ const Header: FC = () => {
       store.fetchSelectedNewsFlashWidgetsByLocation(roadSegmentLocation?.road_segment_id, selectedLanguage);
       setOpen(false);
     }
-  }
+  };
 
   useEffect(() => {
     store.getUserLoginDetails();
@@ -72,10 +71,12 @@ const Header: FC = () => {
         />
       );
     } else {
-      authElement = <>
-        <LogInLinkGoogle />
-        <SignInIcon/>
-      </>;
+      authElement = (
+        <>
+          <LogInLinkGoogle />
+          <SignInIcon />
+        </>
+      );
     }
   }
 

src/components/molecules/MapDialog.tsx

@@ -38,18 +38,18 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const MapDialog: FC<IProps> = ({ section='', open, onClose, location, onLocationChange, onSearch }) => {
+const MapDialog: FC<IProps> = ({ section = '', open, onClose, location, onLocationChange, onSearch }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
   return (
-    <Dialog isShowing={open} onClose={onClose} maxWidth='lg' fullWidth>
+    <Dialog isShowing={open} onClose={onClose} maxWidth="lg" fullWidth>
       <Box className={classes.wrapper}>
         <Box className={classes.dialogHeader}>
           <Typography.Title1>{t('mapDialog.searchSection')}</Typography.Title1>
         </Box>
-        <Box display='flex' flexDirection='column' height='75vh'>
-          <Box display='contents'>
+        <Box display="flex" flexDirection="column" height="75vh">
+          <Box display="contents">
             <LocationSelect location={location} onLocationChange={onLocationChange} />
           </Box>
           <div className={classes.chosenSection}>