Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marshmallow-insurance/smores-react
🍠Marshmallow React components
https://github.com/marshmallow-insurance/smores-react
component-library design-system react react-components storybook styled-components typescript
Last synced: about 5 hours ago
JSON representation
🍠Marshmallow React components
- Host: GitHub
- URL: https://github.com/marshmallow-insurance/smores-react
- Owner: marshmallow-insurance
- License: mit
- Created: 2019-04-05T10:06:15.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T09:40:32.000Z (about 2 months ago)
- Last Synced: 2024-10-29T09:42:12.227Z (about 2 months ago)
- Topics: component-library, design-system, react, react-components, storybook, styled-components, typescript
- Language: TypeScript
- Homepage: http://marshmallow-insurance.github.io/smores-react
- Size: 351 MB
- Stars: 40
- Watchers: 5
- Forks: 5
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Smores React
`smores-react` is a collection of [React](https://facebook.github.io/react/)
components that conform to Marshmallow's Design System - "_S'mores_".
## Install
```bash
$ yarn add @mrshmllw/smores-react
# OR
$ npm install @mrshmllw/smores-react
```
## Making changes
When making changes and creating PR's we use [semantic-releases](https://www.npmjs.com/package/semantic-release) which make use of [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/).
So to ensure our CHANGELOG.md is updated automatically and gets the changes we have made, we just need to name our PR's following this convention (casing matters): e.g
1. patch - fix(OPTIONAL bugfix-reference): some bugfix
2. minor - feat(OPTIONAL feature-reference): some feature
3. major - BREAKING CHANGE: some breaking change
## Release
Only the following branches are supported for release:
- `main`
- `feature/*`
- `chore/*`
- `fix/*`
#### Preview
Before releasing, you may want to see the changes that will be included in the next version deployed on NPM, you can do so by:
1. Goto our [github workflows](https://github.com/marshmallow-insurance/smores-react/actions)
2. Click `Preview Bump and Publish`
3. Press `Run workflow` and select the `main` branch.
4. Wait for the `Generate preview CHANGELOG.md` and look at the results!
#### Releasing & Publishing
When you're happy with your changes, you can release & publish your changes to NPM in one fell swoop by:
1. Goto our [github workflows](https://github.com/marshmallow-insurance/smores-react/actions)
2. Click `Bump and Publish`
3. Press `Run workflow` and select the `main` branch.
4. Wait for release!
Note: this workflow will fail if the package version is already on the latest, so you dont have to worry about deploying the same changes multiple times.
#### Pre-Releases
Not too different to your usual workflow!
1. Checkout a new branch with the prefix `(feature|chore|fix)/` e.g. `feature/awesome-new-feature`
2. Open a PR and create your changes as normal using semantic-commits!
3. Goto our [github workflows](https://github.com/marshmallow-insurance/smores-react/actions)
4. Click `Bump and Publish` or `Preview Bump and Publish`
5. Press `Run workflow` and select `` branch.
6. Wait for release!
7. This can be done multiple times and it will increment your pre-release package version!
8. When you're happy with the changes, simply squash and merge the PR and release `main`!
## Running Smores in dev mode
To run Smores in dev mode follow the below instructions on installing and using Yalc to link up your project repo with Smores.
Install yalc on a global level by running
```
npm i yalc -g
```
This only needs to be installed once.
To run Smores in dev mode :
1. Make desired changes in Smores repo
2. On your Smores branch run
```
yalc publish
```
This will copy all the files that should be published into a remote NPM registry
In your project repo (not Smores e.g customer portal/sign up flow etc) run
```
yalc add @mrshmllw/smores-react
```
this will copy the current version from the store to your project’s .yalc folder and inject a file: .yalc/@mrshmllw/smores-react dependency into package.json
Every time you make changes in Smores and you wan’t to see it in local
run
```
yalc publish —private
```
In your project folder to see your Smores changes run the below to see the changes
```
yalc update
```
When you’ve finished deving run the below in your project folder to remove all packages linked
```
yalc remove --all
```
## List of Components
* [Accordion](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Accordion)
* [ActionDropdown](https://github.com/marshmallow-insurance/smores-react/tree/master/src/ActionDropdown)
* [Banner](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Banner)
* [Box](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Box)
* [BrandCard](https://github.com/marshmallow-insurance/smores-react/tree/master/src/BrandCard)
* [Button](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Button)
* [Card](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Card)
* [CheckBox](https://github.com/marshmallow-insurance/smores-react/tree/master/src/CheckBox)
* [CheckBoxGroup](https://github.com/marshmallow-insurance/smores-react/tree/master/src/CheckBoxGroup)
* [Chip](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Chip)
* [Datepicker](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Datepicker)
* [Divider](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Divider)
* [Dropdown](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Dropdown)
* [Emoji](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Emoji)
* [Icon](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Icon)
* [IconStrict](https://github.com/marshmallow-insurance/smores-react/tree/master/src/IconStrict)
* [IconWrapper](https://github.com/marshmallow-insurance/smores-react/tree/master/src/IconWrapper)
* [LabelledText](https://github.com/marshmallow-insurance/smores-react/tree/master/src/LabelledText)
* [Link](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Link)
* [Loader](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Loader)
* [Logo](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Logo)
* [Modal](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Modal)
* [NumberInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/NumberInput)
* [Pagination](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Pagination)
* [RadioButton](https://github.com/marshmallow-insurance/smores-react/tree/master/src/RadioButton)
* [RadioGroup](https://github.com/marshmallow-insurance/smores-react/tree/master/src/RadioGroup)
* [RichText](https://github.com/marshmallow-insurance/smores-react/tree/master/src/RichText)
* [RichTextEditor](https://github.com/marshmallow-insurance/smores-react/tree/master/src/RichTextEditor)
* [Row](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Row)
* [SearchInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/SearchInput)
* [Snackbar](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Snackbar)
* [SupportMessage](https://github.com/marshmallow-insurance/smores-react/tree/master/src/SupportMessage)
* [Table](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Table)
* [Tag](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Tag)
* [Text](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Text)
* [Textarea](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Textarea)
* [TextDateOfBirthInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/TextDateOfBirthInput)
* [TextInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/TextInput)
* [Toggle](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Toggle)
* [Tooltip](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Tooltip)
## Usage
```js
import React from 'react';
import {Text, Button} from '@mrshmllw/smores-react';
const App = () => (
<>
Hey you
console.log('thanks for clicking :)')}
>
Click me!
>
);
```
## License
MIT © [Marshmallow](https://www.marshmallow.com/)