feat: add access control

packages/design-system/templates/editor-access-control/EditorAccessControl.stories.tsx

@@ -0,0 +1,26 @@
+import ReactTooltip from 'react-tooltip';
+import { BreakpointsProvider } from '../../atoms/breakpoints';
+import { guildEnum, mastheadSlugs, roleypolyGuild, user } from '../../fixtures/storyData';
+import { EditorAccessControlTemplate } from './EditorAccessControl';
+
+export default {
+  title: 'Templates/Editor Access Control',
+  component: EditorAccessControlTemplate,
+  decorators: [
+    (story) => (
+      <BreakpointsProvider>
+        {story()}
+        <ReactTooltip />
+      </BreakpointsProvider>
+    ),
+  ],
+  args: {
+    errors: { validationStatus: 0 },
+    guilds: mastheadSlugs,
+    user: user,
+    guild: guildEnum.guilds[1],
+    guildSlug: roleypolyGuild,
+  },
+};
+
+export const editorAccessControl = (args) => <EditorAccessControlTemplate {...args} />;

packages/design-system/templates/editor-access-control/EditorAccessControl.styled.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export const EditorAccessControlStyled = styled.div``;

packages/design-system/templates/editor-access-control/EditorAccessControl.tsx

@@ -0,0 +1,21 @@
+import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import {
+  EditorAccessControl,
+  EditorAccessControlProps,
+} from '@roleypoly/design-system/organisms/editor-access-control';
+
+export const EditorAccessControlTemplate = (
+  props: EditorAccessControlProps & Omit<AppShellProps, 'children'>
+) => {
+  const { guildSlug, guild, onSubmit, onExit, ...appShellProps } = props;
+  return (
+    <AppShell {...appShellProps} activeGuildId={guild.id} small>
+      <EditorAccessControl
+        guildSlug={guildSlug}
+        guild={guild}
+        onSubmit={onSubmit}
+        onExit={onExit}
+      />
+    </AppShell>
+  );
+};

packages/design-system/templates/editor-access-control/index.ts

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