@worksafevictoria/wcl7.5

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 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

Note:  When building storybook, there is a dependency on a .nojekyll file in order for Storybook to display stories.

Deploy

chmod +x bin/deploy.sh
yarn deploy

Release - Dry run

yarn dryrun

Release

yarn release

Usage Instructions - Yarn - recommended

yarn add @worksafevictoria/wcl7.5

Usage Instructions - npm

npm i @worksafevictoria/wcl7.5

Nuxt - if you have errors after importing

# nuxt.config.js

build {
  transpile: ['@worksafevictoria/wcl7.5', 'xxx', 'xxx', 'xxx']
}

Usage Instructions - environment variables

For environment variables to be recognised, they must be added to the vite.config.js to the existing list under 'define', eg

  .env:

    IS_STORYBOOK=TRUE

  .vite.config.js:

    'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,

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/wcl7.5'
  export default {
    components: { Container, Column, Row, CtaButton }
  }
</script>

<style lang="scss" scoped>
  @import './styles';
</style>

Deployment Process - Beta

1. Checkout beta
2. Create a fresh branch from beta feat/JIRA-ID
3. ....Add changes....
4. After commits are added to this branch merge beta into feat/JIRA-ID
5. yarn test
6. Create Pull Request from feat/JIRA-ID to beta
7. Request code review from fellow FE Developers
8. Merge feat/JIRA-ID into Beta

Deployment Process - Hotfix

1. Checkout release
2. Create a fresh branch from release hotfix/JIRA-ID
3. ....Add changes....
4. After commits are added to this branch merge release into feat/JIRA-ID
5. yarn test
6. Create Pull Request from feat/JIRA-ID to release
7. Request code review from fellow FE Developers
8. Merge feat/JIRA-ID into release
9. Approve and release npm deployment from the release pipeline
10. Manually add your changes to beta using the steps for "Deployment Process - Beta"

Deployment Process - Release

1. Create Pull Request from beta to release
2. Request code review from @worksafedigital
3. Merge feat/JIRA-ID into release
4. Approve and release npm deployment from the release pipeline

---

Instructions linked to Vue 3/Storybook 7 template

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint