@theroutingcompany/components 0.0.31 → 0.0.32-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -32
- package/dist/trc-components.es.js +2532 -2531
- package/dist/trc-components.es.js.map +1 -1
- package/dist/trc-components.umd.js +8 -7
- package/dist/trc-components.umd.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# TRC TREX Component Library
|
|
2
2
|
|
|
3
|
-
View the [StoryBook](https://
|
|
3
|
+
View the [StoryBook](https://component-library-poxjaz55ba-uc.a.run.app/).
|
|
4
4
|
|
|
5
5
|
## Developing Locally
|
|
6
6
|
|
|
@@ -10,39 +10,49 @@ Clone the dashboard repo at the same level as this one. Then run `npm link ../co
|
|
|
10
10
|
|
|
11
11
|
First double check if everything that needs to exported is added to the `components/index.js` or `helpers/index.js` and run `npm run build` before.
|
|
12
12
|
|
|
13
|
-
###
|
|
13
|
+
### Prerelease
|
|
14
|
+
|
|
15
|
+
Use the prerelease step to preview your changes using an alpha url provided when running the command.
|
|
14
16
|
|
|
15
17
|
- Login to NPM with the shared TREX 1pass creds.
|
|
16
|
-
- Execute the ./scripts/
|
|
18
|
+
- Execute the ./scripts/prerelease.sh file.
|
|
17
19
|
|
|
18
20
|
```
|
|
19
|
-
npm run ready:
|
|
21
|
+
npm run ready:prerelease
|
|
20
22
|
```
|
|
21
23
|
|
|
22
|
-
###
|
|
24
|
+
### Release
|
|
25
|
+
|
|
26
|
+
Use the release step to deploy the next version of the library.
|
|
23
27
|
|
|
24
28
|
- Login to NPM with the shared TREX 1pass creds.
|
|
25
|
-
- Execute the ./scripts/
|
|
29
|
+
- Execute the ./scripts/release.sh file.
|
|
26
30
|
|
|
27
31
|
```
|
|
28
|
-
npm run ready:
|
|
32
|
+
npm run ready:release
|
|
29
33
|
```
|
|
30
34
|
|
|
35
|
+
## Storybook deployment
|
|
36
|
+
|
|
37
|
+
Happens automatically when main branch gets new commits.
|
|
38
|
+
|
|
31
39
|
## UI Libraries
|
|
32
40
|
|
|
33
|
-
The component library is built on the following 'component
|
|
41
|
+
The component library is built on the following 'component primitive' UI libraries, low-level unstyled building blocks.
|
|
34
42
|
|
|
35
43
|
- [react-aria](https://react-spectrum.adobe.com/react-aria/why.html)
|
|
36
44
|
- [RadixUI](https://www.radix-ui.com/docs/primitives/overview/introduction)
|
|
37
45
|
|
|
38
|
-
They are similar in spirit but take a slightly different approach. Radix follows a component-based approach, while react-aria takes a hook-based approach.
|
|
39
|
-
The divide is roughly Radix for 'structural' elements, think [popovers](https://www.radix-ui.com/docs/primitives/components/popover), [accordion](https://www.radix-ui.com/docs/primitives/components/accordion) and react-aria for some input components and other components Radix lacks, like [breadcrumbs](https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html).
|
|
40
|
-
It may seem weird at first sight that two component libraries are used but they are low-level enough not to get in each others way.
|
|
46
|
+
They are similar in spirit but take a slightly different approach. Radix follows a component-based approach, while react-aria takes a hook-based approach. Either is acceptable if the solution meets the UI/UX requirements we need.
|
|
41
47
|
|
|
42
48
|
## Styling
|
|
43
49
|
|
|
44
50
|
Styling is done with [styled-components](https://styled-components.com/), a CSS-in-JS library.
|
|
45
51
|
|
|
52
|
+
### Styled System
|
|
53
|
+
|
|
54
|
+
We use something called [styled-system](https://styled-system.com/) to help manage our component composition, responsive styled props, and typescript prop interfaces/types.
|
|
55
|
+
|
|
46
56
|
### Start Simple
|
|
47
57
|
|
|
48
58
|
Or the “Principle of Least Power”.
|
|
@@ -51,12 +61,12 @@ For example, don’t start building a table component that covers many use-cases
|
|
|
51
61
|
|
|
52
62
|
### For content, prefer composition over props
|
|
53
63
|
|
|
54
|
-
- ❌ `<Text
|
|
55
|
-
- ✅ `<Text
|
|
64
|
+
- ❌ `<Text text="Some text" />`
|
|
65
|
+
- ✅ `<Text>Some text</Text>`
|
|
56
66
|
|
|
57
|
-
### Prefer 'compound components' over one large component with many props
|
|
67
|
+
### Prefer 'compound/composed components' over one large component with many props
|
|
58
68
|
|
|
59
|
-
Similar to last point. Compound components scale better.
|
|
69
|
+
Similar to last point. Compound/composed components scale better.
|
|
60
70
|
|
|
61
71
|
❌
|
|
62
72
|
|
|
@@ -81,29 +91,28 @@ Similar to last point. Compound components scale better.
|
|
|
81
91
|
✅
|
|
82
92
|
|
|
83
93
|
```jsx
|
|
84
|
-
<
|
|
85
|
-
<
|
|
94
|
+
<Alert.Dialog>
|
|
95
|
+
<Alert.Trigger asChild>
|
|
86
96
|
<Button size='small'>Open dialog</Button>
|
|
87
|
-
</
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
<
|
|
97
|
+
</Alert.Trigger>
|
|
98
|
+
<Alert.Content size={size}>
|
|
99
|
+
<Alert.Title>Header</Alert.Title>
|
|
100
|
+
<Alert.Description>Optional description</Alert.Description>
|
|
91
101
|
<Text>
|
|
92
102
|
Powering the next generation of transit We help build more sustainable
|
|
93
103
|
cities with convenient and reliable transit for all
|
|
94
104
|
</Text>
|
|
95
|
-
<
|
|
96
|
-
<
|
|
97
|
-
<Button size='large' variant='primary' emphasis='medium'>
|
|
98
|
-
Close
|
|
99
|
-
</Button>
|
|
100
|
-
</AlertDialogCancel>
|
|
101
|
-
<AlertDialogAction asChild>
|
|
105
|
+
<Alert.Footer>
|
|
106
|
+
<Alert.Action asChild>
|
|
102
107
|
<Button size='large' variant='danger'>
|
|
103
108
|
Delete
|
|
104
109
|
</Button>
|
|
105
|
-
</
|
|
106
|
-
</
|
|
107
|
-
</
|
|
108
|
-
</
|
|
110
|
+
</Alert.Action>
|
|
111
|
+
</Alert.Footer>
|
|
112
|
+
</Alert.Content>
|
|
113
|
+
</Alert.Dialog>
|
|
109
114
|
```
|
|
115
|
+
|
|
116
|
+
Resources:
|
|
117
|
+
- https://kentcdodds.com/blog/compound-components-with-react-hooks
|
|
118
|
+
- https://felixgerschau.com/react-component-composition/
|