# DaisyUI Components


<img src="daisyui-logomark-1024-1024.png" alt="Daisy UI Logo" width="150">

[![CI](https://github.com/phcurado/daisy_ui_components/workflows/ci/badge.svg?branch=main)](https://github.com/phcurado/daisy_ui_components/actions?query=branch%3Amain+workflow%3Aci)
[![Coverage Status](https://coveralls.io/repos/github/phcurado/daisy_ui_components/badge.svg?branch=main)](https://coveralls.io/github/phcurado/daisy_ui_components?branch=main)
[![Hex.pm](https://img.shields.io/hexpm/v/daisy_ui_components)](https://hex.pm/packages/daisy_ui_components)
[![HexDocs.pm](https://img.shields.io/badge/Docs-HexDocs-blue)](https://hexdocs.pm/daisy_ui_components)
[![License](https://img.shields.io/hexpm/l/daisy_ui_components.svg)](https://hex.pm/packages/daisy_ui_components)

This project brings [Daisy UI](https://daisyui.com/) components into your Phoenix LiveView project.

This project is still experimental, expect breaking changes in future.

## Installation
<!-- MDOC -->

Reference this repository on your `mix.exs` file to start using.

```elixir
def deps do
  [
    {:daisy_ui_components, "~> 0.1"}
  ]
end
```

Add through `npm` the daisy UI package inside your phoenix application:

```
cd assets
npm i -D daisyui@latest
```

On `tailwind.config.js` include Live DaisyUI Components under the content list and reference under plugins

```javascript
module.exports = {
  content: [
    //...
    "../deps/daisy_ui_components/**/*.*ex" // <- reference DaisyUIComponents as content path
  ],
  //...
  plugins: [
    //...
    require("daisyui")  <- // add daisyUI plugin
    //...
  ]
}
```

Add error translation function to your app's config.exs file. This function is used to translate ecto changeset errors

```elixir
config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1
```

And now this library is ready. To have the components available under liveview, import the components on the web folder

```elixir
defp html_helpers do
  quote do
    use DaisyUIComponents
    # HTML escaping functionality
    import Phoenix.HTML
    # Core UI components from Live DaisyUI
    import DaisyUIComponents.CoreComponents

    # import YourProjectWeb.CoreComponents
    # Importing CoreComponents from your project is no longer necessary since
    # DaisyUIComponents.CoreComponents offers a drop in replacement
    # If you still want to use your own core components, remember to delete the default components generated from phoenix in this file
    # ...
  end
end
```

Check the [Core Components](./lib/daisy_ui_components/core_components.ex) implementation for replacing the default phoenix core components. The components have the same logic from Phoenix default generator, but now using DaisyUI styles.

## Components

List of available components.

- [Alert](https://daisyui.com/components/alert) ✅
- [Artboard](https://daisyui.com/components/artboard) ❌
- [Avatar](https://daisyui.com/components/avatar) ✅
- [Badge](https://daisyui.com/components/badge) ✅
- [Bottom navigation](https://daisyui.com/components/botton-navigation) ❌
- [Breadcrumbs](https://daisyui.com/components/breadcrumbs) ❌
- [Button group](https://daisyui.com/components/button-group) ✅ ❌
- [Button](https://daisyui.com/components/button) ✅ ❌
- [Card](https://daisyui.com/components/card) ✅
- [Carousel](https://daisyui.com/components/carousel) ❌
- [Chat bubble](https://daisyui.com/components/chat) ❌
- [Checkbox](https://daisyui.com/components/checkbox) ✅
- [Collapse](https://daisyui.com/components/collapse) ❌
- [Countdown](https://daisyui.com/components/countdown) ❌
- [Divider](https://daisyui.com/components/divider) ❌
- [Drawer](https://daisyui.com/components/drawer) ❌
- [Dropdown](https://daisyui.com/components/dropdown) ❌
- [File input](https://daisyui.com/components/file-input) ❌
- [Footer](https://daisyui.com/components/footer) ❌
- [Join](https://daisyui.com/components/join) ✅
- [Hero](https://daisyui.com/components/hero) ❌
- [Indicator](https://daisyui.com/components/indicator) ❌
- [Input group](https://daisyui.com/components/input-group) ❌
- [Text Input](https://daisyui.com/components/input) ✅
- [Kbd](https://daisyui.com/components/kbd) ❌
- [Link](https://daisyui.com/components/link) ❌
- [Mask](https://daisyui.com/components/mask) ❌
- [Menu](https://daisyui.com/components/menu) ❌
- [Code mockup](https://daisyui.com/components/mockup-code) ❌
- [Phone mockup](https://daisyui.com/components/mockup-phone) ❌
- [Window mockup](https://daisyui.com/components/mockup-window) ❌
- [Modal](https://daisyui.com/components/modal) ✅
- [Navbar](https://daisyui.com/components/navbar) ✅
- [Pagination](https://daisyui.com/components/pagination) ✅
- [Progress](https://daisyui.com/components/progress) ❌
- [Radial progress](https://daisyui.com/components/radial-progress) ❌
- [Radio](https://daisyui.com/components/radio) ❌
- [Range slider](https://daisyui.com/components/range) ❌
- [Rating](https://daisyui.com/components/rating) ❌
- [Select](https://daisyui.com/components/select) ✅
- [Stack](https://daisyui.com/components/stack) ❌
- [Stat](https://daisyui.com/components/stat) ✅
- [Steps](https://daisyui.com/components/steps) ❌
- [Swap](https://daisyui.com/components/swap) ❌
- [Tabs](https://daisyui.com/components/tab) ❌
- [Table](https://daisyui.com/components/table) ✅
- [Textarea](https://daisyui.com/components/textarea) ✅
- [Toast](https://daisyui.com/components/toast) ❌
- [Toggle](https://daisyui.com/components/toggle) ❌
- [Tooltip](https://daisyui.com/components/tooltip) ✅

✅: Implemented

❌: To be implemented