Skip to content

Commit

Permalink
Fix selected overlay size
Browse files Browse the repository at this point in the history 
Also adds husky for pre-commit hooks
  • Loading branch information
@foyarash
foyarash committed Feb 4, 2020
1 parent 2e9349c commit 8e0704d
Show file tree
Hide file tree
Showing 6 changed files with 674 additions and 181 deletions.
6 changes: 6 additions & 0 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"semi": false,
"trailingComma": "all",
"bracketSpacing": true,
"singleQuote": true
}
14 changes: 14 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,22 @@
"@types/react-redux": "^7.1.7",
"customize-cra": "^0.9.1",
"customize-cra-react-refresh": "^1.0.1",
"husky": "^4.2.1",
"lint-staged": "^10.0.7",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"react-app-rewired": "^2.1.5",
"typedoc": "^0.16.9"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && pretty-quick --staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,md}": [
"eslint src/**/*.{ts,tsx} --fix",
"git add"
]
}
}
212 changes: 108 additions & 104 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,159 @@
import React from "react";
import { Flex, Box } from "@chakra-ui/core";
import { DndProvider } from "react-dnd";
import Backend from "react-dnd-html5-backend";
import Editor from "./components/editor/Editor";
import Inspector from "./components/inspector/Inspector";
import Sidebar from "./components/sidebar/Sidebar";
import Header from "./components/Header";
import { Global } from "@emotion/core";
import { HotKeys } from "react-hotkeys";
import useDispatch from "./hooks/useDispatch";
import { useSelector } from "react-redux";
import { ActionCreators as UndoActionCreators } from "redux-undo";
import { RootState } from ".";
import React from 'react'
import { Flex, Box } from '@chakra-ui/core'
import { DndProvider } from 'react-dnd'
import Backend from 'react-dnd-html5-backend'
import Editor from './components/editor/Editor'
import Inspector from './components/inspector/Inspector'
import Sidebar from './components/sidebar/Sidebar'
import Header from './components/Header'
import { Global } from '@emotion/core'
import { HotKeys } from 'react-hotkeys'
import useDispatch from './hooks/useDispatch'
import { useSelector } from 'react-redux'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
import { RootState } from '.'

export const COMPONENTS: ComponentType[] = [
"Alert",
"AlertDescription",
"AlertIcon",
"AlertTitle",
"Avatar",
"AvatarBadge",
"AvatarGroup",
"Badge",
"Box",
"Button",
"Checkbox",
"CircularProgress",
"CloseButton",
"Code",
"Divider",
"Flex",
"FormControl",
"FormLabel",
"FormHelperText",
"FormErrorMessage",
"Heading",
"Icon",
"IconButton",
"Image",
"Input",
"Link",
"List",
"ListItem",
"Progress",
"Radio",
"RadioGroup",
"SimpleGrid",
"Spinner",
"Select",
"Stack",
"Switch",
"Tag",
"Text",
"Textarea",
"Tab",
"Accordion",
"Editable",
"AspectRatioBox",
"Breadcrumb",
"Menu",
"NumberInput",
"AccordionItem",
"AccordionHeader",
"AccordionPanel",
"AccordionIcon"
'Alert',
'AlertDescription',
'AlertIcon',
'AlertTitle',
'Avatar',
'AvatarBadge',
'AvatarGroup',
'Badge',
'Box',
'Button',
'Checkbox',
'CircularProgress',
'CloseButton',
'Code',
'Divider',
'Flex',
'FormControl',
'FormLabel',
'FormHelperText',
'FormErrorMessage',
'Heading',
'Icon',
'IconButton',
'Image',
'Input',
'Link',
'List',
'ListItem',
'Progress',
'Radio',
'RadioGroup',
'SimpleGrid',
'Spinner',
'Select',
'Stack',
'Switch',
'Tag',
'Text',
'Textarea',
'Tab',
'Accordion',
'Editable',
'AspectRatioBox',
'Breadcrumb',
'Menu',
'NumberInput',
'AccordionItem',
'AccordionHeader',
'AccordionPanel',
'AccordionIcon',
/*"Tabs",
"TabList",
"TabPanel",
"TabPanels"*/
];
]

export const rootComponents = COMPONENTS
// Remove specific components
.filter(
name =>
![
"AlertIcon",
"AlertDescription",
"AlertTitle",
"AvatarBadge",
"AccordionItem",
"AccordionHeader",
"AccordionPanel",
"AccordionIcon"
].includes(name)
'AlertIcon',
'AlertDescription',
'AlertTitle',
'AvatarBadge',
'AccordionItem',
'AccordionHeader',
'AccordionPanel',
'AccordionIcon',
].includes(name),
)
// Allow meta components
.concat(["AlertMeta", "FormControlMeta", "AccordionMeta", "ListMeta"]);
.concat(['AlertMeta', 'FormControlMeta', 'AccordionMeta', 'ListMeta'])

const keyMap = {
DELETE_NODE: "backspace",
TOGGLE_BUILDER_MODE: "b",
TOGGLE_CODE_PANEL: "c",
UNDO: ["ctrl+z", "cmd+z"],
REDO: ["ctrl+y", "cmd+y"]
};
DELETE_NODE: 'backspace',
TOGGLE_BUILDER_MODE: 'b',
TOGGLE_CODE_PANEL: 'c',
UNDO: ['ctrl+z', 'cmd+z'],
REDO: ['ctrl+y', 'cmd+y'],
}

const App = () => {
const selected = useSelector((state: RootState) => state.app.selected);
const dispatch = useDispatch();
const selected = useSelector((state: RootState) => state.app.selected)
const showLayout = useSelector((state: RootState) => state.app.showLayout)
const dispatch = useDispatch()

const deleteNode = (event: KeyboardEvent | undefined) => {
if (event) {
event.preventDefault();
event.preventDefault()
}
dispatch.components.deleteComponent(selected.id);
};
dispatch.components.deleteComponent(selected.id)
}

const toggleBuilderMode = (event: KeyboardEvent | undefined) => {
if (event) {
event.preventDefault();
event.preventDefault()
}
dispatch.app.toggleBuilderMode();
};
dispatch.app.toggleBuilderMode()
}

const toggleCodePanel = (event: KeyboardEvent | undefined) => {
if (event) {
event.preventDefault();
event.preventDefault()
}
dispatch.app.toggleCodePanel();
};
dispatch.app.toggleCodePanel()
}

const undo = (event: KeyboardEvent | undefined) => {
if (event) {
event.preventDefault();
event.preventDefault()
}

dispatch(UndoActionCreators.undo());
};
dispatch(UndoActionCreators.undo())
}

const redo = (event: KeyboardEvent | undefined) => {
if (event) {
event.preventDefault();
event.preventDefault()
}

dispatch(UndoActionCreators.redo());
};
dispatch(UndoActionCreators.redo())
}

const handlers = {
DELETE_NODE: deleteNode,
TOGGLE_BUILDER_MODE: toggleBuilderMode,
TOGGLE_CODE_PANEL: toggleCodePanel,
UNDO: undo,
REDO: redo
};
REDO: redo,
}

return (
<HotKeys allowChanges handlers={handlers} keyMap={keyMap}>
<Global
styles={() => ({
"*": { borderBox: "box-sizing" }
'*': {
borderBox: 'box-sizing',
transition: showLayout ? 'none !important' : undefined,
},
})}
/>
<Header />
Expand All @@ -176,7 +180,7 @@ const App = () => {
</Flex>
</DndProvider>
</HotKeys>
);
};
)
}

export default App;
export default App
Loading

0 comments on commit 8e0704d

Please sign in to comment.