You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -39,13 +39,13 @@ creating documentation, and writing tests,
39
39
with a minimal amount of effort to set up and flexible enough to integrate with any existing React setup.
40
40
41
41
This line of thinking led us to create [Kit][kit], a suite of tools for developing, documenting, and testing React components.
42
-
Kit consists of many different utilities, but at its core is a set of utility components for creating documentation and demos and a command line interface for zero-config isolated development environments.
42
+
Kit consists of several different modules, but at its core is a set of [utility components][components] for creating documentation and demos and a [command line interface][cli] for zero-config isolated development environments.
43
43
44
44
## Components Over Configuration
45
45
46
-
Some React development tooling requires the overhead of learning custom APIs, configurations, and API-specific code.
46
+
Some React development tooling requires the overhead of learning custom APIs, configurations, and library-specific code.
47
47
With Kit, we've tried to follow our philosophy of **Components Over Configration**.
48
-
Instead of increasing the API surface area of your project with custom configuration,
48
+
Instead of increasing the API surface area of your project with library-specific APIs,
49
49
we've tried to keep it simple by using an API most React developers will already be familiar with: components and props.
50
50
51
51
Because the core part of Kit is built using React components,
@@ -54,13 +54,60 @@ whether you use [Create React App][cra], [Next.js][nextjs], [Gatsby][gatsby], or
54
54
55
55
## Library components
56
56
57
+
58
+
59
+
Kit includes a set of components for displaying your components in isolation,
60
+
with a grid view of multiple components at once, and detail views for testing components in isolation.
61
+
62
+
```jsx
63
+
importReactfrom'react'
64
+
import { Library, Example, Detail } from'@compositor/kit'
65
+
import { Heading, Button } from'../src'
66
+
67
+
exportdefaultprops=>
68
+
<Library>
69
+
<Example name='Heading'>
70
+
<Heading>Hello</Heading>
71
+
</Example>
72
+
<Example name='Button'>
73
+
<Button>Hello</Button>
74
+
<Detail>
75
+
<Button primary>Primary</Button>
76
+
<Button secondary>Primary</Button>
77
+
<Button large>Large</Button>
78
+
<Button small>Small</Button>
79
+
</Detail>
80
+
</Example>
81
+
</Library>
82
+
```
83
+
57
84
## The Cartesian component
58
85
86
+
87
+
88
+
The Kit Cartesian component can be used to display the [Cartesian product][cartesian-product] of a component's props.
89
+
59
90
## The XRay component
60
91
92
+
93
+
94
+
The XRay component is a great way to visually debug CSS layout in your React components.
95
+
It displays a customizable grid and outlines each HTML element to help ensure that your components are aligned as expected.
96
+
61
97
## The Kit CLI
62
98
99
+
Kit also includes a zero-config development environment built on top of the Kit components and [Compositor x0][x0],
100
+
allowing you to quickly spin up a component library view based on a folder of example components.
101
+
102
+
```sh
103
+
npm i -g @compositor/kit-cli
104
+
```
105
+
106
+
```sh
107
+
kit examples --mode library
108
+
```
63
109
110
+
## More to Come
64
111
65
112
<!--
66
113
- simple setup
@@ -76,6 +123,10 @@ whether you use [Create React App][cra], [Next.js][nextjs], [Gatsby][gatsby], or
We're big fans of the KISS principle (Keep It Simple, Stupid) at Compositor,
23
-
And we think that anything that poses a barrier to the creative process can really affect the quality of work you do.
23
+
and we think anything that poses a barrier to the creative process can really affect the quality of the work you do.
24
24
---
25
25
26
26
27
27
# x0: Making React Component Development Stupid Simple
28
28
29
29
We're big fans of the KISS principle (Keep It Simple, Stupid) at Compositor,
30
-
And we think that anything that poses a barrier to the creative process can really affect the quality of work you do.
31
-
We're also (no surprise) big fans of React, which has ushered in a paradigm shift for UI design and development.
32
-
33
-
For people who learn to code, there is a huge boost to productivity with the right abstractions, making things that were previously tedious and
34
-
Time-consuming more efficient and making the person using these abstractions more productive.
30
+
and we think anything that poses a barrier to the creative process can really affect the quality of the work you do.
31
+
We're also big fans of React (no surprise), which has ushered in a paradigm shift for UI design and development.
35
32
33
+
For people who develop software, there can be a huge boost to productivity with the right abstractions, making things that were previously tedious and
34
+
time-consuming more efficient and making the person using these abstractions more productive.
36
35
React represents a helpful abstraction on top of lower-level HTML, CSS, and JS in the form of functional components.
37
36
38
37
While React can be a huge boost to productivity,
38
+
this new abstraction comes with new barriers
39
+
to entry for people unfamiliar with the JavaScript ecosystem.
40
+
Even with the introduction of great tools like [Create React App][cra],
41
+
getting started with an idea can require the proper setup and can slow down the creative process.
39
42
40
-
With this new abstraction comes new barriers to entry for people unfamiliar with the JavaScript ecosystem.
43
+
We built [x0][x0] with these things in mind and really enjoy using x0 as a quick, no frills prototyping and development tool.
44
+
With version 5, we've taken advantage of recent updates in the webpack ecosystem and made it even faster and easier to work with multiple components at once.
41
45
42
-
Even with the introduction of great tools like Create React App, getting started with an idea can require the proper setup and can slow down the creative process.
46
+
x0 is based on the principle of smart defaults.
47
+
Rather than duplicating code with boiler plates for React, Babel and webpack,
48
+
x0 is a batteries-included development tool with the most common settings enabled.
43
49
44
-
We built x0 with these things in mind and really enjoy using x0 as a quick, no frills prototyping and development tool.
50
+
```sh
51
+
npm i -g @compositor/x0
52
+
```
45
53
46
-
With version 5, we've taken advantage of recent updates in the webpack ecosystem and made it even faster and easier to work with multiple components at once.
47
-
48
-
x0 is based on the principle of smart defaults. Rather than duplicating code with boiler plates for React, Babel and webpack, x0 is a batteries-included development tool with the most common settings enabled.
54
+
```sh
55
+
x0 components
56
+
```
49
57
50
58
X0 now accepts a directory of React components as an entry point.
51
59
Create a folder of components and pass it to the `x0` command;
52
60
an isolated development server will start up in seconds
53
61
creating routes based on the file names, with no config or custom setup required.
54
62
Your components will automatically update in the browser with any code change thanks to webpack's hot module replacement feature.
55
63
56
-
X0 also uses the new webpack-serve module which is noticeably faster than the now deprecated webpack-dev-server.
57
-
64
+
X0 also uses the new [webpack-serve][webpack-serve] module which is noticeably faster than the now deprecated webpack-dev-server.
58
65
When you want to share what you've built with others, x0 lets you quickly export a static site, which can be pushed to GitHub or published to any CDN.
59
-
60
66
The new x0 also supports Compositor JSX format, letting you quickly prototype component compositions with a common component library, without the overhead of building out a full component. We've also included MDX support for mixing markdown notes with components.
61
67
68
+
We love using x0 as a quick and painless React development server, and we hope you will too.
69
+
70
+
Get started with x0 now, or let use know what you think on Twitter [@getcompositor][twitter].
0 commit comments