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

.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>