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

src/design-system/atoms/dot-overlay/BUILD.bazel

@@ -0,0 +1,13 @@
+load("//:hack/react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "dot-overlay",
+    deps = [
+        "react",
+        "styled-components",
+        "@types/react",
+        "@types/styled-components",
+    ],
+)

src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { DotOverlay } from "./DotOverlay";
+
+export default {
+  title: "Atoms/Dot Overlay",
+};
+
+export const Dark = () => <DotOverlay />;
+export const Light = () => <DotOverlay light />;

src/design-system/atoms/dot-overlay/DotOverlay.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import * as React from "react";
+import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+
+const dotOverlayBase = styled.div`
+  opacity: 0.6;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -10;
+  background-size: 27px 27px;
+`;
+
+const DotOverlayDark = styled(dotOverlayBase)`
+  background-image: radial-gradient(
+    circle,
+    #332d2d,
+    #332d2d 1px,
+    transparent 1px,
+    transparent
+  );
+`;
+
+const DotOverlayLight = styled(dotOverlayBase)`
+  background-image: radial-gradient(
+    circle,
+    #dbd9d9,
+    #dbd9d9 1px,
+    transparent 1px,
+    transparent
+  );
+`;
+
+export const DotOverlay = ({ light }: { light?: boolean }) => {
+  return light ? <DotOverlayLight /> : <DotOverlayDark />;
+};

src/design-system/atoms/dot-overlay/index.ts

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