react-cosmos · ovidiuch · Jun 6, 2023 · Jun 5, 2023 · Jun 5, 2023 · Jun 5, 2023
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,6 @@
-## Hi there!
+# Contributing to React Cosmos
+
+Hi there!
 
 So you want to know more about React Cosmos... _Sweet!_
 

diff --git a/README.md b/README.md
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+packages/react-cosmos/README.md
diff --git a/docs/README.md b/docs/README.md
@@ -1,10 +1,30 @@
 # Documentation
 
-> The current docs are for React Cosmos 6. Check out the [migration guide](getting-started/migration.md) to upgrade from v5.
-
 Welcome to the React Cosmos documentation!
 
-## Getting started
+## What Is React Cosmos?
+
+React Cosmos is a powerful tool for developing and testing UI components in isolation. It allows you to focus on one component at a time, resulting in faster iteration and higher-quality components.
+
+With React Cosmos, you can build a component library that keeps your project organized and friendly to new contributors. Reusing components across projects saves time and promotes consistency. Sharing your design language with the community enhances collaboration and ensures a cohesive user experience.
+
+React Cosmos revolutionizes component development, testing, and sharing. Its sandbox environment and component library capabilities optimize your workflow, enabling you to deliver exceptional UI experiences.
+
+## Key Features
+
+| Feature        | Description                                                                                                         |
+| -------------- | ------------------------------------------------------------------------------------------------------------------- |
+| Fixtures       | A file-system based module convention for defining component states effortlessly. Enhanced with decorators.         |
+| User Interface | User-friendly interface for browsing fixtures. Component preview with responsive viewports.                         |
+| Control Panel  | Component data manipulation through UI controls based on component props and custom definitions.                    |
+| Static Export  | An interactive component library deployable to any static hosting service.                                          |
+| Integration    | First-class integrations with Vite, Webpack, React Native, Next.js, and support for integrating with custom setups. |
+| Plugins        | Full-stack plugin system for extending every aspect of React Cosmso to suit your needs.                             |
+| High Quality   | 100% TypeScript. Minimal dependencies. Meticulously designed and tested to ensure the best developer experience.    |
+
+## Getting Started
+
+> The current docs are for React Cosmos 6. Check out the [Migration Guide](getting-started/migration.md) to upgrade from v5.
 
 Choose a dedicated guide for integrating with a specific bundler, framework, or a custom setup:
 
@@ -13,7 +33,7 @@ Choose a dedicated guide for integrating with a specific bundler, framework, or
 - [Next.js](getting-started/next.md)
 - [Create React App](getting-started/create-react-app.md)
 - [React Native](getting-started/react-native.md)
-- [Custom bundler](getting-started/custom-bundler.md)
+- [Custom Bundler](getting-started/custom-bundler.md)
 
 > See [Troubleshooting](getting-started/troubleshooting.md) for common issues.
 
@@ -22,15 +42,15 @@ Choose a dedicated guide for integrating with a specific bundler, framework, or
 - [Fixtures](usage/fixtures.md)
 - [Decorators](usage/decorators.md)
 - [Configuration](usage/configuration.md)
-- [Static export](usage/static-export.md)
+- [Static Export](usage/static-export.md)
 - [Node.js API](usage/node-api.md)
 
 ## Plugins
 
-- [Cosmos plugins](plugins/cosmos-plugins.md)
-- [Server plugins](plugins/server-plugins.md)
-- [UI plugins](plugins/ui-plugins.md)
-- [Fixture plugins](plugins/fixture-plugins.md)
+- [Cosmos Plugins](plugins/cosmos-plugins.md)
+- [Server Plugins](plugins/server-plugins.md)
+- [UI Plugins](plugins/ui-plugins.md)
+- [Fixture Plugins](plugins/fixture-plugins.md)
 
 ---
 

diff --git a/docs/getting-started/create-react-app.md b/docs/getting-started/create-react-app.md
@@ -2,7 +2,7 @@
 
 This is a guide for setting up React Cosmos in a Create React App project.
 
-## Getting started
+## Getting Started
 
 Install the required packages:
 
@@ -71,7 +71,7 @@ module.exports = overrides.webpack(config, process.env.NODE_ENV);
 
 > React Cosmos picks up `webpack.config.js` automatically. Use `webpack.configPath` to customize the Webpack config path.
 
