RubyGems - uikit_rails - Versions diffs - 0.1.0 - Mend

uikit_rails 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of uikit_rails might be problematic. Click here for more details.

Files changed (368) hide show

checksums.yaml ADDED Viewed

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 15fd29b901ee109f1db0bd8397dd6cdd751c061ca49b69805cff6f2eb357c079
+  data.tar.gz: 9a4e1bb1eac43ad31eb5f3283d7d4b38e6e4c99273c2f3c2e199c825b53838af
+SHA512:
+  metadata.gz: b0f262f355681225409026ea3b17476c942989711a7818a02a796955747266a049d80698f63f47ffed41c972170109c4ae15b02d2c8fca97b73060a8a883e6af
+  data.tar.gz: 78e353120978cabb0289137033d25002faa419ecfefe8c3d275a5ab2c28ff7ed43dccd0dd557b43f7c4889e11e6a1eac54047a9ddcfcba1147934b7a948c872a

data/README.md ADDED Viewed

@@ -0,0 +1,259 @@
+# UikitRails
+Beautiful, copy-paste UI components for Rails — inspired by [shadcn/ui](https://ui.shadcn.com).
+You don't install a component library. You **copy components into your project** and own the code. Customize everything — HTML, CSS, Ruby — no abstractions in the way.
+## Why UikitRails?
+| | Traditional gems | UikitRails |
+|---|---|---|
+| **Ownership** | Locked behind gem API | Code lives in your app |
+| **Styling** | Override with hacks | Edit the CSS directly |
+| **Tailwind required?** | Often | No — plain CSS with design tokens |
+| **Customization** | Limited to gem options | Change anything you want |
+## Features
+- **Copy, don't depend** — components are copied into your app via generators. No runtime dependency.
+- **No Tailwind required** — plain CSS powered by CSS custom properties (design tokens). Works with any CSS setup.
+- **ViewComponent-based** — each component is a proper [ViewComponent](https://viewcomponent.org/) with a Ruby class and ERB template.
+- **Dark mode ready** — add `class="dark"` to your `<html>` tag and it just works.
+- **Built-in styleguide** — mount the engine to browse live previews and copy code for every installed component.
+- **Accessible** — semantic HTML, keyboard navigation, focus-visible states, and ARIA attributes.
+## Quick Start
+### 1. Add the gem
+```ruby
+gem "uikit_rails"
+```
+```bash
+bundle install
+```
+### 2. Run the installer
+```bash
+rails generate uikit_rails:install
+```
+This creates two files:
+| File | Purpose |
+|---|---|
+| `app/components/ui/base_component.rb` | Base class all UI components inherit from |
+| `app/assets/stylesheets/uikit_rails.css` | Design tokens — colors, radii, fonts, transitions |
+### 3. Add components
+```bash
+# Add specific components
+rails generate uikit_rails:add button card input
+# Or install everything at once
+rails generate uikit_rails:add --all
+```
+This copies into your app:
+| File | Purpose |
+|---|---|
+| `app/components/ui/button/component.rb` | ViewComponent Ruby class |
+| `app/assets/stylesheets/ui/button.css` | Component styles (plain CSS) |
+| `app/components/ui/button/preview.yml` | Preview examples for the styleguide |
+Add multiple components at once:
+```bash
+rails generate uikit_rails:add button card badge alert
+```
+### 4. Use in your views
+```erb
+<%= render Ui::Button::Component.new do %>
+  Click me
+<% end %>
+<%= render Ui::Button::Component.new(variant: :destructive, size: :lg) do %>
+  Delete
+<% end %>
+<%= render Ui::Button::Component.new(tag: :a, href: "/dashboard", variant: :outline) do %>
+  Go to Dashboard
+<% end %>
+```
+## Component Styleguide
+UikitRails ships with a **mountable engine** that gives you a live component browser — like Storybook, but built into your Rails app.
+Add one line to your routes:
+```ruby
+# config/routes.rb
+mount UikitRails::Engine => "/ui"
+```
+Then visit `/ui` to see:
+- A sidebar listing every installed component
+- Live rendered previews with all variants and sizes
+- Copyable ERB code snippets for every example
+- The `rails generate` command to install each component
+The styleguide is self-contained — it has its own layout and styles that won't interfere with your app.
+## Available Components
+**Layout & Display**
+| Component | Description |
+|---|---|
+| `card` | Container with header, title, description, body, and footer slots |
+| `separator` | Horizontal or vertical divider between content |
+| `skeleton` | Animated placeholder for loading states |
+| `avatar` | Circular avatar with image or fallback initials |
+| `badge` | Small status indicator (default, secondary, destructive, outline) |
+| `alert` | Informational banner with title and description (default, destructive) |
+| `progress` | Progress bar with accessible ARIA attributes |
+| `label` | Styled form label |
+| `table` | Data table with header, body, footer, and caption slots |
+**Form Controls**
+| Component | Description |
+|---|---|
+| `button` | Button with 6 variants and 4 sizes, renders as `<button>` or `<a>` |
+| `input` | Styled text input field |
+| `textarea` | Multi-line text input |
+| `select` | Native select dropdown with custom styling |
+| `checkbox` | Styled checkbox with optional label |
+| `switch` | Toggle switch for boolean settings (pure CSS) |
+| `toggle` | Pressable toggle button with pressed state |
+**Interactive (Stimulus)**
+| Component | Description |
+|---|---|
+| `dialog` | Modal dialog using native `<dialog>` element |
+| `alert_dialog` | Confirmation dialog that requires user action |
+| `sheet` | Slide-over panel from any side (top, right, bottom, left) |
+| `dropdown` | Dropdown menu with items, separators, and labels |
+| `popover` | Floating content panel triggered by click |
+| `tabs` | Tabbed content panels with keyboard navigation |
+| `tooltip` | Hover/focus tooltip (top, bottom, left, right) |
+| `accordion` | Collapsible sections with single or multiple open |
+| `collapsible` | Simple expand/collapse toggle |
+**Navigation**
+| Component | Description |
+|---|---|
+| `breadcrumb` | Navigation breadcrumb trail with links |
+| `pagination` | Page navigation with prev, next, pages, and ellipsis |
+## Customization
+### Design Tokens
+All components reference CSS custom properties defined in `app/assets/stylesheets/uikit_rails.css`. Change them once, every component updates:
+```css
+:root {
+  --ui-primary: #2563eb;
+  --ui-primary-foreground: #ffffff;
+  --ui-radius: 0.5rem;
+  --ui-font-family: "Inter", sans-serif;
+  --ui-transition-speed: 150ms;
+}
+```
+Dark mode tokens are defined under `.dark` — add the class to `<html>` or `<body>` to switch.
+### Component Code
+Since you own the code, you can change anything:
+- **Ruby class** — add new variants, change defaults, add validations
+- **CSS file** — restyle completely, add animations, adjust spacing
+- **Preview** — edit `preview.yml` to add your own examples to the styleguide
+### Example: Adding a Custom Variant
+```ruby
+# app/components/ui/button/component.rb
+VARIANTS = %i[default destructive outline secondary ghost link brand].freeze
+```
+```css
+/* app/assets/stylesheets/ui/button.css */
+.ui-btn--brand {
+  background-color: #7c3aed;
+  color: #ffffff;
+}
+.ui-btn--brand:hover {
+  background-color: #6d28d9;
+}
+```
+```erb
+<%= render Ui::Button::Component.new(variant: :brand) do %>
+  Brand Button
+<% end %>
+```
+## How It Works
+```
+rails generate uikit_rails:install
+  └─ copies base_component.rb + uikit_rails.css (design tokens)
+rails generate uikit_rails:add button
+  └─ copies component.rb → app/components/ui/button/
+  └─ copies button.css   → app/assets/stylesheets/ui/
+  └─ copies preview.yml  → app/components/ui/button/
+mount UikitRails::Engine => "/ui"
+  └─ serves a styleguide at /ui with live previews
+```
+The gem is only used for **generators and the styleguide engine**. Your components have zero runtime dependency on the gem — you could remove it from your Gemfile after adding all the components you need (though you'd lose the styleguide).
+## Requirements
+- Ruby >= 3.2
+- Rails >= 7.0
+- [view_component](https://github.com/ViewComponent/view_component) >= 3.0
+## Development
+```bash
+git clone https://github.com/kha-wogi/uikit_rails.git
+cd uikit_rails
+bin/setup
+bundle exec rspec     # run tests
+bundle exec rubocop   # run linter
+```
+A test Rails app is included at `test_app/` for manual testing:
+```bash
+cd test_app
+bundle install
+bin/rails generate uikit_rails:install
+bin/rails generate uikit_rails:add button
+bin/rails server
+# Visit http://localhost:3000/ui
+```
+## Contributing
+Bug reports and pull requests are welcome on [GitHub](https://github.com/kha-wogi/uikit_rails).
+## License
+MIT

data/Rakefile ADDED Viewed

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+RSpec::Core::RakeTask.new(:spec)
+require "rubocop/rake_task"
+RuboCop::RakeTask.new
+task default: %i[spec rubocop]

data/app/controllers/uikit_rails/styleguide_controller.rb ADDED Viewed

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+require "yaml"
+module UikitRails
+  # Serves the component styleguide: index of installed components and live previews.
+  class StyleguideController < ActionController::Base
+    layout "uikit_rails/application"
+    def index
+      @components = installed_components
+    end
+    def show
+      @component = params[:component]
+      @components = installed_components
+      unless @components.include?(@component)
+        redirect_to uikit_rails.root_path, alert: "Component '#{@component}' is not installed."
+        return
+      end
+      load_preview
+    end
+    private
+    def installed_components
+      components_dir = Rails.root.join("app/components/ui")
+      return [] unless Dir.exist?(components_dir)
+      Dir.children(components_dir)
+         .select { |entry| File.directory?(components_dir.join(entry)) }
+         .sort
+    end
+    def load_preview
+      preview_path = Rails.root.join("app/components/ui", @component, "preview.yml")
+      unless File.exist?(preview_path)
+        @sections = []
+        @description = nil
+        return
+      end
+      data = YAML.safe_load_file(preview_path, permitted_classes: [Symbol])
+      @description = data["description"]
+      @sections = parse_sections(data["sections"])
+    end
+    def parse_sections(sections)
+      (sections || []).map do |section|
+        {
+          title: section["title"],
+          examples: parse_examples(section["examples"])
+        }
+      end
+    end
+    def parse_examples(examples)
+      (examples || []).map do |example|
+        code = example["code"].to_s.strip
+        { title: example["title"], code: code, rendered: render_example(code) }
+      end
+    end
+    def render_example(code)
+      render_to_string(inline: code, layout: false)
+    rescue StandardError => e
+      %(<span style="color:red">Render error: #{ERB::Util.html_escape(e.message)}</span>)
+    end
+  end
+end