Merge pull request #107 from qikify/v3-master

Update docs

Author: juzser

.storybook/main.js

@@ -28,7 +28,7 @@ module.exports = {
     );
 
     return mergeConfig(previousConfig, {
-      ...config,
+      resolve: { ...config.resolve },
       plugins: [
         svgLoader(),
         eslintPlugin({

README.md

@@ -1,4 +1,4 @@
-# Polaris Vue
+# Polaris Vue (Support Vue 3.0)
 
 Polaris Vue by qikify only supports **Vue 3.0.0+**.
 
@@ -36,103 +36,64 @@ yarn add @qikify/polaris-vue
 Use as a Vue 3 plugin (globally registers all components):
 
 ```js
-import Vue from 'vue';
-import PolarisVue from '@qikify/polaris-vue';
-import '@qikify/polaris-vue/dist/polaris-vue.css';
-
-Vue.use(PolarisVue);
-
-new Vue({
-  components: {
-    // all Polaris Vue components already registered
-  }
-});
+//main.js
+import { createApp } from 'vue'
+import PolarisVue from '@qikify/polaris-vue' // (✓)
+import '@qikify/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 Vue from 'vue';
 import { List, Icon } from '@qikify/polaris-vue';
-
-new Vue({
-  components: {
-    List,
-    Icon
-  }
-});
 ```
 
 <br/>
 
-## **Styles**
-
-Polaris Vue supports both **CSS** & **SCSS**, you can find the neccessary styles files in `node_modules/@qikify/polaris-vue/dist/`.
-
-#### **SCSS**
-
-To use scss, you can import the `main.scss` file in your `.vue` or `.scss` file.
-
-Or you can import separated scss files from dist to your project scss file.
-
-Example:
+### **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
-<style lang="scss">
-@import '@qikify/polaris-vue/dist/scss/main.scss';
-</style>
+// App.vue
+<template>
+<AppProvider>
+  ...
+</AppProvider>
+</template>
+
+<script></script>
 ```
 
 <br/>
 
-## Aliasing Vue import
+## De-duplicating Vue version
 
-`PolarisVue` and `PortalVue` require access to the global Vue reference (via `import Vue from 'vue'`).
-
-If you are using a specific build of Vue (i.e. runtime-only vs. compiler + runtime), you will need to set up an alias to `vue` in your bundler config to ensure that your project, **PolarisVue** and **PortalVue** are all using the same build version of Vue. If you are seeing an error such as `$attr and $listeners is readonly`, or `Multiple instances of Vue detected`, then you will need to set up an alias.
-
-<br/>
+`PolarisVue`, other packages and your project may require access to the global Vue reference. So sometimes, you may get the runtime error message like:
 
-Example: Vue alias for `Vue CLI` in `vue.config.js`
-
-```js
-module.exports = {
-  // ...
-  resolve: {
-    alias: {
-      // If using the runtime only build
-      vue$: 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1
-      // Or if using full build of Vue (runtime + compiler)
-      // vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1
-    }
-  }
-}
+```bash
+TypeError: Cannot read properties of null (reading 'isCE')
+renderSlot(...)
+...
 ```
 
-Example: Vue alias in `webpack.config.js`
+To avoid this, simply add `dedupe: ['vue']` to your `vite.config.ts` file, like below:
 
-```js
-const path = require('path')
-
-module.exports = {
-  chainWebpack: config => {
-    config.resolve.alias.set(
-      'vue$',
-      // If using the runtime only build
-      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
-      // Or if using full build of Vue (runtime + compiler)
-      // path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
-    )
-  }
-}
+```bash
+export default defineConfig({
+  resolve: {
+    ...
+    dedupe: ['vue'],
+  },
+  ...
+});
 ```
 
-<br/>
-
-## Components List
-
-See [Component Status](https://qikify.github.io/polaris-vue/?path=/docs/component-status--page) in documentation.
-
 ---
 
 ## Developers / Build
@@ -146,8 +107,8 @@ yarn
 
 # Create a Demo.vue file to test
 
-# Development & Demo - http://localhost:1902
-yarn serve
+# Development & Demo
+yarn dev
 ```
 
 ## Contributing

package.json

@@ -30,7 +30,7 @@
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "rimraf ./docs && build-storybook -o docs"
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.17.0",

src/components/InlineError/README.stories.mdx

@@ -1,3 +1,4 @@
+import dedent from 'ts-dedent';
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import { InlineError } from '@/polaris-vue';
@@ -9,7 +10,7 @@ import { InlineError } from '@/polaris-vue';
     message: {
       control: { type: 'text' },
       table: {
-        type: { summary: 'String | Vue Component' },
+        type: { summary: 'string | component' },
       },
     },
     default: {
@@ -20,10 +21,10 @@ import { InlineError } from '@/polaris-vue';
   }}
 />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+export const Template = (args) => ({
   components: { InlineError },
-  template: `<InlineError v-bind="$props"/>`,
+  setup() { return { args }; },
+  template: `<InlineError v-bind="args"/>`,
 });
 
 # Inline error
@@ -38,13 +39,12 @@ Use inline errors to help merchants understand why a form input may not be valid
       message: 'Store name is required',
       fieldID: 'myFieldID'
     }}
-    parameters={{
+    parameters = {{
       docs: {
-        transformSource: (source) => {
-          const tmpSource = source
-            .replace(/<template>/, '')
-            .replace(/<\/template>/, '');
-          return tmpSource;
+        source: {
+          code: dedent`
+            <InlineError fieldID="myFieldID" message="Store name is required"/>
+          `,
         },
       },
     }}