@ds-pack/components NPM

`@ds-pack/components`

A bare-bones component library built using:

Setup:

Install:

# Install the package and it's peerDependencies
yarn add @ds-pack/components @ds-pack/use-refs @vanilla-extract/css @vanilla-extract/dynamic rainbow-sprinkles nanopop

Usage with Next.js:

// within `layout.tsx` or `_app.tsx`:
import '@ds-pack/components/dist/vars.css'
import '@ds-pack/components/dist/reset.css'

// ...
// within `layout.tsx` or `_document.tsx`:
import { themeClass } from '@ds-pack/components'

function Layout({ children }) {
  return <html className={themeClass}>// ...</html>
}

Usage with other frameworks (create-react-app, vanilla webpack applications, etc):

// Import the styles:
import '@ds-pack/components/dist/vars.css'
import '@ds-pack/components/dist/reset.css'
import { Button } from '@ds-pack/components'

Tools:

Typescript
Jest

Cutting a Release:

Update the version in package.json
Push to main (with associated changes)
Create release on the repo
- Workflow will kick off and build + publish the new version

Docs:

Theme

Components

Hooks

useTapable

System Props:

is - essentially forwardedAs from styled-components, but easier to type 😄
testIds - An optional prop that allows for passing in data-testid to the rendered components

@infinitebrahmanuniverse/nolb-_ds-@everything-registry/sub-chunk-258

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago