okonomi_ui_kit 0.1.7 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c94c4c54d4385932abd25596610ea5e50f6d49477577a95731a0e0a1e22fca31
-  data.tar.gz: bb5f224ebe4b40a221cc382dea0256d75589557c553a3abf51f647cf3018044f
+  metadata.gz: dc90801689c7c39688c8a5a065b77ea61eb8fd0afa45cdee03b6b66ebee974d5
+  data.tar.gz: 8a2de086a893267f851b3084d3cbd7c8d8056da5f7f577141641383ae6ac74fa
 SHA512:
-  metadata.gz: 1668ef825c3f06032802b9614baba74626f6e74cabd741880143627d1f6c2ee32d1d2b0a21676a550d2773c3abaa1d4ec3162da05b7e4bcb574d5e8429bab8fc
-  data.tar.gz: 1f457860e311e5efa5fa07d8199c0ef0758dac7122b9a07b3780c820f472546aee2083bbaf2b0374343fc41882e7830780e788070111c04404f9f2788b7b25d3
+  metadata.gz: 26b66dae684154ebed6861acdb06759b19fdc2e9a161a4ef900006c25b20ac787b88a307baa1e6a7cf31d465d7611f59c0c7229c0abaf3a48d4189d43677eaea
+  data.tar.gz: edcdadb51037bc73eb330bcd09f80ce7dfe7a0c2d81d7b1b653cd64088fefa1f5976adf7ba39ff4421a08bce41dc3243d08edb1845f5496249f313f2f6628625

data/README.md

@@ -1,10 +1,20 @@
 # OkonomiUiKit
-Short description and motivation.
 
-## Usage
-How to use my plugin.
+A Rails Engine gem that provides customizable, Tailwind CSS-based UI components for Rails applications. Built with maximum flexibility in mind, OkonomiUiKit allows you to maintain consistent design patterns across projects while giving you complete control over styling and behavior.
+
+## Features
+
+- **🎨 Fully Customizable** - Override any component's styling through a powerful configuration system
+- **🚀 Rails Native** - Built as a Rails Engine following Rails conventions
+- **💨 Tailwind CSS** - Modern utility-first CSS with intelligent class merging
+- **⚡ Stimulus Powered** - Progressive enhancement with Stimulus controllers
+- **🔧 Form Builder** - Enhanced form helpers with consistent styling
+- **📦 Component Library** - Pre-built components including buttons, badges, tables, alerts, and more
+- **🎯 Style System** - Component-based styling with config class overrides
+- **🔄 Smart Style Merging** - Intelligent Tailwind class conflict resolution
 
 ## Installation
+
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -16,13 +26,161 @@ And then execute:
 $ bundle
 ```
 
-Or install it yourself as:
-```bash
-$ gem install okonomi_ui_kit
+In your application layout, include the CSS and JavaScript:
+
+```erb
+<%= stylesheet_link_tag "okonomi_ui_kit/application.tailwind", "data-turbo-track": "reload" %>
+<%= javascript_importmap_tags "okonomi_ui_kit" %>
+```
+
+## Quick Start
+
+### Using Components
+
+OkonomiUiKit provides a `ui` helper that gives you access to all components:
+
+```erb
+<%= ui.button "Click me", variant: :contained, color: :primary %>
+<%= ui.badge "New", color: :success %>
+<%= ui.alert "Welcome to OkonomiUiKit!", variant: :info %>
+```
+
+### Using the Form Builder
+
+```erb
+<%= form_with model: @user, builder: OkonomiUiKit::FormBuilder do |f| %>
+  <%= f.field_set do %>
+    <%= f.field :email do %>
+      <%= f.email_field :email %>
+    <% end %>
+    
+    <%= f.field :password do %>
+      <%= f.password_field :password %>
+    <% end %>
+  <% end %>
+  
+  <%= f.submit "Sign Up", color: :primary %>
+<% end %>
+```
+
+## Available Components
+
+### Core Components
+- **Button** - Buttons with multiple variants (contained, outlined, text)
+- **Badge** - Status indicators and labels
+- **Alert** - Notification messages with icons
+- **Table** - Data tables with consistent styling
+- **Typography** - Headings and text with predefined styles
+- **Code** - Inline and block code display
+
+### Form Components
+- **Field** - Form field wrapper with label and error handling
+- **FieldSet** - Group related form fields
+- **Select** - Styled select dropdowns
+- **Checkbox/Radio** - Enhanced checkboxes and radio buttons
+- **File Upload** - Drag-and-drop file uploads
+
+### Navigation Components
+- **Dropdown** - Dropdown menus with Stimulus integration
+- **Breadcrumbs** - Navigation breadcrumbs
+- **Link** - Styled links with variants
+
+## Customization
+
+OkonomiUiKit is designed to be highly customizable. You can override component styles by creating configuration classes in your Rails application.
+
+### Quick Example
+
+```ruby
+# app/helpers/okonomi_ui_kit/configs/button_base.rb
+module OkonomiUiKit
+  module Configs
+    class ButtonBase < OkonomiUiKit::Config
+      register_styles :default do
+        {
+          root: "font-semibold transition-all duration-200",
+          contained: {
+            colors: {
+              primary: "bg-brand-500 hover:bg-brand-600"
+            }
+          }
+        }
+      end
+    end
+  end
+end
 ```
 
+## Documentation
+
+### Guides
+
+- [Style Overrides Guide](guides/style-overrides-guide.md) - Complete guide to customizing component styles
+- [Component Guide](docs/COMPONENT_GUIDE.md) - Creating custom components
+- [CLAUDE.md](CLAUDE.md) - AI assistant instructions and architecture details
+
+### Component Guides
+
+- [Breadcrumbs](guides/components/breadcrumbs.md) - Navigation breadcrumb trails
+- [Confirmation Modal](guides/components/confirmation_modal.md) - Accessible modal dialogs for user confirmations
+- [Icon](guides/components/icon.md) - SVG icon rendering with style customization
+- [Navigation](guides/components/navigation.md) - Sidebar navigation menus with groups and links
+- [Typography](guides/components/typography.md) - Text styling with semantic HTML elements
+
+### Development
+
+For development setup and commands, see [CLAUDE.md](CLAUDE.md#development-commands).
+
+## Architecture Overview
+
+OkonomiUiKit is built as a Rails Engine with:
+
+- **Helper-based components** - Ruby methods that generate semantic HTML
+- **Component style system** - Consistent styling with intelligent class merging  
+- **Stimulus controllers** - Progressive enhancement for interactivity
+- **Tailwind CSS integration** - Modern utility-first styling
+- **Smart style merging** - Intelligent conflict resolution for Tailwind classes
+
 ## Contributing
-Contribution directions go here.
+
+We welcome contributions! Please follow these steps:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/okonomi_ui_kit.git
+cd okonomi_ui_kit
+
+# Install dependencies
+bundle install
+
+# Start the development server
+bin/dev
+
+# Run tests
+bin/rails test
+
+# Run linter
+bin/rubocop
+```
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Credits
+
+OkonomiUiKit is maintained by the Okonomi team. We're passionate about creating tools that make Rails development more enjoyable and productive.
+
+## Support
+
+- 📚 [Documentation](guides/)
+- 🐛 [Issue Tracker](https://github.com/yourusername/okonomi_ui_kit/issues)
+- 💬 [Discussions](https://github.com/yourusername/okonomi_ui_kit/discussions)