flowbite-components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8801080d6b51d7c4fef754dcd189ebaea34c8dd17a496c7dda80eb31e37f9737
+  data.tar.gz: a50284e6b62c7713edbaadec851d34ec87ad698986431ca407539c9282033928
+SHA512:
+  metadata.gz: 894c82db7d448e8a444e4fb3df781e0ccea35df068ae5711d358e83d3651dfc30e2b086e55dcfd8afabd5d84db5f777b1dd0fc497382cab1531f0dcf6623ab3f
+  data.tar.gz: cd0bb587980b19ff4d4b6ec9f6cfad3d3ec42a624a87f2a88f28eafd77608956a3cd2d3de6135c1b118ab0f85505a8c390dc0e6be53a548ef794e0aeb3bb228e

data/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changes
+
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+
+### Added
+
+* Button component (first component, wee!)
+* Input components
+* InputField components
+
+### Changes
+
+*
+
+### Removed
+
+*

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Substance Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,250 @@
+# Flowbite ViewComponents
+
+[![Gem Version](https://badge.fury.io/rb/flowbite-view_components.svg)](https://rubygems.org/gems/flowbite-view_components)
+[![Ruby Tests](https://github.com/substancelab/flowbite-view_components/workflows/Ruby/badge.svg)](https://github.com/substancelab/flowbite-view_components/actions)
+
+Unofficial, open source implementation of [Flowbite](https://flowbite.com/) components for Rails applications, built using [ViewComponent](https://viewcomponent.org/).
+
+Flowbite ViewComponents provides a comprehensive library of UI components following the Flowbite design system, implemented as Rails ViewComponents with full Tailwind CSS integration and dark mode support.
+
+## Features
+
+- **Full Flowbite Design System**: Faithful implementation of Flowbite components
+- **Rails Native**: Built specifically for Rails using ViewComponent
+- **Tailwind CSS Integration**: Seamless integration with Tailwind CSS
+- **Dark Mode Support**: Built-in dark theme variants
+- **Form Helpers**: Comprehensive form input components with validation states
+- **Accessibility First**: ARIA attributes and semantic HTML
+- **Type Safety**: Comprehensive test coverage and input validation
+
+## Installation
+
+Add the gem to your application's Gemfile:
+
+```ruby
+gem 'flowbite-view_components'
+```
+
+Then execute:
+
+```bash
+bundle install
+```
+
+### Configuration
+
+Make sure you have Tailwind CSS installed in your Rails application. We recommend using the [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) gem:
+
+```ruby
+gem "tailwindcss-rails", ">= 4.3.0"
+```
+
+### Flowbite Setup
+
+Install Flowbite as an npm dependency:
+
+```bash
+npm install flowbite
+```
+
+Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/application.css`:
+
+```css
+@import "flowbite/src/themes/default";
+@plugin "flowbite/plugin";
+@import "../builds/tailwind/flowbite_view_components";
+```
+
+## Usage examples
+
+### Basic Form Field
+
+```erb
+<% form_with model: @user do |form| %>
+  <%= render Flowbite::InputField::Text.new(
+    attribute: :name,
+    form: form,
+    label: {content: "Full Name"},
+    hint: {content: "Enter your full name"}
+  ) %>
+
+  <%= render Flowbite::InputField::Email.new(
+    attribute: :email,
+    form: form
+  ) %>
+
+  <%= render Flowbite::Button.new(
+    type: :submit,
+    content: "Save User"
+  ) %>
+<% end %>
+```
+
+### Button Examples
+
+```erb
+<!-- Default button -->
+<%= render Flowbite::Button.new do %>
+  Click me
+<% end %>
+
+<!-- Outline button with color -->
+<%= render Flowbite::Button::Outline.new(style: :blue) do %>
+  Outline Button
+<% end %>
+
+<!-- Pill button -->
+<%= render Flowbite::Button::Pill.new(style: :green) do %>
+  Pill Button
+<% end %>
+```
+
+### Custom Input Options
+
+```erb
+<%= render Flowbite::InputField::Text.new(
+  attribute: :username,
+  form: form,
+  size: :lg,
+  input: {
+    options: {
+      placeholder: "Enter username",
+      maxlength: 50,
+      class: "custom-class"
+    }
+  }
+) %>
+```
+
+### Custom Labels
+
+```erb
+<%= render Flowbite::InputField::Email.new(
+  attribute: :email,
+  form: form,
+  label: {
+    content: "Email Address",
+    options: {class: "font-bold"}
+  }
+) %>
+```
+
+### Disabled and Error States
+
+```erb
+<!-- Disabled field -->
+<%= render Flowbite::InputField::Text.new(
+  attribute: :name,
+  form: form,
+  disabled: true
+) %>
+
+<!-- Field with hint -->
+<%= render Flowbite::InputField::Password.new(
+  attribute: :password,
+  form: form,
+  hint: "Must be at least 8 characters long"
+) %>
+```
+
+## Available Components
+
+### Form Components
+
+#### Input Fields (Complete form fields with labels, hints, and error handling)
+- **Checkbox**: `Flowbite::InputField::Checkbox`
+- **Date**: `Flowbite::InputField::Date`
+- **Email**: `Flowbite::InputField::Email`
+- **File**: `Flowbite::InputField::File`
+- **Number**: `Flowbite::InputField::Number`
+- **Password**: `Flowbite::InputField::Password`
+- **Phone**: `Flowbite::InputField::Phone`
+- **Radio Button**: `Flowbite::InputField::RadioButton`
+- **Select**: `Flowbite::InputField::Select`
+- **Text**: `Flowbite::InputField::Text`
+- **Textarea**: `Flowbite::InputField::Textarea`
+- **URL**: `Flowbite::InputField::Url`
+
+#### Basic Input Components (Input elements without labels or wrappers)
+- **Checkbox**: `Flowbite::Input::Checkbox`
+- **Date**: `Flowbite::Input::Date`
+- **Email**: `Flowbite::Input::Email`
+- **File**: `Flowbite::Input::File`
+- **Number**: `Flowbite::Input::Number`
+- **Password**: `Flowbite::Input::Password`
+- **Phone**: `Flowbite::Input::Phone`
+- **Radio Button**: `Flowbite::Input::RadioButton`
+- **Select**: `Flowbite::Input::Select`
+- **Textarea**: `Flowbite::Input::Textarea`
+- **URL**: `Flowbite::Input::Url`
+
+#### Form Utilities
+- **Hint**: `Flowbite::Input::Hint`
+- **Label**: `Flowbite::Input::Label`
+- **Validation Error**: `Flowbite::Input::ValidationError`
+
+### UI Components
+
+#### Buttons
+- **Button**: `Flowbite::Button` (default solid button)
+- **Outline Button**: `Flowbite::Button::Outline`
+- **Pill Button**: `Flowbite::Button::Pill`
+
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies.
+
+To run tests:
+
+```bash
+bundle exec rake test
+```
+
+To check code style:
+
+```bash
+bundle exec rake standard
+```
+
+To install this gem onto your local machine:
+
+```bash
+bundle exec rake install
+```
+
+### Component Previews
+
+This library includes Lookbook previews for all components. To view them:
+
+1. Add Lookbook to your development dependencies
+2. Run `rails server`
+3. Visit `/rails/lookbook`
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at [https://github.com/substancelab/flowbite-view_components](https://github.com/substancelab/flowbite-view_components).
+
+### Development Guidelines
+
+- All components should follow Flowbite design system specifications
+- Use keyword arguments for component initialization
+- Include comprehensive tests for all components
+- Follow the existing naming conventions
+- Ensure accessibility standards are met
+
+## Support
+
+- [Flowbite Documentation](https://flowbite.com/docs/)
+- [ViewComponent Documentation](https://viewcomponent.org/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+
+## Other Flowbite component libraries
+
+* https://flowbite-react.com/
+* https://flowbite-svelte.com/
+* https://flowbite-vue.com/
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

data/lib/flowbite/view_components/engine.rb

@@ -0,0 +1,13 @@
+require "rails/engine"
+
+module Flowbite
+  module ViewComponents
+    class Engine < ::Rails::Engine
+      isolate_namespace Flowbite::ViewComponents
+
+      config.autoload_paths = [
+        "#{root}/app/components"
+      ]
+    end
+  end
+end

data/lib/flowbite/view_components/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module ViewComponents
+    VERSION = "0.1.0"
+  end
+end

data/lib/flowbite/view_components.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require_relative "view_components/engine"
+require_relative "view_components/version"
+
+require "view_component"
+
+module Flowbite
+  module ViewComponents
+    class Error < StandardError; end
+    # Your code goes here...
+  end
+end

metadata

@@ -0,0 +1,63 @@
+--- !ruby/object:Gem::Specification
+name: flowbite-components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jakob Skjerning
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+description: A library of Flowbite View Components to be used in Rails applications.
+email:
+- jakob@mentalized.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE
+- README.md
+- lib/flowbite/view_components.rb
+- lib/flowbite/view_components/engine.rb
+- lib/flowbite/view_components/version.rb
+homepage: https://github.com/substancelab/flowbite-view_components
+licenses: []
+metadata:
+  allowed_push_host: https://rubygems.org/
+  homepage_uri: https://github.com/substancelab/flowbite-view_components
+  source_code_uri: https://github.com/substancelab/flowbite-view_components
+  changelog_uri: https://github.com/substancelab/flowbite-view_components/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.1.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: Flowbite components for Rails applications
+test_files: []