{"id":18605666,"url":"https://github.com/indec-it/react-commons","last_synced_at":"2025-09-09T04:43:47.352Z","repository":{"id":37276102,"uuid":"166238058","full_name":"indec-it/react-commons","owner":"indec-it","description":"Common react components for apps","archived":false,"fork":false,"pushed_at":"2024-02-08T17:45:20.000Z","size":5383,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-25T04:03:58.368Z","etag":null,"topics":["chakra-ui","components-react","jest","node","react","storybook"],"latest_commit_sha":null,"homepage":"","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/indec-it.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}},"created_at":"2019-01-17T14:21:11.000Z","updated_at":"2024-07-22T15:14:10.000Z","dependencies_parsed_at":"2023-12-29T17:26:17.158Z","dependency_job_id":"79ecf28e-1732-4a51-99e6-261f32292188","html_url":"https://github.com/indec-it/react-commons","commit_stats":{"total_commits":159,"total_committers":9,"mean_commits":"17.666666666666668","dds":"0.23270440251572322","last_synced_commit":"77565288efc0811aa0cb03f1da6376bc54a6934f"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indec-it%2Freact-commons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indec-it%2Freact-commons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indec-it%2Freact-commons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indec-it%2Freact-commons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indec-it","download_url":"https://codeload.github.com/indec-it/react-commons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055284,"owners_count":21040157,"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":["chakra-ui","components-react","jest","node","react","storybook"],"created_at":"2024-11-07T02:22:33.933Z","updated_at":"2025-04-10T20:31:05.568Z","avatar_url":"https://github.com/indec-it.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-commons V5 🚀\n\nhttps://indec-it.github.io/react-commons/\n\n## Glossary\n\n1. [Motivation](#motivation)\n1. [Installation](#installation)\n1. [Start](#start)\n1. [Structure](#structure)\n1. [Dependencies](#dependencies)\n1. [Tests](#tests)\n1. [Contributing](#contributing)\n\n## Motivation\n\nWe've created this package to share components and logic between our different projects.\n\nWe use [Storybook](https://storybook.js.org), it allows you to test and see how each component works without install the package in your project.\n\nOur components are built with [Chakra-ui](https://chakra-ui.com). In our previous versions of react-commons, components were built with [Reactstrap](https://github.com/reactstrap/reactstrap) but we realized that we needed to add more custom styles so we decided to move to Chakra.\n\n## Installation\n\n```sh\n$ npm install @indec/react-commons\n```\n\n## Start\n\nTo start storybook you must run the following command:\n\n```sh\n$ npm start\n```\n\nStorybook will be open in your default browser at [http://localhost:6006](http://localhost:6006).\n\n## Structure\n\nThe project is split into the following directories. When writing code, use the following guidelines to determine where it should be placed. You can also take a look at the code yourself for in-depth examples.\n\n```\nsrc/\n  components/\n  hooks/\n  constants/\n  theme/\n  utils/\n```\n\n`src/components`\n\nHere you must add your React`s components.\n\n`src/hooks`\n\nHere you must add your custom hooks.\n\n`src/constants`\n\nConstants to be shared for the whole application.\n\n`src/theme`\n\nCustom theme for components.\n\n`src/utils`\n\nFunctions to be shared for the whole application.\n\n## Dependencies\n\nThese are the core dependencies you'll need to get acquainted yourself with:\n\n- [React](https://reactjs.org) \n- [Chakra](https://chakra-ui.com) (component library our UI is built upon)\n- [Formik](https://jaredpalmer.com/formik/docs/api/formik#validationschema-schema-gt-schema) (to make it easier to write forms with React)\n- [Yup](https://github.com/jquense/yup) (handles form validation)\n- [Storybook](https://storybook.js.org) (component library)\n- [Jest](https://jestjs.io) (testing framework)\n- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) (DOM interface for testing)\n- [EsLint](https://eslint.org) (used to lint code)\n\n## Tests \n\nTo run the tests you must run the following command:\n\n```sh\n$ npm run test\n```\n\nWhen writing tests, make sure to use the following format to keep the tests clean and consistent:\n\n```jsx\nimport {getByText} from \"@testing-library/react\";\n\nimport Button from \"./Button\";\n\ndescribe(\"\u003cButton\u003e\", () =\u003e {\n  let props;\n  const getComponent = () =\u003e render(Button, props);\n\n  beforeEach(() =\u003e {\n    props = {\n      children: \"Label\"\n    };\n  });\n  afterEach(tearDown);\n\n  it(\"should render `props.children`\", () =\u003e {\n    const {container} = getComponent();\n    expect(getByText(container, props.children)).toBeInTheDocument();\n  });\n\n  describe(\"when `props.plus` is `true`\", () =\u003e {\n    beforeEach(() =\u003e {\n      props.plus = true;\n    });\n\n    it(\"should render a plus character\", () =\u003e {\n      const {container} = getComponent();\n      expect(getByText(container, `+ ${props.children}`)).toBeInTheDocument();\n    });\n  });\n});\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findec-it%2Freact-commons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findec-it%2Freact-commons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findec-it%2Freact-commons/lists"}