[big chore] restore core to monorepo (#287)

* move core into repo, apps into apps folder, update tests

* Update scripts for build:core

* improve scripts

* remove noise from www

* Update .gitignore

* Fix focus bug

* add ci test script

* Update main.yml

examples/core-example-advanced/src/components/Toolbar.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react'
+import { ArrowUpRight, Edit2, MousePointer, PenTool, Square, X } from 'react-feather'
+import { machine } from 'state/machine'
+import styled from 'stitches.config'
+
+interface ToolbarProps {
+  activeStates: string[]
+  lastEvent: string
+}
+
+const onToolSelect = (e: React.MouseEvent) => {
+  machine.send('SELECTED_TOOL', { name: e.currentTarget.id })
+}
+
+const onReset = () => {
+  machine.send('RESET')
+}
+
+export function Toolbar({ activeStates, lastEvent }: ToolbarProps) {
+  return (
+    <ToolbarContainer>
+      <PrimaryTools>
+        <PrimaryToolButton id="select" isActive={machine.isIn('select')} onClick={onToolSelect}>
+          <Highlight>
+            <MousePointer />
+          </Highlight>
+        </PrimaryToolButton>
+        <PrimaryToolButton id="eraser" isActive={machine.isIn('eraser')} onClick={onToolSelect}>
+          <Highlight>
+            <X />
+          </Highlight>
+        </PrimaryToolButton>
+        <PrimaryToolButton id="pencil" isActive={machine.isIn('pencil')} onClick={onToolSelect}>
+          <Highlight>
+            <Edit2 />
+          </Highlight>
+        </PrimaryToolButton>
+        <PrimaryToolButton id="box" isActive={machine.isIn('box')} onClick={onToolSelect}>
+          <Highlight>
+            <Square />
+          </Highlight>
+        </PrimaryToolButton>
+        <PrimaryToolButton id="arrow" isActive={machine.isIn('arrow')} onClick={onToolSelect}>
+          <Highlight>
+            <ArrowUpRight />
+          </Highlight>
+        </PrimaryToolButton>
+      </PrimaryTools>
+      <StatusBar>
+        <div>
+          <button onClick={onReset}>Reset</button>
+          {activeStates
+            .slice(1)
+            .map((name) => name.split('#state_1.root')[1])
+            .join(' - ')}
+        </div>
+        <div>{lastEvent}</div>
+      </StatusBar>
+    </ToolbarContainer>
+  )
+}
+
+const ToolbarContainer = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  gridTemplateRows: 'auto auto',
+  gridRowGap: '$5',
+  position: 'fixed',
+  bottom: '0',
+  width: '100%',
+  zIndex: '100',
+})
+
+const PrimaryTools = styled('div', {
+  display: 'flex',
+  width: 'fit-content',
+  borderRadius: '100px',
+  border: '1px solid $border',
+  overflow: 'hidden',
+  padding: '$2',
+  justifySelf: 'center',
+  backgroundColor: '$background',
+})
+
+const Highlight = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  padding: 10,
+  borderRadius: '100%',
+  transition: 'background-color .025s',
+})
+
+const PrimaryToolButton = styled('button', {
+  cursor: 'pointer',
+  width: '40px',
+  height: '40px',
+  padding: 2,
+  margin: 0,
+  background: 'none',
+  backgroundColor: 'none',
+  border: 'none',
+  color: '$text',
+
+  variants: {
+    isActive: {
+      true: {
+        color: '$background',
+        [`& > ${Highlight}`]: {
+          backgroundColor: '$text',
+        },
+      },
+      false: {
+        [`&:hover > ${Highlight}`]: {
+          backgroundColor: '$hover',
+        },
+        '&:active': {
+          color: '$background',
+        },
+        [`&:active > ${Highlight}`]: {
+          backgroundColor: '$text',
+        },
+      },
+    },
+  },
+})
+
+const StatusBar = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '8px 12px',
+  borderTop: '1px solid $border',
+  fontSize: '$1',
+  fontWeight: '$1',
+  backgroundColor: '$background',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+
+  '& button': {
+    background: 'none',
+    border: '1px solid $text',
+    borderRadius: 3,
+    marginRight: '$3',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    cursor: 'pointer',
+  },
+})