organism-ui 0.2.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3065e937e87ba2c40e0b8a30d1c57402330b7c4452faea8d6220e7188906d2fd
+  data.tar.gz: 30cee7eb57cc13b3002c328465c215040e9dbff0e8a86d915005200c46305352
+SHA512:
+  metadata.gz: 2c314d87dc4192fd479015a1b6ae10ad238bb4e5a22b19c5d7a9fb5d31d6b16bd801dff97dbd26743b5931159dd6a3f92e88e3f3116d66a1860451c31bfda36a
+  data.tar.gz: db8edc5cc1a98bb8deb6da1eae88b000d14211d561a47492d221eacbfd474e773e3ea267b71861d523db95b11739fa52ae0c7e83c87b3bce530a462e53ec0dcf

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2020 Nolan 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,28 @@
+# Ui
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'ui'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install ui
+```
+
+## Contributing
+Contribution directions go here.
+
+## 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,35 @@
+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    = 'Ui'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
+
+require 'rspec/core'
+
+require 'rspec/core/rake_task'
+
+desc "Run all specs in spec directory (excluding plugin specs)"
+
+RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
+
+
+task :default => :spec

data/app/assets/config/ui_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/ui .css

data/app/assets/stylesheets/ui/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/controllers/ui/application_controller.rb

@@ -0,0 +1,7 @@
+module Ui
+  class ApplicationController < ::ApplicationController
+    layout 'application'
+
+    protect_from_forgery with: :exception
+  end
+end

data/app/controllers/ui/style_guide_controller.rb

@@ -0,0 +1,8 @@
+module Ui
+  class StyleGuideController < ApplicationController
+    protect_from_forgery with: :exception
+
+    def show
+    end
+  end
+end

data/app/helpers/ui/application_helper.rb

@@ -0,0 +1,4 @@
+module Ui
+  module ApplicationHelper
+  end
+end

data/app/javascript/ui/application.js

@@ -0,0 +1 @@
+alert('hello')

data/app/jobs/ui/application_job.rb

@@ -0,0 +1,4 @@
+module Ui
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/ui/application_mailer.rb

@@ -0,0 +1,6 @@
+module Ui
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/ui/application_record.rb

@@ -0,0 +1,5 @@
+module Ui
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/ui/style_guide/show.html.erb

@@ -0,0 +1,1035 @@
+<div class="style-guide-container">
+  <aside class="style-guide-sidebar">
+    <section>
+      <header>
+        <h5><a href="#buttons">Buttons</a></h5>
+      </header>
+      <nav>
+        <%= link_to 'Type', '#type' %>
+      </nav>
+    </section>
+  </aside>
+
+  <article class="style-guide">
+    <article class="style-guide__section" id="buttons">
+      <header>
+        <h1>Buttons</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Type</h2>
+        </header>
+
+        <%= cell(
+          Ui::Buttons::Primary,
+          'Primary Button',
+          path: '/'
+        ) %>
+        <%= cell(
+          Ui::Buttons::Secondary,
+          'Secondary Button',
+          path: '/'
+        ) %>
+        <%= cell(
+          Ui::Buttons::Tertiary,
+          'Tertiary Button',
+          path: '/'
+        ) %>
+      </section>
+
+      <section class="style-guide__example">
+        <header>
+          <h2>Icons</h2>
+        </header>
+
+        <%= cell(
+          Ui::Buttons::Primary,
+          'Primary Button',
+          path: '/'
+        ).call(:new) %>
+        <%= cell(
+          Ui::Buttons::Secondary,
+          'Secondary Button',
+          path: '/'
+        ).call(:edit) %>
+        <%= cell(
+          Ui::Buttons::Tertiary,
+          'Tertiary Button',
+          path: '/'
+        ).call(:destroy) %>
+      </section>
+
+      <section class="style-guide__example">
+        <header>
+          <h2>Sizes</h2>
+        </header>
+
+        <%= cell(
+          Ui::Buttons::Primary,
+          'Large Button',
+          path: '/'
+        ).call(:new) %>
+        <%= cell(
+          Ui::Buttons::Secondary,
+          'Small Button',
+          path: '/',
+          style: 'button--small'
+        ).call(:edit) %>
+      </section>
+
+      <section class="style-guide__example">
+        <header>
+          <h2>Disabled</h2>
+        </header>
+
+        <%= cell(
+          Ui::Buttons::Primary,
+          'Primary Disabled',
+          path: '/',
+          disabled: true
+        ).call(:new) %>
+        <%= cell(
+          Ui::Buttons::Secondary,
+          'Secondary Disabled',
+          path: '/',
+          disabled: true
+        ).call(:edit) %>
+        <%= cell(
+          Ui::Buttons::Tertiary,
+          'Tertiary Disabled',
+          path: '/',
+          disabled: true
+        ).call(:edit) %>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="typography">
+      <header>
+        <h1>Typography</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Sizes</h2>
+        </header>
+
+        <div class="space-y-4">
+          <div class="font-bold space-y-4">
+            <h1>h1. Tait Ventures</h1>
+            <h2>h2. Tait Ventures</h2>
+            <h3>h3. Tait Ventures</h3>
+            <h4>h4. Tait Ventures</h4>
+            <h5>h5. Tait Ventures</h5>
+          </div>
+          <p>p. Tait Ventures</p>
+          <small>small. Tait Ventures</small>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Breadcrumbs</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Breadcrumbs,
+            [
+              Ui::Breadcrumbs::Crumb.new(name: 'Home', icon: 'fas fa-home'),
+              Ui::Breadcrumbs::Crumb.new(name: 'Application Center',),
+              Ui::Breadcrumbs::Crumb.new(name: 'Application List'),
+              Ui::Breadcrumbs::Crumb.new(name: 'An Application', current: true)
+            ]
+          ) %>
+
+          <%= cell(
+            Ui::Breadcrumbs,
+            [
+              Ui::Breadcrumbs::Crumb.new(name: 'Home', icon: 'fas fa-home'),
+              Ui::Breadcrumbs::Crumb.new(name: 'Application Center',),
+              Ui::Breadcrumbs::Crumb.new(name: 'Application List'),
+              Ui::Breadcrumbs::Crumb.new(name: 'An Application', current: true)
+            ],
+            delimiter: content_tag(:span, '/', class: 'breadcrumb-delimiter')
+          ) %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Page Header</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::PageHeader,
+            'Title',
+            subheading: 'This is a subtitle',
+            back: '#'
+          ) %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Breadcrumbs</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::PageHeader,
+            'Title',
+            subheading: 'This is a subtitle',
+            back: '#',
+            breadcrumbs: cell(
+              Ui::Breadcrumbs,
+              [
+                Ui::Breadcrumbs::Crumb.new(
+                  name: 'First level',
+                ),
+                Ui::Breadcrumbs::Crumb.new(
+                  name: 'Second level',
+                ),
+                Ui::Breadcrumbs::Crumb.new(
+                  name: 'Third level',
+                  current: true
+                )
+              ]
+            ),
+          ) %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Actions</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::PageHeader,
+            'Title',
+            subheading: 'This is a subtitle',
+            back: '#',
+            actions: [
+              ->(_) {
+                cell(
+                  Ui::Buttons::Primary,
+                  'Primary',
+                  path: '#',
+                  size: :small,
+                  icon: 'fas fa-bullseye'
+                )
+              },
+              ->(_) {
+                cell(
+                  Ui::Buttons::Secondary,
+                  'Operation',
+                  path: '#',
+                  size: :small
+                )
+              }
+            ]
+          ) %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Extra Content</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::PageHeader,
+            'Title',
+            subheading: 'This is a subtitle',
+            back: '#',
+          ).() do
+            content_tag(:section) do
+              content_tag(:p, 'This is some extra content.') +
+              content_tag(:p, 'You can put anything you want here.')
+            end
+          end %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Dropdowns</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Clickable</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Dropdown,
+            cell(
+              Ui::Menu,
+              [
+                content_tag(:p, 'Item 1'),
+                content_tag(:p, 'Item 2'),
+                [
+                  content_tag(:p, 'Submenu'),
+                  [
+                    content_tag(:p, 'Submenu item 1'),
+                    [
+                      content_tag(:p, 'Submenu item 2'),
+                      [
+                        content_tag(:p, 'Sub submenu item 1'),
+                      ]
+                    ]
+                  ]
+                ]
+              ],
+              header: 'Items',
+              style: 'w-64'
+            ).(),
+            mode: 'click'
+          ).() do
+            cell(
+              Ui::Buttons::Primary,
+              'Click me',
+              icon: 'fas fa-caret-down',
+            ).()
+          end %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Hoverable</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Dropdown,
+            cell(
+              Ui::Menu,
+              [
+                content_tag(:p, 'Item 1'),
+                content_tag(:p, 'Item 2')
+              ]
+            ).(),
+            mode: 'hover'
+          ).() do
+            cell(
+              Ui::Buttons::Primary,
+              'Hover me',
+              icon: 'fas fa-caret-down',
+            ).()
+          end %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Pagination</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Pagination,
+            (1..100).map do |i|
+              "/links?page=#{i}"
+            end,
+            current_path: '/links?page=1',
+            window_size: 5
+          ) %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Steps</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Horizontal</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Steps,
+            [
+              {
+                title: 'First step',
+                status: 'finished',
+                icon: 'fas fa-home',
+                description: 'My second step description'
+              },
+              {
+                title: 'Second step',
+                subtitle: 'ETA 5 minutes',
+                status: 'processing',
+                description: 'My second step description'
+              },
+              {
+                title: 'Last step',
+                status: 'waiting',
+              },
+            ],
+            current_step: 1
+          ) %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Vertical</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Steps,
+            [
+              {
+                title: 'Wake up',
+                status: 'finished',
+                icon: 'fas fa-home',
+                description: 'You finished the first step'
+              },
+              {
+                title: 'Get money',
+                subtitle: 'Error',
+                status: 'error',
+                description: 'Something has caused an error'
+              },
+              {
+                title: 'Go to sleep',
+                status: 'waiting',
+              },
+            ],
+            current_step: 1,
+            direction: 'vertical'
+          ) %>
+        </div>
+      </section>
+
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Wizard</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Wizard,
+            [
+              {
+                title: 'First step',
+                status: 'finished',
+                icon: 'fas fa-home',
+                description: 'My second step description',
+                content: content_tag(:p, 'First content')
+              },
+              {
+                title: 'Second step',
+                subtitle: 'ETA 5 minutes',
+                status: 'processing',
+                description: 'My second step description',
+                content: content_tag(:p, 'Second content')
+              },
+              {
+                title: 'Last step',
+                status: 'waiting',
+                content: content_tag(:p, 'Last content')
+              },
+            ],
+            current_step: 1,
+            finish: cell(
+              Ui::Buttons::Primary,
+              'Finish',
+              icon: 'fas fa-bullseye',
+              path: '#'
+            )
+          ) %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Cards</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Card,
+            'Some card',
+            extra: link_to('More', '#', class: 'text-primary'),
+            style: 'w-96'
+          ).() do
+            content_tag(:p, 'With some content')
+          end %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Extras</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Card,
+            nil,
+            cover: 'https://images.unsplash.com/photo-1615068501918-9d862e1908df?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
+            style: 'w-96',
+            actions: [
+              ->(_) {
+                cell(
+                  Ui::Buttons::Tertiary,
+                  nil,
+                  icon: 'fas fa-plus',
+                  path: '#'
+                )
+              },
+              ->(_) {
+                cell(
+                  Ui::Buttons::Tertiary,
+                  nil,
+                  icon: 'fas fa-edit',
+                  path: '#'
+                )
+              },
+              ->(_) {
+                cell(
+                  Ui::Buttons::Tertiary,
+                  nil,
+                  icon: 'fas fa-ellipsis-h',
+                  path: '#'
+                )
+              },
+            ]
+          ).() do
+            content_tag(:div, class: 'space-y-2') do
+              content_tag(:p, 'Some card title', class: 'text-lg') +
+              content_tag(:p, 'Some card description')
+            end
+          end %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Descriptive Lists</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::DescriptiveList,
+            [
+              ["Name", "John Doe"],
+              ["Phone number", "778-212-2322"],
+              ["Street address", "1233 Fake Street"],
+              ["Status", ->() { content_tag(:i, nil, class: 'fas fa-ellipsis-h') }],
+              ["Income", "$2,300/month"],
+              ["Goal", "Stack paper"],
+            ],
+            title: 'Horizontal orientation',
+            direction: 'horizontal',
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Vertical</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::DescriptiveList,
+            [
+              ["Name", "John Doe"],
+              ["Phone number", "778-212-2322"],
+              ["Street address", "1233 Fake Street"],
+              ["Status", ->() { content_tag(:i, nil, class: 'fas fa-ellipsis-h') }],
+              ["Income", "$2,300/month"],
+              ["Goal", "Stack paper"],
+            ],
+            title: 'Vertical orientation',
+            direction: 'vertical',
+            actions: [
+              ->(_) {
+                cell(
+                  Ui::Buttons::Primary,
+                  'Edit',
+                  path: '#',
+                  size: :small
+                ).call(:edit)
+              }
+            ]
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Lists</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::List,
+            [
+              "Item 1",
+              "Item 2",
+              "Item 3",
+              "Item 4"
+            ],
+            header: 'My list title',
+            footer: 'My list footer',
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Custom Renderable</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::List,
+            [
+              "Item 1",
+              "Item 2",
+              "Item 3",
+              "Item 4"
+            ],
+            header: 'My list title',
+            footer: content_tag(
+              :div,
+              cell(
+                Ui::Pagination,
+                [
+                  '/links',
+                  '/links?page=2',
+                  '/links?page=3',
+                  '/links?page=4'
+                ],
+                current_path: '/links?page=2'
+              ),
+              class: 'ml-auto'
+            ),
+            style: "border",
+            actions: [
+              ->(_) {
+                cell(
+                  Ui::Buttons::Primary,
+                  'Start',
+                  path: '#',
+                  icon: 'fas fa-bullseye',
+                  size: :small
+                ).()
+              }
+            ],
+            renderable: ->(item) {
+              content_tag(
+                :div,
+                [
+                  content_tag(:p, item),
+                  content_tag(
+                    :nav,
+                    cell(
+                      Ui::Buttons::Tertiary,
+                      'Edit',
+                      path: '#',
+                      size: :small
+                    ).call(:edit)
+                  )
+                ].join(' ').html_safe,
+                class: 'flex flex-row justify-between items-center p-4'
+              )
+            }
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Tables</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Table,
+            [
+              "Data 1",
+              "Data 2",
+              "Data 3",
+            ],
+            columns: [
+              ["Column 1", ->(data) { data } ],
+              ["Column 2", ->(data) { "Column 2 data" } ],
+              ["Column 3", ->(data) { "Column 3 data" } ],
+              ["Actions", ->(data) { cell(Ui::Buttons::Tertiary, 'More')} ],
+            ],
+            header: 'My title',
+            style: 'my-style'
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Selectable</h2>
+        </header>
+
+        <div class="space-y-8">
+          <%= cell(
+            Ui::Table,
+            [
+              "Data 1",
+              "Data 2",
+              "Data 3",
+            ],
+            columns: [
+              ["Column 1", ->(data) { data } ],
+              ["Column 2", ->(data) { "Column 2 data" } ],
+              ["Column 3", ->(data) { "Column 3 data" } ],
+              ["Actions", ->(data) { cell(Ui::Buttons::Tertiary, 'More')} ],
+            ],
+            header: 'Multi select',
+            style: 'my-style',
+            features: {
+              selectable: {
+                multiple: true
+              }
+            }
+          ).() %>
+
+          <%= cell(
+            Ui::Table,
+            [
+              "Data 1",
+              "Data 2",
+              "Data 3",
+            ],
+            columns: [
+              ["Column 1", ->(data) { data } ],
+              ["Column 2", ->(data) { "Column 2 data" } ],
+              ["Column 3", ->(data) { "Column 3 data" } ],
+              ["Actions", ->(data) { cell(Ui::Buttons::Tertiary, 'More')} ],
+            ],
+            header: 'Single select',
+            style: 'my-style',
+            features: {
+              selectable: {
+                multiple: false
+              }
+            }
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Sortable</h2>
+        </header>
+
+        <div class="space-y-8">
+          <%= cell(
+            Ui::Table,
+            [
+              "Data 1",
+              "Data 2",
+              "Data 3",
+            ],
+            columns: [
+              ["Column 1", ->(data) { data } ],
+              ["Column 2", ->(data) { "Column 2 data" } ],
+              ["Column 3", ->(data) { "Column 3 data" } ],
+              ["Actions", ->(data) { cell(Ui::Buttons::Tertiary, 'More')} ],
+            ],
+            header: 'Multi select',
+            style: 'my-style',
+            features: {
+              selectable: {
+                multiple: true,
+              },
+              sortable: {
+                input_name: 'object[position]',
+                update_url: '#',
+                handle: 'fas fa-bars'
+              }
+            }
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Empty</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Empty,
+            nil,
+            caption: 'My title',
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Image</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Empty,
+            nil,
+            caption: content_tag(:p, 'My title', class: 'text-lg'),
+            image: 'https://upload.wikimedia.org/wikipedia/commons/f/f3/Hubble_Ultra_Deep_Field_part_d.jpg',
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Action</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Empty,
+            nil,
+            caption: content_tag(:p, 'My title', class: 'text-lg'),
+            icon: 'fas fa-inbox fa-5x text-gray-400',
+            actions: [
+              ->(_) {
+                cell(
+                  Ui::Buttons::Primary,
+                  'Click me'
+                ).()
+              }
+            ]
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Table</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Table,
+            [],
+            columns: [
+              ["Column 1", ->(data) { data } ],
+              ["Column 2", ->(data) { "Column 2 data" } ],
+              ["Column 3", ->(data) { "Column 3 data" } ],
+              ["Actions", ->(data) { cell(Ui::Buttons::Tertiary, 'More')} ],
+            ],
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>List</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::List,
+            [],
+            header: 'My list',
+            footer: 'My list footer',
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Collapse</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Collapse,
+            [
+              ["Panel #1", "Chaos theory is a branch of mathematics focusing on the study of chaos — dynamical systems whose apparently random states of disorder and irregularities are actually governed by underlying patterns and deterministic laws that are highly sensitive to initial conditions."],
+              ["Panel #2", "Chaos theory is a branch of mathematics focusing on the study of chaos — dynamical systems whose apparently random states of disorder and irregularities are actually governed by underlying patterns and deterministic laws that are highly sensitive to initial conditions."]
+            ],
+            style: 'my-style'
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Tooltip</h1>
+      </header>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Hover</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Buttons::Primary,
+            'Hover me',
+            layout: Ui::Tooltip,
+            context: {
+              tooltip: {
+                content: ->() { content_tag(:p, 'This is an example of a tooltip.') },
+                header: ->() { content_tag(:p, 'Tooltip header', class: 'whitespace-nowrap') },
+              }
+            }
+          ).() %>
+        </div>
+      </section>
+
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Click</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Buttons::Primary,
+            'Click me',
+            layout: Ui::Tooltip,
+            context: {
+              tooltip: {
+                content: ->() { content_tag(:p, 'This is an example of a tooltip.') },
+                header: ->() { content_tag(:p, 'Tooltip header', class: 'whitespace-nowrap') },
+                mode: 'click'
+              }
+            }
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+    <article class="style-guide__section" id="breadcrumbs">
+      <header>
+        <h1>Notifications</h1>
+      </header>
+
+      <section class="style-guide__example relative" id="type">
+        <header>
+          <h2>Basic</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Notification,
+            content_tag(
+              :header,
+              content_tag(:h3, 'My title', class: 'font-bold') +
+              content_tag(:p, 'This is a notification with some text', class: 'text-gray-500'),
+              class: 'space-y-2'
+            ),
+          ).() %>
+        </div>
+      </section>
+
+
+      <section class="style-guide__example relative" id="type">
+        <header>
+          <h2>Actions</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Notification,
+            content_tag(
+              :header,
+              content_tag(:h3, 'My title', class: 'font-bold') +
+              content_tag(:p, 'This is a notification with some text', class: 'text-gray-500'),
+              class: 'space-y-2'
+            ),
+            icon: 'fas fa-check-circle fa-lg text-green-500',
+            actions: [
+              ->(_) {
+                cell(
+                  Ui::Buttons::Primary,
+                  'Do something',
+                  size: :small,
+                  icon: 'fas fa-bullseye'
+                )
+              }
+            ]
+          ).() %>
+        </div>
+      </section>
+    </article>
+
+  </article>
+</div>