@worksafevictoria/wcl7.5 1.0.0

package/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.env

@@ -0,0 +1,4 @@
+CONTENT_API_URL=https://content-staging-v2.api.worksafe.vic.gov.au
+IS_STORYBOOK=TRUE
+SHOW_COOKIE=false
+GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160

package/.eslintrc.cjs

@@ -0,0 +1,10 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier/skip-formatting', 'plugin:storybook/recommended'],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

package/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 6,
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  extends: [
+    'plugin:vue/recommended',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended'
+  ],
+  plugins: ['prettier'],
+  rules: {
+    'vue/component-name-in-template-casing': [
+      'error',
+      'kebab-case',
+      {
+        registeredComponentsOnly: true,
+        ignores: []
+      }
+    ]
+  }
+}

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "arrowParens": "always",
+  "singleQuote": true
+}

package/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

package/.storybook/main.js

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

package/.storybook/preview.js

@@ -0,0 +1,34 @@
+/** @type { import('@storybook/vue3').Preview } */
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './../src/assets/styles/stylesheet.scss'
+import { setup } from '@storybook/vue3'
+
+setup((app) => {
+  app.component('NuxtLink', {
+    props: {
+      to: {
+        type: String,
+        required: true
+      }
+    },
+    template: '<a target="_blank" :href="`https://ws-ui.wsvdigital.com.au${this.to}`"><slot></slot></a>'
+  })
+})
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS
+    }
+  }
+}
+
+export default preview

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WorkSafe Victoria
+
+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.

package/README.md

@@ -0,0 +1,159 @@
+# WorkSafe Component Library SB7 (for Storybook 7)
+
+This repo is based on Vue 3 in Vite, and Storybook 7.  It contains all the common components used on the [WorkSafe Victoria](https://www.worksafe.vic.gov.au) public website.
+
+## Minimum Requirements
+
+1. Yarn -> Latest (Needed for workspaces)
+2. Node -> latest version 18.19.0
+3. VSCode preferred
+4. ESLint should be installed globally (npm install -g eslint)
+5. Vue Dev tools plugin for Chrome / Firefox
+6. Bootstrap-Vue-Next required (npm i bootstrap-vue-next)
+7. Accessibility Add-on (yarn add @storybook/addon-a11y --dev)
+8. Vite SVG Loader (npm install vite-svg-loader --save-dev)
+
+## Fresh Install
+
+    git clone <this-repo>
+    chmod +x bin/clean.sh
+    yarn reinstall
+
+## Run Dev
+
+    yarn storybook
+
+## Build
+
+    yarn build-storybook
+
+## Deploy
+
+    chmod +x bin/deploy.sh
+    yarn deploy
+
+## Release - Dry run
+
+    yarn dryrun
+
+## Release
+
+    yarn release
+
+### Usage Instructions - Yarn - recommended
+
+    yarn add @worksafevictoria/wcl
+
+### Usage Instructions - npm
+
+    npm i @worksafevictoria/wcl
+
+### Nuxt - if you have errors after importing
+
+    # nuxt.config.js
+
+    build {
+      transpile: ['@worksafevictoria/wcl', 'xxx', 'xxx', 'xxx']
+    }
+
+#### Import example
+
+    <template>
+      <container>
+        <row>
+          <column :md="6">
+            <cta-button @clicked="$emit('nextScreen')">Start</cta-button>
+          </column>
+        </row>
+      </container>
+    </template>
+
+    <script>
+      import { Container, Column, Row, CtaButton } from '@worksafevictoria/wcl'
+      export default {
+        components: { Container, Column, Row, CtaButton }
+      }
+    </script>
+
+    <style lang="scss" scoped>
+      @import './styles';
+    </style>
+
+## Deployment Process - Beta
+
+<ol>
+  <li>Checkout beta</li>
+  <li>Create a fresh branch from beta <code>feat/JIRA-ID</code></li>
+  <li>....Add changes....</li>
+  <li>After commits are added to this branch merge <code>beta</code> into <code>feat/JIRA-ID</code></li>
+</li>
+  <li><code>yarn test</code></li>
+  <li>Create Pull Request from <code>feat/JIRA-ID</code> to <code>beta</code></li>
+  <li>Request code review from fellow FE Developers </li>
+  <li>Merge <code>feat/JIRA-ID</code> into <code>Beta</code> </li>
+</ol>
+
+## Deployment Process - Hotfix
+
+<ol>
+  <li>Checkout release</li>
+  <li>Create a fresh branch from release <code>hotfix/JIRA-ID</code></li>
+  <li>....Add changes....</li>
+  <li>After commits are added to this branch merge <code>release</code> into <code>feat/JIRA-ID</code></li>
+</li>
+  <li><code>yarn test</code></li>
+  <li>Create Pull Request from <code>feat/JIRA-ID</code> to <code>release</code></li>
+  <li>Request code review from fellow FE Developers </li>
+  <li>Merge <code>feat/JIRA-ID</code> into <code>release</code></li>
+  <li>Approve and release npm deployment from the release pipeline</li>
+  <li>Manually add your changes to <code>beta</code> using the steps for "Deployment Process - Beta"</li>
+</ol>
+
+## Deployment Process - Release
+
+<ol>
+  <li>Create Pull Request from <code>beta</code> to <code>release</code></li>
+  <li>Request code review from <code>@worksafedigital</code></li>
+  <li>Merge <code>feat/JIRA-ID</code> into <code>release</code></li>
+  <li>Approve and release npm deployment from the release pipeline</li>
+</ol>
+
+------------------------------------------------------------------------------------------------
+## Instructions linked to Vue 3/Storybook 7 template
+## Recommended IDE Setup
+
+[VSCode](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).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

package/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: ['@babel/preset-env'],
+  plugins: [
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }]
+  ]
+}

