amber_component 0.0.4 → 1.0.0

data/lib/generators/amber_component_generator.rb

@@ -7,12 +7,39 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
   desc 'Generate a new component'
   source_root ::File.expand_path('templates', __dir__)
 
-  # copy rake tasks
-  def copy_tasks
+  # @return [Array<Symbol>]
+  VIEW_FORMATS = %i[html erb haml slim].freeze
+  # @return [Array<Symbol>]
+  STYLE_FORMATS = %i[css scss sass].freeze
+
+  class_option :view,
+               aliases: ['-v'],
+               desc: "Indicate what type of view should be generated eg. #{VIEW_FORMATS}"
+
+  class_option :css,
+               aliases: ['--style', '-c'],
+               desc: "Indicate what type of styles should be generated eg. #{STYLE_FORMATS}"
+
+  def generate_component
+    @view_format = (options[:view] || :html).to_sym
+    @view_format = :html if @view_format == :erb
+
+    @style_format = options[:css]&.to_sym
+
+    unless VIEW_FORMATS.include? @view_format
+      puts "No such view format as `#{@view_format}`"
+      return
+    end
+
+    if !@style_format.nil? && STYLE_FORMATS.include?(@style_format)
+      puts "No such css/style format as `#{@style_format}`"
+      return
+    end
+
     template 'component.rb.erb', "app/components/#{file_path}.rb"
     template 'component_test.rb.erb', "test/components/#{file_path}_test.rb"
-    template 'view.html.erb', "app/components/#{file_path}/view.html.erb"
-    template 'style.css.erb', "app/components/#{file_path}/style.css"
+    create_stylesheet
+    create_view
   end
 
   def file_name
@@ -21,4 +48,29 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
 
     "#{name}_component"
   end
+
+  private
+
+  # @return [void]
+  def create_view
+    case @view_format
+    when :slim
+      template 'view.slim.erb', "app/components/#{file_path}/view.slim"
+    when :haml
+      template 'view.haml.erb', "app/components/#{file_path}/view.haml"
+    else
+      template 'view.html.erb.erb', "app/components/#{file_path}/view.html.erb"
+    end
+  end
+
+  # @return [void]
+  def create_stylesheet
+    if (@style_format.nil? && defined?(::SassC)) || @style_format == :scss
+      template 'style.scss.erb', "app/components/#{file_path}/style.scss"
+    elsif @style_format == :sass
+      template 'style.sass.erb', "app/components/#{file_path}/style.sass"
+    else
+      template 'style.css.erb', "app/components/#{file_path}/style.css"
+    end
+  end
 end

data/lib/generators/component_generator.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require 'fileutils'
+require_relative 'amber_component_generator'
+
+# A Rails generator which creates a new Amber component.
+class ComponentGenerator < AmberComponentGenerator
+  source_root ::File.expand_path('templates', __dir__)
+end

data/lib/generators/templates/component.rb.erb

@@ -1,9 +1,11 @@
 # frozen_string_literal: true
 
 class <%= class_name %> < ::ApplicationComponent
-  # Your code goes here
+  # Props that your component accepts
+  prop :description, default: -> { 'Default Description' }
 
   after_initialize do
+    # some initialization
     @time = ::Time.now
   end
 end

data/lib/generators/templates/component_test.rb.erb

@@ -2,8 +2,16 @@
 
 require 'test_helper'
 
-class <%= class_name %>Test < ::ActiveSupport::TestCase
-  # test 'the truth' do
-  #   assert true
+class <%= class_name %>Test < ::ApplicationComponentTestCase
+  # For a full list of available assertions see
+  # https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Matchers
+
+  # test 'returns correct html' do
+  #   render do
+  #     <%= class_name %>.call
+  #   end
+
+  #   assert_text 'Hello from <%= class_name %>'
+  #   assert_selector "div.<%= singular_table_name %> p", text: 'Default Description'
   # end
 end

data/lib/generators/templates/style.css.erb

