Feat/editor as preview (#294)

* try editor as preview

* add databinding for editor actions and message

* add actions, reordering base interactions

* add drag and drop ordering for categoriers

* category skeleton

* fix linting issues

* add role list and add button, non-functional

* bump packages

* add role search prototype

* yarn.lock sync

* fix lint

* remove cfw-emulator bin

packages/design-system/organisms/app-shell/AppShell.styled.tsx

@@ -2,9 +2,9 @@ import { palette } from '@roleypoly/design-system/atoms/colors';
 import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
 import styled, { createGlobalStyle } from 'styled-components';
 
-export const Content = styled.div<{ small?: boolean }>`
+export const Content = styled.div<{ small?: boolean; double?: boolean }>`
   margin: 0 auto;
-  margin-top: 50px;
+  margin-top: ${(props) => (props.double ? '100px' : '50px')};
   width: ${(props) => (props.small ? '960px' : '1024px')};
   max-width: 98vw;
   max-height: calc(100vh - 50px);

packages/design-system/organisms/app-shell/AppShell.tsx

@@ -11,6 +11,7 @@ export type AppShellProps = {
   user?: DiscordUser;
   showFooter?: boolean;
   small?: boolean;
+  double?: boolean;
   activeGuildId?: string | null;
   guilds?: GuildSlug[];
   recentGuilds?: string[];
@@ -56,7 +57,9 @@ export const AppShell = (props: AppShellProps) => (
     )}
     <OptionallyScroll shouldScroll={!props.skeleton}>
       <>
-        <Content small={props.small}>{props.children}</Content>
+        <Content small={props.small} double={props.double}>
+          {props.children}
+        </Content>
         {props.showFooter && <Footer />}
       </>
     </OptionallyScroll>

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

@@ -1,12 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,20 +0,0 @@
-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

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

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,8 +1,9 @@
 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 { 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 { 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 React from 'react';
@@ -17,16 +18,16 @@ export type EditorShellProps = {
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
 
+  React.useEffect(() => {
+    setGuild(props.guild);
+  }, [props.guild]);
+
   const reset = () => {
     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 } };
     });
   };
@@ -37,45 +38,34 @@ 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]
   );
 
   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>
+    <>
+      <SecondaryEditing
+        showReset={hasChanges}
+        guild={props.guild.guild}
+        onReset={reset}
+        onSubmit={doSubmit}
+      />
+      <Container style={{ marginTop: 95 }}>
+        <ServerMasthead guild={props.guild.guild} editable={false} />
+        <Space />
+        <EditableServerMessage
+          onChange={onMessageChange}
+          value={guild.data.message}
+          guild={guild.guild}
+        />
+        <Space />
+        <ServerCategoryEditor guild={guild} onChange={replaceCategories} />
+      </Container>
+    </>
   );
 };

packages/design-system/organisms/masthead/Masthead.stories.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
 import { Authed } from './Authed';
 import { Guest } from './Guest';
+import { SecondaryEditing } from './Secondary';
 import { Skeleton } from './Skeleton';
 
 export default {
@@ -12,6 +13,18 @@ export const hasGuilds = () => (
   <Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} recentGuilds={[]} />
 );
 
+export const withSecondary = () => (
+  <>
+    <Authed
+      guilds={mastheadSlugs}
+      activeGuildId={mastheadSlugs[0].id}
+      user={user}
+      recentGuilds={[]}
+    />
+    <SecondaryEditing guild={mastheadSlugs[0]} showReset />
+  </>
+);
+
 export const noGuilds = () => (
   <Authed guilds={[]} activeGuildId={null} user={user} recentGuilds={[]} />
 );

packages/design-system/organisms/masthead/Masthead.styled.tsx

@@ -91,3 +91,29 @@ export const GuildPopoverHead = styled.div`
     `)}
   }
 `;
+
+export const SecondaryBase = styled(MastheadBase)`
+  top: 50px;
+  background-color: ${palette.taupe300};
+  z-index: 99;
+  padding: 0 15px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
+`;
+
+export const IconHolder = styled.div`
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  border: 2px solid ${palette.taupe200};
+  background-color: ${palette.taupe100};
+  margin-right: 1em;
+`;
+
+export const TextHolder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

packages/design-system/organisms/masthead/Secondary.tsx

@@ -0,0 +1,46 @@
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { GuildSlug } from '@roleypoly/types';
+import { GoCheck, GoPencil } from 'react-icons/go';
+import {
+  IconHolder,
+  MastheadAlignment,
+  MastheadLeft,
+  MastheadRight,
+  SecondaryBase,
+  TextHolder,
+} from './Masthead.styled';
+
+type SecondaryEditingProps = {
+  guild: GuildSlug;
+  showReset: boolean;
+  onReset?: () => void;
+  onSubmit?: () => void;
+};
+
+export const SecondaryEditing = (props: SecondaryEditingProps) => (
+  <SecondaryBase>
+    <MastheadAlignment>
+      <MastheadLeft>
+        <TextHolder>
+          <IconHolder>
+            <GoPencil />
+          </IconHolder>
+          <BreakpointText small="Editing..." large={`Editing ${props.guild.name}...`} />
+        </TextHolder>
+      </MastheadLeft>
+      <MastheadRight>
+        <FaderOpacity isVisible={props.showReset}>
+          <Button size="small" color="silent" onClick={props.onReset}>
+            Reset
+          </Button>
+        </FaderOpacity>
+        &nbsp;&nbsp;
+        <Button size="small" onClick={props.onSubmit}>
+          Done <GoCheck />
+        </Button>
+      </MastheadRight>
+    </MastheadAlignment>
+  </SecondaryBase>
+);

packages/design-system/organisms/masthead/index.ts

@@ -1,3 +1,4 @@
 export * from './Authed';
 export * from './Guest';
+export * from './Secondary';
 export * from './Skeleton';

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts

@@ -0,0 +1,49 @@
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import styled, { css } from 'styled-components';
+
+export const CategoryActions = styled.div<{ right?: boolean }>`
+  display: flex;
+  flex-direction: row;
+
+  & > button {
+    ${(props) =>
+      props.right
+        ? css`
+            margin-left: 5px;
+          `
+        : css`
+            margin-right: 5px;
+          `};
+  }
+
+  ${(props) =>
+    props.right &&
+    css`
+      justify-content: flex-end;
+    `}
+`;
+
+export const ReorderButton = styled.div`
+  height: 40px;
+  width: 40px;
+  font-size: 20px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+`;
+
+export const ReorderCategoryContainer = styled(CategoryContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  user-select: none;
+`;

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx

@@ -0,0 +1,203 @@
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { LargeText } from '@roleypoly/design-system/atoms/typography';
+import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
+import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
+import KSUID from 'ksuid';
+import { flatten, sortBy } from 'lodash';
+import React from 'react';
+import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
+import { CgReorder } from 'react-icons/cg';
+import { GoArrowDown, GoArrowUp, GoCheck, GoGrabber, GoPlus } from 'react-icons/go';
+import {
+  CategoryActions,
+  ReorderButton,
+  ReorderCategoryContainer,
+} from './ServerCategoryEditor.styled';
+
+type Props = {
+  guild: PresentableGuild;
+  onChange: (categories: PresentableGuild['data']['categories']) => void;
+};
+
+const resetOrder = (categories: Category[]) =>
+  sortBy(categories, ['position', 'id']).map((c, index) => ({ ...c, position: index }));
+
+const forceOrder = (categories: Category[]) =>
+  categories.map((c, index) => ({ ...c, position: index }));
+
+export const ServerCategoryEditor = (props: Props) => {
+  const [reorderMode, setReorderMode] = React.useState(false);
+
+  const unselectedRoles = React.useMemo(() => {
+    const selectedRoles = flatten(props.guild.data.categories.map((c) => c.roles));
+    return props.guild.roles.filter((r) => !selectedRoles.includes(r.id));
+  }, [props.guild.data.categories, props.guild.roles]);
+
+  const updateSingleCategory = (category: Category) => {
+    const newCategories = props.guild.data.categories.map((c) => {
+      if (c.id === category.id) {
+        return category;
+      }
+      return c;
+    });
+    props.onChange(newCategories);
+  };
+
+  const createCategory = () => {
+    // Reset order now that we're creating a new category
+    const categories = resetOrder(props.guild.data.categories);
+
+    const newCategory: Category = {
+      id: KSUID.randomSync().string,
+      name: 'New Category',
+      type: CategoryType.Multi,
+      position: categories.length,
+      roles: [],
+      hidden: false,
+    };
+
+    props.onChange([...categories, newCategory]);
+  };
+
+  const onReorder = (categories: Category[] | null) => {
+    setReorderMode(false);
+    if (categories === null) {
+      return;
+    }
+
+    props.onChange(resetOrder(categories));
+  };
+
+  if (reorderMode) {
+    return <ReorderMode {...props} exitReorderMode={onReorder} />;
+  }
+
+  return (
+    <div>
+      <CategoryActions>
+        <Button color="muted" size="small" onClick={() => createCategory()}>
+          Create New <GoPlus />
+        </Button>
+        <Button color="muted" size="small" onClick={() => setReorderMode(true)}>
+          Change Order <CgReorder />
+        </Button>
+      </CategoryActions>
+      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
+        <CategoryContainer key={idx}>
+          <EditorCategory
+            category={category}
+            title={category.name}
+            unselectedRoles={unselectedRoles}
+            roles={
+              category.roles
+                .map((role) => props.guild.roles.find((r) => r.id === role))
+                .filter((r) => r !== undefined) as Role[]
+            }
+            onChange={updateSingleCategory}
+          />
+        </CategoryContainer>
+      ))}
+    </div>
+  );
+};
+
+const ReorderMode = (
+  props: Props & { exitReorderMode: (final: Category[] | null) => void }
+) => {
+  const [categories, setCategories] = React.useState(props.guild.data.categories);
+
+  React.useEffect(() => {
+    setCategories(props.guild.data.categories);
+  }, [props.guild.data.categories]);
+
+  const handleReorder = (category: Category, direction: 'up' | 'down') => () => {
+    const newCategories = [...categories];
+    const index = newCategories.findIndex((c) => c.id === category.id);
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+
+    if (newIndex < 0 || newIndex > newCategories.length - 1) {
+      return;
+    }
+
+    newCategories.splice(index, 1);
+    newCategories.splice(newIndex, 0, category);
+    setCategories(forceOrder(newCategories));
+  };
+
+  const handleDrop = (dropEvent: DropResult) => {
+    const newCategories = [...categories];
+    const { source, destination } = dropEvent;
+
+    if (!destination || source.index === destination.index) {
+      return;
+    }
+
+    newCategories.splice(source.index, 1);
+    newCategories.splice(destination.index, 0, categories[source.index]);
+    setCategories(forceOrder(newCategories));
+  };
+
+  return (
+    <div>
+      <CategoryActions right>
+        <Button color="muted" size="small" onClick={() => props.exitReorderMode(null)}>
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          size="small"
+          onClick={() => props.exitReorderMode(categories)}
+        >
+          <BreakpointText small="Save" large="Save Order" /> <GoCheck />
+        </Button>
+      </CategoryActions>
+      <DragDropContext onDragEnd={handleDrop}>
+        <Droppable droppableId="categories">
+          {(provided, snapshot) => (
+            <div ref={provided.innerRef} {...provided.droppableProps}>
+              {sortBy(categories, ['position', 'id']).map((category, idx) => (
+                <Draggable key={category.id} index={idx} draggableId={category.id}>
+                  {(provided, snapshot) => (
+                    <ReorderCategoryContainer
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                    >
+                      <ReorderButton
+                        data-tip="Drag to reorder"
+                        style={{ cursor: 'grab' }}
+                        {...provided.dragHandleProps}
+                      >
+                        <GoGrabber />
+                      </ReorderButton>
+                      <FaderOpacity isVisible={idx !== 0}>
+                        <ReorderButton
+                          onClick={handleReorder(category, 'up')}
+                          data-tip="Move up"
+                        >
+                          <GoArrowUp />
+                        </ReorderButton>
+                      </FaderOpacity>
+                      <FaderOpacity isVisible={categories.length - 1 !== idx}>
+                        <ReorderButton
+                          onClick={handleReorder(category, 'down')}
+                          data-tip="Move down"
+                        >
+                          <GoArrowDown />
+                        </ReorderButton>
+                      </FaderOpacity>
+                      <LargeText>{category.name}</LargeText>
+                    </ReorderCategoryContainer>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};

packages/design-system/organisms/server-category-editor/index.ts

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