chore: restructure project into yarn workspaces, remove next

.babelrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-    presets: ['next/babel'],
+    plugins: ['styled-components'],
-    plugins: [['styled-components', { ssr: true }]],
 };

.gitignore

@@ -6,3 +6,4 @@ storybook-static
 worker
 wrangler.toml
 .devdbs
+dist

package.json

@@ -24,111 +24,47 @@
         "postinstall": "is-ci || husky install",
         "storybook": "start-storybook -p 6006",
         "storybook:build": "build-storybook",
+        "build": "run-p -c build:*",
+        "build:design-system": "yarn workspace @roleypoly/design-system run build",
+        "build:web": "yarn workspace @roleypoly/web run build",
         "test": "jest",
         "ui": "next dev -p 6601",
         "ui:build": "next build",
         "ui:prod": "cross-env next start -p ${PORT:-3000}",
         "worker": "node src/backend-emulator/main.js"
     },
-    "dependencies": {
-        "chroma-js": "^2.1.0",
-        "isomorphic-unfetch": "^3.1.0",
-        "ksuid": "^2.0.0",
-        "lodash": "^4.17.20",
-        "next": "^10.0.5",
-        "nookies": "^2.5.0",
-        "react": "^17.0.1",
-        "react-custom-scrollbars": "^4.2.1",
-        "react-dom": "^17.0.1",
-        "react-icons": "^4.1.0",
-        "react-is": "^17.0.1",
-        "react-tooltip": "^4.2.15",
-        "styled-components": "^5.2.1",
-        "styled-normalize": "^8.0.7",
-        "swr": "^0.4.0"
-    },
     "devDependencies": {
-        "@babel/core": "^7.12.10",
+        "husky": "^5.1.3",
-        "@cloudflare/workers-types": "^2.1.0",
+        "lint-staged": "^10.5.4",
-        "@icons/material": "^0.4.1",
-        "@peculiar/webcrypto": "^1.1.4",
-        "@storybook/addon-actions": "^6.1.14",
-        "@storybook/addon-essentials": "^6.1.14",
-        "@storybook/addon-links": "^6.1.14",
-        "@storybook/addons": "^6.1.14",
-        "@storybook/react": "^6.1.14",
-        "@storybook/theming": "^6.1.14",
-        "@types/chroma-js": "^2.1.3",
-        "@types/enzyme": "^3.10.8",
-        "@types/enzyme-adapter-react-16": "^1.0.6",
-        "@types/express": "^4.17.11",
-        "@types/jest": "^26.0.20",
-        "@types/lodash": "^4.14.167",
-        "@types/minimist": "^1.2.1",
-        "@types/node": "^14.14.31",
-        "@types/react": "^17.0.0",
-        "@types/react-custom-scrollbars": "^4.0.7",
-        "@types/react-dom": "^17.0.0",
-        "@types/styled-components": "^5.1.7",
-        "@types/uuid": "^8.3.0",
-        "@typescript-eslint/eslint-plugin": "^4.13.0",
-        "@typescript-eslint/eslint-plugin-tslint": "^4.13.0",
-        "@typescript-eslint/parser": "^4.13.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
-        "babel-jest": "^26.6.3",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-styled-components": "^1.12.0",
-        "chokidar": "^3.5.1",
-        "dotenv": "^8.2.0",
-        "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.1",
-        "eslint": "^7.20.0",
-        "eslint-config-prettier": "^7.1.0",
-        "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-jsdoc": "^32.2.0",
-        "eslint-plugin-react": "^7.22.0",
-        "husky": "^5.0.6",
-        "is-ci": "^2.0.0",
-        "jest": "^26.6.3",
-        "jest-cli": "^26.6.3",
-        "jest-environment-enzyme": "^7.1.2",
-        "jest-enzyme": "^7.1.2",
-        "jest-react-hooks-shallow": "^1.4.2",
-        "jest-styled-components": "^7.0.3",
-        "level": "^6.0.1",
-        "lint-staged": "^10.5.3",
-        "minimist": "^1.2.5",
-        "node-fetch": "^2.6.1",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.2.1",
         "prettier-plugin-organize-imports": "^1.1.1",
         "prettier-plugin-pkg": "^0.8.0",
         "prettier-plugin-sh": "^0.6.0",
-        "stylelint": "^13.8.0",
+        "stylelint": "^13.12.0",
         "stylelint-config-prettier": "^8.0.2",
-        "stylelint-config-standard": "^20.0.0",
+        "stylelint-config-standard": "^21.0.0",
         "stylelint-config-styled-components": "^0.1.1",
-        "stylelint-prettier": "^1.1.2",
+        "stylelint-prettier": "^1.2.0",
-        "ts-jest": "^26.4.4",
+        "is-ci": "^3.0.0",
-        "ts-loader": "^8.0.14",
+        "typescript": "^4.2.3"
-        "tsconfig-paths-webpack-plugin": "^3.3.0",
-        "tslint": "^6.1.3",
-        "typescript": "^4.1.3",
-        "webpack": "^4.46.0"
     },
     "lint-staged": {
         "*.{ts,tsx,js,jsx}": [
-            "stylelint --fix",
             "prettier --write"
         ],
         "*.go": [
             "go fmt"
         ],
-        "*.{json,Dockerfile,sh,md,gitignore,env,mdx,yml,html}": [
+        "*.{json,Dockerfile,sh,md,env,mdx,yml,html}": [
             "prettier --write"
         ],
         ".husky/pre-commit": [
             "prettier --write"
         ]
-    }
+    },
+    "private": true,
+    "workspaces": [
+        "packages/*"
+    ]
 }

