Ultimaker.com Designsystem
Prerequisites
- Git client of your choice
- NodeJS (Installation through brew(macos)/chocolatey(windows) recommended)
Install
- Clone project from https://github.com/Ultimaker/Ultimaker.com-designsystem
- Run
npm i
to install NPM dependencies - Test project with
npm run unit
NPM Commands
-
storybook
: Storybook development environment -
test
orunit
: Execute all tests in browserstack (first create test/karma.conf.json) -
unit:chrome
: Execute all unit tests in headless chrome -
unit:debug
: Execute all test continuously, attach your own browser -
snapshots
: Execute jest snapshot testing for the storybook components -
snapshots:update
: Execute jest snapshot testing and update them instantly -
build
: Build amd module -
build:dev
: Builds an amd module for local testing -
lint
: Lints all javascript -
build-storybook
: Generate static storybook environment
Hygen Timesavers
We’ve added hygen, the scalable code generator that saves you time, to the stack so that you can quickly generate a new component using our component standard, which is reflected in the component structure outputted by the command.
Below is an example of issuing the command to create an atom
component called my-component
.
npx hygen modules component --name my-component --type atom
options - type
atom
molecule
organism
Prettier
To add and run prettier against a component use the following command adjusting the component directory path as necessary
npx prettier --write --insert-pragma --require-pragma=false src/js/components/molecules/cards/card-article/**/*.{ts,scss,html}