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

src/design-system/atoms/avatar/Avatar.stories.tsx

@@ -0,0 +1,30 @@
+import { text } from "@storybook/addon-knobs";
+import * as React from "react";
+import { Avatar } from "./Avatar";
+
+export default {
+  title: "Atoms/Avatar",
+  component: Avatar,
+  argTypes: {
+    initials: { control: "text" },
+  },
+  args: {
+    initials: "KR",
+  },
+};
+
+export const WithInitials = ({ initials, ...rest }) => (
+  <Avatar src="https://i.imgur.com/epMSRQH.png" size={48} {...rest}>
+    {initials}
+  </Avatar>
+);
+
+export const WithText = ({ initials, ...rest }) => (
+  <Avatar size={48} {...rest}>
+    {initials}
+  </Avatar>
+);
+export const Empty = (args) => <Avatar size={48} {...args}></Avatar>;
+export const DeliberatelyEmpty = (args) => (
+  <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
+);

src/design-system/atoms/avatar/Avatar.styled.ts

@@ -0,0 +1,46 @@
+import { AvatarProps } from "./Avatar";
+import styled, { css } from "styled-components";
+import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import { palette } from "roleypoly/src/design-system/atoms/colors";
+
+type ContainerProps = Pick<AvatarProps, "size"> &
+  Pick<AvatarProps, "deliberatelyEmpty">;
+export const Container = styled.div<ContainerProps>`
+  border-radius: 100%;
+  box-sizing: border-box;
+  width: ${(props: ContainerProps) => props.size || 48}px;
+  height: ${(props: ContainerProps) => props.size || 48}px;
+  min-width: ${(props: ContainerProps) => props.size || 48}px;
+  min-height: ${(props: ContainerProps) => props.size || 48}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${palette.grey100};
+  position: relative;
+  background-color: ${palette.grey500};
+  font-weight: bold;
+  text-align: center;
+  line-height: 1;
+  overflow: hidden;
+  font-size: ${(props: ContainerProps) => props.size};
+  ${(props) =>
+    props.deliberatelyEmpty &&
+    css`
+      border: 4px solid rgba(0, 0, 0, 0.25);
+      background-color: ${palette.taupe400};
+      color: ${palette.taupe600};
+    `}
+`;
+
+type ImageProps = Pick<AvatarProps, "src">;
+export const Image = styled.div<ImageProps>`
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  border-radius: 100%;
+`;

src/design-system/atoms/avatar/Avatar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Container, Image } from './Avatar.styled';
+
+export type AvatarProps = {
+    src?: string;
+    children?: string | React.ReactNode;
+    size?: number;
+    deliberatelyEmpty?: boolean;
+};
+
+/** Chuldren is recommended to not be larger than 2 uppercase letters. */
+export const Avatar = (props: AvatarProps) => (
+    <Container size={props.size} deliberatelyEmpty={props.deliberatelyEmpty}>
+        {props.src && (
+            <Image
+                style={{
+                    backgroundImage: `url(${props.src})`,
+                }}
+            />
+        )}
+        <div>
+            {props.children || (
+                /* needs specifically &nbsp; to prevent layout issues. */
+                <>&nbsp;</>
+            )}
+        </div>
+    </Container>
+);

src/design-system/atoms/avatar/BUILD.bazel

@@ -0,0 +1,14 @@
+load("//:hack/react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "avatar",
+    deps = [
+        "react",
+        "styled-components",
+        "//src/design-system/atoms/colors",
+        "@types/react",
+        "@types/styled-components",
+    ],
+)

src/design-system/atoms/avatar/avatarUtils.tsx

@@ -0,0 +1,7 @@
+export const initialsFromName = (name: string) =>
+    name
+        .split(' ')
+        .slice(0, 2)
+        .map((x) => x[0])
+        .join('')
+        .toUpperCase();

src/design-system/atoms/avatar/index.ts

@@ -0,0 +1,4 @@
+export * from './Avatar';
+
+import * as utils from './avatarUtils';
+export { utils };