Feat/editor category pass2 (#290)

* feat(design-system): add editor skeletons

* use css media queries rather than JS media queries

* init remake

* feat: add basis of toggle atom

* finish toggle

* use pointer cursor with toggle

* sync

* feat: add server message in editor

* cleanup storybook

* add short editor item and data model for categories

* chore: fix build by moving jest version downward

* chore: remove old category editor

* chore: fix EditorCategoryShort index

* add editor wiring and styling updates

* fix linting issues

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} />;

packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts

@@ -0,0 +1,8 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
+
+export const CategoryContainer = styled.div`
+  background-color: ${palette.taupe100};
+  padding: 10px;
+  margin: 15px 0;
+`;

packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx

@@ -0,0 +1,39 @@
+import { TabDepth } from '@roleypoly/design-system/atoms/tab-view/TabView.styled';
+import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
+import { EditorCategoryShort } from '@roleypoly/design-system/molecules/editor-category-short/EditorCategoryShort';
+import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
+import { Category } from '@roleypoly/types';
+import { sortBy } from 'lodash';
+import * as React from 'react';
+import { CategoryContainer } from './EditorCategoriesTab.styled';
+
+export const EditorCategoriesTab = (props: EditorShellProps) => {
+  const [openStates, setOpenStates] = React.useState<Category['id'][]>([]);
+
+  const onCategoryOpen = (id: Category['id']) => () => {
+    setOpenStates([...new Set(openStates).add(id)]);
+  };
+
+  return (
+    <TabDepth>
+      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) =>
+        openStates.includes(category.id) ? (
+          <CategoryContainer key={idx}>
+            <EditorCategory
+              category={category}
+              uncategorizedRoles={[]}
+              guildRoles={props.guild.roles}
+              onChange={(category) => props.onCategoryChange?.(category)}
+            />
+          </CategoryContainer>
+        ) : (
+          <EditorCategoryShort
+            key={idx}
+            category={category}
+            onOpen={onCategoryOpen(category.id)}
+          />
+        )
+      )}
+    </TabDepth>
+  );
+};

packages/design-system/organisms/editor-categories-tab/index.ts

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