@orbit-design-system/core-react-component-generator

UX Custom Component Generator

This package is a Yeoman Generator that helps developers create new custom components in a structured way that includes documentation, unit tests, seperate styling and component definition. This should be used to make new components in Brand Libraries.

Prerequisites

Software Prerequisites are: node 12.x+ and npm 6.x+. You must have access to the Monster JFrog Artifactory NPM repository to install the packages outlined in this package. See these instructions on getting access to JFrog Artifactory.

The monorepo requires that Yarn be installed globally:

# install yarn globally
npm install --global yarn

Installation

This generator is meant to be installed within the context of the monorepo that houses it. Clone the Global Design System Monorepo and install packages on the base repository using Yarn (yarn install). Once the packages are installed, use npm run build in the base of the monorepo, which will install all the prerequisites for all the packages in the monorepo, including this generator.

Make sure Yeoman is installed on your system if it is not already.

npm install --global yo

Then install this custom component generator globally:

npm install --global @uxf/generator-react-component

Using this Generator as a Developer

Once you have the generator installed globally, you should be able to run the yo command to generate a new custom component.

# in the base directory of your brand library
yo @uxf/react-component [componentName]

This creates a new component directory in the src/components directory.

Live Development

To develop this generator, we recommend that you link this package globally so that you can make changes and run the generator against the changes without having to deploy and re-install the package:

# If starting from the monorepo, navigate to this sub-package
cd packages/core-react-component-generator
npm link

Reloading Packages

To fully and completely clear and reload packages you can run this series of commands in the base directory of the monorepo:

npx lerna clean -y
rm -rf node_modules
yarn install
npm run build