Platform Catalog

This repo serves as a starting template for projects that want:

• TypeScript 3.3+, with strict checks
• RequireJs for client side module loading

Setup

Prerequisites

• Install node.js, choose version 16.14.2

• Install Git.

• Config your Azure NPM feeds.

  In order to use our Azure NPM feeds, you will need to go to the Azure DevOps >> Platform >> Artifacts >> choose platform-catalog repo >> click connect to the feed >> choose npm and click generate npm credentials >> copying those credentials into the .npmrc in the C:\Users\CURRENT_USER\ directory (create the file if there isn't).

• For more Info visit Wiki page.

Install Dependencies

$ npm install
$ gulp setup

If you get an authentication error isssue, ensure that you have updated the .npmrc file correctly. You can enter the command:

$ npm config ls -i

Verify the correct files and settings are being used.

Configure local environment

Create a new file .env.development in the root of the repo. Copy the contents of .env.default and add in your own credentials.

Your Azure Id is the same as your Ceridian email. You will need to generate a personal access token for your Azure account by going here. Click on "+ New Token" and change Expiration to 90 days. Set "Scope" to "Full Access". Your Azure token will expire every 90 days so you will need to go through this process again once the token expires.

A similar process is necessary to generate your Confluence personal access token. Start by going to this page and click "Create Token". Make sure to uncheck "Automatic expiry" so you won't need to recreate the token after a set amount of time.

Developing

• Linking platform-theme

  	If this repo is created from `platform-master` (recommended), you can follow the [README there.](http://dev.azure.com/Ceridian/Platform/_git/platform-master?path=%2FREADME.md&version=GBmaster)
  
  	If not, you can run the following command in the root directory of `platform-theme`:
  	```bash
  	$ npm link
  	```
  	And then, run this command in the root directory of this project:
  
  	```bash
  	$ npm link @platform/theme
  	```
  
  	After this, all the change in platform-theme would apply right away in platform-catalog
  

• Linking platform-cdk

  If this repo is created from platform-master (recommended), you can follow the README there.

If not, you can run the following command in the root directory of platform-cdk:

$ npm link

And then, run this command in the root directory of this project:

$ npm link @platform/cdk

If you are using npm run start for local development, platform-cdk file changes will be watched and any changes will apply automatically.

Alternatively, if you are using npm run storybook, you need to watch platform-cdk as well running the following command:

$ npm run watch-cdk

• Project file structure

  	The structure of the project:
  
  	<img src="docs/Project_structure.png" width="300">
  
  	Some important things to understand:
  	&nbsp;
  	- `platform-catalog/src/catalog`:
  	Holds utilities which are used by the components. This includes our data store solutions, data fetchers, data models, and other tools. Read more about the [breakdown of catalog](https://wiki.dayforce.com/pages/viewpage.action?spaceKey=PLAT&title=Catalog), or in the StoreREADME in catalog/stores.
  	&nbsp;
  	- `platform-catalog/src/component` and `platform-catalog/src/dayforce`:
  	Hold UI components. Most of the components you will find in storybook are in `platform-catalog/src/component/react`, which holds all the components based on the React framework.
  

• Basic Development Workflow:

  	To create a new component called `MyComponent`:
  	* First create a fold called `MyComponent` under `src/component/react`
  	* Create the `.tsx` file for component
  	* Create other related files, for example: `.style.tsx` file
  	* Create `.stories.mdx` file for storybook showcase
  	* Create `MyComponentTests.ts` under `/tests/`
  
  		<img src="docs/MyComponent.png" width="400">
  

Usage

To run tests, use the following command:

$ gulp serve-test

To run demos, use the following command:

$ gulp serve-demo

Build

To build the app, use the following command:

$ gulp build -r [revision]

where revision is a semver string, or one of "Major", "Minor", "Patch", which will increment the corresponding version by one.

Build npm package locally (output located at build/src/module-folder-name)

For example, to build the catalog package (umd module),

gulp pack --package catalog

To build with a commonjs output:

gulp pack --package catalog --commonjs

Testing

The automatic testing strategy is build upon:

• snapshot testing
• unit testing
• functional testing