UI-Shared

This repo was created to help organize components across the UT ecosystem; following specific design rules:

Stack:

• React (18.2.0)

To install:

npm install @universal-tennis/ui-shared or yarn add @universal-tennis/ui-shared

Design rules

Components following material and atomic design rules;

1. Standard naming components; with primary/secondary/etc variations. Keeping variations minimal and purposeful.

Example:

    <Button type="primary" /> 
    <Button type="secondary" /> 

Buttons should be uniform across the platforms with minimal variants, not multiple buttons created for each pages.

Bitbucket CICD flow Publishing the Repo

1. Pull the latest from master -> make changes to a PR back into master. First when creating a new component, make sure to add it to the components.jsx file.
2. In the package.json file, make sure to pump to the next minor version.
3. After merging back into master, tag the commit with the same package.json version number. This will then trigger a NPM package build with the version listed in the package.json; make sure the release tags are the same for consistency.

It can now be accessed in another repo like this: import {Button} from "@universal-tennis/ui-shared";

Manually Publishing the Repo (Should be done via CICD flow)

1. First when creating a new component, make sure to add it to the components.jsx file.
2. Then Run yarn run publish:npm to build a optimized build for all the components, this is configured for TS.
3. In the package.json file, make sure to pump to the next minor version.
4. Finally yarn run publish-package to deploy this version to NPM.

It can now be accessed in another repo like this: import {Button} from "@universal-tennis/ui-shared";

Development on Local

1. Create a new branch and make changes: (for this example "sample-link-branch")
2. Push changes to the branch / test before with storybook.
3. Run npm install https://[email protected]/universaltennis/ui-shared.git#sample-linked-branch from the other repo to view these updates. In this url (https://@bitbucket.org//#)
4. You can now see the changes from your npm branch in a different repo. you'll now see in your package.json:
   "@universal-tennis/ui-shared": "git+https://[email protected]/universaltennis/ui-shared.git#sample-linked-branch"

Available Scripts

npm start using npm 16.14.0

Runs the storybook app in localhost. Open http://localhost:6006 to view storybook in your browser. The page will reload when you make changes. You may also see any lint errors in the console.