{"id":13880720,"url":"https://github.com/Doist/reactist","last_synced_at":"2025-07-16T17:30:57.052Z","repository":{"id":4872737,"uuid":"43355108","full_name":"Doist/reactist","owner":"Doist","description":"Open source React components made with ❤️ by Doist","archived":false,"fork":false,"pushed_at":"2025-06-26T07:45:45.000Z","size":95361,"stargazers_count":255,"open_issues_count":50,"forks_count":23,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-07-06T16:54:06.704Z","etag":null,"topics":["javascript","library","react","react-components","styleguide"],"latest_commit_sha":null,"homepage":"http://doist.github.io/reactist","language":"TypeScript","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/Doist.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2015-09-29T08:36:20.000Z","updated_at":"2025-06-26T07:45:21.000Z","dependencies_parsed_at":"2024-01-18T04:40:10.448Z","dependency_job_id":"5af2619a-6225-4b28-9d13-f943602bd59e","html_url":"https://github.com/Doist/reactist","commit_stats":{"total_commits":997,"total_committers":39,"mean_commits":"25.564102564102566","dds":"0.47141424272818455","last_synced_commit":"2ecbb500a307869dab829fe92e1f5c0c90b480b5"},"previous_names":[],"tags_count":212,"template":false,"template_full_name":null,"purl":"pkg:github/Doist/reactist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freactist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freactist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freactist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freactist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Doist","download_url":"https://codeload.github.com/Doist/reactist/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Doist%2Freactist/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527544,"owners_count":23782480,"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","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":["javascript","library","react","react-components","styleguide"],"created_at":"2024-08-06T08:03:25.489Z","updated_at":"2025-07-16T17:30:57.040Z","avatar_url":"https://github.com/Doist.png","language":"TypeScript","readme":"# Reactist\n\nOpen source React components made with ❤️ by Doist.\n\n[![npm version](https://badge.fury.io/js/%40doist%2Freactist.svg)](https://badge.fury.io/js/%40doist%2Freactist)\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n**[Check out our live demo.](http://doist.github.io/reactist)** It includes all currently implemented components plus a live playground to interact with them in different states.\n\n# How to use reactist\n\nYou can add Reactist to your project by installing it from npm:\n\n```sh\nnpm install @doist/reactist\n```\n\nTo import a component within your code:\n\n```js\nimport { Loading } from '@doist/reactist'\n//OR\nimport Loading from '@doist/reactist/dist/Loading'\n```\n\nYou also need to load the CSS file of reactist somewhere in your app. For instance:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./node_modules/@doist/reactist/styles/Loading.css\" /\u003e\n```\n\nIf you prefer to include static files grab the [minified build from the dist folder](https://github.com/Doist/reactist/tree/develop/dist).\n\n```html\n\u003cscript src=\"./node_modules/@doist/reactist/dist/reactist.cjs.production.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./node_modules/@doist/reactist/styles/reactist.css\" /\u003e\n```\n\n# Changelog\n\nYou can find our changelog [here](./CHANGELOG.md).\n\n# Development\n\nWe leverage `package.json`'s `engines` field to specify the node/npm versions to be used while in development. The easiest way to switch quickly is through [fnm](https://github.com/Schniz/fnm).\n\nIt's worth noting that fnm can automatically switch to a project's specified node version when it encounters a `.nvmrc` file. To do so, use the `--use-on-cd` flag when [generating your shell's config script with `fnm env`](https://github.com/Schniz/fnm#fnm-env).\n\nOnce fnm is installed, clone the repository. Then, switch to the required node version, and run its setup task:\n\n```sh\ngit clone https://github.com/doist/reactist.git\ncd reactist\nfnm install\nfnm use\nnpm run setup\n```\n\nThe setup task will install dependencies and run various validations (linting, type checking, tests).\n\nWe identified two major modes of development for Reactist. First, running an interactive storybook and see the changes you make to a component in an isolated environment. This is especially helpful when developing new components. And second, improving existing components in real-life applications.\n\n## Creating new components\n\nThe development of new components is streamlined by the ability to generate new component templates using [plop](https://plopjs.com/):\n\n```sh\nnpm run plop component\n```\n\nThis command will prompt you to provide all the information needed to create a new component template. The most important piece of information needed is the component name, which you can provide even as a phrase (e.g. \"dropdown select\" will generate a `DropdownSelect` component template).\n\nThe generated source files include the component implementation with sample props and styles, plus a small test file and storybook source files as well.\n\nYou also need to export your new component by adding a reference to it in the [top-level index file](src/index.ts).\n\n## Storybook\n\nFor the first development mode run:\n\n```sh\nnpm run storybook\n```\n\nThis boots up a development server with hot reloading on http://localhost:6006. You can iterate on the components in the existing stories or add a completely new one.\n\n## Inside your application\n\nFor the second development mode you can leverage `npm start:yalc`. First, make sure you have `yalc` installed globally:\n\n```shell\nnpm install -g yalc\n```\n\nThen, in the reactist repository run:\n\n```sh\nnpm run start:yalc\n```\n\nthis will publish Reactist to `yalc` and watch for changes.\n\nIn your host application you can then link to your local Reactist version:\n\n```sh\ncd ~/your-app\nyalc add @doist/reactist\n```\n\nTo undo the changes and switch back to the reactist version from npm, do the following:\n\n```sh\ncd ~/your-app\n# restore the original reactist version\nyalc remove @doist/reactist\n# re-install reactist from npm\nnpm install\n```\n\nFor convenience, you can add a `dev:reactist` script in your host application to automate the process of adding and removing the local Reactist version:\n\n```json5\n{\n    // ...\n    scripts: {\n        // ...\n        'predev:reactist': 'yalc add @doist/reactist',\n        'dev:reactist': 'npm run dev', // or whatever your development script is\n        'postdev:reactist': 'yalc remove @doist/reactist \u0026\u0026 npm i',\n    },\n}\n```\n\nThen, to develop against Reactist, just run:\n\n```sh\nnpm run dev:reactist\n```\n\n## Development tips and tricks\n\nIndependent of the development you operate in to produce a new build (e.g. before submitting a PR) run:\n\n```sh\nnpm run build\n```\n\n**Note:** This will **not** update the docs. In case you want to update the docs you need to run:\n\n```sh\nnpm run build:storybook\n```\n\n# Testing\n\nTests are executed by running:\n\n```sh\nnpm run test\n```\n\nDuring development you may find it beneficial to continuously execute the tests. This works by running:\n\n```sh\nnpm run test -- --watch\n```\n\nMacOS users might need to upgrade watchman with `brew install watchman` when experiencing troubles with the watch mode. See this issue for details: https://github.com/facebook/jest/issues/1767\n\n## Chromatic visual regression tests\n\nReactist relies on [Chromatic](https://www.chromatic.com/) to run visual regression tests on our component during the CI step in GitHub.\n\n### Enable tests\n\nTo enable such tests, just add `chromatic: { disableSnapshot: false }` as a story parameter in your stories. Example:\n\n```\n\u003cCanvas\u003e\n    \u003cStory\n        name=\"Main demo\"\n        parameters={{\n            docs: { source: { type: 'code' } },\n            chromatic: { disableSnapshot: false },\n        }}\n    \u003e\n        \u003cBannerExamples theme=\"light\" /\u003e\n    \u003c/Story\u003e\n\u003c/Canvas\u003e\n```\n\nWe recommend you enable these tests on those Storybook stories that have several different variants of the component under testing. Enabling them on one or two stories per component should be sufficient in most cases (there's no need to enable them on all stories).\n\n### Review tests\n\nWhen you open a GitHub PR, you'll notice the \"UI Review\" and \"UI Tests\" CI steps.\n\n-   Clicking on \"Details\" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).\n-   Now you can review and accept your changes (or go back and change your code).\n-   When you're happy with your changes, make sure to mark them as \"Approved\".\n\n# Releasing\n\nThis project uses [release-please](https://github.com/googleapis/release-please) to automate version management and package publishing.\n\n## How it works\n\n1. Make your changes using [Conventional Commits](https://www.conventionalcommits.org/):\n\n    - `feat:` for new features (minor version bump)\n    - `fix:` for bug fixes (patch version bump)\n    - `style:` for code style changes\n    - `perf:` for performance improvements\n    - `refactor:` for refactoring code\n    - `test:` for adding/updating tests\n    - `build:` for build/dependency changes\n    - `docs:` for documentation changes\n    - `ci:` for CI changes\n    - `revert:` for reverting previous commits\n    - `feat!:` or `fix!:` for breaking changes (major version bump)\n    - `chore:` for maintenance tasks (NOTE: these are not included in the changelog)\n\n2. When commits are pushed to `main`:\n\n    - Release-please automatically creates/updates a release PR\n    - The PR includes version bump and changelog updates\n    - Review the PR and merge when ready\n\n3. After merging the release PR:\n    - A new GitHub release is automatically created\n    - A new tag is created\n    - The `publish` workflow is triggered\n    - The package is published to npm and GitHub Packages\n    - Storybook documentation is automatically updated\n\nThe storybook hosted on GitHub pages will be automatically updated on each push to `main`. If there's a problem, try running the action manually from the [Actions settings](https://github.com/Doist/reactist/actions).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDoist%2Freactist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDoist%2Freactist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDoist%2Freactist/lists"}