@@ -1,3 +1,3 @@
-.<%= singular_table_name %> {
+.<%= singular_table_name %> h1 {
   color: blue;
 }

data/lib/generators/templates/style.sass.erb

@@ -0,0 +1,3 @@
+.<%= singular_table_name %>
+  h1
+    color: blue

data/lib/generators/templates/style.scss.erb

@@ -0,0 +1,5 @@
+.<%= singular_table_name %> {
+  h1 {
+    color: blue;
+  }
+}

data/lib/generators/templates/view.haml.erb

@@ -0,0 +1,9 @@
+.<%= singular_table_name %>
+  %h1
+    Hello from
+    %b
+      <%= class_name %>
+    , initialized at:
+    = @time
+  %p
+    = description

data/lib/generators/templates/view.html.erb.erb

@@ -0,0 +1,8 @@
+<div class='<%= singular_table_name %>'>
+  <h1>
+    Hello from <b><%= class_name %></b>, initialized at: <%%= @time %>
+  </h1>
+  <p>
+    <%%= description %>
+  </p>
+</div>

data/lib/generators/templates/view.slim.erb

@@ -0,0 +1,6 @@
+div.<%= singular_table_name %>
+  h1
+    | Hello from
+    b <%= class_name %>
+    | , initialized at: #{@time}
+  p = description

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: amber_component
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 1.0.0
 platform: ruby
 authors:
 - Ruby-Amber
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-09-25 00:00:00.000000000 Z
+date: 2022-11-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -107,34 +107,6 @@ files:
 - Rakefile
 - amber_component.gemspec
 - banner.png
-- docs/.bundle/config
-- docs/.gitignore
-- docs/404.html
-- docs/Gemfile
-- docs/Gemfile.lock
-- docs/README.md
-- docs/_config.yml
-- docs/_data/amber_component.yml
-- docs/_sass/_variables.scss
-- docs/_sass/color_schemes/amber_component.scss
-- docs/_sass/custom/custom.scss
-- docs/api/index.md
-- docs/assets/images/logo_wide.png
-- docs/changelog/index.md
-- docs/favicon.ico
-- docs/getting_started/index.md
-- docs/getting_started/installation.md
-- docs/getting_started/ruby_support.md
-- docs/getting_started/wireframes.md
-- docs/index.md
-- docs/introduction/basic_usage.md
-- docs/introduction/index.md
-- docs/introduction/why_amber_component.md
-- docs/resources/index.md
-- docs/styles/index.md
-- docs/styles/usage.md
-- docs/views/index.md
-- docs/views/usage.md
 - icon.png
 - lib/amber_component.rb
 - lib/amber_component/assets.rb
@@ -143,22 +115,30 @@ files:
 - lib/amber_component/helpers/class_helper.rb
 - lib/amber_component/helpers/component_helper.rb
 - lib/amber_component/helpers/css_helper.rb
+- lib/amber_component/minitest_test_case.rb
 - lib/amber_component/prop_definition.rb
 - lib/amber_component/props.rb
 - lib/amber_component/railtie.rb
 - lib/amber_component/rendering.rb
 - lib/amber_component/template_handler.rb
 - lib/amber_component/template_handler/erb.rb
+- lib/amber_component/test_helper.rb
 - lib/amber_component/typed_content.rb
 - lib/amber_component/version.rb
 - lib/amber_component/views.rb
 - lib/generators/amber_component/install_generator.rb
 - lib/generators/amber_component/templates/application_component.rb
+- lib/generators/amber_component/templates/application_component_test_case.rb
 - lib/generators/amber_component_generator.rb
+- lib/generators/component_generator.rb
 - lib/generators/templates/component.rb.erb
 - lib/generators/templates/component_test.rb.erb
 - lib/generators/templates/style.css.erb
-- lib/generators/templates/view.html.erb
+- lib/generators/templates/style.sass.erb
+- lib/generators/templates/style.scss.erb
+- lib/generators/templates/view.haml.erb
+- lib/generators/templates/view.html.erb.erb
+- lib/generators/templates/view.slim.erb
 homepage: https://github.com/amber-ruby/amber_component
 licenses:
 - MIT

data/docs/.bundle/config

@@ -1,2 +0,0 @@
----
-BUNDLE_BUILD__EVENTMACHINE: "--with-cppflags=-I/opt/homebrew/opt/openssl@3/include"

data/docs/.gitignore

@@ -1,5 +0,0 @@
-_site/
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor

data/docs/404.html

@@ -1,25 +0,0 @@
----
-permalink: /404.html
-layout: default
----
-
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>

data/docs/Gemfile

@@ -1,37 +0,0 @@
-# frozen_string_literal: true
-
-source 'https://rubygems.org'
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
-gem 'jekyll', '~> 4.2.2'
-gem 'just-the-docs' # Theme for Jekyll docs.
-gem 'webrick'
-# This is the default theme for new Jekyll sites. You may change this to anything you like.
-gem 'minima', '~> 2.5'
-# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
-# uncomment the line below. To upgrade, run `bundle update github-pages`.
-# gem "github-pages", group: :jekyll_plugins
-# If you have any plugins, put them here!
-group :jekyll_plugins do
-  gem 'jekyll-feed', '~> 0.12'
-end
-
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
-platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem 'tzinfo', '~> 1.2'
-  gem 'tzinfo-data'
-end
-
-# Performance-booster for watching directories on Windows
-gem 'wdm', '~> 0.1.1', platforms: %i[mingw x64_mingw mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem 'http_parser.rb', '~> 0.6.0', platforms: [:jruby]

data/docs/Gemfile.lock

@@ -1,89 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.1.10)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.15.5)
-    forwardable-extended (2.6.0)
-    http_parser.rb (0.8.0)
-    i18n (1.12.0)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.2.2)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.4.0)
-      pathutil (~> 0.9)
-      rouge (~> 3.0)
-      safe_yaml (~> 1.0)
-      terminal-table (~> 2.0)
-    jekyll-feed (0.16.0)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-sass-converter (2.2.0)
-      sassc (> 2.0.1, < 3.0)
-    jekyll-seo-tag (2.8.0)
-      jekyll (>= 3.8, < 5.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    just-the-docs (0.3.3)
-      jekyll (>= 3.8.5)
-      jekyll-seo-tag (~> 2.0)
-      rake (>= 12.3.1, < 13.1.0)
-    kramdown (2.4.0)
-      rexml
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.7.1)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    minima (2.5.1)
-      jekyll (>= 3.5, < 5.0)
-      jekyll-feed (~> 0.9)
-      jekyll-seo-tag (~> 2.1)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (4.0.7)
-    rake (13.0.6)
-    rb-fsevent (0.11.1)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (3.29.0)
-    safe_yaml (1.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    terminal-table (2.0.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.8.0)
-    webrick (1.7.0)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  http_parser.rb (~> 0.6.0)
-  jekyll (~> 4.2.2)
-  jekyll-feed (~> 0.12)
-  just-the-docs
-  minima (~> 2.5)
-  tzinfo (~> 1.2)
-  tzinfo-data
-  wdm (~> 0.1.1)
-  webrick
-
-BUNDLED WITH
-   2.3.14

data/docs/README.md

@@ -1,19 +0,0 @@
-![Amber Components](../banner.png "Amber Components")
-
-# Docs
-
-> Based on jekyll gem [https://jekyllrb.com/](https://jekyllrb.com/)
-
-## install
-
-1. `bundle install`
-
-## run:development
-
-1. `jekyll serve`
-2. `http://127.0.0.1:4000/`
-
-## build for production
-
-1. `jekyll build`
-2. `check`

data/docs/_config.yml

@@ -1,148 +0,0 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole site, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing these this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-title: Amber Component
-baseurl: '/amber-doc-test' # the subpath of your site, e.g. /blog
-# url: https://ambercomponent.com # the base hostname & protocol for your site, e.g. http://example.com
-url: https://garbusbeach.com/ # the base hostname & protocol for your site, e.g. http://example.com
-
-theme: just-the-docs
-# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
-# color_scheme: "dark"
-color_scheme: "amber_component"
-
-permalink: pretty
-exclude: [
-  "node_modules/",
-  "*.gemspec",
-  "*.gem",
-  "Gemfile",
-  "Gemfile.lock",
-  "package.json",
-  "package-lock.json",
-  "script/",
-  "LICENSE.txt",
-  "lib/",
-  "bin/",
-  "README.md",
-  "Rakefile" ,
-  "docs/tests/"
-]
-
-# Regression tests
-# By default, the pages in /docs/tests are excluded when the ste is built.
-# To include them, comment-out the relevant line above.
-# Uncommenting the following line doesn't work - see https://github.com/jekyll/jekyll/issues/4791
-# include: ["docs/tests/"]
-
-# Set a path/url to a logo that will be displayed instead of the title
-logo: /assets/images/logo_wide.png
-
-# Enable or disable the site search
-# Supports true (default) or false
-search_enabled: true
-search:
-  # Split pages into sections that can be searched individually
-  # Supports 1 - 6, default: 2
-  heading_level: 2
-  # Maximum amount of previews per search result
-  # Default: 3
-  previews: 2
-  # Maximum amount of words to display before a matched word in the preview
-  # Default: 5
-  preview_words_before: 3
-  # Maximum amount of words to display after a matched word in the preview
-  # Default: 10
-  preview_words_after: 3
-  # Set the search token separator
-  # Default: /[\s\-/]+/
-  # Example: enable support for hyphenated search words
-  tokenizer_separator: /[\s/]+/
-  # Display the relative url in search results
-  # Supports true (default) or false
-  rel_url: true
-  # Enable or disable the search button that appears in the bottom right corner of every page
-  # Supports true or false (default)
-  button: false
-
-# Enable or disable heading anchors
-heading_anchors: true
-
-# Aux links for the upper right navigation
-aux_links:
-  AmberComponent on GitHub:
-    - https://github.com/amber-ruby/amber_component
-
-# Makes Aux links open in a new tab. Default is false
-aux_links_new_tab: true
-
-# Sort order for navigation links
-# nav_sort: case_insensitive # default, equivalent to nil
-nav_sort: case_sensitive # Capital letters sorted before lowercase
-
-# Footer content
-# appears at the bottom of every page's main content
-
-# Back to top link
-back_to_top: true
-back_to_top_text: "Back to top"
-
-footer_content: >-
-  Copyright ©
-  <script type="text/javascript">
-    document.write(new Date().getFullYear());
-  </script>
-  <a class="personal-link" href="{{ site.data.amber_component.garbus_beach_url }}">Garbus Beach</a>,
-  <a class="personal-link" href="{{ site.data.amber_component.mateusz_drewniak_url }}">Mateusz Drewniak</a>.
-  Made with ❤️ for ruby.
-
-# Footer last edited timestamp
-last_edit_timestamp: false # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
-last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
-
-
-
-# Footer "Edit this page on GitHub" link text
-gh_edit_link: false # show or hide edit this page link
-# gh_edit_link_text: "Edit this page on GitHub"
-# gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo
-# gh_edit_branch: "main" # the branch that your docs is served from
-# gh_edit_source: docs # the source that your files originate from
-# gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
-
-# Google Analytics Tracking (optional)
-# e.g, UA-1234567-89
-
-# TODO:
-# ga_tracking: UA-2709176-10
-# ga_tracking_anonymize_ip: false # Use GDPR compliant Google Analytics settings (true/nil by default)
-
-plugins:
-  - jekyll-seo-tag
-
-kramdown:
-  syntax_highlighter_opts:
-    block:
-      line_numbers: false
-
-compress_html:
-  clippings: all
-  comments: all
-  endings: all
-  startings: []
-  blanklines: false
-  profile: false
-  # ignore:
-  #   envs: all

data/docs/_data/amber_component.yml

@@ -1,3 +0,0 @@
-version: 1.0.0
-garbus_beach_url: https://garbusbeach.com
-mateusz_drewniak_url: https://mateuszdrewniak.it

data/docs/_sass/_variables.scss

@@ -1,2 +0,0 @@
-$amber_color: #FF9500;
-$amber_black: #402E32;

data/docs/_sass/color_schemes/amber_component.scss

@@ -1,11 +0,0 @@
-@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
-
-@import './color_schemes/dark.scss';
-@import './../variables.scss';
-
-$link-color: $amber_color;
-$btn-primary-color: $amber_color;
-$body-font-family: 'Fira Code', Menlo, Consolas, Monospace;
-$mono-font-family: $body-font-family;
-// $body-background-color: $amber_black;
-// $sidebar-color: $amber_black;

data/docs/_sass/custom/custom.scss

@@ -1,60 +0,0 @@
-@import './../variables.scss';
-
-.site-footer {
-  display: none;
-}
-
-.search {
-  input.search-input {
-    color: white;
-  }
-}
-
-.btn {
-  &:focus,
-  &:focus:hover,
-  &.selected:focus {
-    box-shadow: 0 0 0 3px rgba($amber_color, 0.25);
-  }
-}
-
-footer {
-  a.personal-link {
-    color: #5c5962;
-    text-decoration: underline;
-
-    &:hover {
-      color: $amber_color;
-    }
-  }
-}
-
-.site-header {
-  a.site-title {
-    &:hover {
-      background-image: none;
-    }
-  }
-}
-
-.nav-list {
-  .nav-list-item {
-    a.nav-list-link {
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    &.active {
-      // margin: 0 16px;
-      border-radius: 2px;
-      background-color: rgba($amber_color, 0.3);
-
-      a.nav-list-link {
-        &.active {
-          // padding-left: 18px;
-          color: $amber_color;
-          background-image: none;
-        }
-      }
-    }
-  }
-}

data/docs/api/index.md

@@ -1,8 +0,0 @@
----
-layout: default
-title: API
-nav_order: 5
-has_children: true
----
-
-# Api

data/docs/changelog/index.md

@@ -1,8 +0,0 @@
----
-layout: default
-title: Changelog
-nav_order: 6
-has_children: false
----
-
-# Changelog