[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
This commit is contained in:
parent
878ca710b7
commit
e6a3e5c3ea
389 changed files with 12980 additions and 95 deletions
151
examples/core-example-advanced/src/components/Toolbar.tsx
Normal file
151
examples/core-example-advanced/src/components/Toolbar.tsx
Normal file
|
@ -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',
|
||||
},
|
||||
})
|
Loading…
Add table
Add a link
Reference in a new issue