chore: prettier

.github/dependabot.yml

@@ -1,24 +1,24 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
+    - package-ecosystem: 'npm'
-    directory: "/"
+      directory: '/'
       schedule:
-      interval: "daily"
+          interval: 'daily'
 
-  - package-ecosystem: "github-actions"
+    - package-ecosystem: 'github-actions'
-    directory: "/"
+      directory: '/'
       schedule:
-      interval: "daily"
+          interval: 'daily'
 
-  - package-ecosystem: "docker"
+    - package-ecosystem: 'docker'
-    directory: "/.devcontainer"
+      directory: '/.devcontainer'
       schedule:
-      interval: "daily"
+          interval: 'daily'
 
-  - package-ecosystem: "gomod"
+    - package-ecosystem: 'gomod'
-    directory: "/"
+      directory: '/'
       schedule:
-      interval: "daily"
+          interval: 'daily'
 # - package-ecosystem: "terraform"
 #   directory: "/terraform/platform/bootstrap"
 #   schedule:

.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

.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
 

.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

.github/workflows/terraform.yml

@@ -1,2 +1 @@
 name: Terraform
-

.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

.prettierignore

@@ -0,0 +1 @@
+bazel-*

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 90,
+    useTabs: false,
+    tabWidth: 4,
+    singleQuote: true,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    semi: true,
+};

.storybook/main.js

@@ -1,13 +1,13 @@
-const path = require("path");
+const path = require('path');
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+    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'),
             }),
         ];
 

.storybook/manager.js

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

.storybook/preview.js

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

.storybook/theme.js

@@ -1,8 +1,8 @@
-import { create } from "@storybook/theming";
+import { create } from '@storybook/theming';
-import { palette } from "../src/design-system/atoms/colors";
+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",
+    fontBase: 'system-ui, sans-serif',
-  fontCode: "monospace",
+    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,

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",

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.

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

@@ -1,15 +1,15 @@
-import { text } from "@storybook/addon-knobs";
+import { text } from '@storybook/addon-knobs';
-import * as React from "react";
+import * as React from 'react';
-import { Avatar } from "./Avatar";
+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',
     },
 };
 

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

@@ -1,10 +1,9 @@
-import { AvatarProps } from "./Avatar";
+import { AvatarProps } from './Avatar';
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
 
-type ContainerProps = Pick<AvatarProps, "size"> &
+type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;
-  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;

src/design-system/atoms/branding/Branding.stories.tsx

@@ -1,12 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
-import {
+import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
-  Logomark as BrandingLogomark,
+import styled from 'styled-components';
-  Logotype as BrandingLogotype,
-} from "./Branding";
-import styled from "styled-components";
 
 export default {
-  title: "Atoms/Branding",
+    title: 'Atoms/Branding',
 };
 
 const Wrapper = styled.div`

src/design-system/atoms/branding/Branding.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
+import * as React from 'react';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+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
+        <g id="Logomark" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      id="Logomark"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-    >
             <g id="Group" transform="translate(35.000000, -46.000000)">
                 <path
                     fill={typeFill || fill}

src/design-system/atoms/breakpoints/Breakpoints.stories.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
-import { BreakpointDebugTool } from "./DebugTool";
+import { BreakpointDebugTool } from './DebugTool';
-import { BreakpointsProvider } from "./BreakpointProvider";
+import { BreakpointsProvider } from './BreakpointProvider';
 
 export default {
-  title: "Atoms/Breakpoints",
+    title: 'Atoms/Breakpoints',
     decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
     component: BreakpointDebugTool,
 };

src/design-system/atoms/breakpoints/Context.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
+import * as React from 'react';
-import { withContext } from "roleypoly/src/common/utils/withContext";
+import { withContext } from 'roleypoly/src/common/utils/withContext';
 
 export type ScreenSize = {
     onSmallScreen: boolean;

src/design-system/atoms/button/Button.story.tsx

@@ -1,20 +1,20 @@
 // TODO: port to new story
 
-import * as React from "react";
+import * as React from 'react';
-import { atomStories } from "atoms/atoms.story";
+import { atomStories } from 'atoms/atoms.story';
-import { Button, ButtonProps } from "./Button";
+import { Button, ButtonProps } from './Button';
-import { text as textKnob } from "@storybook/addon-knobs";
+import { text as textKnob } from '@storybook/addon-knobs';
-import { FaDiscord } from "react-icons/fa";
+import { FaDiscord } from 'react-icons/fa';
-import { styled } from "@storybook/theming";
+import { styled } from '@storybook/theming';
 
-const largeStory = atomStories("Button/Large", module);
+const largeStory = atomStories('Button/Large', module);
-const smallStory = atomStories("Button/Small", module);
+const smallStory = atomStories('Button/Small', module);
 
-const colorModes: NonNullable<ButtonProps["color"]>[] = [
+const colorModes: NonNullable<ButtonProps['color']>[] = [
-  "primary",
+    'primary',
-  "secondary",
+    'secondary',
-  "discord",
+    'discord',
-  "muted",
+    'muted',
 ];
 
 const Margin = styled.div`