packages/design-system/.storybook/main.js

@@ -0,0 +1,8 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { NormalModuleReplacementPlugin } = require('webpack');
+
+module.exports = {
+    stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};

packages/design-system/.storybook/manager.js

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

packages/design-system/.storybook/mocks/next_link.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+};
+const Link = (props: Props) => <>{props.children}</>;
+
+export default Link;

packages/design-system/.storybook/preview-head.html

@@ -0,0 +1,39 @@
+<script>
+    (function (d) {
+        var config = {
+                kitId: 'bck0pci',
+                scriptTimeout: 3000,
+                async: true,
+            },
+            h = d.documentElement,
+            t = setTimeout(function () {
+                h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
+            }, config.scriptTimeout),
+            tk = d.createElement('script'),
+            f = false,
+            s = d.getElementsByTagName('script')[0],
+            a;
+        h.className += ' wf-loading';
+        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
+        tk.async = true;
+        tk.onload = tk.onreadystatechange = function () {
+            a = this.readyState;
+            if (f || (a && a != 'complete' && a != 'loaded')) return;
+            f = true;
+            clearTimeout(t);
+            try {
+                Typekit.load(config);
+            } catch (e) {}
+        };
+        s.parentNode.insertBefore(tk, s);
+    })(document);
+</script>
+<style>
+    body {
+        font-family: 'source-han-sans-japanese', 'Source Sans Pro', sans-serif,
+            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
+        color: #f2efef;
+        background-color: #453e3d;
+        margin: 0;
+    }
+</style>

packages/design-system/.storybook/preview.js

@@ -0,0 +1,10 @@
+import { roleypolyTheme } from './theme';
+import { mdxComponents } from '../atoms/typography/mdx';
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+        theme: roleypolyTheme,
+        components: mdxComponents,
+    },
+};

packages/design-system/.storybook/theme.js

@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming';
+import { palette } from '../atoms/colors';
+
+export const roleypolyTheme = create({
+    base: 'dark',
+
+    colorPrimary: palette.green400,
+    colorSecondary: palette.taupe200,
+
+    // UI
+    appBg: palette.taupe300,
+    appContentBg: palette.taupe200,
+    appBorderColor: palette.taupe100,
+    appBorderRadius: 0,
+
+    // Typography
+    fontBase: 'system-ui, sans-serif',
+    fontCode: 'monospace',
+
+    // Text colors
+    textColor: palette.grey600,
+    textInverseColor: palette.grey100,
+
+    // Toolbar default and active colors
+    barTextColor: palette.taupe500,
+    barSelectedColor: palette.taupe600,
+    barBg: palette.taupe100,
+
+    // Form colors
+    inputBg: 'rgba(0,0,0,0.24)',
+    inputBorder: palette.taupe100,
+    inputTextColor: palette.grey600,
+    inputBorderRadius: 0,
+});

packages/design-system/Intro.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { Logotype } from 'roleypoly/design-system/atoms/branding';
+import { Logotype } from '@roleypoly/design-system/atoms/branding';
-import { Space } from 'roleypoly/design-system/atoms/space';
+import { Space } from '@roleypoly/design-system/atoms/space';
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
 
 <Meta title="Roleypoly Design System" />
 

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

@@ -1,4 +1,4 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
 import styled, { css } from 'styled-components';
 import { AvatarProps } from './Avatar';
 

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

