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