{"id":18336343,"url":"https://github.com/launchpadlab/lp-components","last_synced_at":"2025-07-31T01:42:18.412Z","repository":{"id":37484062,"uuid":"81897183","full_name":"LaunchPadLab/lp-components","owner":"LaunchPadLab","description":"Our Components","archived":false,"fork":false,"pushed_at":"2025-05-28T14:10:50.000Z","size":3508,"stargazers_count":5,"open_issues_count":43,"forks_count":1,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-06-23T04:04:30.625Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://lp-components.herokuapp.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LaunchPadLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2017-02-14T02:49:06.000Z","updated_at":"2024-06-07T02:03:23.000Z","dependencies_parsed_at":"2024-03-11T17:01:01.006Z","dependency_job_id":"c0682b1b-d4d2-412d-bfa5-f8a93b3ec2c7","html_url":"https://github.com/LaunchPadLab/lp-components","commit_stats":{"total_commits":483,"total_committers":19,"mean_commits":25.42105263157895,"dds":0.4513457556935818,"last_synced_commit":"bf5663eaf100fbe41ba13ae3cf22a934d7a70f6f"},"previous_names":[],"tags_count":171,"template":false,"template_full_name":null,"purl":"pkg:github/LaunchPadLab/lp-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flp-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flp-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flp-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flp-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LaunchPadLab","download_url":"https://codeload.github.com/LaunchPadLab/lp-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flp-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267973329,"owners_count":24174401,"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-30T02:00:09.044Z","response_time":70,"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":"2024-11-05T20:07:37.232Z","updated_at":"2025-07-31T01:42:18.386Z","avatar_url":"https://github.com/LaunchPadLab.png","language":"JavaScript","readme":"[![NPM version](https://img.shields.io/npm/v/@launchpadlab/lp-components.svg?style=flat-square)](https://www.npmjs.com/package/@launchpadlab/lp-components)\n\n# lp-components\n\nReusable UI components for React apps.\n\n```jsx\nimport React from 'react'\nimport { Spinner } from '@launchpadlab/lp-components'\n\nfunction MyLoadingComponent({ data }) {\n  return data ? \u003cdiv\u003e{data}\u003c/div\u003e : \u003cSpinner /\u003e\n}\n```\n\nThis library contains components for status indicators, custom inputs, flash messages and more. A full list of available components can be found in the [documentation](#documentation) or in the [interactive component playground](http://lp-components.herokuapp.com).\n\n## Documentation\n\nDocumentation and usage info can be found in [docs.md](docs.md).\n\n## Migration Guides\n\n- [v2.0.0](migration-guides/v2.0.0.md)\n- [v3.0.0](migration-guides/v3.0.0.md)\n- [v4.0.0](migration-guides/v4.0.0.md)\n- [v5.0.0](migration-guides/v5.0.0.md)\n- [v6.0.0](migration-guides/v6.0.0.md)\n- [v7.0.0](migration-guides/v7.0.0.md)\n- [v8.0.0](migration-guides/v8.0.0.md)\n- [v9.0.0](migration-guides/v9.0.0.md)\n- [v10.0.0](migration-guides/v10.0.0.md)\n\n## Contribution\n\nThis package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex-public/blob/main/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.\n\n## Additional info\n\n#### Size Limit\n\nThis library uses [size-limit](https://github.com/ai/size-limit) to prevent size bloat. The `yarn size` script is run in CI to check that the package size is under the limit specified in [.size-limit.js](.size-limit.js). For a visualization of this package's relative dependency sizes, you can run `yarn size --why`.\n\n#### React Storybook\n\nThis library uses [React Storybook](https://getstorybook.io/) to render components in a development sandbox. In order to view the storybook, run `yarn run storybook` and navigate to the localhost port indicated.\n\n_Every new component added to this library should be accompanied by a new story in the storybook._\n\nWhen pull requests are submitted, a Heroku review app will be deployed containing the revised storybook so that reviewers can view the changes made.\n\n#### DateInput styles\n\nThe `DateInput` component requires special styles in order to render correctly. These styles most be imported from the `react-datepicker` folder in `node_modules` and imported into your sass. To do this, make the following changes to your `webpack.config.js` and `application.scss`:\n\n#### `webpack.config.js`:\n\nAdd a line near the top of the file specifying the path to the `react-datepicker` styles:\n\n`const datePickerPath = path.resolve(__dirname, '../node_modules/react-datepicker/src/stylesheets')`\n\nThen, add this path to the `includePaths` array of the sass loader:\n\n```\n{\n    test: /.scss$/,\n    loader: \"sass\",\n    query: { includePaths: [ ... , datePickerPath ] }\n}\n```\n\n#### `application.scss`:\n\nImport the `react-datepicker` styles by adding this line:\n\n`@import \"datepicker\";`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Flp-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaunchpadlab%2Flp-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Flp-components/lists"}