Feat/chromatic support

.github/workflows/chromatic.yml

@@ -0,0 +1,28 @@
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        # Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          workingDir: packages/ui
+          exitZeroOnChanges: true
+          storybookBaseDir: packages/ui
+          projectToken: chpt_0b6e7d8b20a17cf
+          buildScriptName: build:storybook

.github/workflows/codeql-analysis.yml

@@ -38,34 +38,34 @@ jobs:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 dist
 storybook-static
+build-storybook.log
 .nuxt
 packages/create-vuestic/vuestic-app
 

packages/ui/package.json

@@ -40,7 +40,8 @@
     "server:webapp": "npx http-server dist --push-state",
     "serve:storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
-    "start:storybook": "serve storybook-static"
+    "start:storybook": "serve storybook-static",
+    "chromatic": "npx chromatic --build-script-name=build:storybook --project-token=chpt_0b6e7d8b20a17cf"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
@@ -61,7 +62,6 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
-    "storybook-dark-mode": "^3.0.0",
     "@storybook/addon-links": "^7.1.0",
     "@storybook/blocks": "^7.1.0",
     "@storybook/testing-library": "^0.0.14-next.2",
@@ -85,8 +85,11 @@
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "2.0.0-beta.14",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.3",
     "babel-loader": "^8.2.1",
     "c8": "^7.12.0",
+    "chromatic": "^6.21.0",
     "core-js": "^3.8.2",
     "cross-env": "^7.0.2",
     "css-minimizer-webpack-plugin": "^3.0.0",
@@ -119,6 +122,7 @@
     "sass-loader": "^10.1.0",
     "semver": "^7.3.5",
     "storybook": "^7.1.0",
+    "storybook-dark-mode": "^3.0.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
@@ -130,7 +134,6 @@
     "vue": "^3.0.4",
     "vue-loader": "^16.3.0",
     "vue-tsc": "^1.2.0",
-    "vuelidate": "^0.7.5",
     "webpack": "^5.4.1",
     "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^4.9.2",
@@ -184,4 +187,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-aspect-ratio/VaAspectRatio.demo.vue

@@ -3,7 +3,7 @@
     <VbCard title="16/9 for image">
       <va-image
         style="width: 300px;"
-        src="https://picsum.photos/200/200"
+        src="https://picsum.photos/id/450/200/200"
         :ratio="16/9"
       />
     </VbCard>

packages/ui/src/components/va-card/VaCard.demo.vue

@@ -205,7 +205,7 @@
         <div class="flex flex-col">
           <va-card class="mr-6" style="width: 400px;">
             <va-card-block horizontal>
-              <va-image class="flex flex-col md6" src="https://picsum.photos/200/280" />
+              <va-image class="flex flex-col md6" src="https://picsum.photos/id/450/200/280" />
               <div class="flex flex-col md6">
                 <va-card-title>Title</va-card-title>
                 <va-card-content>
@@ -218,7 +218,7 @@
         <div class="flex flex-col">
           <va-card style="width: 300px;">
             <va-card-block horizontal>
-              <va-image class="flex flex-col" style="flex: 1 0;" src="https://picsum.photos/250/250" />
+              <va-image class="flex flex-col" style="flex: 1 0;" src="https://picsum.photos/id/450/250/250" />
               <va-card-actions class="flex flex-col" vertical align="center">
                 <va-button icon="heart" size="small" color="success" plain />
                 <va-button icon="bookmark" size="small" plain />
@@ -248,7 +248,7 @@
         <va-config :components="{VaCardTitle: {textColor: 'info'}}">
           <va-card style="width: 400px; margin-left: 1rem;">
             <va-image
-              src="https://picsum.photos/400/200"
+              src="https://picsum.photos/id/450/400/200"
               style="height: 200px;"
             />
             <va-card-title>Card w image</va-card-title>

packages/ui/src/components/va-carousel/VaCarousel.demo.vue

@@ -77,11 +77,11 @@ export default {
     return {
       currentSlide: 0,
       items: [
-        'https://picsum.photos/1500',
-        'https://picsum.photos/1501',
-        'https://picsum.photos/1502',
-        'https://picsum.photos/1503',
-        'https://picsum.photos/1504',
+        'https://picsum.photos/id/450/1500',
+        'https://picsum.photos/id/450/1501',
+        'https://picsum.photos/id/450/1502',
+        'https://picsum.photos/id/450/1503',
+        'https://picsum.photos/id/450/1504',
       ],
     }
   },

packages/ui/src/components/va-form/VaFormValidationLib.demo.vue

@@ -7,30 +7,30 @@
       <va-form ref="vuelidateForm">
         <va-input
           label="required name"
-          v-model="$v.name.$model"
-          :error="$v.name.$error"
+          v-model="v$.name.$model"
+          :error="v$.name.$error"
           :error-messages="[
