@worksafevictoria/wcl7.5 v1.5.0

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

Deployment Process - Hotfix

Deployment Process - Release

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