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/templates/auth-login/AuthLogin.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { guild } from '../../fixtures/storyData';
+import { AuthLogin } from './AuthLogin';
+
+export default {
+    title: 'Templates/Auth: Login',
+    args: {
+        botName: 'roleypoly#3266',
+    },
+};
+
+export const NoSlug = (args) => <AuthLogin {...args} />;
+
+export const WithSlug = (args) => <AuthLogin {...args} />;
+WithSlug.args = {
+    guildSlug: guild,
+};

packages/design-system/templates/auth-login/AuthLogin.tsx

@@ -0,0 +1,14 @@
+import { Hero } from '@roleypoly/design-system/atoms/hero';
+import { AppShell } from '@roleypoly/design-system/organisms/app-shell';
+import { Preauth, PreauthProps } from '@roleypoly/design-system/organisms/preauth';
+import * as React from 'react';
+
+export type AuthLoginProps = PreauthProps;
+
+export const AuthLogin = (props: AuthLoginProps) => (
+    <AppShell showFooter user={undefined}>
+        <Hero topSpacing={100} bottomSpacing={175}>
+            <Preauth {...props} />
+        </Hero>
+    </AppShell>
+);

packages/design-system/templates/auth-login/index.ts

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

packages/design-system/templates/errors/Errors.stories.tsx

@@ -0,0 +1,10 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { Error } from './Errors';
+import { errorMessages } from './errorStrings';
+
+const messages = storiesOf('Templates/Errors', module);
+
+for (let message in errorMessages) {
+    messages.add(`${message}`, () => <Error code={message} />);
+}

packages/design-system/templates/errors/Errors.tsx

@@ -0,0 +1,29 @@
+import { DotOverlay } from '@roleypoly/design-system/atoms/dot-overlay';
+import { Hero } from '@roleypoly/design-system/atoms/hero';
+import {
+    ErrorBanner,
+    ErrorMessage,
+} from '@roleypoly/design-system/molecules/error-banner';
+import { AppShell } from '@roleypoly/design-system/organisms/app-shell';
+import { DiscordUser } from '@roleypoly/types';
+import * as React from 'react';
+import { getMessageFromCode } from './errorStrings';
+
+export type ErrorProps = {
+    code: string | number;
+    messageOverride?: ErrorMessage;
+    user?: DiscordUser | null;
+};
+
+export const Error = (props: ErrorProps) => {
+    const messageFromCode = getMessageFromCode(props.code);
+
+    return (
+        <AppShell user={props.user || undefined}>
+            <DotOverlay />
+            <Hero topSpacing={100} bottomSpacing={25}>
+                <ErrorBanner message={messageFromCode} />
+            </Hero>
+        </AppShell>
+    );
+};

packages/design-system/templates/errors/errorStrings.ts

@@ -0,0 +1,62 @@
+import { ErrorMessage } from '@roleypoly/design-system/molecules/error-banner';
+
+const defaultMessage: Required<ErrorMessage> = {
+    english: `Something went bad. How could this happen?`,
+    japanese: `わかりません...`,
+    friendlyCode: 'Oops.',
+};
+
+export const errorMessages: { [code: string]: ErrorMessage } = {
+    default: defaultMessage,
+    '400': {
+        english: 'Your client sent me something weird...',
+        japanese: '((((；゜Д゜)))',
+    },
+    '403': {
+        english: `You weren't allowed to access this.`,
+        japanese: 'あなたはこの点に合格しないかもしれません',
+    },
+    '404': {
+        english: `This page is in another castle.`,
+        japanese: 'お探しのページは見つかりませんでした',
+    },
+    '419': {
+        english: 'Something went too slowly...',
+        japanese: 'おやすみなさい〜',
+    },
+    '500': {
+        english: `The server doesn't like you right now. Feed it a cookie.`,
+        japanese: 'クッキーを送ってください〜  クッキーを送ってください〜',
+    },
+    serverFailure: {
+        english: `Server is super unhappy with you today...`,
+        japanese: 'クッキーを送ってください〜',
+        friendlyCode: `Oh no!`,
+    },
+    magicExpired: {
+        english: 'That magic login link was expired.',
+        friendlyCode: 'Woah.',
+    },
+    authFailure: {
+        english: `I tried to tell the server who you were...`,
+        japanese: `...but it didn't believe me. :( ごめんなさい`,
+        friendlyCode: 'Yo.',
+    },
+};
+
+export const getMessageFromCode = (
+    code: keyof typeof errorMessages
+): Required<ErrorMessage> => {
+    const codeStr = String(code);
+    const baseMessage = errorMessages[codeStr];
+
+    const message: Required<ErrorMessage> = {
+        english: baseMessage?.english || defaultMessage.english,
+        japanese: baseMessage?.japanese || defaultMessage.japanese,
+        friendlyCode: baseMessage
+            ? baseMessage?.friendlyCode || codeStr
+            : defaultMessage.friendlyCode,
+    };
+
+    return message;
+};

packages/design-system/templates/errors/index.ts

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

packages/design-system/templates/help-page/HelpPage.stories.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { WhyNoRoles } from '../../organisms/help-why-no-roles';
+import { HelpPageTemplate } from './HelpPage';
+
+export default {
+    title: 'Templates/Help Page',
+};
+
+export const Base = () => (
+    <HelpPageTemplate user={null}>
+        <h1>What is the world but vibrations?</h1>
+        <p>Vibrations that synchronize and tie it together, running free forever.</p>
+    </HelpPageTemplate>
+);
+
+export const WhyNoRoles_ = () => (
+    <HelpPageTemplate>
+        <WhyNoRoles></WhyNoRoles>
+    </HelpPageTemplate>
+);

