tremorx

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #machine-learning #rust #deep-learning #docker #nodejs #java #kubernetes #security #openai #open-source

(★ 43)

An Elixir Phoenix component library inspired by Tremor - The react library to build dashboards fast.

tremorx 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Tremorx
<p align="start">
  <a href="https://hex.pm/packages/tremorx">
    <img alt="Hex Version" src="https://img.shields.io/hexpm/v/tremorx.svg">
  </a>

An Elixir Phoenix component library inspired by [Tremor](https://www.tremor.so/) - The react library to build dashboards fast.

> [!WARNING]
> The current version is an alpha version. Please report any bugs you find!

## Docs and Storybook

Preview the components and examples storybook available at [https://tremorx.fly.dev](https://tremorx.fly.dev/getting_started)

## Installation

If [available in Hex](https://hex.pm/docs/publish), the package can be installed
by adding `tremorx` to your list of dependencies in `mix.exs`:

```elixir
def deps do
  [
    {:tremorx, "~> 0.1.1"}
    
    # via git
    {:tremorx, git: "https://github.com/briankariuki/tremorx.git"}
  ]
end
```
Add tremorx to the dependecies section in `assets/package.json` like this:

If you don't have a `package.json` file, run `npm init -y`

```
{
  "dependencies": {
    #  Add this line
    "tremorx": "file:../deps/tremorx"
    
    # If in umbrella project
    "tremorx": "file:../../../deps/tremorx"
  } 
}
```

Then run `npm install` in the assets folder.

Then import the tremorx hooks in your `assets/js/app.js` file like this:
```
# Import the hooks
import { TremorHooks } from "tremorx";

# Add the hooks to the LiveSocket hooks option
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: {...MyHooks, ...TremorxHooks},
});
```

Update your `*_web.ex` file like this:

```
defp html_helpers do
  quote do
    
    # Add this line
    use Tremorx

# Routes generation with the ~p sigil
    unquote(verified_routes())
  end
end
```

Configure your `tailwind.config.js` file with the follwing:

Allow tailwind to find css classes defined in this library by adding the following lines to the `content` section in `tailwind.config.js`
```
content: [
  # Add these two lines.
  "../deps/tremorx/lib/components/**/*.ex",
  "../deps/tremorx/lib/js/*.js",

# If in umbrella.
  "../../deps/tremorx/lib/components/**/*.ex",
  "../../deps/tremorx/lib/js/*.js",
]
```

Configure the tremorx theme tokens by adding these theme extensions in `theme` section in `tailwind.config.js`. You can read more about theming [Here](https://www.tremor.so/docs/getting-started/theming)

```
theme: {
  # Extend your theme with tremor's default config
  extend: {
    colors: {
      tremor: {
        brand: {
          faint: "#eff6ff",
          muted: "#bfdbfe",
          subtle: "#60a5fa",
          DEFAULT: "#3b82f6",
          emphasis: "#1d4ed8",
          inverted: "#ffffff",
        },
        background: {
          muted: "#f9fafb",
          subtle: "#f3f4f6",
          DEFAULT: "#ffffff",
          emphasis: "#374151",
        },
        border: {
          DEFAULT: "#e5e7eb",
        },
        ring: {
          DEFAULT: "#e5e7eb",
        },
        content: {
          subtle: "#9ca3af",
          DEFAULT: "#6b7280",
          emphasis: "#374151",
          strong: "#111827",
          inverted: "#ffffff",
        },
      },

"dark-tremor": {
        brand: {
          faint: "#0B1229",
          muted: "#172554",
          subtle: "#1e40af",
          DEFAULT: "#3b82f6",
          emphasis: "#60a5fa",
          inverted: "#030712",
        },
        background: {
          muted: "#131A2B",
          subtle: "#1f2937",
          DEFAULT: "#111827",
          emphasis: "#d1d5db",
        },
        border: {
          DEFAULT: "#374151",
        },
        ring: {
          DEFAULT: "#1f2937",
        },
        content: {
          subtle: "#4b5563",
          DEFAULT: "#6b7280",
          emphasis: "#e5e7eb",
          strong: "#f9fafb",
          inverted: "#000000",
        },
      },
    },
    boxShadow: {
      # light
      "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
      "tremor-card":
        "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
      "tremor-dropdown":
        "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      # dark
      "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
      "dark-tremor-card":
        "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
      "dark-tremor-dropdown":
        "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
    },
    borderRadius: {
      "tremor-small": "0.375rem",
      "tremor-default": "0.5rem",
      "tremor-full": "9999px",
    },
    fontSize: {
      "tremor-label": ["0.75rem"],
      "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
      "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
      "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
    },
  },
}

```

Also safelist some css classes to prevent tailwind from purging them. To do this add the following to the `safelist` section in `tailwind.config.js`

```
safelist: [
  {
    pattern:
      /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    variants: ["hover", "ui-selected"],
  },
  {
    pattern:
      /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    variants: ["hover", "ui-selected"],
  },
  {
    pattern:
      /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    variants: ["hover", "ui-selected"],
  },
  {
    pattern:
      /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
  },
  {
    pattern:
      /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
  },
  {
    pattern:
      /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
  },
  { pattern: /^\-?m(\w?)-/ },
  { pattern: /^p(\w?)-/ },
  { pattern: /^text-/ },
  { pattern: /^bg-/ },
  { pattern: /^w-/ },
  { pattern: /^h-/ },
  { pattern: /^h(\w?)-/ },
  { pattern: /^grid-/ },
  { pattern: /^col-/ },
  { pattern: /^border-/ },
  { pattern: /^gap-/ },
  { pattern: /^min-/ },
],

```

## Usage
In your template import the component you need. For example,

```
alias Tremorx.Components.Input
alias Tremorx.Components.Layout
alias Tremorx.Components.Text
```

Then use like the following

```
<Layout.col class="space-y-1.5">
  <label for="name">
    <Text.text class="text-tremor-content">
      Name
    </Text.text>
  </label>

<Input.text_input
    id="name"
    name="user[name]"
    placeholder="juma tano"
    type="text"
    field={f[:name]}
    value={f[:name].value}
    error={false}
    error_message={nil}
  />
</Layout.col>

```

## Components

#### UI Components
  - [ ] Accordion
  - [x] Badges
  - [x] Button
  - [x] Callout
  - [x] Card
  - [ ] Date range picker
  - [ ] Dialog
  - [x] Divider
  - [x] Icons
  - [x] Legend
  - [x] List
  - [ ] Number Input
  - [x] Select
  - [ ] Switch
  - [x] Table
  - [x] Tabs
  - [x] Text Input
  - [x] Textarea

#### Visualization Components
  - [x] Area Chart
  - [x] Bar Chart
  - [x] Donut Chart
  - [x] Line Chart
  - [ ] Scatter Chart
  - [ ] Funnel Chart
  - [ ] Bar List
  - [x] Progress Bar
  - [ ] Marker Bar
  - [ ] Delta Bar
  - [ ] Category Bar
  - [ ] Progress Circle
  - [ ] Spark Charts
  - [ ] Tracker

#### Extra Components
  - [x] Dropdown
  - [x] Tooltip
  - [ ] GeoJSON Map

Documentation can be generated with [ExDoc](https://github.com/elixir-lang/ex_doc)
and published on [HexDocs](https://hexdocs.pm). Once published, the docs can
be found at <https://hexdocs.pm/tremorx>.

tremorx

tremorx 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

tremorx

tremorx 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README