Hi there!
So you want to know more about React Cosmos... Sweet!
You're probably nice and don't need to hear this but 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 Discussions to propose ideas.
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 16 or newer
NPM 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.
git clone git@github.com:react-cosmos/react-cosmos.git
cd react-cosmos
# Install deps and link packages
npm install
# Basic commands
npm run build
npm run test
npm run check-types
# Run Vite example
npm --workspace example-vite start
# Cosmos UI #inception
npm --workspace react-cosmos-ui run playground
# Build single package once or in watch mode
npm run build react-cosmos-core
npm run build react-cosmos-core --watch
# Test watch all or specific tests
npm run test:watch
npm run test:watch path/to/my/file.test.tsIn 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-renderer.
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 Discord.