innoq-ui-components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e9eaaac4837558420ad1cfef85a9897ba005224ad68017128e0f33475012af12
+  data.tar.gz: bde213cda510475b42b80dfd59154bcdd481e2fe8ef6cc34d7288bafda8d58d4
+SHA512:
+  metadata.gz: 33a4264d0065263c3fe099fe7b656f377270fec6710c1913cd3e3b0e61f04cf5de8364dd5ba7c0267036472a4ebd68b46ecef64c4de7173457611e2c28ccdf75
+  data.tar.gz: bf3bcf825469df6bf6f87f9e6e6aa3ec304dbd57335a6d80e62835129a16545db4d9820f4b870cedb506299caf46f1484426e3758f86c9a3a28c21b79a864344

data/README.md

@@ -0,0 +1,33 @@
+# Example Project for Software Architecture Summit
+
+Example project for [our talk at Software Architecture
+Summit](https://software-architecture-summit.de/softwarearchitektur/moderne-frontend-entwicklung/).
+The main objective is to show component-based development. We will also show
+some of our favorite tools:
+
+* complate
+* faucet
+* aiur
+* eslint
+* stylelint
+* prettier
+* tabelle
+* Custom Elements
+
+## Setup
+
+[Install Node.js](https://nodejs.org/en/download/)
+
+In this directory run:
+
+```
+npm i
+```
+
+Now you need to run:
+
+```
+npm start
+```
+
+Visit http://localhost:3000 to visit the app, and http://localhost:4001 to visit the pattern library.

data/Rakefile

@@ -0,0 +1,27 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Innoq::Ui::Components'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/components/amount/rails_helper.rb

@@ -0,0 +1,8 @@
+module ComponentHelper
+
+  def amount_tag(amount, currency:, locale: I18n.locale)
+    content_tag :span, amount, class: 'amount', data: {currency: currency}
+  end
+  
+end
+

data/app/components/button-group/rails_helper.rb

@@ -0,0 +1,5 @@
+module ComponentHelper
+  def button_group_tag(*args, &block)
+    content_tag :div, class: 'button-group', &block
+  end
+end

data/app/components/icon/rails_helper.rb

@@ -0,0 +1,5 @@
+module ComponentHelper
+  def icon_tag(symbol)
+    content_tag :span, '', class: "icon icon-#{symbol}", role: 'presentation'
+  end
+end

data/app/components/main-layout/rails_helper.rb

@@ -0,0 +1,8 @@
+module ComponentHelper
+
+  def main_layout_tag(*args, &block)
+    content_tag :main, class: 'main-layout', &block
+  end
+
+end
+

data/app/components/navbar/rails_helper.rb

@@ -0,0 +1,36 @@
+# require '../icon/rails_helper', __file__
+
+module ComponentHelper
+
+  def navbar_layout_tag(*args, &block)
+    content_tag :div, class: 'navbar-layout', &block
+  end
+
+  def navbar_tag(*args, &block)
+    content_tag :nav, class: 'navbar', &block
+  end
+
+  def secondary_navbar_tag(*args, &block)
+    content_tag :nav, class: 'secondary-navbar', &block
+  end
+
+  # NOTE: this differs in nearly all conceivable ways from the JSX version.
+  def navbar_item_tag(href, current: false, symbol:, label:, &block)
+    link_to href, class: "navbar-item #{'current' if current}" do
+      raw <<~EOS
+        <div class="symbol">#{icon_tag symbol}</div>
+        <div class="label">#{label}</div>
+      EOS
+    end
+  end
+
+  # NOTE: this differs in nearly all conceivable ways from the JSX version.
+  def navbar_brand_tag(href, symbol:, label:, &block)
+    link_to href, class: 'navbar-item brand' do
+      raw <<~EOS
+        <div class="symbol">#{icon_tag symbol}</div>
+        <div class="label">#{label}</div>
+      EOS
+    end
+  end
+end

data/app/components/page-category/rails_helper.rb

@@ -0,0 +1,7 @@
+module ComponentHelper
+
+  def page_category_tag(name, &block)
+    content_tag :div, name, class: 'page-category', &block
+  end
+end
+

data/app/components/progress-bar/rails_helper.rb

@@ -0,0 +1,13 @@
+module ComponentHelper
+
+  def progress_bar_tag(value:, max:, modifier: nil)
+    label = yield if block_given?
+    label ||= value / max unless max == 0
+    label ||= '0'
+
+    label_tag class: "progress-bar #{modifier}" do
+      content_tag :progress, label, value: value, max: max
+    end
+  end
+
+end

data/app/components/squishable/rails_helper.rb

@@ -0,0 +1,8 @@
+module ComponentHelper
+
+  def squishable_tag(label, short, squish_at: nil)
+    squish = squish_at || "#{label.length}ch"
+
+    content_tag :span, label, class: 'squishable', 'aria-label': label, data: {short: short}, style: "--squish-at: #{squish}"
+  end
+end

data/app/components/tabelle-toggler/rails_helper.rb

@@ -0,0 +1,14 @@
+
+module ComponentHelper
+  def tabelle_toggler_tag(expanded, label_expand:, label_collapse:)
+    button_tag is: 'tabelle-toggler', hidden: true, 'aria-expanded': (expanded ? 'true' : 'false') do
+      content_tag :span, class: 'expand', title: label_expand do
+        content_tag :span, label_expand, class: 'sr-only'
+      end
+
+      content_tag :span, class: 'collapse', title: label_collapse do
+        content_tag :span, label_collapse, class: 'sr-only'
+      end
+    end
+  end
+end

data/app/components/tabelle/rails_helper.rb

@@ -0,0 +1,45 @@
+# require '../squishable/rails_helper', __file__
+
+module ComponentHelper
+
+  # TODO: I18n for labels
+  def tabelle_arrows_tag(name, label, sorted)
+    raw <<~EOS
+      <input class="tabelle-arrow" id="#{name}_asc" type="radio" name="sort" value="#{name}_asc" checked=#{sorted == 'asc'} />
+      <label class="tabelle-arrow--asc" for="#{name}_asc">
+        <span class="sr-only">Sort #{label} Ascending</span>
+      </label>
+
+      <input class="tabelle-arrow" id="#{name}_desc" type="radio" name="sort" value="#{name}_desc" checked=#{sorted == 'desc'} />
+      <label class="tabelle-arrow--desc" for="#{name}_desc">
+        <span class="sr-only">Sort #{label} Descending</span>
+      </label>
+    EOS
+  end
+
+  # TODO: I18n for labels
+  def tabelle_filter_tag(name, label, value)
+    text_field name, class: 'tabelle-input', value: value, 'aria-label': "Filter #{label}"
+  end
+
+  def tabelle_header_tag(name, label:, short_label: nil, value: nil, sorted: false)
+    header = short_label ? squishable_tag(label, short_label) : label
+
+    raw <<~EOS
+      <th scope="col" role="columnheader" aria-label=#{label}>
+        <div class="tabelle-header">
+          <span class="header #{'truncatable' if short_label}" id="#{name}_group" aria-hidden="true">#{raw header}</span>
+          #{raw tabelle_arrows_tag name, label, sorted}
+          #{raw tabelle_filter_tag name, label, value}
+        </div>
+      </th>
+    EOS
+  end
+
+  def tabelle_tag(id: 'TabelleId', action:, &block)
+    content_tag 'ta-belle', id: id, 'change-uri': true do
+      form_tag method: :get, url: action, &block
+    end
+  end
+end
+

data/app/components/table-responsive/rails_helper.rb

@@ -0,0 +1,32 @@
+# require "../tabelle-toggler/rails_helper", __file__
+
+module ComponentHelper
+  def thead_tag(*args, &block)
+    content_tag :thead, role: 'rowgroup', &block
+  end
+
+  def tbody_tag(*args, &block)
+    content_tag :tbody, role: 'rowgroup', &block
+  end
+
+  def tr_tag(*args, &block)
+    content_tag :tr, role: 'row', &block
+  end
+
+  def td_tag(column:, modifier: nil, &block)
+    content_tag :td, role: 'cell', class: modifier, data: {column: column}, &block
+  end
+
+  def collapser_th_tag(label, *args)
+    content_tag :th, class: 'table-toggler-cell', scope: 'col', role: 'columnheader' do
+      content_tag :span, label, class: 'sr-only'
+    end
+  end
+
+  def collapser_td_tag(expanded, label_expand:, label_collapse:)
+    content_tag :td, class: 'table-toggler-cell', role: 'cell' do
+      tabelle_toggler_tag expanded, label_expand: label_expand, label_collapse: label_collapse
+    end
+  end
+
+end

data/app/components/table/rails_helper.rb

@@ -0,0 +1,8 @@
+module ComponentHelper
+
+  def table_tag(responsive: false, &block)
+    content_tag :table, class: "table #{'table-responsive' if responsive}", role: 'table', &block
+  end
+
+end
+

data/app/helpers/component_helper.rb

@@ -0,0 +1,3 @@
+module ComponentHelper
+
+end

data/lib/innoq/ui/components.rb

@@ -0,0 +1,9 @@
+require "innoq/ui/components/railtie"
+
+module Innoq
+  module Ui
+    module Components
+      # Your code goes here...
+    end
+  end
+end

data/lib/innoq/ui/components/helper.rb

@@ -0,0 +1,19 @@
+$:.push File.expand_path("../../../../app", __dir__)
+
+%w(amount button-group icon main-layout page-category navbar progress-bar squishable tabelle tabelle-toggler table table-responsive).each do |component|
+#   puts "Trying to load component #{component}"
+  require "components/#{component}/rails_helper"
+end
+
+puts "loaded all components."
+
+module Innoq
+  module Ui
+    module Components
+      module Helper
+
+      end
+    end
+  end
+end
+

data/lib/innoq/ui/components/railtie.rb

@@ -0,0 +1,8 @@
+module Innoq
+  module Ui
+    module Components
+      class Railtie < ::Rails::Railtie
+      end
+    end
+  end
+end

data/lib/innoq/ui/components/version.rb

@@ -0,0 +1,7 @@
+module Innoq
+  module Ui
+    module Components
+      VERSION = '0.1.0'
+    end
+  end
+end

metadata

@@ -0,0 +1,77 @@
+--- !ruby/object:Gem::Specification
+name: innoq-ui-components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Willem van Kerkhof
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-03-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+description: innoQ UI components for use in internal applications
+email:
+- wvk@innoq.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- Rakefile
+- app/components/amount/rails_helper.rb
+- app/components/button-group/rails_helper.rb
+- app/components/icon/rails_helper.rb
+- app/components/main-layout/rails_helper.rb
+- app/components/navbar/rails_helper.rb
+- app/components/page-category/rails_helper.rb
+- app/components/progress-bar/rails_helper.rb
+- app/components/squishable/rails_helper.rb
+- app/components/tabelle-toggler/rails_helper.rb
+- app/components/tabelle/rails_helper.rb
+- app/components/table-responsive/rails_helper.rb
+- app/components/table/rails_helper.rb
+- app/helpers/component_helper.rb
+- lib/innoq/ui/components.rb
+- lib/innoq/ui/components/helper.rb
+- lib/innoq/ui/components/railtie.rb
+- lib/innoq/ui/components/version.rb
+homepage: https://innoq.com
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.7.7
+signing_key: 
+specification_version: 4
+summary: Collection of innoQ UI components
+test_files: []