protos 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.
Files changed (76) hide show
  1. checksums.yaml +7 -0
  2. data/.rspec +3 -0
  3. data/.rubocop.yml +12 -0
  4. data/CHANGELOG.md +5 -0
  5. data/LICENSE.txt +21 -0
  6. data/README.md +150 -0
  7. data/Rakefile +12 -0
  8. data/examples/navbar.rb +43 -0
  9. data/lib/protos/accordion/item.rb +33 -0
  10. data/lib/protos/accordion.rb +34 -0
  11. data/lib/protos/alert/actions.rb +19 -0
  12. data/lib/protos/alert/icon.rb +19 -0
  13. data/lib/protos/alert.rb +46 -0
  14. data/lib/protos/attributes.rb +42 -0
  15. data/lib/protos/avatar.rb +71 -0
  16. data/lib/protos/card/actions.rb +19 -0
  17. data/lib/protos/card/body.rb +19 -0
  18. data/lib/protos/card/image.rb +11 -0
  19. data/lib/protos/card/title.rb +19 -0
  20. data/lib/protos/card.rb +55 -0
  21. data/lib/protos/collapse/content.rb +19 -0
  22. data/lib/protos/collapse/title.rb +19 -0
  23. data/lib/protos/collapse.rb +31 -0
  24. data/lib/protos/combobox.rb +53 -0
  25. data/lib/protos/command/dialog.rb +32 -0
  26. data/lib/protos/command/empty.rb +25 -0
  27. data/lib/protos/command/group.rb +13 -0
  28. data/lib/protos/command/input.rb +44 -0
  29. data/lib/protos/command/item.rb +19 -0
  30. data/lib/protos/command/list.rb +19 -0
  31. data/lib/protos/command/title.rb +19 -0
  32. data/lib/protos/command/trigger.rb +19 -0
  33. data/lib/protos/command.rb +49 -0
  34. data/lib/protos/component.rb +79 -0
  35. data/lib/protos/drawer/content.rb +19 -0
  36. data/lib/protos/drawer/side.rb +25 -0
  37. data/lib/protos/drawer/trigger.rb +21 -0
  38. data/lib/protos/drawer.rb +35 -0
  39. data/lib/protos/dropdown/item.rb +11 -0
  40. data/lib/protos/dropdown/menu.rb +25 -0
  41. data/lib/protos/dropdown/trigger.rb +11 -0
  42. data/lib/protos/dropdown.rb +59 -0
  43. data/lib/protos/engine.rb +7 -0
  44. data/lib/protos/list/item.rb +22 -0
  45. data/lib/protos/list.rb +30 -0
  46. data/lib/protos/modal/close_button.rb +16 -0
  47. data/lib/protos/modal/dialog.rb +30 -0
  48. data/lib/protos/modal/trigger.rb +19 -0
  49. data/lib/protos/modal.rb +31 -0
  50. data/lib/protos/popover/content.rb +19 -0
  51. data/lib/protos/popover/trigger.rb +11 -0
  52. data/lib/protos/popover.rb +54 -0
  53. data/lib/protos/table/body.rb +11 -0
  54. data/lib/protos/table/caption.rb +19 -0
  55. data/lib/protos/table/cell.rb +11 -0
  56. data/lib/protos/table/footer.rb +11 -0
  57. data/lib/protos/table/head.rb +11 -0
  58. data/lib/protos/table/header.rb +11 -0
  59. data/lib/protos/table/row.rb +11 -0
  60. data/lib/protos/table.rb +48 -0
  61. data/lib/protos/theme.rb +76 -0
  62. data/lib/protos/timeline/center.rb +19 -0
  63. data/lib/protos/timeline/item.rb +11 -0
  64. data/lib/protos/timeline/left.rb +19 -0
  65. data/lib/protos/timeline/right.rb +19 -0
  66. data/lib/protos/timeline.rb +38 -0
  67. data/lib/protos/token_list.rb +41 -0
  68. data/lib/protos/types.rb +32 -0
  69. data/lib/protos/typography/heading.rb +44 -0
  70. data/lib/protos/typography/inline_link.rb +24 -0
  71. data/lib/protos/typography/paragraph.rb +22 -0
  72. data/lib/protos/typography.rb +29 -0
  73. data/lib/protos/version.rb +5 -0
  74. data/lib/protos.rb +94 -0
  75. data/protos.gemspec +45 -0
  76. metadata +180 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 396bd8424d9be7d44d3d2ebcd27fb5bbcfb8c06de62a9bb1b8cf01fc50d9214e