@@ -23,8 +23,8 @@ const Margin = styled.div`
     align-items: center;
 `;
 
-const storyTemplate = (props: Omit<ButtonProps, "children">) => () => {
+const storyTemplate = (props: Omit<ButtonProps, 'children'>) => () => {
-  const text = textKnob("Button content", "Example Button");
+    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(largeStory, 'large');
-storyBuilder(smallStory, "small");
+storyBuilder(smallStory, 'small');

src/design-system/atoms/button/Button.styled.ts

@@ -1,8 +1,8 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import { text400, text300 } from "roleypoly/src/design-system/atoms/typography";
+import { text400, text300 } from 'roleypoly/src/design-system/atoms/typography';
-import { fontCSS } from "roleypoly/src/design-system/atoms/fonts";
+import { fontCSS } from 'roleypoly/src/design-system/atoms/fonts';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+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;

src/design-system/atoms/colors/colors.stories.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react';
-import { palette } from "./colors";
+import { palette } from './colors';
-import styled from "styled-components";
+import styled from 'styled-components';
-import chroma from "chroma-js";
+import chroma from 'chroma-js';
-import { AmbientSmall } from "roleypoly/src/design-system/atoms/typography";
+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>
+                <AmbientSmall>WCAG Contrast testing disabled for this page.</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],

src/design-system/atoms/colors/colors.tsx

@@ -1,29 +1,29 @@
-import { css, createGlobalStyle } from "styled-components";
+import { css, createGlobalStyle } from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
-import chroma from "chroma-js";
+import chroma from 'chroma-js';
 
 export const palette = {
-  taupe100: "#332D2D",
+    taupe100: '#332D2D',
-  taupe200: "#453E3D",
+    taupe200: '#453E3D',
-  taupe300: "#5D5352",
+    taupe300: '#5D5352',
-  taupe400: "#756867",
+    taupe400: '#756867',
-  taupe500: "#AB9B9A",
+    taupe500: '#AB9B9A',
-  taupe600: "#EBD6D4",
+    taupe600: '#EBD6D4',
 
-  discord100: "#23272A",
+    discord100: '#23272A',
-  discord200: "#2C2F33",
+    discord200: '#2C2F33',
-  discord400: "#7289DA",
+    discord400: '#7289DA',
-  discord500: "#99AAB5",
+    discord500: '#99AAB5',
 
-  green400: "#46B646",
+    green400: '#46B646',
 
-  red400: "#E95353",
+    red400: '#E95353',
 
-  gold400: "#EFCF24",
+    gold400: '#EFCF24',
 
-  grey100: "#1C1010",
+    grey100: '#1C1010',
-  grey500: "#DBD9D9",
+    grey500: '#DBD9D9',
-  grey600: "#F2EFEF",
+    grey600: '#F2EFEF',
 };
 
 const getPaletteCSS = () =>

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

@@ -1,2 +1,2 @@
-export * from "./colors";
+export * from './colors';
-export * as utils from "./withColors";
+export * as utils from './withColors';

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

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

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

@@ -1,6 +1,6 @@
-import styled from "styled-components";
+import styled from 'styled-components';
-import * as React from "react";
+import * as React from 'react';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 const dotOverlayBase = styled.div`
     opacity: 0.6;

src/design-system/atoms/fader/Fader.stories.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
+import * as React from 'react';
-import { FaderOpacity, FaderSlide } from "./Fader";
+import { FaderOpacity, FaderSlide } from './Fader';
-import { Button } from "roleypoly/src/design-system/atoms/button";
+import { Button } from 'roleypoly/src/design-system/atoms/button';
-import { action } from "@storybook/addon-actions";
+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>
     );
 };

src/design-system/atoms/fader/Fader.tsx

@@ -1,15 +1,15 @@
-import * as React from "react";
+import * as React from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+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">>`
+const FaderSlideStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
-  max-height: ${(props) => (props.isVisible ? "4em" : "0")};
+    max-height: ${(props) => (props.isVisible ? '4em' : '0')};
-  pointer-events: ${(props) => (props.isVisible ? "unset" : "none")};
+    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}>
+        <FaderSlideStyled isVisible={props.isVisible}>{props.children}</FaderSlideStyled>
-      {props.children}
-    </FaderSlideStyled>
     );
 };