-            !$v.name.required && 'required',
-            !$v.name.minLength && `Name must have at least ${$v.name.$params.minLength.min} letters.`
+            !v$.name.required && 'required',
+            !v$.name.minLength && `Name must have at least ${v$.name.$params.minLength.min} letters.`
           ]"
         />
         <va-input
           label="required age"
-          v-model="$v.age.$model"
-          :error="$v.age.$error"
+          v-model="v$.age.$model"
+          :error="v$.age.$error"
           :error-messages="[
-            !$v.age.required && 'required',
-            !$v.age.numeric && 'Age must be a number',
-            !$v.age.between && 'Age must be between 10 and 100'
+            !v$.age.required && 'required',
+            !v$.age.numeric && 'Age must be a number',
+            !v$.age.between && 'Age must be between 10 and 100'
           ]"
         />
         <va-input
           label="required email"
-          v-model="$v.email.$model"
-          :error="$v.email.$error"
+          v-model="v$.email.$model"
+          :error="v$.email.$error"
           :error-messages="[
-            !$v.email.required && 'required',
-            !$v.email.email && 'Email must be correct'
+            !v$.email.required && 'required',
+            !v$.email.email && 'Email must be correct'
           ]"
         />
         <button @click="$refs.vuelidateForm.reset()">
@@ -41,40 +41,33 @@
   </VbDemo>
 </template>
 
-<script>
+<script setup>
 import { VaForm } from './index'
 import { VaInput } from '../va-input'
+import { reactive } from 'vue'
 
-import { validationMixin } from 'vuelidate'
-import { required, minLength, email, between, numeric } from 'vuelidate/lib/validators'
+import { required, minLength, email, between, numeric } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
 
-export default {
-  mixins: [validationMixin],
-  components: {
-    VaForm,
-    VaInput,
+const state = reactive({
+  name: '',
+  age: 0,
+  email: '',
+})
+const rules = {
+  name: {
+    required,
+    minLength: minLength(4),
   },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(4),
-    },
-    email: {
-      required,
-      email,
-    },
-    age: {
-      required,
-      numeric,
-      between: between(10, 100),
-    },
+  email: {
+    required,
+    email,
   },
-  data () {
-    return {
-      name: '',
-      age: 0,
-      email: '',
-    }
+  age: {
+    required,
+    numeric,
+    between: between(10, 100),
   },
 }
+const v$ = useVuelidate(rules, state)
 </script>

packages/ui/src/components/va-image/VaImage.demo.vue

@@ -165,7 +165,7 @@ import { VaImage } from './index'
 
 const slotImageSize = ref(1500)
 
-const getImagePath = (width, height = 0) => `https://picsum.photos/${width}/${height || width}`
+const getImagePath = (width, height = 0) => `https://picsum.photos/id/450/${width}/${height || width}`
 const newImage = () => (slotImageSize.value = slotImageSize.value !== 1500 ? 1500 : 1501)
 const wrongPath = () => (slotImageSize.value = -1)
 

packages/ui/src/components/va-rating/components/VaRatingItem/VaRatingItem.demo.vue

@@ -61,10 +61,10 @@
         {{ slotValue }}
       </div>
       <va-rating-item halves hover :modelValue="slotValue" @click="slotValue = $event">
-        <template v-slot="{ props }">
-          <button @click="props.onClick" v-if="props.value === 1">Active</button>
-          <button @click="props.onClick" v-if="props.value === 0.5">Halfed</button>
-          <button @click="props.onClick" v-if="props.value === 0">Blank</button>
+        <template v-slot="{ onClick, value }">
+          <button @click="onClick" v-if="value === 1">Active</button>
+          <button @click="onClick" v-if="value === 0.5">Halfed</button>
+          <button @click="onClick" v-if="value === 0">Blank</button>
         </template>
       </va-rating-item>
     </VbCard>

packages/ui/src/components/va-tree-view/VaTreeView.demo.vue

@@ -380,14 +380,14 @@ export default {
             id: 2,
             label: 'Photo',
             description: 'This item works so well with the other one.',
-            image: 'https://picsum.photos/100',
+            image: 'https://picsum.photos/id/450/100',
             hasAction: true,
           },
           {
             id: 3,
             label: 'Emoji',
             description: 'This item corresponds the first item perfectly.',
-            image: 'https://picsum.photos/100',
+            image: 'https://picsum.photos/id/450/100',
             hasAction: true,
           },
           {

packages/ui/src/components/va-viewer/VaViewer.demo.vue

@@ -68,5 +68,5 @@
 <script setup>
 import { VaImage, VaViewer, VaIcon } from '../'
 
-const getImagePath = (width, height = 0) => `https://picsum.photos/${width}/${height || width}`
+const getImagePath = (width, height = 0) => `https://picsum.photos/id/450/${width}/${height || width}`
 </script>