https://github.com/uswitch/trustyle
React components with style
https://github.com/uswitch/trustyle
Last synced: 11 months ago
JSON representation
React components with style
- Host: GitHub
- URL: https://github.com/uswitch/trustyle
- Owner: uswitch
- License: apache-2.0
- Created: 2019-07-29T12:20:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T13:43:49.000Z (over 2 years ago)
- Last Synced: 2024-12-09T03:37:54.871Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 43.7 MB
- Stars: 1
- Watchers: 29
- Forks: 1
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Development
All commands can be run from individual packages, but it is not necessary to do so.
- Run `npm install` at the project root to install the dev dependencies.
- Run `npx lerna bootstrap` to link package dependencies to each other.
On some systems, `npx lerna bootstrap` may fail with an error `Unexpected end of JSON input while parsing near '...-imports":"^7.7.0","@'` - in this case, try running `npm cache clean --force`
To run storybook locally `npm start`.
The packages are all built using the same build step. Run `npm run build` to build all the packages using `tsc`. All files matching `src/**/*.{ts,tsx}` are included and output is written to the `lib` directory within each package.
To add a new element, copy the template to the src/elements directory, update the package.json with the name and add your source code.
## Publishing
**Do not do this until you are ready to merge and your PR has been approved!** Justification below.
To preview which packages have changed, you can run `npx lerna changed` without publishing.
Once happy with the code changes, run `npx lerna version` and bump the versions accordingly.
Lerna will generate a publish commit. Push that commit to your remote branch and once it gets merged to master, CI will publish the new versions to `npm`.
Why you shouldn't publish until ready to merge:
- You will block anyone else who wants to change that package or any dependents or dependencies until your PR is merged.
- If changes are requested, you will have to update the version again after making the changes.
- If you have to merge in master, you will have to update the version again.
## Accessibility checks
We run automated accessibility tests as part of our pre-merge CI checks. You can run these tests locally as follows:
1. Run storybook: `npm run storybook`
2. Run the tests: `npm run a11y`
## Palette & Margin Collapse
In order to prevent margin collapse on palette components, you should
add the following snippet as high up in your document as possible
```html
.palette{padding-top:0.05px;padding-bottom:0.05px;}
```
This will be the least specific settings for `padding` properties, and
will therefore prevent margin collapse for elements that don't have
padding, but will also respect the padding of an element if it is
already set