@ds-pack/components-experimental

A bare-bones component library built using:

• React
• Vanilla Extract

Setup:

This library publishes the direct source and doesn't manage building locally - instead the consuming application should manage building the library!

Install:

# @TODO - replace when renaming the package
# Install the package and it's peerDependencies
yarn add @ds-pack/components-experimental @ds-pack/use-refs @vanilla-extract/css @vanilla-extract/dynamic rainbow-sprinkles nanopop
# Install it's dependencies
yarn add -D polished

Usage with Next.js:

// next-transpile-modules
import createTM from 'next-transpile-modules'
// withVanillaExtract
import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'

// @TODO - replace when renaming the package
let withTM = createTM(['@ds-pack/components-experimental'])

let withVanillaExtract = createVanillaExtractPlugin()

export default withVanillaExtract({
  /* ... */
})

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

// Import the styles:
// @TODO - replace when renaming the package
import '@ds-pack/components-experimental/compiled.css'
import { Button } from '@ds-pack/components-experimental/compiled'

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

• Box
• Banner
• Stack
• Text
• Label
• List
• InlineCode
• VisuallyHidden
• Link
• Tapable
• Button
• ToggleInput
• Checkbox
• Heading
• Blockquote
• TwitterMention
• GitHubMention
• Image
• Figure
• Input
• Textarea
• Chip

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