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
Components created in Lab can be exported as static React components for use in a React application.
5
+
6
+
Click the `File > Export Library` menu item and select a folder to export your components to. Note that any files that are named the same as a component in your library will be overwritten.
7
+
8
+
## ThemeProviders
9
+
10
+
Because Lab components make use of a ThemeProvider component, you will also need to use a ThemeProvider in your own application to use Lab components.
11
+
12
+
Depending on the CSS-in-JS library you export to, importing a ThemeProvider will look like one of the examples below:
13
+
14
+
[*styled-components*][sc-theme]
15
+
16
+
```js
17
+
import { ThemeProvider } from'styled-components'
18
+
```
19
+
20
+
[*glamorous*][g-theme]
21
+
22
+
```js
23
+
import { ThemeProvider } from'glamorous'
24
+
```
25
+
26
+
[*cxs*][cxs-theme]
27
+
28
+
```js
29
+
importThemeProviderfrom'cxs/ThemeProvider'
30
+
```
31
+
32
+
[*fela*][fela-theme]
33
+
34
+
```js
35
+
import { ThemeProvider } from'react-fela'
36
+
```
37
+
38
+
[*emotion* & *theming*][emotion-theme]
39
+
40
+
```js
41
+
import { ThemeProvider } from'theming'
42
+
```
43
+
44
+
The theme created in a Lab project is automatically saved as a JSON file named `theme.json`.
45
+
Because it‘s a static JSON file, it can be imported in projects using webpack 2 or higher.
46
+
47
+
```js
48
+
importthemefrom'../theme.json'
49
+
```
50
+
51
+
At the root of your React application, wrap the entire component tree with the ThemeProvider.
Primitive style components can be extended when you want to take a component's existing styles and change them slightly, for example, making a BigButton variation of a Button component.
5
+
6
+
To extend a component, click on the base component and click the *Extend Component* button in the lower part of the edit panel.
First, choose a folder for a new project. This can be an existing react project that has a collection of components. Lab will save a `lab.json` and `theme.json` file.
5
5
We recommend you keep this folder under source control, using such as [git](https://git-scm.com).
@@ -38,37 +38,31 @@ Try adjusting the style controls on the right and creating a component that fits
38
38
Once you‘ve got some basic styles set, you‘ll want to test the component out with different states to make sure it works.
39
39
40
40
React uses *props* to pass values into a component from the parent.
41
-
At the bottom of the right panel, you‘ll see a section called *Example Props*.
41
+
At the bottom of the right panel, you‘ll see a section called *Examples*.
42
+
Examples use JSX syntax so you can test how your component would work
43
+
in a real React application.
44
+
42
45
In the first code editor, try adding the following:
43
46
44
47
```js
45
-
{
46
-
children:'Hello'
47
-
}
48
+
<Button>
49
+
Hello
50
+
</Button>
48
51
```
49
52
50
-
The syntax here is a plain JavaScript object. This object is passed into the component, similar to adding attributes (class, id, href, title, alt, etc.) to an HTML element.
51
-
52
-
If this were using JSX syntax, it would look like the following:
53
-
54
-
```jsx
55
-
<Button children='hello'/>
56
-
```
57
-
58
-
The `children` prop is React‘s way of handling composition.
59
-
By passing a string as children into the component, you‘ve set the text inside the component.
60
-
61
53
Next, below the code editor, click the *Add Example* button.
62
-
In the new editor box, add another `children` prop, but this time add a longer string of text.
54
+
In the new editor box, add a longer string of text.
63
55
64
56
```js
65
-
{
66
-
children:'Well howdy there partner'
67
-
}
57
+
<Button>
58
+
Hello there, how are you?
59
+
</Button>
68
60
```
69
61
70
62
You can now switch between these two examples to see how your component responds in different situations.
71
63
64
+
Click the *Show all examples* radio to show all examples at once.
65
+
72
66
73
67
## Customizing Styles
74
68
@@ -79,95 +73,9 @@ hover states, box shadows, transitions, or any other CSS property.
79
73
All CSS properties are camelCased, so instead of `box-shadow`, use `boxShadow` as the key.
80
74
All values need to be JavaScript strings, which means they should be enclosed in single quotes.
81
75
82
-
## Importing Components
83
-
84
-
A react component created outside of Lab can be imported to Lan. You can view them side-by-side and with different example props.
85
-
86
-
To import a component, select the `File > Import Component` menu item.
87
-
Navigate to a component within the same folder as your project to select a component for importing.
88
-
89
-
90
-
91
-
Once a component is loaded into your project, you can make changes to the source file in your own text editor,
92
-
and changes will be automatically reloaded in Lab.
93
-
94
-
*Troubleshooting*
95
-
96
-
- If a component fails to load, the preview should display an error to help with debugging.
97
-
- Make sure components are located within the same root folder as your Lab project or in a subdirectory.
98
-
- Make sure any npm dependencies have been installed in your project by running `npm install` in your terminal.
99
-
- Make sure your component *DOES NOT* make use of any webpack loaders or other build-specific tools.
100
-
101
-
102
-
## Exporting Lab Components
103
-
104
-
Components created in Lab can be exported as static React components for use in a React application.
105
-
106
-
Click the `File > Export Library` menu item and select a folder to export your components to. Note that any files that are named the same as a component in your library will be overwritten.
107
-
108
-
### ThemeProvider
109
-
110
-
Because Lab components make use of a ThemeProvider component, you will also need to use a ThemeProvider in your own application to use Lab components.
111
-
112
-
Depending on the CSS-in-JS library you export to, importing a ThemeProvider will look like one of the examples below:
113
-
114
-
[*styled-components*][sc-theme]
115
-
116
-
```js
117
-
import { ThemeProvider } from'styled-components'
118
-
```
119
-
120
-
[*glamorous*][g-theme]
121
-
122
-
```js
123
-
import { ThemeProvider } from'glamorous'
124
-
```
125
-
126
-
[*cxs*][cxs-theme]
127
-
128
-
```js
129
-
importThemeProviderfrom'cxs/ThemeProvider'
130
-
```
131
-
132
-
[*fela*][fela-theme]
133
-
134
-
```js
135
-
import { ThemeProvider } from'react-fela'
136
-
```
137
-
138
-
[*emotion* & *theming*][emotion-theme]
139
-
140
-
```js
141
-
import { ThemeProvider } from'theming'
142
-
```
143
-
144
-
The theme created in a Lab project is automatically saved as a JSON file named `theme.json`.
145
-
Because it‘s a static JSON file, it can be imported in projects using webpack 2 or higher.
146
-
147
-
```js
148
-
importthemefrom'../theme.json'
149
-
```
150
-
151
-
At the root of your React application, wrap the entire component tree with the ThemeProvider.
A React component created outside of Lab can be imported to Lab.
5
+
This is helpful for viewing your Lab components in the context
6
+
of others, and for using Lab as an isolated development environment.
7
+
8
+
To import a component, select the `File > Import Component` menu item.
9
+
Navigate to a component within the same folder as your project to select a component for importing.
10
+
11
+
12
+
13
+
Once a component is loaded into your project, you can make changes to the source file in your own text editor,
14
+
and changes will be automatically reloaded in Lab.
15
+
16
+
*Troubleshooting*
17
+
18
+
- If a component fails to load, the preview should display an error to help with debugging.
19
+
- Make sure components are located within the same root folder as your Lab project or in a subdirectory.
20
+
- Make sure any npm dependencies have been installed in your project by running `npm install` in your terminal.
21
+
- Make sure your component *DOES NOT* make use of any webpack loaders or other build-specific tools.
22
+
- Lab currently only supports standard ECMAScript (ES). Components written in other formats such as TypeScript will need to be converted to ES before importing.
0 commit comments