Feat/editor category pass2 (#290)

* feat(design-system): add editor skeletons

* use css media queries rather than JS media queries

* init remake

* feat: add basis of toggle atom

* finish toggle

* use pointer cursor with toggle

* sync

* feat: add server message in editor

* cleanup storybook

* add short editor item and data model for categories

* chore: fix build by moving jest version downward

* chore: remove old category editor

* chore: fix EditorCategoryShort index

* add editor wiring and styling updates

* fix linting issues

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Toggle } from './Toggle';
+export default {
+  title: 'Atoms/Toggle',
+  component: Toggle,
+};
+
+export const toggle = (args) => <Toggle {...args}>Turn a cool thing on</Toggle>;
+export const interactive = (args) => {
+  const [state, setState] = React.useState(true);
+  return (
+    <Toggle
+      {...args}
+      state={state}
+      onChange={(val) => {
+        setState(val);
+        args.onChange(val);
+      }}
+    >
+      Turn a cool thing on
+    </Toggle>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
+import { transitions } from '../timings';
+
+export const ToggleState = styled.div`
+  height: 1em;
+  width: 1em;
+  border-radius: 1em;
+  background-color: ${palette.grey600};
+  position: absolute;
+  top: 0.15em;
+  left: 0.15em;
+  transform: translateX(0);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform ${transitions.actionable}s ease-in-out;
+  }
+`;
+
+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;
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  top: 0.23em;
+  transition: background-color ${transitions.in2in}s ease-in-out;
+  cursor: pointer;
+  margin-right: 0.5em;
+
+  ${ToggleState} {
+    ${(props) =>
+      props.state === true &&
+      css`
+        transform: translateX(1.3em);
+      `}
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { ToggleState, ToggleSwitch } from './Toggle.styled';
+
+type ToggleProps = {
+  onChange?: (newState: boolean) => void;
+  children: React.ReactNode;
+  state: boolean;
+};
+
+export const Toggle = (props: ToggleProps) => (
+  <div
+    onClick={() => {
+      props.onChange?.(!props.state);
+    }}
+  >
+    <ToggleSwitch state={props.state}>
+      <ToggleState />
+    </ToggleSwitch>
+    {props.children}
+  </div>
+);

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

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