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

packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx

@@ -0,0 +1,20 @@
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { TabDepth } from '@roleypoly/design-system/atoms/tab-view/TabView.styled';
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import { Text } from '@roleypoly/design-system/atoms/typography';
+import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
+import * as React from 'react';
+
+export const EditorDetailsTab = (props: EditorShellProps) => {
+  return (
+    <TabDepth>
+      <Space />
+      <Text>Server Message</Text>
+      <MultilineTextInput
+        value={props.guild.data.message}
+        onChange={(eventData) => props.onMessageChange?.(eventData.target.value)}
+      />
+      <Space />
+    </TabDepth>
+  );
+};

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

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

packages/design-system/organisms/editor-shell/EditorShell.tsx

@@ -0,0 +1,81 @@
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
+import { EditorMasthead } from '@roleypoly/design-system/molecules/editor-masthead';
+import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
+import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
+import { Category, PresentableGuild } from '@roleypoly/types';
+import deepEqual from 'deep-equal';
+import React from 'react';
+
+export type EditorShellProps = {
+  guild: PresentableGuild;
+  onGuildChange?: (guild: PresentableGuild) => void;
+  onCategoryChange?: (category: Category) => void;
+  onMessageChange?: (message: PresentableGuild['data']['message']) => void;
+};
+
+export const EditorShell = (props: EditorShellProps) => {
+  const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
+
+  const reset = () => {
+    setGuild(props.guild);
+  };
+
+  const onCategoryChange = (category: Category) => {
+    setGuild((currentGuild) => {
+      const categories = [
+        ...currentGuild.data.categories.filter((x) => x.id !== category.id),
+        category,
+      ];
+      return { ...currentGuild, data: { ...currentGuild.data, categories } };
+    });
+  };
+
+  const onMessageChange = (message: PresentableGuild['data']['message']) => {
+    setGuild((currentGuild) => {
+      return { ...currentGuild, data: { ...guild.data, message } };
+    });
+  };
+
+  const hasChanges = React.useMemo(
+    () => !deepEqual(guild.data, props.guild.data),
+    [guild.data, props.guild.data]
+  );
+
+  return (
+    <div>
+      <Space />
+      <TabView
+        initialTab={0}
+        masthead={
+          <EditorMasthead
+            guild={guild}
+            onReset={reset}
+            onSubmit={() => props.onGuildChange?.(guild)}
+            showSaveReset={hasChanges}
+          />
+        }
+      >
+        <Tab title="Guild Details">
+          {() => (
+            <EditorDetailsTab
+              {...props}
+              guild={guild}
+              onMessageChange={onMessageChange}
+            />
+          )}
+        </Tab>
+        <Tab title="Categories & Roles">
+          {() => (
+            <EditorCategoriesTab
+              {...props}
+              guild={guild}
+              onCategoryChange={onCategoryChange}
+            />
+          )}
+        </Tab>
+        <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
+      </TabView>
+    </div>
+  );
+};

packages/design-system/organisms/editor/EditorShell.tsx

@@ -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>
-);