Skip to content

Commit

Permalink
Readme update post repo name change
Browse files Browse the repository at this point in the history
  • Loading branch information
duttonw committed Jun 5, 2024
1 parent be900b7 commit 256ba35
Showing 1 changed file with 96 additions and 46 deletions.
142 changes: 96 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,78 +1,128 @@
# Queensland Online Design System development space
# Queensland Government Design System - Bootstrap 5 - Edition
A Queensland Online - Design System development space

Please see [For Gov - Queensland Government Design System](https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/queensland-government-design-system) for more details.

This is a BS5 flavour based on [QGDS Figma Design](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?m=auto&node-id=6902-69802&t=q6FMpeH4XPs1hjP1-1). <br/>
Qld Health edition can be found at [design-system.health.qld.gov.au](https://www.design-system.health.qld.gov.au/).

This includes:
- Public NPM Release packages:
- https://www.npmjs.com/package/@qld-gov-au/qgds-bootstrap5
- https://github.com/qld-gov-au/qgds-bootstrap5/pkgs/npm/qgds-bootstrap5
- Squiz Git bridge dist/binary repo: https://github.com/qld-gov-au/qgds-bootstrap5-release
- Git CDN repo: https://github.com/qld-gov-au/qgds-bootstrap5-cdn

## Extends Bootstrap 5.3

## Technical overview

- ES6 Javascript
- ESbuild for bundling, minification and transpiling
- Storybook for component development
- Storybook for component development and documentation
- Mustache JS / Handlebars JS for component and HTML templating
- Figma for design and prototyping
- CSS/SCSS, extending Bootstrap 5.3 core components with custom CSS properties
- NPM for package management

# Getting started

## 1. Download
## Documentation

```bash
git clone https://github.com/qld-gov-au/qgds-qol-mvp
```
- Storybook examples available at [https://qld-gov-au.github.io/qgds-bootstrap5/](https://qld-gov-au.github.io/qgds-bootstrap5/)

## 2. Setup

### Prerequisites
## Development Getting started

- Node 18.17.1+
- NPM 10.2.5+
### Personal Development
This repo is designed to allow easy forking. <br/>
Do enable GitHub Actions post forking and GitHub pages via GitHub actions <br/>
Also do configure your own personal chromatic to ease development in providing delta change diff-ing.

### Install dependencies
We welcome external contributors, so don't be afraid to raise PR's back to this repo for inclusion into core deployment + cdn repo.

```bash
npm install
```

### Build the Desing System CSS, Components and templates
### GitHub Actions
This repo includes many workflows to reduce developer overheads. This includes but not limited to:
* CICD on all commit's and PR's
* GitHub io static document deployment based on develop/main
* Dependabot auto patching + storybook upgrade feature
* One click npm versioning publish (patch, minor, major) **
* Auto generate release notes based on PR's created (On version Tag)
* Npm js package publish (On version Tag) ***
* GitHub package Publish (On version Tag) ****

```bash
npm run build
```
** Must configure GitHub service account ssh private key loaded into GitHub actions secret ``DEPLOY_KEY``<br/>
*** Must have npm js token loaded into GitHub actions secrets ``NPM_TOKEN`` to allow publishing.<br/>
**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step ``Update package scope, export package name``.

### Watch for changes and rebuild automatically
### Quick build
If you hava java and maven installed. This will pull in a local node/npm version and run through the full lifecycle build.

```bash
npm run watch
git clone https://github.com/qld-gov-au/qgds-bootstrap5
cd qgds-bootstrap5
mvn install
```

### Start Storybook for component development and watch

```bash
npm run dev-storybook
```

### Start a local server from /dist folder

```bash
npm run serve
```

### Next steps

- HTML templating using drop in components
### Standard build
1. Download

If you wish to use the includes handle bars, please ensure
"handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
- Dev build and testing branching

## Documentation

- Storybook examples available at [https://qld-gov-au.github.io/qgds-qol-mvp/](https://qld-gov-au.github.io/qgds-qol-mvp/)
```bash
git clone https://github.com/qld-gov-au/qgds-bootstrap5
```

2. Setup

Prerequisites
- Node 18.17.1+
- NPM 10.2.5+

3. Install dependencies

```bash
npm install
```

4. Build the Design System CSS, Components and templates

```bash
npm run build
```

6. Start Watch and Storybook for component development

```bash
npm run dev-storybook
```
Alt:
```bash
npm run watch
npm run storybook
```

7. Lint
```bash
npm run lint
```

* Static view, start a local server from /dist folder

```bash
npm run serve
```

* Next steps

- HTML templating using drop in components

If you wish to use the includes handle bars, please ensure
"handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
- Dev build and testing branching

## Development
### IDE Development suggestions

We recommend using VSCode as the IDE for development with the following plugins:

- Prettier
- ESLint
- Mustache JS or Handlebars JS template support

Webstorm also works.

0 comments on commit 256ba35

Please sign in to comment.