7.1 KiB

Raw Permalink Blame History

Contributing to daisyUI

daisyUI welcomes contributions from anyone willing to help 🤝

Reporting issues

Before opening a new issue, first search for existing issues to avoid duplications.
Provide detailed reports to make things easier for maintainers.
If there's a weird bug, please provide a reproduction repository on Github (or a CodePen page or Tailwind Play page)

Fixing existing issues

You can help by fixing existing issues
Don't work on issues assigned to others (to avoid duplicate efforts)
Before starting to work on an issue, please first add a comment and ask to get assigned to that issue. This way everyone will know you're working on that and it avoids duplicate efforts.
Commit messages must start with: fix: #1 [description] which 1 is the number of issue, so the issue will close automatically and it gets added to changelog file on a release.

Feature requests

If you have an idea to discuss with the community, please open a discussion
For feature requests, open a new issue
All feature requests may not fit this library and some may get rejected. Don't take it personally.

Pull requests

A pull request must fix an open issue assigned to you. If there's no issue, please create one first. If it's not assigned to you, please ask for it in the comments. This is for avoiding duplicate efforts.
Fixing typos doesn't need to be an issue. You can just open a pull request.
Fixing a mistake in document website doesn't need to be an issue. You can just open a pull request.

Contribute translations

You can help add or fix translations by using the Fink localization editor
Submit the translation by opening a pull request (see guide)

Building on local

To build the daisyUI node package on local:

[Fork and] clone the repo on local
Install package dependencies:
```
npm install
```
Build the package:
```
npm run build
```

Now you can import daisyUI to your tailwind.config.js:

module.exports = {
  plugins: [require("/path/to/src/directory")],
}

[!NOTE] If you are on Windows, you have to use a Unix shell like Git Bash. Unfortunately, the Windows command prompt and PowerShell do not support the cat command, which is used in the build script.

To run the documentation site on local:

[Fork and] clone the repo on local
Install all dependencies and build the package and documentation site using this command:
```
npm run init
```
Run the document site:
```
npm run dev
```

Adding a new component

Before adding a new component, please make sure it's start a discussion about it on Github so we can talk about how the structure and style should be.
There is a List of components at the end of /README.md that I think would be a good to complete.

File structure

All component styles are in /src but it's important to separate the style to 4 files:

/src/components/unstyled: Styles that define the layout and placement of a component
(for example: layout of tab and tabs)
/src/components/styled: Styles that define the visual appearance of a component
(for example: colors and spacing of alert)
/src/utilities/unstyled: Styles that define the layout and placement of a variant of a component that must be responsive
(for example: sizes of a .btn)
/src/utilities/styled: Styles that define the visual appearance of a variant of a component that must be responsive
(for example: colors of alert)

Separating styles to these 4 files, allows us to use daisyUI components with/without design decision styles (See styled config) and allows us to define some styles as responsive utilities (to work with lg:, md:, sm:, etc... prefixes)

Code samples with dynamic prefix

If your component documentation page contains pre blocks for code samples, be sure to follow the example below so that the code will be displayed with the correct prefix dynamically set by user:

<Component title="Buttons with brand colors">
  <button class="btn">Button</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
  <button class="btn btn-ghost">Ghost</button>
  <button class="btn btn-link">Link</button>

  <!-- add $$ to each daisyUI class name in pre block-->
  <pre slot="html" use:replace={{ to: $prefix }}>{`<button class="$$btn">Button</button>
<button class="$$btn $$btn-primary">Button</button>
<button class="$$btn $$btn-secondary">Button</button>
<button class="$$btn $$btn-accent">Button</button>
<button class="$$btn $$btn-ghost">Button</button>
<button class="$$btn $$btn-link">Button</button>`}</pre>
</Component>

An example

Let's say we want to add a new component named .coolbutton (don't add that actually 😅 )

Add these files:

/src/components/unstyled/coolbutton.css
/src/components/styled/coolbutton.css

Add your CSS there (you can use @apply)
- /unstyled/coolbutton.css is for the structure of the component without any design decision
- /styled/coolbutton.css is for the visual appearance of the component with colors, spacing, etc.

Add a page to documentation site:

/src/docs/src/routes/components/coolbutton/+page.svelte.md

Add page info and some HTML to your Svelte markdown (mdsvex) file that uses your class name

---
title: Coolbutton
desc: It's a button but it's cool!
published: true
layout: components
---

<button class="coolbutton">Cool!</button>

Build the documentation site:
```
npm run dev
```
Now when you open the site on localhost, you can see your new page, showing the new component with your style:
```
http://localhost:3000/components/coolbutton
```

7.1 KiB Raw Permalink Blame History