phlex-variants 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 97bc72ef60ebb3ae5986bf833da453a8ce0f5768987cea06034ffa62bb1b087f
+  data.tar.gz: a775ea5a27cfa083a357ed37c0f35c0b62a46c58abb5626d63b4b144fffc9d7d
+SHA512:
+  metadata.gz: f099f9a914a18007e2afeed60747ad8e255d791874f265a2862a4e0ea2267f1333b38507bf80bac7e91cd82d039d3c27f4a88cb01e1679cb6d3d0f442a8c4325
+  data.tar.gz: b0505e878bef8b833a2f831a50c30c9d0971f68b69669179ad1f721ba3502399456e98d8e6fd62d736e158e0c1b7a33c77f79f76694a0fd332a14194e4d3b62a

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/.standard.yml

@@ -0,0 +1,3 @@
+# For available configuration options, see:
+#   https://github.com/standardrb/standard
+ruby_version: 3.3

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+## [Unreleased]
+
+## [0.1.0] - 2024-09-25
+
+- Initial release

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[INSERT CONTACT METHOD].
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 stephann
+
+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,138 @@
+> [!WARNING]
+> Please note that Phlex::Variants is currently under development and may undergo changes to its API before reaching the stable release (1.0.0). As a result, there may be breaking changes that affect its usage.
+
+# Phlex::Variants
+[![CI](https://github.com/stephannv/phlex-variants/actions/workflows/main.yml/badge.svg)](https://github.com/stephannv/phlex-variants/actions/workflows/main.yml)
+
+Phlex::Variants enables variants feature to Phlex view. It is useful if you are building components using a utility-first
+CSS framework like Tailwind CSS.
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [How it works](#how-it-works)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+- [Code of Conduct](#code-of-conduct)
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+```bash
+bundle add phlex-variants
+```
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+```bash
+gem install phlex-variants
+```
+
+> [!TIP]
+> If you prefer not to add another dependency to your project, you can simply copy the [Phlex::Variants](https://github.com/stephannv/phlex-variant/blob/main/lib/phlex/variants.rb) file into your project.
+
+
+## Usage
+
+To create a component with style variants, include the `Phlex::Variants` module and use the `style` method to define the
+base classes, variants, and default values.
+
+```ruby
+class Button < Phlex::HTML
+  include Phlex::Variants
+
+  style do
+    base "btn"
+
+    variants do
+      color do
+        default "btn-default"
+        primary "btn-primary"
+        danger "btn-danger"
+      end
+
+      size do
+        xs "btn-xs"
+        md "btn-md"
+        lg "btn-lg"
+      end
+
+      outline do
+        yes "btn-outline"
+      end
+    end
+
+    defaults color: :default, size: :md
+  end
+
+  attr_reader :color, :size, :outline, :full
+
+  def initialize(color: nil, size: nil, outline: nil)
+    @color = color
+    @size = size
+    @outline = outline
+  end
+
+  def view_template(&)
+    a(class: build_style(color:, size:, outline:), &)
+  end
+end
+
+Button.new.call { "Hello" }
+# => "<a class="btn btn-default btn-md">Hello<a>"
+
+Button.new(color: :primary, size: :lg, outline: true).call { "Hello" }
+# => "<a class="btn btn-primary btn-lg btn-outline">Hello<a>"
+
+Button.build_style(color: :danger, size: :xs)
+# => "btn btn-danger btn-xs"
+```
+
+## How it works
+
+#### `style`
+
+The `style` method is used to define the styling configuration of your component. It includes the following sections:
+
+- `base`: Defines the base CSS class that will always be applied to the component.
+- `variants`: Allows you to define multiple variants with different options for each variant group (e.g., color, size).
+- `defaults`: Sets the default values for the variants.
+
+You can use `yes`/`no` as variant options, which can be accessed by passing `true`/`false` when calling the `build_style`
+method.
+
+#### `build_style`
+
+The `build_style` is both instance method and class method, it generates CSS classes string based on given variants.
+
+- If a variant is passed as nil, the default value defined in defaults will be used. For example, if `defaults size: :xs`
+is set and `build_style(size: nil)` is called, the `size: :xs` will be used to build the class result.
+
+- If a non-existent variant or option is passed, it will raise a `Phlex::Variants::VariantNotFoundError`.
+
+- Use `true`/`false` to toggle `yes`/`no` options in boolean variants.
+
+- You can add additional classes using the `extra_classes` option. These will be appended to the final class string:
+```ruby
+build_style(color: :primary, extra_classes: "disabled:hidden")
+# => "btn btn-danger btn-xs disabled:hidden"
+```
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/stephannv/phlex-variants. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/stephannv/phlex-variants/blob/master/CODE_OF_CONDUCT.md).
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the Phlex::Variants project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/stephannv/phlex-variants/blob/master/CODE_OF_CONDUCT.md).

data/Rakefile

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

data/lib/phlex/variants/version.rb

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

data/lib/phlex/variants.rb

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+require_relative "variants/version"
+
+module Phlex
+  module Variants
+    VariantNotFoundError = Class.new(StandardError)
+
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+
+    module ClassMethods
+      def style(&)
+        StyleBuilder.build(self, &)
+      end
+
+      def build_style(**variants)
+        extra_classes = variants.delete(:extra_classes)
+
+        [self::STYLE_BASE, build_variants_style(variants), extra_classes].flatten.compact.join(" ")
+      end
+
+      private
+
+      # @api private
+      def build_variants_style(variants)
+        self::STYLE_DEFAULTS.merge(variants.compact).map do |variant, option|
+          value = self::STYLE_VARIANTS.dig(variant, option)
+
+          if value.nil?
+            raise VariantNotFoundError, "Variant `#{variant}: #{option.inspect}` doesn't exist"
+          end
+
+          value
+        end
+      end
+    end
+
+    private
+
+    def build_style(...)
+      self.class.build_style(...)
+    end
+
+    # @api private
+    class StyleBuilder
+      attr_reader :view_class
+
+      def self.build(view_class, &)
+        new(view_class).build(&)
+      end
+
+      def build(&)
+        view_class.const_set(:STYLE_BASE, [])
+        view_class.const_set(:STYLE_VARIANTS, {})
+        view_class.const_set(:STYLE_DEFAULTS, {})
+        instance_exec(&)
+      end
+
+      private
+
+      def initialize(view_class)
+        @view_class = view_class
+      end
+
+      def base(*values)
+        view_class::STYLE_BASE.concat values
+      end
+
+      def variants(&)
+        VariantBuilder.build(view_class, &)
+      end
+
+      def defaults(**variants)
+        view_class::STYLE_DEFAULTS.merge!(variants)
+      end
+    end
+
+    # @api private
+    class VariantBuilder
+      attr_reader :view_class
+
+      def self.build(view_class, &)
+        new(view_class).instance_exec(&)
+      end
+
+      def initialize(view_class)
+        @view_class = view_class
+      end
+
+      def method_missing(name, &) # standard:disable Style/MissingRespondToMissing
+        variant_name = name.to_sym
+        view_class::STYLE_VARIANTS[variant_name] = {}
+        OptionsBuilder.build(view_class, variant_name, &)
+      end
+    end
+
+    # @api private
+    class OptionsBuilder
+      attr_reader :view_class, :variant_name
+
+      def self.build(view_class, variant_name, &)
+        new(view_class, variant_name).instance_exec(&)
+      end
+
+      private
+
+      def initialize(view_class, variant_name)
+        @view_class = view_class
+        @variant_name = variant_name
+      end
+
+      def method_missing(name, *args) # standard:disable Style/MissingRespondToMissing
+        option = name.to_sym
+        view_class::STYLE_VARIANTS[variant_name][option] = args
+
+        if option == :yes
+          view_class::STYLE_VARIANTS[variant_name][true] = args
+        elsif option == :no
+          view_class::STYLE_VARIANTS[variant_name][false] = args
+        end
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,74 @@
+--- !ruby/object:Gem::Specification
+name: phlex-variants
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- stephann
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2024-09-26 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: phlex
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+description: Easily define and manage style variants for Phlex components, allowing
+  flexible and dynamic customization of styles.
+email:
+- 3025661+stephannv@users.noreply.github.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rspec"
+- ".standard.yml"
+- CHANGELOG.md
+- CODE_OF_CONDUCT.md
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/phlex/variants.rb
+- lib/phlex/variants/version.rb
+homepage: https://github.com/stephannv/phlex-variants
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/stephannv/phlex-variants
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.16
+signing_key:
+specification_version: 4
+summary: Compose your Phlex component with style variants.
+test_files: []