【WIP】storyboook header

src/component/molecules/Header.tsx

@@ -4,65 +4,73 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
-import useScrollTrigger from '@mui/material/useScrollTrigger';
-import Slide from '@mui/material/Slide';
+import useScrollTrigger from "@mui/material/useScrollTrigger";
+import Slide from "@mui/material/Slide";
 
 interface Props {
-    children: React.ReactElement;
+  children: React.ReactElement;
 }
 
 type PropsWindw = {
-    window?: () => Window;
-}
+  window?: () => Window;
+};
 
-const HideOnScroll = ({children}: Props) => {
-    const trigger = useScrollTrigger();
-    return (
-      <Slide appear={false} direction="down" in={!trigger}>
-        {children}
-      </Slide>
-    );
-}
+const HideOnScroll = ({ children }: Props) => {
+  const trigger = useScrollTrigger();
+  return (
+    <Slide appear={false} direction="down" in={!trigger}>
+      {children}
+    </Slide>
+  );
+};
 
-export const Header = (props:PropsWindw) => {
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const useStyles = makeStyles((theme: Theme) => {
-            return createStyles({
-                header: {
-                    backgroundColor: `${ location.pathname === `/` ? `rgba(255, 255, 255, 0)` : `#FFFFFF`}`,
-                    boxShadow: `${ location.pathname === `/` ? `0` : `0px 5px 8px rgba(215, 201, 183, 0.4)`}`
-                },
-                title: {
-                    color: `${ location.pathname === `/` ? `#FFFFFF` : `#828282`}`,
-                    textAlign:"center",
-                    marginTop: '0.2em',
-                    fontFamily:"Caveat",
-                    fontSize: '1.8em',
-                    cursor: 'pointer',
-                    [theme.breakpoints.down('sm')]: {
-                        fontSize: '1em'
-                    }
-                }
-            })
-    });
-    // console.log(location.pathname);
-    useEffect(() => {
+export const Header = (props: PropsWindw) => {
+  const location = useLocation();
+  const navigate = useNavigate();
 
-    }, [location.pathname])
+  const useStyles = makeStyles((theme: Theme) => {
+    return createStyles({
+      header: {
+        backgroundColor: `${
+          location.pathname === `/` ? `rgba(255, 255, 255, 0)` : `#FFFFFF`
+        }`,
+        boxShadow: `${
+          location.pathname === `/`
+            ? `0`
+            : `0px 5px 8px rgba(215, 201, 183, 0.4)`
+        }`,
+      },
+      title: {
+        color: `${location.pathname === `/` ? `#FFFFFF` : `#828282`}`,
+        textAlign: "center",
+        marginTop: "0.2em",
+        fontFamily: "Caveat",
+        fontSize: "1.8em",
+        cursor: "pointer",
+        [theme.breakpoints.down("sm")]: {
+          fontSize: "1em",
+        },
+      },
+    });
+  });
+  // console.log(location.pathname);
+  useEffect(() => {}, [location.pathname]);
 
-    const classes = useStyles();
+  const classes = useStyles();
 
-    return(
-        <HideOnScroll {...props}>
-            <AppBar  elevation={0} className={classes.header}>
-                <Toolbar variant="dense">
-                    <Typography variant="h6" className={classes.title} onClick={() => navigate('/')}>
-                        Riko's handmade
-                    </Typography>
-                </Toolbar>
-            </AppBar>
-        </HideOnScroll>
-    );
-}
+  return (
+    <HideOnScroll {...props}>
+      <AppBar elevation={0} className={classes.header}>
+        <Toolbar variant="dense">
+          <Typography
+            variant="h6"
+            className={classes.title}
+            onClick={() => navigate("/")}
+          >
+            Riko's handmade
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </HideOnScroll>
+  );
+};

src/stories/Header.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Header } from "../component/molecules/Header";
+import { MemoryRouter } from "react-router-dom";
+import React from "react";
+
+const mata: Meta<typeof Header> = {
+  title: "Header",
+  component: Header,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [],
+};
+
+export default mata;
+type Story = StoryObj<typeof Header>;
+
+export const TopPage: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={["/"]}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export const OtherPage: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={["/Flowers", "/Earrings"]}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};