diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 02b7b80f..c3eb3c40 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -12,7 +12,7 @@ module.exports = { node: true, jest: true }, - ignorePatterns: ['.eslintrc.js'], + ignorePatterns: ['.eslintrc.js', '*.config.js'], rules: { '@typescript-eslint/interface-name-prefix': 'off', '@typescript-eslint/explicit-function-return-type': 'off', diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index 10f222ba..0f41f691 100644 --- a/frontend/.storybook/preview.js +++ b/frontend/.storybook/preview.js @@ -1,4 +1,4 @@ -import { darkTheme, lightTheme } from '../src/theme/theme' +import { darkTheme, lightTheme } from '../src/theme' import { ThemeProvider, CssBaseline } from '@mui/material' export const parameters = { diff --git a/frontend/package.json b/frontend/package.json index dc916ec4..a7ba6413 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,7 @@ "dependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", + "@heroicons/react": "^2.0.12", "@hookform/error-message": "^2.0.0", "@kalidao/hooks": "^0.0.5", "@mui/icons-material": "^5.6.2", @@ -99,10 +100,13 @@ "@storybook/preset-create-react-app": "^4.1.2", "@storybook/react": "^6.5.12", "@storybook/testing-library": "^0.0.13", + "autoprefixer": "^10.4.12", "babel-plugin-named-exports-order": "^0.0.2", "eslint-plugin-storybook": "^0.6.4", "husky": "^8.0.1", + "postcss": "^8.4.18", "prop-types": "^15.8.1", + "tailwindcss": "^3.1.8", "webpack": "^5.74.0" }, "husky": { diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 18bab9d1..5906ead4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,3 +1,4 @@ +import './styles/tailwind.css' import { Route, Routes } from 'react-router-dom' import Landing from './pages/Landing' import NotFound from './pages/NotFound' diff --git a/frontend/src/layout/Page/index.tsx b/frontend/src/layout/Page/index.tsx index 33d143c8..1701d613 100644 --- a/frontend/src/layout/Page/index.tsx +++ b/frontend/src/layout/Page/index.tsx @@ -1,183 +1,121 @@ -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' -import MenuIcon from '@mui/icons-material/Menu' -import { Avatar, Box, CssBaseline, IconButton, Toolbar, useMediaQuery, useTheme } from '@mui/material' -import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar' -import Container from '@mui/material/Container' -import Divider from '@mui/material/Divider' -import MuiDrawer from '@mui/material/Drawer' -import Link from '@mui/material/Link' -import List from '@mui/material/List' -import { styled } from '@mui/material/styles' -import Typography from '@mui/material/Typography' -import { ReactNode, useState } from 'react' -import { useParams } from 'react-router-dom' -import { OWNER } from '../../constants' -import { MainMenuItems, DaoMenuItems, SecondaryMenuItems } from '../../context/PageContext' +import { ReactNode } from 'react' import { ConnectButton } from '@rainbow-me/rainbowkit' -import { useGetDAO } from '../../graph/getDAO' -function Copyright(props: any) { - return ( - - {'Copyright © '} - - {OWNER.name} - {' '} - {new Date().getFullYear()} - {'.'} - - ) +import { FolderIcon, HomeIcon, HandThumbUpIcon, UsersIcon } from '@heroicons/react/24/outline' + +function classNames(...classes: string[]) { + return classes.filter(Boolean).join(' ') } -const drawerWidth = 240 +export const PageLayout: React.FC<{ withDrawer?: boolean; children: ReactNode }> = (props) => { + return ( +
+
+ +
+ +
+
+ +
-interface AppBarProps extends MuiAppBarProps { - open?: boolean +
{props.children}
+
+
+ ) } -const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== 'open' -})(({ theme, open }) => ({ - zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen - }), - ...(open && { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) - }) -})) +const TopNav = () => { + return ( + + ) } -export function PageLayout(props: PageLayoutProps) { - const theme = useTheme() +const TopNavLink: React.FC<{ children: ReactNode; href: string }> = (props) => { + // TODO + const isActive = false - const isMobile = useMediaQuery(theme.breakpoints.down('md')) - const [open, setOpen] = useState(props.withDrawer !== false && !isMobile) + return ( + + {props.children} + + ) +} + +const SideNav = () => { + return ( + + ) +} - const toggleDrawer = () => { - setOpen(!open) - } +const SideNavLink: React.FC<{ children: ReactNode; href: string; icon: typeof HomeIcon }> = (props) => { + // TODO + const isActive = false return ( - - - - - - {props.withDrawer !== false ? ( - - - - ) : ( - <> - )} - - Sporos DAO - - - {isMyDaoLoaded && myDao?.token && `${myDao?.token?.name} (${myDao?.token?.symbol})`} - - - {/* - - */} - - - - - {props.withDrawer !== false ? ( - - - - - - - - - {MainMenuItems()} - - {DaoMenuItems()} - - {SecondaryMenuItems()} - - - ) : ( - <> + - theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], - flexGrow: 1, - height: '100vh', - overflow: 'auto' - }} - > - - - {props.children} - - - - + > + ) } diff --git a/frontend/src/stories/Alert.stories.tsx b/frontend/src/stories/Alert.stories.tsx new file mode 100644 index 00000000..00d3807e --- /dev/null +++ b/frontend/src/stories/Alert.stories.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { ComponentMeta } from '@storybook/react' +import { Alert } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Components/Alert', + component: Alert, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +export const Default = () => ( + <> + This is an error alert — check it out! +
+ This is a warning alert — check it out! +
+ This is an info alert — check it out! +
+ This is a success alert — check it out! + +) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/Slider.stories.tsx b/frontend/src/stories/Slider.stories.tsx new file mode 100644 index 00000000..637e453a --- /dev/null +++ b/frontend/src/stories/Slider.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Slider } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Components/Slider', + component: Slider, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/Table.stories.tsx b/frontend/src/stories/Table.stories.tsx new file mode 100644 index 00000000..3ec3a76b --- /dev/null +++ b/frontend/src/stories/Table.stories.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import { ComponentMeta } from '@storybook/react' +import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Components/Table', + component: Table, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { + return { name, calories, fat, carbs, protein } +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9) +] + +export const Default = () => ( + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map((row) => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ +) + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Accordion.stories.tsx b/frontend/src/stories/wip/Accordion.stories.tsx new file mode 100644 index 00000000..79deb701 --- /dev/null +++ b/frontend/src/stories/wip/Accordion.stories.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Accordion', + component: Accordion, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = () => ( +
+ + } aria-controls="panel1a-content" id="panel1a-header"> + Accordion 1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo + lobortis eget. + + + + + } aria-controls="panel2a-content" id="panel2a-header"> + Accordion 2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo + lobortis eget. + + + + + } aria-controls="panel3a-content" id="panel3a-header"> + Disabled Accordion + + +
+) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Autocomplete.stories.tsx b/frontend/src/stories/wip/Autocomplete.stories.tsx new file mode 100644 index 00000000..cb01e155 --- /dev/null +++ b/frontend/src/stories/wip/Autocomplete.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Autocomplete } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Autocomplete', + component: Autocomplete, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Avatar.stories.tsx b/frontend/src/stories/wip/Avatar.stories.tsx new file mode 100644 index 00000000..515241e7 --- /dev/null +++ b/frontend/src/stories/wip/Avatar.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Avatar } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Avatar', + component: Avatar, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Badge.stories.tsx b/frontend/src/stories/wip/Badge.stories.tsx new file mode 100644 index 00000000..b5ca052f --- /dev/null +++ b/frontend/src/stories/wip/Badge.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Badge } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Badge', + component: Badge, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/BottonNavigation.stories.tsx b/frontend/src/stories/wip/BottonNavigation.stories.tsx new file mode 100644 index 00000000..f28b24d8 --- /dev/null +++ b/frontend/src/stories/wip/BottonNavigation.stories.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { BottomNavigation, BottomNavigationAction } from '@mui/material' +import RestoreIcon from '@mui/icons-material/Restore' +import FavoriteIcon from '@mui/icons-material/Favorite' +import LocationOnIcon from '@mui/icons-material/LocationOn' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/BottomNavigation', + component: BottomNavigation, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = () => ( + + } /> + } /> + } /> + +) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Breadcrumbs.stories.tsx b/frontend/src/stories/wip/Breadcrumbs.stories.tsx new file mode 100644 index 00000000..7a3369ec --- /dev/null +++ b/frontend/src/stories/wip/Breadcrumbs.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Breadcrumbs } from '@mui/material' +import { Link, Typography } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Breadcrumbs', + component: Breadcrumbs, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = () => ( + + + MUI + + + Core + + Breadcrumbs + +) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/ButtonGroup.stories.tsx b/frontend/src/stories/wip/ButtonGroup.stories.tsx new file mode 100644 index 00000000..cf86d948 --- /dev/null +++ b/frontend/src/stories/wip/ButtonGroup.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { ButtonGroup } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/ButtonGroup', + component: ButtonGroup, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Checkbox.stories.tsx b/frontend/src/stories/wip/Checkbox.stories.tsx new file mode 100644 index 00000000..4cc6b127 --- /dev/null +++ b/frontend/src/stories/wip/Checkbox.stories.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Checkbox } from '@mui/material' +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Checkbox', + component: Checkbox, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/CircularProgress.stories.tsx b/frontend/src/stories/wip/CircularProgress.stories.tsx new file mode 100644 index 00000000..832c3a6b --- /dev/null +++ b/frontend/src/stories/wip/CircularProgress.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { CircularProgress } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/CircularProgress', + component: CircularProgress, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Divider.stories.tsx b/frontend/src/stories/wip/Divider.stories.tsx new file mode 100644 index 00000000..f97bc926 --- /dev/null +++ b/frontend/src/stories/wip/Divider.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Divider } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Divider', + component: Divider, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Fab.stories.tsx b/frontend/src/stories/wip/Fab.stories.tsx new file mode 100644 index 00000000..31be4bf0 --- /dev/null +++ b/frontend/src/stories/wip/Fab.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Fab } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Fab', + component: Fab, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Link.stories.tsx b/frontend/src/stories/wip/Link.stories.tsx new file mode 100644 index 00000000..4e481fbd --- /dev/null +++ b/frontend/src/stories/wip/Link.stories.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Link } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Link', + component: Link, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = () => ( + <> + Link + + {'color="inherit"'} + + + {'variant="body2"'} + + +) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Paper.stories.tsx b/frontend/src/stories/wip/Paper.stories.tsx new file mode 100644 index 00000000..e4897c9e --- /dev/null +++ b/frontend/src/stories/wip/Paper.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Paper } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Paper', + component: Paper, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/RadioGroup.stories.tsx b/frontend/src/stories/wip/RadioGroup.stories.tsx new file mode 100644 index 00000000..30e788b6 --- /dev/null +++ b/frontend/src/stories/wip/RadioGroup.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { RadioGroup } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/RadioGroup', + component: RadioGroup, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Rating.stories.tsx b/frontend/src/stories/wip/Rating.stories.tsx new file mode 100644 index 00000000..72173f49 --- /dev/null +++ b/frontend/src/stories/wip/Rating.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Rating } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Rating', + component: Rating, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}) +// More on args: https://storybook.js.org/docs/react/writing-stories/args +Default.args = {} + +// More on args: https://storybook.js.org/docs/react/writing-stories/args diff --git a/frontend/src/stories/wip/Select.stories.tsx b/frontend/src/stories/wip/Select.stories.tsx new file mode 100644 index 00000000..3683385e --- /dev/null +++ b/frontend/src/stories/wip/Select.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Select } from '@mui/material' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'WIP/Select', + component: Select, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + parameters: {} +} as ComponentMeta + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args + +const Template: ComponentStory = (args) =>