Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161)

* chore: restructure project into yarn workspaces, remove next

* fix tests, remove webapp from terraform

* remove more ui deployment bits

* remove pages, fix FUNDING.yml

* remove isomorphism

* remove next providers

* fix linting issues

* feat: start basis of new web ui system on CRA

* chore: move types to @roleypoly/types package

* chore: move src/common/utils to @roleypoly/misc-utils

* chore: remove roleypoly/ path remappers

* chore: renmove vercel config

* chore: re-add worker-types to api package

* chore: fix type linting scope for api

* fix(web): craco should include all of packages dir

* fix(ci): change api webpack path for wrangler

* chore: remove GAR actions from CI

* chore: update codeql job

* chore: test better github dar matcher in lint-staged

packages/design-system/atoms/tab-view/TabView.spec.tsx

@@ -0,0 +1,39 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { Tab, TabView, TabViewProps } from './TabView';
+import { TabContent, TabTitle } from './TabView.styled';
+
+const makeView = (props: Partial<TabViewProps> = {}) =>
+    shallow(
+        <TabView {...props}>
+            <Tab title="Tab 1">{() => <div>tab 1</div>}</Tab>
+            <Tab title="Tab 2">{() => <div>tab 2</div>}</Tab>,
+        </TabView>
+    );
+
+it('renders tab content correctly', () => {
+    const view = makeView();
+
+    expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
+});
+
+it('automatically picks preselected tab content', () => {
+    const view = makeView({ initialTab: 1 });
+
+    expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
+});
+
+it('automatically uses the first tab when preselected tab is not present', () => {
+    const view = makeView({ initialTab: -1 });
+
+    view.find(TabContent).find('i').simulate('load');
+    expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
+});
+
+it('changes between tabs when tab is clicked', () => {
+    const view = makeView();
+
+    view.find(TabTitle).at(1).simulate('click');
+
+    expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
+});

packages/design-system/atoms/tab-view/TabView.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Tab, TabView } 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)].map((_, i) => (
+        <Tab title={`tab ${i}`}>
+            {() => (
+                <>
+                    <h1>tab {i}</h1>
+                    <p>hello!!!!!</p>
+                </>
+            )}
+        </Tab>
+    ));
+
+    return <TabView>{tabs}</TabView>;
+};

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

@@ -0,0 +1,42 @@
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+
+export const TabViewStyled = styled.div``;
+
+export const TabTitleRow = styled.div`
+    display: flex;
+    border-bottom: 1px solid ${palette.taupe100};
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+`;
+
+export const TabTitle = styled.div<{ selected: boolean }>`
+    flex: 1;
+    text-align: center;
+    padding: 0.7em 1em;
+    border-bottom: 3px solid transparent;
+    transition: border-color ${transitions.in2out}s ease-in-out,
+        color ${transitions.in2out}s ease-in-out;
+    cursor: pointer;
+    color: ${palette.taupe500};
+    ${(props) =>
+        props.selected
+            ? css`
+                  color: unset;
+                  border-bottom-color: ${palette.taupe500};
+              `
+            : css`
+                  &:hover {
+                      border-bottom-color: ${palette.taupe300};
+                      color: unset;
+                  }
+              `};
+    ${onTablet(css`
+        padding: 0.45em 1em;
+    `)}
+`;
+
+export const TabContent = styled.div``;

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { TabContent, TabTitle, TabTitleRow, TabViewStyled } from './TabView.styled';
+
+export type TabViewProps = {
+    children: React.ReactNode[];
+    initialTab?: number;
+};
+
+type TabProps = {
+    title: string;
+    children: () => React.ReactNode;
+};
+
+export const TabView = (props: TabViewProps) => {
+    const tabNames = React.Children.map(props.children, (child) => {
+        if (!React.isValidElement(child)) {
+            return '(Oops)';
+        }
+
+        return child.props.title;
+    }) as string[];
+
+    if (tabNames.length === 0) {
+        return null;
+    }
+
+    const [currentTab, setCurrentTab] = React.useState<number>(props.initialTab ?? 0);
+
+    return (
+        <TabViewStyled>
+            <TabTitleRow>
+                {tabNames.map((tabName, idx) => (
+                    <TabTitle
+                        selected={currentTab === idx}
+                        onClick={() => setCurrentTab(idx)}
+                        key={`tab${tabName}${idx}`}
+                    >
+                        {tabName}
+                    </TabTitle>
+                ))}
+            </TabTitleRow>
+            <TabContent>
+                {props.children[currentTab] || (
+                    <i onLoad={() => setCurrentTab(0)}>
+                        Tabs were misconfigured, resetting to zero.
+                    </i>
+                )}
+            </TabContent>
+        </TabViewStyled>
+    );
+};
+
+export const Tab = (props: TabProps) => <div>{props.children()}</div>;

packages/design-system/atoms/tab-view/index.ts

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