core-design: Create a React Storybook (WIP)

.gitignore

@@ -1,6 +1,5 @@
 dist/
 loader/
-storybook/
 www/
 packages/components/custom-elements.json
 

packages/components/package.json

@@ -36,6 +36,7 @@
     "test-watch": "stencil test --spec --e2e --watchAll"
   },
   "devDependencies": {
+    "@core-design/components-react": "^2.0.7",
     "@core-ds/icons": "^1.2.0",
     "@core-ds/primitives": "^1.0.0",
     "@stencil/core": "^1.15.0",
@@ -46,7 +47,7 @@
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-centered": "^5.3.18",
     "@storybook/addon-docs": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.19",
     "@storybook/addon-viewport": "^5.3.18",
     "@storybook/html": "^5.3.19",
     "@storybook/theming": "^5.3.18",

packages/components/src/components/core-button/core-button.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { CoreButton } from "@core-design/components-react";
+
+export default {
+  component: "Button",
+  title: "Buttons & Inputs/Button",
+};
+
+export const Default = () => <CoreButton>Button</CoreButton>;

storybook/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

storybook/.storybook/core-theme.js

@@ -0,0 +1,38 @@
+import { create } from "@storybook/theming";
+
+export const coreTheme = create({
+  base: "light",
+
+  colorPrimary: "#16161d",
+  colorSecondary: "#1975F1",
+
+  // UI
+  appBg: "#f8f8fc",
+  appContentBg: "white",
+  appBorderColor: "#AFBBC4",
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase:
+    "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+  fontCode: "Jetbrains Mono, monospace",
+
+  // Text colors
+  textColor: "#242C33",
+  textInverseColor: "rgba(255,255,255,0.9)",
+
+  // Toolbar default and active colors
+  barTextColor: "#242C33",
+  barSelectedColor: "#1975F1",
+  barBg: "white",
+
+  // Form colors
+  inputBg: "white",
+  inputBorder: "#AFBBC4",
+  inputTextColor: "#242C33",
+  inputBorderRadius: 4,
+
+  // Branding
+  brandTitle: "Core Design",
+  brandUrl: "https://core-ds-components.netlify.app/",
+});

storybook/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  stories: [
+    "${__dirname}/../packages/components/src/components/**/*.stories.js",
+  ],
+  presets: ["@storybook/addon-docs/preset"],
+  addons: [
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-knobs/register",
+    "@storybook/addon-a11y/register",
+    "@storybook/addon-viewport/register",
+  ],
+};

storybook/.storybook/preview-head.html

@@ -0,0 +1,23 @@
+<style>
+  .story {
+    display: grid;
+    grid-gap: 32px;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  }
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .font-inherited {
+    font-family: "Inter", sans-serif;
+    font-feature-settings: "ss01" on, "ss02" on;
+    font-size: 14px;
+    line-height: 1.142857;
+  }
+</style>