antd-rails-ui

v1.0.0-alpha

Published

7 months ago

Ant Design Components for use with StimulusJS and Rails applications

Downloads

0High
0Medium
0Low

vinayuttam

antd ant-design rails stimulus stimulusjs turbo-mount react ui-components

Ant Design for Rails

A React-based UI component library that integrates Ant Design components with Rails applications using StimulusJS and turbo-mount.

Installation

1. Install the library

npm install antd-rails-ui

2. Add CDN dependencies

Add these CDN links to your Rails layout before your application JavaScript:

<!-- app/views/layouts/application.html.erb -->
<head>
  <!-- React CDN -->
  <script crossorigin src="https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js"></script>
  <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.production.min.js"></script>

  <!-- Ant Design CDN -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reset.css">

  <!-- TurboMount CDN -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/turbo-mount.min.js"></script>

  <!-- Your app assets -->
  <%= vite_client_tag %>
  <%= vite_javascript_tag 'application' %>
</head>
```#### Alternative CDN Options

**For development (unminified versions):**
```html
<!-- React Development -->
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@19/umd/react.development.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.development.js"></script>

<!-- Ant Design Development -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.js"></script>

<!-- TurboMount Development -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/turbo-mount.js"></script>

Import Maps (for modern bundlers):

<script type="importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@19/+esm",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@19/+esm",
    "antd": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
    "turbo-mount": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
  }
}
</script>

3. Initialize in your application

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
import { registerComponents } from 'antd-rails-ui'

const application = Application.start()

// Register all components
registerComponents(application)

Usage

Basic Select Component

<div data-controller="select"
     data-select-props-value='{
       "options": [
         {"value": "1", "label": "Option 1"},
         {"value": "2", "label": "Option 2"}
       ],
       "name": "my_select"
     }'>
  <input type="hidden" data-select-target="input" name="my_select">
  <div data-select-target="mount"></div>
  <div data-select-target="hiddenInputs"></div>
</div>

Multiple Selection

<div data-controller="select"
     data-select-props-value='{
       "options": [
         {"value": "1", "label": "Option 1"},
         {"value": "2", "label": "Option 2"}
       ],
       "name": "my_select",
       "mode": "multiple"
     }'>
  <input type="hidden" data-select-target="input" name="my_select">
  <div data-select-target="mount"></div>
  <div data-select-target="hiddenInputs"></div>
</div>

Theming

import { initializeTheme } from 'antd-rails-ui'

// Initialize with custom theme
initializeTheme({
  theme: {
    token: {
      colorPrimary: '#1890ff',
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#f5222d'
    }
  }
})

Extending Components

See EXTENDING.md for detailed information on how to extend and customize components.

API Reference

Components

SelectComponent - Ant Design Select component wrapper
SelectController - Stimulus controller for Select component

Functions

registerComponents(application, options) - Register all components
initializeTheme(options) - Initialize theme configuration
initializeUI(application, options) - One-stop initialization

Utilities

withTheme(Component) - HOC for theme integration
registerComponent - Re-exported from turbo-mount/react

Requirements

React 18+ or 19+
StimulusJS 3+
Rails 7+ (recommended)

License

MIT