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';

packages/design-system/templates/editor-utility/EditorUtility.stories.tsx

@@ -1,8 +0,0 @@
-import { EditorUtility } from './EditorUtility';
-
-export default {
-  title: 'Templates/Editor Utility',
-  component: EditorUtility,
-};
-
-export const editorUtility = (args) => <EditorUtility {...args} />;

packages/design-system/templates/editor-utility/EditorUtility.styled.ts

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

packages/design-system/templates/editor-utility/EditorUtility.tsx

@@ -1,5 +0,0 @@
-import { EditorUtilityStyled } from './EditorUtility.styled';
-
-export const EditorUtility = () => (
-  <EditorUtilityStyled>EditorUtility</EditorUtilityStyled>
-);

packages/design-system/templates/editor-utility/index.ts

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

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

@@ -42,6 +42,11 @@ export const errorMessages: { [code: string]: ErrorMessage } = {
     japanese: `...but it didn't believe me. :( ごめんなさい`,
     friendlyCode: 'Yo.',
   },
+  accessControlViolation: {
+    english: `You're not allowed to pick roles on that server.`,
+    japanese: `このサーバーでは許可されていない権限です`,
+    friendlyCode: 'Hold up!',
+  },
 };
 
 export const getMessageFromCode = (