chore: restructure project into yarn workspaces, remove next

packages/design-system/molecules/error-banner/ErrorBanner.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ErrorBanner } from './ErrorBanner';
+
+export default {
+    title: 'Molecules/Error Banner',
+    argTypes: {
+        english: { control: 'text' },
+        japanese: { control: 'text' },
+        friendlyCode: { control: 'text' },
+    },
+    args: {
+        english: 'Oh no! I lost it!',
+        japanese: 'ちょっとにんげんだよ',
+        friendlyCode: '404',
+    },
+};
+
+export const ErrorBanner_ = ({ english, japanese, friendlyCode }) => (
+    <ErrorBanner
+        message={{
+            english,
+            japanese,
+            friendlyCode,
+        }}
+    />
+);

packages/design-system/molecules/error-banner/ErrorBanner.styled.ts

@@ -0,0 +1,41 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { text300, text500, text700 } from '@roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
+
+export const ErrorWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    ${onSmallScreen(css`
+        display: block;
+        text-align: center;
+    `)}
+`;
+
+export const ErrorDivider = styled.div`
+    width: 1px;
+    height: 3em;
+    background: ${palette.grey600};
+    margin: 0 1em;
+    ${onSmallScreen(css`
+        display: none;
+    `)}
+`;
+
+export const ErrorSideCode = styled.div`
+    ${text700}
+    ${onSmallScreen(css`
+        margin-bottom: 0.4em;
+    `)}
+`;
+
+export const ErrorText = styled.div`
+    ${text500}
+`;
+
+export const ErrorTextLower = styled.div`
+    ${text300}
+
+    color: ${palette.taupe500};
+`;

packages/design-system/molecules/error-banner/ErrorBanner.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {
+    ErrorDivider,
+    ErrorSideCode,
+    ErrorText,
+    ErrorTextLower,
+    ErrorWrapper,
+} from './ErrorBanner.styled';
+
+export type ErrorMessage = {
+    english: string;
+    japanese?: string;
+    friendlyCode?: string;
+};
+
+type ErrorBannerProps = {
+    message: Required<ErrorMessage>;
+};
+
+export const ErrorBanner = (props: ErrorBannerProps) => (
+    <ErrorWrapper>
+        <ErrorSideCode>{props.message.friendlyCode}</ErrorSideCode>
+        <ErrorDivider />
+        <div>
+            <ErrorText>{props.message.english}</ErrorText>
+            <ErrorTextLower>{props.message.japanese}</ErrorTextLower>
+        </div>
+    </ErrorWrapper>
+);

packages/design-system/molecules/error-banner/index.ts

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