{"id":19631631,"url":"https://github.com/seb-oss/react-components","last_synced_at":"2025-04-28T06:33:19.372Z","repository":{"id":34448442,"uuid":"169695797","full_name":"seb-oss/react-components","owner":"seb-oss","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-29T03:33:43.000Z","size":35155,"stargazers_count":14,"open_issues_count":32,"forks_count":11,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-14T15:57:57.274Z","etag":null,"topics":["components-library","javascript","react","react-components","seb-bootstrap","typescript"],"latest_commit_sha":null,"homepage":"https://sebgroup.github.io/react-components/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seb-oss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-08T06:48:25.000Z","updated_at":"2024-05-29T02:55:50.000Z","dependencies_parsed_at":"2024-06-03T15:09:17.232Z","dependency_job_id":null,"html_url":"https://github.com/seb-oss/react-components","commit_stats":{"total_commits":1252,"total_committers":26,"mean_commits":48.15384615384615,"dds":0.8162939297124601,"last_synced_commit":"54039f4facfd3033c25645e4de345d55afcec22c"},"previous_names":["seb-oss/react-components","sebgroup/react-components"],"tags_count":80,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Freact-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Freact-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Freact-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Freact-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seb-oss","download_url":"https://codeload.github.com/seb-oss/react-components/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251265965,"owners_count":21561762,"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":["components-library","javascript","react","react-components","seb-bootstrap","typescript"],"created_at":"2024-11-11T12:10:15.740Z","updated_at":"2025-04-28T06:33:18.266Z","avatar_url":"https://github.com/seb-oss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SEB React Components\n\n[![https://img.shields.io/npm/v/@sebgroup/react-components](https://img.shields.io/npm/v/@sebgroup/react-components)](https://www.npmjs.com/package/@sebgroup/react-components)\n![Deployment](https://github.com/sebgroup/react-components/workflows/Deployment/badge.svg)\n![Github Pages](https://github.com/sebgroup/react-components/workflows/Github%20Pages/badge.svg)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Coverage Status](https://coveralls.io/repos/github/sebgroup/react-components/badge.svg?branch=master)](https://coveralls.io/github/sebgroup/react-components?branch=master)\n[![Dependabot Status](https://api.dependabot.com/badges/status?host=github\u0026repo=sebgroup/react-components)](https://dependabot.com)\n\nThis is a set of react components some of which are based on SEB's bootstrap. The plan for this project is to increase and improve components for future usage.\n\n- The package name: `@sebgroup/react-components`\n- The package documentation: [Documentation](https://sebgroup.github.io/react-components)\n- The package sourcecode: [Github Source Code](https://github.com/sebgroup/react-components)\n- NPM package: [@sebgroup/react-components](https://www.npmjs.com/package/@sebgroup/react-components)\n\n---\n\n#### :rotating_light: NOTICE: `@sebgroup/react-components` support has officially ended as of March 2023.\n\n**What does this mean?**\n\nThe code will remain accessible on GitHub and [npm](https://www.npmjs.com/package/@sebgroup/react-components). This website will remain here indefinitely.\n\nThe project will be in an archived state, meaning that no new development will be made _unless_:\n\n-   it is meant for fixing critical and common-case bugs on the already existing components\n\n**Where do I go from here?**\n\nGo Green! Visit the [official Green documentation](https://sebgroup.github.io/green/latest/chlorophyll) to get started with SEB's new design system.\n\n---\n\n## Minimum requirements\n\nThis version of components has been developed with:\n\n-   React\n-   Typescript\n-   SEB Bootstrap\n\n## Installation\n\nYou should be able to install the NPM package.\n\n```bash\nnpm install @sebgroup/react-components --save\n```\n\nThis project is based on SEB Bootstrap which includes `fonts`, `colors` and `variables`, to make sure everything works fine, please install these dependencies on your project:\n\n```bash\nnpm install @sebgroup/bootstrap --save\n```\n\nThen make sure you add the Main SEB bootstrap package in your main style.SCSS or index.ts as follows\n`@import '~@sebgroup/bootstrap/scss/bootstrap';`.\n\nFor `Visual Studio Code` users, please install the [recommended plugins](.vscode/extensions.json)\n\n## Development\n\nThis project uses `prettier` for a more consistent (less annoying) coding. We are using 4 different builds for this project. The `src` folder is where the actual components exist with all their necessary dependencies. and `develop` folder is where we develop and test those components.\n\n1. Development: `npm start`\n2. Check formatting rules, Compile components and Create Docs folder: `npm run build`\n3. Build and create the Documentation pages only: `npm run docs`\n4. To run the unit tests, run: `npm test`\n5. To run a unit test for a specific component you have to pass the name of the component, example: `npm test Button`. It can also be chained with multiple specific components, e.g. `npm test Button RadioGroup`\n6. To commit your changes run: `npm run commit` and follow the steps\n\n## Usage\n\nFor performance benefits we are not combining all the components into single Index rather they are chunked into their subpackage. Therefore, to use a component, you need to import the `Component` submodule from the `dist` folder, in whichever Class you want to use it. Here is a sample of how to import a `Button` component in a page.\n\n```javascript\nimport { Button } from \"@sebgroup/react-components\";\n\nconst Component = () =\u003e {\n    const onClick = (e) =\u003e {\n        console.log(\"Im Clicked\");\n    }\n\n    return (\n        \u003cdiv\u003e\n            \u003cButton onClick={onClick}\u003eButton label\u003c/Button\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default Component;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-oss%2Freact-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseb-oss%2Freact-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-oss%2Freact-components/lists"}