From 600aa3e075dc6dcf9f671719cd8297f14338f489 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Wed, 24 Mar 2021 00:02:39 -0400
Subject: [PATCH] feat(design-system): add editor skeletons

---
 .../editor-category/EditorCategory.styled.ts  |  7 +++++
 .../EditorCategoriesTab.stories.tsx           | 12 ++++++++
 .../EditorCategoriesTab.styled.ts}            |  0
 .../EditorCategoriesTab.tsx                   | 18 +++++++++++
 .../organisms/editor-categories-tab/index.ts  |  1 +
 .../EditorShell.stories.tsx                   |  0
 .../organisms/editor-shell/EditorShell.tsx    | 15 ++++++++++
 .../{editor => editor-shell}/index.ts         |  0
 .../organisms/editor/EditorShell.tsx          | 30 -------------------
 9 files changed, 53 insertions(+), 30 deletions(-)
 create mode 100644 packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx
 rename packages/design-system/organisms/{editor/EditorShell.styled.ts => editor-categories-tab/EditorCategoriesTab.styled.ts} (100%)
 create mode 100644 packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx
 create mode 100644 packages/design-system/organisms/editor-categories-tab/index.ts
 rename packages/design-system/organisms/{editor => editor-shell}/EditorShell.stories.tsx (100%)
 create mode 100644 packages/design-system/organisms/editor-shell/EditorShell.tsx
 rename packages/design-system/organisms/{editor => editor-shell}/index.ts (100%)
 delete mode 100644 packages/design-system/organisms/editor/EditorShell.tsx

diff --git a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
index 57bed7d..b3cf806 100644
--- a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
+++ b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
@@ -3,4 +3,11 @@ import styled from 'styled-components';
 export const RoleContainer = styled.div`
   display: flex;
   margin: 10px;
+  flex-wrap: wrap;
+
+  & > div {
+    /* This should be a Role element */
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    margin: 1px;
+  }
 `;
diff --git a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx
new file mode 100644
index 0000000..2c9bfd6
--- /dev/null
+++ b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx
@@ -0,0 +1,12 @@
+import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
+import { EditorCategoriesTab } from './EditorCategoriesTab';
+
+export default {
+  title: 'Organisms/Editor/Categories Tab',
+  component: EditorCategoriesTab,
+  args: {
+    guild: guildEnum.guilds[0],
+  },
+};
+
+export const categoriesTab = (args) => <EditorCategoriesTab {...args} />;
diff --git a/packages/design-system/organisms/editor/EditorShell.styled.ts b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts
similarity index 100%
rename from packages/design-system/organisms/editor/EditorShell.styled.ts
rename to packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts
diff --git a/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx
new file mode 100644
index 0000000..b535ed9
--- /dev/null
+++ b/packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx
@@ -0,0 +1,18 @@
+import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
+import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
+import { CategoryContainer } from './EditorCategoriesTab.styled';
+
+export const EditorCategoriesTab = (props: EditorShellProps) => (
+  <div>
+    {props.guild.data.categories.map((category, idx) => (
+      <CategoryContainer key={idx}>
+        <EditorCategory
+          category={category}
+          uncategorizedRoles={[]}
+          guildRoles={props.guild.roles}
+          onChange={(x) => console.log(x)}
+        />
+      </CategoryContainer>
+    ))}
+  </div>
+);
diff --git a/packages/design-system/organisms/editor-categories-tab/index.ts b/packages/design-system/organisms/editor-categories-tab/index.ts
new file mode 100644
index 0000000..43cb362
--- /dev/null
+++ b/packages/design-system/organisms/editor-categories-tab/index.ts
@@ -0,0 +1 @@
+export * from './EditorCategoriesTab';
diff --git a/packages/design-system/organisms/editor/EditorShell.stories.tsx b/packages/design-system/organisms/editor-shell/EditorShell.stories.tsx
similarity index 100%
rename from packages/design-system/organisms/editor/EditorShell.stories.tsx
rename to packages/design-system/organisms/editor-shell/EditorShell.stories.tsx
diff --git a/packages/design-system/organisms/editor-shell/EditorShell.tsx b/packages/design-system/organisms/editor-shell/EditorShell.tsx
new file mode 100644
index 0000000..be1326d
--- /dev/null
+++ b/packages/design-system/organisms/editor-shell/EditorShell.tsx
@@ -0,0 +1,15 @@
+import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
+import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
+import { PresentableGuild } from '@roleypoly/types';
+
+export type EditorShellProps = {
+  guild: PresentableGuild;
+};
+
+export const EditorShell = (props: EditorShellProps) => (
+  <TabView initialTab={0}>
+    <Tab title="Guild Details">{() => <div>hi2!</div>}</Tab>
+    <Tab title="Categories & Roles">{() => <EditorCategoriesTab {...props} />}</Tab>
+    <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
+  </TabView>
+);
diff --git a/packages/design-system/organisms/editor/index.ts b/packages/design-system/organisms/editor-shell/index.ts
similarity index 100%
rename from packages/design-system/organisms/editor/index.ts
rename to packages/design-system/organisms/editor-shell/index.ts
diff --git a/packages/design-system/organisms/editor/EditorShell.tsx b/packages/design-system/organisms/editor/EditorShell.tsx
deleted file mode 100644
index 772281b..0000000
--- a/packages/design-system/organisms/editor/EditorShell.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
-import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
-import { PresentableGuild } from '@roleypoly/types';
-import { CategoryContainer } from './EditorShell.styled';
-
-type Props = {
-  guild: PresentableGuild;
-};
-
-export const EditorShell = (props: Props) => (
-  <TabView initialTab={0}>
-    <Tab title="Roles">{() => <RolesTab {...props} />}</Tab>
-    <Tab title="Server Details">{() => <div>hi2!</div>}</Tab>
-  </TabView>
-);
-
-const RolesTab = (props: Props) => (
-  <div>
-    {props.guild.data.categories.map((category, idx) => (
-      <CategoryContainer key={idx}>
-        <EditorCategory
-          category={category}
-          uncategorizedRoles={[]}
-          guildRoles={props.guild.roles}
-          onChange={(x) => console.log(x)}
-        />
-      </CategoryContainer>
-    ))}
-  </div>
-);