Skip to content

Commit 34c5098

Browse files
author
Dany Boza
committed
refactor files #85
1 parent 5ee0276 commit 34c5098

40 files changed

+895
-1563
lines changed

‎.env.sample

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
REACT_APP_ICONSCOUT_CLIENT_ID="client-id"
2-
REACT_APP_ICONSCOUT_SECRET="client-secret"
3-
REACT_APP_PIXABAY_KEY="sample key"
1+
REACT_APP_PIXABAY_KEY="
2+
REACT_APP_ICONSCOUT_SECRET=""
3+
REACT_APP_ICONSCOUT_CLIENT_ID=""

‎package.json

+2-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@chakra-ui/icons": "^1.0.12",
7-
"@chakra-ui/react": "^1.6.0",
8-
"@emotion/react": "^11",
9-
"@emotion/styled": "^11",
6+
"@types/theme-ui": "^0.6.0",
107
"axios": "^0.21.1",
118
"classnames": "^2.3.1",
129
"craco": "^0.0.3",
1310
"fabric": "^4.4.0",
1411
"focus-visible": "^5.2.0",
15-
"framer-motion": "^4",
1612
"i18next": "^20.2.2",
1713
"lodash": "^4.17.21",
1814
"nanoid": "^3.1.22",
@@ -23,6 +19,7 @@
2319
"react-dom": "^17.0.2",
2420
"react-scripts": "4.0.3",
2521
"resize-observer-polyfill": "^1.5.1",
22+
"theme-ui": "^0.10.0",
2623
"use-debounce": "^6.0.1",
2724
"web-vitals": "^1.0.1"
2825
},

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
-->
4747
<title>React Design Editor</title>
4848
</head>
49-
<body>
49+
<body style="margin: 0">
5050
<noscript>You need to enable JavaScript to run this app.</noscript>
5151
<div id="root"></div>
5252
<!--

‎src/components/AppBox/AppBox.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useEffect, useRef, FC } from 'react'
2-
import { Flex } from '@chakra-ui/react'
2+
import { Flex } from 'theme-ui'
33
import ResizeObserver from 'resize-observer-polyfill'
44
import { useAppContext } from '@contexts/app/AppContext'
55

