Merge pull request #375 from chakra-ui/develop

fix(nuxt): nuxt module icon parsing

Author: codebender828

.all-contributorsrc

@@ -192,7 +192,8 @@
       "contributions": [
         "doc",
         "content",
-        "example"
+        "example",
+        "code"
       ]
     }
   ],

.changeset/config.json

@@ -3,10 +3,10 @@
   "changelog": [
     "@changesets/changelog-github",
     { "repo": "chakra-ui/chakra-ui-vue" }
-    ],
+  ],
   "commit": false,
   "linked": [],
-  "access": "restricted",
+  "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch"
 }

.changeset/nervous-moles-hide.md

@@ -0,0 +1,6 @@
+---
+'@chakra-ui/vue': patch
+'@chakra-ui/nuxt': patch
+---
+
+Added support for Feather Icons to Nuxt.js

.changeset/pre.json

@@ -0,0 +1,11 @@
+{
+  "mode": "exit",
+  "tag": "next",
+  "initialVersions": {
+    "@chakra-ui/vue": "0.7.3",
+    "@chakra-ui/nuxt": "0.2.3",
+    "@chakra-ui/theme-vue": "0.2.9",
+    "chakra-ui-docs": "0.5.4"
+  },
+  "changesets": []
+}

.gitignore

@@ -36,4 +36,5 @@ lerna-debug.log
 config/.env
 packages/chakra-ui-nuxt/.github
 packages/chakra-ui-docs/static/sw.js
-website/static/sw.js
+website/static/sw.js
+.npmrc

README.md

