Merge pull request #42 from contra/juls/id-631-icons-refactor-ui-kit-…

…updates

.nvmrc

@@ -0,0 +1 @@
+16.13

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

bin/build-cjs.js

@@ -8,7 +8,7 @@ const sharedConfig = {
   platform: 'node',
   sourcemap: true,
   bundle: true,
-  external: ['react', 'react-dom'],
+  external: ['react', 'react-dom', '@stitches/react'],
   target: ['node12'],
   inject: ['./bin/util/react-shim.js'],
 };

package.json

@@ -29,19 +29,26 @@
     "build": "yarn build:esm && yarn build:cjs",
     "build:cjs": "node ./bin/build-cjs.js",
     "build:esm": "yarn tsc --project tsconfig.build.json",
+    "build:storybook": "build-storybook",
     "check:package": "yarn package-check",
     "check:tsc": "yarn tsc --noEmit",
     "generate:colors": "node ./scripts/dist/generateColors",
     "generate:icons": "node ./scripts/dist/generateIcons",
     "generate:textStyles": "node ./scripts/dist/generateTextStyles",
     "lint": "eslint src",
     "prepare": "husky install",
+    "storybook": "start-storybook -p 6007",
     "test": "yarn jest"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.0",
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
     "@skypack/package-check": "^0.2.2",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
@@ -53,6 +60,7 @@
     "@types/prettier": "^2.4.2",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
+    "babel-loader": "^8.2.3",
     "camelcase": "^6.2.0",
     "esbuild": "^0.13.13",
     "eslint": "^7.32.0",
@@ -76,5 +84,7 @@
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@stitches/react": "^1.2.5"
+  }
 }

src/icons/stories/Icons.stories.tsx

@@ -0,0 +1,42 @@
+import * as Icons from '../.';
+import { styled } from '@stitches/react';
+
+const IconsWrapper = styled('div', {
+  display: 'flex',
+  width: '100%',
+  flexFlow: 'row wrap',
+});
+
+const IconContainer = styled('div', {
+  display: 'flex',
+  flexFlow: 'column',
+  alignItems: 'center',
+  fontSize: '1rem',
+  color: 'Black',
+  backgroundColor: 'White',
+  borderRadius: '20px',
+  padding: '16px',
+  margin: '24px',
+  boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.16)',
+  '& > *': {
+    marginBottom: '8px',
+  },
+});
+
+export const AllIcons = () => (
+  <IconsWrapper>
+    {Object.entries(Icons)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([iconName, Icon]) => (
+        <IconContainer key={iconName}>
+          <Icon height="32px" width="32px" />
+          {iconName}
+        </IconContainer>
+      ))}
+  </IconsWrapper>
+);
+
+export default {
+  title: 'Icons',
+  component: AllIcons,
+};