6-
const AppBox: FC = ({ children }) => {
6+
function AppBox({ children }) {
77
const containerRef = useRef<HTMLDivElement>()
88
const { isMobile, setIsMobile } = useAppContext()
99
useEffect(() => {
@@ -31,7 +31,14 @@ const AppBox: FC = ({ children }) => {
3131
}
3232

3333
return (
34-
<Flex ref={containerRef} flex={1} height="100vh" width="100vw">
34+
<Flex
35+
ref={containerRef}
36+
sx={{
37+
flex: 1,
38+
height: '100vh',
39+
width: '100vw',
40+
}}
41+
>
3542
{children}
3643
</Flex>
3744
)

‎src/components/Canvas/Canvas.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect } from 'react'
22
import { fabric } from 'fabric'
33
import { useCanvasContext } from '@/hooks'
4-
import { Flex } from '@chakra-ui/react'
4+
import { Flex, Box } from 'theme-ui'
55
import ContextMenu from '@components/ContextMenu'
66

77
import {
@@ -55,7 +55,7 @@ function Canvas() {
5555
}, [])
5656

5757
return (
58-
<Flex flex={1} position="relative">
58+
<Flex sx={{ flex: 1, position: 'relative' }}>
5959
<ContextMenu />
6060
<div style={{ width: '100%', height: '100%', position: 'absolute' }}>
6161
<div style={{ height: '100%' }} className="editor-canvas" ref={containerRef}>

‎src/components/CanvasArea/CanvasArea.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import { Flex } from '@chakra-ui/react'
1+
import { Flex } from 'theme-ui'
22
import Canvas from '@components/Canvas'
33
import Slides from '@components/Slides'
44
function CanvasArea() {
55
return (
6-
<Flex flex={1} position={'relative'}>
6+
<Flex
7+
sx={{
8+
flex: 1,
9+
position: 'relative',
10+
}}
11+
>
712
<Canvas />
8-
<Slides />
13+
{/* <Slides /> */}
914
</Flex>
1015
)
1116
}

‎src/components/ContextMenu/ContextMenu.tsx

+30-39
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
1-
import styled from '@emotion/styled'
1+
import { Box, Grid } from 'theme-ui'
22
import { useCoreHandler } from '@/handlers'
33
import { useCanvasContext } from '@/hooks'
44
import ContextMenuIcons from './ContextMenuIcons'
55

6-
const ContextMenuContainer = styled.div<any>(
7-
{
8-
position: 'absolute',
9-
width: '200px',
10-
zIndex: 9,
11-
backgroundColor: '#fff',
12-
border: '1px solid rgba(64, 87, 109, 0.07)',
13-
boxShadow: '0 2px 8px rgba(53, 71, 90, 0.2)',
14-
borderRadius: '4px',
15-
},
16-
props => {
17-
return {
18-
display: props.visible ? 'block' : 'none',
19-
top: props.top ? props.top : 0,
20-
left: props.left ? props.left : 0,
21-
}
22-
}
23-
)
24-
256
function ContextMenu() {
267
const { contextMenu, setContextMenu } = useCanvasContext()
278
const { deleteObject, cloneOject } = useCoreHandler()
289
return (
29-
<ContextMenuContainer
30-
top={contextMenu.top}
31-
left={contextMenu.left}
32-
visible={contextMenu.visible}
10+
<Box
11+
sx={{
12+
position: 'absolute',
13+
width: '220px',
14+
zIndex: 9,
15+
backgroundColor: '#fff',
16+
border: '1px solid rgba(64, 87, 109, 0.07)',
17+
boxShadow: '0 2px 8px rgba(53, 71, 90, 0.2)',
18+
borderRadius: '4px',
19+
display: contextMenu.visible ? 'block' : 'none',
20+
top: contextMenu.top ? contextMenu.top : 0,
21+
left: contextMenu.left ? contextMenu.left : 0,
22+
}}
23+
// @ts-ignore
3324
onContextMenu={(e: Event) => e.preventDefault()}
3425
>
3526
<ContextMenuItem
@@ -50,7 +41,7 @@ function ContextMenu() {
5041
setContextMenu({ ...contextMenu, visible: false })
5142
}}
5243
/>
53-
</ContextMenuContainer>
44+
</Box>
5445
)
5546
}
5647

@@ -62,24 +53,24 @@ interface ContextMenuItemProps {
6253
}
6354
function ContextMenuItem(props: ContextMenuItemProps) {
6455
return (
65-
<ContextMenuItemContainer {...props}>
56+
<Grid
57+
sx={{
58+
cursor: 'pointer',
59+
height: '40px',
60+
display: 'grid',
61+
gridTemplateColumns: '40px 1fr 70px',
62+
alignItems: 'center',
63+
padding: '0 0.8rem',
64+
':hover': {
65+
background: 'rgba(0,0,0,0.06)',
66+
},
67+
}}
68+
>
6669
<div>{ContextMenuIcons[props.icon as 'delete']}</div>
6770
<div style={{ fontSize: '0.94rem' }}>{props.text}</div>
6871
<div style={{ color: 'rgba(0,0,0,0.5)' }}>{props.shortcut}</div>
69-
</ContextMenuItemContainer>
72+
</Grid>
7073
)
7174
}
7275

73-
const ContextMenuItemContainer = styled.div({
74-
cursor: 'pointer',
75-
height: '40px',
76-
display: 'grid',
77-
gridTemplateColumns: '40px 1fr 60px',
78-
alignItems: 'center',
79-
padding: '0 0.8rem',
80-
':hover': {
81-
background: 'rgba(0,0,0,0.06)',
82-
},
83-
})
84-
8576
export default ContextMenu

‎src/components/Editor/Editor.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Flex } from '@chakra-ui/react'
1+
import { Flex } from 'theme-ui'
22
import Navbar from '@components/Navbar/Navbar'
33
import Panels from '@components/Panels/Panels'
4-
import FooterMenu from '@components/FooterMenu/FooterMenu'
4+
// import FooterMenu from '@components/FooterMenu/FooterMenu'
55
import Toolbox from '@components/Toolbox/Toolbox'
66
import CanvasArea from '@components/CanvasArea/CanvasArea'
77
import NotSupported from '@components/NotSupported'
@@ -11,19 +11,24 @@ function Editor() {
1111
const { isMobile } = useAppContext()
1212

1313
return (
14-
<Flex flex={1} flexDirection="column">
14+
<Flex sx={{ flex: 1, flexDirection: 'column' }}>
1515
<Navbar />
1616
{isMobile === undefined ? (
1717
<div>Loading</div>
1818
) : isMobile ? (
1919
<NotSupported />
2020
) : (
21-
<Flex flex={1}>
21+
<Flex sx={{ flex: 1 }}>
2222
<Panels />
23-
<Flex flex={1} flexDirection="column">
23+
<Flex
24+
sx={{
25+
flex: 1,
26+
flexDirection: 'column',
27+
}}
28+
>
2429
<Toolbox />
2530
<CanvasArea />
26-
<FooterMenu />
31+
{/* <FooterMenu /> */}
2732
</Flex>
2833
</Flex>
2934
)}

0 commit comments

Comments
 (0)