So you want to know more about React Cosmos... Sweet!
You're probably a nice person and don't need to hear this. At the same time, however, you could be one of the assholes roaming the world. So please follow our Code of Conduct and respect the people you interact with.
Jump to:
Make UI developers more productive.
This is the goal. The means are built on the following insight: Designing components in isolation yields reusable components. Reusability is at the heart of productivity.
Help UI developers think long term.
UI development is all fun and games at first. But sooner or later it gets messy. Massively messy. Why? Because calling them "components" isn't enough to avoid tight coupling. Developing components in isolation discourages coupling.
Make UI development fun.
As UI developers, we spend our days improving other people's digital experience. What about us? Let's treat ourselves with the same delightful experience we've accustomed our users to. Something something virtuous circle.
It's common to only think of open source contributions as code. But if you're new to a project submitting a PR should almost never be the first thing you do. Even the most organized codebases have a learning curve. Learn how a project works before trying to change it.
Here's a list of things you can do to help React Cosmos, sorted by project exprience required:
- Use the project. Understand its capabilities.
- Provide user feedback.
- Propose ideas to improve onboarding and user experience – not just features :).
- Respond to issues you know how to solve.
- Engage with the community.
- Engage in roadmap & design discussions.
- Fix known bugs.
- Implement agreed upon changes.
We're all short on time, so be realistic and don't expect special treatment. The better we communicate the more likely we'll end up collaborating.
👉 Use the RFCs process for substantial changes
Please propose an idea before coding it. Otherwise your work might get rejected, which is never fun. Save everybody's time by asking for feedback before implementing something.
Open the CI build page. See what went wrong and learn to run the checks locally. Don't expect a review if your build is broken. Ask for help if you can't figure it out.
Working on Cosmos requires Node 10 or newer
Yarn Workspaces and Lerna make it possible to publish independent packages and still test the project end-to-end.
Tools are installed globally in the root node_modules. This includes Jest, TypeScript, Webpack, and their corresponding plugins. ESLint is also applied globally. Creating a new package has less overhead because of this. React and Webpack deps are also installed once in the root node_modules to avoid version conflicts or bundling multiple copies of React.
git clone [email protected]:react-cosmos/react-cosmos.git
cd react-cosmos
# Install deps and link packages
yarn
# Basic commands
yarn check-types
yarn test
yarn build
# Run example and test React Cosmos end to end
yarn start
# Cosmos #inception
yarn start:playground
# Build single package in watch mode
yarn build react-cosmos-playground2 --watch
# Test watch mode
yarn test:watch
# Single test watch mode
yarn test:watch path/to/my/testfileIn most cases write automated tests. TDD where applicable, but don't force it. Write concise, maintainable tests. Tests should be as readable as source code.
Look inside __tests__ folders and files ending with .test for test examples.
Add ESLint to your editor if possible.
When naming files:
- Use camel case for files:
fixtureState.js. Capitalize components:DragHandle.js. - Use kebab case for package names:
react-cosmos-playground2.
When creating a module:
- Named exports are preferred over default exports.
- Function declarations are preferred over arrow functions at the module level (because the order doesn't matter when using the former).
Have a question or idea to share? See you on Slack.