pgd-ui-components-library v0.0.20

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