protos 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 396bd8424d9be7d44d3d2ebcd27fb5bbcfb8c06de62a9bb1b8cf01fc50d9214e
+  data.tar.gz: f536874ad166bc77a0817199bc62e6f5505865a61beae8c22afad7b4b6b219a7
+SHA512:
+  metadata.gz: 158b684976d5124c7e6cb2b779fa85305a42b44a9578ddaf7a6b5960ddecc07da71c96734cd1cd663ee2d9f4f65b14a4a2f1e8493293639dfe15eb5640c22f89
+  data.tar.gz: 111f6aca758b7f21cc7a3021448c4d323e13699d40533b43b10fc39a492c7d9a62d48d2a761c57af32b5c3bfd0d6ef7dd32cf9ddc9de22d3bec7f99c54afe449

data/.rspec

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

data/.rubocop.yml

@@ -0,0 +1,12 @@
+require:
+  - rubocop-inhouse
+
+AllCops:
+  TargetRubyVersion: 3.1
+
+inherit_gem:
+  rubocop-inhouse:
+    - config/default.yml
+
+Style/ConstantVisibility:
+  Enabled: false

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+## [Unreleased]
+
+## [0.1.0] - 2024-03-01
+
+- Initial release

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Nolan J Tait
+
+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,150 @@
+# Protos
+
+A UI component library for Phlex using daisyui.
+
+Protos uses a set of conventions that make it easier to work with tailwindcss
+and components in Phlex which you can use by inheriting from the base component.
+
+You can find this example in `examples/navbar.rb` which you can run with `ruby
+examples/navbar.rb`:
+
+```ruby
+require "protos"
+
+class Navbar < Protos::Component
+  def template
+    # **attrs will add:
+    # - Any html options defined on the component initialization such as data,
+    #   role, for, etc..
+    # - Class will be added to the css[:container] and applied
+    header(**attrs) do
+      h1(class: css[:heading]) { "Hello world" }
+      h2(class: css[:subtitle]) { "With a subtitle" }
+    end
+  end
+
+  private
+
+  def default_attrs
+    {
+      data: { controller: "navbar" }
+    }
+  end
+
+  def theme
+    {
+      container: tokens(
+        "flex",
+        "justify-between",
+        "items-center",
+        "gap-sm"
+      ),
+      heading: tokens("text-2xl", "font-bold"),
+      subtitle: tokens("text-base")
+    }
+  end
+end
+
+component = Navbar.new(
+  # This will add to the component's css[:container] slot
+  class: "my-sm",
+  # This will add the controller and not remove
+  # the existing one
+  data: { controller: "counter" },
+  theme: {
+    heading: "p-sm",       # We can add tokens
+    "!container": "gap-sm" # We can negate (remove) certain tokens
+    subtitle!: "text-xl"   # We can override the entire slot
+  }
+)
+
+puts component.call
+```
+
+Which produces the following html:
+
+```html
+<header data-controller="navbar counter" class="flex justify-between items-center my-sm">
+  <h1 class="text-2xl font-bold p-sm">Hello world</h1>
+  <h2 class="text-xl">With a subtitle</h2>
+</header>
+```
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+    $ bundle add protos
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+    $ gem install protos
+
+## Usage
+
+Setup tailwindcss:
+
+```js
+// tailwind.config.js
+// For importing tailwind styles from protos gem
+const execSync = require('child_process').execSync;
+const outputProtos = execSync('bundle show protos', { encoding: 'utf-8' });
+const protos_path = outputProtos.trim() + '/**/*.rb';
+
+module.exports = {
+  content: [
+    "./app/views/**/*.{rb,html,html.erb,erb}",
+    protos_path
+  ],
+  // ....
+}
+```
+
+Add [`protos-stimulus`](https://github.com/inhouse-work/protos-stimulus)
+to your packages:
+
+```
+npm install protos-stimulus
+```
+
+And somewhere in your entrypoints import as a side effect:
+
+```js
+import "protos-stimulus"
+```
+
+Then you can use the components
+
+```ruby
+render Protos::Card.new(class: "bg-base-100") do |card|
+  card.body(class: "gap-sm") do
+    card.title(class: "font-bold") { "Hello world" }
+    span { "This is some more content" }
+    card.actions do
+      button(class: "btn btn-primary") { "Action 1" }
+    end
+  end
+end
+```
+
+## 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/inhouse-work/protos.
+
+## License
+
+The gem is available as open source under the terms of the
+[MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -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/examples/navbar.rb

@@ -0,0 +1,43 @@
+require_relative "../lib/protos"
+
+class Navbar < Protos::Component
+  def template
+    header(**attrs) do
+      h1(class: css[:heading]) { "Hello world" }
+      h2(class: css[:subtitle]) { "With a subtitle" }
+    end
+  end
+
+  private
+
+  def default_attrs
+    {
+      data: { controller: "navbar" }
+    }
+  end
+
+  def theme
+    {
+      container: tokens(
+        "flex",
+        "justify-between",
+        "items-center",
+        "gap-sm"
+      ),
+      heading: tokens("text-2xl", "font-bold"),
+      subtitle: tokens("text-base")
+    }
+  end
+end
+
+component = Navbar.new(
+  class: "my-sm",
+  data: { controller: "counter" },
+  theme: {
+    heading: "p-sm",        # We can add tokens
+    "!container": "gap-sm", # We can negate (remove) certain tokens
+    subtitle!: "text-xl"    # We can override the entire slot
+  }
+)
+
+puts component.call

data/lib/protos/accordion/item.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Protos
+  class Accordion
+    class Item < Component
+      option :id, type: Types::Coercible::String
+
+      def template(&block)
+        li(**attrs) do
+          render collapse do |_collapse|
+            input(type: :radio, name: id, id:)
+            yield if block
+          end
+        end
+      end
+
+      private
+
+      def collapse
+        collapse_theme = { "!container": tokens("bg-base-100") }
+        collapse_theme[:container!] = css[:collapse]
+
+        Collapse.new(theme: collapse_theme.compact)
+      end
+
+      def theme
+        {
+          container: tokens("join-item")
+        }
+      end
+    end
+  end
+end

data/lib/protos/accordion.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Protos
+  class Accordion < Component
+    option :id, default: -> { SecureRandom.uuid }
+
+    def template(&block)
+      ul(**attrs, &block)
+    end
+
+    def item(**kwargs)
+      Item.new(id:, **kwargs)
+    end
+
+    def title(...)
+      Collapse::Title.new(...)
+    end
+
+    def content(...)
+      Collapse::Content.new(...)
+    end
+
+    private
+
+    def theme
+      {
+        container: tokens(
+          "join",
+          "join-vertical"
+        )
+      }
+    end
+  end
+end

data/lib/protos/alert/actions.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Alert
+    class Actions < Component
+      def template(&block)
+        nav(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("flex", "gap-xs")
+        }
+      end
+    end
+  end
+end

data/lib/protos/alert/icon.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Alert
+    class Icon < Component
+      def template(&block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("place-self-start", "mt-1")
+        }
+      end
+    end
+  end
+end

data/lib/protos/alert.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Protos
+  class Alert < Component
+    AlertTypes = Types::Coercible::Symbol.enum(
+      :info,
+      :success,
+      :warning,
+      :error
+    )
+
+    option :type, type: AlertTypes, default: -> { :info }, reader: :private
+
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    def icon(...)
+      Icon.new(...)
+    end
+
+    def actions(...)
+      Actions.new(...)
+    end
+
+    private
+
+    def theme
+      {
+        container: tokens(
+          "alert",
+          color
+        )
+      }
+    end
+
+    def color
+      {
+        info: "alert-info",
+        error: "alert-error",
+        warning: "alert-warning",
+        success: "alert-success"
+      }.fetch(type)
+    end
+  end
+end

data/lib/protos/attributes.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Protos
+  class Attributes
+    def initialize(attrs = {}, **kwargs)
+      @attrs = attrs.merge(kwargs)
+    end
+
+    def [](key)
+      @attrs[key]
+    end
+
+    def merge(hash)
+      tap do
+        @attrs = mix(@attrs, hash)
+      end
+    end
+
+    # Allows for the use of the `**` operator to pass the attributes to
+    # a method.
+    def to_hash
+      @attrs
+    end
+
+    private
+
+    def mix(*hashes)
+      hashes.each_with_object({}).each do |hash, result|
+        hash ||= {}
+
+        result.merge!(hash) do |_key, a, b| # rubocop:disable Metrics/ParameterLists
+          case [a, b]
+          in String, String then "#{a} #{b}"
+          in Array, Array then a + b
+          in Hash, Hash then mix(a, b)
+          else b
+          end
+        end
+      end
+    end
+  end
+end

data/lib/protos/avatar.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Protos
+  class Avatar < Component
+    IndicatorTypes = Types::Coercible::Symbol.enum(:none, :online, :offline)
+
+    option :placeholder, type: Types::Bool, default: -> { false }
+    option :indicator,
+           type: IndicatorTypes,
+           default: -> { :none },
+           reader: false
+    option :shape,
+           type: Types::MaskShapes,
+           default: -> { :none },
+           reader: false
+
+    def template(&block)
+      div(**attrs) do
+        div(class: css[:figure], &block)
+      end
+    end
+
+    private
+
+    def indicator
+      {
+        none: "",
+        online: "online",
+        offline: "offline"
+      }.fetch(@indicator)
+    end
+
+    def shape
+      {
+        none: "",
+        squircle: "mask mask-squircle",
+        heart: "mask mask-heart",
+        hexagon: "mask mask-hexagon",
+        hexagon2: "mask mask-hexagon-2",
+        decagon: "mask mask-decagon",
+        pentagon: "mask mask-pentagon",
+        diamond: "mask mask-diamond",
+        square: "mask mask-square",
+        circle: "mask mask-circle",
+        parallelogram: "mask mask-parallelogram",
+        parallelogram2: "mask mask-parallelogram-2",
+        parallelogram3: "mask mask-parallelogram-3",
+        parallelogram4: "mask mask-parallelogram-4",
+        star: "mask mask-star",
+        star2: "mask mask-star-2",
+        triangle: "mask mask-triangle",
+        triangle2: "mask mask-triangle-2",
+        triangle3: "mask mask-triangle-3",
+        triangle4: "mask mask-triangle-4",
+        half1: "mask mask-half-1",
+        half2: "mask mask-half-2"
+      }.fetch(@shape)
+    end
+
+    def theme
+      {
+        container: tokens(
+          "avatar",
+          indicator,
+          placeholder: "placeholder"
+        ),
+        figure: tokens(shape)
+      }
+    end
+  end
+end

data/lib/protos/card/actions.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Card
+    class Actions < Component
+      def template(&block)
+        nav(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("card-actions")
+        }
+      end
+    end
+  end
+end

data/lib/protos/card/body.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Card
+    class Body < Component
+      def template(&block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("card-body")
+        }
+      end
+    end
+  end
+end

data/lib/protos/card/image.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Protos
+  class Card
+    class Image < Component
+      def template(&block)
+        figure(**attrs, &block)
+      end
+    end
+  end
+end

data/lib/protos/card/title.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Card
+    class Title < Component
+      def template(&block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("card-title")
+        }
+      end
+    end
+  end
+end

data/lib/protos/card.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Protos
+  class Card < Component
+    ImageDisplayTypes = Types::Coercible::Symbol.enum(:default, :overlay, :side)
+
+    option :border, type: Types::Bool, default: -> { true }, reader: :private
+    option :compact, type: Types::Bool, default: -> { false }, reader: :private
+    option :image_display,
+           ImageDisplayTypes,
+           default: -> { :default },
+           reader: false
+
+    def template(&block)
+      article(**attrs, &block)
+    end
+
+    def body(...)
+      Body.new(...)
+    end
+
+    def image(...)
+      Image.new(...)
+    end
+
+    def title(...)
+      Title.new(...)
+    end
+
+    def actions(...)
+      Actions.new(...)
+    end
+
+    private
+
+    def image_display
+      {
+        default: "",
+        overlay: "image-full",
+        side: "card-side"
+      }.fetch(@image_display)
+    end
+
+    def theme
+      {
+        container: tokens(
+          "card",
+          image_display,
+          border: "card-bordered",
+          compact: "card-compact"
+        )
+      }
+    end
+  end
+end

data/lib/protos/collapse/content.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Collapse
+    class Content < Component
+      def template(&block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def theme
+        {
+          container: tokens("collapse-content")
+        }
+      end
+    end
+  end
+end