Onboarding + disable share button + social images + readme (premieroc…

…tet#37)

* Add onboarding

* Fix component name ref

* Add og graph / favicon

README.md

@@ -1,11 +1,75 @@
-# OpenChakra ⚡️
+<div align="center" style="display:flex;flex-direction:column;">
+  <a href="https://openchakra.app">
+    <img src="./public/images/github-banner.png" alt="Openchakra: Visual editor for Chakra UI." />
+  </a>
+  <h3>Visual Editor for Chakra UI</h3>
+</div>
 
-> Visual editor for Chakra UI — https://openchakra.app
+OpenChakra is a visual editor for the best component library in town: [Chakra UI](https://chakra-ui.com) 🤗. Quickly draft components with the simple drag and drop UI.
+
+## Features
 
 - 🎨 Drag and drop [Chakra UI](https://chakra-ui.com/getting-started) components
 - 💅 Preset components
 - 👀 Live props editing and styling
-- 🔥 Production-ready code
+- ⚛️ Production-ready code
 - 🎈 CodeSandbox export
+- 🔮 Undo/redo edit
+- 💽 Localstorage sync
+
+[![Screenshot](./public/images/screenshot.png)](https://openchakra.app)
+
+## Getting started
+
+### Builder mode
+
+The Builder mode adds extra padding/border to ease components selection (like containers).
+
+> 💡Toggle the Builder mode with the `b` shortcut
+
+### Code panel
+
+Toggle the code panel for viewing the JSX/React code of your components. You can even export your code directly to CodeSandbox!
+
+> 💡Toggle the Code panel with the `c` shortcut
+
+### Components panel
+
+Drag any component from the left hand panel into this editor. Then start interacting with them.
+You can drag a preset: it's a group of components (like Alert). Just drop a preset to easily setup a complexe component!
+
+### Inspector
+
+**Update props & style**
+
+On the right hand side, you can find the inspectror panel. You will find the tools to edit the component's props and style.
+
+**Delete, reset and read doc**
+
+Reach the yellow bar on the top to delete, reset and access the Chakra doc of each component.
+
+**Sort components**
+
+By clicking on a component containing children, you will see a Children panel appearing on the right. It enables sorting the children.
+
+### Editor Shortcuts
+
+| Shortcut         | Description               |
+| ---------------- | ------------------------- |
+| `cmd+Z` `ctrl+Z` | Undo last action          |
+| `cmd+Y` `ctrl+y` | Redo action               |
+| `del`            | Delete selected component |
+| `c`              | Toggle Code panel         |
+| `b`              | Toggle Builder mode       |
+
+## Roadmap
 
-[![Screeshot](splash.png)](https://openchakra.app)
+- More Chakra UI components integration
+- Components copy
+- Props panel improvements
+- Code generation improvements
+- Dark mode support
+- Custom presets
+- Custom theme
+- Handle PseudoBox state (hover, active…)
+- Fix bugs 🧨

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/index.html

@@ -6,9 +6,46 @@
     <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" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Open Chakra</title>
+    <title>OpenChakra</title>
+    <meta name="description" content="React JSX visual editor for Chakra UI" />
+    <meta property="og:title" content="OpenChakra" />
+    <meta
+      property="og:description"
+      content="React JSX visual editor for Chakra UI"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta
+      property="og:image:url"
+      content="%PUBLIC_URL%/images/og-graph-color.png"
+    />
+    <meta property="og:image:url:width" content="1200" />
+    <meta property="og:image:url:height" content="600" />
+    <meta
+      name="twitter:image"
+      content="%PUBLIC_URL%/images/og-graph-color.png"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/components/Header.tsx

@@ -18,8 +18,8 @@ import useDispatch from '../hooks/useDispatch'
 import { useSelector } from 'react-redux'
 import { getComponents } from '../core/selectors/components'
 import { getShowLayout, getShowCode } from '../core/selectors/app'
-import { createShareUrl } from '../utils/share'
-import useClipboard from '../hooks/useClipboard'
+// import { createShareUrl } from '../utils/share'
+// import useClipboard from '../hooks/useClipboard'
 
 const CodeSandboxButton = () => {
   const components = useSelector(getComponents)
@@ -44,6 +44,7 @@ const CodeSandboxButton = () => {
   )
 }
 
+/*
 const ShareButton = () => {
   const components = useSelector(getComponents)
 
@@ -61,6 +62,7 @@ const ShareButton = () => {
     </Button>
   )
 }
+*/
 
 const Header = () => {
   const showLayout = useSelector(getShowLayout)
@@ -127,7 +129,7 @@ const Header = () => {
             <Divider orientation="vertical" />
             <CodeSandboxButton />
             <Divider orientation="vertical" />
-            <ShareButton />
+            {/**<ShareButton />**/}
             <Divider orientation="vertical" />
             <Button
               rightIcon="small-close"

src/components/editor/ComponentPreview.tsx

@@ -43,7 +43,6 @@ const ComponentPreview: React.FC<{
     // Simple components
     case 'Badge':
     case 'Button':
-    case 'Icon':
     case 'IconButton':
     case 'Image':
     case 'Text':
@@ -73,6 +72,7 @@ const ComponentPreview: React.FC<{
     case 'CloseButton':
     case 'AccordionIcon':
     case 'Code':
+    case 'Icon':
     case 'ListIcon':
     case 'Tag':
       return (

src/components/editor/Editor.tsx

@@ -60,15 +60,16 @@ const Editor: React.FC = () => {
     >
       {isEmpty && (
         <Text maxWidth="md" color="gray.400" fontSize="xl" textAlign="center">
-          Drag some component to start coding without code! Or load a{' '}
+          Drag some component to start coding without code! Or load{' '}
           <Link
+            color="gray.500"
             onClick={(e: React.MouseEvent) => {
               e.stopPropagation()
               dispatch.components.loadDemo()
             }}
             textDecoration="underline"
           >
-            sample component
+            the onboarding components
           </Link>
           .
         </Text>

src/core/models/components.ts

@@ -1,7 +1,7 @@
 import { createModel } from '@rematch/core'
 import { DEFAULT_PROPS } from '../../utils/defaultProps'
 import omit from 'lodash/omit'
-import { airbnbCard } from '../../theme/demo'
+import { onboarding } from '../../templates/onboarding'
 import { generateId } from './app'
 
 export type ComponentsState = {
@@ -20,7 +20,7 @@ export const INITIAL_COMPONENTS: IComponents = {
   root: {
     id: DEFAULT_ID,
     parent: DEFAULT_ID,
-    type: 'box' as ComponentType,
+    type: 'Box' as ComponentType,
     children: [],
     props: {},
   },
@@ -43,7 +43,7 @@ const components = createModel({
       return {
         ...state,
         selectedId: 'comp-root',
-        components: airbnbCard as any,
+        components: onboarding,
       }
     },
     resetProps(state: ComponentsState, componentId: string): ComponentsState {

src/theme/demo.ts → src/templates/airbnb.ts

@@ -1,9 +1,9 @@
-export const airbnbCard = {
+export const airbnbCard: IComponents = {
   root: {
     id: 'root',
     parent: 'root',
-    type: 'box',
-    children: ['comp-root'],
+    type: 'Box',
+    children: ['comp-1580479567'],
     props: {},
   },
   'comp-root': {