feat(design-system): port most of ui atoms to bazel monorepo and new storybook

.storybook/main.js

@@ -0,0 +1,16 @@
+const path = require("path");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.plugins = [
+      new TsconfigPathsPlugin({
+        configFile: path.resolve(__dirname, "../tsconfig.json"),
+      }),
+    ];
+
+    return config;
+  },
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import { roleypolyTheme } from "./theme";
+
+addons.setConfig({
+  theme: roleypolyTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,40 @@
+<script>
+  (function (d) {
+    var config = {
+        kitId: "bck0pci",
+        scriptTimeout: 3000,
+        async: true,
+      },
+      h = d.documentElement,
+      t = setTimeout(function () {
+        h.className =
+          h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
+      }, config.scriptTimeout),
+      tk = d.createElement("script"),
+      f = false,
+      s = d.getElementsByTagName("script")[0],
+      a;
+    h.className += " wf-loading";
+    tk.src = "https://use.typekit.net/" + config.kitId + ".js";
+    tk.async = true;
+    tk.onload = tk.onreadystatechange = function () {
+      a = this.readyState;
+      if (f || (a && a != "complete" && a != "loaded")) return;
+      f = true;
+      clearTimeout(t);
+      try {
+        Typekit.load(config);
+      } catch (e) {}
+    };
+    s.parentNode.insertBefore(tk, s);
+  })(document);
+</script>
+<style>
+  body {
+    font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif,
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+    color: #f2efef;
+    background-color: #453e3d;
+    margin: 0;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

.storybook/theme.js

@@ -0,0 +1,34 @@
+import { create } from "@storybook/theming";
+import { palette } from "../src/design-system/atoms/colors";
+
+export const roleypolyTheme = create({
+  base: "dark",
+
+  colorPrimary: palette.green400,
+  colorSecondary: palette.taupe200,
+
+  // UI
+  appBg: palette.taupe300,
+  appContentBg: palette.taupe300,
+  appBorderColor: palette.taupe100,
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: "system-ui, sans-serif",
+  fontCode: "monospace",
+
+  // Text colors
+  textColor: palette.grey600,
+  textInverseColor: palette.grey100,
+
+  // Toolbar default and active colors
+  barTextColor: palette.taupe500,
+  barSelectedColor: palette.taupe600,
+  barBg: palette.taupe100,
+
+  // Form colors
+  inputBg: "rgba(0,0,0,0.24)",
+  inputBorder: palette.taupe100,
+  inputTextColor: palette.grey600,
+  inputBorderRadius: 0,
+});