@ds-pack/daisyui
A bare-bones component library built using:
Setup:
Warning You will need to use
tailwindcssin your consuming project in order to use this library!
Install:
# Install the package and it's peerDependencies
yarn add @ds-pack/daisyui @ds-pack/use-refs nanopop daisyuiYou'll also most likely need to install tailwindcss and it's dependencies:
yarn add -D tailwindcss postcss autoprefixerUsage with Next.js:
Configure tailwind:
Add the following tailwind.config.js file:
// tailwind.config.js
let path = require('path')
module.exports = {
content: [
'./app/**/*.{tsx}',
// Ensure Tailwind processes the `@ds-pack/daisyui` library!
path.join(path.dirname(require.resolve('@ds-pack/daisyui')), '/**/*.js'),
],
// Configure daisyui:
plugins: [require('daisyui')],
}run yarn dlx tailwindcss init -p
Configure the Next app:
Within next.config.js, you'll need to configure the following:
let config = {
modularizeImports: {
// Manages code splitting the components you import
'@ds-pack/daisyui': {
transform: '@ds-pack/daisyui/dist/{{member}}',
},
},
// ...
}Create a root globals.css file with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;Import the above globals.css file within your root layout:
// within `layout.tsx` or `_app.tsx`:
import '@root/styles/globals.css'Configure the daisyui theme for the layout by passing in data-theme on the
root html element:
// within `layout.tsx` or `_document.tsx`:
// import { themeClass } from '@ds-pack/components'
function Layout({ children }) {
return <html data-theme="garden">...</html>
}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:
Components
- Box
- Banner
- Stack
- Text
- List
- ListItem
- InlineCode
- VisuallyHidden
- Link
- Tapable
- Button
- ToggleInput
- Checkbox
- Heading
- Blockquote
- TwitterMention
- GitHubMention
- Image
- Figure
- Input
- Textarea
- Chip
Hooks
System Props:
-
is- essentiallyforwardedAsfrom styled-components, but easier to type😄 -
testId- An optional prop that allows for passing indata-testidto the rendered components
TODO:
- [ ] Button's don't have animation when using the keyboard to activate them (consider either burning down custom element usage, or expose a way to know if the button is active or not within Tapable/useTapable)
- [ ] Dropdown
- [ ] InlineCode theme enhancements (e.g. dark mode and light mode versions)
- [ ] Input validation states
- [ ] Nested lists and spacing stuff, etc
- [ ] Box
- [x] Stack