Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/murshidazher/react-play-styled
🍭 A minimalistic design system for demonstrating modular react components.
https://github.com/murshidazher/react-play-styled
atomic demonstrate react react-components storybook styled-components
Last synced: about 4 hours ago
JSON representation
🍭 A minimalistic design system for demonstrating modular react components.
- Host: GitHub
- URL: https://github.com/murshidazher/react-play-styled
- Owner: murshidazher
- License: mit
- Created: 2020-06-16T15:30:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-19T19:50:08.000Z (over 4 years ago)
- Last Synced: 2024-11-07T23:52:37.374Z (about 16 hours ago)
- Topics: atomic, demonstrate, react, react-components, storybook, styled-components
- Language: JavaScript
- Homepage: https://react-play.netlify.app
- Size: 6.35 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [react-play-styled](https://github.com/murshidazher/react-play-styled) [](https://github.com/murshidazher/react-play-styled/releases/tag/v1.0.5)
[](https://www.npmjs.com/package/react-play-styled)
[](https://www.npmjs.com/package/react-play-styled)
[](https://github.com/murshidazher/react-play-styled)
> A minimalistic react components library made with [styled-components](https://styled-components.com).
- **UI Component Library**— demonstrate [styled-components](https://styled-components.com) with [storybook](https://storybook.js.org/) and to build a CSS UI design system documentation.
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Installing / Getting started](#installing--getting-started)
- [Initial Configuration](#initial-configuration)
- [Developing](#developing)
- [Usage](#usage)
- [Components](#components)
- [Links](#links)
- [License](#license)
## Installing / Getting started
A quick introduction of the minimal setup you need to get a up & running.
```sh
$ npm i react-play-styled -S
```
or
```sh
$ yarn add react-play-styled
```
### Initial Configuration
> Note: every component has a peer dependencies. To use these components you also need to install these peer dependencies.
```sh
$ npm i [email protected] [email protected]
[email protected] [email protected]
[email protected]
```
## Developing
Play around with the project and view the documentation using:
```sh
$ npm run storybook
```
## Usage
To see which components are available take a look at the [components section](#components).
```jsx
// whatever components you need to import
import { Button } from 'react-play-styled';
export const myComponent = (props) => (
Hello, World!
);
```
## Components
* Buttons Component
* Modals Component
* TextFields Component
## Links
A list of tools used to develop this project
- [react](https://reactjs.org/) - a `js` library for creating interactive UIs.
- [styled-components](https://www.styled-components.com/) - for `css-in-js` without worrying about specificity.
- [polished](https://polished.js.org/) - for `css` normalization.
- [styled-components-modifiers](https://github.com/Decisiv/styled-components-modifiers) - allows to pass `props` to `styled-components`.
- [react-spring](https://www.react-spring.io/) - for micro-interaction `css` animations using `js`.
- [storybook](https://storybook.js.org/docs/guides/quick-start-guide/) - used for document the code and components.
## License
[MIT](https://github.com/murshidazher/react-play-styled/blob/master/LICENSE) © Murshid Azher