packages/design-system/templates/help-page/HelpPage.tsx

@@ -0,0 +1,13 @@
+import { HelpPageBase } from '@roleypoly/design-system/molecules/help-page-base';
+import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import * as React from 'react';
+
+export type HelpPageProps = AppShellProps & {
+    children: React.ReactNode;
+};
+
+export const HelpPageTemplate = (props: HelpPageProps) => (
+    <AppShell guilds={props.guilds} user={props.user || undefined}>
+        <HelpPageBase>{props.children}</HelpPageBase>
+    </AppShell>
+);

packages/design-system/templates/help-page/index.ts

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

packages/design-system/templates/landing/Landing.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { LandingTemplate } from './Landing';
+
+export default {
+    title: 'Templates/Landing',
+};
+
+export const Landing = () => <LandingTemplate />;

packages/design-system/templates/landing/Landing.tsx

@@ -0,0 +1,9 @@
+import { AppShell } from '@roleypoly/design-system/organisms/app-shell';
+import { Landing } from '@roleypoly/design-system/organisms/landing';
+import * as React from 'react';
+
+export const LandingTemplate = (props: any) => (
+    <AppShell showFooter {...props}>
+        <Landing />
+    </AppShell>
+);

packages/design-system/templates/landing/index.ts

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

packages/design-system/templates/role-picker/RolePicker.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {
+    guild,
+    guildData,
+    guildEnum,
+    mastheadSlugs,
+    member,
+    roleCategory,
+    roleCategory2,
+    user,
+} from '../../fixtures/storyData';
+import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';
+
+const props: RolePickerTemplateProps = {
+    guildData: {
+        ...guildData,
+        message:
+            'Hey, this is kind of a demo setup so features/use cases can be shown off.\n\nThanks for using Roleypoly <3',
+    },
+    member: member,
+    guild: guild,
+    guilds: mastheadSlugs,
+    roles: [...roleCategory, ...roleCategory2],
+    editable: false,
+    user: user,
+    guildEnumeration: guildEnum,
+    activeGuildId: guild.id,
+    onSubmit: () => {},
+};
+
+export default {
+    title: 'Templates/Role Picker',
+    components: RolePickerTemplate,
+    args: props,
+};
+
+export const Default = (args) => {
+    return <RolePickerTemplate {...args} />;
+};
+
+export const Editable = (args) => {
+    return <RolePickerTemplate {...args} />;
+};
+Editable.args = {
+    editable: true,
+};

packages/design-system/templates/role-picker/RolePicker.tsx

@@ -0,0 +1,17 @@
+import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import {
+    RolePicker,
+    RolePickerProps,
+} from '@roleypoly/design-system/organisms/role-picker';
+import * as React from 'react';
+
+export type RolePickerTemplateProps = RolePickerProps & Omit<AppShellProps, 'children'>;
+
+export const RolePickerTemplate = (props: RolePickerTemplateProps) => {
+    const { user, guilds, activeGuildId, ...pickerProps } = props;
+    return (
+        <AppShell activeGuildId={activeGuildId} user={user} guilds={guilds} small>
+            <RolePicker {...pickerProps} />
+        </AppShell>
+    );
+};

packages/design-system/templates/role-picker/index.ts

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

packages/design-system/templates/server-setup/ServerSetup.stories.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { mastheadSlugs, user } from '../../fixtures/storyData';
+import { ServerSetupTemplate } from './ServerSetup';
+
+export default {
+    title: 'Templates/Server Setup',
+    component: ServerSetupTemplate,
+    args: {
+        guilds: mastheadSlugs,
+        user: user,
+        guildSlug: mastheadSlugs[1],
+    },
+};
+
+export const serverSetup = (args) => <ServerSetupTemplate {...args} />;

packages/design-system/templates/server-setup/ServerSetup.tsx

@@ -0,0 +1,18 @@
+import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import {
+    ServerSetup,
+    ServerSetupProps,
+} from '@roleypoly/design-system/organisms/server-setup/ServerSetup';
+
+type ServerSetupTemplateProps = Omit<AppShellProps, 'children'> & ServerSetupProps;
+
+export const ServerSetupTemplate = ({
+    guildSlug,
+    ...appShellProps
+}: ServerSetupTemplateProps) => {
+    return (
+        <AppShell {...appShellProps} activeGuildId={guildSlug.id}>
+            <ServerSetup guildSlug={guildSlug} />
+        </AppShell>
+    );
+};

packages/design-system/templates/server-setup/index.ts

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

packages/design-system/templates/servers/Servers.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ServersTemplate } from '.';
+import { mastheadSlugs, user } from '../../fixtures/storyData';
+
+export default {
+    title: 'Templates/Servers Page',
+    args: {
+        guilds: mastheadSlugs,
+        user: user,
+    },
+};
+
+export const serversPage = (args) => <ServersTemplate {...args} />;

packages/design-system/templates/servers/Servers.tsx

@@ -0,0 +1,14 @@
+import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import { ServersListing } from '@roleypoly/design-system/organisms/servers-listing/ServersListing';
+import { GuildSlug } from '@roleypoly/types';
+import * as React from 'react';
+
+type ServerTemplateProps = Omit<AppShellProps, 'children'> & {
+    guilds: GuildSlug[];
+};
+
+export const ServersTemplate = (props: ServerTemplateProps) => (
+    <AppShell {...props} disableGuildPicker>
+        <ServersListing guilds={props.guilds}></ServersListing>
+    </AppShell>
+);

packages/design-system/templates/servers/index.ts

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