Skip to content

Commit 7dff504

Browse files
arifulbgt4arifulbgt4
authored
Merge pull request #21 from arifulbgt4/sb-c19
Sb c19
2 parents ab27aa6 + bb21b2b commit 7dff504

13 files changed

+622
-2
lines changed

‎docs/BottomNavigation.stories.tsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import type { Meta, StoryObj, StoryContext } from "@storybook/react";
2+
import BottomNavigation from "@mui/material/BottomNavigation";
3+
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
4+
import RestoreIcon from "@mui/icons-material/Restore";
5+
import FavoriteIcon from "@mui/icons-material/Favorite";
6+
import LocationOnIcon from "@mui/icons-material/LocationOn";
7+
import { useArgs } from "@storybook/addons";
8+
import { argProps, argChildren } from "./utils/formatArgs";
9+
10+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
11+
const meta: Meta<typeof BottomNavigation> = {
12+
title: "NAVIGATION/Bottom Navigation",
13+
component: BottomNavigation,
14+
parameters: {
15+
docs: {
16+
source: { language: "tsx", format: true, type: "dynamic" },
17+
description: {
18+
component: "Another description, overriding the comments",
19+
},
20+
canvas: { sourceState: "shown" },
21+
},
22+
layout: "centered",
23+
},
24+
tags: ["autodocs"],
25+
argTypes: {
26+
value: {
27+
control: { type: "number" },
28+
},
29+
showLabels: {
30+
control: { type: "boolean" },
31+
},
32+
},
33+
};
34+
35+
export default meta;
36+
type Story = StoryObj<typeof BottomNavigation>;
37+
38+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
39+
export const Template: Story = {
40+
render: ({ onChange, value, ...args }) => {
41+
return (
42+
<BottomNavigation value={value} onChange={onChange} {...args}>
43+
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
44+
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
45+
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
46+
</BottomNavigation>
47+
);
48+
},
49+
args: {
50+
value: 0,
51+
showLabels: true,
52+
},
53+
decorators: [
54+
(Story) => {
55+
const [args, updateArgs] = useArgs();
56+
return (
57+
<>
58+
<Story
59+
args={{
60+
...args,
61+
onChange: (ev, newValue) =>
62+
updateArgs({
63+
value: newValue,
64+
}),
65+
}}
66+
/>
67+
</>
68+
);
69+
},
70+
],
71+
parameters: {
72+
docs: {
73+
source: {
74+
transform: (code: string, storyContext: StoryContext): string => `
75+
import BottomNavigation from "@mui/material/BottomNavigation";
76+
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
77+
import RestoreIcon from "@mui/icons-material/Restore";
78+
import FavoriteIcon from "@mui/icons-material/Favorite";
79+
import LocationOnIcon from "@mui/icons-material/LocationOn";
80+
81+
<BottomNavigation
82+
${argProps(storyContext)}
83+
>
84+
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
85+
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
86+
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
87+
</BottomNavigation>
88+
`,
89+
},
90+
},
91+
},
92+
};

