add actions, reordering base interactions

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

@@ -1,12 +1,20 @@
 import { BreakpointsProvider } from '@roleypoly/design-system/atoms/breakpoints';
 import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
 import * as React from 'react';
+import ReactTooltip from 'react-tooltip';
 import { EditorShell } from './EditorShell';
 
 export default {
   title: 'Organisms/Editor',
   component: EditorShell,
-  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+  decorators: [
+    (story) => (
+      <BreakpointsProvider>
+        {story()}
+        <ReactTooltip />
+      </BreakpointsProvider>
+    ),
+  ],
 };
 
 export const Shell = () => <EditorShell guild={guildEnum.guilds[0]} />;

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

@@ -1,21 +1,12 @@
-import { palette } from '@roleypoly/design-system/atoms/colors';
-import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
 import { Space } from '@roleypoly/design-system/atoms/space';
-import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
-import { AmbientLarge, LargeText } from '@roleypoly/design-system/atoms/typography';
-import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
+import { EditableServerMessage } from '@roleypoly/design-system/molecules/editable-server-message';
 import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
 import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
-import {
-  CategoryContainer,
-  Container,
-  MessageBox,
-} from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
-import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
+import { Container } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { ServerCategoryEditor } from '@roleypoly/design-system/organisms/server-category-editor';
+import { Category, PresentableGuild } from '@roleypoly/types';
 import deepEqual from 'deep-equal';
-import { sortBy } from 'lodash';
 import React from 'react';
-import { GoEyeClosed } from 'react-icons/go';
 
 export type EditorShellProps = {
   guild: PresentableGuild;
@@ -26,6 +17,7 @@ export type EditorShellProps = {
 
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
+  const [reorderMode, setReorderMode] = React.useState<boolean>(false);
 
   React.useEffect(() => {
     setGuild(props.guild);
@@ -35,12 +27,8 @@ export const EditorShell = (props: EditorShellProps) => {
     setGuild(props.guild);
   };
 
-  const onCategoryChange = (category: Category) => {
+  const replaceCategories = (categories: Category[]) => {
     setGuild((currentGuild) => {
-      const categories = [
-        ...currentGuild.data.categories.filter((x) => x.id !== category.id),
-        category,
-      ];
       return { ...currentGuild, data: { ...currentGuild.data, categories } };
     });
   };
@@ -51,6 +39,10 @@ export const EditorShell = (props: EditorShellProps) => {
     });
   };
 
+  const doSubmit = () => {
+    props.onGuildChange?.(guild);
+  };
+
   const hasChanges = React.useMemo(
     () => !deepEqual(guild.data, props.guild.data),
     [guild.data, props.guild.data]
@@ -62,52 +54,18 @@ export const EditorShell = (props: EditorShellProps) => {
         showReset={hasChanges}
         guild={props.guild.guild}
         onReset={reset}
-        onSubmit={() => props.onGuildChange?.(guild)}
+        onSubmit={doSubmit}
       />
       <Container style={{ marginTop: 95 }}>
         <ServerMasthead guild={props.guild.guild} editable={false} />
         <Space />
-
-        <MessageBox>
-          <LargeText>Server Message</LargeText>
-          <MultilineTextInput
-            rows={2}
-            value={guild.data.message}
-            onChange={(event) => onMessageChange(event.target.value)}
-            placeholder={`Hey friend from ${guild.guild.name}! Pick your roles!`}
-          >
-            {guild.data.message}
-          </MultilineTextInput>
-          <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
-            Shows a message to your server members.
-            <FaderOpacity isVisible={guild.data.message.trim().length === 0}>
-              &nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
-              <GoEyeClosed style={{ position: 'relative', top: 2 }} />
-            </FaderOpacity>
-          </AmbientLarge>
-        </MessageBox>
+        <EditableServerMessage
+          onChange={onMessageChange}
+          value={guild.data.message}
+          guild={guild.guild}
+        />
         <Space />
-
-        <div>
-          {sortBy(props.guild.data.categories, 'position').map((category, idx) => (
-            <CategoryContainer key={idx}>
-              <PickerCategory
-                key={idx}
-                category={category}
-                title={category.name}
-                selectedRoles={[]}
-                roles={
-                  category.roles
-                    .map((role) => props.guild.roles.find((r) => r.id === role))
-                    .filter((r) => r !== undefined) as Role[]
-                }
-                onChange={() => () => {}}
-                wikiMode={false}
-                type={category.type === CategoryType.Single ? 'single' : 'multi'}
-              />
-            </CategoryContainer>
-          ))}
-        </div>
+        <ServerCategoryEditor guild={guild} onChange={replaceCategories} />
       </Container>
     </>
   );