A bare-bones component library built using:
# Install the package and it's peerDependencies
yarn add @ds-pack/components @ds-pack/use-refs @vanilla-extract/css @vanilla-extract/dynamic rainbow-sprinkles nanopopUsage with Next.js:
// within `layout.tsx` or `_app.tsx`:
import '@ds-pack/components/dist/index.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/index.css'
import { Button } from '@ds-pack/components'- Typescript
- Jest
- 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
- Box
- Banner
- Stack
- Text
- Label
- List
- InlineCode
- VisuallyHidden
- Link
- Tapable
- Button
- ToggleInput
- Checkbox
- Heading
- Blockquote
- TwitterMention
- GitHubMention
- Image
- Figure
- Input
- Textarea
- Chip
is- essentiallyforwardedAsfrom styled-components, but easier to type 😄testIds- An optional prop that allows for passing indata-testidto the rendered components