src/design-system/atoms/fonts/fonts.stories.tsx

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

src/design-system/atoms/fonts/fonts.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
+import * as React from 'react';
-import Head from "next/head";
+import Head from 'next/head';
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+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,
+    font-family: 'source-han-sans-japanese', 'Source Sans Pro', sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
 `;
 
 export const UseFontStyled = styled.div`

src/design-system/atoms/halfsies/Halfsies.stories.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react';
-import { HalfsiesContainer, HalfsiesItem } from "./Halfsies";
+import { HalfsiesContainer, HalfsiesItem } from './Halfsies';
 
 export default {
-  title: "Atoms/Halfsies",
+    title: 'Atoms/Halfsies',
 };
 
 export const Container = () => (

src/design-system/atoms/halfsies/Halfsies.tsx

@@ -1,6 +1,6 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import { onTablet } from "roleypoly/src/design-system/atoms/breakpoints";
+import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 export const HalfsiesContainer = styled.div`
     display: flex;

src/design-system/atoms/hero/Hero.stories.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react';
-import { Hero as HeroComponent } from "./Hero";
+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 = ({
+const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) => (
-  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",
+                    position: 'absolute',
-          overflow: "hidden",
+                    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",
+                    position: 'absolute',
-          overflow: "hidden",
+                    overflow: 'hidden',
                 }}
             >
                 bottomSpacing

src/design-system/atoms/hero/Hero.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+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(
+    min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
-    100vh - ${(props) => props.topSpacing + props.bottomSpacing}px
-  );
     margin-top: ${(props) => props.topSpacing}px;
 `;
 

src/design-system/atoms/popover/Popover.stories.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
+import * as React from 'react';
-import { Button } from "roleypoly/src/design-system/atoms/button";
+import { Button } from 'roleypoly/src/design-system/atoms/button';
-import { Popover as PopoverComponent } from "./Popover";
+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"

src/design-system/atoms/popover/Popover.styled.ts

@@ -1,11 +1,8 @@
-import {
+import { onSmallScreen, onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
-  onSmallScreen,
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
-  onTablet,
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
-} from "roleypoly/src/design-system/atoms/breakpoints";
+import styled, { css } from 'styled-components';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
-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;

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";
+} from './Popover.styled';
-import { globalOnKeyUp } from "roleypoly/src/design-system/atoms/key-events";
+import { globalOnKeyUp } from 'roleypoly/src/design-system/atoms/key-events';
-import { IoMdClose } from "react-icons/io";
+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')}
                 />
             )}
         </>