-## Using CRACO with Tailwind CSS
+## Using CRACO With Tailwind CSS
 
 [CRACO](https://github.com/gsoft-inc/craco) is an alternative to react-app-rewired for overriding CRA's internal Webpack config. [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) recommends using CRACO to override CRA's PostCSS settings, which is why this guide targets CRACO and Tailwind CSS together.
 

diff --git a/docs/getting-started/custom-bundler.md b/docs/getting-started/custom-bundler.md
@@ -1,4 +1,4 @@
-# Custom bundler
+# Custom Bundler
 
 This is a guide for setting up React Cosmos with any bundler.
 

diff --git a/docs/getting-started/migration.md b/docs/getting-started/migration.md
@@ -1,4 +1,4 @@
-# React Cosmos 6 migration guide
+# React Cosmos 6 Migration Guide
 
 > We're also migrating our community from Slack to Discord. [Join our brand new Discord Server](https://discord.gg/3X95VgfnW5) to interact with fellow Cosmonauts.
 
@@ -21,31 +21,31 @@ This major version accomplishes the following:
 - New Vite plugin.
 - In progress: Official APIs for both bundler and UI plugins.
 
-## Breaking changes
+## Breaking Changes
 
 - Dropped Node <14 support.
 - Dropped IE support.
 - Migrated to React 18.
 
 Dropping backwards compatibility with older versions of Node, browsers or React might be unfortunate for some but it's the only way to move forward. It allowed us to get the codebase into a much better shape by minimizing 3rd party dependencies and publishing ESM modules.
 
-### Webpack plugin
+### Webpack Plugin
 
 Webpack support is no longer included in the core React Cosmos packages. To set up a webpack codebase you need to install `react-cosmos-plugin-webpack` and add it to the list of plugins in your Cosmos config.
 
 ```json
 "plugins": ["react-cosmos-plugin-webpack"]
 ```
 
-### Vite plugin
+### Vite Plugin
 
 React Cosmos 6 also comes with a brand new Vite plugin. To set up a Vite codebase you need to install `react-cosmos-plugin-vite` and add it to the list of plugins in your Cosmos config.
 
 ```json
 "plugins": ["react-cosmos-plugin-vite"]
 ```
 
-### Other breaking changes
+### Other Breaking Changes
 
 - `react-cosmos/fixture` exports moved to `react-cosmos/client` (eg. `import { useValue } from 'react-cosmos/client'`).
 - `NativeFixtureLoader` component moved from `react-cosmos/native` to new `react-cosmos-native` package. Install `react-cosmos-native@next` as well for a React Native setup.
@@ -55,7 +55,7 @@ React Cosmos 6 also comes with a brand new Vite plugin. To set up a Vite codebas
 
 There might be some other subtle breaking changes, especially if you're implementing a custom Cosmos renderer or if you're integrated with a bundler other than webpack. Create an issue or send us a message on [Discord](https://discord.gg/3X95VgfnW5) if this is the case and we'll do our best to help you with the migration.
 
-### Next steps
+### Next Steps
 
 A rough outline for this release:
 

diff --git a/docs/getting-started/next.md b/docs/getting-started/next.md
@@ -6,7 +6,7 @@ This guide covers how to integrate React Cosmos with Next.js 13.4+. It includes
 
 Also check out [react-cosmos/nextjs-example](https://github.com/react-cosmos/nextjs-example), which features both Server and Client fixtures of the glorious [react-tweet](https://github.com/vercel-labs/react-tweet) component.
 
-## Getting started
+## Getting Started
 
 Create a [new Next.js project](https://nextjs.org/docs/getting-started/installation) or open an existing one.
 
@@ -81,7 +81,7 @@ You can import both Server and Client components in your fixtures, which run on
 
 - Only single function fixtures can be exported from a fixture module with the `'use client'` descriptor. That's because Client fixture modules are passed _as is_ to the Server render tree and their exports are expected to be component types by design. While other fixture formats (React Node exports or multi fixture exports) cannot be used in Client fixtures, all Cosmos fixture formats as supported in Server fixtures.
 
-## Static export
+## Static Export
 
 The `cosmos-export` command creates a static export of the Cosmos UI shell, which expects a corresponding static Renderer to connect with. Generating the complete export requires stringing a few simple commands together:
 
@@ -103,7 +103,7 @@ npx http-server ./cosmos-export
 
 👀 **[Live demo](https://cosmos-nextjs.vercel.app)**
 
-## Let's make this better
+## Let's Make This Better
 
 Running Server Components in Cosmos is awesome but a plugin could take this integration to the next level (no pun intended).
 

diff --git a/docs/getting-started/react-native.md b/docs/getting-started/react-native.md
@@ -2,7 +2,7 @@
 
 This is a guide for setting up React Cosmos in a React Native project, with or without Expo.
 
-## Getting started
+## Getting Started
 
 Install the required packages:
 
@@ -58,7 +58,7 @@ The `Hello` fixture will show up in your React Cosmos UI.
 
 At this point Cosmos should successfully read your fixtures. One more step before you can render them.
 
-### Set up the React Native renderer
+### Set Up React Native Renderer
 
 This is very similar to a [custom bundler setup](./custom-bundler.md). Cosmos cannot plug itself automatically into React Native's build pipeline (Metro), but you can do it with minimal effort.
 
@@ -109,7 +109,7 @@ Open your app in the simulator and the Cosmos renderer should say "No fixture se
 
 You've taken the first step towards designing reusable components. You're ready to prototype, test and interate on components in isolation.
 
-## App fixture
+## App Fixture
 
 You'll often want to load the entire app in development. The simplest way to do this without disconnecting the Cosmos entry point is to create an App fixture:
 
@@ -120,7 +120,7 @@ import App from './App.main';
 export default () => <App />;
 ```
 
-## Initial fixture
+## Initial Fixture
 
 You can configure the Cosmos Native renderer to auto load a fixture on init.
 

diff --git a/docs/getting-started/troubleshooting.md b/docs/getting-started/troubleshooting.md
@@ -4,7 +4,7 @@
 
 - [You may have a URL instance in your state](https://github.com/react-cosmos/react-cosmos/issues/1002).
 
-### Fixtures not detected?
+### Fixtures Not Detected?
 
 - Run `cosmos` with the `--expose-imports` flag. This should generate `cosmos.imports.js`. Check that file to see if your fixtures are being picked up by Cosmos.
 - Check your directory structure. If you are using a Cosmos config file, Cosmos will use the directory of the config file as the root of your project. If your Cosmos config file is nested in a directory that isn't an ancestor of your fixture files Cosmos won't find your fixtures. To solve this add a `rootDir` entry to your Cosmos config pointing to your root directory.
@@ -18,15 +18,15 @@
 - Check for build errors in your terminal.
 - Make sure you have `html-webpack-plugin` installed, as well as [any other build dependency](webpack.md#webpack-config).
 
-### Renderer not responding?
+### Renderer Not Responding?
 
 - Try renaming `filename` in HtmlWebpackPlugin options to `index.html`, or alternatively remove the HtmlWebpackPlugin plugin from your Webpack config and Cosmos will automatically it with the proper options. For more details see [this issue](https://github.com/react-cosmos/react-cosmos/issues/1220).
 
 ### _localhost:3001/\_\_get-internal-source..._ 404s?
 
 - [Try changing your Webpack `devtool` to something like `cheap-module-source-map`](https://github.com/react-cosmos/react-cosmos/issues/1045#issuecomment-535150617).
 
-### main.js file is cached in static exports?
+### main.js Cached in Static Exports?
 
 - [Set `includeHashInOutputFilename` to `true`](webpack.md#output-filename).
 

diff --git a/docs/getting-started/vite.md b/docs/getting-started/vite.md
@@ -2,7 +2,7 @@
 
 This is a guide for setting up React Cosmos in a Vite project.
 
-## Getting started
+## Getting Started
 
 Install the required packages:
 
@@ -47,11 +47,11 @@ The `Hello` fixture will show up in your Cosmos UI and will render when you sele
 
 You've taken the first step towards designing reusable components. You're ready to prototype, test and interate on components in isolation.
 
-## Vite config
+## Vite Config
 
 Cosmos generates a default Vite config if a custom one isn't provided.
 
-### Custom config
+### Custom Vite Config
 
 Cosmos picks up `vite.config.js` from the project root automatically. Use the `vite.configPath` setting to provide an existing Vite config at a different path:
 

diff --git a/docs/getting-started/webpack.md b/docs/getting-started/webpack.md
@@ -2,7 +2,7 @@
 
 This is a guide for setting up React Cosmos in a Webpack project.
 
-## Getting started
+## Getting Started
 
 Install the required packages:
 
@@ -47,7 +47,7 @@ The `Hello` fixture will show up in your Cosmos UI and will render when you sele
 
 You've taken the first step towards designing reusable components. You're ready to prototype, test and interate on components in isolation.
 
-## Webpack config
+## Webpack Config
 
 Cosmos generates a default Webpack config if a custom one isn't provided.
 
@@ -57,7 +57,7 @@ Cosmos generates a default Webpack config if a custom one isn't provided.
 
 > **Warning** You may also need to create a `.babelrc` in your project root.
 
-### Custom config
+### Custom Webpack Config
 
 Probably the most common scenario. Most of us end up with a hairy Webpack config sooner or later.
 
@@ -73,7 +73,7 @@ Cosmos picks up `webpack.config.js` from the project root automatically. Use the
 
 > You can also point to a module inside a dependency, like in the [Create React App](create-react-app.md) example.
 
-### Config override
+### Webpack Config Override
 
 Overriding the Webpack config gives you complete control. Use the `webpack.overridePath` setting to point to a module that customizes the Webpack config used by Cosmos.
 
@@ -94,7 +94,7 @@ module.exports = (webpackConfig, env) => {
 };
 ```
 
-### Output filename
+### Output Filename
 
 Cosmos overwrites `output.filename` in the Webpack config to `[name].js` by default. Due to caching, this isn't ideal when generating static exports via `cosmos-export` command. Use the `webpack.includeHashInOutputFilename` setting to change the filename template to `[name].[contenthash].js`.
 

diff --git a/docs/plugins/cosmos-plugins.md b/docs/plugins/cosmos-plugins.md
@@ -1,8 +1,8 @@
-# Cosmos plugins
+# Cosmos Plugins
 
 A Cosmos plugin is a wrapper for two plugin types: **server plugins** and **UI plugins**. Each plugin type has a distinct API and runs in a different environment. Combining both into a single Cosmos plugin adds full-stack capabilities to React Cosmos with a single package.
 
-## Creating a plugin
+## Creating a Plugin
 
 Create a `cosmos.plugin.json` file:
 
@@ -23,7 +23,7 @@ See the individual guides for each plugin type:
 - [Server plugins](server-plugins.md)
 - [UI plugins](ui-plugins.md)
 
-## Enabling a plugin
+## Enabling a Plugin
 
 Add it to the `plugins` option in the `cosmos.config.json` of the host project:
 
@@ -41,7 +41,7 @@ If the Cosmos plugin is an NPM package, add the name of the package to `plugins`
 }
 ```
 
-## Publishing a plugin
+## Publishing a Plugin
 
 To publish a Cosmos plugin as an NPM package, set the `main` field in its `package.json` to `"cosmos.plugin.json"` (or a different path where the Cosmos plugin config is located):
 
@@ -53,9 +53,9 @@ To publish a Cosmos plugin as an NPM package, set the `main` field in its `packa
 }
 ```
 
-## Existing plugins
+## Existing Plugins
 
-### Open fixture plugin
+### Open Fixture Plugin
 
 This combines a [server plugin](server-plugins.md) with a [UI plugin](ui-plugins.md). It adds a renderer action that opens the selected fixture file in your default editor.
 
@@ -69,7 +69,7 @@ npm i -D react-cosmos-plugin-open-fixture
 }
 ```
 
-### Boolean input plugin
+### Boolean Input Plugin
 
 This is a [UI plugin](ui-plugins.md) that turns boolean inputs in the [control panel](https://github.com/react-cosmos/react-cosmos/blob/main/docs/usage/fixtures.md#fixture-controls) from a true/false button to a checkbox input.
 

diff --git a/docs/plugins/fixture-plugins.md b/docs/plugins/fixture-plugins.md
@@ -1,4 +1,4 @@
-# Fixture plugins
+# Fixture Plugins
 
 While there's no formal way to package renderer plugins (like with server and UI plugins), you can tap into the fixture context to read and write fixture state that is synchronized between the renderer and the Cosmos UI.
 

diff --git a/docs/plugins/server-plugins.md b/docs/plugins/server-plugins.md
@@ -1,4 +1,4 @@
-# Server plugins
+# Server Plugins
 
 This is a guide for creating Cosmos server plugins.