diff --git a/package.json b/package.json index c78c0af80d..660d77c171 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,8 @@ }, "jest": { "moduleNameMapper": { - "\\.(svg|jpg|png|css)$": "/empty-module.js" + "\\.(svg|jpg|png|css)$": "/empty-module.js", + "~(.*)$": "/src/$1" }, "moduleFileExtensions": [ "js", diff --git a/src/components/CodePanel.tsx b/src/components/CodePanel.tsx index 8c4d84416a..93b9b72610 100644 --- a/src/components/CodePanel.tsx +++ b/src/components/CodePanel.tsx @@ -1,10 +1,10 @@ import React, { memo, useState, useEffect } from 'react' import Highlight, { defaultProps } from 'prism-react-renderer' import { Box, Button, useClipboard } from '@chakra-ui/core' -import { generateCode } from '../utils/code' +import { generateCode } from '~utils/code' import theme from 'prism-react-renderer/themes/nightOwl' import { useSelector } from 'react-redux' -import { getComponents } from '../core/selectors/components' +import { getComponents } from '~core/selectors/components' const CodePanel = () => { const components = useSelector(getComponents) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index cf3be029ad..503f2a5c92 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -22,13 +22,13 @@ import { } from '@chakra-ui/core' import { DiGithubBadge } from 'react-icons/di' import { AiFillThunderbolt } from 'react-icons/ai' -import { buildParameters } from '../utils/codesandbox' -import { generateCode } from '../utils/code' -import useDispatch from '../hooks/useDispatch' +import { buildParameters } from '~utils/codesandbox' +import { generateCode } from '~utils/code' +import useDispatch from '~hooks/useDispatch' import { useSelector } from 'react-redux' -import { getComponents } from '../core/selectors/components' -import { getShowLayout, getShowCode } from '../core/selectors/app' -import HeaderMenu from './headerMenu/HeaderMenu' +import { getComponents } from '~core/selectors/components' +import { getShowLayout, getShowCode } from '~core/selectors/app' +import HeaderMenu from '~components/headerMenu/HeaderMenu' const CodeSandboxButton = () => { const components = useSelector(getComponents) diff --git a/src/components/Metadata.tsx b/src/components/Metadata.tsx new file mode 100644 index 0000000000..59335ef901 --- /dev/null +++ b/src/components/Metadata.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import Head from 'next/head' + +const Metadata = () => { + return ( + + + + + + + + + + + + OpenChakra + + + + {/* OpenGraph tags */} + + + + + + + + + + {/* Twitter Card tags */} + + + + + + + + + + + + ) +} + +export default Metadata diff --git a/src/components/editor/ComponentPreview.test.tsx b/src/components/editor/ComponentPreview.test.tsx index 79fb847b48..7bc41051b6 100644 --- a/src/components/editor/ComponentPreview.test.tsx +++ b/src/components/editor/ComponentPreview.test.tsx @@ -7,7 +7,7 @@ import Backend from 'react-dnd-html5-backend' import { ThemeProvider, theme } from '@chakra-ui/core' import ComponentPreview from './ComponentPreview' -import { storeConfig } from '../../core/store' +import { storeConfig } from '~core/store' function renderWithRedux( components: React.ReactNode, diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx index 235f6d768f..f46de3930a 100644 --- a/src/components/editor/ComponentPreview.tsx +++ b/src/components/editor/ComponentPreview.tsx @@ -1,23 +1,23 @@ import React, { memo } from 'react' import { useSelector } from 'react-redux' -import AlertPreview from './previews/AlertPreview' +import AlertPreview from '~components/editor/previews/AlertPreview' import AvatarPreview, { AvatarBadgePreview, AvatarGroupPreview, -} from './previews/AvatarPreview' +} from '~components/editor/previews/AvatarPreview' import AccordionPreview, { AccordionHeaderPreview, AccordionItemPreview, AccordionPanelPreview, -} from './previews/AccordionPreview' +} from '~components/editor/previews/AccordionPreview' import * as Chakra from '@chakra-ui/core' -import WithChildrenPreviewContainer from './WithChildrenPreviewContainer' -import { getComponentBy } from '../../core/selectors/components' -import PreviewContainer from './PreviewContainer' -import { InputRightElementPreview } from './previews/InputRightElement' -import { InputLeftElementPreview } from './previews/InputLeftElement' -import AspectRatioBoxPreview from './previews/AspectRatioBoxPreview' +import { getComponentBy } from '~core/selectors/components' +import { InputRightElementPreview } from '~components/editor/previews/InputRightElement' +import { InputLeftElementPreview } from '~components/editor/previews/InputLeftElement' +import AspectRatioBoxPreview from '~components/editor/previews/AspectRatioBoxPreview' +import PreviewContainer from '~components/editor/PreviewContainer' +import WithChildrenPreviewContainer from '~components/editor/WithChildrenPreviewContainer' const ComponentPreview: React.FC<{ componentName: string diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx index 185edcce39..080824985c 100644 --- a/src/components/editor/Editor.tsx +++ b/src/components/editor/Editor.tsx @@ -1,13 +1,13 @@ import React, { memo } from 'react' import { Box, Text, Link } from '@chakra-ui/core' -import ComponentPreview from './ComponentPreview' -import { useDropComponent } from '../../hooks/useDropComponent' +import { useDropComponent } from '~hooks/useDropComponent' import SplitPane from 'react-split-pane' -import CodePanel from '../CodePanel' +import CodePanel from '~components/CodePanel' import { useSelector } from 'react-redux' -import useDispatch from '../../hooks/useDispatch' -import { getComponents } from '../../core/selectors/components' -import { getShowLayout, getShowCode } from '../../core/selectors/app' +import useDispatch from '~hooks/useDispatch' +import { getComponents } from '~core/selectors/components' +import { getShowLayout, getShowCode } from '~core/selectors/app' +import ComponentPreview from '~components/editor/ComponentPreview' export const gridStyles = { backgroundImage: diff --git a/src/components/editor/PreviewContainer.tsx b/src/components/editor/PreviewContainer.tsx index faa926c8eb..de60aed456 100644 --- a/src/components/editor/PreviewContainer.tsx +++ b/src/components/editor/PreviewContainer.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, ComponentClass } from 'react' -import { useInteractive } from '../../hooks/useInteractive' +import { useInteractive } from '~hooks/useInteractive' import { Box } from '@chakra-ui/core' const PreviewContainer: React.FC<{ diff --git a/src/components/editor/WithChildrenPreviewContainer.tsx b/src/components/editor/WithChildrenPreviewContainer.tsx index 423e6e1119..c391f2daf9 100644 --- a/src/components/editor/WithChildrenPreviewContainer.tsx +++ b/src/components/editor/WithChildrenPreviewContainer.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, ComponentClass } from 'react' -import { useInteractive } from '../../hooks/useInteractive' -import { useDropComponent } from '../../hooks/useDropComponent' -import ComponentPreview from './ComponentPreview' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' +import ComponentPreview from '~components/editor/ComponentPreview' import { Box } from '@chakra-ui/core' const WithChildrenPreviewContainer: React.FC<{ diff --git a/src/components/editor/previews/AccordionPreview.tsx b/src/components/editor/previews/AccordionPreview.tsx index 2eb3ea91b0..dcae7cb3fd 100644 --- a/src/components/editor/previews/AccordionPreview.tsx +++ b/src/components/editor/previews/AccordionPreview.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useInteractive } from '../../../hooks/useInteractive' -import { useDropComponent } from '../../../hooks/useDropComponent' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' import { Box, Accordion, @@ -8,8 +8,8 @@ import { AccordionItem, AccordionPanel, } from '@chakra-ui/core' -import ComponentPreview from '../ComponentPreview' -import { AccordionWhitelist } from '../../../utils/editor' +import ComponentPreview from '~components/editor/ComponentPreview' +import { AccordionWhitelist } from '~utils/editor' const acceptedTypes: ComponentType[] = ['AccordionItem'] diff --git a/src/components/editor/previews/AlertPreview.tsx b/src/components/editor/previews/AlertPreview.tsx index 357f1a0ec2..41e26ed5ef 100644 --- a/src/components/editor/previews/AlertPreview.tsx +++ b/src/components/editor/previews/AlertPreview.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { useInteractive } from '../../../hooks/useInteractive' -import { useDropComponent } from '../../../hooks/useDropComponent' -import ComponentPreview from '../ComponentPreview' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' +import ComponentPreview from '~components/editor/ComponentPreview' import { Alert, Box } from '@chakra-ui/core' const AlertPreview: React.FC = ({ component }) => { diff --git a/src/components/editor/previews/AspectRatioBoxPreview.tsx b/src/components/editor/previews/AspectRatioBoxPreview.tsx index 0eb6b64507..63224e2e19 100644 --- a/src/components/editor/previews/AspectRatioBoxPreview.tsx +++ b/src/components/editor/previews/AspectRatioBoxPreview.tsx @@ -1,8 +1,8 @@ import React from 'react' import { Box, AspectRatioBox } from '@chakra-ui/core' -import { useInteractive } from '../../../hooks/useInteractive' -import { useDropComponent } from '../../../hooks/useDropComponent' -import ComponentPreview from '../ComponentPreview' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' +import ComponentPreview from '~components/editor/ComponentPreview' const AspectRatioBoxPreview: React.FC<{ component: IComponent }> = ({ component, diff --git a/src/components/editor/previews/AvatarPreview.tsx b/src/components/editor/previews/AvatarPreview.tsx index f198b0cbc2..b960a88a77 100644 --- a/src/components/editor/previews/AvatarPreview.tsx +++ b/src/components/editor/previews/AvatarPreview.tsx @@ -6,11 +6,11 @@ import { AvatarBadge, BoxProps, } from '@chakra-ui/core' -import { useInteractive } from '../../../hooks/useInteractive' -import { useDropComponent } from '../../../hooks/useDropComponent' -import ComponentPreview from '../ComponentPreview' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' +import ComponentPreview from '~components/editor/ComponentPreview' import { useSelector } from 'react-redux' -import { getComponents } from '../../../core/selectors/components' +import { getComponents } from '~core/selectors/components' const AvatarPreview: React.FC = ({ component }) => { const { drop, isOver } = useDropComponent(component.id) diff --git a/src/components/editor/previews/InputGroupPreview.tsx b/src/components/editor/previews/InputGroupPreview.tsx index 27509e0c25..1a48c2dfad 100644 --- a/src/components/editor/previews/InputGroupPreview.tsx +++ b/src/components/editor/previews/InputGroupPreview.tsx @@ -1,8 +1,8 @@ import React from 'react' import { InputGroup, Box } from '@chakra-ui/core' -import ComponentPreview from '../ComponentPreview' -import { useDropComponent } from '../../../hooks/useDropComponent' -import { useInteractive } from '../../../hooks/useInteractive' +import ComponentPreview from '~components/editor/ComponentPreview' +import { useDropComponent } from '~hooks/useDropComponent' +import { useInteractive } from '~hooks/useInteractive' const InputGroupPreview: React.FC<{ component: IComponent }> = ({ component, diff --git a/src/components/editor/previews/InputLeftAddonPreview.tsx b/src/components/editor/previews/InputLeftAddonPreview.tsx index 5f95ffff95..783cc0a271 100644 --- a/src/components/editor/previews/InputLeftAddonPreview.tsx +++ b/src/components/editor/previews/InputLeftAddonPreview.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Box, InputLeftAddon } from '@chakra-ui/core' -import { useInteractive } from '../../../hooks/useInteractive' +import { useInteractive } from '~hooks/useInteractive' const InputLeftAddonPreview: React.FC<{ component: IComponent }> = ({ component, diff --git a/src/components/editor/previews/InputLeftElement.tsx b/src/components/editor/previews/InputLeftElement.tsx index de974ba7b9..308b13c5b2 100644 --- a/src/components/editor/previews/InputLeftElement.tsx +++ b/src/components/editor/previews/InputLeftElement.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { useInteractive } from '../../../hooks/useInteractive' -import { useDropComponent } from '../../../hooks/useDropComponent' -import ComponentPreview from '../ComponentPreview' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' +import ComponentPreview from '~components/editor/ComponentPreview' import { InputLeftElement } from '@chakra-ui/core' export const InputLeftElementPreview: React.FC<{ component: IComponent }> = ({ diff --git a/src/components/editor/previews/InputRightAddonPreview.tsx b/src/components/editor/previews/InputRightAddonPreview.tsx index d045bac843..cdeec783e2 100644 --- a/src/components/editor/previews/InputRightAddonPreview.tsx +++ b/src/components/editor/previews/InputRightAddonPreview.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Box, InputRightAddon } from '@chakra-ui/core' -import { useInteractive } from '../../../hooks/useInteractive' +import { useInteractive } from '~hooks/useInteractive' const InputRightAddonPreview: React.FC<{ component: IComponent }> = ({ component, diff --git a/src/components/editor/previews/InputRightElement.tsx b/src/components/editor/previews/InputRightElement.tsx index 036ba29d28..e1b0c9def6 100644 --- a/src/components/editor/previews/InputRightElement.tsx +++ b/src/components/editor/previews/InputRightElement.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { useInteractive } from '../../../hooks/useInteractive' -import { useDropComponent } from '../../../hooks/useDropComponent' -import ComponentPreview from '../ComponentPreview' +import { useInteractive } from '~hooks/useInteractive' +import { useDropComponent } from '~hooks/useDropComponent' +import ComponentPreview from '~components/editor/ComponentPreview' import { InputRightElement } from '@chakra-ui/core' export const InputRightElementPreview: React.FC<{ component: IComponent }> = ({ diff --git a/src/components/editor/previews/StackPreview.tsx b/src/components/editor/previews/StackPreview.tsx index 34f95fa26d..d8bd004914 100644 --- a/src/components/editor/previews/StackPreview.tsx +++ b/src/components/editor/previews/StackPreview.tsx @@ -1,8 +1,8 @@ import React from 'react' import { Stack, Box } from '@chakra-ui/core' -import { useDropComponent } from '../../../hooks/useDropComponent' -import { useInteractive } from '../../../hooks/useInteractive' -import ComponentPreview from '../ComponentPreview' +import { useDropComponent } from '~hooks/useDropComponent' +import { useInteractive } from '~hooks/useInteractive' +import ComponentPreview from '~components/editor/ComponentPreview' const StackPreview: React.FC<{ component: IComponent }> = ({ component }) => { const { drop, isOver } = useDropComponent(component.id) diff --git a/src/components/errorBoundaries/AppErrorBoundary.tsx b/src/components/errorBoundaries/AppErrorBoundary.tsx index 8dcdaef561..f42c6faacd 100644 --- a/src/components/errorBoundaries/AppErrorBoundary.tsx +++ b/src/components/errorBoundaries/AppErrorBoundary.tsx @@ -1,8 +1,8 @@ import React, { Component } from 'react' import { Box, Flex, Stack, Button } from '@chakra-ui/core' import { FaBomb } from 'react-icons/fa' -import { gridStyles } from '../editor/Editor' -import { bugsnagClient } from '../../utils/bugsnag' +import { gridStyles } from '~components/editor/Editor' +import { bugsnagClient } from '~utils/bugsnag' type ErrorBoundaryState = { hasError: boolean diff --git a/src/components/errorBoundaries/EditorErrorBoundary.tsx b/src/components/errorBoundaries/EditorErrorBoundary.tsx index 8ce4ef847c..eee8f7baf6 100644 --- a/src/components/errorBoundaries/EditorErrorBoundary.tsx +++ b/src/components/errorBoundaries/EditorErrorBoundary.tsx @@ -3,8 +3,8 @@ import { connect } from 'react-redux' import { ActionCreators as UndoActionCreators } from 'redux-undo' import { Box, Flex, Stack, Button } from '@chakra-ui/core' import { FaBomb } from 'react-icons/fa' -import { gridStyles } from '../editor/Editor' -import { bugsnagClient } from '../../utils/bugsnag' +import { gridStyles } from '~components/editor/Editor' +import { bugsnagClient } from '~utils/bugsnag' type ErrorBoundaryState = { hasError: boolean diff --git a/src/components/headerMenu/ExportMenuItem.tsx b/src/components/headerMenu/ExportMenuItem.tsx index dc329692eb..8751bec87f 100644 --- a/src/components/headerMenu/ExportMenuItem.tsx +++ b/src/components/headerMenu/ExportMenuItem.tsx @@ -2,8 +2,8 @@ import React from 'react' import { useSelector } from 'react-redux' import { MenuItem, Box } from '@chakra-ui/core' import { FaSave } from 'react-icons/fa' -import { saveAsJSON } from '../../utils/import' -import { getComponents } from '../../core/selectors/components' +import { saveAsJSON } from '~utils/import' +import { getComponents } from '~core/selectors/components' const ExportMenuItem = () => { const components = useSelector(getComponents) diff --git a/src/components/headerMenu/ImportMenuItem.tsx b/src/components/headerMenu/ImportMenuItem.tsx index d8bd2b0da0..d8f5abe030 100644 --- a/src/components/headerMenu/ImportMenuItem.tsx +++ b/src/components/headerMenu/ImportMenuItem.tsx @@ -1,8 +1,8 @@ import React from 'react' import { MenuItem, Box } from '@chakra-ui/core' import { FiUpload } from 'react-icons/fi' -import { loadFromJSON } from '../../utils/import' -import useDispatch from '../../hooks/useDispatch' +import { loadFromJSON } from '~utils/import' +import useDispatch from '~hooks/useDispatch' const ImportMenuItem = () => { const dispatch = useDispatch() diff --git a/src/components/inspector/ChildrenInspector.tsx b/src/components/inspector/ChildrenInspector.tsx index a43b4c157b..7e2b87f522 100644 --- a/src/components/inspector/ChildrenInspector.tsx +++ b/src/components/inspector/ChildrenInspector.tsx @@ -1,8 +1,8 @@ import React from 'react' import { useSelector } from 'react-redux' -import { getSelectedComponentChildren } from '../../core/selectors/components' -import ElementsList from './elements-list/ElementsList' -import useDispatch from '../../hooks/useDispatch' +import { getSelectedComponentChildren } from '~core/selectors/components' +import ElementsList from '~components/inspector/elements-list/ElementsList' +import useDispatch from '~hooks/useDispatch' const ChildrenInspector = () => { const childrenComponent = useSelector(getSelectedComponentChildren) diff --git a/src/components/inspector/Inspector.tsx b/src/components/inspector/Inspector.tsx index f9adacb282..ebe404e325 100644 --- a/src/components/inspector/Inspector.tsx +++ b/src/components/inspector/Inspector.tsx @@ -19,24 +19,24 @@ import { useDisclosure, Text, } from '@chakra-ui/core' -import Panels from './panels/Panels' +import Panels from '~components/inspector/panels/Panels' import { GoRepo, GoCode } from 'react-icons/go' import { FiTrash2 } from 'react-icons/fi' import { IoMdRefresh } from 'react-icons/io' import { useSelector } from 'react-redux' -import useDispatch from '../../hooks/useDispatch' -import StylesPanel from './panels/StylesPanel' +import useDispatch from '~hooks/useDispatch' +import StylesPanel from '~components/inspector/panels/StylesPanel' import { getSelectedComponent, getComponents, getSelectedComponentId, getComponentNames, -} from '../../core/selectors/components' +} from '~core/selectors/components' import ActionButton from './ActionButton' -import { generateComponentCode, formatCode } from '../../utils/code' -import useClipboard from '../../hooks/useClipboard' -import { useInspectorUpdate } from '../../contexts/inspector-context' -import { componentsList } from '../../componentsList' +import { generateComponentCode, formatCode } from '~utils/code' +import useClipboard from '~hooks/useClipboard' +import { useInspectorUpdate } from '~contexts/inspector-context' +import { componentsList } from '~componentsList' const CodeActionButton = memo(() => { const [isLoading, setIsLoading] = useState(false) diff --git a/src/components/inspector/ParentInspector.tsx b/src/components/inspector/ParentInspector.tsx index a8c91c9a88..dac6be1d79 100644 --- a/src/components/inspector/ParentInspector.tsx +++ b/src/components/inspector/ParentInspector.tsx @@ -1,8 +1,8 @@ import React from 'react' import { useSelector } from 'react-redux' -import { getSelectedComponentParent } from '../../core/selectors/components' -import ElementListItem from './elements-list/ElementListItem' -import useDispatch from '../../hooks/useDispatch' +import { getSelectedComponentParent } from '~core/selectors/components' +import ElementListItem from '~components/inspector/elements-list/ElementListItem' +import useDispatch from '~hooks/useDispatch' const ParentInspector = () => { const parentComponent = useSelector(getSelectedComponentParent) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index 439ead936b..6233399c9f 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/src/components/inspector/controls/ChildrenControl.tsx @@ -1,11 +1,11 @@ import React, { useRef, useEffect, KeyboardEvent } from 'react' import { Input } from '@chakra-ui/core' -import FormControl from './FormControl' -import useDispatch from '../../../hooks/useDispatch' -import { useForm } from '../../../hooks/useForm' -import usePropsSelector from '../../../hooks/usePropsSelector' +import useDispatch from '~hooks/useDispatch' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' import { useSelector } from 'react-redux' -import { getInputTextFocused } from '../../../core/selectors/app' +import { getInputTextFocused } from '~core/selectors/app' +import FormControl from './FormControl' const ChildrenControl: React.FC = () => { const dispatch = useDispatch() diff --git a/src/components/inspector/controls/ColorsControl.tsx b/src/components/inspector/controls/ColorsControl.tsx index 3bec022503..ace7255fe6 100644 --- a/src/components/inspector/controls/ColorsControl.tsx +++ b/src/components/inspector/controls/ColorsControl.tsx @@ -22,10 +22,10 @@ import { useTheme, } from '@chakra-ui/core' import FormControl from './FormControl' -import { useForm } from '../../../hooks/useForm' +import { useForm } from '~hooks/useForm' import omit from 'lodash/omit' import ColorPicker from 'coloreact' -import usePropsSelector from '../../../hooks/usePropsSelector' +import usePropsSelector from '~hooks/usePropsSelector' type ColorControlPropsType = { name: string diff --git a/src/components/inspector/controls/IconControl.tsx b/src/components/inspector/controls/IconControl.tsx index 3f90066d42..b83bfbab39 100644 --- a/src/components/inspector/controls/IconControl.tsx +++ b/src/components/inspector/controls/IconControl.tsx @@ -1,9 +1,9 @@ import React, { ReactNode } from 'react' import { Icon, useTheme } from '@chakra-ui/core' import FormControl from './FormControl' -import { useForm } from '../../../hooks/useForm' -import usePropsSelector from '../../../hooks/usePropsSelector' -import InputSuggestion from '../inputs/InputSuggestion' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' +import InputSuggestion from '~components/inspector/inputs/InputSuggestion' import { ComboboxOption, ComboboxOptionText } from '@reach/combobox' import { Icons } from '@chakra-ui/core/dist/theme/icons' diff --git a/src/components/inspector/controls/NumberControl.tsx b/src/components/inspector/controls/NumberControl.tsx index 777b4a8e26..ae2127a0c3 100644 --- a/src/components/inspector/controls/NumberControl.tsx +++ b/src/components/inspector/controls/NumberControl.tsx @@ -1,8 +1,8 @@ import React, { ReactNode, useCallback } from 'react' import { NumberInput, NumberInputProps } from '@chakra-ui/core' import FormControl from './FormControl' -import { useForm } from '../../../hooks/useForm' -import usePropsSelector from '../../../hooks/usePropsSelector' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' type NumberControlPropsType = NumberInputProps & { name: string diff --git a/src/components/inspector/controls/SizeControl.tsx b/src/components/inspector/controls/SizeControl.tsx index 8eea2c6d4f..cfc8aeeb56 100644 --- a/src/components/inspector/controls/SizeControl.tsx +++ b/src/components/inspector/controls/SizeControl.tsx @@ -1,7 +1,7 @@ import React, { ReactNode } from 'react' import FormControl from './FormControl' import { Select } from '@chakra-ui/core' -import { useForm } from '../../../hooks/useForm' +import { useForm } from '~hooks/useForm' export type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' type SizeControlPropsType = { diff --git a/src/components/inspector/controls/SwitchControl.tsx b/src/components/inspector/controls/SwitchControl.tsx index b81b4d868d..fb992247da 100644 --- a/src/components/inspector/controls/SwitchControl.tsx +++ b/src/components/inspector/controls/SwitchControl.tsx @@ -1,17 +1,17 @@ -import React, { ReactNode } from "react"; -import { Switch } from "@chakra-ui/core"; -import FormControl from "./FormControl"; -import { useForm } from "../../../hooks/useForm"; -import usePropsSelector from "../../../hooks/usePropsSelector"; +import React, { ReactNode } from 'react' +import { Switch } from '@chakra-ui/core' +import FormControl from './FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' type SwitchControlPropsType = { - name: string; - label: string | ReactNode; -}; + name: string + label: string | ReactNode +} const SwitchControl: React.FC = ({ name, label }) => { - const { setValue } = useForm(); - const value = usePropsSelector(name); + const { setValue } = useForm() + const value = usePropsSelector(name) return ( @@ -23,7 +23,7 @@ const SwitchControl: React.FC = ({ name, label }) => { onChange={() => setValue(name, !value)} /> - ); -}; + ) +} -export default SwitchControl; +export default SwitchControl diff --git a/src/components/inspector/controls/TextControl.tsx b/src/components/inspector/controls/TextControl.tsx index e63868c548..05042d5635 100644 --- a/src/components/inspector/controls/TextControl.tsx +++ b/src/components/inspector/controls/TextControl.tsx @@ -1,8 +1,8 @@ import React, { ReactNode } from 'react' import { Input } from '@chakra-ui/core' import FormControl from './FormControl' -import { useForm } from '../../../hooks/useForm' -import usePropsSelector from '../../../hooks/usePropsSelector' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' type TextControlPropsType = { name: string diff --git a/src/components/inspector/controls/VariantsControl.tsx b/src/components/inspector/controls/VariantsControl.tsx index 61d7542738..6a9441c1d3 100644 --- a/src/components/inspector/controls/VariantsControl.tsx +++ b/src/components/inspector/controls/VariantsControl.tsx @@ -1,16 +1,16 @@ -import React, { ReactNode } from "react"; -import { Select } from "@chakra-ui/core"; -import FormControl from "./FormControl"; -import { useForm } from "../../../hooks/useForm"; +import React, { ReactNode } from 'react' +import { Select } from '@chakra-ui/core' +import FormControl from './FormControl' +import { useForm } from '~hooks/useForm' type VariantsControlPropsType = { - name: string; - label: string | ReactNode; - value: string; -}; + name: string + label: string | ReactNode + value: string +} const VariantsControl = (props: VariantsControlPropsType) => { - const { setValueFromEvent } = useForm(); + const { setValueFromEvent } = useForm() return ( @@ -19,7 +19,7 @@ const VariantsControl = (props: VariantsControlPropsType) => { onChange={setValueFromEvent} name={props.name} size="sm" - value={props.value || ""} + value={props.value || ''} > @@ -29,7 +29,7 @@ const VariantsControl = (props: VariantsControlPropsType) => { - ); -}; + ) +} -export default VariantsControl; +export default VariantsControl diff --git a/src/components/inspector/elements-list/ElementListItem.tsx b/src/components/inspector/elements-list/ElementListItem.tsx index e39274b930..45cc9dae83 100644 --- a/src/components/inspector/elements-list/ElementListItem.tsx +++ b/src/components/inspector/elements-list/ElementListItem.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react' import { Icon, PseudoBox, Text, PseudoBoxProps, Flex } from '@chakra-ui/core' -import ActionButton from '../ActionButton' +import ActionButton from '~components/inspector/ActionButton' interface Props extends Pick { opacity?: number diff --git a/src/components/inspector/inputs/InputSuggestion.tsx b/src/components/inspector/inputs/InputSuggestion.tsx index 2aea0860f3..22f55c3ded 100644 --- a/src/components/inspector/inputs/InputSuggestion.tsx +++ b/src/components/inspector/inputs/InputSuggestion.tsx @@ -6,7 +6,7 @@ import { ComboboxList, } from '@reach/combobox' import { Input } from '@chakra-ui/core' -import { useForm } from '../../../hooks/useForm' +import { useForm } from '~hooks/useForm' type FormControlPropType = { handleChange: any diff --git a/src/components/inspector/panels/CustomPropsPanel.tsx b/src/components/inspector/panels/CustomPropsPanel.tsx index 1614299ec6..c0ca4094fe 100644 --- a/src/components/inspector/panels/CustomPropsPanel.tsx +++ b/src/components/inspector/panels/CustomPropsPanel.tsx @@ -1,6 +1,6 @@ import React, { memo, useState, FormEvent, ChangeEvent, useRef } from 'react' -import { useInspectorState } from '../../../contexts/inspector-context' -import { getSelectedComponent } from '../../../core/selectors/components' +import { useInspectorState } from '~contexts/inspector-context' +import { getSelectedComponent } from '~core/selectors/components' import { useSelector } from 'react-redux' import { IoIosFlash } from 'react-icons/io' import { @@ -13,8 +13,8 @@ import { Input, ButtonGroup, } from '@chakra-ui/core' -import useDispatch from '../../../hooks/useDispatch' -import { useForm } from '../../../hooks/useForm' +import useDispatch from '~hooks/useDispatch' +import { useForm } from '~hooks/useForm' const SEPARATOR = '=' diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx index 8d8f877c04..91f7999263 100644 --- a/src/components/inspector/panels/Panels.tsx +++ b/src/components/inspector/panels/Panels.tsx @@ -1,53 +1,53 @@ import React, { memo } from 'react' -import ButtonPanel from './components/ButtonPanel' -import BadgePanel from './components/BadgePanel' -import IconPanel from './components/IconPanel' -import ImagePanel from './components/ImagePanel' -import BoxPanel from './components/BoxPanel' -import ChildrenControl from '../controls/ChildrenControl' -import AvatarPanel from './components/AvatarPanel' -import AvatarGroupPanel from './components/AvatarGroupPanel' -import AvatarBadgePanel from './components/AvatarBadgePanel' -import CheckboxPanel from './components/CheckboxPanel' -import IconButtonPanel from './components/IconButtonPanel' -import ProgressPanel from './components/ProgressPanel' -import LinkPanel from './components/LinkPanel' -import SpinnerPanel from './components/SpinnerPanel' -import CloseButtonPanel from './components/CloseButtonPanel' -import DividerPanel from './components/DividerPanel' -import CodePanel from './components/CodePanel' -import TextareaPanel from './components/TextareaPanel' -import CircularProgressPanel from './components/CircularProgressPanel' -import HeadingPanel from './components/HeadingPanel' -import TagPanel from './components/TagPanel' -import SimpleGridPanel from './components/SimpleGridPanel' -import SwitchPanel from './components/SwitchPanel' -import AlertPanel from './components/AlertPanel' -import AlertIconPanel from './components/AlertIconPanel' -import AlertTitlePanel from './components/AlertTitlePanel' -import AlertDescriptionPanel from './components/AlertDescriptionPanel' -import FlexPanel from './styles/FlexPanel' -import StackPanel from './components/StackPanel' -import FormControlPanel from './components/FormControlPanel' -import TabsPanel from './components/TabsPanel' -import InputPanel from './components/InputPanel' -import RadioPanel from './components/RadioPanel' -import RadioGroupPanel from './components/RadioGroupPanel' -import SelectPanel from './components/SelectPanel' -import ListPanel from './components/ListPanel' -import ListItemPanel from './components/ListItemPanel' -import ListIconPanel from './components/ListIconPanel' -import AccordionItemPanel from './components/AccordionItemPanel' -import AccordionPanel from './components/AccordionPanel' -import FormLabelPanel from './components/FormLabelPanel' -import FormHelperTextPanel from './components/FormHelperTextPanel' -import FormErrorMessagePanel from './components/FormErrorMessagePanel' -import GridPanel from './components/GridPanel' -import NumberInputPanel from './components/NumberInputPanel' -import AspectRatioPanel from './components/AspectRatioPanel' -import BreadcrumbPanel from './components/BreadcrumbPanel' -import BreadcrumbItemPanel from './components/BreadcrumbItemPanel' +import ButtonPanel from '~components/inspector/panels/components/ButtonPanel' +import BadgePanel from '~components/inspector/panels/components/BadgePanel' +import IconPanel from '~components/inspector/panels/components/IconPanel' +import ImagePanel from '~components/inspector/panels/components/ImagePanel' +import BoxPanel from '~components/inspector/panels/components/BoxPanel' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import AvatarPanel from '~components/inspector/panels/components/AvatarPanel' +import AvatarGroupPanel from '~components/inspector/panels/components/AvatarGroupPanel' +import AvatarBadgePanel from '~components/inspector/panels/components/AvatarBadgePanel' +import CheckboxPanel from '~components/inspector/panels/components/CheckboxPanel' +import IconButtonPanel from '~components/inspector/panels/components/IconButtonPanel' +import ProgressPanel from '~components/inspector/panels/components/ProgressPanel' +import LinkPanel from '~components/inspector/panels/components/LinkPanel' +import SpinnerPanel from '~components/inspector/panels/components/SpinnerPanel' +import CloseButtonPanel from '~components/inspector/panels/components/CloseButtonPanel' +import DividerPanel from '~components/inspector/panels/components/DividerPanel' +import CodePanel from '~components/inspector/panels/components/CodePanel' +import TextareaPanel from '~components/inspector/panels/components/TextareaPanel' +import CircularProgressPanel from '~components/inspector/panels/components/CircularProgressPanel' +import HeadingPanel from '~components/inspector/panels/components/HeadingPanel' +import TagPanel from '~components/inspector/panels/components/TagPanel' +import SimpleGridPanel from '~components/inspector/panels/components/SimpleGridPanel' +import SwitchPanel from '~components/inspector/panels/components/SwitchPanel' +import AlertPanel from '~components/inspector/panels/components/AlertPanel' +import AlertIconPanel from '~components/inspector/panels/components/AlertIconPanel' +import AlertTitlePanel from '~components/inspector/panels/components/AlertTitlePanel' +import AlertDescriptionPanel from '~components/inspector/panels/components/AlertDescriptionPanel' +import FlexPanel from '~components/inspector/panels/styles/FlexPanel' +import StackPanel from '~components/inspector/panels/components/StackPanel' +import FormControlPanel from '~components/inspector/panels/components/FormControlPanel' +import TabsPanel from '~components/inspector/panels/components/TabsPanel' +import InputPanel from '~components/inspector/panels/components/InputPanel' +import RadioPanel from '~components/inspector/panels/components/RadioPanel' +import RadioGroupPanel from '~components/inspector/panels/components/RadioGroupPanel' +import SelectPanel from '~components/inspector/panels/components/SelectPanel' +import ListPanel from '~components/inspector/panels/components/ListPanel' +import ListItemPanel from '~components/inspector/panels/components/ListItemPanel' +import ListIconPanel from '~components/inspector/panels/components/ListIconPanel' +import AccordionItemPanel from '~components/inspector/panels/components/AccordionItemPanel' +import AccordionPanel from '~components/inspector/panels/components/AccordionPanel' +import FormLabelPanel from '~components/inspector/panels/components/FormLabelPanel' +import FormHelperTextPanel from '~components/inspector/panels/components/FormHelperTextPanel' +import FormErrorMessagePanel from '~components/inspector/panels/components/FormErrorMessagePanel' +import GridPanel from '~components/inspector/panels/components/GridPanel' +import NumberInputPanel from '~components/inspector/panels/components/NumberInputPanel' +import AspectRatioPanel from '~components/inspector/panels/components/AspectRatioPanel' +import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel' +import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel' const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({ component, diff --git a/src/components/inspector/panels/StylesPanel.tsx b/src/components/inspector/panels/StylesPanel.tsx index 7c2e993a4f..abcef3b17a 100644 --- a/src/components/inspector/panels/StylesPanel.tsx +++ b/src/components/inspector/panels/StylesPanel.tsx @@ -1,16 +1,16 @@ import React, { memo } from 'react' import { Accordion } from '@chakra-ui/core' -import PaddingPanel from '../panels/styles/PaddingPanel' -import DimensionPanel from '../panels/styles/DimensionPanel' -import BorderPanel from '../panels/styles/BorderPanel' -import DisplayPanel from '../panels/styles/DisplayPanel' -import TextPanel from '../panels/styles/TextPanel' -import AccordionContainer from '../AccordionContainer' -import ColorsControl from '../controls/ColorsControl' +import PaddingPanel from '~components/inspector/panels/styles/PaddingPanel' +import DimensionPanel from '~components/inspector/panels/styles/DimensionPanel' +import BorderPanel from '~components/inspector/panels/styles/BorderPanel' +import DisplayPanel from '~components/inspector/panels/styles/DisplayPanel' +import TextPanel from '~components/inspector/panels/styles/TextPanel' +import AccordionContainer from '~components/inspector/AccordionContainer' +import ColorsControl from '~components/inspector/controls/ColorsControl' import EffectsPanel from './styles/EffectsPanel' -import ChildrenInspector from '../ChildrenInspector' -import ParentInspector from '../ParentInspector' +import ChildrenInspector from '~components/inspector/ChildrenInspector' +import ParentInspector from '~components/inspector/ParentInspector' import CustomPropsPanel from './CustomPropsPanel' interface Props { diff --git a/src/components/inspector/panels/components/AccordionItemPanel.tsx b/src/components/inspector/panels/components/AccordionItemPanel.tsx index 5de5e47ad6..6e3a739082 100644 --- a/src/components/inspector/panels/components/AccordionItemPanel.tsx +++ b/src/components/inspector/panels/components/AccordionItemPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import SwitchControl from '../../controls/SwitchControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' const AccordionItemPanel = () => { return ( diff --git a/src/components/inspector/panels/components/AccordionPanel.tsx b/src/components/inspector/panels/components/AccordionPanel.tsx index 485213b318..e76d818cc0 100644 --- a/src/components/inspector/panels/components/AccordionPanel.tsx +++ b/src/components/inspector/panels/components/AccordionPanel.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import SwitchControl from "../../controls/SwitchControl"; +import React from 'react' +import SwitchControl from '~components/inspector/controls/SwitchControl' const AccordionPanel = () => { return ( @@ -7,7 +7,7 @@ const AccordionPanel = () => { - ); -}; + ) +} -export default AccordionPanel; +export default AccordionPanel diff --git a/src/components/inspector/panels/components/AlertDescriptionPanel.tsx b/src/components/inspector/panels/components/AlertDescriptionPanel.tsx index ac9c5e1f15..6bbdf57107 100644 --- a/src/components/inspector/panels/components/AlertDescriptionPanel.tsx +++ b/src/components/inspector/panels/components/AlertDescriptionPanel.tsx @@ -1,8 +1,8 @@ -import React from "react"; -import ChildrenControl from "../../controls/ChildrenControl"; +import React from 'react' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const AlertDescriptionPanel = () => { - return ; -}; + return +} -export default AlertDescriptionPanel; +export default AlertDescriptionPanel diff --git a/src/components/inspector/panels/components/AlertIconPanel.tsx b/src/components/inspector/panels/components/AlertIconPanel.tsx index 16c352a2b0..71b581bbde 100644 --- a/src/components/inspector/panels/components/AlertIconPanel.tsx +++ b/src/components/inspector/panels/components/AlertIconPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import TextControl from '../../controls/TextControl' +import TextControl from '~components/inspector/controls/TextControl' const AlertIconPanel = () => { return diff --git a/src/components/inspector/panels/components/AlertPanel.tsx b/src/components/inspector/panels/components/AlertPanel.tsx index 5a6e92ff8e..cb0d7f009d 100644 --- a/src/components/inspector/panels/components/AlertPanel.tsx +++ b/src/components/inspector/panels/components/AlertPanel.tsx @@ -1,13 +1,13 @@ -import React, { memo } from "react"; -import { Select } from "@chakra-ui/core"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import React, { memo } from 'react' +import { Select } from '@chakra-ui/core' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const AlertPanel = () => { - const { setValueFromEvent } = useForm(); - const variant = usePropsSelector("variant"); - const status = usePropsSelector("status"); + const { setValueFromEvent } = useForm() + const variant = usePropsSelector('variant') + const status = usePropsSelector('status') return ( <> @@ -16,7 +16,7 @@ const AlertPanel = () => { name="status" id="status" size="sm" - value={status || "info"} + value={status || 'info'} onChange={setValueFromEvent} > @@ -31,7 +31,7 @@ const AlertPanel = () => { name="variant" id="variant" size="sm" - value={variant || "subtle"} + value={variant || 'subtle'} onChange={setValueFromEvent} > @@ -41,7 +41,7 @@ const AlertPanel = () => { - ); -}; + ) +} -export default memo(AlertPanel); +export default memo(AlertPanel) diff --git a/src/components/inspector/panels/components/AlertTitlePanel.tsx b/src/components/inspector/panels/components/AlertTitlePanel.tsx index 81b93955cc..d787ca3abd 100644 --- a/src/components/inspector/panels/components/AlertTitlePanel.tsx +++ b/src/components/inspector/panels/components/AlertTitlePanel.tsx @@ -1,17 +1,17 @@ -import React, { memo } from "react"; -import SizeControl from "../../controls/SizeControl"; -import ChildrenControl from "../../controls/ChildrenControl"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import React, { memo } from 'react' +import SizeControl from '~components/inspector/controls/SizeControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import usePropsSelector from '~hooks/usePropsSelector' const AlertTitlePanel = () => { - const fontSize = usePropsSelector("fontSize"); + const fontSize = usePropsSelector('fontSize') return ( <> - ); -}; + ) +} -export default memo(AlertTitlePanel); +export default memo(AlertTitlePanel) diff --git a/src/components/inspector/panels/components/AspectRatioPanel.tsx b/src/components/inspector/panels/components/AspectRatioPanel.tsx index 5aa56afa68..25ebed6f5c 100644 --- a/src/components/inspector/panels/components/AspectRatioPanel.tsx +++ b/src/components/inspector/panels/components/AspectRatioPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import NumberControl from '../../controls/NumberControl' +import NumberControl from '~components/inspector/controls/NumberControl' const AspectRatioPanel = () => { return ( diff --git a/src/components/inspector/panels/components/AvatarBadgePanel.tsx b/src/components/inspector/panels/components/AvatarBadgePanel.tsx index 59b5d2462f..4ce41ac716 100644 --- a/src/components/inspector/panels/components/AvatarBadgePanel.tsx +++ b/src/components/inspector/panels/components/AvatarBadgePanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import ColorsControl from '../../controls/ColorsControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' const AvatarPanel = () => ( <> diff --git a/src/components/inspector/panels/components/AvatarGroupPanel.tsx b/src/components/inspector/panels/components/AvatarGroupPanel.tsx index b6720d9182..b72f66491b 100644 --- a/src/components/inspector/panels/components/AvatarGroupPanel.tsx +++ b/src/components/inspector/panels/components/AvatarGroupPanel.tsx @@ -1,5 +1,5 @@ -import React, { memo } from "react"; -import FormControl from "../../controls/FormControl"; +import React, { memo } from 'react' +import FormControl from '~components/inspector/controls/FormControl' import { Slider, SliderTrack, @@ -10,17 +10,17 @@ import { NumberIncrementStepper, NumberDecrementStepper, SliderFilledTrack, - Select -} from "@chakra-ui/core"; -import { useForm } from "../../../../hooks/useForm"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; + Select, +} from '@chakra-ui/core' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const AvatarGroupPanel = () => { - const { setValue, setValueFromEvent } = useForm(); + const { setValue, setValueFromEvent } = useForm() - const size = usePropsSelector("size"); - const spacing = usePropsSelector("spacing"); - const max = usePropsSelector("max"); + const size = usePropsSelector('size') + const spacing = usePropsSelector('spacing') + const max = usePropsSelector('max') return ( <> @@ -29,7 +29,7 @@ const AvatarGroupPanel = () => { name="size" id="size" size="sm" - value={size || ""} + value={size || ''} onChange={setValueFromEvent} > @@ -44,7 +44,7 @@ const AvatarGroupPanel = () => { setValue("spacing", value)} + onChange={value => setValue('spacing', value)} min={-3} max={6} step={1} @@ -59,7 +59,7 @@ const AvatarGroupPanel = () => { setValue("max", value)} + onChange={value => setValue('max', value)} value={max} min={1} > @@ -71,7 +71,7 @@ const AvatarGroupPanel = () => { - ); -}; + ) +} -export default memo(AvatarGroupPanel); +export default memo(AvatarGroupPanel) diff --git a/src/components/inspector/panels/components/AvatarPanel.tsx b/src/components/inspector/panels/components/AvatarPanel.tsx index f13c9c6207..0f296b1512 100644 --- a/src/components/inspector/panels/components/AvatarPanel.tsx +++ b/src/components/inspector/panels/components/AvatarPanel.tsx @@ -1,10 +1,10 @@ import React, { memo } from 'react' import { Select } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' const AvatarPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/BadgePanel.tsx b/src/components/inspector/panels/components/BadgePanel.tsx index 47343600cf..d5a4e8bb25 100644 --- a/src/components/inspector/panels/components/BadgePanel.tsx +++ b/src/components/inspector/panels/components/BadgePanel.tsx @@ -1,15 +1,15 @@ -import React, { memo } from "react"; -import { Select } from "@chakra-ui/core"; +import React, { memo } from 'react' +import { Select } from '@chakra-ui/core' -import ColorsControl from "../../controls/ColorsControl"; -import ChildrenControl from "../../controls/ChildrenControl"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import ColorsControl from '~components/inspector/controls/ColorsControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const BadgePanel = () => { - const { setValueFromEvent } = useForm(); - const variant = usePropsSelector("variant"); + const { setValueFromEvent } = useForm() + const variant = usePropsSelector('variant') return ( <> @@ -21,7 +21,7 @@ const BadgePanel = () => { onChange={setValueFromEvent} name="variant" size="sm" - value={variant || ""} + value={variant || ''} > @@ -31,7 +31,7 @@ const BadgePanel = () => { - ); -}; + ) +} -export default memo(BadgePanel); +export default memo(BadgePanel) diff --git a/src/components/inspector/panels/components/BoxPanel.tsx b/src/components/inspector/panels/components/BoxPanel.tsx index a55a5a81a0..1c2add7f0a 100644 --- a/src/components/inspector/panels/components/BoxPanel.tsx +++ b/src/components/inspector/panels/components/BoxPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import ColorsControl from '../../controls/ColorsControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' const BoxPanel = () => ( { return ( diff --git a/src/components/inspector/panels/components/BreadcrumbPanel.tsx b/src/components/inspector/panels/components/BreadcrumbPanel.tsx index b398ae760d..3debd3ca71 100644 --- a/src/components/inspector/panels/components/BreadcrumbPanel.tsx +++ b/src/components/inspector/panels/components/BreadcrumbPanel.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react' -import TextControl from '../../controls/TextControl' -import SwitchControl from '../../controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' const BreadcrumbPanel = () => { return ( diff --git a/src/components/inspector/panels/components/ButtonPanel.tsx b/src/components/inspector/panels/components/ButtonPanel.tsx index d4972a50c0..90baf8ca32 100644 --- a/src/components/inspector/panels/components/ButtonPanel.tsx +++ b/src/components/inspector/panels/components/ButtonPanel.tsx @@ -1,12 +1,12 @@ import React, { memo } from 'react' -import ColorsControl from '../../controls/ColorsControl' -import SizeControl from '../../controls/SizeControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import SizeControl from '~components/inspector/controls/SizeControl' import { Select } from '@chakra-ui/core' -import ChildrenControl from '../../controls/ChildrenControl' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import IconControl from '../../controls/IconControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' +import IconControl from '~components/inspector/controls/IconControl' const ButtonPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/CheckboxPanel.tsx b/src/components/inspector/panels/components/CheckboxPanel.tsx index 7e7fba0cdb..861c39bf82 100644 --- a/src/components/inspector/panels/components/CheckboxPanel.tsx +++ b/src/components/inspector/panels/components/CheckboxPanel.tsx @@ -1,11 +1,11 @@ import React, { memo } from 'react' -import ColorsControl from '../../controls/ColorsControl' -import ChildrenControl from '../../controls/ChildrenControl' -import { useForm } from '../../../../hooks/useForm' -import FormControl from '../../controls/FormControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import { useForm } from '~hooks/useForm' +import FormControl from '~components/inspector/controls/FormControl' import { Select } from '@chakra-ui/core' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SwitchControl from '../../controls/SwitchControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' const CheckboxPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/CircularProgressPanel.tsx b/src/components/inspector/panels/components/CircularProgressPanel.tsx index 6a53f46c84..aa6c7b4e56 100644 --- a/src/components/inspector/panels/components/CircularProgressPanel.tsx +++ b/src/components/inspector/panels/components/CircularProgressPanel.tsx @@ -5,12 +5,12 @@ import { SliderFilledTrack, SliderThumb, } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import ColorsControl from '../../controls/ColorsControl' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' const CircularProgressPanel = () => { const { setValue } = useForm() diff --git a/src/components/inspector/panels/components/CloseButtonPanel.tsx b/src/components/inspector/panels/components/CloseButtonPanel.tsx index a436f02c67..d508167e93 100644 --- a/src/components/inspector/panels/components/CloseButtonPanel.tsx +++ b/src/components/inspector/panels/components/CloseButtonPanel.tsx @@ -1,14 +1,14 @@ -import React from "react"; -import { Select } from "@chakra-ui/core"; -import ColorsControl from "../../controls/ColorsControl"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import React from 'react' +import { Select } from '@chakra-ui/core' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const CloseButtonPanel = () => { - const { setValueFromEvent } = useForm(); + const { setValueFromEvent } = useForm() - const size = usePropsSelector("size"); + const size = usePropsSelector('size') return ( <> @@ -17,7 +17,7 @@ const CloseButtonPanel = () => { name="size" id="size" size="sm" - value={size || ""} + value={size || ''} onChange={setValueFromEvent} > @@ -28,7 +28,7 @@ const CloseButtonPanel = () => { - ); -}; + ) +} -export default CloseButtonPanel; +export default CloseButtonPanel diff --git a/src/components/inspector/panels/components/CodePanel.tsx b/src/components/inspector/panels/components/CodePanel.tsx index 5cbdca2224..d3812b13ca 100644 --- a/src/components/inspector/panels/components/CodePanel.tsx +++ b/src/components/inspector/panels/components/CodePanel.tsx @@ -1,6 +1,6 @@ -import React, { memo } from "react"; -import ColorsControl from "../../controls/ColorsControl"; -import ChildrenControl from "../../controls/ChildrenControl"; +import React, { memo } from 'react' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const CodePanel = () => { return ( @@ -8,7 +8,7 @@ const CodePanel = () => { - ); -}; + ) +} -export default memo(CodePanel); +export default memo(CodePanel) diff --git a/src/components/inspector/panels/components/DividerPanel.tsx b/src/components/inspector/panels/components/DividerPanel.tsx index 289c52502a..7ed494ea50 100644 --- a/src/components/inspector/panels/components/DividerPanel.tsx +++ b/src/components/inspector/panels/components/DividerPanel.tsx @@ -1,13 +1,13 @@ -import React, { memo } from "react"; -import { Select } from "@chakra-ui/core"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import ColorsControl from "../../controls/ColorsControl"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import React, { memo } from 'react' +import { Select } from '@chakra-ui/core' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import usePropsSelector from '~hooks/usePropsSelector' const DividerPanel = () => { - const { setValueFromEvent } = useForm(); - const orientation = usePropsSelector("orientation"); + const { setValueFromEvent } = useForm() + const orientation = usePropsSelector('orientation') return ( <> @@ -16,7 +16,7 @@ const DividerPanel = () => { name="orientation" id="orientation" size="sm" - value={orientation || "horizontal"} + value={orientation || 'horizontal'} onChange={setValueFromEvent} > @@ -30,7 +30,7 @@ const DividerPanel = () => { enableHues /> - ); -}; + ) +} -export default memo(DividerPanel); +export default memo(DividerPanel) diff --git a/src/components/inspector/panels/components/FormControlPanel.tsx b/src/components/inspector/panels/components/FormControlPanel.tsx index e1314eed08..42169c5312 100644 --- a/src/components/inspector/panels/components/FormControlPanel.tsx +++ b/src/components/inspector/panels/components/FormControlPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import SwitchControl from '../../controls/SwitchControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' const FormControlPanel = () => { return ( diff --git a/src/components/inspector/panels/components/FormErrorMessagePanel.tsx b/src/components/inspector/panels/components/FormErrorMessagePanel.tsx index d0a4c644c6..59c2650509 100644 --- a/src/components/inspector/panels/components/FormErrorMessagePanel.tsx +++ b/src/components/inspector/panels/components/FormErrorMessagePanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ChildrenControl from '../../controls/ChildrenControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const FormErrorMessagePanel = () => { return ( diff --git a/src/components/inspector/panels/components/FormHelperTextPanel.tsx b/src/components/inspector/panels/components/FormHelperTextPanel.tsx index 48af89c361..c7552da65d 100644 --- a/src/components/inspector/panels/components/FormHelperTextPanel.tsx +++ b/src/components/inspector/panels/components/FormHelperTextPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ChildrenControl from '../../controls/ChildrenControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const FormHelperTextPanel = () => { return ( diff --git a/src/components/inspector/panels/components/FormLabelPanel.tsx b/src/components/inspector/panels/components/FormLabelPanel.tsx index 9b942fc904..bd866e4594 100644 --- a/src/components/inspector/panels/components/FormLabelPanel.tsx +++ b/src/components/inspector/panels/components/FormLabelPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import ChildrenControl from '../../controls/ChildrenControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const FormLabelPanel = () => { return ( diff --git a/src/components/inspector/panels/components/GridPanel.tsx b/src/components/inspector/panels/components/GridPanel.tsx index ace9b8a9bd..2c462de2fd 100644 --- a/src/components/inspector/panels/components/GridPanel.tsx +++ b/src/components/inspector/panels/components/GridPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import TextControl from '../../controls/TextControl' +import TextControl from '~components/inspector/controls/TextControl' const GridPanel = () => { return ( diff --git a/src/components/inspector/panels/components/HeadingPanel.tsx b/src/components/inspector/panels/components/HeadingPanel.tsx index 89a43921df..f6d758375f 100644 --- a/src/components/inspector/panels/components/HeadingPanel.tsx +++ b/src/components/inspector/panels/components/HeadingPanel.tsx @@ -1,16 +1,16 @@ -import React, { memo } from "react"; -import { Select } from "@chakra-ui/core"; -import { useForm } from "../../../../hooks/useForm"; -import FormControl from "../../controls/FormControl"; -import ChildrenControl from "../../controls/ChildrenControl"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; -import SwitchControl from "../../controls/SwitchControl"; +import React, { memo } from 'react' +import { Select } from '@chakra-ui/core' +import { useForm } from '~hooks/useForm' +import FormControl from '~components/inspector/controls/FormControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' const HeadingPanel = () => { - const { setValueFromEvent } = useForm(); + const { setValueFromEvent } = useForm() - const size = usePropsSelector("size"); - const as = usePropsSelector("as"); + const size = usePropsSelector('size') + const as = usePropsSelector('as') return ( <> @@ -34,7 +34,7 @@ const HeadingPanel = () => { { { { { - ); -}; + ) +} -export default ImagePanel; +export default ImagePanel diff --git a/src/components/inspector/panels/components/InputPanel.tsx b/src/components/inspector/panels/components/InputPanel.tsx index 4ad1c41120..b1225482da 100644 --- a/src/components/inspector/panels/components/InputPanel.tsx +++ b/src/components/inspector/panels/components/InputPanel.tsx @@ -1,11 +1,11 @@ import React, { memo } from 'react' -import { useForm } from '../../../../hooks/useForm' +import { useForm } from '~hooks/useForm' import { Select } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SizeControl from '../../controls/SizeControl' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' +import FormControl from '~components/inspector/controls/FormControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SizeControl from '~components/inspector/controls/SizeControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' const InputPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/LinkPanel.tsx b/src/components/inspector/panels/components/LinkPanel.tsx index a39a1e66b2..cbc9bda6ce 100644 --- a/src/components/inspector/panels/components/LinkPanel.tsx +++ b/src/components/inspector/panels/components/LinkPanel.tsx @@ -1,7 +1,7 @@ import React, { memo } from 'react' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' -import ChildrenControl from '../../controls/ChildrenControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const LinkPanel = () => { return ( diff --git a/src/components/inspector/panels/components/ListIconPanel.tsx b/src/components/inspector/panels/components/ListIconPanel.tsx index fffa2eddee..ba817a9581 100644 --- a/src/components/inspector/panels/components/ListIconPanel.tsx +++ b/src/components/inspector/panels/components/ListIconPanel.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react' -import ColorsControl from '../../controls/ColorsControl' -import IconControl from '../../controls/IconControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import IconControl from '~components/inspector/controls/IconControl' const ListIconPanel = () => { return ( diff --git a/src/components/inspector/panels/components/ListItemPanel.tsx b/src/components/inspector/panels/components/ListItemPanel.tsx index 1d60b19509..9ad9a254be 100644 --- a/src/components/inspector/panels/components/ListItemPanel.tsx +++ b/src/components/inspector/panels/components/ListItemPanel.tsx @@ -1,12 +1,12 @@ -import React, { memo } from "react"; -import ChildrenControl from "../../controls/ChildrenControl"; +import React, { memo } from 'react' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' const ListItemPanel = () => { return ( <> - ); -}; + ) +} -export default memo(ListItemPanel); +export default memo(ListItemPanel) diff --git a/src/components/inspector/panels/components/ListPanel.tsx b/src/components/inspector/panels/components/ListPanel.tsx index 0c6c337286..9e00895e39 100644 --- a/src/components/inspector/panels/components/ListPanel.tsx +++ b/src/components/inspector/panels/components/ListPanel.tsx @@ -1,12 +1,12 @@ -import React, { memo } from "react"; -import FormControl from "../../controls/FormControl"; -import { Select } from "@chakra-ui/core"; -import { useForm } from "../../../../hooks/useForm"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import React, { memo } from 'react' +import FormControl from '~components/inspector/controls/FormControl' +import { Select } from '@chakra-ui/core' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const CodePanel = () => { - const { setValueFromEvent } = useForm(); - const styleType = usePropsSelector("styleType"); + const { setValueFromEvent } = useForm() + const styleType = usePropsSelector('styleType') return ( <> @@ -15,7 +15,7 @@ const CodePanel = () => { name="styleType" id="styleType" size="sm" - value={styleType || "md"} + value={styleType || 'md'} onChange={setValueFromEvent} > @@ -29,7 +29,7 @@ const CodePanel = () => { - ); -}; + ) +} -export default memo(CodePanel); +export default memo(CodePanel) diff --git a/src/components/inspector/panels/components/NumberInputPanel.tsx b/src/components/inspector/panels/components/NumberInputPanel.tsx index 8785de156a..c7df010055 100644 --- a/src/components/inspector/panels/components/NumberInputPanel.tsx +++ b/src/components/inspector/panels/components/NumberInputPanel.tsx @@ -1,9 +1,9 @@ import React, { memo } from 'react' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SizeControl from '../../controls/SizeControl' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' -import NumberControl from '../../controls/NumberControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SizeControl from '~components/inspector/controls/SizeControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' +import NumberControl from '~components/inspector/controls/NumberControl' const NumberInputPanel = () => { const size = usePropsSelector('size') diff --git a/src/components/inspector/panels/components/ProgressPanel.tsx b/src/components/inspector/panels/components/ProgressPanel.tsx index 0f04514199..bfd102c3ab 100644 --- a/src/components/inspector/panels/components/ProgressPanel.tsx +++ b/src/components/inspector/panels/components/ProgressPanel.tsx @@ -5,12 +5,12 @@ import { SliderFilledTrack, SliderThumb, } from '@chakra-ui/core' -import ColorsControl from '../../controls/ColorsControl' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import SizeControl from '../../controls/SizeControl' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SwitchControl from '../../controls/SwitchControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import SizeControl from '~components/inspector/controls/SizeControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' const ProgressPanel = () => { const { setValue } = useForm() diff --git a/src/components/inspector/panels/components/RadioGroupPanel.tsx b/src/components/inspector/panels/components/RadioGroupPanel.tsx index 2d9b6199db..6de452acd8 100644 --- a/src/components/inspector/panels/components/RadioGroupPanel.tsx +++ b/src/components/inspector/panels/components/RadioGroupPanel.tsx @@ -1,27 +1,27 @@ -import React, { memo } from "react"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; -import SwitchControl from "../../controls/SwitchControl"; -import { Input } from "@chakra-ui/core"; -import { useForm } from "../../../../hooks/useForm"; -import FormControl from "../../controls/FormControl"; +import React, { memo } from 'react' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import { Input } from '@chakra-ui/core' +import { useForm } from '~hooks/useForm' +import FormControl from '~components/inspector/controls/FormControl' const RadioGroupPanel = () => { - const { setValueFromEvent } = useForm(); - const spacing = usePropsSelector("spacing"); + const { setValueFromEvent } = useForm() + const spacing = usePropsSelector('spacing') return ( <> - ); -}; + ) +} -export default memo(RadioGroupPanel); +export default memo(RadioGroupPanel) diff --git a/src/components/inspector/panels/components/RadioPanel.tsx b/src/components/inspector/panels/components/RadioPanel.tsx index 18a6e020ce..bd72695900 100644 --- a/src/components/inspector/panels/components/RadioPanel.tsx +++ b/src/components/inspector/panels/components/RadioPanel.tsx @@ -1,8 +1,8 @@ import React, { memo } from 'react' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SizeControl from '../../controls/SizeControl' -import ColorsControl from '../../controls/ColorsControl' -import SwitchControl from '../../controls/SwitchControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SizeControl from '~components/inspector/controls/SizeControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' const RadioPanel = () => { const size = usePropsSelector('size') diff --git a/src/components/inspector/panels/components/SelectPanel.tsx b/src/components/inspector/panels/components/SelectPanel.tsx index 6cb450d80e..a7ada1cb17 100644 --- a/src/components/inspector/panels/components/SelectPanel.tsx +++ b/src/components/inspector/panels/components/SelectPanel.tsx @@ -1,11 +1,11 @@ import React, { memo } from 'react' import { Select } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' -import IconControl from '../../controls/IconControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' +import IconControl from '~components/inspector/controls/IconControl' const SelectPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/SimpleGridPanel.tsx b/src/components/inspector/panels/components/SimpleGridPanel.tsx index 7f8c629185..dc90907a36 100644 --- a/src/components/inspector/panels/components/SimpleGridPanel.tsx +++ b/src/components/inspector/panels/components/SimpleGridPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import TextControl from '../../controls/TextControl' +import TextControl from '~components/inspector/controls/TextControl' const SimpleGridPanel = () => { return ( diff --git a/src/components/inspector/panels/components/SpinnerPanel.tsx b/src/components/inspector/panels/components/SpinnerPanel.tsx index 07c433fd7a..94403be0be 100644 --- a/src/components/inspector/panels/components/SpinnerPanel.tsx +++ b/src/components/inspector/panels/components/SpinnerPanel.tsx @@ -1,10 +1,10 @@ import React, { memo } from 'react' import { Select } from '@chakra-ui/core' -import ColorsControl from '../../controls/ColorsControl' -import { useForm } from '../../../../hooks/useForm' -import FormControl from '../../controls/FormControl' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import TextControl from '../../controls/TextControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import { useForm } from '~hooks/useForm' +import FormControl from '~components/inspector/controls/FormControl' +import usePropsSelector from '~hooks/usePropsSelector' +import TextControl from '~components/inspector/controls/TextControl' const SpinnerPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/StackPanel.tsx b/src/components/inspector/panels/components/StackPanel.tsx index 40e29f5183..99ed90985a 100644 --- a/src/components/inspector/panels/components/StackPanel.tsx +++ b/src/components/inspector/panels/components/StackPanel.tsx @@ -1,10 +1,10 @@ import React from 'react' -import SwitchControl from '../../controls/SwitchControl' -import TextControl from '../../controls/TextControl' -import FormControl from '../../controls/FormControl' +import SwitchControl from '~components/inspector/controls/SwitchControl' +import TextControl from '~components/inspector/controls/TextControl' +import FormControl from '~components/inspector/controls/FormControl' import { Select } from '@chakra-ui/core' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import { useForm } from '../../../../hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' +import { useForm } from '~hooks/useForm' const StackPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/components/SwitchPanel.tsx b/src/components/inspector/panels/components/SwitchPanel.tsx index 3ea4f02114..c3ed338dd4 100644 --- a/src/components/inspector/panels/components/SwitchPanel.tsx +++ b/src/components/inspector/panels/components/SwitchPanel.tsx @@ -1,14 +1,14 @@ -import React, { memo } from "react"; -import { Select } from "@chakra-ui/core"; -import ColorsControl from "../../controls/ColorsControl"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; -import SwitchControl from "../../controls/SwitchControl"; +import React, { memo } from 'react' +import { Select } from '@chakra-ui/core' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' const SwitchPanel = () => { - const { setValueFromEvent } = useForm(); - const size = usePropsSelector("size"); + const { setValueFromEvent } = useForm() + const size = usePropsSelector('size') return ( <> @@ -19,7 +19,7 @@ const SwitchPanel = () => { name="size" id="size" size="sm" - value={size || ""} + value={size || ''} onChange={setValueFromEvent} > @@ -30,7 +30,7 @@ const SwitchPanel = () => { - ); -}; + ) +} -export default memo(SwitchPanel); +export default memo(SwitchPanel) diff --git a/src/components/inspector/panels/components/TabsPanel.tsx b/src/components/inspector/panels/components/TabsPanel.tsx index 6e6ebfd0f3..0ba959c43c 100644 --- a/src/components/inspector/panels/components/TabsPanel.tsx +++ b/src/components/inspector/panels/components/TabsPanel.tsx @@ -1,17 +1,17 @@ -import React from "react"; -import { Select } from "@chakra-ui/core"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import ColorsControl from "../../controls/ColorsControl"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; -import SwitchControl from "../../controls/SwitchControl"; +import React from 'react' +import { Select } from '@chakra-ui/core' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' const TabsPanel = () => { - const { setValueFromEvent } = useForm(); + const { setValueFromEvent } = useForm() - const variant = usePropsSelector("variant"); - const orientation = usePropsSelector("orientation"); - const size = usePropsSelector("size"); + const variant = usePropsSelector('variant') + const orientation = usePropsSelector('orientation') + const size = usePropsSelector('size') return ( <> @@ -23,7 +23,7 @@ const TabsPanel = () => { name="variant" id="variant" size="sm" - value={variant || ""} + value={variant || ''} onChange={setValueFromEvent} > @@ -40,7 +40,7 @@ const TabsPanel = () => { name="orientation" id="orientation" size="sm" - value={orientation || ""} + value={orientation || ''} onChange={setValueFromEvent} > @@ -53,7 +53,7 @@ const TabsPanel = () => { name="size" id="size" size="sm" - value={size || ""} + value={size || ''} onChange={setValueFromEvent} > @@ -63,7 +63,7 @@ const TabsPanel = () => { - ); -}; + ) +} -export default TabsPanel; +export default TabsPanel diff --git a/src/components/inspector/panels/components/TagPanel.tsx b/src/components/inspector/panels/components/TagPanel.tsx index 987381ca28..75261dbeb5 100644 --- a/src/components/inspector/panels/components/TagPanel.tsx +++ b/src/components/inspector/panels/components/TagPanel.tsx @@ -1,25 +1,25 @@ -import React from "react"; -import { Select } from "@chakra-ui/core"; -import { useForm } from "../../../../hooks/useForm"; -import SizeControl from "../../controls/SizeControl"; -import ChildrenControl from "../../controls/ChildrenControl"; -import ColorsControl from "../../controls/ColorsControl"; -import FormControl from "../../controls/FormControl"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; -import SwitchControl from "../../controls/SwitchControl"; +import React from 'react' +import { Select } from '@chakra-ui/core' +import { useForm } from '~hooks/useForm' +import SizeControl from '~components/inspector/controls/SizeControl' +import ChildrenControl from '~components/inspector/controls/ChildrenControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' +import FormControl from '~components/inspector/controls/FormControl' +import usePropsSelector from '~hooks/usePropsSelector' +import SwitchControl from '~components/inspector/controls/SwitchControl' const TagPanel = () => { - const { setValueFromEvent } = useForm(); + const { setValueFromEvent } = useForm() - const size = usePropsSelector("size"); - const variant = usePropsSelector("variant"); - const rounded = usePropsSelector("rounded"); + const size = usePropsSelector('size') + const variant = usePropsSelector('variant') + const rounded = usePropsSelector('rounded') return ( <> { onChange={setValueFromEvent} name="variant" size="sm" - value={variant || ""} + value={variant || ''} > @@ -44,7 +44,7 @@ const TagPanel = () => { - ); -}; + ) +} -export default TagPanel; +export default TagPanel diff --git a/src/components/inspector/panels/components/TextareaPanel.tsx b/src/components/inspector/panels/components/TextareaPanel.tsx index 34f3aa3562..a62995bd5f 100644 --- a/src/components/inspector/panels/components/TextareaPanel.tsx +++ b/src/components/inspector/panels/components/TextareaPanel.tsx @@ -1,25 +1,25 @@ -import React, { memo } from "react"; -import { Input, Select } from "@chakra-ui/core"; -import FormControl from "../../controls/FormControl"; -import { useForm } from "../../../../hooks/useForm"; -import SizeControl, { Size } from "../../controls/SizeControl"; -import usePropsSelector from "../../../../hooks/usePropsSelector"; +import React, { memo } from 'react' +import { Input, Select } from '@chakra-ui/core' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import SizeControl, { Size } from '~components/inspector/controls/SizeControl' +import usePropsSelector from '~hooks/usePropsSelector' -const options = ["sm", "md", "lg"] as Size[]; +const options = ['sm', 'md', 'lg'] as Size[] const TextareaPanel = () => { - const { setValueFromEvent } = useForm(); + const { setValueFromEvent } = useForm() - const placeholder = usePropsSelector("placeholder"); - const size = usePropsSelector("size"); - const resize = usePropsSelector("resize"); + const placeholder = usePropsSelector('placeholder') + const size = usePropsSelector('size') + const resize = usePropsSelector('resize') return ( <> { name="resize" id="size" size="sm" - value={resize || ""} + value={resize || ''} onChange={setValueFromEvent} > @@ -40,7 +40,7 @@ const TextareaPanel = () => { - ); -}; + ) +} -export default memo(TextareaPanel); +export default memo(TextareaPanel) diff --git a/src/components/inspector/panels/styles/BorderPanel.tsx b/src/components/inspector/panels/styles/BorderPanel.tsx index 85fe780f7f..4f3daa9cb9 100644 --- a/src/components/inspector/panels/styles/BorderPanel.tsx +++ b/src/components/inspector/panels/styles/BorderPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import TextControl from '../../controls/TextControl' +import TextControl from '~components/inspector/controls/TextControl' const BorderPanel = () => { return ( diff --git a/src/components/inspector/panels/styles/DimensionPanel.tsx b/src/components/inspector/panels/styles/DimensionPanel.tsx index 79354a31fa..e90d436417 100644 --- a/src/components/inspector/panels/styles/DimensionPanel.tsx +++ b/src/components/inspector/panels/styles/DimensionPanel.tsx @@ -1,9 +1,9 @@ import React, { memo } from 'react' import { SimpleGrid, Select } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import usePropsSelector from '../../../../hooks/usePropsSelector' -import { useForm } from '../../../../hooks/useForm' -import TextControl from '../../controls/TextControl' +import FormControl from '~components/inspector/controls/FormControl' +import usePropsSelector from '~hooks/usePropsSelector' +import { useForm } from '~hooks/useForm' +import TextControl from '~components/inspector/controls/TextControl' const DimensionPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/styles/DisplayPanel.tsx b/src/components/inspector/panels/styles/DisplayPanel.tsx index 33d24e5ec0..678f9375a9 100644 --- a/src/components/inspector/panels/styles/DisplayPanel.tsx +++ b/src/components/inspector/panels/styles/DisplayPanel.tsx @@ -1,8 +1,8 @@ import React, { memo } from 'react' import { Select } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' import FlexPanel from './FlexPanel' const DisplayPanel = () => { diff --git a/src/components/inspector/panels/styles/EffectsPanel.tsx b/src/components/inspector/panels/styles/EffectsPanel.tsx index 876a5afeec..f79c5b39b5 100644 --- a/src/components/inspector/panels/styles/EffectsPanel.tsx +++ b/src/components/inspector/panels/styles/EffectsPanel.tsx @@ -1,14 +1,14 @@ import React, { memo, useMemo } from 'react' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' import { Slider, SliderTrack, SliderFilledTrack, SliderThumb, } from '@chakra-ui/core' -import TextControl from '../../controls/TextControl' +import TextControl from '~components/inspector/controls/TextControl' const EffectsPanel = () => { const { setValue } = useForm() diff --git a/src/components/inspector/panels/styles/FlexPanel.tsx b/src/components/inspector/panels/styles/FlexPanel.tsx index 2eb74b8ffc..56909278e3 100644 --- a/src/components/inspector/panels/styles/FlexPanel.tsx +++ b/src/components/inspector/panels/styles/FlexPanel.tsx @@ -1,8 +1,8 @@ import React, { memo } from 'react' import { Select } from '@chakra-ui/core' -import FormControl from '../../controls/FormControl' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' +import FormControl from '~components/inspector/controls/FormControl' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const FlexPanel = () => { const { setValueFromEvent } = useForm() diff --git a/src/components/inspector/panels/styles/PaddingPanel.tsx b/src/components/inspector/panels/styles/PaddingPanel.tsx index 30796b369e..7c5c096cae 100644 --- a/src/components/inspector/panels/styles/PaddingPanel.tsx +++ b/src/components/inspector/panels/styles/PaddingPanel.tsx @@ -9,8 +9,8 @@ import { Icon, Box, } from '@chakra-ui/core' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' type PaddingPanelPropsType = { type: 'margin' | 'padding' diff --git a/src/components/inspector/panels/styles/TextPanel.tsx b/src/components/inspector/panels/styles/TextPanel.tsx index abd19befe4..da7ed80163 100644 --- a/src/components/inspector/panels/styles/TextPanel.tsx +++ b/src/components/inspector/panels/styles/TextPanel.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react' import { IconButton, ButtonGroup, useTheme } from '@chakra-ui/core' -import ColorsControl from '../../controls/ColorsControl' +import ColorsControl from '~components/inspector/controls/ColorsControl' import { GoBold, GoItalic } from 'react-icons/go' import { MdFormatAlignLeft, @@ -8,11 +8,11 @@ import { MdFormatAlignCenter, MdFormatAlignJustify, } from 'react-icons/md' -import FormControl from '../../controls/FormControl' +import FormControl from '~components/inspector/controls/FormControl' import { ComboboxOption } from '@reach/combobox' -import InputSuggestion from '../../inputs/InputSuggestion' -import { useForm } from '../../../../hooks/useForm' -import usePropsSelector from '../../../../hooks/usePropsSelector' +import InputSuggestion from '~components/inspector/inputs/InputSuggestion' +import { useForm } from '~hooks/useForm' +import usePropsSelector from '~hooks/usePropsSelector' const TextPanel = () => { const { setValue, setValueFromEvent } = useForm() diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 0f9332932e..7b1f5ae5da 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -9,7 +9,7 @@ import { IconButton, } from '@chakra-ui/core' import DragItem from './DragItem' -import { menuItems, MenuItem } from '../../componentsList' +import { menuItems, MenuItem } from '~componentsList' const Menu = () => { const [searchTerm, setSearchTerm] = useState('') diff --git a/src/core/models/components.test.ts b/src/core/models/components.test.ts index c769bcccc1..0a5186c37e 100644 --- a/src/core/models/components.test.ts +++ b/src/core/models/components.test.ts @@ -1,5 +1,5 @@ import components, { ComponentsState, INITIAL_COMPONENTS } from './components' -import { onboarding } from '../../templates/onboarding' +import { onboarding } from '~templates/onboarding' import produce from 'immer' const STATE: ComponentsState = { diff --git a/src/core/models/components.ts b/src/core/models/components.ts index 41e99bd795..1902648003 100644 --- a/src/core/models/components.ts +++ b/src/core/models/components.ts @@ -1,9 +1,9 @@ import { createModel } from '@rematch/core' import produce from 'immer' -import { DEFAULT_PROPS } from '../../utils/defaultProps' -import templates, { TemplateType } from '../../templates' -import { generateId } from '../../utils/generateId' -import { duplicateComponent, deleteComponent } from '../../utils/recursive' +import { DEFAULT_PROPS } from '~utils/defaultProps' +import templates, { TemplateType } from '~templates' +import { generateId } from '~utils/generateId' +import { duplicateComponent, deleteComponent } from '~utils/recursive' import omit from 'lodash/omit' export type ComponentsState = { diff --git a/src/core/models/composer/composer.ts b/src/core/models/composer/composer.ts index 00d421dc35..532f0b0f39 100644 --- a/src/core/models/composer/composer.ts +++ b/src/core/models/composer/composer.ts @@ -1,5 +1,5 @@ -import { DEFAULT_PROPS } from '../../../utils/defaultProps' -import { generateId } from '../../../utils/generateId' +import { DEFAULT_PROPS } from '~utils/defaultProps' +import { generateId } from '~utils/generateId' type AddNode = { type: ComponentType diff --git a/src/core/selectors/app.ts b/src/core/selectors/app.ts index ca55026f69..a00078d01b 100644 --- a/src/core/selectors/app.ts +++ b/src/core/selectors/app.ts @@ -1,4 +1,4 @@ -import { RootState } from '../store' +import { RootState } from '~core/store' export const getShowLayout = (state: RootState) => state.app.showLayout diff --git a/src/core/selectors/components.ts b/src/core/selectors/components.ts index a5cf5a58ea..327926a057 100644 --- a/src/core/selectors/components.ts +++ b/src/core/selectors/components.ts @@ -1,5 +1,5 @@ import map from 'lodash/map' -import { RootState } from '../store' +import { RootState } from '~core/store' export const getComponents = (state: RootState) => state.components.present.components diff --git a/src/core/store.ts b/src/core/store.ts index fb991dfb71..6ba8cba48d 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -8,7 +8,7 @@ import { createWrapper, MakeStore } from 'next-redux-wrapper' import { ComponentsStateWithUndo } from './models/components' import { AppState } from './models/app' import models from './models' -import filterUndoableActions from '../utils/undo' +import filterUndoableActions from '~utils/undo' export type RootState = { app: AppState @@ -56,4 +56,4 @@ export const storeConfig = { // @ts-ignore export const makeStore: MakeStore = () => init(storeConfig) -export const wrapper = createWrapper(makeStore, { debug: true }) +export const wrapper = createWrapper(makeStore) diff --git a/src/hooks/useDispatch.ts b/src/hooks/useDispatch.ts index e5557d739b..45ff198a60 100644 --- a/src/hooks/useDispatch.ts +++ b/src/hooks/useDispatch.ts @@ -1,9 +1,9 @@ -import { useDispatch as useReduxDispatch } from "react-redux"; -import { RematchDispatch } from "@rematch/core"; -import models from "../core/models"; +import { useDispatch as useReduxDispatch } from 'react-redux' +import { RematchDispatch } from '@rematch/core' +import models from '~core/models' const useDispatch = () => { - return useReduxDispatch() as RematchDispatch; -}; + return useReduxDispatch() as RematchDispatch +} -export default useDispatch; +export default useDispatch diff --git a/src/hooks/useDropComponent.ts b/src/hooks/useDropComponent.ts index b8d2f9ddb9..09157dc812 100644 --- a/src/hooks/useDropComponent.ts +++ b/src/hooks/useDropComponent.ts @@ -1,7 +1,7 @@ import { useDrop, DropTargetMonitor } from 'react-dnd' -import { rootComponents } from '../utils/editor' +import { rootComponents } from '~utils/editor' import useDispatch from './useDispatch' -import builder from '../core/models/composer/builder' +import builder from '~core/models/composer/builder' export const useDropComponent = ( componentId: string, diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts index 168b8ab63e..d1380049fa 100644 --- a/src/hooks/useForm.ts +++ b/src/hooks/useForm.ts @@ -1,7 +1,7 @@ import { ChangeEvent, useCallback } from 'react' import { useSelector } from 'react-redux' import useDispatch from './useDispatch' -import { getSelectedComponentId } from '../core/selectors/components' +import { getSelectedComponentId } from '~core/selectors/components' export const useForm = () => { const dispatch = useDispatch() diff --git a/src/hooks/usePropsSelector.ts b/src/hooks/usePropsSelector.ts index 18b069a868..2ae8a8b7e1 100644 --- a/src/hooks/usePropsSelector.ts +++ b/src/hooks/usePropsSelector.ts @@ -1,7 +1,7 @@ import { useSelector } from 'react-redux' -import { RootState } from '../core/store' -import { getDefaultFormProps } from '../utils/defaultProps' -import { useInspectorUpdate } from '../contexts/inspector-context' +import { RootState } from '~core/store' +import { getDefaultFormProps } from '~utils/defaultProps' +import { useInspectorUpdate } from '~contexts/inspector-context' import { useEffect } from 'react' const usePropsSelector = (propsName: string) => { diff --git a/src/hooks/useShortcuts.ts b/src/hooks/useShortcuts.ts index f6f2879f66..81527c7b00 100644 --- a/src/hooks/useShortcuts.ts +++ b/src/hooks/useShortcuts.ts @@ -1,7 +1,7 @@ import useDispatch from './useDispatch' import { useSelector } from 'react-redux' import { ActionCreators as UndoActionCreators } from 'redux-undo' -import { getSelectedComponent } from '../core/selectors/components' +import { getSelectedComponent } from '~core/selectors/components' export const keyMap = { DELETE_NODE: ['backspace', 'del'], diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e179fd3d00..f33694bc6a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,9 +3,9 @@ import { ThemeProvider, CSSReset, theme } from '@chakra-ui/core' import 'react-color-picker/index.css' import '@reach/combobox/styles.css' -import { wrapper } from '../core/store' -import { ErrorBoundary as BugsnagErrorBoundary } from '../utils/bugsnag' -import AppErrorBoundary from '../components/errorBoundaries/AppErrorBoundary' +import { wrapper } from '~core/store' +import { ErrorBoundary as BugsnagErrorBoundary } from '~utils/bugsnag' +import AppErrorBoundary from '~components/errorBoundaries/AppErrorBoundary' import { AppProps } from 'next/app' const Main = ({ Component, pageProps }: AppProps) => ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fa82cef614..34450fe039 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,15 +2,16 @@ 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 useShortcuts, { keyMap } from '../hooks/useShortcuts' -import EditorErrorBoundary from '../components/errorBoundaries/EditorErrorBoundary' -import { InspectorProvider } from '../contexts/inspector-context' +import Metadata from '~components/Metadata' +import useShortcuts, { keyMap } from '~hooks/useShortcuts' +import Header from '~components/Header' +import Sidebar from '~components/sidebar/Sidebar' +import EditorErrorBoundary from '~components/errorBoundaries/EditorErrorBoundary' +import Editor from '~components/editor/Editor' +import { InspectorProvider } from '~contexts/inspector-context' +import Inspector from '~components/inspector/Inspector' const App = () => { const { handlers } = useShortcuts() @@ -23,6 +24,8 @@ const App = () => { })} /> + +
diff --git a/src/utils/import.ts b/src/utils/import.ts index 09d0772e05..e930ae28e1 100644 --- a/src/utils/import.ts +++ b/src/utils/import.ts @@ -1,5 +1,5 @@ import { fileOpen, fileSave } from 'browser-nativefs' -import { INITIAL_COMPONENTS } from '../core/models/components' +import { INITIAL_COMPONENTS } from '~core/models/components' export async function loadFromJSON() { const blob = await fileOpen({ diff --git a/tsconfig.json b/tsconfig.json index 871daf4c4b..b57a46ff25 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,11 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "preserve" + "jsx": "preserve", + "baseUrl": ".", + "paths": { + "~*": ["src/*"] + } }, "include": ["src", "next-env.d.ts"], "exclude": ["node_modules"]