feat(storybook-addon): initial commit

Adds a storybook addon that enables chakra-ui along with its colormode
feature.

.storybook/main.js

@@ -3,18 +3,9 @@ module.exports = {
     '../packages/*/src/**/*.stories.mdx',
     '../packages/*/src/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  webpackFinal: async config => {
-    return {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve.alias,
-          '@emotion/core': '@emotion/react',
-          'emotion-theming': '@emotion/react'
-        }
-      }
-    }
-  }
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '../packages/storybook-addon-chakra-ui'
+  ]
 }

.storybook/preview.js

@@ -1,7 +1,3 @@
-import {ChakraProvider, CSSReset, extendTheme} from '@chakra-ui/react'
-import {addDecorator} from '@storybook/react'
-import React from 'react'
-
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   layout: 'fullscreen',
@@ -12,10 +8,3 @@ export const parameters = {
     }
   }
 }
-
-addDecorator(storyFn => (
-  <ChakraProvider theme={extendTheme({config: {initialColorMode: 'dark'}})}>
-    <CSSReset />
-    {storyFn()}
-  </ChakraProvider>
-))

packages/snek-finder/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.14",
-    "@chakra-ui/react": "^1.6.5",
+    "@chakra-ui/react": "^1.6.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@react-icons/all-files": "^4.1.0",

packages/snek-finder/src/components/atoms/UploadButton/index.tsx

@@ -7,7 +7,7 @@
  * Use of this source code is governed by an EUPL-1.2 license that can be found
  * in the LICENSE file at https://snek.at/license
  */
-import {IconButton} from '@chakra-ui/react'
+import {IconButton, useColorMode} from '@chakra-ui/react'
 import {FaFileUpload} from '@react-icons/all-files/fa/FaFileUpload'
 import React from 'react'
 import {useDropzone} from 'react-dropzone'
@@ -27,7 +27,7 @@ const UploadButton: React.FC<UploadButtonProps> = ({onUpload, accept}) => {
   return (
     <div {...getRootProps()}>
       <input {...getInputProps()} />
-      {<IconButton aria-label="" icon={<FaFileUpload />} />}
+      <IconButton aria-label="" icon={<FaFileUpload />} />
     </div>
   )
 }

packages/snek-finder/src/components/molecules/Toolbar/index.tsx

@@ -3,6 +3,7 @@ import {Box} from '@chakra-ui/layout'
 import {
   Breadcrumb,
   BreadcrumbItem,
+  Button,
   ButtonGroup,
   Flex,
   IconButton,

packages/storybook-addon-chakra-ui/.gitignore

@@ -0,0 +1,100 @@
+# Dependency directory
+node_modules
+
+# Rest pulled from https://github.com/github/gitignore/blob/master/Node.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# OS metadata
+.DS_Store
+Thumbs.db
+
+# Ignore built ts files
+__tests__/runner/*
+lib
+dist

packages/storybook-addon-chakra-ui/README.md

@@ -0,0 +1,56 @@
+# @chakra-ui/storybook-addon
+
+Use Chakra UI in your Storybook stories.
+
+Wraps each of your stories with [`ChakraProvider`][chakraprovider] which can be
+configured using Storybook parameters.
+
+## Installation
+
+### yarn
+
+```sh
+yarn add -D @snek-at/storybook-addon-chakra-ui
+```
+
+### npm
+
+```sh
+npm i -D @snek-at/storybook-addon-chakra-ui
+```
+
+Add the addon to your configuration in `.storybook/main.js`:
+
+```js
+module.exports = {
+  addons: ['@snek-at/storybook-addon-chakra-ui']
+}
+```
+
+## Configuring `ChakraProvider`
+
+If you need to customize the props passed to `ChakraProvider` for your stories
+(to use a custom `theme`, for example), you'll need to create custom Storybook
+parameters.
+
+To set global parameters for this addon, add a `chakra` object to the
+`parameters` export in `.storybook/preview.js`:
+
+```js
+import myTheme from '../theme'
+export const parameters = {chakra: {theme: myTheme}}
+```
+
+The `chakra` parameters take the same shape as the `props` for `ChakraProvider`.
+[See the `ChakraProvider` props table][chakraprovider] to see the list of
+possible parameters.
+
+### Overriding `ChakraProvider` configuration for individual components or stories
+
+Storybook allows you to define parameters at multiple levels: global, component,
+and story. We recommend setting default parameters at the global level, and
+overriding them at the component or story when necessary. See the
+[Storybook Parameters documentation](https://storybook.js.org/docs/react/writing-stories/parameters)
+for more information.
+
+[chakraprovider]: https://chakra-ui.com/docs/getting-started#chakraprovider-props

packages/storybook-addon-chakra-ui/dist/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ADDON_ID = "@snek-at/chakra-ui-storybook-addon";
+export declare const PARAM_KEY = "chakra-ui";
+export declare const CHANGE: string;
+export declare const DECORATOR: string;
+export declare const THEME: string;

packages/storybook-addon-chakra-ui/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './withChakra';

packages/storybook-addon-chakra-ui/dist/manager/CMSelector.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CMSelector: () => JSX.Element;
+export default CMSelector;

packages/storybook-addon-chakra-ui/dist/manager/index.d.ts

@@ -0,0 +1 @@
+export { default as CMSelector } from './CMSelector';

packages/storybook-addon-chakra-ui/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { withChakra } from './withChakra';
+export declare const decorators: (typeof withChakra)[];
+export declare const globalTypes: {
+    isDarkmode: boolean;
+};

packages/storybook-addon-chakra-ui/dist/register.d.ts

@@ -0,0 +1 @@
+export {};