{"id":29560925,"url":"https://github.com/decred/pi-ui","last_synced_at":"2025-07-28T23:09:42.735Z","repository":{"id":34357498,"uuid":"174194179","full_name":"decred/pi-ui","owner":"decred","description":"Politeia UI library","archived":false,"fork":false,"pushed_at":"2023-09-22T21:18:09.000Z","size":82919,"stargazers_count":14,"open_issues_count":14,"forks_count":17,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-18T18:29:50.146Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://decred.github.io/pi-ui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/decred.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-03-06T17:58:53.000Z","updated_at":"2023-03-05T14:29:07.000Z","dependencies_parsed_at":"2025-07-18T15:55:46.459Z","dependency_job_id":null,"html_url":"https://github.com/decred/pi-ui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/decred/pi-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decred%2Fpi-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decred%2Fpi-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decred%2Fpi-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decred%2Fpi-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/decred","download_url":"https://codeload.github.com/decred/pi-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decred%2Fpi-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267600447,"owners_count":24113784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-18T15:39:23.951Z","updated_at":"2025-07-28T23:09:42.720Z","avatar_url":"https://github.com/decred.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pi-ui\n\n[![Build Status](https://github.com/decred/pi-ui/workflows/Build%20and%20Test/badge.svg)](https://github.com/decred/pi-ui/actions)\n\n\u003e Politeia UI library\n\u003e [documentation](https://decred.github.io/pi-ui/)\n\n[![NPM](https://img.shields.io/npm/v/pi-ui.svg)](https://www.npmjs.com/package/pi-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\nMake sure you have [nodejs](https://nodejs.org/en/) 8+ and [yarn](https://yarnpkg.com/en/) or [npm](https://www.npmjs.com/) installed.\n\n#### yarn\n\n```bash\nyarn add pi-ui\n```\n\n#### npm\n\n```bash\nnpm install --save pi-ui\n```\n\n## Usage\n\nIn the index file of your app make sure to import the styles for the lib:\n\n- `index.js`:\n\n```jsx\nimport \"pi-ui/dist/index.css\";\n```\n\n- `Component.js`:\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport { Button } from \"pi-ui\";\n\nclass Example extends Component {\n  render() {\n    return \u003cButton /\u003e;\n  }\n}\n```\n\n### Breakpoints\n\nPi-ui's custom breakpoints make use of the [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env) plugin. In order to use the breakpoints you have to add the plugin to your environment. For this, see the [postcss install page](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/INSTALL.md#webpack).\n\nIn your `postcss.config.js`, you will have to `importFrom` pi-ui's `export.css` file. If you are developing with a linked pi-ui, import from your local pi-ui. Example:\n\n```\nconst { resolveOwn } = require(\"../../utils\");\n\nmodule.exports = {\n  plugins: [\n    [\n      \"postcss-preset-env\",\n      {\n        // When developing with a linked `pi-ui`\n        // Point the importFrom to the path of the linked package in your env\n        importFrom: resolveOwn(\"../../../../pi-ui/dist/exports.css\")\n      }\n    ]\n  ]\n};\n```\n\nIf you are developing with a npm/yarn installed pi-ui package, import from your `node-modules`. Example:\n\n```\nmodule.exports = {\n  plugins: [\n    [\n      \"postcss-preset-env\",\n      {\n        // When developing with an installed `pi-ui`\n        // Point the importFrom to the path of the package in your node_modules\n        importFrom: \"./node_modules/pi-ui/dist/exports.css\"\n      }\n    ]\n  ]\n};\n```\n## Developing\n\n- Clone this repository\n- Install all deps by running:\n  `yarn`\n- If you're developing only on pi-ui, serving the live documentation should be enough:\n  `yarn storybook`\n\n- If you want to see your changes reflected in a project consuming pi-ui, you can use yarn link:\n  - Go to the pi-ui directory on your machine and run:\n    `yarn link`\n  - Go to the project using pi-ui and run:\n    `yarn link pi-ui`\n\n**Troubleshooting:**\nIf you find some kind of incompatibility between react versions, link the react package from the main repository into pi-ui:\n\n- Go to the main repository which is using the pi-ui lib, access the react folder inside its node_modules:\n  - `cd /some/project/node_modules/react \u0026\u0026 yarn link`\n  - `cd /pi-ui \u0026\u0026 yarn link react`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecred%2Fpi-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdecred%2Fpi-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecred%2Fpi-ui/lists"}