‎docs/Drawer.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export const Template: Story = {
8989
anchor={anchor}
9090
open={open}
9191
onClose={() => toggleDrawer(anchor, false)}
92+
{...args}
9293
>
9394
{list(anchor)}
9495
</Drawer>

‎docs/Menu.stories.tsx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import type { Meta, StoryObj, StoryContext } from "@storybook/react";
2+
import Menu from "@mui/material/Menu";
3+
import MenuItem from "@mui/material/MenuItem";
4+
import Button from "@mui/material/Button";
5+
import { useArgs } from "@storybook/addons";
6+
import { argProps, argChildren } from "./utils/formatArgs";
7+
8+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
9+
const meta: Meta<typeof Menu> = {
10+
title: "NAVIGATION/Menu",
11+
component: Menu,
12+
parameters: {
13+
docs: {
14+
source: { language: "tsx", format: true, type: "dynamic" },
15+
description: {
16+
component: "Another description, overriding the comments",
17+
},
18+
canvas: { sourceState: "shown" },
19+
},
20+
layout: "centered",
21+
},
22+
tags: ["autodocs"],
23+
argTypes: {
24+
open: {
25+
control: { type: "boolean" },
26+
},
27+
},
28+
};
29+
30+
export default meta;
31+
type Story = StoryObj<typeof Menu>;
32+
33+
const style = {
34+
position: "absolute" as "absolute",
35+
top: "50%",
36+
left: "50%",
37+
transform: "translate(-50%, -50%)",
38+
width: 400,
39+
bgcolor: "background.paper",
40+
border: "2px solid #000",
41+
boxShadow: 24,
42+
p: 4,
43+
};
44+
45+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
46+
export const Template: Story = {
47+
render: ({ onClose, anchorEl, open, ...args }) => {
48+
return (
49+
<Menu
50+
id="basic-menu"
51+
anchorEl={anchorEl}
52+
open={open}
53+
onClose={onClose}
54+
MenuListProps={{
55+
"aria-labelledby": "basic-button",
56+
}}
57+
{...args}
58+
>
59+
<MenuItem onClick={onClose as any}>Profile</MenuItem>
60+
<MenuItem onClick={onClose as any}>My account</MenuItem>
61+
<MenuItem onClick={onClose as any}>Logout</MenuItem>
62+
</Menu>
63+
);
64+
},
65+
args: {
66+
open: false,
67+
},
68+
decorators: [
69+
(Story) => {
70+
const [args, updateArgs] = useArgs();
71+
return (
72+
<>
73+
<Button
74+
variant="contained"
75+
onClick={(event) =>
76+
updateArgs({
77+
open: !args?.open,
78+
anchorEl: event.currentTarget,
79+
})
80+
}
81+
>
82+
Dashboard
83+
</Button>
84+
<Story
85+
args={{
86+
...args,
87+
onClose: () =>
88+
updateArgs({
89+
open: !args?.open,
90+
anchorEl: null,
91+
}),
92+
}}
93+
/>
94+
</>
95+
);
96+
},
97+
],
98+
parameters: {
99+
docs: {
100+
source: {
101+
transform: (code: string, storyContext: StoryContext): string => `
102+
import Menu from "@mui/material/Menu";
103+
import MenuItem from "@mui/material/MenuItem";
104+
import Button from "@mui/material/Button";
105+
106+
${code}
107+
`,
108+
},
109+
},
110+
},
111+
};

‎docs/Pagination.stories.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import type { Meta, StoryObj, StoryContext } from "@storybook/react";
2+
import Pagination from "@mui/material/Pagination";
3+
import { argChildren, argProps } from "./utils/formatArgs";
4+
5+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
6+
const meta: Meta<typeof Pagination> = {
7+
title: "NAVIGATION/Pagination",
8+
component: Pagination,
9+
parameters: {
10+
docs: {
11+
source: { language: "tsx", format: true, type: "dynamic" },
12+
description: {
13+
component:
14+
"The value must be chosen from a predefined set of allowed values.",
15+
},
16+
canvas: { sourceState: "shown" },
17+
},
18+
layout: "centered",
19+
},
20+
tags: ["autodocs"],
21+
argTypes: {
22+
variant: {
23+
control: { type: "select" },
24+
options: ["outlined", "text"],
25+
description: "The variant to use.",
26+
defaultValue: "text",
27+
},
28+
color: {
29+
control: { type: "select" },
30+
options: ["primary", "secondary", "standard"],
31+
description:
32+
"The active color. It supports both default and custom theme colors, which can be added as shown in the `palette customization guide`.",
33+
defaultValue: "standard",
34+
},
35+
count: {
36+
control: { type: "number" },
37+
defaultValue: 1,
38+
},
39+
},
40+
};
41+
42+
export default meta;
43+
type Story = StoryObj<typeof Pagination>;
44+
45+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
46+
export const Template: Story = {
47+
args: {
48+
variant: "text",
49+
count: 10,
50+
},
51+
parameters: {
52+
docs: {
53+
source: {
54+
transform: (code: string, storyContext: StoryContext): string => `
55+
import Pagination from "@mui/material/Pagination";
56+
57+
${code}
58+
`,
59+
},
60+
},
61+
},
62+
};

‎docs/Stepper.stories.tsx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from "react";
2+
import type { Meta, StoryObj, StoryContext } from "@storybook/react";
3+
import Box from "@mui/material/Box";
4+
import Stepper from "@mui/material/Stepper";
5+
import Step from "@mui/material/Step";
6+
import StepButton from "@mui/material/StepButton";
7+
import Button from "@mui/material/Button";
8+
import Typography from "@mui/material/Typography";
9+
import { useArgs, useState } from "@storybook/addons";
10+
import { argProps, argChildren } from "./utils/formatArgs";
11+
12+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
13+
const meta: Meta<typeof Stepper> = {
14+
title: "NAVIGATION/Stepper",
15+
component: Stepper,
16+
parameters: {
17+
docs: {
18+
source: { language: "tsx", format: true, type: "dynamic" },
19+
description: {
20+
component: "Another description, overriding the comments",
21+
},
22+
canvas: { sourceState: "shown" },
23+
},
24+
layout: "centered",
25+
},
26+
tags: ["autodocs"],
27+
argTypes: {
28+
activeStep: {
29+
control: { type: "number" },
30+
},
31+
nonLinear: {
32+
control: { type: "boolean" },
33+
},
34+
},
35+
};
36+
37+
export default meta;
38+
type Story = StoryObj<typeof Stepper>;
39+
40+
const steps = [
41+
"Select campaign settings",
42+
"Create an ad group",
43+
"Create an ad",
44+
];
45+
46+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
47+
export const Template: Story = {
48+
render: ({ onChange, handleStep, completed, activeStep, ...args }: any) => {
49+
return (
50+
<Stepper activeStep={activeStep} {...args}>
51+
{steps.map((label, index) => (
52+
<Step key={label} completed={completed[index]}>
53+
<StepButton color="inherit" onClick={(e) => onChange(e, index)}>
54+
{label}
55+
</StepButton>
56+
</Step>
57+
))}
58+
</Stepper>
59+
);
60+
},
61+
args: {
62+
activeStep: 0,
63+
nonLinear: true,
64+
},
65+
decorators: [
66+
(Story) => {
67+
const [args, updateArgs] = useArgs();
68+
const [completed, setcompleted] = useState<{ [k: number]: boolean }>({
69+
0: true,
70+
});
71+
return (
72+
<>
73+
<Story
74+
args={
75+
{
76+
...args,
77+
completed,
78+
onChange: (event: any, step: number) => {
79+
setcompleted((prevState) => ({
80+
...prevState,
81+
[step]: true,
82+
}));
83+
updateArgs({
84+
activeStep: step,
85+
});
86+
},
87+
} as any
88+
}
89+
/>
90+
</>
91+
);
92+
},
93+
],
94+
parameters: {
95+
docs: {
96+
source: {
97+
transform: (code: string, storyContext: StoryContext): string => `
98+
import Stepper from "@mui/material/Stepper";
99+
import Step from "@mui/material/Step";
100+
import StepButton from "@mui/material/StepButton";
101+
102+
${code}
103+
`,
104+
},
105+
},
106+
},
107+
};

‎docs/Tabs.stories.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ type Story = StoryObj<typeof Tabs>;
3232
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
3333
export const Template: Story = {
3434
render: ({ onChange, value, ...args }) => {
35-
console.log("value", value);
3635
return (
3736
<Tabs {...args} value={value} onChange={onChange}>
3837
<Tab value="one" label="Item One" />

0 commit comments

Comments
 (0)