platform-catalog v1.24.16
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 >> clickconnect to the feed
>> choosenpm
and clickgenerate 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: - `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. - `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:
1 year ago