@@ -1,5 +1,5 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
 import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
 
 export type LogoProps = {
     fill: string;

packages/design-system/atoms/branding/DynamicBranding.stories.tsx

@@ -1,6 +1,6 @@
+import { Text } from '@roleypoly/design-system/atoms/typography';
 import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
-import { Text } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
 import { palette } from '../colors';
 import { Logomark, Logotype } from './Branding';

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

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

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

@@ -1,6 +1,6 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
-import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
+import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
-import { text300, text400 } from 'roleypoly/design-system/atoms/typography';
+import { text300, text400 } from '@roleypoly/design-system/atoms/typography';
 import styled, { css } from 'styled-components';
 
 export const IconContainer = styled.div`

packages/design-system/atoms/collapse/Collapse.stories.tsx

@@ -1,4 +1,4 @@
-import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
+import { SmallTitle } from '@roleypoly/design-system/atoms/typography';
 import { Collapse } from './Collapse';
 
 export default {

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

@@ -1,6 +1,6 @@
+import { AmbientSmall } from '@roleypoly/design-system/atoms/typography';
 import chroma from 'chroma-js';
 import * as React from 'react';
-import { AmbientSmall } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
 import { palette } from './colors';
 

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

@@ -1,6 +1,6 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
 import { action } from '@storybook/addon-actions';
 import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
 import { FaderOpacity, FaderSlide } from './Fader';
 
 export default {

packages/design-system/atoms/feature-gate/FeatureGate.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FeatureFlagDecorator } from 'roleypoly/common/utils/featureFlags/react/storyDecorator';
+import { FeatureFlagDecorator } from '../../../../src/common/utils/featureFlags/react/storyDecorator';
 import { FeatureGate } from './FeatureGate';
 
 export default {

packages/design-system/atoms/feature-gate/FeatureGate.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
     FeatureFlag,
     FeatureFlagsContext,
-} from 'roleypoly/common/utils/featureFlags/react';
+} from '../../../../src/common/utils/featureFlags/react';
 
 export type FeatureGateProps = {
     featureFlag: FeatureFlag;

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

@@ -1,5 +1,8 @@
+import {
+    MediumTitle,
+    Text as TextBlock,
+} from '@roleypoly/design-system/atoms/typography';
 import * as React from 'react';
-import { MediumTitle, Text as TextBlock } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
 import { UseFontStyled } from './fonts';
 

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

@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 
@@ -7,7 +6,7 @@ export const InjectTypekitFont = () => {
         (window as any).Typekit.load();
     }, []);
     return (
-        <Head>
+        <>
             <link
                 key="typekit-css-preload"
                 rel="preload"
@@ -15,7 +14,7 @@ export const InjectTypekitFont = () => {
                 as="script"
             />
             <script key="typekit-js" src="https://use.typekit.net/bck0pci.js" />
-        </Head>
+        </>
     );
 };
 

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

@@ -1,4 +1,4 @@
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
 import styled, { css } from 'styled-components';
 
 export const HalfsiesContainer = styled.div`

packages/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts

@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
 
 export const Item = styled.div<{ selected: boolean }>`

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

@@ -1,5 +1,5 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
 import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
 import { Popover as PopoverComponent } from './Popover';
 
 export default {

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

@@ -1,6 +1,6 @@
-import { onSmallScreen, onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import { onSmallScreen, onTablet } from '@roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
 
 type PopoverStyledProps = {

packages/design-system/atoms/popover/Popover.tsx

@@ -1,6 +1,6 @@
+import { globalOnKeyUp } from '@roleypoly/design-system/atoms/key-events';
 import * as React from 'react';
 import { IoMdClose } from 'react-icons/io';
-import { globalOnKeyUp } from 'roleypoly/design-system/atoms/key-events';
 import {
     DefocusHandler,
     PopoverBase,

packages/design-system/atoms/role/Role.spec.tsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { roleCategory } from 'roleypoly/common/types/storyData';
+import { roleCategory } from '../../fixtures/storyData';
 import { Role } from './Role';
 
 it('fires an OnClick handler when clicked', () => {

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

@@ -1,7 +1,7 @@
+import { withColors } from '@roleypoly/design-system/atoms/colors/withColors';
 import * as React from 'react';
-import { roleCategory } from 'roleypoly/common/types/storyData';
-import { withColors } from 'roleypoly/design-system/atoms/colors/withColors';
 import styled from 'styled-components';
+import { roleCategory } from '../../fixtures/storyData';
 import { Role as RoleComponent } from './Role';
 
 export default {

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

@@ -1,5 +1,5 @@
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
 
 export type StyledProps = {

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

@@ -1,9 +1,12 @@
+import { numberToChroma } from '@roleypoly/design-system/atoms/colors';
 import chroma from 'chroma-js';
 import * as React from 'react';
 import { FaCheck, FaTimes } from 'react-icons/fa';
-import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
+import { Role as RPCRole, RoleSafety } from '../../../../src/common/types';
-import { evaluatePermission, permissions } from 'roleypoly/common/utils/hasPermission';
+import {
-import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
+    evaluatePermission,
+    permissions,
+} from '../../../../src/common/utils/hasPermission';
 import * as styled from './Role.styled';
 
 type Props = {

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

@@ -1,6 +1,6 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { Hero } from '@roleypoly/design-system/atoms/hero';
 import * as React from 'react';
-import { Button } from 'roleypoly/design-system/atoms/button';
-import { Hero } from 'roleypoly/design-system/atoms/hero';
 import { SparkleOverlay } from './Sparkle';
 
 export default {

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

@@ -1,5 +1,5 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
 import * as React from 'react';
-import { palette } from 'roleypoly/design-system/atoms/colors';
 import styled from 'styled-components';
 import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
 

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

@@ -1,6 +1,6 @@
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
-import { palette } from 'roleypoly/design-system/atoms/colors';
+import { palette } from '@roleypoly/design-system/atoms/colors';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
 
 export const TabViewStyled = styled.div``;

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

@@ -1,6 +1,6 @@
+import { SmallTitle } from '@roleypoly/design-system/atoms/typography';
 import * as React from 'react';
 import { FiKey } from 'react-icons/fi';
-import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
 import { TextInput, TextInputWithIcon } from './TextInput';
 
 export default {

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

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