package/bin/clean.sh

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+
+#****************************
+# WSV Website Fresh Installer
+#****************************
+
+cd $(dirname $0)
+
+spinner() {
+    local i sp n
+    sp='/-\|'
+    n=${#sp}
+    echo ""
+    echo ""
+    echo ""
+    while sleep 0.1; do
+        printf "%s\b" "${sp:i++%n:1}"
+    done
+}
+
+spinner &
+
+echo ""
+echo \#*****************************
+echo \# WSV Websites Fresh Installer
+echo \#*****************************
+echo ""
+
+echo Deleting yarn.lock
+rm -rf ../yarn.lock
+echo Done
+echo ""
+
+echo Deleting yarn-error.log
+rm -rf ../yarn-error.log
+echo Done
+echo ""
+
+echo Deleting node_modules
+rm -rf ../node_modules
+echo Done
+echo ""
+
+echo Deleting storybook-static
+rm -rf ../storybook-static
+echo Done
+echo ""
+
+echo Running yarn
+echo Happy fixing! \#devLife
+echo ""
+kill "$!" # kill the spinner

package/bin/deploy.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+
+echo ""
+echo \#*****************************
+echo \# WCL Storybook Deployer
+echo \#*****************************
+echo ""
+
+# Reset Dir
+cd $(dirname $0)
+
+# Clean
+rm -rf ../storybook-static
+
+# Build
+cd ..
+yarn build
+
+# Add CNAME to build
+cd storybook-static
+echo "ws-ui-sb7.wsvdigital.com.au" > ../storybook-static/CNAME
+
+# Deploy to GH-Pages
+cd ..
+node node_modules/gh-pages/bin/gh-pages.js -d storybook-static

package/ci/build/Build_Validation.md

@@ -0,0 +1,35 @@
+# Build Validation for Pull Requests
+
+This YAML code is used to set up a build validation process for pull requests. It will run a series of tasks to ensure that the code is valid and ready to be merged.
+
+## Variables
+
+The following variables are used in this YAML code:
+
+- `group`: This is the group that the project belongs to. In this case, it is the Public Websites - Front End group.
+
+## Resources
+
+The following resources are used in this YAML code:
+
+- `repository`: This is the repository that the code will be pulled from. In this case, it is the same repository that the code is being pushed to.
+- `type`: This is the type of repository that the code will be pulled from. In this case, it is a git repository.
+- `ref`: This is the reference that the code will be pulled from. In this case, it is the beta branch.
+
+## Jobs
+
+The following jobs are used in this YAML code:
+
+- `Build_Test_Dryrun`: This job will run a series of tasks to build, test, and perform a dry run of the code.
+  - `vmImage`: This is the virtual machine image that will be used to run the tasks. In this case, it is an Ubuntu-latest image.
+  - `checkout`: This task will check out the code from the repository.
+  - `NodeTool`: This task will use Node 16.x.
+  - `CmdLine`: This task will install the dependencies, build the code, and run the unit tests.
+  - `script`: This task will perform a dry run of the code.
+
+## Environment Variables
+
+The following environment variables are used in this YAML code:
+
+- `GITHUB_TOKEN`: This is the GitHub token used to authenticate the user.
+- `NPM_TOKEN`: This is the NPM token used to authenticate the user.

package/ci/build/build_validation.yml

@@ -0,0 +1,47 @@
+########################################################
+# Author: Yavisht Katgara
+# Email: yavisht_katgara@worksafe.vic.gov.au
+# Project: Worksafe Public Website - Front End
+# Description: Build Validation for Pull Requests
+########################################################
+
+variables:
+  - group: Public Websites - Front End
+resources:
+  repositories:
+    - repository: self
+      type: git
+      ref: refs/heads/beta
+jobs:
+  - job: Build_Test_Dryrun
+    displayName: Build - Test - DryRun
+    pool:
+      vmImage: ubuntu-latest
+    steps:
+      - checkout: self
+        fetchTags: true
+      - task: NodeTool@0
+        displayName: Use Node 18.x
+        inputs:
+          versionSpec: 18.x
+      - task: CmdLine@2
+        displayName: Install
+        inputs:
+          script: |
+            set -e
+            npm i -g husky
+            npm i -g pinst
+            yarn install
+      - task: CmdLine@2
+        displayName: Build
+        inputs:
+          script: yarn build
+      - task: CmdLine@2
+        displayName: Unit Test
+        inputs:
+          script: yarn test
+      - script: 'npm run dryrun'
+        displayName: 'Perform Dry Run'
+        env:
+          GITHUB_TOKEN: $(GH_TOKEN)
+          NPM_TOKEN: $(NPM_TOKEN)

package/ci/release/Release_Beta.md

@@ -0,0 +1,39 @@
+# NPM Publish Beta Pipeline
+
+This YAML code is used to publish a beta release of the Worksafe Component Library to NPM and deploy the Storybook website to GitHub Pages.
+
+## Variables
+
+The following variables are used in this YAML code:
+
+- `group`: Public Websites - Front End
+
+## Resources
+
+The following resources are used in this YAML code:
+
+- `repository`: self
+  - `type`: git
+  - `ref`: refs/heads/beta
+
+## Stages
+
+The following stages are used in this YAML code:
+
+### Publish to NPM - Beta
+
+This stage is used to publish the beta release to NPM. It includes the following steps:
+
+- Checkout the repository
+- Use Node 18.x
+- Run `npm i -g pinst` and `npx semantic-release` to publish the beta release
+
+### Publish Storybook
+
+This stage is used to deploy the Storybook website to GitHub Pages. It includes the following steps:
+
+- Checkout the repository
+- Use Node 16.x
+- Setup the Git repository
+- Install dependencies
+- Deploy to GitHub Pages

package/ci/release/Release_Master.md

@@ -0,0 +1,29 @@
+# NPM Publish Release Pipeline
+
+This YAML code is used to publish a beta release of the Worksafe Component Library to NPM @latest
+
+## Variables
+
+The following variables are used in this YAML code:
+
+- `group`: Public Websites - Front End
+
+## Resources
+
+The following resources are used in this YAML code:
+
+- `repository`: self
+  - `type`: git
+  - `ref`: refs/heads/beta
+
+## Stages
+
+The following stages are used in this YAML code:
+
+### Publish to NPM - Beta
+
+This stage is used to publish the beta release to NPM. It includes the following steps:
+
+- Checkout the repository
+- Use Node 18.x
+- Run `npm i -g pinst` and `npx semantic-release` to publish the beta release

package/ci/release/beta.yml

@@ -0,0 +1,69 @@
+#######################################################
+# Author: Yavisht Katgara
+# Email: yavisht_katgara@worksafe.vic.gov.au
+# Project: Worksafe Public Website - Front End
+# Description: Publish beta release to NPM
+#######################################################
+
+variables:
+  - group: Public Websites - Front End
+resources:
+  repositories:
+    - repository: self
+      type: git
+      ref: refs/heads/beta
+stages:
+  - stage: publish_npm_beta
+    jobs:
+      - deployment: publish_to_npm_beta
+        displayName: Publish to NPM - Beta
+        environment: Public Websites - Front End
+        strategy:
+          runOnce:
+            deploy:
+              steps:
+                - checkout: self
+                - task: NodeTool@0
+                  displayName: Use Node 20.x
+                  inputs:
+                    versionSpec: 20.x
+
+                - script: |
+                    set -e
+                    npm i -g husky
+                    npm i -g pinst
+                    npx semantic-release
+                  displayName: 'NPM Publish Beta Release'
+                  env:
+                    GITHUB_TOKEN: $(GH_TOKEN)
+                    NPM_TOKEN: $(NPM_TOKEN)
+
+  - stage: publish_storybook
+    jobs:
+      - job: publish_storybook_website
+        displayName: Publish Storybook
+        steps:
+          - checkout: self
+          - task: NodeTool@0
+            displayName: Use Node 18.x
+            inputs:
+              versionSpec: 18.x
+
+          - task: CmdLine@2
+            displayName: Setup Git Repo
+            inputs:
+              script: |
+                git remote remove origin
+                git config --global user.email "webupdates@worksafe.vic.gov.au"
+                git config --global user.name "worksafedigital"
+                git remote add origin https://$(GH_TOKEN)@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7
+                git fetch origin
+          - task: CmdLine@2
+            displayName: Install dependencies
+            inputs:
+              script: 'yarn'
+
+          - task: CmdLine@2
+            displayName: Deploy to GitHub Pages
+            inputs:
+              script: 'yarn deploy'

package/ci/release/master.yml

@@ -0,0 +1,39 @@
+#######################################################
+# Author: Yavisht Katgara
+# Email: yavisht_katgara@worksafe.vic.gov.au
+# Project: Worksafe Public Website - Front End
+# Description: Publish latest release to NPM
+#######################################################
+
+variables:
+  - group: Public Websites - Front End
+resources:
+  repositories:
+    - repository: self
+      type: git
+      ref: refs/heads/master
+stages:
+  - stage: publish_npm_beta
+    jobs:
+      - deployment: publish_to_npm_master
+        displayName: Publish to NPM - Master
+        environment: Public Websites - Front End
+        strategy:
+          runOnce:
+            deploy:
+              steps:
+                - checkout: self
+                - task: NodeTool@0
+                  displayName: Use Node 20.x
+                  inputs:
+                    versionSpec: 20.x
+
+                - script: |
+                    set -e
+                    npm i -g husky
+                    npm i -g pinst
+                    npx semantic-release
+                  displayName: 'NPM Publish Master Release'
+                  env:
+                    GITHUB_TOKEN: $(GH_TOKEN)
+                    NPM_TOKEN: $(NPM_TOKEN)

package/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>