feat: Add Box, Columns, Inline, and Stack design system components (#434

)

Co-authored-by: Frankie Yan <[email protected]>

.storybook/config.js

@@ -1,5 +1,6 @@
-import { configure, setAddon } from '@storybook/react'
+import { configure, setAddon, addDecorator } from '@storybook/react'
 import { setOptions } from '@storybook/addon-options'
+import { withKnobs } from '@storybook/addon-knobs/react'
 import chaptersAddon from 'react-storybook-addon-chapters'
 
 setAddon(chaptersAddon)
@@ -8,5 +9,13 @@ setOptions({
     url: 'https://github.com/Doist/reactist',
 })
 
-const loadStories = () => require('../stories')
+addDecorator(withKnobs)
+
+const req = require.context('../src', true, /.stories.tsx$/)
+
+function loadStories() {
+    require('../stories')
+    req.keys().forEach((file) => req(file))
+}
+
 configure(loadStories, module)

.storybook/webpack.config.js

@@ -22,17 +22,41 @@ module.exports = {
                     'less-loader',
                 ],
             },
-            { test: /\.css$/, loader: 'style-loader!css-loader' },
-            { test: /\.svg$/, loader: 'svg-url-loader' },
             {
-                test: /\.(ts|tsx)$/,
+                test: /\.module\.css$/i,
                 use: [
+                    'style-loader',
                     {
-                        loader: require.resolve('ts-loader'),
+                        loader: 'css-loader',
                         options: {
-                            transpileOnly: true,
+                            modules: {
+                                mode: 'local',
+                                localIdentName:
+                                    process.env.NODE_ENV === 'production'
+                                        ? '[hash:base64]'
+                                        : '[path][name]__[local]',
+                            },
+                            esModule: false,
                         },
                     },
+                ],
+            },
+            {
+                test: /\.css$/,
+                exclude: /\.module\.css$/,
+                loader: 'style-loader!css-loader',
+            },
+            {
+                test: /\.svg$/,
+                loader: 'svg-url-loader',
+            },
+            {
+                test: /\.(ts|tsx)$/,
+                use: [
+                    {
+                        loader: require.resolve('ts-loader'),
+                        options: { transpileOnly: true },
+                    },
                     {
                         loader: require.resolve('react-docgen-typescript-loader'),
                     },

package.json

@@ -125,6 +125,7 @@
     },
     "dependencies": {
         "dayjs": "^1.8.10",
+        "react-keyed-flatten-children": "^1.3.0",
         "reakit": "1.3.0"
     }
 }

src/index.ts

@@ -1,43 +1,31 @@
-export { default as Avatar } from './components/avatar'
+import './new-components/default-styles.less'
 
+export { Box } from './new-components/box'
+export { Columns } from './new-components/columns'
+export { default as Avatar } from './components/avatar'
 export { default as Button } from './components/button'
-
 export { default as Checkbox } from './components/checkbox'
-
 export { default as ColorPicker, COLORS } from './components/color-picker'
-
 export { default as Dropdown } from './components/dropdown'
-
 export { default as ErrorMessage } from './components/error-message'
-
 export { default as Icon } from './components/icon'
-
 export { default as Input } from './components/input'
-
-export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer'
-
 export { default as KeyboardShortcut } from './components/keyboard-shortcut'
-
+export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer'
 export { default as Loading } from './components/loading'
-
-export * from './components/menu'
-
 export { default as Modal } from './components/modal'
-
-export { Notification } from './components/notification/notification'
-
+export { default as Popover } from './components/popover'
 export { default as ProgressBar } from './components/progress-bar'
-
 export { default as RangeInput } from './components/range-input'
-
 export { default as Select } from './components/select'
-
-export { Tabs, Tab } from './components/tabs'
-
 export { default as Time } from './components/time'
-
 export { default as Tip } from './components/tip'
-
+export { Divider } from './new-components/divider'
+export { Heading } from './new-components/heading'
+export { Inline } from './new-components/inline'
+export { Notification } from './components/notification/notification'
+export { Stack } from './new-components/stack'
+export { Tabs, Tab } from './components/tabs'
+export { Text } from './new-components/text'
 export { Tooltip, TooltipProps } from './components/tooltip'
-
-export { default as Popover } from './components/popover'
+export * from './components/menu'