cwlsn / rinse-react

🚿 Rinse, React, repeat. A boilerplate to build a React component library.

Rinse, React, repeat. A boilerplate to build a React component library.

To learn how this project was made from scratch, read the blog post!

Get Started

To start your own React component library, clone this repository and start your own Git journey!

$ git clone https://github.com/cwlsn/rinse-react cool-name
$ cd cool-name
$ rm -rf .git
$ git init

Development and Storybook

You can easily develop and interact with your components by using Storybook. To run the local server, simply run:

$ npm i
$ npm run storybook

Navigate to http://localhost:9001 to view your stories. They should automatically update as you develop.

Storybook will pick up any story from the stories.js file in a component folder.

Rinse is currently using the latest technology available, so you may need to update your Node versions to latest to accomodate Babel 7 and Webpack 4.

rinse-react's Issues

Why are react, react-dom, styled-components dependencies, not dev and peer dependencies?

Given that the intention that these components should only be used by other projects, shouldn't react, etc be a peer dependency?

Can we have typescript support ?

Hello there,
This seems to be a very good starting point to create react component library, can we add support for typescript in this? Let me know if there's a workaround.
Thanks
Bikash

dist not included v4.0.0

Hi, thank you for making great repository and blog post :)

I tried to use rinse react with v4.0.0

and import button like below

import React from "react";
import { Button } from "rinse-react";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Button>hello!</Button>
      </header>
    </div>
  );
}

export default App;

I got

Module not found: Can't resolve 'rinse-react' in xxx

error.

I noticed package json point out dist/index.js but not included.
The poblem solved by adding dist/index.js file by hand.
It looks need to add dist/index.js for v4.0.0.

Unable to start storybook

I simply installed and started:

$ git clone https://github.com/cwlsn/rinse-react cool-name
$ cd cool-name
$ rm -rf .git
$ git init

$ npm i
$ npm run storybook

My node version is 11.7

And the error message in the dev tools in chrome:

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/provider/dist/provider.esm.js (vendors~main.822ce4136b4d063afde1.bundle.js:1206)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/components/dist/layout/index.js (vendors~main.822ce4136b4d063afde1.bundle.js:12514)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/components/dist/index.js (vendors~main.822ce4136b4d063afde1.bundle.js:11900)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-actions/dist/components/ActionLogger/index.js (vendors~main.822ce4136b4d063afde1.bundle.js:2469)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-actions/dist/containers/ActionLogger/index.js (vendors~main.822ce4136b4d063afde1.bundle.js:2675)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)

Loosing all styles

I have installed 'rinse-react' and tried to use the default button component. When I import the Button into the javascript using import { Button } from 'rinse-react'; I loose all other styling on my app.

The app I am using it with is built using styled-components and as soon as I remove the import the styling in my app returns.

Create Webpack config

Requirements

• First issue! Run npm init
• Should take in a single entry point
• Should output a single file in dist folder
• Update main of package.json to reflect the output
• Be able to handle the JS, JSX files, as well as SCSS and images
• Some general housekeeping, editorconfig, update readme, etc...

Docz doesn't work with newly cloned project

After cloning react-rinse for a new project, docz doesn't seem to work.

System Specs:

$ node -v
10.16.3
$ yarn -v 
1.19.0

Resolution: Tried upgrading webpack and everything seems to be working.
I can open up a PR for the same.

Fix root Readme rendering on GitHub and npm

Requirements

• Changing to mdx format made things a bit weird for the Markdown readers. Need to figure out how to make everything play nicely. Having both md and mdx will probably work, or possibly creating a new mdx home page for the site would work.

Add Jest for Unit testing

Requirements

• Add Jest as a dependency and configure it to work in the current environment
• Add unit tests to Button
• Update documentation
• Use defaults as much as possible

Create first component

Requirements

• Create folder for components in src
• Update src/index.js to export the components content
• Add components/index.js that exports the components
• Create a folder for the first component, including the component code, export file and readme
• First component should be simple but demonstrable, perhaps a button

Thoroughly document code

Requirements

• Go through the config files and add code comments. If this repo is companion content to an informative article, the code should also read as informative.

Add docz to the Component docs

Requirements

• Update the basic .md docs inside components to be .mdx and add scripts for the docz things
• Add Playground components
• Customize theme to be nice
• Investigate deploying the ensuing site to rinsejs.io/com

Update dependencies

Update dependencies as npm has found 1686 vulnerabilities (1654 moderate, 32 high), which is an insane amount.
npm audit fix sorts out the majority of them and you're left with one for node-sass, which is still in limbo at the moment.

Bundle size

Hello.
im worried about the initial size of the bundle.
Only with the default button component the bundle has a size of 153kb

The bundle has the full react library , Object assign and scheduler.production.min.js.
Is there a reason for this?
Thanks.

Create some sort of architecture philosophy document

Preamble

I find myself doing things differently while creating this repo and companion content, trying to focus on defaults of libraries. I would normally not use a .storybook directory and opt for my own config folder, but keeping scripts as simple as possible is really refreshing. I feel like I am constantly coercing my projects to work with my opinionated structure instead of relying on the OSS community's sensible defaults. These people are smarter than me, and while it may help me understand the libraries I implement, going to route of the defaults feels cleaner.

Requirements

• Write a PHILOSOPHY.md doc to detail this idea
• Write a DEFAULTS.md doc to keep track of everything. Going to each website is a pain.
• Write a CONTRIBUTING.md doc just in case any human interacts with this repo
• Add husky and lint-staged to ensure linting and prettier are consistent across machines

Convert to Rollup?

Is it a good idea to convert to Rollup?

Cant run storybook or build commands

i followed the instructions for creating a new project exactly, but i cant start storybook or build.

npm run storybook

[email protected] storybook dev/cool-name
start-storybook -p 9001

dev/cool-name/node_modules/postcss/node_modules/source-map/lib/quick-sort.js:1
(function (exports, require, module, __filename, __dirname) { �
^

SyntaxError: Invalid or unexpected token
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (/Users/david/Documents/dev/cool-name/node_modules/postcss/node_modules/source-map/lib/source-map-consumer.js:12:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: start-storybook -p 9001
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/david/.npm/_logs/2019-01-15T14_25_10_570Z-debug.log

Parse error unexpected token

Not sure if this is something I'm doing, but I've just uploaded rinse to github, and npm installed it in my project. Anyone any ideas, or settings I may need in order to get the separate component library to get properly pulled in?

Currently getting the following Babel error:

Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| const Button = () => {
|    return (
>      <Button>test</Button>
|    );
| };

I can do a typescript conversion.

Hey, I've basically got a typescript conversion, plus some other things, working.

Just wondering, is that something you are interested in publishing here, or should I create my own fork?

Setup React Storybook for Visualizing Components

Requirements

• Install Storybook and configure to work with Component/stories.js format
• Update scripts to run the book