-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial Polaris 12 - complete scaffold & AppProvider component
- Loading branch information
Showing
822 changed files
with
2,384 additions
and
57,406 deletions.
There are no files selected for viewing
This file contains 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,3 @@ | ||
| [submodule "polaris"] | ||
| path = polaris | ||
| url = https://github.com/Shopify/polaris |
This file contains 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 |
|---|---|---|
| @@ -1,34 +1,34 @@ | ||
| /* eslint-disable @typescript-eslint/no-var-requires */ | ||
| const fs = require('fs'); | ||
| const path = require('path'); | ||
| const postcssModules = require('postcss-modules'); | ||
| const classConfig = require('./build/namespaced-classname'); | ||
| // const postcssModules = require('postcss-modules'); | ||
| // const classConfig = require('./build/namespaced-classname'); | ||
|
|
||
| module.exports = { | ||
| plugins: [ | ||
| postcssModules({ | ||
| generateScopedName: classConfig, | ||
| getJSON: (cssFileName, json) => { | ||
| /* Ignore generate common polaris tokens style file */ | ||
| if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1) { | ||
| return; | ||
| } | ||
| // plugins: [ | ||
| // postcssModules({ | ||
| // generateScopedName: classConfig, | ||
| // getJSON: (cssFileName, json) => { | ||
| // /* Ignore generate common polaris tokens style file */ | ||
| // if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1) { | ||
| // return; | ||
| // } | ||
|
|
||
| let cssName = path.basename(cssFileName, '.vue'); | ||
| // let cssName = path.basename(cssFileName, '.vue'); | ||
|
|
||
| let projectPath = path.basename(__dirname, './'); | ||
| // let projectPath = path.basename(__dirname, './'); | ||
|
|
||
| const pattern = new RegExp(`${projectPath}/src/components/(.*?)/components`, 'g'); | ||
| let parentName = cssFileName.match(pattern); | ||
| if (parentName) { | ||
| parentName = parentName[0].replace(pattern, '$1'); | ||
| } | ||
| // const pattern = new RegExp(`${projectPath}/src/components/(.*?)/components`, 'g'); | ||
| // let parentName = cssFileName.match(pattern); | ||
| // if (parentName) { | ||
| // parentName = parentName[0].replace(pattern, '$1'); | ||
| // } | ||
|
|
||
| // Fix rollup repeat | ||
| cssName = cssName.replace(/(.*)\.vue\?.*/, '$1'); | ||
| const jsonFileName = path.resolve(`./src/classes/${parentName ? `${parentName}-` : ''}${cssName}.json`); | ||
| fs.writeFileSync(jsonFileName, JSON.stringify(json)); | ||
| }, | ||
| }), | ||
| ], | ||
| // // Fix rollup repeat | ||
| // cssName = cssName.replace(/(.*)\.vue\?.*/, '$1'); | ||
| // const jsonFileName = path.resolve(`./src/classes/${parentName ? `${parentName}-` : ''}${cssName}.json`); | ||
| // fs.writeFileSync(jsonFileName, JSON.stringify(json)); | ||
| // }, | ||
| // }), | ||
| // ], | ||
| }; |
This file contains 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 |
|---|---|---|
| @@ -1,165 +1,18 @@ | ||
| # Polaris Vue (Support Vue 3.0) | ||
| # Vue 3 + TypeScript + Vite | ||
|
|
||
| Polaris Vue by Ownego only supports **Vue 3.0+**. | ||
| This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
|
|
||
| Polaris Vue based on [Shopify Polaris style guide](https://polaris.shopify.com/), built especially for Vue 3. | ||
| We're trying to make it mostly close with Shopify style guide and get a better performance. | ||
| ## Recommended IDE Setup | ||
|
|
||
| **Follow Polaris React version:** [10.12.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.12.0) - Migrated date: *Nov 23rd, 2022*. | ||
| - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). | ||
|
|
||
| --- | ||
| ## Type Support For `.vue` Imports in TS | ||
|
|
||
| We're using this library for our apps and got `Built for Shopify` badge, so hopefully it will be helpful for you too. | ||
| TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. | ||
|
|
||
| <img width="631" alt="Screenshot 2023-07-03 at 15 35 54" src="https://github.com/ownego/polaris-vue/assets/5735071/90b10b70-0113-4633-93bf-678cfe1a92db"> | ||
| If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: | ||
|
|
||
|
|
||
|
|
||
| <br/> | ||
|
|
||
| ## Documentation | ||
|
|
||
| Online documentation: [Click Here](https://ownego.github.io/polaris-vue/) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Installation | ||
|
|
||
| Via NPM: | ||
|
|
||
| ```bash | ||
| npm install @ownego/polaris-vue | ||
| ``` | ||
|
|
||
| Via Yarn: | ||
|
|
||
| ```bash | ||
| yarn add @ownego/polaris-vue | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## Usage | ||
|
|
||
| Use as a Vue 3 plugin (globally registers all components): | ||
|
|
||
| ```js | ||
| //main.js | ||
| import { createApp } from 'vue' | ||
| import PolarisVue from '@ownego/polaris-vue' // (✓) | ||
| import '@ownego/polaris-vue/dist/style.css' // (✓) This will be deprecated in the future, right after Vue 3 supports css injections. | ||
| import App from './App.vue' | ||
|
|
||
| //... | ||
| const app = createApp(App) | ||
| app.use(PolarisVue) // (✓) | ||
| ... | ||
| ``` | ||
|
|
||
| **OR** use individual component: | ||
|
|
||
| ```js | ||
| import { List, Icon } from '@ownego/polaris-vue'; | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ### **AppProvider** | ||
| The AppProvider component is `required` to use PolarisVue. Without it, the components in your application will not function correctly. You must wrap the root (the top) of your application in the app provider component. | ||
|
|
||
| ```javascript | ||
| // App.vue | ||
| <template> | ||
| <AppProvider> | ||
| ... | ||
| </AppProvider> | ||
| </template> | ||
|
|
||
| <script></script> | ||
| ``` | ||
|
|
||
|
|
||
| ## NUXT 3 | ||
|
|
||
| We have tested support for Nuxt 3 in non-SSR mode only. To use with Nuxt 3, follow the below configuration and then use the plugin in your components/pages | ||
|
|
||
| ### Plugin File | ||
|
|
||
| Create a new plugin file at `<project-root>/plugins/polaris.client.ts` and update the content to following | ||
|
|
||
| ```ts | ||
| import PolarisVue from "@ownego/polaris-vue"; | ||
| import "@ownego/polaris-vue/dist/style.css"; | ||
|
|
||
| export default defineNuxtPlugin(nuxtApp => { | ||
| nuxtApp.vueApp.use(PolarisVue); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Nuxt Config | ||
|
|
||
| Update `<project-root>/nuxt.config.ts` to include following config values | ||
|
|
||
| ```ts | ||
| export default defineNuxtConfig({ | ||
| ... | ||
| build: { | ||
| transpile: ["@ownego/polaris-vue"], | ||
| }, | ||
| ... | ||
| }); | ||
| ``` | ||
|
|
||
|
|
||
| ## De-duplicating Vue version | ||
|
|
||
| `PolarisVue`, other packages and your project may require access to the global Vue reference. So sometimes, you may get the runtime error message like: | ||
|
|
||
| ```bash | ||
| TypeError: Cannot read properties of null (reading 'isCE') | ||
| renderSlot(...) | ||
| ... | ||
| ``` | ||
|
|
||
| To avoid this, simply add `dedupe: ['vue']` to your `vite.config.ts` file, like below: | ||
|
|
||
| ```bash | ||
| export default defineConfig({ | ||
| resolve: { | ||
| ... | ||
| dedupe: ['vue'], | ||
| }, | ||
| ... | ||
| }); | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## Developers / Build | ||
|
|
||
| ```bash | ||
| # Clone repo | ||
| git clone https://github.com/ownego/polaris-vue.git | ||
|
|
||
| # Install packages | ||
| yarn | ||
|
|
||
| # Create a Demo.vue file to test | ||
|
|
||
| # Development & Demo | ||
| yarn dev | ||
| ``` | ||
|
|
||
| ## Contributing | ||
|
|
||
| Polaris Vue by Ownego is an open source project and we are very happy to accept community contributions. | ||
|
|
||
| If you notice any bugs, please create issues under [Issues](https://github.com/ownego/polaris-vue/issues). | ||
| We will update the contribution rules later. | ||
|
|
||
| ## License | ||
|
|
||
| Code released under the [MIT License](https://github.com/ownego/polaris-vue/LICENSE). | ||
| Copyright (c) 2021 Ownego | ||
|
|
||
| **Thank you!** :tada: | ||
| 1. Disable the built-in TypeScript Extension | ||
| 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette | ||
| 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` | ||
| 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
This file contains 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
File renamed without changes.
File renamed without changes.
This file contains 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 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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.