feat(design-system): pre-port of roleypoly/ui

src/design-system/templates/errors/Errors.story.tsx

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

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

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

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

@@ -0,0 +1,66 @@
+export type ErrorMessage = {
+    english: string;
+    japanese?: string;
+    friendlyCode?: string;
+};
+
+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;
+};

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

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