Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

td-stylekit

Package Overview
Dependencies
Maintainers
1
Versions
731
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

td-stylekit

A common set of components and styles to be used across frontend products as well as documentation based on these components.

  • 28.8.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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 👩‍💻

scriptdescription
buildgenerate a production build of module
testrun unit tests
tddrun tests in watch mode
startstart dev documentation server
docs:buildgenerate static build of docs
download:snapshotscopy changed snapshots from CircleCI
publish:yalcpublishes 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 # Use the --help flag for more options
  • 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.

FAQs

Package last updated on 07 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc