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
2025-06-15 17:19:10 +00:00 · 2021-07-08 16:51:00 -05:00 · 2021-07-08 16:51:00 -05:00 · ab3f718e6d
commit ab3f718e6d
parent 7d681d69d6
43 changed files with 1157 additions and 741 deletions
--- a/packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx
+++ b/packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx
@ -0,0 +1,26 @@
+import * as React from 'react';
+import { mastheadSlugs } from '../../fixtures/storyData';
+import { EditableServerMessage } from './EditableServerMessage';
+export default {
+  title: 'Molecules/Editable Server Message',
+  component: EditableServerMessage,
+  args: {
+    value: 'Hello World',
+    guild: mastheadSlugs[1],
+  },
+};
+
+export const editableServerMessage = (args) => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+
+  return (
+    <EditableServerMessage
+      {...args}
+      value={value}
+      onChange={(message) => setValue(message)}
+    />
+  );
+};
--- a/packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx
+++ b/packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx
@ -0,0 +1,37 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import {
+  AmbientLarge,
+  Text as TextTypo,
+} from '@roleypoly/design-system/atoms/typography';
+import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { GuildSlug } from '@roleypoly/types';
+import { GoEyeClosed } from 'react-icons/go';
+
+type Props = {
+  guild: GuildSlug;
+  onChange: (newMessage: string) => void;
+  value: string;
+};
+
+export const EditableServerMessage = (props: Props) => (
+  <MessageBox>
+    <TextTypo>Server Message</TextTypo>
+    <MultilineTextInput
+      rows={2}
+      value={props.value}
+      onChange={(event) => props.onChange(event.target.value)}
+      placeholder={`Hey friend from ${props.guild.name}! Pick your roles!`}
+    >
+      {props.value}
+    </MultilineTextInput>
+    <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+      Shows a message to your server members.
+      <FaderOpacity isVisible={props.value.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>
+);
--- a/packages/design-system/molecules/editable-server-message/index.ts
+++ b/packages/design-system/molecules/editable-server-message/index.ts
@ -0,0 +1 @@
+export * from './EditableServerMessage';
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx
+++ b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx
@ -1,12 +0,0 @@
-import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
-import { render } from '@testing-library/react';
-import { EditorCategoryShort } from './EditorCategoryShort';
-
-it('triggers onOpen when clicked', async () => {
-  const onOpen = jest.fn();
-  const view = render(<EditorCategoryShort category={mockCategory} onOpen={onOpen} />);
-
-  view.getByRole('menuitem')?.click();
-
-  expect(onOpen).toHaveBeenCalled();
-});
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx
+++ b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx
@ -1,30 +0,0 @@
-import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
-import { EditorCategoryShort } from './EditorCategoryShort';
-
-const decorator = (story) => (
-  <Wrapper>
-    {story()}
-    <ReactTooltip />
-  </Wrapper>
-);
-
-export default {
-  title: 'Molecules/Short Category',
-  component: EditorCategoryShort,
-  args: {
-    category: mockCategory,
-  },
-  decorators: [decorator],
-};
-
-const Wrapper = styled.div`
-  box-shadow: 0 0 10px #000;
-`;
-
-export const shortEditor = (args) => <EditorCategoryShort {...args} />;
-export const shortEditorHidden = (args) => <EditorCategoryShort {...args} />;
-shortEditorHidden.args = {
-  category: { ...mockCategory, hidden: true },
-};
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts
+++ b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts
@ -1,60 +0,0 @@
-import { transitions } from '@roleypoly/design-system/atoms/timings';
-import styled from 'styled-components';
-
-export const GrabberBox = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 1em;
-  flex: 0;
-  cursor: grab;
-  position: relative;
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: -5px;
-    left: -8px;
-    width: 32px;
-    height: 32px;
-    background-color: rgba(0, 0, 0, 0.25);
-    opacity: 0;
-    border-radius: 50%;
-    transition: opacity ${transitions.actionable}s ease-in-out;
-  }
-
-  &:hover {
-    ::before {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Opener = styled.div`
-  opacity: 0;
-  transition: opacity ${transitions.actionable}s ease-in-out;
-`;
-
-export const Container = styled.div`
-  display: flex;
-  padding: 1em;
-  cursor: pointer;
-
-  &:hover {
-    ${Opener} {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Name = styled.div`
-  position: relative;
-  top: -2px;
-  margin-right: 1em;
-`;
-
-export const Flags = styled.div``;
-
-export const Void = styled.div`
-  flex: 1;
-`;
--- a/packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx
+++ b/packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx
@ -1,31 +0,0 @@
-import { Category } from '@roleypoly/types';
-import { DragEventHandler, MouseEventHandler } from 'react';
-import { GoEyeClosed, GoGrabber, GoKebabHorizontal } from 'react-icons/go';
-import {
-  Container,
-  Flags,
-  GrabberBox,
-  Name,
-  Opener,
-  Void,
-} from './EditorCategoryShort.styled';
-
-type ShortProps = {
-  category: Category;
-  onDrag?: DragEventHandler;
-  onOpen?: MouseEventHandler;
-};
-
-export const EditorCategoryShort = (props: ShortProps) => (
-  <Container onClick={props.onOpen} role="menuitem">
-    <GrabberBox onDrag={props.onDrag} role="button">
-      <GoGrabber />
-    </GrabberBox>
-    <Name>{props.category.name}</Name>
-    <Flags>{props.category.hidden && <GoEyeClosed data-tip="Hidden to Members" />}</Flags>
-    <Void />
-    <Opener role="button">
-      <GoKebabHorizontal />
-    </Opener>
-  </Container>
-);
--- a/packages/design-system/molecules/editor-category-short/index.ts
+++ b/packages/design-system/molecules/editor-category-short/index.ts
@ -1 +0,0 @@
-export * from './EditorCategoryShort';
--- a/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
+++ b/packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
@ -1,19 +1,30 @@
 import * as React from 'react';
-import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyData';
+import { mockCategory, roleCategory } from '../../fixtures/storyData';
 import { EditorCategory } from './EditorCategory';

 export default {
-  title: 'Molecules/Editor/Category',
+  title: 'Molecules/Editor Category',
+  component: EditorCategory,
+  args: {
+    title: 'Pronouns',
+    roles: roleCategory,
+    category: mockCategory,
+    selectedRoles: [],
+  },
 };

-export const CategoryEditor = () => {
-  const [categoryData, setCategoryData] = React.useState(mockCategory);
-  return (
-    <EditorCategory
-      category={categoryData}
-      onChange={(category) => setCategoryData(category)}
-      uncategorizedRoles={roleCategory}
-      guildRoles={[...roleCategory, ...roleCategory2]}
-    />
-  );
+export const Default = (args) => {
+  return <EditorCategory {...args} />;
+};
+export const Single = (args) => {
+  return <EditorCategory {...args} type="single" />;
+};
+Single.args = {
+  type: 'single',
+};
+export const Multi = (args) => {
+  return <EditorCategory {...args} type="single" />;
+};
+Multi.args = {
+  type: 'multi',
 };
--- a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
+++ b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts
@ -1,13 +1,78 @@
-import styled from 'styled-components';
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+
+export const Head = styled.div`
+  margin: 7px 5px;
+  line-height: 200%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const HeadTitle = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const HeadSub = styled.div`
+  flex-shrink: 0;
+  margin-top: -4px;
+`;
+
+export const Box = styled.div`
+  display: flex;
+  align-items: top;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+export const Section = styled.div<{ big?: boolean }>`
+  padding: 7px 5px;
+  flex: 1 2 ${(props) => (props.big ? '100%' : '50%')};
+  ${onSmallScreen(css`
+    flex-basis: 100%;
+  `)}
+`;

 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;
+    margin: 2.5px;
  }
 `;
+
+export const AddRoleButton = styled.div<{ long?: boolean }>`
+  border: 2px solid ${palette.taupe500};
+  color: ${palette.taupe500};
+  border-radius: 24px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: ${palette.taupe100};
+    transform: translateY(-2px);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  ${(props) =>
+    props.long
+      ? css`
+          padding: 0 14px;
+        `
+      : css`
+          width: 32px;
+        `};
+`;
--- a/packages/design-system/molecules/editor-category/EditorCategory.tsx
+++ b/packages/design-system/molecules/editor-category/EditorCategory.tsx
@ -1,142 +1,159 @@
-import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
 import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { Role } from '@roleypoly/design-system/atoms/role';
-import { Space } from '@roleypoly/design-system/atoms/space';
-import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import { TextInput } from '@roleypoly/design-system/atoms/text-input';
 import { Toggle } from '@roleypoly/design-system/atoms/toggle';
 import { Text } from '@roleypoly/design-system/atoms/typography';
 import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
-import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
+import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
+import { sortBy, uniq } from 'lodash';
 import * as React from 'react';
-import { GoSearch } from 'react-icons/go';
-import { RoleContainer } from './EditorCategory.styled';
+import { GoPlus } from 'react-icons/go';
+import ReactTooltip from 'react-tooltip';
+import { AddRoleButton, Box, RoleContainer, Section } from './EditorCategory.styled';

-type Props = {
-  category: Category;
-  uncategorizedRoles: RoleType[];
-  guildRoles: RoleType[];
-  onChange: (category: Category) => void;
+export type CategoryProps = {
+  title: string;
+  roles: RoleT[];
+  category: CategoryT;
+  unselectedRoles: RoleT[];
+  onChange: (updatedCategory: CategoryT) => void;
 };

-const typeEnumToSwitch = (typeData: CategoryType) => {
-  if (typeData === CategoryType.Single) {
-    return 'Single';
-  } else {
-    return 'Multiple';
-  }
-};
+export const EditorCategory = (props: CategoryProps) => {
+  const [searchOpen, setSearchOpen] = React.useState(false);

-const switchToTypeEnum = (typeData: 'Single' | 'Multiple') => {
-  if (typeData === 'Single') {
-    return CategoryType.Single;
-  } else {
-    return CategoryType.Multi;
-  }
-};
-
-export const EditorCategory = (props: Props) => {
-  const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
-  const [roleSearchTerm, updateSearchTerm] = React.useState('');
-
-  const onUpdate =
-    (key: keyof typeof props.category, pred?: (newValue: any) => any) =>
-    (newValue: any) => {
-      props.onChange({
-        ...props.category,
-        [key]: pred ? pred(newValue) : newValue,
-      });
-    };
-
-  const handleRoleSelect = (role: RoleType) => {
-    setRoleSearchPopoverActive(false);
-    updateSearchTerm('');
-    props.onChange({
-      ...props.category,
-      roles: [...props.category.roles, role.id],
-    });
+  const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
+    props.onChange({ ...props.category, [key]: value });
  };

-  const handleRoleDeselect = (role: RoleType) => () => {
-    props.onChange({
-      ...props.category,
-      roles: props.category.roles.filter((x) => x !== role.id),
-    });
+  const handleRoleDelete = (role: RoleT) => () => {
+    const updatedRoles = props.category.roles.filter((r) => r !== role.id);
+    updateValue('roles', updatedRoles);
+  };
+
+  const handleRoleAdd = (role: RoleT) => {
+    const updatedRoles = uniq([...props.category.roles, role.id]);
+    updateValue('roles', updatedRoles);
+    setSearchOpen(false);
+  };
+
+  const handleSearchOpen = () => {
+    setSearchOpen(true);
  };

  return (
-    <div>
-      <Text>Category Name</Text>
-      <TextInput
-        placeholder="Pronouns, Political, Colors..."
-        value={props.category.name}
-        onChange={onUpdate('name', (x) => x.target.value)}
-      />
-
-      <Space />
-
-      <div>
-        <Toggle
-          state={props.category.type === CategoryType.Multi}
-          onChange={onUpdate('type', (x) =>
-            x ? CategoryType.Multi : CategoryType.Single
-          )}
-        >
-          Allow users to pick multiple roles
-        </Toggle>
-      </div>
-
-      <Space />
-      <div>
-        <Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
-          Hide category from users
-        </Toggle>
-      </div>
-
-      <Space />
-      <Text>Roles</Text>
-      <Popover
-        position={'top left'}
-        headContent={null}
-        active={roleSearchPopoverActive}
-        onExit={() => setRoleSearchPopoverActive(false)}
-      >
-        {() => (
-          <RoleSearch
-            placeholder={'Type or drag a role...'}
-            roles={props.uncategorizedRoles}
-            onSelect={handleRoleSelect}
-            searchTerm={roleSearchTerm}
-            onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
-          />
-        )}
-      </Popover>
-      <FaderOpacity isVisible={!roleSearchPopoverActive}>
-        <TextInputWithIcon
-          icon={<GoSearch />}
-          placeholder={'Type or drag a role...'}
-          onFocus={() => setRoleSearchPopoverActive(true)}
-          value={roleSearchTerm}
-          onChange={(x) => updateSearchTerm(x.target.value)}
+    <Box>
+      <Section>
+        <div>
+          <Text>Category Name</Text>
+        </div>
+        <TextInput
+          value={props.category.name}
+          onChange={(event) => updateValue('name', event.target.value)}
        />
-        <RoleContainer>
-          {props.category.roles.map((id) => {
-            const role = props.guildRoles.find((x) => x.id === id);
-            if (!role) {
-              return <></>;
-            }
+      </Section>

-            return (
-              <Role
-                role={role}
-                selected={false}
-                key={id}
-                type="delete"
-                onClick={handleRoleDeselect(role)}
-              />
-            );
-          })}
+      <Section>
+        <div>
+          <Text>Options</Text>
+        </div>
+        <div>
+          <Toggle
+            state={props.category.hidden}
+            onChange={(value) => updateValue('hidden', value)}
+          >
+            Show this category to members
+          </Toggle>
+          <Toggle
+            state={props.category.type === CategoryType.Multi}
+            onChange={(value) =>
+              updateValue('type', value ? CategoryType.Multi : CategoryType.Single)
+            }
+          >
+            Let members pick more than one role
+          </Toggle>
+        </div>
+      </Section>
+
+      <Section big>
+        <div>
+          <Text>Roles</Text>
+        </div>
+        <RoleContainer>
+          {props.roles.length > 0 ? (
+            <>
+              {sortBy(props.roles, 'position').map((role) => (
+                <Role
+                  key={role.id}
+                  role={role}
+                  selected={false}
+                  type="delete"
+                  onClick={handleRoleDelete(role)}
+                />
+              ))}
+              <RoleAddButton onClick={handleSearchOpen} tooltipId={props.category.id} />
+            </>
+          ) : (
+            <RoleAddButton
+              long
+              onClick={handleSearchOpen}
+              tooltipId={props.category.id}
+            />
+          )}
+          <RoleSearchPopover
+            isOpen={searchOpen}
+            onExit={() => setSearchOpen(false)}
+            unselectedRoles={props.unselectedRoles}
+            onSelect={handleRoleAdd}
+          />
        </RoleContainer>
-      </FaderOpacity>
-    </div>
+      </Section>
+
+      <ReactTooltip id={props.category.id} />
+    </Box>
+  );
+};
+
+const RoleAddButton = (props: {
+  onClick: () => void;
+  tooltipId: string;
+  long?: boolean;
+}) => (
+  <AddRoleButton
+    data-tip="Add a role to the category"
+    data-for={props.tooltipId}
+    onClick={props.onClick}
+    long={props.long}
+  >
+    {props.long && <>Add a role&nbsp;&nbsp;</>}
+    <GoPlus />
+  </AddRoleButton>
+);
+
+const RoleSearchPopover = (props: {
+  onSelect: (role: RoleT) => void;
+  onExit: (type: string) => void;
+  isOpen: boolean;
+  unselectedRoles: RoleT[];
+}) => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  return (
+    <Popover
+      position="top left"
+      active={props.isOpen}
+      canDefocus
+      onExit={props.onExit}
+      headContent={null}
+    >
+      {() => (
+        <RoleSearch
+          onSelect={props.onSelect}
+          roles={props.unselectedRoles}
+          searchTerm={searchTerm}
+          onSearchUpdate={setSearchTerm}
+        />
+      )}
+    </Popover>
  );
 };
--- a/packages/design-system/molecules/editor-category/index.ts
+++ b/packages/design-system/molecules/editor-category/index.ts
@ -1 +1 @@
-export * from './EditorCategory';
+export { EditorCategory } from './EditorCategory';