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/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)}
+    />
+  );
+};

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

packages/design-system/molecules/editable-server-message/index.ts

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