This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@digitalfactory/components

Digital Factory Component Library

Update (14/01/2022)

Pipelines will not pass in jenkins until all tests run successfully. Please fix this before building or making any new changes.

Commands

The following commands are available in this project:

Start: This will build the project to /dist and incrementally build it on change for you to run storybook or the example.

yarn start

Build: This is the build script run by jenkins in order to deploy Storybook to openshift.

This script will build storybook to its default location 'storybook-static' and move it to the 'build' folder.

yarn run build

Test: This will run jest on any *.spec.js files in the project. The 'passWithNoTests' flag means that if no tests exist or are run this will not be treated as a failure. Under the hood, tsdx runs jest so any flags that you pass here will be passed to jest.

yarn run test

Lint: This will run tsdx's linter, however prettier is preferred - tsdx will catch some typescript-specific bits so it is recommended to run this before prettier.

yarn run lint

Prepare: This is the script that will be run by yarn publish before publishing and is effectively the build step for the npm package.

yarn prepare

Storybook: This will start the storybook server on port 6006. By default this will transpile each time, however running it alongside yarn start or tsdx watch will add incremental building

yarn run storybook

Build-Storybook: This will build the storybook files into a static project.

yarn run build-storybook

Storybook

Storybook provides a number of different functions, from a simple styleguide/documentation site, to accessibility testing and more.

Writing Stories

This project uses the CSF (Component Story Format). This means that each *.stories.tsx file has a number of exports:

• export default which exports an object with the Title of this file's Stories (typically the name of the component you're writing stories for), and any additional decorators that apply to that story.
• export X where X is the name of the story in this category, and returns a Component. These will be renamed using lodash's startCase function (name -> 'Name', someName -> 'Some Name', someNAME -> 'Some NAME', some_custom_NAME -> 'Some Custom NAME')

Stories should show the bulk of functionality - any major differences in usage, props, etc should each have a story to show the use-cases for a component. The storybook project should be a one-stop shop for each of the items in the library.

Typescript

This project uses typescript, and Storybook hooks into this in order to provide automated prop tables.

A list of props, whether they are required or not, their default values, and a description of them are pulled from the interface that the Component uses. JSDoc comments can be used on these interfaces in order to provide descriptions and further information.

All components are properly typed, and the project will not build/publish without all typescript errors being resolved, so when adding to the library please do a test build (yarn run build) before submitting a Merge Request in order to ensure that all issues have been fixed.

Accessibility

This storybook project uses the a11y addon/decorator in order to provide automated testing for each component via axe. Please ensure that any components added pass all of their a11y testing in their intended use cases. Do not submit components which have any failures in their intended functionality.

Example Project

An 'example' folder is included which is statically linked to the component library. Running yarn start will build the library and the example folder will use this - you could use this to test whether your component works as intended, imports correctly after it is built etc.

Config

This project has a number of places and things to configure. As it uses tsdx under the hood, a tsdx.config.js file will be merged with tsdx's default config for all tsdx commands.

For jest-specific configuration, please use jest.config.js.

Anything relating to storybook is in the .storybook folder.

Contributing

Please ensure that you have done all of the following:

• Written the component in Typescript with all relevant types annotated.
• Added a .stories.tsx file to document the component
• Added a .spec.tsx jest test file if the component has any level of complexity
• Run both yarn run lint and prettier --write src/**/*.{ts,tsx,js,jsx}.
• Run yarn run build and ensured it has no errors.