chore: prettier

2025-04-24 19:39:11 +00:00 · 2020-10-10 04:33:54 -04:00 · 2020-10-10 04:33:54 -04:00 · 70fa51d4a1
commit 70fa51d4a1
parent ccf89d8480
67 changed files with 1811 additions and 1838 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,24 +1,24 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+    - package-ecosystem: 'npm'
+      directory: '/'
      schedule:
-      interval: "daily"
+          interval: 'daily'

-  - package-ecosystem: "github-actions"
-    directory: "/"
+    - package-ecosystem: 'github-actions'
+      directory: '/'
      schedule:
-      interval: "daily"
+          interval: 'daily'

-  - package-ecosystem: "docker"
-    directory: "/.devcontainer"
+    - package-ecosystem: 'docker'
+      directory: '/.devcontainer'
      schedule:
-      interval: "daily"
+          interval: 'daily'

-  - package-ecosystem: "gomod"
-    directory: "/"
+    - package-ecosystem: 'gomod'
+      directory: '/'
      schedule:
-      interval: "daily"
+          interval: 'daily'
 # - package-ecosystem: "terraform"
 #   directory: "/terraform/platform/bootstrap"
 #   schedule:
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -12,7 +12,7 @@ jobs:
            - name: Mount bazel cache
              uses: actions/cache@v2.1.1
              with:
-          path: "/home/runner/.cache/bazel"
+                  path: '/home/runner/.cache/bazel'
                  key: bazel

            - name: Install bazelisk
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -1,4 +1,4 @@
-name: "CodeQL"
+name: 'CodeQL'

 on:
    push:
@ -7,7 +7,7 @@ on:
        # The branches below must be a subset of the branches above
        branches: [main]
    schedule:
-    - cron: "0 1 * * 2"
+        - cron: '0 1 * * 2'

 jobs:
    analyze:
@ -19,7 +19,7 @@ jobs:
            matrix:
                # Override automatic language detection by changing the below list
                # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ["go", "javascript"]
+                language: ['go', 'javascript']
                # Learn more...
                # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection

--- a/.github/workflows/dev-container.yml
+++ b/.github/workflows/dev-container.yml
@ -7,7 +7,7 @@ on:
            - src/dev-container/*
            - .github/workflows/dev-container.yml
    schedule:
-    - cron: "0 12 * * 2" # 12 noon every tuesday
+        - cron: '0 12 * * 2' # 12 noon every tuesday

 jobs:
    dev_container_build:
@ -18,7 +18,7 @@ jobs:
            - name: Mount bazel cache
              uses: actions/cache@v2.1.1
              with:
-          path: "/home/runner/.cache/bazel"
+                  path: '/home/runner/.cache/bazel'
                  key: bazel_dev_container

            - name: Install bazelisk
--- a/.github/workflows/terraform.yml
+++ b/.github/workflows/terraform.yml
@ -1,2 +1 @@
 name: Terraform
-
--- a/.gitignore
+++ b/.gitignore
@ -5,16 +5,6 @@ bazel-testlogs
 node_modules
 .env
 docker-compose.yaml
-
-#Added by cargo
-
 /target
-
-
-#Added by cargo
-#
-#already existing elements were commented out
-
-#/target
-
 *.log
+storybook-static
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1 @@
+bazel-*
--- a/.prettierrc
+++ b/.prettierrc
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 90,
+    useTabs: false,
+    tabWidth: 4,
+    singleQuote: true,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    semi: true,
+};
--- a/.storybook/main.js
+++ b/.storybook/main.js
@ -1,13 +1,13 @@
-const path = require("path");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+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"],
+    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"),
+                configFile: path.resolve(__dirname, '../tsconfig.json'),
            }),
        ];

--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@ -1,5 +1,5 @@
-import { addons } from "@storybook/addons";
-import { roleypolyTheme } from "./theme";
+import { addons } from '@storybook/addons';
+import { roleypolyTheme } from './theme';

 addons.setConfig({
    theme: roleypolyTheme,
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -1,4 +1,3 @@
-
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+    actions: { argTypesRegex: '^on[A-Z].*' },
+};
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@ -1,8 +1,8 @@
-import { create } from "@storybook/theming";
-import { palette } from "../src/design-system/atoms/colors";
+import { create } from '@storybook/theming';
+import { palette } from '../src/design-system/atoms/colors';

 export const roleypolyTheme = create({
-  base: "dark",
+    base: 'dark',

    colorPrimary: palette.green400,
    colorSecondary: palette.taupe200,
@ -14,8 +14,8 @@ export const roleypolyTheme = create({
    appBorderRadius: 0,

    // Typography
-  fontBase: "system-ui, sans-serif",
-  fontCode: "monospace",
+    fontBase: 'system-ui, sans-serif',
+    fontCode: 'monospace',

    // Text colors
    textColor: palette.grey600,
@ -27,7 +27,7 @@ export const roleypolyTheme = create({
    barBg: palette.taupe100,

    // Form colors
-  inputBg: "rgba(0,0,0,0.24)",
+    inputBg: 'rgba(0,0,0,0.24)',
    inputBorder: palette.taupe100,
    inputTextColor: palette.grey600,
    inputBorderRadius: 0,
--- a/package.json
+++ b/package.json
@ -6,7 +6,8 @@
        "test": "echo \"Error: no test specified\" && exit 1",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook",
-    "now-build": "build-storybook"
+        "now-build": "build-storybook",
+        "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'"
    },
    "repository": {
        "type": "git",
@ -21,7 +22,7 @@
    "dependencies": {
        "@roleypoly/rpc": "^1.9.3",
        "chroma-js": "2.1.0",
-    "next": "^9.5.4",
+        "next": "^9.5.5",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-icons": "^3.11.0",
@ -38,7 +39,7 @@
        "@storybook/theming": "^6.0.26",
        "@types/chroma-js": "2.1.0",
        "@types/google-protobuf": "3.7.3",
-    "@types/styled-components": "5.1.3",
+        "@types/styled-components": "5.1.4",
        "babel-loader": "^8.1.0",
        "prettier": "^2.1.2",
        "react-is": "^16.13.1",
--- a/src/db/README.md
+++ b/src/db/README.md
@ -12,6 +12,6 @@ Edit nothing outside of the `schemas` folder, as all others are generated.

 When done editing, do `go generate ./ent` to update generation.

-*Failing to generate files will make CI fail.*
+_Failing to generate files will make CI fail._

 All schemas must be backwards compatible with previous versions of this library, and be compatible with **CockroachDB**-based Postgres.
--- a/src/design-system/atoms/avatar/Avatar.stories.tsx
+++ b/src/design-system/atoms/avatar/Avatar.stories.tsx
@ -1,15 +1,15 @@
-import { text } from "@storybook/addon-knobs";
-import * as React from "react";
-import { Avatar } from "./Avatar";
+import { text } from '@storybook/addon-knobs';
+import * as React from 'react';
+import { Avatar } from './Avatar';

 export default {
-  title: "Atoms/Avatar",
+    title: 'Atoms/Avatar',
    component: Avatar,
    argTypes: {
-    initials: { control: "text" },
+        initials: { control: 'text' },
    },
    args: {
-    initials: "KR",
+        initials: 'KR',
    },
 };

--- a/src/design-system/atoms/avatar/Avatar.styled.ts
+++ b/src/design-system/atoms/avatar/Avatar.styled.ts
@ -1,10 +1,9 @@
-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";
+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">;
+type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;
 export const Container = styled.div<ContainerProps>`
    border-radius: 100%;
    box-sizing: border-box;
@ -32,7 +31,7 @@ export const Container = styled.div<ContainerProps>`
        `}
 `;

-type ImageProps = Pick<AvatarProps, "src">;
+type ImageProps = Pick<AvatarProps, 'src'>;
 export const Image = styled.div<ImageProps>`
    background-size: cover;
    background-repeat: no-repeat;
--- a/src/design-system/atoms/branding/Branding.stories.tsx
+++ b/src/design-system/atoms/branding/Branding.stories.tsx
@ -1,12 +1,9 @@
-import * as React from "react";
-import {
-  Logomark as BrandingLogomark,
-  Logotype as BrandingLogotype,
-} from "./Branding";
-import styled from "styled-components";
+import * as React from 'react';
+import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
+import styled from 'styled-components';

 export default {
-  title: "Atoms/Branding",
+    title: 'Atoms/Branding',
 };

 const Wrapper = styled.div`
--- a/src/design-system/atoms/branding/Branding.tsx
+++ b/src/design-system/atoms/branding/Branding.tsx
@ -1,5 +1,5 @@
-import * as React from "react";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import * as React from 'react';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';

 type LogoProps = {
    fill: string;
@ -71,13 +71,7 @@ export const Logomark = ({
        version="1.1"
    >
        <defs />
-    <g
-      id="Logomark"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-    >
+        <g id="Logomark" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <g id="Group" transform="translate(35.000000, -46.000000)">
                <path
                    fill={typeFill || fill}
--- a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
+++ b/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
@ -1,9 +1,9 @@
-import * as React from "react";
-import { BreakpointDebugTool } from "./DebugTool";
-import { BreakpointsProvider } from "./BreakpointProvider";
+import * as React from 'react';
+import { BreakpointDebugTool } from './DebugTool';
+import { BreakpointsProvider } from './BreakpointProvider';

 export default {
-  title: "Atoms/Breakpoints",
+    title: 'Atoms/Breakpoints',
    decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
    component: BreakpointDebugTool,
 };
--- a/src/design-system/atoms/breakpoints/Context.ts
+++ b/src/design-system/atoms/breakpoints/Context.ts
@ -1,5 +1,5 @@
-import * as React from "react";
-import { withContext } from "roleypoly/src/common/utils/withContext";
+import * as React from 'react';
+import { withContext } from 'roleypoly/src/common/utils/withContext';

 export type ScreenSize = {
    onSmallScreen: boolean;
--- a/src/design-system/atoms/button/Button.story.tsx
+++ b/src/design-system/atoms/button/Button.story.tsx
@ -1,20 +1,20 @@
 // TODO: port to new story

-import * as React from "react";
-import { atomStories } from "atoms/atoms.story";
-import { Button, ButtonProps } from "./Button";
-import { text as textKnob } from "@storybook/addon-knobs";
-import { FaDiscord } from "react-icons/fa";
-import { styled } from "@storybook/theming";
+import * as React from 'react';
+import { atomStories } from 'atoms/atoms.story';
+import { Button, ButtonProps } from './Button';
+import { text as textKnob } from '@storybook/addon-knobs';
+import { FaDiscord } from 'react-icons/fa';
+import { styled } from '@storybook/theming';

-const largeStory = atomStories("Button/Large", module);
-const smallStory = atomStories("Button/Small", module);
+const largeStory = atomStories('Button/Large', module);
+const smallStory = atomStories('Button/Small', module);

-const colorModes: NonNullable<ButtonProps["color"]>[] = [
-  "primary",
-  "secondary",
-  "discord",
-  "muted",
+const colorModes: NonNullable<ButtonProps['color']>[] = [
+    'primary',
+    'secondary',
+    'discord',
+    'muted',
 ];

 const Margin = styled.div`
@ -23,8 +23,8 @@ const Margin = styled.div`
    align-items: center;
 `;

-const storyTemplate = (props: Omit<ButtonProps, "children">) => () => {
-  const text = textKnob("Button content", "Example Button");
+const storyTemplate = (props: Omit<ButtonProps, 'children'>) => () => {
+    const text = textKnob('Button content', 'Example Button');

    return (
        <div>
@ -33,7 +33,7 @@ const storyTemplate = (props: Omit<ButtonProps, "children">) => () => {
                    <Button {...props} color={color}>
                        {text}
                    </Button>
-          <div style={{ marginLeft: "1em" }}>
+                    <div style={{ marginLeft: '1em' }}>
                        {color[0].toUpperCase()}
                        {color.slice(1)}
                    </div>
@ -44,21 +44,21 @@ const storyTemplate = (props: Omit<ButtonProps, "children">) => () => {
 };
 const storyBuilder = (
    story: typeof largeStory,
-  size: NonNullable<ButtonProps["size"]>
+    size: NonNullable<ButtonProps['size']>
 ) => {
    story.add(
-    "Normal",
+        'Normal',
        storyTemplate({
            size,
        })
    );

    story.add(
-    "Icon",
+        'Icon',
        storyTemplate({
            size,
            icon: (
-        <div style={{ position: "relative", top: 3 }}>
+                <div style={{ position: 'relative', top: 3 }}>
                    <FaDiscord />
                </div>
            ),
@ -66,11 +66,11 @@ const storyBuilder = (
    );

    story.add(
-    "Loading",
+        'Loading',
        storyTemplate({
            size,
            icon: (
-        <div style={{ position: "relative", top: 3 }}>
+                <div style={{ position: 'relative', top: 3 }}>
                    <FaDiscord />
                </div>
            ),
@ -79,5 +79,5 @@ const storyBuilder = (
    );
 };

-storyBuilder(largeStory, "large");
-storyBuilder(smallStory, "small");
+storyBuilder(largeStory, 'large');
+storyBuilder(smallStory, 'small');
--- a/src/design-system/atoms/button/Button.styled.ts
+++ b/src/design-system/atoms/button/Button.styled.ts
@ -1,8 +1,8 @@
-import styled, { css } from "styled-components";
-import { text400, text300 } from "roleypoly/src/design-system/atoms/typography";
-import { fontCSS } from "roleypoly/src/design-system/atoms/fonts";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { text400, text300 } from 'roleypoly/src/design-system/atoms/typography';
+import { fontCSS } from 'roleypoly/src/design-system/atoms/fonts';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const IconContainer = styled.div`
    margin-right: 0.6rem;
@ -25,7 +25,7 @@ const base = css`
    white-space: nowrap;

    ::after {
-    content: "";
+        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
--- a/src/design-system/atoms/colors/colors.stories.tsx
+++ b/src/design-system/atoms/colors/colors.stories.tsx
@ -1,8 +1,8 @@
-import * as React from "react";
-import { palette } from "./colors";
-import styled from "styled-components";
-import chroma from "chroma-js";
-import { AmbientSmall } from "roleypoly/src/design-system/atoms/typography";
+import * as React from 'react';
+import { palette } from './colors';
+import styled from 'styled-components';
+import chroma from 'chroma-js';
+import { AmbientSmall } from 'roleypoly/src/design-system/atoms/typography';

 type RatioList = {
    color1: string[];
@ -11,7 +11,7 @@ type RatioList = {
 };

 export default {
-  title: "Atoms/Colors",
+    title: 'Atoms/Colors',
 };

 const Swatch = styled.div`
@ -73,9 +73,7 @@ export const ContrastRatios = () => {
                <br />
                All below 4.5 is unacceptable.
                <br />
-        <AmbientSmall>
-          WCAG Contrast testing disabled for this page.
-        </AmbientSmall>
+                <AmbientSmall>WCAG Contrast testing disabled for this page.</AmbientSmall>
            </p>
            <ContrastTable>
                <thead>
@ -98,7 +96,7 @@ export const ContrastRatios = () => {
                                style={{
                                    color: ratio.color1[1],
                                    backgroundColor: ratio.color2[1],
-                  paddingRight: "0.1em",
+                                    paddingRight: '0.1em',
                                }}
                            >
                                oh my god my
@ -107,7 +105,7 @@ export const ContrastRatios = () => {
                                style={{
                                    color: ratio.color2[1],
                                    backgroundColor: ratio.color1[1],
-                  paddingLeft: "0.1em",
+                                    paddingLeft: '0.1em',
                                }}
                            >
                                shin how dare you
@ -129,11 +127,11 @@ const ContrastTable = styled.table`

 const getWCAGStyle = (ratio: number): React.CSSProperties => {
    if (ratio >= 7) {
-    return { color: "green", fontWeight: "bold" };
+        return { color: 'green', fontWeight: 'bold' };
    }

    if (ratio >= 4.5) {
-    return { color: "orange", fontWeight: "bold" };
+        return { color: 'orange', fontWeight: 'bold' };
    }

    return {};
@ -141,12 +139,12 @@ const getWCAGStyle = (ratio: number): React.CSSProperties => {

 const getAllRatios = (input: typeof palette) =>
    Object.entries(input)
-    .filter(([name]) => !name.startsWith("discord"))
+        .filter(([name]) => !name.startsWith('discord'))
        .reduce((acc, [name, color]) => {
            return [
                ...acc,
                ...Object.entries(palette)
-          .filter(([name]) => !name.startsWith("discord"))
+                    .filter(([name]) => !name.startsWith('discord'))
                    .map(([matchName, matchColor]) => ({
                        color1: [name, color],
                        color2: [matchName, matchColor],
--- a/src/design-system/atoms/colors/colors.tsx
+++ b/src/design-system/atoms/colors/colors.tsx
@ -1,29 +1,29 @@
-import { css, createGlobalStyle } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
-import chroma from "chroma-js";
+import { css, createGlobalStyle } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import chroma from 'chroma-js';

 export const palette = {
-  taupe100: "#332D2D",
-  taupe200: "#453E3D",
-  taupe300: "#5D5352",
-  taupe400: "#756867",
-  taupe500: "#AB9B9A",
-  taupe600: "#EBD6D4",
+    taupe100: '#332D2D',
+    taupe200: '#453E3D',
+    taupe300: '#5D5352',
+    taupe400: '#756867',
+    taupe500: '#AB9B9A',
+    taupe600: '#EBD6D4',

-  discord100: "#23272A",
-  discord200: "#2C2F33",
-  discord400: "#7289DA",
-  discord500: "#99AAB5",
+    discord100: '#23272A',
+    discord200: '#2C2F33',
+    discord400: '#7289DA',
+    discord500: '#99AAB5',

-  green400: "#46B646",
+    green400: '#46B646',

-  red400: "#E95353",
+    red400: '#E95353',

-  gold400: "#EFCF24",
+    gold400: '#EFCF24',

-  grey100: "#1C1010",
-  grey500: "#DBD9D9",
-  grey600: "#F2EFEF",
+    grey100: '#1C1010',
+    grey500: '#DBD9D9',
+    grey600: '#F2EFEF',
 };

 const getPaletteCSS = () =>
--- a/src/design-system/atoms/colors/index.ts
+++ b/src/design-system/atoms/colors/index.ts
@ -1,2 +1,2 @@
-export * from "./colors";
-export * as utils from "./withColors";
+export * from './colors';
+export * as utils from './withColors';
--- a/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
+++ b/src/design-system/atoms/dot-overlay/DotOverlay.stories.tsx
@ -1,8 +1,8 @@
-import * as React from "react";
-import { DotOverlay } from "./DotOverlay";
+import * as React from 'react';
+import { DotOverlay } from './DotOverlay';

 export default {
-  title: "Atoms/Dot Overlay",
+    title: 'Atoms/Dot Overlay',
 };

 export const Dark = () => <DotOverlay />;
--- a/src/design-system/atoms/dot-overlay/DotOverlay.tsx
+++ b/src/design-system/atoms/dot-overlay/DotOverlay.tsx
@ -1,6 +1,6 @@
-import styled from "styled-components";
-import * as React from "react";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+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;
--- a/src/design-system/atoms/fader/Fader.stories.tsx
+++ b/src/design-system/atoms/fader/Fader.stories.tsx
@ -1,10 +1,10 @@
-import * as React from "react";
-import { FaderOpacity, FaderSlide } from "./Fader";
-import { Button } from "roleypoly/src/design-system/atoms/button";
-import { action } from "@storybook/addon-actions";
+import * as React from 'react';
+import { FaderOpacity, FaderSlide } from './Fader';
+import { Button } from 'roleypoly/src/design-system/atoms/button';
+import { action } from '@storybook/addon-actions';

 export default {
-  title: "Atoms/Fader",
+    title: 'Atoms/Fader',
    component: FaderSlide,
    args: {
        isVisible: true,
@ -14,7 +14,7 @@ export default {
 export const Opacity = (args) => {
    return (
        <FaderOpacity {...args}>
-      <Button onClick={action("onClick")}>Click me!</Button>
+            <Button onClick={action('onClick')}>Click me!</Button>
        </FaderOpacity>
    );
 };
@ -22,7 +22,7 @@ export const Opacity = (args) => {
 export const Slide = (args) => {
    return (
        <FaderSlide {...args}>
-      <Button onClick={action("onClick")}>Click me!</Button>
+            <Button onClick={action('onClick')}>Click me!</Button>
        </FaderSlide>
    );
 };
--- a/src/design-system/atoms/fader/Fader.tsx
+++ b/src/design-system/atoms/fader/Fader.tsx
@ -1,15 +1,15 @@
-import * as React from "react";
-import styled from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as React from 'react';
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export type FaderProps = {
    isVisible: boolean;
    children: React.ReactNode;
 };

-const FaderOpacityStyled = styled.div<Pick<FaderProps, "isVisible">>`
+const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
    opacity: ${(props) => (props.isVisible ? 1 : 0)};
-  pointer-events: ${(props) => (props.isVisible ? "unset" : "none")};
+    pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
    transition: opacity 0.35s ease-in-out;
 `;

@ -21,9 +21,9 @@ export const FaderOpacity = (props: FaderProps) => {
    );
 };

-const FaderSlideStyled = styled.div<Pick<FaderProps, "isVisible">>`
-  max-height: ${(props) => (props.isVisible ? "4em" : "0")};
-  pointer-events: ${(props) => (props.isVisible ? "unset" : "none")};
+const FaderSlideStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
+    max-height: ${(props) => (props.isVisible ? '4em' : '0')};
+    pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
    transition: max-height 0.35s ease-in-out;
    overflow: hidden;
    transform: translateZ(0);
@ -31,8 +31,6 @@ const FaderSlideStyled = styled.div<Pick<FaderProps, "isVisible">>`

 export const FaderSlide = (props: FaderProps) => {
    return (
-    <FaderSlideStyled isVisible={props.isVisible}>
-      {props.children}
-    </FaderSlideStyled>
+        <FaderSlideStyled isVisible={props.isVisible}>{props.children}</FaderSlideStyled>
    );
 };
--- a/src/design-system/atoms/fonts/fonts.stories.tsx
+++ b/src/design-system/atoms/fonts/fonts.stories.tsx
@ -1,17 +1,15 @@
-import * as React from "react";
-import { UseFontStyled } from "./fonts";
-import styled from "styled-components";
+import * as React from 'react';
+import { UseFontStyled } from './fonts';
+import styled from 'styled-components';
 import {
    MediumTitle,
    Text as TextBlock,
-} from "roleypoly/src/design-system/atoms/typography";
+} from 'roleypoly/src/design-system/atoms/typography';

-const resetFont = (storyFn: () => React.ReactNode) => (
-  <FontReset>{storyFn()}</FontReset>
-);
+const resetFont = (storyFn: () => React.ReactNode) => <FontReset>{storyFn()}</FontReset>;

 export default {
-  title: "Atoms/Fonts",
+    title: 'Atoms/Fonts',
    decorators: [resetFont],
 };

@ -29,9 +27,8 @@ const Text = () => (
    <>
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
-      placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam
-      deserunt repellat. Exercitationem modi incidunt autem nemo tempore eaque
-      soluta.
+            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
        </p>
        <p>
            帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
@ -39,11 +36,10 @@ const Text = () => (
            読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
        </p>
        <p>
-      🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄
-      💟💲🍻💜💩🔼 🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯
-      🌞💟🎌🍌 🔪📯🐎💮 👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊.
-      🔤🍍🌸📷🎴 💏🍌📎👥👉👒 👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒
-      🐕🌈👋
+            🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄 💟💲🍻💜💩🔼
+            🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯 🌞💟🎌🍌 🔪📯🐎💮
+            👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊. 🔤🍍🌸📷🎴 💏🍌📎👥👉👒
+            👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒 🐕🌈👋
        </p>
    </>
 );
--- a/src/design-system/atoms/fonts/fonts.tsx
+++ b/src/design-system/atoms/fonts/fonts.tsx
@ -1,7 +1,7 @@
-import * as React from "react";
-import Head from "next/head";
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as React from 'react';
+import Head from 'next/head';
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const InjectTypekitFont = () => {
    React.useEffect(() => {
@ -21,8 +21,8 @@ export const InjectTypekitFont = () => {
 };

 export const fontCSS = css`
-  font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+    font-family: 'source-han-sans-japanese', 'Source Sans Pro', sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
 `;

 export const UseFontStyled = styled.div`
--- a/src/design-system/atoms/halfsies/Halfsies.stories.tsx
+++ b/src/design-system/atoms/halfsies/Halfsies.stories.tsx
@ -1,8 +1,8 @@
-import * as React from "react";
-import { HalfsiesContainer, HalfsiesItem } from "./Halfsies";
+import * as React from 'react';
+import { HalfsiesContainer, HalfsiesItem } from './Halfsies';

 export default {
-  title: "Atoms/Halfsies",
+    title: 'Atoms/Halfsies',
 };

 export const Container = () => (
--- a/src/design-system/atoms/halfsies/Halfsies.tsx
+++ b/src/design-system/atoms/halfsies/Halfsies.tsx
@ -1,6 +1,6 @@
-import styled, { css } from "styled-components";
-import { onTablet } from "roleypoly/src/design-system/atoms/breakpoints";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const HalfsiesContainer = styled.div`
    display: flex;
--- a/src/design-system/atoms/hero/Hero.stories.tsx
+++ b/src/design-system/atoms/hero/Hero.stories.tsx
@ -1,8 +1,8 @@
-import * as React from "react";
-import { Hero as HeroComponent } from "./Hero";
+import * as React from 'react';
+import { Hero as HeroComponent } from './Hero';

 export default {
-  title: "Atoms/Hero",
+    title: 'Atoms/Hero',
    component: HeroComponent,
    args: {
        topSpacing: 75,
@ -26,31 +26,27 @@ type WrapperProps = {
    bottomSpacing: number;
 };

-const StoryWrapper = ({
-  topSpacing,
-  bottomSpacing,
-  ...props
-}: WrapperProps) => (
+const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) => (
    <div>
        <div
            style={{
-        position: "absolute",
+                position: 'absolute',
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
-        height: "100vh",
+                height: '100vh',
            }}
        >
            <div
                style={{
                    height: topSpacing,
-          backgroundColor: "rgba(255,0,0,0.25)",
+                    backgroundColor: 'rgba(255,0,0,0.25)',
                    top: 0,
                    left: 0,
                    right: 0,
-          position: "absolute",
-          overflow: "hidden",
+                    position: 'absolute',
+                    overflow: 'hidden',
                }}
            >
                topSpacing
@ -58,12 +54,12 @@ const StoryWrapper = ({
            <div
                style={{
                    height: bottomSpacing,
-          backgroundColor: "rgba(0,0,255,0.25)",
+                    backgroundColor: 'rgba(0,0,255,0.25)',
                    bottom: 0,
                    left: 0,
                    right: 0,
-          position: "absolute",
-          overflow: "hidden",
+                    position: 'absolute',
+                    overflow: 'hidden',
                }}
            >
                bottomSpacing
--- a/src/design-system/atoms/hero/Hero.tsx
+++ b/src/design-system/atoms/hero/Hero.tsx
@ -1,6 +1,6 @@
-import * as React from "react";
-import styled from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as React from 'react';
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 type HeroContainerProps = {
    topSpacing: number;
@ -17,9 +17,7 @@ const HeroContainer = styled.div<HeroContainerProps>`
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
-  min-height: calc(
-    100vh - ${(props) => props.topSpacing + props.bottomSpacing}px
-  );
+    min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
    margin-top: ${(props) => props.topSpacing}px;
 `;

--- a/src/design-system/atoms/popover/Popover.stories.tsx
+++ b/src/design-system/atoms/popover/Popover.stories.tsx
@ -1,11 +1,11 @@
-import * as React from "react";
-import { Button } from "roleypoly/src/design-system/atoms/button";
-import { Popover as PopoverComponent } from "./Popover";
+import * as React from 'react';
+import { Button } from 'roleypoly/src/design-system/atoms/button';
+import { Popover as PopoverComponent } from './Popover';

 export default {
-  title: "Atoms/Popover",
+    title: 'Atoms/Popover',
    argTypes: {
-    canDefocus: { control: "boolean" },
+        canDefocus: { control: 'boolean' },
    },
    args: {
        canDefocus: true,
@ -18,7 +18,7 @@ export const Popover = ({ canDefocus }) => {
    return (
        <div style={{ padding: 50 }}>
            <Button size="small" onClick={() => setIsOpen(!isOpen)}>
-        {!isOpen ? "Open" : "Close"} me!
+                {!isOpen ? 'Open' : 'Close'} me!
            </Button>
            <PopoverComponent
                position="top right"
--- a/src/design-system/atoms/popover/Popover.styled.ts
+++ b/src/design-system/atoms/popover/Popover.styled.ts
@ -1,11 +1,8 @@
-import {
-  onSmallScreen,
-  onTablet,
-} from "roleypoly/src/design-system/atoms/breakpoints";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import { onSmallScreen, onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 type PopoverStyledProps = {
    active: boolean;
--- a/src/design-system/atoms/popover/Popover.tsx
+++ b/src/design-system/atoms/popover/Popover.tsx
@ -1,30 +1,30 @@
-import * as React from "react";
+import * as React from 'react';
 import {
    PopoverBase,
    DefocusHandler,
    PopoverHead,
    PopoverHeadCloser,
    PopoverContent,
-} from "./Popover.styled";
-import { globalOnKeyUp } from "roleypoly/src/design-system/atoms/key-events";
-import { IoMdClose } from "react-icons/io";
+} from './Popover.styled';
+import { globalOnKeyUp } from 'roleypoly/src/design-system/atoms/key-events';
+import { IoMdClose } from 'react-icons/io';

 type PopoverProps = {
    children: React.ReactNode;
-  position: "top left" | "top right" | "bottom left" | "bottom right";
+    position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
    active: boolean;
    canDefocus?: boolean;
-  onExit?: (type: "escape" | "defocus" | "explicit") => void;
+    onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
    headContent: React.ReactNode;
 };

 export const Popover = (props: PopoverProps) => {
-  globalOnKeyUp(["Escape"], () => props.onExit?.("escape"), props.active);
+    globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
    return (
        <>
            <PopoverBase active={props.active}>
                <PopoverHead>
-          <PopoverHeadCloser onClick={() => props.onExit?.("explicit")}>
+                    <PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
                        <IoMdClose />
                    </PopoverHeadCloser>
                    <div>{props.headContent}</div>
@ -34,7 +34,7 @@ export const Popover = (props: PopoverProps) => {
            {props.canDefocus && (
                <DefocusHandler
                    active={props.active}
-          onClick={() => props.onExit?.("defocus")}
+                    onClick={() => props.onExit?.('defocus')}
                />
            )}
        </>
--- a/src/design-system/atoms/role/Role.stories.tsx
+++ b/src/design-system/atoms/role/Role.stories.tsx
@ -1,11 +1,11 @@
-import * as React from "react";
-import { Role as RoleComponent } from "./Role";
-import { roleCategory } from "roleypoly/hack/fixtures/storyData";
-import { withColors } from "roleypoly/src/design-system/atoms/colors/withColors";
-import styled from "styled-components";
+import * as React from 'react';
+import { Role as RoleComponent } from './Role';
+import { roleCategory } from 'roleypoly/hack/fixtures/storyData';
+import { withColors } from 'roleypoly/src/design-system/atoms/colors/withColors';
+import styled from 'styled-components';

 export default {
-  title: "Atoms/Role",
+    title: 'Atoms/Role',
    component: RoleComponent,
    decorators: [withColors],
 };
--- a/src/design-system/atoms/role/Role.styled.tsx
+++ b/src/design-system/atoms/role/Role.styled.tsx
@ -1,7 +1,7 @@
-import styled, { css } from "styled-components";
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export type StyledProps = {
    selected: boolean;
@ -12,11 +12,8 @@ export type StyledProps = {
 export const Outer = styled.div<StyledProps>`
    border-radius: 24px;
    background-color: ${(props) =>
-    props.selected && !props.defaultColor
-      ? "var(--role-color)"
-      : palette.taupe100};
-  color: ${(props) =>
-    props.selected ? "var(--role-contrast)" : palette.grey600};
+        props.selected && !props.defaultColor ? 'var(--role-color)' : palette.taupe100};
+    color: ${(props) => (props.selected ? 'var(--role-contrast)' : palette.grey600)};
    transition: color ${transitions.in2in}s ease-in-out,
        background-color ${transitions.in2in}s ease-in-out,
        transform ${transitions.actionable}s ease-in-out,
@ -47,16 +44,14 @@ export const Circle = styled.div<StyledProps>`
    height: 24px;
    border-radius: 25px;
    background-color: ${(props) =>
-    props.defaultColor && !props.selected
-      ? "transparent"
-      : "var(--role-color)"};
+        props.defaultColor && !props.selected ? 'transparent' : 'var(--role-color)'};
    border: 1px solid
        ${(props) =>
            props.defaultColor
-        ? "var(--role-color)"
+                ? 'var(--role-color)'
                : props.selected
-        ? "var(--role-accent)"
-        : "transparent"};
+                ? 'var(--role-accent)'
+                : 'transparent'};
    display: flex;
    justify-content: center;
    align-items: center;
@ -71,8 +66,8 @@ export const Circle = styled.div<StyledProps>`
        transition: fill-opacity ${transitions.in2in}s ease-in-out;
        fill: ${(props) =>
            props.disabled && props.defaultColor
-        ? "var(--role-color)"
-        : "var(--role-contrast)"};
+                ? 'var(--role-color)'
+                : 'var(--role-contrast)'};
    }
 `;

--- a/src/design-system/atoms/role/Role.tsx
+++ b/src/design-system/atoms/role/Role.tsx
@ -1,9 +1,9 @@
-import * as React from "react";
-import { Role as RPCRole } from "@roleypoly/rpc/shared";
-import * as styled from "./Role.styled";
-import { FaCheck, FaTimes } from "react-icons/fa";
-import { numberToChroma } from "roleypoly/src/design-system/atoms/colors";
-import chroma from "chroma-js";
+import * as React from 'react';
+import { Role as RPCRole } from '@roleypoly/rpc/shared';
+import * as styled from './Role.styled';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+import { numberToChroma } from 'roleypoly/src/design-system/atoms/colors';
+import chroma from 'chroma-js';

 type Props = {
    role: RPCRole.AsObject;
@ -15,9 +15,9 @@ type Props = {

 export const Role = (props: Props) => {
    const colorVars = {
-    "--role-color": "white",
-    "--role-contrast": "hsl(0,0,0%)",
-    "--role-accent": "hsl(0,0,70%)",
+        '--role-color': 'white',
+        '--role-contrast': 'hsl(0,0,0%)',
+        '--role-accent': 'hsl(0,0,70%)',
    };

    if (props.role.color !== 0) {
@ -27,9 +27,9 @@ export const Role = (props: Props) => {
        const ratio = chroma.contrast(contrastColorDown, baseColor);
        const contrastColor = ratio > 2 ? contrastColorDown : contrastColorUp;
        const accentColor = ratio > 2 ? baseColor.darken(2) : baseColor.brighten(2);
-    colorVars["--role-color"] = baseColor.css();
-    colorVars["--role-accent"] = accentColor.css();
-    colorVars["--role-contrast"] = contrastColor.css();
+        colorVars['--role-color'] = baseColor.css();
+        colorVars['--role-accent'] = accentColor.css();
+        colorVars['--role-contrast'] = contrastColor.css();
    }

    const styledProps: styled.StyledProps = {
@ -41,8 +41,8 @@ export const Role = (props: Props) => {
    const extra = !props.disabled
        ? {}
        : {
-        "data-tip": disabledReason(props.role),
-        "data-for": props.tooltipId,
+              'data-tip': disabledReason(props.role),
+              'data-for': props.tooltipId,
          };

    return (
@ -69,11 +69,11 @@ const disabledReason = (role: RPCRole.AsObject) => {
            let permissionHits: string[] = [];

            (permissions & 0x00000008) === 0x00000008 &&
-        permissionHits.push("Administrator");
+                permissionHits.push('Administrator');
            (permissions & 0x10000000) === 0x10000000 &&
-        permissionHits.push("Manage Roles");
+                permissionHits.push('Manage Roles');

-      return `This role has unsafe permissions: ${permissionHits.join(", ")}`;
+            return `This role has unsafe permissions: ${permissionHits.join(', ')}`;
        default:
            return `This role is disabled.`;
    }
--- a/src/design-system/atoms/space/Space.stories.tsx
+++ b/src/design-system/atoms/space/Space.stories.tsx
@ -1,8 +1,8 @@
-import { Space as SpaceComponent } from "./Space";
-import * as React from "react";
+import { Space as SpaceComponent } from './Space';
+import * as React from 'react';

 export default {
-  title: "Atoms",
+    title: 'Atoms',
 };

 export const Space = () => (
--- a/src/design-system/atoms/space/Space.tsx
+++ b/src/design-system/atoms/space/Space.tsx
@ -1,5 +1,5 @@
-import styled from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const Space = styled.div`
    height: 15px;
--- a/src/design-system/atoms/sparkle/Sparkle.stories.tsx
+++ b/src/design-system/atoms/sparkle/Sparkle.stories.tsx
@ -1,10 +1,10 @@
-import * as React from "react";
-import { SparkleOverlay } from "./Sparkle";
-import { Button } from "roleypoly/src/design-system/atoms/button";
-import { Hero } from "roleypoly/src/design-system/atoms/hero";
+import * as React from 'react';
+import { SparkleOverlay } from './Sparkle';
+import { Button } from 'roleypoly/src/design-system/atoms/button';
+import { Hero } from 'roleypoly/src/design-system/atoms/hero';

 export default {
-  title: "Atoms/Sparkle",
+    title: 'Atoms/Sparkle',
    component: SparkleOverlay,
    args: {
        size: -10,
--- a/src/design-system/atoms/sparkle/Sparkle.tsx
+++ b/src/design-system/atoms/sparkle/Sparkle.tsx
@ -1,8 +1,8 @@
-import * as React from "react";
-import styled from "styled-components";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
-import { SparklePatternAlpha, SparklePatternBeta } from "./Shapes";
+import * as React from 'react';
+import styled from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';

 type Props = {
    children: React.ReactNode;
@ -16,8 +16,8 @@ const SparkleContainer = styled.div`
 `;

 type EffectProps = {
-  effectSize: Props["size"];
-  effectOpacity: Props["opacity"];
+    effectSize: Props['size'];
+    effectOpacity: Props['opacity'];
 };

 const SparkleEffect = styled.div<EffectProps>`
@ -35,10 +35,7 @@ const SparkleEffect = styled.div<EffectProps>`

 export const SparkleOverlay = (props: Props) => (
    <SparkleContainer>
-    <SparkleEffect
-      effectSize={props.size || 0}
-      effectOpacity={props.opacity || 1}
-    >
+        <SparkleEffect effectSize={props.size || 0} effectOpacity={props.opacity || 1}>
            <SparklePatternAlpha
                repeatCount={props.repeatCount}
                height="100%"
--- a/src/design-system/atoms/tab-view/TabView.stories.tsx
+++ b/src/design-system/atoms/tab-view/TabView.stories.tsx
@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TabView, Tab } from './TabView';
+
+export default {
+    title: 'Atoms/Tab View',
+    argTypes: {
+        tabCount: { control: 'range', min: 1, max: 100 },
+    },
+    args: {
+        tabCount: 10,
+    },
+};
+
+export const ManyTabs = ({ tabCount }) => {
+    const tabs = [...'0'.repeat(tabCount)].reduce(
+        (acc, _, idx) => ({
+            ...acc,
+            [`Tab ${idx + 1}`]: <Tab>{() => <div>tab {idx + 1}</div>}</Tab>,
+        }),
+        {}
+    );
+
+    return <TabView>{tabs}</TabView>;
+};
--- a/src/design-system/atoms/tab-view/TabView.story.tsx
+++ b/src/design-system/atoms/tab-view/TabView.story.tsx
@ -1,37 +0,0 @@
-import * as React from 'react';
-import { atomStories } from 'atoms/atoms.story';
-import { TabView, Tab } from './TabView';
-import { number } from '@storybook/addon-knobs';
-
-const story = atomStories('Tab View', module);
-
-story.add('Multiple Tabs', () => (
-    <TabView>
-        {{
-            'Tab 1': <Tab>{() => <div>tab 1</div>}</Tab>,
-            'Tab 2': <Tab>{() => <div>tab 2</div>}</Tab>,
-        }}
-    </TabView>
-));
-
-story.add('Single Tab', () => (
-    <TabView>
-        {{
-            'Tab 1': <Tab>{() => <div>tab 1</div>}</Tab>,
-        }}
-    </TabView>
-));
-
-story.add('Many Tabs', () => {
-    const amount = number('Tab Count', 10);
-
-    const tabs = [...'0'.repeat(amount)].reduce(
-        (acc, _, idx) => ({
-            ...acc,
-            [`Tab ${idx + 1}`]: <Tab>{() => <div>tab {idx + 1}</div>}</Tab>,
-        }),
-        {}
-    );
-
-    return <TabView>{tabs}</TabView>;
-});
--- a/src/design-system/atoms/tab-view/TabView.styled.ts
+++ b/src/design-system/atoms/tab-view/TabView.styled.ts
@ -1,8 +1,8 @@
-import styled, { css } from "styled-components";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
-import { onTablet } from "roleypoly/src/design-system/atoms/breakpoints";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
+import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 export const TabViewStyled = styled.div``;

--- a/src/design-system/atoms/tab-view/TabView.tsx
+++ b/src/design-system/atoms/tab-view/TabView.tsx
@ -7,6 +7,7 @@ export type TabViewProps = {
 };

 type TabProps = {
+    title: string;
    children: () => React.ReactNode;
 };

--- a/src/design-system/atoms/text-input/TextInput.stories.tsx
+++ b/src/design-system/atoms/text-input/TextInput.stories.tsx
@ -1,15 +1,15 @@
-import * as React from "react";
-import { TextInput, TextInputWithIcon } from "./TextInput";
-import { SmallTitle } from "roleypoly/src/design-system/atoms/typography";
-import { FiKey } from "react-icons/fi";
+import * as React from 'react';
+import { TextInput, TextInputWithIcon } from './TextInput';
+import { SmallTitle } from 'roleypoly/src/design-system/atoms/typography';
+import { FiKey } from 'react-icons/fi';

 export default {
-  title: "Atoms/Text Input",
+    title: 'Atoms/Text Input',
    argTypes: {
-    placeholder: { control: "text" },
+        placeholder: { control: 'text' },
    },
    args: {
-    placeholder: "Fill me in!",
+        placeholder: 'Fill me in!',
    },
 };

--- a/src/design-system/atoms/text-input/TextInput.tsx
+++ b/src/design-system/atoms/text-input/TextInput.tsx
@ -1,6 +1,6 @@
-import * as React from "react";
-import styled from "styled-components";
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import * as React from 'react';
+import styled from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';

 const StyledTextInput = styled.input`
    appearance: none;
--- a/src/design-system/atoms/typist/Typist.stories.tsx
+++ b/src/design-system/atoms/typist/Typist.stories.tsx
@ -1,13 +1,13 @@
-import * as React from "react";
-import { Typist } from "./Typist";
+import * as React from 'react';
+import { Typist } from './Typist';

 export default {
-  title: "Atoms/Typist",
+    title: 'Atoms/Typist',
    component: Typist,
    args: {
        charTimeout: 75,
        resetTimeout: 2000,
-    lines: ["hello world", "and again", "a third", "story time!"],
+        lines: ['hello world', 'and again', 'a third', 'story time!'],
    },
 };

--- a/src/design-system/atoms/typist/Typist.tsx
+++ b/src/design-system/atoms/typist/Typist.tsx
@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';

 type TypistProps = {
    resetTimeout: number;
@ -7,7 +7,7 @@ type TypistProps = {
 };

 export const Typist = (props: TypistProps) => {
-  const [outputText, setOutputText] = React.useState("");
+    const [outputText, setOutputText] = React.useState('');
    const [currentLine, setCurrentLine] = React.useState(0);

    React.useEffect(() => {
@ -15,7 +15,7 @@ export const Typist = (props: TypistProps) => {

        if (outputText === fullLine) {
            const timeout = setTimeout(() => {
-        setOutputText("");
+                setOutputText('');
                setCurrentLine((currentLine + 1) % props.lines.length);
            }, props.resetTimeout);

--- a/src/design-system/atoms/typography/typography.stories.tsx
+++ b/src/design-system/atoms/typography/typography.stories.tsx
@ -1,18 +1,17 @@
-import * as React from "react";
-import * as typography from "./typography";
-import styled from "styled-components";
+import * as React from 'react';
+import * as typography from './typography';
+import styled from 'styled-components';

 export default {
-  title: "Atoms/Typography",
+    title: 'Atoms/Typography',
 };

 const Text = () => (
    <>
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
-      placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam
-      deserunt repellat. Exercitationem modi incidunt autem nemo tempore eaque
-      soluta.
+            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
        </p>
        <p>
            帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
@ -20,25 +19,24 @@ const Text = () => (
            読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
        </p>
        <p>
-      🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄
-      💟💲🍻💜💩🔼 🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯
-      🌞💟🎌🍌 🔪📯🐎💮 👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊.
-      🔤🍍🌸📷🎴 💏🍌📎👥👉👒 👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒
-      🐕🌈👋
+            🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄 💟💲🍻💜💩🔼
+            🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯 🌞💟🎌🍌 🔪📯🐎💮
+            👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊. 🔤🍍🌸📷🎴 💏🍌📎👥👉👒
+            👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒 🐕🌈👋
        </p>
    </>
 );

 const swatches: [string, string | undefined, string][] = [
-  ["text900", "LargeTitle", "Used for large titles."],
-  ["text800", "MediumTitle", "Used for medium titles."],
-  ["text700", "SmallTitle", "Used for small titles."],
-  ["text600", "AccentTitle", "Used for accenting titles."],
-  ["text500", "LargeText", "Used for general large font text blocks."],
-  ["text400", "Text", "Used for less important font text blocks."],
-  ["text300", undefined, "Used for smaller UI elements."],
-  ["text200", "AmbientLarge", "Used for ambient text."],
-  ["text100", "AmbientSmall", "Used for ambient text."],
+    ['text900', 'LargeTitle', 'Used for large titles.'],
+    ['text800', 'MediumTitle', 'Used for medium titles.'],
+    ['text700', 'SmallTitle', 'Used for small titles.'],
+    ['text600', 'AccentTitle', 'Used for accenting titles.'],
+    ['text500', 'LargeText', 'Used for general large font text blocks.'],
+    ['text400', 'Text', 'Used for less important font text blocks.'],
+    ['text300', undefined, 'Used for smaller UI elements.'],
+    ['text200', 'AmbientLarge', 'Used for ambient text.'],
+    ['text100', 'AmbientSmall', 'Used for ambient text.'],
 ];

 const Section = styled.section`
@ -65,7 +63,9 @@ export const Sizes = () => (
            return (
                <Section key={i}>
                    <div>
-            <Component>The quick brown fox jumped over the lazy dog.</Component>
+                        <Component>
+                            The quick brown fox jumped over the lazy dog.
+                        </Component>
                    </div>
                    <div>
                        <Usage>
--- a/src/design-system/atoms/typography/typography.tsx
+++ b/src/design-system/atoms/typography/typography.tsx
@ -1,5 +1,5 @@
-import styled, { css } from "styled-components";
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import styled, { css } from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports

 const reset = css`
    margin: 0;
--- a/src/jstest/index.ts
+++ b/src/jstest/index.ts
@ -1 +1 @@
-console.log("hello world");
+console.log('hello world');
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,10 +14,10 @@
        "baseUrl": ".",
        "strict": true,
        "esModuleInterop": true,
-    "isolatedModules": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,
        "declaration": true,
+        "moduleResolution": "node",
        "paths": {
            "roleypoly/*": ["*"]
        }
--- a/yarn.lock
+++ b/yarn.lock
@ -1240,6 +1240,26 @@
  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

+"@hapi/accept@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"
+  integrity sha512-fMr4d7zLzsAXo28PRRQPXR1o2Wmu+6z+VY1UzDp0iFo13Twj8WePakwXBiqn3E1aAlTpSNzCXdnnQXFhst8h8Q==
+  dependencies:
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/boom@9.x.x":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.0.tgz#0d9517657a56ff1e0b42d0aca9da1b37706fec56"
+  integrity sha512-4nZmpp4tXbm162LaZT45P7F7sgiem8dwAh2vHWT6XX24dozNjGMg6BvKCRvtCUcmcXqeMIUqWN8Rc5X8yKuROQ==
+  dependencies:
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/hoek@9.x.x":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
+  integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
+
 "@icons/material@^0.2.4":
  version "0.2.4"
  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@ -1352,20 +1372,20 @@
    call-me-maybe "^1.0.1"
    glob-to-regexp "^0.3.0"

-"@next/env@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4.tgz#950f3370151a940ecac6e7e19cf125e6113e101e"
-  integrity sha512-uGnUO68/u9C8bqHj5obIvyGRDqe/jh1dFSLx03mJmlESjcCmV4umXYJOnt3XzU1VhVntSE+jUZtnS5bjYmmLfQ==
+"@next/env@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.5.tgz#db993649ec6e619e34a36de90dc2baa52fc5280f"
+  integrity sha512-N9wdjU6XoqLqNQWtrGiWtp1SUuJsYK1cNrZ24A6YD+4w5CNV5SkZX6aewKZCCLP5Y8UNfTij2FkJiSYUfBjX8g==

-"@next/polyfill-module@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.4.tgz#35ea31ce5f6bbf0ac31aac483b60d4ba17a79861"
-  integrity sha512-GA2sW7gs33s7RGPFqkMiT9asYpaV/Hhw9+XM9/UlPrkNdTaxZWaPa2iHgmqJ7k6OHiOmy+CBLFrUBgzqKNhs3Q==
+"@next/polyfill-module@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.5.tgz#d9c65679a66664ab4859078f58997113c9d01f10"
+  integrity sha512-itqYFeHo3yN4ccpHq2uNFC2UVQm12K6DxUVwYdui9MJiiueT0pSGb2laYEjf/G5+vVq7M2vb+DkjkOkPMBVfeg==

-"@next/react-dev-overlay@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.4.tgz#7d88a710d23021020cca213bc77106df18950b2b"
-  integrity sha512-tYvNmOQ0inykSvcimkTiONMv4ZyFB2G2clsy9FKLLRZ2OA+Jiov6T7Pq6YpKbBwTLu/BQGVc7Qn4BZ5CDHR8ig==
+"@next/react-dev-overlay@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.5.tgz#11b36813d75c43b7bd9d5e478bded1ed5391d03a"
+  integrity sha512-B1nDANxjXr2oyohv+tX0OXZTmJtO5qEWmisNPGnqQ2Z32IixfaAgyNYVuCVf20ap6EUz5elhgNUwRIFh/e26mQ==
  dependencies:
    "@babel/code-frame" "7.10.4"
    ally.js "1.4.1"
@ -1378,10 +1398,10 @@
    stacktrace-parser "0.1.10"
    strip-ansi "6.0.0"

-"@next/react-refresh-utils@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.4.tgz#3bfe067f0cfc717f079482d956211708c9e81126"
-  integrity sha512-TPhEiYxK5YlEuzVuTzgZiDN7SDh4drvUAqsO9Yccd8WLcfYqOLRN2fCALremW5mNLAZQZW3iFgW8PW8Gckq4EQ==
+"@next/react-refresh-utils@9.5.5":
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.5.tgz#fe559b5ca51c038cb7840e0d669a6d7ef01fe4eb"
+  integrity sha512-Gz5z0+ID+KAGto6Tkgv1a340damEw3HG6ANLKwNi5/QSHqQ3JUAVxMuhz3qnL54505I777evpzL89ofWEMIWKw==

 "@nodelib/fs.stat@^1.1.2":
  version "1.1.3"
@ -2338,10 +2358,10 @@
  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==

-"@types/styled-components@5.1.3":
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.3.tgz#6fab3d9c8f7d9a15cbb89d379d850c985002f363"
-  integrity sha512-HGpirof3WOhiX17lb61Q/tpgqn48jxO8EfZkdJ8ueYqwLbK2AHQe/G08DasdA2IdKnmwOIP1s9X2bopxKXgjRw==
+"@types/styled-components@5.1.4":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384"
+  integrity sha512-78f5Zuy0v/LTQNOYfpH+CINHpchzMMmAt9amY2YNtSgsk1TmlKm8L2Wijss/mtTrsUAVTm2CdGB8VOM65vA8xg==
  dependencies:
    "@types/hoist-non-react-statics" "*"
    "@types/react" "*"
@ -7439,10 +7459,10 @@ next-tick@~1.0.0:
  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=

-next@^9.5.4:
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.4.tgz#3c6aa3fd38ff1711e956ea2b6833475e0262ec35"
-  integrity sha512-dicsJSxiUFcRjeZ/rNMAO3HS5ttFFuRHhdAn5g7lHnWUZ3MnEX4ggBIihaoUr6qu2So9KoqUPXpS91MuSXUmBw==
+next@^9.5.5:
+  version "9.5.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.5.tgz#37a37095e7c877ed6c94ba82e34ab9ed02b4eb33"
+  integrity sha512-KF4MIdTYeI6YIGODNw27w9HGzCll4CXbUpkP6MNvyoHlpsunx8ybkQHm/hYa7lWMozmsn58LwaXJOhe4bSrI0g==
  dependencies:
    "@ampproject/toolbox-optimizer" "2.6.0"
    "@babel/code-frame" "7.10.4"
@ -7462,10 +7482,11 @@ next@^9.5.4:
    "@babel/preset-typescript" "7.10.4"
    "@babel/runtime" "7.11.2"
    "@babel/types" "7.11.5"
-    "@next/env" "9.5.4"
-    "@next/polyfill-module" "9.5.4"
-    "@next/react-dev-overlay" "9.5.4"
-    "@next/react-refresh-utils" "9.5.4"
+    "@hapi/accept" "5.0.1"
+    "@next/env" "9.5.5"
+    "@next/polyfill-module" "9.5.5"
+    "@next/react-dev-overlay" "9.5.5"
+    "@next/react-refresh-utils" "9.5.5"
    ast-types "0.13.2"
    babel-plugin-transform-define "2.0.0"
    babel-plugin-transform-react-remove-prop-types "0.4.24"