diff --git a/.storybook/.babelrc b/.storybook/.babelrc new file mode 100644 index 0000000..1e9dcd2 --- /dev/null +++ b/.storybook/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-typescript" + ], + "plugins": ["babel-plugin-macros"] +} diff --git a/.storybook/addons.js b/.storybook/addons.js deleted file mode 100644 index e69de29..0000000 diff --git a/.storybook/config.js b/.storybook/config.js deleted file mode 100644 index b7a148a..0000000 --- a/.storybook/config.js +++ /dev/null @@ -1,6 +0,0 @@ -import { configure } from '@storybook/react'; - -configure( - require.context('../examples', true, /\.(js|jsx|ts|tsx|md|mdx)$/), - module, -); diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..ece7635 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,4 @@ +module.exports = { + stories: ['../examples/**/*.@(js|jsx|ts|tsx|mdx)'], + addons: ['storybook-addon-performance'], +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..6a4dabd --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,3 @@ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, +}; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index b59c7cd..0000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,17 +0,0 @@ -module.exports = ({ config }) => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - use: [ - { - loader: require.resolve('ts-loader'), - options: { - transpileOnly: true, - }, - }, - ], - }); - - config.resolve.extensions.push('.ts', '.tsx'); - - return config; -}; diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..3d53069 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,11 @@ +module.exports = api => { + api.cache(true); + return { + plugins: ['macros'], + presets: [ + '@babel/preset-env', + '@babel/preset-react', + '@babel/preset-typescript', + ], + }; +}; diff --git a/examples/0_Palette.tsx b/examples/0_Palette.tsx index 5b847de..ebd8080 100644 --- a/examples/0_Palette.tsx +++ b/examples/0_Palette.tsx @@ -1,8 +1,6 @@ /* eslint-disable jsx-a11y/accessible-emoji */ -/** @jsx jsx */ import { storiesOf } from '@storybook/react'; -import { useState } from 'react'; -import { jsx } from '@trousers/core'; +import React, { useState } from 'react'; import Avatar from '@precursor/avatar'; import Blockquote from '@precursor/blockquote'; import Text from '@precursor/text'; @@ -29,23 +27,29 @@ import Spinner from '@precursor/spinner'; import Skeleton from '@precursor/skeleton'; import Grid, { Column, Row } from '@precursor/grid'; import Inline from '@precursor/inline'; -import Toggle from '@precursor/Toggle'; +import Toggle from '@precursor/toggle'; import { Tabs, Tab, TabList, TabPanel } from '@precursor/tabs'; import List, { ListItem } from '@precursor/list'; -import { theme as baseTheme, Theme, ThemeProvider } from '@precursor/theme'; -import deepObject from 'object-deep-key'; -import { Box, Container, ThemeEditor, themeSchema } from '../fixtures'; +// import { theme as baseTheme, Theme, ThemeProvider } from '@precursor/theme'; +// import deepObject from 'object-deep-key'; +import { + Box, + Container, + // ThemeEditor, + //themeSchema +} from '../fixtures'; const BasicExample = () => { - const [theme, setTheme] = useState(baseTheme); + // const [theme, setTheme] = useState(baseTheme); const [isModalOpen, setIsModalOpen] = useState(false); const closeModal = () => setIsModalOpen(false); const openModal = () => setIsModalOpen(true); return ( - - */}
{ Typography - - Heading One ({theme.fontSize.h1}/ - {theme.lineHeight.h1}) - - - Heading Two ({theme.fontSize.h2}/ - {theme.lineHeight.h2}) - - - Heading Three ({theme.fontSize.h3}/ - {theme.lineHeight.h3}) - - - Heading Four ({theme.fontSize.h4}/ - {theme.lineHeight.h4}) - - - Heading Five ({theme.fontSize.h5}/ - {theme.lineHeight.h5}) - - - Heading Six ({theme.fontSize.h6}/ - {theme.lineHeight.h6}) - + Heading One + Heading Two + Heading Three + Heading Four + Heading Five + Heading Six Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat, odio vitae @@ -176,7 +162,7 @@ const BasicExample = () => { Spacing - + {/* {Object.keys(theme.space).map(key => (
@@ -192,7 +178,7 @@ const BasicExample = () => {
))}
-
+
*/} Stack @@ -479,7 +465,7 @@ const BasicExample = () => { name="input-success" onChange={() => console.log('onChange')} value="" - state="success" + appearance="success" /> { name="input-warning" onChange={() => console.log('onChange')} value="" - state="warning" + appearance="warning" /> { name="input-error" onChange={() => console.log('onChange')} value="" - state="error" + appearance="error" /> { name="TextArea-success" onChange={() => console.log('onChange')} value="" - state="success" + appearance="success" />