# pgd-ui-components-library

> PGD UI Components Library

Latest version **0.0.20** (published 2022-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install pgd-ui-components-library
pnpm add pgd-ui-components-library
yarn add pgd-ui-components-library
bun add pgd-ui-components-library
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.20 |
| Published | 2022-12-09 |
| First published | 2022-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 924.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | japuna |

## Links

- npm: https://www.npmjs.com/package/pgd-ui-components-library
- Repository: https://gitlab.prodigious.com/Prodigious/ui-components-library
- npm.io page: https://npm.io/package/pgd-ui-components-library

## Dependencies (3)

- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.13.0
- [pgd-ui-components-library](https://npm.io/package/pgd-ui-components-library.md) 0.0.9
- [storybook-addon-pseudo-states](https://npm.io/package/storybook-addon-pseudo-states.md) ^1.15.1

## Recent versions

- 0.0.20 (latest) — 2022-12-09
- 0.0.1 — 2022-12-09
- 0.0.17 — 2022-12-09

## README

# 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](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-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](https://gitlab.prodigious.com/Prodigious/ui-components-library/-/settings/integrations)

## Collaborate with your team

- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)

## Test and Deploy

Use the built-in continuous integration in GitLab.

- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)

***

---
_Source: https://npm.io/package/pgd-ui-components-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._