Skip to content

Commit 61e0e70

Browse files
modularcodermodularcoder
committed
Layout stories
1 parent 43f5f8a commit 61e0e70

20 files changed

+202
-113
lines changed

‎.storybook/config.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import 'storybook-chromatic'
2+
import 'typeface-roboto'
3+
24
import React from 'react'
35
import { configure, addDecorator, addParameters } from '@storybook/react'
46
import { withA11y } from '@storybook/addon-a11y'
57
import { themes } from '@storybook/theming';
68
import { ThemeProvider } from '@material-ui/styles'
9+
import CssBaseline from '@material-ui/core/CssBaseline'
710
import { BrowserRouter } from 'react-router-dom' //
811

912

@@ -27,13 +30,14 @@ addParameters({
2730

2831
addDecorator(withA11y);
2932
addDecorator(story => (
30-
<>
33+
<div className="App">
3134
<ThemeProvider theme={appTheme}>
35+
<CssBaseline />
3236
<BrowserRouter>
3337
{story()}
3438
</BrowserRouter>
3539
</ThemeProvider>
36-
</>
40+
</div>
3741
));
3842

3943
// automatically import all files ending in *.stories.js

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"eject": "react-scripts eject",
1010
"build-docs": "build-storybook --docs",
1111
"build-storybook": "build-storybook",
12-
"storybook": "start-storybook -p 6006"
12+
"storybook": "start-storybook -p 6060"
1313
},
1414
"dependencies": {
1515
"@material-ui/core": "^4.8.1",

‎src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import CssBaseline from '@material-ui/core/CssBaseline'
66
import theme from './_theme'
77
import AppRouter from './AppRouter'
88

9+
console.log('theme', theme)
10+
911
const App = () => {
1012
return (
1113
<div className="App">

‎src/_common/AppFooter/Footer.js renamed to ‎src/_common/AppFooter/AppFooter.js

File renamed without changes.

‎src/_common/AppFooter/AppFooter.stories.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
2+
import AppFooter from './AppFooter.js'
3+
4+
<Meta title="General/Components/AppFooter" component={AppFooter} />
5+
6+
# App Footer
7+
8+
Application footer component.
9+
10+
<Preview>
11+
<Story name="default footer">
12+
<AppFooter />
13+
</Story>
14+
</Preview>

‎src/_common/AppFooter/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from './Footer'
1+
export { default } from './AppFooter'

‎src/_common/AppHeader/AppHeader.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import IconButton from '@material-ui/core/IconButton'
99

1010
import IconMenu from '@material-ui/icons/Menu'
1111

12-
import HeaderDemo from './AppHeaderDemo'
12+
import HeaderDemo from './AppHeaderDemoButtons'
1313

1414
import HeaderSearch from './AppHeaderSearch'
1515
import HeaderNotifications from './AppHeaderNotifications'

‎src/_common/AppHeader/AppHeaderDemo.js renamed to ‎src/_common/AppHeader/AppHeaderDemoButtons.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import IconStar from '@material-ui/icons/Star'
1212
// <Link innerRef={ref as any} {...props} />
1313
// ))
1414

15-
const HeaderDemo = props => {
15+
const AppHeaderDemoButtons = props => {
1616
const classes = useStyles(props)
1717

1818
return (
@@ -80,4 +80,4 @@ const useStyles = makeStyles(theme => ({
8080
},
8181
}))
8282

83-
export default HeaderDemo
83+
export default AppHeaderDemoButtons

‎src/_common/AppHeader/AppHeaderNotifications.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const notifications = [
3939
},
4040
]
4141

42-
const HeaderNotifications = () => {
42+
const AppHeaderNotifications = () => {
4343
const classes = useStyles()
4444
const [anchorEl, setAnchorEl] = React.useState(null)
4545

@@ -143,4 +143,4 @@ const useStyles = makeStyles(theme => ({
143143
},
144144
}))
145145

146-
export default HeaderNotifications
146+
export default AppHeaderNotifications

‎src/_common/AppHeader/AppHeaderProfile.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import IconAccount from '@material-ui/icons/AccountBalance'
1818
import IconSettings from '@material-ui/icons/Settings'
1919
import IconLogout from '@material-ui/icons/ExitToApp'
2020

21-
const HeaderProfile = () => {
21+
const AppHeaderProfile = () => {
2222
const classes = useStyles()
2323
const [anchorEl, setAnchorEl] = React.useState(null)
2424
const { user } = {}
@@ -126,4 +126,4 @@ const useStyles = makeStyles(theme => ({
126126
},
127127
}))
128128

129-
export default HeaderProfile
129+
export default AppHeaderProfile

‎src/_common/AppHeader/AppHeaderSearch.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'
1111
import IconSearch from '@material-ui/icons/Search'
1212
import IconButton from '@material-ui/core/IconButton'
1313

14-
const HeaderSearch = () => {
14+
const AppHeaderSearch = () => {
1515
const classes = useStyles()
1616
const [open, setOpen] = React.useState(false)
1717

@@ -79,4 +79,4 @@ const useStyles = makeStyles(theme => ({
7979
},
8080
}))
8181

82-
export default HeaderSearch
82+
export default AppHeaderSearch

‎src/_common/AppSidebar/AppSidebar.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react'
2+
import { makeStyles } from '@material-ui/core/styles'
3+
4+
import { Link } from 'react-router-dom'
5+
import Typography from '@material-ui/core/Typography'
6+
7+
import Logo from '_common/BaseLogo/BaseLogo'
8+
import SidebarNav from './AppSidebarNav'
9+
10+
const Sidebar = props => {
11+
const { isDesktop, isSidebarCollapsedDesktop } = props
12+
13+
const classes = useStyles(props)
14+
15+
return (
16+
<aside className={classes.sidebar}>
17+
<div className={classes.sidebarHeader}>
18+
<Link to="/" className={classes.sidebarTitleLink}>
19+
<Logo size={30} className={classes.logo} />
20+
<Typography
21+
component="h2"
22+
variant="h5"
23+
color="inherit"
24+
noWrap
25+
className={classes.title}
26+
>
27+
<span className={classes.name}>Material Admin</span>
28+
<span className={classes.tagline}>ReactJS + MaterialUI</span>
29+
</Typography>
30+
</Link>
31+
</div>
32+
<SidebarNav isCollapsed={isDesktop && isSidebarCollapsedDesktop} />
33+
</aside>
34+
)
35+
}
36+
37+
const useStyles = makeStyles(theme => ({
38+
sidebar: {
39+
position: 'absolute',
40+
top: 0,
41+
bottom: 0,
42+
width: '100%',
43+
height: '100%',
44+
color: theme.sidebar.color,
45+
background: theme.sidebar.background,
46+
overflowX: 'hidden',
47+
overflowY: 'auto',
48+
},
49+
sidebarHeader: {
50+
display: 'flex',
51+
alignItems: 'center',
52+
justifyContent: 'center',
53+
whiteSpace: 'nowrap',
54+
padding: '0 8px',
55+
...theme.mixins.toolbar,
56+
},
57+
sidebarTitleLink: {
58+
textDecoration: 'none',
59+
color: 'inherit',
60+
display: 'flex',
61+
// '&:hover': {
62+
// '& $logo': {
63+
// color: '#fff',
64+
// },
65+
// },
66+
},
67+
logo: {
68+
color: theme.palette.primary.main,
69+
},
70+
title: props => ({
71+
// fontSize: '20px',
72+
// fontWeight: 400,
73+
position: 'relative',
74+
overflow: 'visible',
75+
marginLeft: '5px',
76+
display: props.isDesktop && props.isSidebarCollapsedDesktop ? 'none' : 'block',
77+
}),
78+
name: {},
79+
tagline: {
80+
fontSize: 8,
81+
fontWeight: 'bold',
82+
position: 'absolute',
83+
top: '100%',
84+
marginTop: -5,
85+
background: theme.palette.primary.main,
86+
color: '#fff',
87+
borderRadius: 2,
88+
padding: '1px 3px',
89+
right: 0,
90+
},
91+
}))
92+
93+
export default Sidebar

‎src/_common/AppSidebar/AppSidebar.stories.mdx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
2+
import theme from '../../_theme'
3+
4+
import AppSidebar from './AppSidebar.js'
5+
6+
<Meta title="General/Components/AppSidebar" component={AppSidebar} />
7+
8+
# App Sidebar
9+
10+
Application sidebar component.
11+
12+
<Preview>
13+
<Story name="default sidebar">
14+
{() => {
15+
return (
16+
<div style={{
17+
position: 'relative',
18+
width: theme.sidebar.width,
19+
height: 1100
20+
}}>
21+
<AppSidebar />
22+
</div>
23+
)
24+
}}
25+
</Story>
26+
</Preview>
27+
28+
29+
## Collapsed sidebar
30+
31+
<Preview>
32+
<Story name="collapsed sidebar">
33+
{() => {
34+
return (
35+
<div style={{
36+
position: 'relative',
37+
width: theme.sidebar.width,
38+
height: 1100
39+
}}>
40+
<AppSidebar collapsed={true} />
41+
</div>
42+
)
43+
}}
44+
</Story>
45+
</Preview>
46+
47+
## Props
48+
49+
<Props of={AppSidebar} />
50+

‎src/_common/AppSidebar/SidebarNav.js renamed to ‎src/_common/AppSidebar/AppSidebarNav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import IconPreson from '@material-ui/icons/Person' //
2727
import IconStock from '@material-ui/icons/LocalShipping'
2828
import IconLocation from '@material-ui/icons/LocationOn'
2929

30-
import SidebarNavItems from './SidebarNavItems'
30+
import SidebarNavItems from './AppSidebarNavList'
3131

3232
const SidebarNav = props => {
3333
const { isCollapsed } = props

‎src/_common/AppSidebar/SidebarNavItem.js renamed to ‎src/_common/AppSidebar/AppSidebarNavItem.js

File renamed without changes.

‎src/_common/AppSidebar/SidebarNavItems.js renamed to ‎src/_common/AppSidebar/AppSidebarNavList.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
22

3-
import SidebarNavItem from './SidebarNavItem'
3+
import AppSidebarNavItem from './AppSidebarNavItem'
44

5-
const SidebarNavItems = props => {
5+
const AppSidebarNavList = props => {
66
const { items = [], isCollapsed = false, isNested = false } = props
77
// const classes = useStyles()
88

99
return (
1010
<>
1111
{items.map((item, index) => (
12-
<SidebarNavItem
12+
<AppSidebarNavItem
1313
{...item}
1414
isCollapsed={isCollapsed}
1515
isNested={isNested}
@@ -20,4 +20,4 @@ const SidebarNavItems = props => {
2020
)
2121
}
2222

23-
export default SidebarNavItems
23+
export default AppSidebarNavList

0 commit comments

Comments
 (0)