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/atoms/breakpoints/BreakpointText.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from './Breakpoints';
+
+const ShowOnSmall = styled.span`
+  display: none;
+  ${onSmallScreen(css`
+    display: initial;
+  `)}
+`;
+
+const ShowOnLarge = styled.span`
+  display: initial;
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+
+export const BreakpointText = (props: { small: string; large: string }) => {
+  const { small, large } = props;
+  return (
+    <>
+      <ShowOnSmall>{small}</ShowOnSmall>
+      <ShowOnLarge>{large}</ShowOnLarge>
+    </>
+  );
+};

packages/design-system/atoms/breakpoints/index.ts

@@ -1,3 +1,4 @@
 export * from './BreakpointProvider';
 export * from './Breakpoints';
+export * from './BreakpointText';
 export * from './Context';

packages/design-system/atoms/button/Button.styled.ts

@@ -67,6 +67,13 @@ const colors = {
       background-color: ${palette.taupe200};
     }
   `,
+  silent: css`
+    background: none;
+    border-color: transparent;
+    :hover {
+      background-color: ${palette.taupe200};
+    }
+  `,
 };
 
 const sizes = {

packages/design-system/atoms/text-input/TextInput.tsx

@@ -94,18 +94,27 @@ const StyledTextarea = styled.textarea`
 export const MultilineTextInput = (
   props: TextInputProps<HTMLTextAreaElement> & { rows?: number }
 ) => {
-  const { ...rest } = props;
+  const { children, ...rest } = props;
   const [value, setValue] = React.useState(String(props.value));
-  const rows = Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length));
+  const rows = React.useMemo(
+    () => Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length)),
+    [value]
+  );
+
+  React.useEffect(() => {
+    setValue(String(props.value));
+  }, [props.value]);
+
   return (
     <StyledTextarea
       {...rest}
       rows={rows}
-      value={value}
       onChange={(eventData) => {
         setValue(eventData.target.value);
         props.onChange?.(eventData);
       }}
-    />
+    >
+      {value}
+    </StyledTextarea>
   );
 };

packages/design-system/atoms/toggle/Toggle.styled.tsx

@@ -20,9 +20,9 @@ export const ToggleState = styled.div`
 export const ToggleSwitch = styled.div<{ state: boolean }>`
   display: inline-block;
   background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
-  height: 1.3em;
-  width: 2.6em;
-  border-radius: 1.3em;
+  height: 1.375rem;
+  width: 2.675rem;
+  border-radius: 1.375rem;
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.1);
   top: 0.23em;