feat: add access control

packages/design-system/molecules/editor-utility-shell/EditorUtilityShell.stories.tsx

@@ -0,0 +1,23 @@
+import { mastheadSlugs } from '@roleypoly/design-system/fixtures/storyData';
+import { GoGear } from 'react-icons/go';
+import { EditorUtilityShell } from './EditorUtilityShell';
+
+export default {
+  title: 'Molecules/Editor Utility Shell',
+  component: EditorUtilityShell,
+  args: {
+    title: 'Utility Title',
+    guild: mastheadSlugs[0],
+    icon: <GoGear />,
+  },
+};
+
+export const editorUtilityShell = (args) => (
+  <EditorUtilityShell {...args}>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, odit inventore?
+      Recusandae dolor minima quos, laboriosam alias iusto officiis culpa! Autem, odit ut.
+      Fugit quaerat esse explicabo quibusdam, ipsum maiores?
+    </p>
+  </EditorUtilityShell>
+);

packages/design-system/molecules/editor-utility-shell/EditorUtilityShell.styled.ts

@@ -0,0 +1,60 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { text900 } from '@roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
+
+export const Shell = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const HeadBox = styled.div`
+  ${text900}
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  svg {
+    margin-right: 0.5em;
+    position: relative;
+    top: 0.125em;
+  }
+
+  ${onSmallScreen(
+    css`
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    `
+  )}
+`;
+
+export const Content = styled.div`
+  width: 960px;
+  max-width: 90vw;
+  margin: 0 auto;
+  padding: 1.6em 0;
+`;
+
+export const Title = styled.div`
+  ${onSmallScreen(
+    css`
+      order: 2;
+      flex: 1 1 100%;
+    `
+  )}
+`;
+
+export const GoBack = styled.div`
+  display: flex;
+  button {
+    margin-right: 0.5em;
+  }
+
+  ${onSmallScreen(
+    css`
+      order: 1;
+      flex: 1 1 100%;
+    `
+  )}
+`;

packages/design-system/molecules/editor-utility-shell/EditorUtilityShell.tsx

@@ -0,0 +1,64 @@
+import { Avatar, utils as avatarUtils } from '@roleypoly/design-system/atoms/avatar';
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import {
+  Content,
+  GoBack,
+  HeadBox,
+  Shell,
+  Title,
+} from '@roleypoly/design-system/molecules/editor-utility-shell/EditorUtilityShell.styled';
+import { GuildSlug } from '@roleypoly/types';
+import { GoCheck, GoReply } from 'react-icons/go';
+
+export type EditorUtilityProps = {
+  guildSlug: GuildSlug;
+  onSubmit: <T>(output: T) => void;
+  onExit: () => void;
+};
+
+export const EditorUtilityShell = (
+  props: EditorUtilityProps & {
+    children: React.ReactNode;
+    icon: React.ReactNode;
+    title: string;
+    hasChanges: boolean;
+  }
+) => (
+  <Shell>
+    <HeadBox>
+      <Title>
+        {props.icon}
+        {props.title}
+      </Title>
+      <GoBack>
+        {props.hasChanges ? (
+          <Button
+            size="small"
+            color="primary"
+            icon={<GoCheck />}
+            onClick={() => {
+              props.onSubmit(undefined);
+            }}
+          >
+            Save Changes & Exit
+          </Button>
+        ) : (
+          <Button size="small" color="silent" icon={<GoReply />} onClick={props.onExit}>
+            <BreakpointText
+              large={`Go back to ${props.guildSlug.name}`}
+              small="Go Back"
+            />
+          </Button>
+        )}
+        <Avatar
+          hash={props.guildSlug.icon}
+          src={avatarUtils.avatarHash(props.guildSlug.id, props.guildSlug.icon, 'icons')}
+        >
+          {avatarUtils.initialsFromName(props.guildSlug.name)}
+        </Avatar>
+      </GoBack>
+    </HeadBox>
+    <Content>{props.children}</Content>
+  </Shell>
+);

packages/design-system/molecules/editor-utility-shell/index.ts

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