src/design-system/atoms/role/Role.stories.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
+import * as React from 'react';
-import { Role as RoleComponent } from "./Role";
+import { Role as RoleComponent } from './Role';
-import { roleCategory } from "roleypoly/hack/fixtures/storyData";
+import { roleCategory } from 'roleypoly/hack/fixtures/storyData';
-import { withColors } from "roleypoly/src/design-system/atoms/colors/withColors";
+import { withColors } from 'roleypoly/src/design-system/atoms/colors/withColors';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export default {
-  title: "Atoms/Role",
+    title: 'Atoms/Role',
     component: RoleComponent,
     decorators: [withColors],
 };

src/design-system/atoms/role/Role.styled.tsx

@@ -1,7 +1,7 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+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
+        props.selected && !props.defaultColor ? 'var(--role-color)' : palette.taupe100};
-      ? "var(--role-color)"
+    color: ${(props) => (props.selected ? 'var(--role-contrast)' : palette.grey600)};
-      : 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
+        props.defaultColor && !props.selected ? 'transparent' : 'var(--role-color)'};
-      ? "transparent"
-      : "var(--role-color)"};
     border: 1px solid
         ${(props) =>
             props.defaultColor
-        ? "var(--role-color)"
+                ? 'var(--role-color)'
                 : props.selected
-        ? "var(--role-accent)"
+                ? 'var(--role-accent)'
-        : "transparent"};
+                : '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-color)'
-        : "var(--role-contrast)"};
+                : 'var(--role-contrast)'};
     }
 `;
 

src/design-system/atoms/role/Role.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
-import { Role as RPCRole } from "@roleypoly/rpc/shared";
+import { Role as RPCRole } from '@roleypoly/rpc/shared';
-import * as styled from "./Role.styled";
+import * as styled from './Role.styled';
-import { FaCheck, FaTimes } from "react-icons/fa";
+import { FaCheck, FaTimes } from 'react-icons/fa';
-import { numberToChroma } from "roleypoly/src/design-system/atoms/colors";
+import { numberToChroma } from 'roleypoly/src/design-system/atoms/colors';
-import chroma from "chroma-js";
+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-color': 'white',
-    "--role-contrast": "hsl(0,0,0%)",
+        '--role-contrast': 'hsl(0,0,0%)',
-    "--role-accent": "hsl(0,0,70%)",
+        '--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-color'] = baseColor.css();
-    colorVars["--role-accent"] = accentColor.css();
+        colorVars['--role-accent'] = accentColor.css();
-    colorVars["--role-contrast"] = contrastColor.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-tip': disabledReason(props.role),
-        "data-for": props.tooltipId,
+              '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.`;
     }

src/design-system/atoms/space/Space.stories.tsx

