Repo: https://gitlab.ny.rga.com/samsung-within/chapter-components

A monorepo of UI components common to all Samsung Within projects.

Chapter-components are React components designed for Samsung Within projects. The components are managed via a Yarn Workspaces/Lerna monorepo, and are published to our private npm server as individual packages. They can be imported into Samsung Within projects as needed.

• Environment: Node 10.x
• Package Management: Yarn* > 1.7.x, Yarn Workspaces, Lerna
• Framework: React 16.6.x

*Why Yarn, and not NPM? The main reason is to utilize Workspaces. Additionally, Yarn tends to be faster, better at producing deterministic dependency trees, and to have better caching.

• CSS: Sass and CSS Modules
• Transpilation: Babel 7
• Dev: Storybook
• Build: Webpack 4 & Babel 7
• Linting: ESLint, Prettier, Stylelint and EditorConfig.*
• Testing: Snapshot testing via Jest

*It is strongly recommended that you integrate these tools into your editor or IDE.

This monorepo uses Yarn Workspaces and Lerna, which automatically symlinks local dependencies to their respective packages. This allows you to work on packages and their dependencies without manually symlinking.

• Clone this repo:

git clone [email protected]:samsung-within/chapter-components.git

• Ensure your node environment is up to date. Download the latest, or use nvm to manage environments.
• If you don't have yarn, install it. (If you're a Windows user, download the installer.)

brew install yarn

• Install dependencies via Yarn. Because we use Yarn Workspaces, this command will also hoist dependencies to the root node_modules folder, and symlink accordingly. You should not use npm to install dependencies.

yarn

• Run the lerna build command to build each package's dist folder:

yarn lerna-build

• Run the storybook tool command:

yarn run storybook

This creates a UI development environment. The tool enables us to create components independently and showcase components interactively in an isolated development environment. Each package has a *.storybook.js file that is automatically discovered and loaded into the development environment.

Learn more by reading the Storybook documentation.

• Create a branch according to the Gitflow Workflow guidelines.

After your merge request has been reviewed and approved, use the following steps to publish new versions of the packages.

• After approval, git pull on the master branch, checkout your branch, and rebase* on master.

git pull --rebase origin master

* Why perform a rebase, and not a merge? Read this "Merging vs. Rebasing" article for more information.

• Handle any issue surfaced during your rebase, then merge your feature branch into master.

git checkout master
git pull
git pull origin your-feature
git push

• Do a pull to ensure you have the absolute latest code and tags. Lerna needs to know what the latest published versions are in order to determine what has changed and what the new versions should be.

git pull origin master --tags

• Run the Lerna version command. This prompts you to update the version any packages that have changed. For most changes, a PATCH update is what you want. (Check out the Semantic Versioning docs to learn when to use each version type.)

yarn lerna-version

See packages listed that you didn't change? This probably means that someone push a change but didn't run this command. Reach out to the team to coordinate, or simply give the mysteriously-upddated package a PATCH version.

• If this command runs successfully, it will also perform a PATCH update on the mono repo itself, then push the updated code and tags to origin. This triggers the CI to publish the updated packages to our private npm server.

To create a new package, run the following command:

yarn create-package

Enter the required info and a set of boilerplate files will be created.

• Samsung Within Framework 2.0: Why & How