Add absolute paths imports (premieroctet#96)

* Add absolute paths imports * Fix tests
luiskhernandez · Aug 4, 2020 · e43cc8d · e43cc8d
1 parent 6883251
commit e43cc8d
Show file tree

Hide file tree

Showing 109 changed files with 646 additions and 553 deletions.
diff --git a/package.json b/package.json
@@ -96,7 +96,8 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "\\.(svg|jpg|png|css)$": "<rootDir>/empty-module.js"
+      "\\.(svg|jpg|png|css)$": "<rootDir>/empty-module.js",
+      "~(.*)$": "<rootDir>/src/$1"
     },
     "moduleFileExtensions": [
       "js",

diff --git 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
@@ -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
@@ -0,0 +1,85 @@
+import React from 'react'
+import Head from 'next/head'
+
+const Metadata = () => {
+  return (
+    <Head>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="theme-color" content="#000000" />
+      <meta name="description" content="Visual editor for Chakra UI " />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <meta name="msapplication-TileColor" content="#da532c" />
+      <meta name="theme-color" content="#ffffff" />
+
+      <title>OpenChakra</title>
+      <meta
+        name="description"
+        content="React JSX visual editor for Chakra UI"
+      />
+      <meta
+        name="image"
+        content="https://openchakra.app/images/og-graph-color.png"
+      />
+
+      {/* OpenGraph tags */}
+      <meta property="og:url" content="https://openchakra.app" />
+      <meta property="og:site_name" content="OpenChakra" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="OpenChakra" />
+      <meta
+        property="og:description"
+        content="OpenChakra is a visual editor for React based on Chakra UI"
+      />
+      <meta
+        property="og:image"
+        name="twitter:image"
+        content="https://openchakra.app/images/og-graph-color.png"
+      />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="600" />
+
+      {/* Twitter Card tags */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="OpenChakra" />
+      <meta
+        name="twitter:description"
+        content="OpenChakra is a visual editor for React based on Chakra UI"
+      />
+      <meta
+        name="twitter:image"
+        content="https://openchakra.app/images/og-graph-color.png"
+      />
+
+      <meta property="og:title" content="OpenChakra" />
+      <meta
+        property="og:description"
+        content="OpenChakra is a visual editor for React based on Chakra UI"
+      />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://openchakra.app" />
+      <meta
+        property="og:image:url"
+        content="https://openchakra.app/images/og-graph-color.png"
+      />
+    </Head>
+  )
+}
+
+export default Metadata
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,15 +1,15 @@
 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,
   AccordionHeader,
   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
@@ -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<IPreviewProps> = ({ component }) => {

diff --git 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
@@ -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<IPreviewProps & {
   spacing?: BoxProps['marginLeft']

diff --git a/src/components/editor/previews/BoxPreview.tsx b/src/components/editor/previews/BoxPreview.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { 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 BoxPreview: React.FC<{ component: IComponent }> = ({ component }) => {
   const { drop, isOver } = useDropComponent(component.id)

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)