@@ -1,8 +1,8 @@
-import { Space as SpaceComponent } from "./Space";
+import { Space as SpaceComponent } from './Space';
-import * as React from "react";
+import * as React from 'react';
 
 export default {
-  title: "Atoms",
+    title: 'Atoms',
 };
 
 export const Space = () => (

src/design-system/atoms/space/Space.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components";
+import styled from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 export const Space = styled.div`
     height: 15px;

src/design-system/atoms/sparkle/Sparkle.stories.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
+import * as React from 'react';
-import { SparkleOverlay } from "./Sparkle";
+import { SparkleOverlay } from './Sparkle';
-import { Button } from "roleypoly/src/design-system/atoms/button";
+import { Button } from 'roleypoly/src/design-system/atoms/button';
-import { Hero } from "roleypoly/src/design-system/atoms/hero";
+import { Hero } from 'roleypoly/src/design-system/atoms/hero';
 
 export default {
-  title: "Atoms/Sparkle",
+    title: 'Atoms/Sparkle',
     component: SparkleOverlay,
     args: {
         size: -10,

src/design-system/atoms/sparkle/Sparkle.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
-import { SparklePatternAlpha, SparklePatternBeta } from "./Shapes";
+import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
 
 type Props = {
     children: React.ReactNode;
@@ -16,8 +16,8 @@ const SparkleContainer = styled.div`
 `;
 
 type EffectProps = {
-  effectSize: Props["size"];
+    effectSize: Props['size'];
-  effectOpacity: Props["opacity"];
+    effectOpacity: Props['opacity'];
 };
 
 const SparkleEffect = styled.div<EffectProps>`
@@ -35,10 +35,7 @@ const SparkleEffect = styled.div<EffectProps>`
 
 export const SparkleOverlay = (props: Props) => (
     <SparkleContainer>
-    <SparkleEffect
+        <SparkleEffect effectSize={props.size || 0} effectOpacity={props.opacity || 1}>
-      effectSize={props.size || 0}
-      effectOpacity={props.opacity || 1}
-    >
             <SparklePatternAlpha
                 repeatCount={props.repeatCount}
                 height="100%"

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>;
+};

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>;
-});

src/design-system/atoms/tab-view/TabView.styled.ts

@@ -1,8 +1,8 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import { transitions } from "roleypoly/src/design-system/atoms/timings";
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
-import { onTablet } from "roleypoly/src/design-system/atoms/breakpoints";
+import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 export const TabViewStyled = styled.div``;
 

src/design-system/atoms/tab-view/TabView.tsx

@@ -7,6 +7,7 @@ export type TabViewProps = {
 };
 
 type TabProps = {
+    title: string;
     children: () => React.ReactNode;
 };
 

src/design-system/atoms/text-input/TextInput.stories.tsx

@@ -1,15 +1,15 @@
-import * as React from "react";
+import * as React from 'react';
-import { TextInput, TextInputWithIcon } from "./TextInput";
+import { TextInput, TextInputWithIcon } from './TextInput';
-import { SmallTitle } from "roleypoly/src/design-system/atoms/typography";
+import { SmallTitle } from 'roleypoly/src/design-system/atoms/typography';
-import { FiKey } from "react-icons/fi";
+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!',
     },
 };
 

src/design-system/atoms/text-input/TextInput.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
-import { palette } from "roleypoly/src/design-system/atoms/colors";
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
 
 const StyledTextInput = styled.input`
     appearance: none;

src/design-system/atoms/typist/Typist.stories.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
+import * as React from 'react';
-import { Typist } from "./Typist";
+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!'],
     },
 };
 

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);
 

src/design-system/atoms/typography/typography.stories.tsx

