@up42/up-components 0.3.11 → 0.3.12
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 +5 -89
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Up Components
|
|
2
2
|
|
|
3
3
|
UP42's Shared Component Library. This is a cross-team collaborative package that enables us to reuse React components across different projects. The package uses [Storybook](https://storybook.js.org/docs/react/get-started/introduction) to organize and document UI components, and is based on [MUI](https://mui.com/getting-started/usage/) for theming and most of the APIs.
|
|
4
4
|
|
|
5
5
|
Up Components library provides react components based on [UP42's design system](https://www.figma.com/file/Qd9QmAdQfcsWe3xSKtJWX9FZ/Design-System)
|
|
6
6
|
|
|
7
7
|
## Getting Started
|
|
8
|
+
|
|
8
9
|
```bash
|
|
9
10
|
$ npm install @up42/up-components
|
|
10
11
|
```
|
|
@@ -45,100 +46,15 @@ You can also import components from the `@mui/material` directly from the packag
|
|
|
45
46
|
|
|
46
47
|
**Note:** UP Components currently exports all [MUI components](https://mui.com/components/) on top of our custom ones. Which means that the existing MUI documentation can be used for any component not yet documented on our own [Storybook](https://up-components.up42.dev/). In case of conflicts, our custom documentation prevails over MUI.
|
|
47
48
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
This package uses [Rollup](https://github.com/rollup/rollup) for building `esm` and `cjs` modules.
|
|
51
|
-
[npm](https://www.npmjs.com/) version 7 or higher is required install and build the components locally.
|
|
52
|
-
|
|
53
|
-
## Developing locally
|
|
54
|
-
|
|
55
|
-
Clone the repository and run.
|
|
56
|
-
|
|
57
|
-
```bash
|
|
58
|
-
$ npm run storybook
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### Adding new components
|
|
62
|
-
|
|
63
|
-
Components must be added to the `src/components` folder using the following structure:
|
|
64
|
-
|
|
65
|
-
```
|
|
66
|
-
src
|
|
67
|
-
│ index.ts // export { MyComponent } from 'components'
|
|
68
|
-
└─components
|
|
69
|
-
│ index.ts // export { MyComponent } from './MyComponent/MyComponent
|
|
70
|
-
└─MyComponent
|
|
71
|
-
│ MyComponent.tsx // export const MyComponent
|
|
72
|
-
│ MyComponent.test.tsx
|
|
73
|
-
│ MyComponent.overrides.ts
|
|
74
|
-
│ MyComponent.stories.tsx
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
- `MyComponent.tsx`: main component structure/logic.
|
|
78
|
-
- `MyComponent.test.tsx`: unit tests for the component.
|
|
79
|
-
- `MyComponent.overrides.ts`: any theme overrides for that component (optional).
|
|
80
|
-
- `MyComponent.stories.tsx`: Storybook documentation.
|
|
81
|
-
|
|
82
|
-
Components and filenames must use the `UpperCamelCase` pattern. For components that already exist on MUI, using the exact same name is preferred so that they override the MUI export.
|
|
83
|
-
|
|
84
|
-
### Testing @up42/up-components locally
|
|
85
|
-
|
|
86
|
-
In order to test the components without publishing a new version, you can use [Yalc](https://github.com/wclr/yalc) to publish the package locally and install it on your app.
|
|
87
|
-
|
|
88
|
-
Install Yalc in your machine by running:
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
$ yarn global add yalc
|
|
92
|
-
```
|
|
49
|
+
### Design System Tokens
|
|
93
50
|
|
|
94
|
-
Inside `up-components` folder, run
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
$ yalc publish
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
In your application, run
|
|
101
|
-
|
|
102
|
-
```
|
|
103
|
-
$ yalc add @up42/up-components
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
This should install the local version of `@up42/up-components` in your application so you can test new components before publishing a new version.
|
|
107
|
-
|
|
108
|
-
### Design System Tokens
|
|
109
51
|
[UP42 tokens](https://github.com/up42/design-system-tokens) are also exposed as part of UpComponents.
|
|
110
52
|
|
|
111
|
-
|
|
112
53
|
```diff
|
|
113
54
|
- import tokens from '@up42/constellation-tokens/dist/json/tokens.json'
|
|
114
55
|
+ import { tokens } from "@up42/up-components"
|
|
115
56
|
```
|
|
116
57
|
|
|
117
|
-
##
|
|
118
|
-
We are using [Semantic Versioning](https://semver.org/) for controlling each release.
|
|
119
|
-
|
|
120
|
-
- `MAJOR` version when you make incompatible API changes,
|
|
121
|
-
- `MINOR` version when you add functionality in a backwards compatible manner, and
|
|
122
|
-
- `PATCH` version when you make backwards compatible bug fixes.
|
|
123
|
-
|
|
124
|
-
### How should I write my commits?
|
|
125
|
-
We follow the [Conventional Commit](https://www.conventionalcommits.org) specification. The most important prefixes you should have in mind are:
|
|
126
|
-
|
|
127
|
-
- `fix`: which represents bug fixes, and correlates to a SemVer `PATCH`.
|
|
128
|
-
- `feat`: which represents a new feature, and correlates to a SemVer `MINOR`.
|
|
129
|
-
- `feat|fix!`: which represent a breaking change (indicated by the `!`) and will result in a SemVer `MAJOR`.
|
|
130
|
-
|
|
131
|
-
Other prefixes like `chore:`, `refactor:`, `test:`, etc. can be used, but won't be included in the `CHANGELOG.md` file.
|
|
132
|
-
|
|
133
|
-
### Usage
|
|
134
|
-
|
|
135
|
-
```bash
|
|
136
|
-
$ npm run release
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
This command is going to:
|
|
140
|
-
- bump the version in `package.json` and `package-lock.json`.
|
|
141
|
-
- output changes to `CHANGELOG.md`.
|
|
142
|
-
- commit `package-lock.json` and `package.json` and `CHANGELOG.md`.
|
|
58
|
+
## Developing in the up-components package
|
|
143
59
|
|
|
144
|
-
|
|
60
|
+
Please refer to our [Contributing Guidelines](https://github.com/up42/up-components/blob/master/CONTRIBUTING.md) for development information.
|