@@ -170,7 +170,7 @@ Interested in contributing? See our [open issues](https://github.com/chakra-ui/c
 
 ```bash
 yarn install
-yarn bootstrap
+yarn build && yarn bootstrap
 yarn dev
 ```
 
@@ -191,35 +191,36 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://jbakebwa.dev"><img src="https://avatars2.githubusercontent.com/u/21237954?v=4" width="50px;" alt=""/><br /><sub><b>Jonathan Bakebwa</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=codebender828" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=codebender828" title="Tests">⚠️</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=codebender828" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://twitter.com/imesutkoca"><img src="https://avatars2.githubusercontent.com/u/342666?v=4" width="50px;" alt=""/><br /><sub><b>Mesut</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=koca" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=koca" title="Tests">⚠️</a></td>
-    <td align="center"><a href="http://bit.ly/becomeworldclass"><img src="https://avatars0.githubusercontent.com/u/24433274?v=4" width="50px;" alt=""/><br /><sub><b>Omereshone Kelvin Oghenerhoro</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=DominusKelvin" title="Documentation">📖</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=DominusKelvin" title="Code">💻</a></td>
-    <td align="center"><a href="https://convenientstop.netlify.com"><img src="https://avatars0.githubusercontent.com/u/1885157?v=4" width="50px;" alt=""/><br /><sub><b>Eric Carboni</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=convenientstop" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://inusahharis.netlify.com"><img src="https://avatars3.githubusercontent.com/u/28383750?v=4" width="50px;" alt=""/><br /><sub><b>ankorGH</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=ankorGH" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://peoray.dev"><img src="https://avatars2.githubusercontent.com/u/23735423?v=4" width="50px;" alt=""/><br /><sub><b>Emmanuel Raymond</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=peoray" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=peoray" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://www.harrygulliford.com"><img src="https://avatars0.githubusercontent.com/u/5051286?v=4" width="50px;" alt=""/><br /><sub><b>Harry Gulliford</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=harrygulliford" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://jbakebwa.dev"><img src="https://avatars2.githubusercontent.com/u/21237954?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jonathan Bakebwa</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=codebender828" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=codebender828" title="Tests">⚠️</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=codebender828" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://twitter.com/imesutkoca"><img src="https://avatars2.githubusercontent.com/u/342666?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Mesut</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=koca" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=koca" title="Tests">⚠️</a></td>
+    <td align="center"><a href="http://bit.ly/becomeworldclass"><img src="https://avatars0.githubusercontent.com/u/24433274?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Omereshone Kelvin Oghenerhoro</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=DominusKelvin" title="Documentation">📖</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=DominusKelvin" title="Code">💻</a></td>
+    <td align="center"><a href="https://convenientstop.netlify.com"><img src="https://avatars0.githubusercontent.com/u/1885157?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Eric Carboni</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=convenientstop" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://inusahharis.netlify.com"><img src="https://avatars3.githubusercontent.com/u/28383750?v=4?s=50" width="50px;" alt=""/><br /><sub><b>ankorGH</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=ankorGH" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://peoray.dev"><img src="https://avatars2.githubusercontent.com/u/23735423?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Emmanuel Raymond</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=peoray" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=peoray" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://www.harrygulliford.com"><img src="https://avatars0.githubusercontent.com/u/5051286?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Harry Gulliford</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=harrygulliford" title="Documentation">📖</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/Anyitechs"><img src="https://avatars1.githubusercontent.com/u/37679025?v=4" width="50px;" alt=""/><br /><sub><b>IFEANYICHUKWU AMAJUOYI</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anyitechs" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/pgrimaud"><img src="https://avatars1.githubusercontent.com/u/1866496?v=4" width="50px;" alt=""/><br /><sub><b>Pierre Grimaud</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=pgrimaud" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://ezekielekunola.com"><img src="https://avatars0.githubusercontent.com/u/24660100?v=4" width="50px;" alt=""/><br /><sub><b>Ekunola Ezekiel</b></sub></a><br /><a href="#tool-Easybuoy" title="Tools">🔧</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Easybuoy" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://www.giftegwuenu.com"><img src="https://avatars3.githubusercontent.com/u/17781315?v=4" width="50px;" alt=""/><br /><sub><b>Gift Egwuenu</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=lauragift21" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://jbienesdev.netlify.app/"><img src="https://avatars1.githubusercontent.com/u/17470909?v=4" width="50px;" alt=""/><br /><sub><b>Joshua Angelo Bienes</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=jbienesdev" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/saptaksengupta"><img src="https://avatars2.githubusercontent.com/u/21155006?v=4" width="50px;" alt=""/><br /><sub><b>Saptak Sengupta</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=saptaksengupta" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://kuro.tw"><img src="https://avatars1.githubusercontent.com/u/362912?v=4" width="50px;" alt=""/><br /><sub><b>Kuro Hsu</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=kurotanshi" title="Documentation">📖</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=kurotanshi" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Anyitechs"><img src="https://avatars1.githubusercontent.com/u/37679025?v=4?s=50" width="50px;" alt=""/><br /><sub><b>IFEANYICHUKWU AMAJUOYI</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anyitechs" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/pgrimaud"><img src="https://avatars1.githubusercontent.com/u/1866496?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Pierre Grimaud</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=pgrimaud" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://ezekielekunola.com"><img src="https://avatars0.githubusercontent.com/u/24660100?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Ekunola Ezekiel</b></sub></a><br /><a href="#tool-Easybuoy" title="Tools">🔧</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Easybuoy" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://www.giftegwuenu.com"><img src="https://avatars3.githubusercontent.com/u/17781315?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Gift Egwuenu</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=lauragift21" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://jbienesdev.netlify.app/"><img src="https://avatars1.githubusercontent.com/u/17470909?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Joshua Angelo Bienes</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=jbienesdev" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/saptaksengupta"><img src="https://avatars2.githubusercontent.com/u/21155006?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Saptak Sengupta</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=saptaksengupta" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://kuro.tw"><img src="https://avatars1.githubusercontent.com/u/362912?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Kuro Hsu</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=kurotanshi" title="Documentation">📖</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=kurotanshi" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/Anmol270900"><img src="https://avatars2.githubusercontent.com/u/43845658?v=4" width="50px;" alt=""/><br /><sub><b>Anmol</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anmol270900" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/vishnumohanrk"><img src="https://avatars3.githubusercontent.com/u/51525368?v=4" width="50px;" alt=""/><br /><sub><b>Vishnumohan R K</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vishnumohanrk" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Tests">⚠️</a></td>
-    <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a></td>
+    <td align="center"><a href="https://github.com/Anmol270900"><img src="https://avatars2.githubusercontent.com/u/43845658?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Anmol</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anmol270900" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/vishnumohanrk"><img src="https://avatars3.githubusercontent.com/u/51525368?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Vishnumohan R K</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vishnumohanrk" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Tests">⚠️</a></td>
+    <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Code">💻</a></td>
   </tr>
 </table>
 
-<!-- markdownlint-enable -->
+<!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

package.json

@@ -108,7 +108,9 @@
     "@babel/plugin-transform-parameters": "^7.7.4",
     "@babel/preset-env": "^7.9.5",
     "@babel/runtime-corejs2": "^7.8.7",
+    "@changesets/changelog-github": "^0.2.7",
     "@changesets/cli": "^2.7.1",
+    "@changesets/get-github-info": "^0.4.4",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@emotion/babel-plugin": "^11.1.2",
@@ -131,6 +133,7 @@
     "@vue/devtools": "^5.3.3",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
+    "add": "^2.0.6",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
@@ -167,7 +170,8 @@
     "v-scroll-lock": "^1.1.0",
     "vue-loader": "^15.7.1",
     "vue-lorem-ipsum": "^0.0.1",
-    "watch": "^1.0.2"
+    "watch": "^1.0.2",
+    "yarn": "^1.22.10"
   },
   "keywords": [
     "vue",

packages/chakra-ui-core/src/utils/icons.js

@@ -5,7 +5,7 @@ import { merge } from 'lodash-es'
  * @param {Object} iconSet - Registered Icons object
  * @returns {Object}
  */
-const parseIcons = (iconSet) => {
+const parseIcons = (iconSet = {}) => {
   const parseIcon = (iconObject) => {
     const { icon } = iconObject
     // Is library icon
@@ -43,7 +43,7 @@ const parseIcons = (iconSet) => {
 export const parsePackIcons = (iconSet) => {
   // TODO: Add support for other icon libraries
   // - Material Icons
-  // - Tailwind Icons
+  // - Tailwind Icons (Hero icons)
   const packIcons = parseIcons(iconSet)
   return packIcons
 }

packages/chakra-ui-nuxt/lib/module.js

@@ -19,8 +19,8 @@ module.exports = function (moduleOptions) {
 
   // Resolve icons
   let packIcons = {}
-  if (options.icons && options.icons.iconPack) {
-    packIcons = parsePackIcons(options.icons.iconPack, options.icons.iconSet)
+  if (options.icons) {
+    packIcons = parsePackIcons(options.icons.iconSet)
   }
 
   // Transpile lodash-es

website/components/CarbonAd.js

@@ -0,0 +1,84 @@
+import { Css } from '@chakra-ui/vue'
+import { css } from '@emotion/css'
+import { loadScript } from '~/utils'
+
+const CarbonAd = {
+  name: 'CarbonAd',
+  inject: ['$chakraTheme', '$chakraColorMode'],
+  computed: {
+    colorMode: vm => vm.$chakraColorMode(),
+    theme: vm => vm.$chakraTheme(),
+    className () {
+      const _css = styles => css(Css(styles)(this.theme))
+
+      return _css({
+        display: 'block',
+        position: 'relative',
+        margin: '32px 0',
+        maxWidth: '480px',
+        minHeight: '132px',
+        borderRadius: '4px',
+        bg: this.colorMode === 'light' ? 'gray.50' : 'rgba(36, 70, 93, 0.32)',
+        color: 'inherit',
+        '@media (max-width: 480px)': {
+          fontSize: '0.875em'
+        },
+        a: {
+          textDecoration: 'none',
+          color: 'inherit',
+          '&:hover': {
+            textDecoration: 'underline'
+          }
+        },
+        '.carbon-wrap': {
+          display: 'flex',
+          padding: '16px'
+        },
+        '.carbon-img': {
+          marginRight: '16px',
+          img: {
+            display: 'block'
+          }
+        },
+        '.carbon-text': {
+          fontSize: '0.8rem',
+          lineHeight: 1.4
+        },
+        '.carbon-poweredby': {
+          position: 'absolute',
+          bottom: '16px',
+          left: '162px',
+          color: `${this.theme?.colors.gray[500]} !important`,
+          display: 'block',
+          fontSize: '10px',
+          fontWeight: 'semibold',
+          textTransform: 'uppercase',
+          lineHeight: 1,
+          letterSpacing: '0.2px'
+        }
+      })
+    },
+    css: vm => styles => Css(styles)(vm.theme)
+  },
+  async mounted () {
+    await this.$nextTick()
+    const { carbonContainer } = this.$refs
+    if (!carbonContainer) return
+
+    const script = loadScript(
+      '//cdn.carbonads.com/carbon.js?serve=CEBI5K7I&placement=vuechakra-uicom',
+      carbonContainer
+    )
+
+    script.id = '_carbonads_js'
+    script.type = 'text/javascript'
+  },
+  render (h) {
+    return h('span', {
+      class: this.className,
+      ref: 'carbonContainer'
+    })
+  }
+}
+
+export default CarbonAd

website/components/MDXComponents.js

@@ -69,7 +69,7 @@ const MDXComponents = {
     name: 'H1',
     render () {
       return (
-        <CHeading as="h1" size="2xl" my="1em" { ...props}>
+        <CHeading as="h1" id="chakra-documentation-title" size="2xl" my="1em" { ...props}>
           {this.$slots.default}
         </CHeading>
       )