diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx index 176e583a..7cc99afd 100644 --- a/src/components/Grid/Grid.stories.tsx +++ b/src/components/Grid/Grid.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import { Story, Meta } from '@storybook/react' import { Grid } from '.' import { Box, Row } from '../' +import { randomColor } from '../../docs/util' import type { CSS } from '../../stitches.config' export default { @@ -9,12 +10,6 @@ export default { component: Grid, } as Meta -const keys = ['primary', 'info', 'success', 'error', 'warning'] -const randomColor = (): CSS['backgroundColor'] => { - const color = keys[Math.floor(Math.random() * keys.length)] - return `$${color}6` -} - const border = '1px solid $grey3' type BoxProps = React.ComponentProps diff --git a/src/docs/colours.stories.mdx b/src/docs/colours.stories.mdx index 7dd1217d..7142fa65 100644 --- a/src/docs/colours.stories.mdx +++ b/src/docs/colours.stories.mdx @@ -16,7 +16,7 @@ import { SemanticColors, Swatch, Colors, Surfaces } from './util' ### Light - + + + @@ -89,7 +89,7 @@ These are themed and rand from 1-12, with 9 being the pure color from which the ### Dark - + @@ -107,13 +107,13 @@ We use the brand colours within our main color sets differently for light and da themes. <> - + - + diff --git a/src/docs/examples/Overview.stories.tsx b/src/docs/examples/Overview.stories.tsx new file mode 100644 index 00000000..0e9da90d --- /dev/null +++ b/src/docs/examples/Overview.stories.tsx @@ -0,0 +1,591 @@ +import { + mdiAbTesting, + mdiAlarm, + mdiCart, + mdiChat, + mdiClipboardAccount, + mdiDelete, + mdiEmail, + mdiEmailEdit, + mdiFolder, + mdiInbox, + mdiPlay, + mdiSkipNext, + mdiSkipPrevious, +} from '@mdi/js' +import React from 'react' +import * as C from '../../index' + +export default { + title: 'Examples/Overview', +} + +const ComponentCard = C.styled(C.Card, { + display: 'flex', + flexDirection: 'row', + flexGrow: 1, + gap: '$3', + p: '$3', + m: '$1', + justifyContent: 'space-evenly', +}) + +const ComponentColumn = C.styled(C.Column, { + gap: '$3', +}) + +export const Overview = () => ( + + + + Buttons + + + + + + Primary + Secondary + Tertiary + + + + Primary + + + Secondary + + + Tertiary + + + + + Primary + + + Secondary + + + Tertiary + + + + + + Icon Buttons + + + + + + + + + + + Badges + + + + + + + + + + + + + + + + + + + + Avatars + + + + + + CF + + + SH + + + + + + + + + + + + + + Chips + + + + {}}> + Chip + + Chip + {}} + onClose={() => {}} + > + Chip + + {}}> + Chip + + + + + Input + + + + {React.createElement(() => { + const currencies = [ + { + value: 'USD', + label: '$', + }, + { + value: 'EUR', + label: '€', + }, + { + value: 'BTC', + label: '฿', + }, + { + value: 'JPY', + label: '¥', + }, + ] + const [values, setValues] = React.useState({ + name: 'Cat in the Hat', + age: '', + multiline: 'Controlled', + currency: 'EUR', + }) + const handleChange = (name: string) => (newValue: string) => + setValues({ ...values, [name]: newValue }) + return ( +
+ + + + + + + + + + + + + + {currencies.map((option) => ( + + {option.label} + + ))} + + + {currencies.map((option) => ( + + ))} + + Please select your currency + +
+ ) + })} + + + + Checkbox + + ,{' '} + + Radio + {' '} + and{' '} + + Switch + + + {React.createElement(() => { + const [checked, setChecked] = React.useState(true) + return ( + + + setChecked(!checked)} + variant="primary" + /> + setChecked(!checked)} + variant="secondary" + /> + + setChecked(!checked)} + > + + + + + setChecked(!checked)} + variant="primary" + /> + setChecked(!checked)} + variant="secondary" + destructive + /> + + + ) + })} + + + Slider + + + + + + + + + + + Lists + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {['18 June 2014', '20 July 2015', '3 January 2018'].map( + (item, index) => ( + + + + + + + + + + ) + )} + + + + + + Cards + + + + Committed Card + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id + aliquet lectus. Feugiat nibh sed pulvinar proin gravida hendrerit + lectus. Facilisis magna etiam tempor orci eu lobortis elementum. + + + Yes + No + + + {/* + Card + + } + checkedIcon={} + /> + } + checkedIcon={} + /> + + + */} + + Title + Subtitle + + + + + + + + + + + + + + Tables + + + + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {[ + ['Frozen yoghurt', 159, 6.0, 24, 4.0], + ['Ice cream sandwich', 237, 9.0, 37, 4.3], + ['Eclair', 262, 16.0, 24, 6.0], + ['Cupcake', 305, 3.7, 67, 4.3], + ['Gingerbread', 356, 16.0, 49, 3], + ].map((row) => ( + + + {row[0]} + + {row[1]} + {row[2]} + {row[3]} + {row[4]} + + ))} + + + + + + + Tabs + + + + + + One + Two + Three + + Tab one content + Tab two content + Tab three content + + + + + Text + + + + + System Text + h2. Heading + h3. Heading + h4. Heading + + subheading. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur + + + Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos + blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + Caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + Display Text + + d1. Heading + + + d2. Heading + + + Strike. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos + blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + Monospace. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + + +) diff --git a/src/docs/examples/form.stories.tsx b/src/docs/examples/form.stories.tsx index cdc5f6ef..55f5d979 100644 --- a/src/docs/examples/form.stories.tsx +++ b/src/docs/examples/form.stories.tsx @@ -1,116 +1,122 @@ -// import React from 'react' -// import { -// Alert, -// AlertTitle, -// Autocomplete, -// Box, -// Button, -// Card, -// CardActions, -// CardContent, -// CardHeader, -// Checkbox, -// Form, -// FormControlLabel, -// Monospace, -// Typography, -// TextField, -// RadioGroup, -// Radio, -// } from '../../src' -// import { listOfCountries } from '../util/data' +import React, { FormEvent, useState } from 'react' +import { + Alert, + AlertTitle, + Button, + Card, + CardBody, + CardHeading, + Checkbox, + CheckedState, + Column, + Flex, + Input, + Monospace, + Radio, + RadioGroup, + Select, + SelectItem, + Text, +} from '../../components' +import { listOfCountries } from '../util/data' -// export default { -// title: 'Examples/Form', -// } +export default { + title: 'Examples/Form', +} -// export const Example = () => { -// const [submitted, setSubmitted] = React.useState(null) - -// const handleSubmit = (e) => { -// const elements = e.target.elements -// e.preventDefault() -// setSubmitted({ -// name: elements.name.value, -// email: elements.email.value, -// country: elements.country.value, -// notify_email: elements.notify_email.checked, -// notify_txt: elements.notify_txt.checked, -// notify_browser: elements.notify_browser.checked, -// role: elements.role.value, -// }) -// } - -// return ( -// -// {submitted && ( -// -// Form Submitted -// {JSON.stringify(submitted, null, 2)} -// -// )} -//
-// -// Form -// -// -// -// option?.title} -// renderInput={(params) => ( -// -// )} -// /> -// Get notifications by: -// } -// label="Email" -// labelPlacement="end" -// /> -// } -// label="Txt" -// labelPlacement="end" -// /> -// } -// label="Browser" -// labelPlacement="end" -// /> -// Please Specify your role: -// -// } -// label="Director" -// /> -// } -// label="Developer" -// /> -// } -// label="Tester" -// /> -// } -// label="Other" -// /> -// -// -// -// -// -// -//
-// -// ) -// } +export const Form = () => { + const [name, setName] = useState('') + const [email, setEmail] = useState('') + const [country, setCountry] = useState('') + const [role, setRole] = useState('') + const [notifyEmail, setNotifyEmail] = useState(true) + const [notifyTxt, setNotifyTxt] = useState(true) + const [notifyBrowser, setNotifyBrowser] = useState(true) + const [submitted, setSubmitted] = React.useState<{}>() + const handleSubmit = (e: FormEvent) => { + e.preventDefault() + setSubmitted({ + name, + country, + email, + notifyEmail, + notifyTxt, + notifyBrowser, + role, + }) + } + return ( + + {submitted && ( + + Form Submitted + {JSON.stringify(submitted, null, 2)} + + )} + + Form + + + setName(value)} + value={name} + /> + setEmail(value)} + /> + + Get notifications by: + setNotifyEmail(checked)} + checked={notifyEmail} + /> + setNotifyTxt(checked)} + checked={notifyTxt} + /> + setNotifyBrowser(checked)} + checked={notifyBrowser} + /> + Please Specify your role: + setRole(v)}> + + + + + + + + + + ) +} diff --git a/src/docs/examples/inbox.stories.tsx b/src/docs/examples/inbox.stories.tsx index 45ca2bad..474ea05a 100644 --- a/src/docs/examples/inbox.stories.tsx +++ b/src/docs/examples/inbox.stories.tsx @@ -1,160 +1,187 @@ -// import { -// DeleteSharp, -// FastForwardSharp, -// ReplyAllSharp, -// ReplySharp, -// } from '@material-ui/icons' -// import React from 'react' -// import { -// AppBar, -// Avatar, -// Box, -// Card, -// CardContent, -// Heading, -// IconButton, -// List, -// ListItem, -// ListItemIcon, -// ListItemText, -// Row, -// Text, -// ThemeProvider, -// ThemeSwitch, -// Toolbar, -// } from '../../src' -// import { randomColor } from '../util/colors' +import { mdiDelete, mdiFastForward, mdiReply, mdiReplyAll } from '@mdi/js' +import React from 'react' +import { + AppBar, + AppBarActions, + AppBarHeading, + Avatar, + Box, + Card, + CardBody, + darkTheme, + IconButton, + lightTheme, + List, + ListItem, + ListItemIcon, + ListItemText, + Paragraph, + Row, + Svg, + ThemeProvider, + ThemeSwitch, +} from '../../' +import { randomColor } from '../util' -// export default { -// title: 'Examples/Inbox', -// } +const Delete: React.FC> = (props) => ( + +) +const FastForward: React.FC> = (props) => ( + +) +const Reply: React.FC> = (props) => ( + +) +const ReplyAll: React.FC> = (props) => ( + +) -// export const Example = () => { -// const Header = () => ( -// -// -// -// -// Inbox -// -// -// -// -// ) +export default { + title: 'Examples/Inbox', +} -// const Email = () => ( -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// CC -// -// -// -// -// -// -// Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi -// accusantium dicta quo eveniet, nesciunt unde quam dolorum accusamus -// omnis eligendi similique id hic. -// -// -// -// Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi -// accusantium dicta quo eveniet, nesciunt unde quam dolorum accusamus -// omnis eligendi similique id hic. Qui voluptates modi soluta facilis -// ullam maiores. -// -// -// -// Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi -// accusantium dicta quo eveniet, nesciunt unde quam dolorum accusamus -// omnis eligendi similique id hic. Qui voluptates modi soluta facilis -// ullam maiores. -// -// -// -// -// ) +export const Inbox = () => { + const Header = () => ( + + + Inbox + + + + + ) -// const EmailItem = ({ initials, subject, from }) => ( -// -// -// -// {initials} -// -// -// -// -// ) + const Actions = () => ( + + + + + + + + + + + + + + + + ) -// const Emails = () => ( -// -// -// -// -// -// -// -// -// -// -// -// -// ) + const Email = () => ( + + + + + + + CC + + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi + accusantium dicta quo eveniet, nesciunt unde quam dolorum accusamus + omnis eligendi similique id hic. + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi + accusantium dicta quo eveniet, nesciunt unde quam dolorum accusamus + omnis eligendi similique id hic. Qui voluptates modi soluta facilis + ullam maiores. + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi + accusantium dicta quo eveniet, nesciunt unde quam dolorum accusamus + omnis eligendi similique id hic. Qui voluptates modi soluta facilis + ullam maiores. + + + + + ) -// return ( -// -// -//
-// -// -// -// -// -// -// ) -// } + const EmailItem = ({ + initials, + subject, + from, + }: { + initials: string + subject: string + from: string + }) => ( + + + + {initials} + + + + + ) + + const Emails = () => ( + + + + + + + + + + + + + ) + + return ( + + +
+ + + + + + + ) +} diff --git a/src/docs/examples/website.stories.tsx b/src/docs/examples/website.stories.tsx index 62fd11e6..86647944 100644 --- a/src/docs/examples/website.stories.tsx +++ b/src/docs/examples/website.stories.tsx @@ -1,162 +1,178 @@ -// import CallSharp from '@material-ui/icons/CallSharp' -// import EmailSharp from '@material-ui/icons/EmailSharp' -// import React from 'react' -// import { -// AppBar, -// Avatar, -// Box, -// Button, -// Card, -// CardActionArea, -// Column, -// Container, -// Display, -// Divider, -// Flex, -// Heading, -// Link, -// Loader, -// Row, -// Text, -// ThemeProvider, -// ThemeSwitch, -// Toolbar, -// useThemeController, -// } from '../../src' +import { mdiEmail, mdiPhone } from '@mdi/js' +import React from 'react' +import { + AppBar, + AppBarActions, + AppBarButton, + AppBarHeading, + Avatar, + Box, + Card, + CardBody, + Column, + Container, + Divider, + Flex, + Heading, + Link, + Paragraph, + Row, + Spinner, + Svg, + Text, + ThemeProvider, + ThemeSwitch, +} from '../../' -// export default { -// title: 'Examples/Website', -// } +const Email: React.FC> = (props) => ( + +) -// const footerHeight = '200px' +const Call: React.FC> = (props) => ( + +) -// export const Example = () => { -// const Header = () => ( -// -// -// -// Website -// -// -// -// -// -// -// ) +export default { + title: 'Examples/Website', +} -// const Post = ({ name, index }: { name: string; index: number }) => ( -// -// -// -// -// -// -// {name} -// -// -// -// -// -// ) +const footerHeight = '200px' -// const Content = () => ( -// -// -// Our work and Open Source -// -// -// We believe we can all move forward faster by being open. Learn more -// about our contributions. -// -// -// -// {[ -// 'Speedy Spotless', -// 'ARGA', -// 'Eastern Galaxy', -// 'Pribox', -// 'Rejux', -// 'Baleen', -// ].map((name, index) => ( -// -// ))} -// -// -// -// -// -// ) +export const Website = () => { + const Header = () => ( + + Website + + + + Logout + + + ) -// const Logo = () => { -// const [choice] = useThemeController() -// const logo = -// choice == 'light' -// ? 'https://committed.software/Committed_Dark.svg' -// : 'https://committed.software/Committed_Light.svg' -// return Committed Logo -// } + const Post = ({ name, index }: { name: string; index: number }) => ( + + + {name} + + ) -// const Footer = () => ( -// -// -// -// -// -// Links -// Work -// Blog -// Careers -// Contact -// -// -// -// -// -// -// (+44) 01242 220 347 -// -// -// -// -// -// contct@committed.io -// -// -// -// Address -// 3 Strand Court -// Bath Road -// Cheltenham -// Gloucestershire -// GL53 7LW -// -// -// ) + const Content = () => ( + + + Our work and Open Source + + + We believe we can all move forward faster by being open. Learn more + about our contributions. + + + + {[ + 'Speedy Spotless', + 'ARGA', + 'Eastern Galaxy', + 'Pribox', + 'Rejux', + 'Baleen', + ].map((name, index) => ( + + ))} + + + + + + ) -// return ( -// -// -// -//
-// -// -//