td-stylekit π¨
A common set of components and styles to be used across frontend products as well as documentation based on these components.
Installation π»
yarn add td-stylekit react react-dom moment react-syntax-highlighter react-virtualized
Note: If using create-react-app
no need to install react
and react-dom
Find us on npm.
Usage βοΈ
import { Text, ThemeProvider } from 'td-stylekit'
return () => (
<ThemeProvider customTheme={ThemeProvider.v5Theme}>
<Text>text</Text>
</ThemeProvider>
)
Scripts π©βπ»
script | description |
---|
build | generate a production build of module |
test | run unit tests |
tdd | run tests in watch mode |
start | start dev documentation server |
docs:build | generate static build of docs |
download:snapshots | copy changed snapshots from CircleCI |
publish:yalc | publishes stylekit to yalc |
Etiquette
Writing stories
As of May 2022, stories must be specified in the following format:
import type { Meta, Story } from '@storybook/react'
export default {
title: 'v5/Control', // <-- Change as necessary
.... // and other properties
} as Meta
This ensures that all *.stories.tsx
are parsed correctly and available for visual regression tests.
Testing td-stylekit locally in other projects
To test td-stylekit locally in other projects perform the following steps:
In td-stylekit
In the root folder of the project issue the following:
yarn publish:yalc
If you make subsequent changes - repeat the command above.
In the dependent project (e.g. td-crystal)
In the root folder of the project issue the following:
yalc link td-stylekit --no-pure
yarn
To cleanup:
yalc remove td-stylekit
Problems when using yalc
If you consistently notice errors when issuing yarn
- you may need to clean everything and start again by issuing the following:
rm -rf node_modules
yarn
Release πΈ
Fully automated! We follow the conventional commit format and deploy on every meaningful commit to main.
Detailed documentation on the release process and how to format commit messages can be found here.
Visual Regression Testing π
Visual regression tests take snapshots of each Storybook story and compare them to existing snapshots to identify any visual differences introduced by code changes.
If a visual regression test fails, that means you've made visual changes to a component. If this is unintentional, it'll alert you to your mistake. If this is intentional, you'll need to update the snapshots to make the test pass.
Updating Visual Regression Tests π
Prerequisites
- Set up the
$CIRCLECI_TOKEN
environment variable in your local environment
- Instructions can be found here
Steps
Push your changes, allow CircleCI to finish executing the Visual Regression step, then run:
yarn download:snapshots
-
This will script will download any altered snapshots that have been saved in CircleCI's Artifacts to your local snapshot directory.
-
From there, you can simply commit the new snapshots.
Disabling Visual Regression Tests β
Screenshot are automatically generated for all stories. However, if you need to disable tests due to hard-to-screenshot stories, like animations, you have a couple options:
- To disable a single test add this comment on the line directly above it:
// @disable-regression-test
- To disable an entire file of stories, add this comment to the top of the file:
// @disable-regression-test-file
Browser support π₯οΈ
See: https://docs.treasuredata.com/display/public/PD/Browser+Support+for+TD+Console
Working with the CircleCI build image π
See: https://treasure-data.atlassian.net/wiki/spaces/EN/pages/1891401733/Work+with+the+CircleCI+build+image
Contributing π
Contributions are always welcome! Read our contribution guidelines.
Documentation π
Debugging in Visual Studio Code π
- Install Debugger for Chrome extension.
- Set break points wherever you need
- Press F5. This will launch a new Chrome browser and run td-stylekit in debugging mode
Resolving Security Issues π
Using Dependabot
Dependabot is a tool which checks your Github repository for security issues.
-
You can see a list of security issues under Dependabot Alerts on Github, under the Security tab (or click here).
-
If Dependabot is able to bump a package's version to fix the security issue, it will create a pull request.
Otherwise, you can try to fix the issue manually.
Manually
Some dependencies used by Stylekit have vulnerabilities. As often as possible, these security issues should be mitigated by updating their package versions.
- Use
yarn audit
to identify dependencies with vulnerabilities
- (optionally)
yarn audit --level [low|moderate|high|critical]
to filter by severity
- Use
yarn why
to find out which package requires that dependency - Use
yarn upgrade [package name]
to upgrade that package
- If a new version of that package is available, it may include a fix for the vulnerability
- If not, we either need to remove that package/dependency, or wait until a new version of the package is released.