https://github.com/seb-oss/react-components
https://github.com/seb-oss/react-components
components-library javascript react react-components seb-bootstrap typescript
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/seb-oss/react-components
- Owner: seb-oss
- License: apache-2.0
- Created: 2019-02-08T06:48:25.000Z (over 7 years ago)
- Default Branch: develop
- Last Pushed: 2024-05-29T03:33:43.000Z (about 2 years ago)
- Last Synced: 2025-04-14T15:57:57.274Z (about 1 year ago)
- Topics: components-library, javascript, react, react-components, seb-bootstrap, typescript
- Language: TypeScript
- Homepage: https://sebgroup.github.io/react-components/
- Size: 33.5 MB
- Stars: 14
- Watchers: 5
- Forks: 11
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# SEB React Components
[](https://www.npmjs.com/package/@sebgroup/react-components)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
[](https://coveralls.io/github/sebgroup/react-components?branch=master)
[](https://dependabot.com)
This 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.
- The package name: `@sebgroup/react-components`
- The package documentation: [Documentation](https://sebgroup.github.io/react-components)
- The package sourcecode: [Github Source Code](https://github.com/sebgroup/react-components)
- NPM package: [@sebgroup/react-components](https://www.npmjs.com/package/@sebgroup/react-components)
---
#### :rotating_light: NOTICE: `@sebgroup/react-components` support has officially ended as of March 2023.
**What does this mean?**
The code will remain accessible on GitHub and [npm](https://www.npmjs.com/package/@sebgroup/react-components). This website will remain here indefinitely.
The project will be in an archived state, meaning that no new development will be made _unless_:
- it is meant for fixing critical and common-case bugs on the already existing components
**Where do I go from here?**
Go Green! Visit the [official Green documentation](https://sebgroup.github.io/green/latest/chlorophyll) to get started with SEB's new design system.
---
## Minimum requirements
This version of components has been developed with:
- React
- Typescript
- SEB Bootstrap
## Installation
You should be able to install the NPM package.
```bash
npm install @sebgroup/react-components --save
```
This 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:
```bash
npm install @sebgroup/bootstrap --save
```
Then make sure you add the Main SEB bootstrap package in your main style.SCSS or index.ts as follows
`@import '~@sebgroup/bootstrap/scss/bootstrap';`.
For `Visual Studio Code` users, please install the [recommended plugins](.vscode/extensions.json)
## Development
This 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.
1. Development: `npm start`
2. Check formatting rules, Compile components and Create Docs folder: `npm run build`
3. Build and create the Documentation pages only: `npm run docs`
4. To run the unit tests, run: `npm test`
5. 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`
6. To commit your changes run: `npm run commit` and follow the steps
## Usage
For 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.
```javascript
import { Button } from "@sebgroup/react-components";
const Component = () => {
const onClick = (e) => {
console.log("Im Clicked");
}
return (
Button label
);
}
export default Component;
```