This repository was archived by the owner on Sep 20, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 137
feat: include vue-cli-plugin-chakra-ui
#483
Open
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
.changeset/ten-eels-film.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| 'vue-cli-plugin-chakra-ui': minor | ||
| 'nuxt-js': patch | ||
| '@chakra-ui/vue': patch | ||
| '@chakra-ui/nuxt': patch | ||
| '@chakra-ui/theme-vue': patch | ||
| 'chakra-ui-docs': patch | ||
| --- | ||
|
|
||
| feat: create version symlinking for vue-cli-plugin-chakra-ui |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,4 +5,5 @@ sw.js | |
| **/lib/plugin.js | ||
| **/.nuxt | ||
| **/coverage | ||
| node_modules | ||
| node_modules | ||
| **/vue-cli-plugin/generator/template | ||
1 change: 1 addition & 0 deletions
examples/nuxt-js/nuxt.config.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
packages/vue-cli-plugin/LICENSE.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2020 Kelvin Omereshone | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
39 changes: 39 additions & 0 deletions
packages/vue-cli-plugin/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| # vue-cli-plugin-chakra-ui 🔥 | ||
|
|
||
| This plugin setups Chakra UI Vue in your Vue CLI generated project. | ||
|
|
||
| ## Install Vue CLI 3 🔌 | ||
| If you haven't yet installed vue-cli 3, install it like so: | ||
|
|
||
| ``` | ||
| npm install -g @vue/cli | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ``` | ||
| yarn global add @vue/cli | ||
| ``` | ||
|
|
||
| >If you still need the legacy `vue init` functionality, you can install a global bridge by following the instructions [here](https://cli.vuejs.org/guide/creating-a-project.html#pulling-2-x-templates-legacy) | ||
|
|
||
| Generate a project using vue-cli 3.0: | ||
|
|
||
| ```vue create my-app``` | ||
|
|
||
| Before installing the chakra-ui plugin, make sure to commit or stash your changes in case you need to revert the changes. | ||
|
|
||
| ## Usage 😎 | ||
| To install the chakra-ui plugin simply navigate to your application's folder and add chakra-ui. | ||
|
|
||
| ``` | ||
| vue add chakra-ui | ||
| ``` | ||
|
|
||
| The plugin will install [`@chakra-ui/vue`](https://vue.chakra-ui.com) and it's peer dependency - [Emotion](https://emotion.sh) | ||
|
|
||
| > As of v1.0.0, If you chose to allow automatic import of Chakra UI components from the prompt in the installation, [Chakra-Loader](https://github.com/chakra-ui/chakra-loader) will be installed for you. | ||
|
|
||
| The plugin will also touch `main.js` and `App.vue` to set up your project for consumption of Chakra UI components. | ||
|
|
||
| MIT © [Chakra UI](https://github.com/chakra-ui) |
15 changes: 15 additions & 0 deletions
packages/vue-cli-plugin/generator/helpers/add-chakra-loader-config.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| const fs = require('fs') | ||
| module.exports = function addChakraLoaderConfig (api) { | ||
| let content = "const { ChakraLoaderPlugin } = require('chakra-loader')\n\n" | ||
| content += 'module.exports = {\n' | ||
| content += '\tconfigureWebpack: {\n' | ||
| content += '\t\tplugins: [\n' | ||
| content += '\t\t\tnew ChakraLoaderPlugin()\n' | ||
| content += '\t\t]\n' | ||
| content += '\t}\n' | ||
| content += '}\n' | ||
| fs.appendFileSync('vue.config.js', content) | ||
|
|
||
| api.exitLog('Auto import setup completed 🔥') | ||
| api.exitLog('You can use Chakra UI components without importing and registering them now') | ||
| } |
19 changes: 19 additions & 0 deletions
packages/vue-cli-plugin/generator/helpers/register-chakra-vue-plugin.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| module.exports = function registerChakraVuePlugin (api) { | ||
| const vueUseLine = '\n\nVue.use(Chakra)' | ||
|
|
||
| const fs = require('fs') | ||
|
|
||
| let contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' }) | ||
|
|
||
| const lines = contentMain.split(/\r?\n/g).reverse() | ||
|
|
||
| // eslint-disable-next-line | ||
| const lastImportIndex = lines.findIndex(line => line.match(/^import/)) | ||
|
|
||
| lines[lastImportIndex] += vueUseLine | ||
|
|
||
| // modify app | ||
| contentMain = lines.reverse().join('\n') | ||
|
|
||
| fs.writeFileSync(api.entryFile, contentMain, { encoding: 'utf-8' }) | ||
| } |
39 changes: 39 additions & 0 deletions
packages/vue-cli-plugin/generator/index.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| const chakraPkg = require('@chakra-ui/vue/package.json') | ||
| const emotionPkg = require('@emotion/css/package.json') | ||
| const chakraLoaderPkg = require('chakra-loader/package.json') | ||
| const registerChakraVuePlugin = require('./helpers/register-chakra-vue-plugin') | ||
| const addChakraLoaderConfig = require('./helpers/add-chakra-loader-config') | ||
|
|
||
| module.exports = (api, options) => { | ||
| api.extendPackage({ | ||
| dependencies: { | ||
| '@chakra-ui/vue': `^${chakraPkg.version}`, | ||
| '@emotion/css': `^${emotionPkg.version}` | ||
| } | ||
| }) | ||
|
|
||
| if (options.addChakraLoader) { | ||
| api.extendPackage({ | ||
| devDependencies: { | ||
| 'chakra-loader': `^${chakraLoaderPkg.version}` | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| api.injectImports(api.entryFile, 'import Chakra from \'@chakra-ui/vue\'') | ||
|
|
||
| api.render('./template', { | ||
| hasVueRouter: options.hasVueRouter, | ||
| hasChakraLoader: options.addChakraLoader | ||
| }) | ||
| api.onCreateComplete(() => { | ||
| registerChakraVuePlugin(api) | ||
|
|
||
| if (options.addChakraLoader) { | ||
| addChakraLoaderConfig(api) | ||
| } | ||
| }) | ||
|
|
||
| api.exitLog('Chakra UI Vue is ready') | ||
| api.exitLog('Join the community on Discord - https://discord.gg/Tv8Jca') | ||
| } |
26 changes: 26 additions & 0 deletions
packages/vue-cli-plugin/generator/template/src/App.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <template> | ||
| <c-theme-provider> | ||
| <c-reset /> | ||
| <%_ if (hasVueRouter) { _%> | ||
| <router-view /> | ||
| <%_ } else { _%> | ||
| <!--Your application goes here --> | ||
| <%_ } _%> | ||
| </c-theme-provider> | ||
| </template> | ||
|
|
||
| <script> | ||
| <%_ if (!hasChakraLoader) { _%> | ||
| import { CThemeProvider, CReset } from "@chakra-ui/vue"; | ||
| <%_ } _%> | ||
|
|
||
| export default { | ||
| name: "App", | ||
| <%_ if (!hasChakraLoader) { _%> | ||
| components: { | ||
| CThemeProvider, | ||
| CReset | ||
| } | ||
| <%_ } _%> | ||
| }; | ||
| </script> |
1 change: 1 addition & 0 deletions
packages/vue-cli-plugin/index.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = (api, options) => { } |
39 changes: 39 additions & 0 deletions
packages/vue-cli-plugin/package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| { | ||
| "name": "vue-cli-plugin-chakra-ui", | ||
| "version": "1.0.3", | ||
| "description": "Vue CLI plugin to add Chakra UI Vue", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "test": "null" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/chakra-ui/vue-cli-plugin-chakra-ui.git" | ||
| }, | ||
| "bugs": "https://github.com/chakra-ui/vue-cli-plugin-chakra-ui/issues", | ||
| "homepage": "https://github.com/chakra-ui/vue-cli-plugin-chakra-ui#readme", | ||
| "author": "Kelvin Omereshone <kelvinomereshone@gmail.com>", | ||
| "license": "MIT", | ||
| "keywords": [ | ||
| "vue", | ||
| "cli", | ||
| "vue-cli", | ||
| "ui", | ||
| "design-system", | ||
| "vue-components", | ||
| "uikit", | ||
| "accessible", | ||
| "components", | ||
| "emotion", | ||
| "library", | ||
| "styled-system" | ||
| ], | ||
| "devDependencies": { | ||
| "@changesets/cli": "^2.16.0" | ||
| }, | ||
| "dependencies": { | ||
| "@chakra-ui/vue": "^0.10.1", | ||
| "@emotion/css": "^11.1.3", | ||
| "chakra-loader": "^1.0.3" | ||
| } | ||
| } |
18 changes: 18 additions & 0 deletions
packages/vue-cli-plugin/prompts/index.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| module.exports = [ | ||
| { | ||
| name: 'addChakraLoader', | ||
| type: 'confirm', | ||
| message: 'Auto import Chakra components?', | ||
| description: 'This will allow you to use Chakra components without manually importing and registering them.', | ||
| default: false, | ||
| validate: input => !!input | ||
| }, | ||
| { | ||
| name: 'hasVueRouter', | ||
| type: 'confirm', | ||
| message: 'Is your project already setup with Vue Router?', | ||
| description: 'This will affect how App.vue is setup for you', | ||
| default: false, | ||
| validate: input => !!input | ||
| } | ||
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.