@@ -1,18 +1,17 @@
-import * as React from "react";
+import * as React from 'react';
-import * as typography from "./typography";
+import * as typography from './typography';
-import styled from "styled-components";
+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
+            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
-      deserunt repellat. Exercitationem modi incidunt autem nemo tempore eaque
+            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
-      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."],
+    ['text900', 'LargeTitle', 'Used for large titles.'],
-  ["text800", "MediumTitle", "Used for medium titles."],
+    ['text800', 'MediumTitle', 'Used for medium titles.'],
-  ["text700", "SmallTitle", "Used for small titles."],
+    ['text700', 'SmallTitle', 'Used for small titles.'],
-  ["text600", "AccentTitle", "Used for accenting titles."],
+    ['text600', 'AccentTitle', 'Used for accenting titles.'],
-  ["text500", "LargeText", "Used for general large font text blocks."],
+    ['text500', 'LargeText', 'Used for general large font text blocks.'],
-  ["text400", "Text", "Used for less important font text blocks."],
+    ['text400', 'Text', 'Used for less important font text blocks.'],
-  ["text300", undefined, "Used for smaller UI elements."],
+    ['text300', undefined, 'Used for smaller UI elements.'],
-  ["text200", "AmbientLarge", "Used for ambient text."],
+    ['text200', 'AmbientLarge', 'Used for ambient text.'],
-  ["text100", "AmbientSmall", "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>

src/design-system/atoms/typography/typography.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
-import * as _ from "styled-components"; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 const reset = css`
     margin: 0;

src/jstest/index.ts

@@ -1 +1 @@
-console.log("hello world");
+console.log('hello world');

tsconfig.json

@@ -14,10 +14,10 @@
         "baseUrl": ".",
         "strict": true,
         "esModuleInterop": true,
-    "isolatedModules": true,
         "allowSyntheticDefaultImports": true,
         "skipLibCheck": true,
         "declaration": true,
+        "moduleResolution": "node",
         "paths": {
             "roleypoly/*": ["*"]
         }

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":
+"@next/env@9.5.5":
-  version "9.5.4"
+  version "9.5.5"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4.tgz#950f3370151a940ecac6e7e19cf125e6113e101e"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.5.tgz#db993649ec6e619e34a36de90dc2baa52fc5280f"
-  integrity sha512-uGnUO68/u9C8bqHj5obIvyGRDqe/jh1dFSLx03mJmlESjcCmV4umXYJOnt3XzU1VhVntSE+jUZtnS5bjYmmLfQ==
+  integrity sha512-N9wdjU6XoqLqNQWtrGiWtp1SUuJsYK1cNrZ24A6YD+4w5CNV5SkZX6aewKZCCLP5Y8UNfTij2FkJiSYUfBjX8g==
 
-"@next/polyfill-module@9.5.4":
+"@next/polyfill-module@9.5.5":
-  version "9.5.4"
+  version "9.5.5"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.4.tgz#35ea31ce5f6bbf0ac31aac483b60d4ba17a79861"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.5.tgz#d9c65679a66664ab4859078f58997113c9d01f10"
-  integrity sha512-GA2sW7gs33s7RGPFqkMiT9asYpaV/Hhw9+XM9/UlPrkNdTaxZWaPa2iHgmqJ7k6OHiOmy+CBLFrUBgzqKNhs3Q==
+  integrity sha512-itqYFeHo3yN4ccpHq2uNFC2UVQm12K6DxUVwYdui9MJiiueT0pSGb2laYEjf/G5+vVq7M2vb+DkjkOkPMBVfeg==
 
-"@next/react-dev-overlay@9.5.4":
+"@next/react-dev-overlay@9.5.5":
-  version "9.5.4"
+  version "9.5.5"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.4.tgz#7d88a710d23021020cca213bc77106df18950b2b"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.5.tgz#11b36813d75c43b7bd9d5e478bded1ed5391d03a"
-  integrity sha512-tYvNmOQ0inykSvcimkTiONMv4ZyFB2G2clsy9FKLLRZ2OA+Jiov6T7Pq6YpKbBwTLu/BQGVc7Qn4BZ5CDHR8ig==
+  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":
+"@next/react-refresh-utils@9.5.5":
-  version "9.5.4"
+  version "9.5.5"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.4.tgz#3bfe067f0cfc717f079482d956211708c9e81126"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.5.tgz#fe559b5ca51c038cb7840e0d669a6d7ef01fe4eb"
-  integrity sha512-TPhEiYxK5YlEuzVuTzgZiDN7SDh4drvUAqsO9Yccd8WLcfYqOLRN2fCALremW5mNLAZQZW3iFgW8PW8Gckq4EQ==
+  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":
+"@types/styled-components@5.1.4":
-  version "5.1.3"
+  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.3.tgz#6fab3d9c8f7d9a15cbb89d379d850c985002f363"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384"
-  integrity sha512-HGpirof3WOhiX17lb61Q/tpgqn48jxO8EfZkdJ8ueYqwLbK2AHQe/G08DasdA2IdKnmwOIP1s9X2bopxKXgjRw==
+  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:
+next@^9.5.5:
-  version "9.5.4"
+  version "9.5.5"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.4.tgz#3c6aa3fd38ff1711e956ea2b6833475e0262ec35"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.5.tgz#37a37095e7c877ed6c94ba82e34ab9ed02b4eb33"
-  integrity sha512-dicsJSxiUFcRjeZ/rNMAO3HS5ttFFuRHhdAn5g7lHnWUZ3MnEX4ggBIihaoUr6qu2So9KoqUPXpS91MuSXUmBw==
+  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"
+    "@hapi/accept" "5.0.1"
-    "@next/polyfill-module" "9.5.4"
+    "@next/env" "9.5.5"
-    "@next/react-dev-overlay" "9.5.4"
+    "@next/polyfill-module" "9.5.5"
-    "@next/react-refresh-utils" "9.5.4"
+    "@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"