Merge pull request #69 from chakra-ui/dev/docs

`@chakra-ui/vue` components documentation
chakra-ui · May 5, 2020 · 3c9785e · 3c9785e · vercel · May 5, 2020
2 parents 778d992 + 9e8d5dd
commit 3c9785e
Show file tree

Hide file tree

Showing 100 changed files with 10,121 additions and 2,895 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
-**/dist/*
+**/dist/*
+sw.js
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -0,0 +1,8 @@
+{
+  "files": [
+    {
+      "path": "./packages/chakra-ui-core/dist/umd/*.js",
+      "maxSize": "85kB"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -33,14 +33,18 @@
     "bootstrap": "lerna bootstrap --use-workspaces",
     "deploy-storybook": "storybook-to-ghpages -- --out=.out",
     "now-build-storybook": "build-storybook -o dist/storybook",
-    "docs:dev": "yarn workspace chakra-ui-docs dev"
+    "docs:dev": "yarn theme:dev && yarn docs-dev",
+    "theme:dev": "yarn workspace @chakra-ui/theme-vue build",
+    "docs-dev": "yarn workspace chakra-ui-docs dev",
+    "evalbundle": "bundlesize"
   },
   "dependencies": {
-    "@babel/core": "^7.7.4",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
     "@babel/plugin-transform-modules-commonjs": "^7.7.4",
     "@babel/plugin-transform-parameters": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-env": "^7.9.5",
+    "@chakra-ui/vue": "^0.3.10",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
@@ -86,6 +90,7 @@
     "breadstick": "^0.2.14",
     "can-use-dom": "^0.1.0",
     "color": "^3.1.2",
+    "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",
     "dotenv-defaults": "^1.1.1",
     "emotion": "^10.0.27",
@@ -99,6 +104,9 @@
     "install": "^0.13.0",
     "lerna": "^3.19.0",
     "lint-staged": "^9.4.2",
+    "mdx-vue": "^1.0.2",
+    "mdx-vue-loader": "^1.0.2",
+    "node-fetch": "^2.6.0",
     "node-sass": "^4.13.1",
     "nuxt": "^2.0.0",
     "popper.js": "^1.16.0",
@@ -109,9 +117,11 @@
     "styled-system": "^5.1.2",
     "v-scroll-lock": "^1.1.0",
     "vue": "^2.6.11",
-    "vue-live": "^1.5.1",
+    "vue-error-boundary": "^1.0.3",
+    "vue-live": "1.5.1",
     "vue-loader": "^15.7.1",
     "vue-lorem-ipsum": "^0.0.1",
+    "vue-meta": "^2.3.3",
     "vue-prism-editor": "^0.5.1",
     "vue-router": "^3.1.6",
     "vue-template-compiler": "^2.6.11"
@@ -125,6 +135,8 @@
     "@testing-library/user-event": "^10.0.0",
     "@testing-library/vue": "^4.1.0",
     "babel-eslint": "^10.0.1",
+    "bundlesize": "^0.18.0",
+    "cross-env": "^7.0.2",
     "eslint-config-prettier": "^6.10.0",
     "eslint-loader": "^3.0.3",
     "eslint-plugin-nuxt": ">=0.4.2",

diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json
@@ -29,6 +29,10 @@
   "files": [
     "dist"
   ],
+  "bundle-phobia": {
+    "max-size": "85KB",
+    "max-overall-size": "85KB"
+  },
   "dependencies": {
     "@styled-system/css": "^5.0.23",
     "animejs": "^3.1.0",

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js b/packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js
@@ -65,7 +65,10 @@ const CAspectRatioBox = {
           pb: `${(1 / this.ratio) * 100}%`
         }
       },
-      attrs: this.$attrs
+      attrs: {
+        ...this.$attrs,
+        'data-chakra-component': 'CAspectRatioBox'
+      }
     }, [clone])
   }
 }

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap b/packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap
@@ -4,7 +4,7 @@ exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
     class="css-0 css-yotxfm"
-    data-chakra-component="CPseudoBox"
+    data-chakra-component="CAspectRatioBox"
     data-testid="aspectRatioBox"
   >
     <img

diff --git a/packages/chakra-ui-core/src/CBox/CBox.stories.js b/packages/chakra-ui-core/src/CBox/CBox.stories.js
@@ -23,3 +23,19 @@ storiesOf('UI | Box', module)
       </div>
     `
   }))
+  .add('Box with custom values', () => ({
+    components: { Box },
+    template: `
+      <div>
+        <Box
+          w="300px"
+          h="200px"
+          font-family="body"
+          objectFit="contain"
+          bgImg="url(https://lh3.googleusercontent.com/proxy/vG0O53R9-vPA2WpuC5lXWCHIVuIQiQ1R7bpQ1UcDsHnHVlz2BJMeSeJx1I1n4huq_SeB39iegxgQl1zXcnNqpq2IJfCgQwwWXpdRG9pNdA)"
+        >
+          <Box h="full" bg="red.200" :w="1/2" />
+        </Box>
+      </div>
+    `
+  }))
diff --git a/packages/chakra-ui-core/src/CCheckbox/CCheckbox.stories.js b/packages/chakra-ui-core/src/CCheckbox/CCheckbox.stories.js
@@ -52,7 +52,7 @@ storiesOf('UI | Checkbox', module)
         <CCheckbox size="sm" variantColor="red" defaultIsChecked>
           Checkbox
         </CCheckbox>
-        <CCheckbox siz="md" variantColor="green" defaultIsChecked>
+        <CCheckbox size="md" variantColor="green" defaultIsChecked>
           Checkbox
         </CCheckbox>
         <CCheckbox size="lg" variantColor="pink" defaultIsChecked>

diff --git a/packages/chakra-ui-core/src/CEditable/CEditable.stories.js b/packages/chakra-ui-core/src/CEditable/CEditable.stories.js
@@ -29,10 +29,10 @@ storiesOf('UI | Editable', module)
     components: { CBox, CEditable, CEditablePreview, CEditableInput },
     template: `
     <CBox w="sm">
-        <CEditable defaultValue="Take some chakra ⚡️ (click me)" fontSize="2xl">
+      <CEditable defaultValue="Take some chakra ⚡️ (click me)" fontSize="2xl">
         <CEditablePreview />
         <CEditableInput />
-        </CEditable>
+      </CEditable>
     </CBox>
     `
   }))

diff --git a/packages/chakra-ui-core/src/config/props/props.js b/packages/chakra-ui-core/src/config/props/props.js
@@ -71,6 +71,7 @@ const baseProps = {
   flexDir: SNA,
   bgImg: SNA,
   bgImage: SNA,
+  backgroundImage: SNA,
   bgSize: SNA,
   bgPos: SNA,
   bgRepeat: SNA,

diff --git a/packages/chakra-ui-docs/.eslintignore b/packages/chakra-ui-docs/.eslintignore
@@ -1 +1,2 @@
-**/dist/*
+**/dist/*
+sw.js
diff --git a/packages/chakra-ui-docs/.gitignore b/packages/chakra-ui-docs/.gitignore
@@ -0,0 +1 @@
+.now
diff --git a/packages/chakra-ui-docs/.nowignore b/packages/chakra-ui-docs/.nowignore
@@ -0,0 +1 @@
+.nuxt
diff --git a/packages/chakra-ui-docs/components/CodeBlock.js b/packages/chakra-ui-docs/components/CodeBlock.js
@@ -1,12 +1,21 @@
-import { Box, Button } from '@chakra-ui/vue'
+import { CBox, CButton } from '@chakra-ui/vue'
+import 'prismjs'
 import PrismEditor from 'vue-prism-editor'
+import '../css/night-owl.css'
+import 'vue-prism-editor/dist/VuePrismEditor.css'
+import LiveEditor from './LiveEditor'
+import copy from 'copy-to-clipboard'
 
-export default {
+function getLanguage (string) {
+  return string.slice(string.indexOf('-') + 1)
+}
+
+const CodeBlock = props => ({
   name: 'CodeBlock',
   props: {
     lang: {
       type: String,
-      default: 'bash'
+      default: 'vue'
     },
     isReadOnly: {
       type: Boolean,
@@ -23,7 +32,8 @@ export default {
     autoStyleLineNumbers: {
       type: Boolean,
       default: true
-    }
+    },
+    live: Boolean
   },
   data () {
     return {
@@ -35,7 +45,7 @@ export default {
   methods: {
     async copy () {
       // Copy text to clipboard
-      await navigator.clipboard.writeText(this.text)
+      await copy(this.text)
 
       // Handle timeouts for copy button text
       if (this.copyTimeout) clearTimeout(this.copyTimeout)
@@ -47,39 +57,55 @@ export default {
     }
   },
   render (h) {
-    const children = this.$slots.default[0]
-    const innerText = children.text.trim()
-    this.text = innerText
+    const language = getLanguage(props.className)
+    const code = this.$slots.default[0].text
+    this.text = code
 
-    return h(Box, {
-      props: {
-        rounded: 'md',
-        position: 'relative',
-        fontSize: '0.9rem'
-      }
-    }, [
-      h(PrismEditor, {
+    if (!props.live) {
+      return h(CBox, {
         props: {
-          code: innerText,
-          language: this.lang,
-          readonly: this.isReadOnly,
-          ...this.$props
+          rounded: 'md',
+          position: 'relative',
+          fontSize: '0.9rem'
         }
-      }),
-      h(Button, {
+      }, [
+        h(PrismEditor, {
+          props: {
+            code,
+            language,
+            readonly: true,
+            ...this.$props
+          }
+        }),
+        h(CButton, {
+          props: {
+            variantColor: 'vue',
+            position: 'absolute',
+            size: 'sm',
+            top: '0.2rem',
+            right: '0.125rem',
+            textTransform: 'uppercase',
+            transform: 'scale(0.8)'
+          },
+          on: {
+            click: this.copy
+          }
+        }, this.copyButtonText)
+      ])
+    } else {
+      const liveEditor = h(LiveEditor, {
         props: {
-          variantColor: 'vue',
-          position: 'absolute',
-          size: 'sm',
-          top: '0.2rem',
-          right: '0.125rem',
-          textTransform: 'uppercase',
-          transform: 'scale(0.8)'
-        },
-        on: {
-          click: this.copy
+          code
         }
-      }, this.copyButtonText)
-    ])
+      })
+
+      if (props.browser) {
+        return h('client-only', [liveEditor])
+      } else {
+        return liveEditor
+      }
+    }
   }
-}
+})
+
+export default CodeBlock