Upgrade

.github/workflows/deploy-beta.yml

@@ -0,0 +1,28 @@
+name: Deploy to npm as beta
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.x
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          registry-url: https://registry.npmjs.org/
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm build
+      - name: Publish to npm
+        run: pnpm publish --tag beta --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,38 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: "Chromatic Publish"
+
+# Event for the workflow
+on:
+  push:
+    branches: [dev]
+  workflow_dispatch:
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 8.x
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: install dependencies
+        run: pnpm install
+      - name: build package
+        run: pnpm build
+      #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken,
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          autoAcceptChanges: true

.github/workflows/deploy.yml

@@ -0,0 +1,29 @@
+name: Deploy to npm
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.x
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          registry-url: https://registry.npmjs.org/
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm build
+      - name: Publish to npm
+        run: pnpm publish --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/deprecate-version.yml

@@ -0,0 +1,30 @@
+name: Deprecate version of package from npm
+
+on:
+  workflow_dispatch:
+    inputs:
+      VERSION:
+        description: "Version to deprecate"
+        required: true
+      MESSAGE:
+        description: "Deprecation message"
+        required: false
+        default: "This version is deprecated, please use the latest stable version"
+
+env:
+  LIBRARY_NAME: vue-mindee-js
+
+jobs:
+  deprecate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.x
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          registry-url: https://registry.npmjs.org
+      - run: pnpm deprecate $LIBRARY_NAME@${{ inputs.VERSION }} ${{ inputs.MESSAGE }}}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tests.yml

@@ -0,0 +1,21 @@
+name: Run tests on PRs
+
+on:
+  pull_request:
+
+jobs:
+  run-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 8.x
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          config-file: cypress.json
+          build: pnpm cy:prepare
+          command: pnpm cy:run

.gitignore

@@ -5,3 +5,6 @@ build
 .vscode
 .docz
 .netlify
+storybook-static
+*.log
+build-*

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/vue3";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+## v1.4.0 (06/11/2023)
+
+### New
+
+- ✅ Add new unit tests
+- ✨ setup chromatic for storybook
+- ✨ Set up Cypress workflow and update package.json scripts
+- ✨ Import changes and added Storybook scripts.
+
+### Changes
+
+- 🔧 replace yarn by pnpm and update package.json with new scripts
+- 🔥 Remove unused code for rotating images
+
 ## v1.3.1 (22/04/2022)
 
 ### New
@@ -10,7 +24,7 @@
 
 ### Changes
 
-- 💥 replace web-components by pure React components
+- 💥 replace web-components by pure Vue components
 - 💥 Change AnnotationViewer & AnnotationLens props
 - ♻️ refactor utility functions code
 - ⚡️ improve canvas rendering performance

CONTRIBUTING.md

@@ -80,5 +80,5 @@ Example:
 
 ### JavaScript Styleguide
 
-We keep our code base consistent and we expect React/JavaScript code to must adhere to [JavaScript Standard Style](https://standardjs.com/).
+We keep our code base consistent and we expect Vue/JavaScript code to must adhere to [JavaScript Standard Style](https://standardjs.com/).
 When possible, adding [flow](https://flow.org/) types is also expected.

README.md

@@ -1,4 +1,4 @@
-# Check [Vue mindee documentation](https://vue-mindee-js.netlify.app) for docs, guides, API and more!
+# Check [Vue mindee documentation](https://vue-mindee-js.netlify.app) and [Storybook](https://6544f0ebd09f956e0a9f10f3-tynzmijvtv.chromatic.com) for docs, guides, API and more!
 
 # Introduction
 
@@ -36,18 +36,14 @@ npm install --save vue-mindee-js
 or using yarn
 
 ```
-yarn add vue-mindee-js
+pnpm install vue-mindee-js
 ```
 
 ## Usage
 
 You only need an image and a list of shapes to get started.
 
 ```jsx
-<template>
-  <AnnotationViewer :data="data" />
-</template>
-
 <script>
 import { AnnotationViewer } from "vue-mindee-js";
 import dummyImage from "path/to/file.jpg";
@@ -73,22 +69,17 @@ const dummyShapes = [
   },
 ]
 
-export default {
-  name: "App",
-  components: {
-    AnnotationViewer,
-  },
-  data: function () {
-    return {
-      data: {
-        image: dummyImage,
-        shapes: dummyShapes,
-      },
-    };
-  },
+const data = {
+  image: dummyImage,
+  shapes: dummyShapes,
+  orientation: 0,
 };
 </script>
 
+<template>
+  <AnnotationViewer :data="data" />
+</template>
+
 ```
 
 ## Props

cypress.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "cypress";
+import { addMatchImageSnapshotPlugin } from "cypress-image-snapshot/plugin";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig as defineViteConfig } from "vite";
+
+export default defineConfig({
+  viewportWidth: 1500,
+  viewportHeight: 900,
+  video: false,
+  screenshotOnRunFailure: false,
+
+  retries: {
+    runMode: 3,
+    openMode: 0,
+  },
+
+  component: {
+    setupNodeEvents(on, config) {
+
+      addMatchImageSnapshotPlugin(on, config);
+
+      return config;
+    },
+    specPattern: "**/*.spec.{js,ts,jsx,tsx}",
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+});

cypress/assets/shapes.ts

@@ -1,4 +1,4 @@
-import { AnnotationShape } from "vue-mindee-js";
+import { AnnotationShape } from "@/index";
 
 export const dummyShapes: AnnotationShape[] = [
   {

cypress/helpers/AnnotationLensTester.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import {
-  AnnotationLens,
-  PointerPosition,
-  AnnotationData,
-  AnnotationLensProps,
-} from "../../dist";
+import { AnnotationLens, PointerPosition, AnnotationData } from "@/index";
 import { dummyShapes } from "../assets/shapes";
 import demo from "../assets/demo.jpg";
 import anotherDemo from "../assets/another-demo.jpg";