UI Components Library

Reusable component library for PGD and IdeaLab projects

Recommendations

• Use Node 16 for Development

  Note: Later versions may not work properly

Initial setup

• Install dependencies with npm install
• Build the project npm run build
• This step is necessary in order to make any global stylesheet available while working on your components
• Run the development server npm run storybook

New component setup

• Run the command npx stencil generate your-component-name
• Remember to change your-component-name for the actual component name
• If it's supposed to be in a subfolder, you can add it with a relative path. For example: parent-folder/your-component-name
• Go to components folder and open the folder with the name of your component
• Change the stylesheet file extension from .css to .scss
• Open your component .tsx file
• Look for the styleUrl key in the object passed to the @Component() decorator and change the file extension from .css to .scss
• Save and start working on your new component

Add your files

• [ ] Create or upload files
• [ ] Add files using the command line or push an existing Git repository with the following command:

cd existing_repo
git remote add origin https://gitlab.prodigious.com/Prodigious/ui-components-library.git
git branch -M main
git push -uf origin main

Integrate with your tools

• [ ] Set up project integrations

Collaborate with your team

• [ ] Invite team members and collaborators
• [ ] Create a new merge request
• [ ] Automatically close issues from merge requests
• [ ] Enable merge request approvals
• [ ] Automatically merge when pipeline succeeds

Test and Deploy

Use the built-in continuous integration in GitLab.

• [ ] Get started with GitLab CI/CD
• [ ] Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)
• [ ] Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy
• [ ] Use pull-based deployments for improved Kubernetes management
• [ ] Set up protected environments