4
+ data.tar.gz: f536874ad166bc77a0817199bc62e6f5505865a61beae8c22afad7b4b6b219a7
5
+ SHA512:
6
+ metadata.gz: 158b684976d5124c7e6cb2b779fa85305a42b44a9578ddaf7a6b5960ddecc07da71c96734cd1cd663ee2d9f4f65b14a4a2f1e8493293639dfe15eb5640c22f89
7
+ data.tar.gz: 111f6aca758b7f21cc7a3021448c4d323e13699d40533b43b10fc39a492c7d9a62d48d2a761c57af32b5c3bfd0d6ef7dd32cf9ddc9de22d3bec7f99c54afe449
data/.rspec ADDED
@@ -0,0 +1,3 @@
1
+ --format documentation
2
+ --color
3
+ --require spec_helper
data/.rubocop.yml ADDED
@@ -0,0 +1,12 @@
1
+ require:
2
+ - rubocop-inhouse
3
+
4
+ AllCops:
5
+ TargetRubyVersion: 3.1
6
+
7
+ inherit_gem:
8
+ rubocop-inhouse:
9
+ - config/default.yml
10
+
11
+ Style/ConstantVisibility:
12
+ Enabled: false
data/CHANGELOG.md ADDED
@@ -0,0 +1,5 @@
1
+ ## [Unreleased]
2
+
3
+ ## [0.1.0] - 2024-03-01
4
+
5
+ - Initial release
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2024 Nolan J Tait
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,150 @@
1
+ # Protos
2
+
3
+ A UI component library for Phlex using daisyui.
4
+
5
+ Protos uses a set of conventions that make it easier to work with tailwindcss
6
+ and components in Phlex which you can use by inheriting from the base component.
7
+
8
+ You can find this example in `examples/navbar.rb` which you can run with `ruby
9
+ examples/navbar.rb`:
10
+
11
+ ```ruby
12
+ require "protos"
13
+
14
+ class Navbar < Protos::Component
15
+ def template
16
+ # **attrs will add:
17
+ # - Any html options defined on the component initialization such as data,
18
+ # role, for, etc..
19
+ # - Class will be added to the css[:container] and applied
20
+ header(**attrs) do
21
+ h1(class: css[:heading]) { "Hello world" }
22
+ h2(class: css[:subtitle]) { "With a subtitle" }
23
+ end
24
+ end
25
+
26
+ private
27
+
28
+ def default_attrs
29
+ {
30
+ data: { controller: "navbar" }
31
+ }
32
+ end
33
+
34
+ def theme
35
+ {
36
+ container: tokens(
37
+ "flex",
38
+ "justify-between",
39
+ "items-center",
40
+ "gap-sm"
41
+ ),
42
+ heading: tokens("text-2xl", "font-bold"),
43
+ subtitle: tokens("text-base")
44
+ }
45
+ end
46
+ end
47
+
48
+ component = Navbar.new(
49
+ # This will add to the component's css[:container] slot
50
+ class: "my-sm",
51
+ # This will add the controller and not remove
52
+ # the existing one
53
+ data: { controller: "counter" },
54
+ theme: {
55
+ heading: "p-sm", # We can add tokens
56
+ "!container": "gap-sm" # We can negate (remove) certain tokens
57
+ subtitle!: "text-xl" # We can override the entire slot
58
+ }
59
+ )
60
+
61
+ puts component.call
62
+ ```
63
+
64
+ Which produces the following html:
65
+
66
+ ```html
67
+ <header data-controller="navbar counter" class="flex justify-between items-center my-sm">
68
+ <h1 class="text-2xl font-bold p-sm">Hello world</h1>
69
+ <h2 class="text-xl">With a subtitle</h2>
70
+ </header>
71
+ ```
72
+
73
+ ## Installation
74
+
75
+ Install the gem and add to the application's Gemfile by executing:
76
+
77
+ $ bundle add protos
78
+
79
+ If bundler is not being used to manage dependencies, install the gem by executing:
80
+
81
+ $ gem install protos
82
+
83
+ ## Usage
84
+
85
+ Setup tailwindcss:
86
+
87
+ ```js
88
+ // tailwind.config.js
89
+ // For importing tailwind styles from protos gem
90
+ const execSync = require('child_process').execSync;
91
+ const outputProtos = execSync('bundle show protos', { encoding: 'utf-8' });
92
+ const protos_path = outputProtos.trim() + '/**/*.rb';
93
+
94
+ module.exports = {
95
+ content: [
96
+ "./app/views/**/*.{rb,html,html.erb,erb}",
97
+ protos_path
98
+ ],
99
+ // ....
100
+ }
101
+ ```
102
+
103
+ Add [`protos-stimulus`](https://github.com/inhouse-work/protos-stimulus)
104
+ to your packages:
105
+
106
+ ```
107
+ npm install protos-stimulus
108
+ ```
109
+
110
+ And somewhere in your entrypoints import as a side effect:
111
+
112
+ ```js
113
+ import "protos-stimulus"
114
+ ```
115
+
116
+ Then you can use the components
117
+
118
+ ```ruby
119
+ render Protos::Card.new(class: "bg-base-100") do |card|
120
+ card.body(class: "gap-sm") do
121
+ card.title(class: "font-bold") { "Hello world" }
122
+ span { "This is some more content" }
123
+ card.actions do
124
+ button(class: "btn btn-primary") { "Action 1" }
125
+ end
126
+ end
127
+ end
128
+ ```
129
+
130
+ ## Development
131
+
132
+ After checking out the repo, run `bin/setup` to install dependencies. Then, run
133
+ `rake spec` to run the tests. You can also run `bin/console` for an interactive
134
+ prompt that will allow you to experiment.
135
+
136
+ To install this gem onto your local machine, run `bundle exec rake install`. To
137
+ release a new version, update the version number in `version.rb`, and then run
138
+ `bundle exec rake release`, which will create a git tag for the version, push
139
+ git commits and the created tag, and push the `.gem` file to
140
+ [rubygems.org](https://rubygems.org).
141
+
142
+ ## Contributing
143
+
144
+ Bug reports and pull requests are welcome on GitHub at
145
+ https://github.com/inhouse-work/protos.
146
+
147
+ ## License
148
+
149
+ The gem is available as open source under the terms of the
150
+ [MIT License](https://opensource.org/licenses/MIT).
data/Rakefile ADDED
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "bundler/gem_tasks"
4
+ require "rspec/core/rake_task"
5
+
6
+ RSpec::Core::RakeTask.new(:spec)
7
+
8
+ require "rubocop/rake_task"
9
+
10
+ RuboCop::RakeTask.new
11
+
12
+ task default: %i[spec rubocop]
@@ -0,0 +1,43 @@
1
+ require_relative "../lib/protos"
2
+
3
+ class Navbar < Protos::Component
4
+ def template
5
+ header(**attrs) do
6
+ h1(class: css[:heading]) { "Hello world" }
7
+ h2(class: css[:subtitle]) { "With a subtitle" }
8
+ end
9
+ end
10
+
11
+ private
12
+
13
+ def default_attrs
14
+ {
15
+ data: { controller: "navbar" }
16
+ }
17
+ end
18
+
19
+ def theme
20
+ {
21
+ container: tokens(
22
+ "flex",
23
+ "justify-between",
24
+ "items-center",
25
+ "gap-sm"
26
+ ),
27
+ heading: tokens("text-2xl", "font-bold"),
28
+ subtitle: tokens("text-base")
29
+ }
30
+ end
31
+ end
32
+
33
+ component = Navbar.new(
34
+ class: "my-sm",
35
+ data: { controller: "counter" },
36
+ theme: {
37
+ heading: "p-sm", # We can add tokens
38
+ "!container": "gap-sm", # We can negate (remove) certain tokens
39
+ subtitle!: "text-xl" # We can override the entire slot
40
+ }
41
+ )
42
+
43
+ puts component.call
@@ -0,0 +1,33 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Accordion
5
+ class Item < Component
6
+ option :id, type: Types::Coercible::String
7
+
8
+ def template(&block)
9
+ li(**attrs) do
10
+ render collapse do |_collapse|
11
+ input(type: :radio, name: id, id:)
12
+ yield if block
13
+ end
14
+ end
15
+ end
16
+
17
+ private
18
+
19
+ def collapse
20
+ collapse_theme = { "!container": tokens("bg-base-100") }
21
+ collapse_theme[:container!] = css[:collapse]
22
+
23
+ Collapse.new(theme: collapse_theme.compact)
24
+ end
25
+
26
+ def theme
27
+ {
28
+ container: tokens("join-item")
29
+ }
30
+ end
31
+ end
32
+ end
33
+ end
@@ -0,0 +1,34 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Accordion < Component
5
+ option :id, default: -> { SecureRandom.uuid }
6
+
7
+ def template(&block)
8
+ ul(**attrs, &block)
9
+ end
10
+
11
+ def item(**kwargs)
12
+ Item.new(id:, **kwargs)
13
+ end
14
+
15
+ def title(...)
16
+ Collapse::Title.new(...)
17
+ end
18
+
19
+ def content(...)
20
+ Collapse::Content.new(...)
21
+ end
22
+
23
+ private
24
+
25
+ def theme
26
+ {
27
+ container: tokens(
28
+ "join",
29
+ "join-vertical"
30
+ )
31
+ }
32
+ end
33
+ end
34
+ end
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Alert
5
+ class Actions < Component
6
+ def template(&block)
7
+ nav(**attrs, &block)
8
+ end
9
+
10
+ private
11
+
12
+ def theme
13
+ {
14
+ container: tokens("flex", "gap-xs")
15
+ }
16
+ end
17
+ end
18
+ end
19
+ end
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Alert
5
+ class Icon < Component
6
+ def template(&block)
7
+ div(**attrs, &block)
8
+ end
9
+
10
+ private
11
+
12
+ def theme
13
+ {
14
+ container: tokens("place-self-start", "mt-1")
15
+ }
16
+ end
17
+ end
18
+ end
19
+ end
@@ -0,0 +1,46 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Alert < Component
5
+ AlertTypes = Types::Coercible::Symbol.enum(
6
+ :info,
7
+ :success,
8
+ :warning,
9
+ :error
10
+ )
11
+
12
+ option :type, type: AlertTypes, default: -> { :info }, reader: :private
13
+
14
+ def template(&block)
15
+ div(**attrs, &block)
16
+ end
17
+
18
+ def icon(...)
19
+ Icon.new(...)
20
+ end
21
+
22
+ def actions(...)
23
+ Actions.new(...)
24
+ end
25
+
26
+ private
27
+
28
+ def theme
29
+ {
30
+ container: tokens(
31
+ "alert",
32
+ color
33
+ )
34
+ }
35
+ end
36
+
37
+ def color
38
+ {
39
+ info: "alert-info",
40
+ error: "alert-error",
41
+ warning: "alert-warning",
42
+ success: "alert-success"
43
+ }.fetch(type)
44
+ end
45
+ end
46
+ end
@@ -0,0 +1,42 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Attributes
5
+ def initialize(attrs = {}, **kwargs)
6
+ @attrs = attrs.merge(kwargs)
7
+ end
8
+
9
+ def [](key)
10
+ @attrs[key]
11
+ end
12
+
13
+ def merge(hash)
14
+ tap do
15
+ @attrs = mix(@attrs, hash)
16
+ end
17
+ end
18
+
19
+ # Allows for the use of the `**` operator to pass the attributes to
20
+ # a method.
21
+ def to_hash
22
+ @attrs
23
+ end
24
+
25
+ private
26
+
27
+ def mix(*hashes)
28
+ hashes.each_with_object({}).each do |hash, result|
29
+ hash ||= {}
30
+
31
+ result.merge!(hash) do |_key, a, b| # rubocop:disable Metrics/ParameterLists
32
+ case [a, b]
33
+ in String, String then "#{a} #{b}"
34
+ in Array, Array then a + b
35
+ in Hash, Hash then mix(a, b)
36
+ else b
37
+ end
38
+ end
39
+ end
40
+ end
41
+ end
42
+ end
@@ -0,0 +1,71 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Avatar < Component
5
+ IndicatorTypes = Types::Coercible::Symbol.enum(:none, :online, :offline)
6
+
7
+ option :placeholder, type: Types::Bool, default: -> { false }
8
+ option :indicator,
9
+ type: IndicatorTypes,
10
+ default: -> { :none },
11
+ reader: false
12
+ option :shape,
13
+ type: Types::MaskShapes,
14
+ default: -> { :none },
15
+ reader: false
16
+
17
+ def template(&block)
18
+ div(**attrs) do
19
+ div(class: css[:figure], &block)
20
+ end
21
+ end
22
+
23
+ private
24
+
25
+ def indicator
26
+ {
27
+ none: "",
28
+ online: "online",
29
+ offline: "offline"
30
+ }.fetch(@indicator)
31
+ end
32
+
33
+ def shape
34
+ {
35
+ none: "",
36
+ squircle: "mask mask-squircle",
37
+ heart: "mask mask-heart",
38
+ hexagon: "mask mask-hexagon",
39
+ hexagon2: "mask mask-hexagon-2",
40
+ decagon: "mask mask-decagon",
41
+ pentagon: "mask mask-pentagon",
42
+ diamond: "mask mask-diamond",
43
+ square: "mask mask-square",
44
+ circle: "mask mask-circle",
45
+ parallelogram: "mask mask-parallelogram",
46
+ parallelogram2: "mask mask-parallelogram-2",
47
+ parallelogram3: "mask mask-parallelogram-3",
48
+ parallelogram4: "mask mask-parallelogram-4",
49
+ star: "mask mask-star",
50
+ star2: "mask mask-star-2",
51
+ triangle: "mask mask-triangle",
52
+ triangle2: "mask mask-triangle-2",
53
+ triangle3: "mask mask-triangle-3",
54
+ triangle4: "mask mask-triangle-4",
55
+ half1: "mask mask-half-1",
56
+ half2: "mask mask-half-2"
57
+ }.fetch(@shape)
58
+ end
59
+
60
+ def theme
61
+ {
62
+ container: tokens(
63
+ "avatar",
64
+ indicator,
65
+ placeholder: "placeholder"
66
+ ),
67
+ figure: tokens(shape)
68
+ }
69
+ end
70
+ end
71
+ end
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Card
5
+ class Actions < Component
6
+ def template(&block)
7
+ nav(**attrs, &block)
8
+ end
9
+
10
+ private
11
+
12
+ def theme
13
+ {
14
+ container: tokens("card-actions")
15
+ }
16
+ end
17
+ end
18
+ end
19
+ end
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Card
5
+ class Body < Component
6
+ def template(&block)
7
+ div(**attrs, &block)
8
+ end
9
+
10
+ private
11
+
12
+ def theme
13
+ {
14
+ container: tokens("card-body")
15
+ }
16
+ end
17
+ end
18
+ end
19
+ end
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Card
5
+ class Image < Component
6
+ def template(&block)
7
+ figure(**attrs, &block)
8
+ end
9
+ end
10
+ end
11
+ end
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Card
5
+ class Title < Component
6
+ def template(&block)
7
+ div(**attrs, &block)
8
+ end
9
+
10
+ private
11
+
12
+ def theme
13
+ {
14
+ container: tokens("card-title")
15
+ }
16
+ end
17
+ end
18
+ end
19
+ end
@@ -0,0 +1,55 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Card < Component
5
+ ImageDisplayTypes = Types::Coercible::Symbol.enum(:default, :overlay, :side)
6
+
7
+ option :border, type: Types::Bool, default: -> { true }, reader: :private
8
+ option :compact, type: Types::Bool, default: -> { false }, reader: :private
9
+ option :image_display,
10
+ ImageDisplayTypes,
11
+ default: -> { :default },
12
+ reader: false
13
+
14
+ def template(&block)
15
+ article(**attrs, &block)
16
+ end
17
+
18
+ def body(...)
19
+ Body.new(...)
20
+ end
21
+
22
+ def image(...)
23
+ Image.new(...)
24
+ end
25
+
26
+ def title(...)
27
+ Title.new(...)
28
+ end
29
+
30
+ def actions(...)
31
+ Actions.new(...)
32
+ end
33
+
34
+ private
35
+
36
+ def image_display
37
+ {
38
+ default: "",
39
+ overlay: "image-full",
40
+ side: "card-side"
41
+ }.fetch(@image_display)
42
+ end
43
+
44
+ def theme
45
+ {
46
+ container: tokens(
47
+ "card",
48
+ image_display,
49
+ border: "card-bordered",
50
+ compact: "card-compact"
51
+ )
52
+ }
53
+ end
54
+ end
55
+ end
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Protos
4
+ class Collapse
5
+ class Content < Component
6
+ def template(&block)
7
+ div(**attrs, &block)
8
+ end
9
+
10
+ private
11
+
12
+ def theme
13
+ {
14
+ container: tokens("collapse-content")
15
+ }
16
+ end
17
+ end
18
+ end
19
+ end