elemental_styleguide 1.0.0.beta1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b1a2865f90e0e078a84f26cf5a332107457baf8221b7970e28671d0b4b39d67e
+  data.tar.gz: c74b074123b0addcb2f13fe696814ae3e71878ba2801d4ca903bc7d8768f1308
+SHA512:
+  metadata.gz: 158a7d09eca0402be90744b9a876921f005780e89b260b45b6e3db3b0d647e11d6c6be65009e01a626c7e04fcada49bb7b481b6aa230b13c8235c9d931086bef
+  data.tar.gz: ded8cfb89e67a2a0e5fe0cc3a3b99cf1f65d0b033475ffb7c1b0c775e71ed3a589f9fbcc315466b2d1945e2a8bda2ea0c6dd4a987c7baef75316445862a1a55f

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2018 Jens Ljungblad
+
+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,87 @@
+# Elemental Style Guide
+
+Simple style guide for Rails 5.1+, designed to go well with [elemental_components](https://github.com/jensljungblad/elemental_components). The two together are inspired by the works of [Brad Frost](http://bradfrost.com) and by the [thoughts behind](http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html) Lonely Planet's style guide [Rizzo](http://rizzo.lonelyplanet.com).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "elemental_styleguide"
+```
+
+And then execute:
+
+```sh
+$ bundle
+```
+
+Run the install generator:
+
+```sh
+$ bin/rails g elemental_styleguide:install
+```
+
+This will create the following files and directories:
+
+```
+app/
+  views/
+    layouts/
+      styleguide/
+        example.html.erb
+    styleguide/
+      01_home.md
+```
+
+The style guide can be mounted in your routes file with:
+
+```ruby
+mount ElementalStyleguide::Engine => "/styleguide"
+```
+
+You can now access the style guide at `http://localhost:3000/styleguide`.
+
+## Pages
+
+You can create style guide pages simply by adding markdown files to the `app/views/styleguide` directory. These can be structured by putting them in subdirectories, and sorted by prefixing the file names with a digit.
+
+Check out Brad Frost's [Style Guide Guide](https://github.com/bradfrost/style-guide-guide) for style guide inspiration.
+
+## Examples
+
+A special markdown syntax, inspired by [Catalog](https://www.catalog.style), can be used to render examples of any `erb` code on the style guide page, in the context of your own application:
+
+````markdown
+# Example
+
+```example
+<%= "Hello world" %>
+```
+````
+
+It is possible to pass options to the example, in order to control the width and height of the wrapping element:
+
+
+````markdown
+```example
+width: 500
+height: 200
+---
+<%= "Hello world" %>
+```
+````
+
+Examples need your application's CSS and JS in order to function properly. There is an `app/views/layouts/styleguide/example.html.erb` layout file that examples are rendered within. This file can be modified in order to add additional tags to the header, like the `javascript_pack_tag` when using the webpacker gem, or classes and styles to the body tag.
+
+## Acknowledgements
+
+This library, together with [elemental_components](https://github.com/jensljungblad/elemental_components), was inspired by the writings of [Brad Frost](http://bradfrost.com) on atomic design and living style guides, and [Rizzo](http://rizzo.lonelyplanet.com), the Lonely Planet style guide. Other inspirations were:
+
+- [Catalog](https://www.catalog.style) - style guide for React
+- [Storybook](https://storybook.js.org) - style guide for React
+- [React Styleguidist](https://react-styleguidist.js.org) - style guide for React
+- [Cells](https://github.com/trailblazer/cells) - view components for Ruby
+- [Komponent](https://github.com/komposable/komponent) - view components for Ruby
+
+For a list of real world style guides, check out http://styleguides.io.

data/Rakefile

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+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    = "Elemental Styleguide"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.md")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+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/assets/config/elemental_styleguide_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/elemental_styleguide .js
+//= link_directory ../stylesheets/elemental_styleguide .css

data/app/assets/javascripts/elemental_styleguide/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/app/assets/stylesheets/elemental_styleguide/application.css.erb

@@ -0,0 +1,182 @@
+/*
+ * 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
+ */
+
+<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  line-height: 1.5;
+}
+
+a {
+  color: #5296b2;
+  text-decoration: none;
+  border-bottom: 2px solid #ddebf0;
+  transition: all .2s ease-in-out;
+}
+
+a:hover {
+  border-color: #5296b2;
+}
+
+p {
+  margin: 0 0 2em;
+}
+
+main {
+  width: 100%;
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 40px 60px 60px;
+}
+
+pre {
+  margin: 0 0 2em;
+  padding: 30px;
+  background: #f4f7fb;
+  border: 1px solid #dfe3e6;
+}
+
+code {
+  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  font-size: 15px;
+}
+
+iframe {
+  margin: 0;
+  height: 0;
+  border: none;
+}
+
+h1 {
+  margin: 0 0 1em;
+  padding: 0 0 .5em;
+  border-bottom: 2px solid #dfe3e6;
+  color: #333;
+  font-size: 50px;
+  font-weight: 500;
+}
+
+h2 {
+  color: #333;
+  font-weight: 600;
+}
+
+ul,
+ol {
+  margin: 0 0 2em;
+}
+
+table {
+  margin: 0 0 2em;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: .6em 2em .6em 0;
+  text-align: left;
+}
+
+th:last-child,
+td:last-child {
+  padding-right: 0;
+}
+
+th {
+  border-bottom: 2px solid #dfe3e6;
+}
+
+td {
+  border-bottom: 1px solid #dfe3e6;
+}
+
+hr {
+  margin: 2em 0 0;
+  padding: 2em 0 0;
+  border: 1px solid #dfe3e6;
+  border-width: 1px 0 0;
+}
+
+blockquote {
+  padding-left: 25px;
+  border-left: 3px solid #dfe3e6;
+  color: #879097;
+  font-style: italic;
+}
+
+nav {
+  padding: 10px 30px 40px;
+  background: #f4f7fb;
+  min-width: 180px;
+}
+
+nav a {
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+}
+
+nav a:hover {
+  border-bottom: 2px solid #a9cbd9;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+nav > ul > li {
+  display: block;
+  margin: .6em 0 0;
+  padding: .6em 0 0;
+  box-shadow: 0 -1px 0 0 #dfe3e6;
+}
+
+nav > ul > li:first-child {
+  box-shadow: none;
+}
+
+nav ul ul {
+  margin: .6em 0;
+  padding: 0 0;
+  font-size: 15px;
+  font-weight: 400;
+}
+
+nav ul ul ul {
+  font-size: 14px;
+  padding-left: 1em;
+}
+
+.example {
+  display: grid;
+  padding: 30px;
+  border: 1px solid #dfe3e6;
+  border-width: 1px 1px 0;
+}
+
+.grid-container {
+  display: grid;
+  width: 100%;
+  height: 100vh;
+  grid-gap: 0;
+  grid-template-columns: auto 1fr;
+}

data/app/controllers/elemental_styleguide/application_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/controllers/elemental_styleguide/examples_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class ExamplesController < ApplicationController
+    helper Rails.application.helpers
+    helper Rails.application.routes.url_helpers
+
+    def show
+      render inline: Base64.urlsafe_decode64(params[:example]), layout: "styleguide/example"
+    end
+  end
+end

data/app/controllers/elemental_styleguide/pages_controller.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class PagesController < ApplicationController
+    helper ElementalStyleguide::NavigationHelper
+
+    def show
+      unless params[:path]
+        params[:path] = ElementalStyleguide.page_names[0][0]
+      end
+      render "styleguide/#{params[:path]}", layout: "elemental_styleguide/application"
+    end
+  end
+end

data/app/helpers/elemental_styleguide/navigation_helper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  module NavigationHelper
+    # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+    def navigation(pages = nil, paths = [])
+      content_tag :ul do
+        (pages || ElementalStyleguide.page_names).map do |page|
+          path, label, children = page
+          path = paths.dup << path
+
+          content_tag :li do
+            if children
+              [label, navigation(children, path)].join("").html_safe
+            else
+              link_to label, elemental_styleguide.page_path(path)
+            end
+          end
+        end.join("").html_safe
+      end
+    end
+    # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+  end
+end

data/app/views/layouts/elemental_styleguide/application.html.erb

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Style guide</title>
+    <%= stylesheet_link_tag "elemental_styleguide/application", media: "all" %>
+    <%= javascript_include_tag "elemental_styleguide/application" %>
+    <%= csrf_meta_tags %>
+  </head>
+  <body>
+    <div class="grid-container">
+      <nav>
+        <%= navigation %>
+      </nav>
+      <main>
+        <%= yield %>
+      </main>
+    </div>
+    <script>
+      var iframes = document.getElementsByTagName('iframe');
+
+      for (var i = 0; i < iframes.length; i++) {
+        iframes[i].onload = function(e) {
+          var i = e.target;
+          var d = i.contentWindow.document;
+          var b = d.getElementsByTagName('body')[0];
+
+          if (i.height == 'auto') {
+            i.style.height = b.scrollHeight + 'px';
+          } else {
+            i.style.height = i.height + 'px';
+          }
+        }
+      }
+    </script>
+  </body>
+</html>

data/config/routes.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+ElementalStyleguide::Engine.routes.draw do
+  root to: "pages#show"
+  get "example", to: "examples#show", as: :example
+  get "*path", to: "pages#show", as: :page
+end

data/lib/elemental_styleguide.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "redcarpet"
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "elemental_styleguide/markdown_handler"
+require "elemental_styleguide/markdown_renderer"
+require "elemental_styleguide/engine"
+
+module ElementalStyleguide
+  def self.pages_path
+    Rails.root.join("app", "views", "styleguide")
+  end
+
+  def self.page_names(path = nil)
+    Dir.chdir(path || pages_path) do
+      Dir.glob("*").sort.map do |item|
+        [
+          item.sub(/\..*/, ""),
+          item.sub(/\..*/, "").sub(/[0-9]*_?/, "").titleize
+        ].tap do |array|
+          array << page_names(item) if File.directory?(item)
+        end
+      end
+    end
+  end
+end

data/lib/elemental_styleguide/engine.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class Engine < ::Rails::Engine
+    isolate_namespace ElementalStyleguide
+
+    initializer "elemental_styleguide.template_hander" do
+      ActionView::Template.register_template_handler :md, ElementalStyleguide::MarkdownHandler
+    end
+  end
+end

data/lib/elemental_styleguide/markdown_handler.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class MarkdownHandler
+    class << self
+      def call(template, _source)
+        @markdown_renderer ||= Redcarpet::Markdown.new(
+          ElementalStyleguide::MarkdownRenderer,
+          autolink: true,
+          tables: true,
+          fenced_code_blocks: true
+        )
+        "#{@markdown_renderer.render(template.source).inspect}.html_safe"
+      end
+    end
+  end
+end

data/lib/elemental_styleguide/markdown_renderer.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class MarkdownRenderer < Redcarpet::Render::HTML
+    include Rouge::Plugins::Redcarpet
+
+    def block_code(code, language)
+      case language
+      when "example"
+        options, code = parse_options(code)
+        example(code, options)
+      else
+        super
+      end
+    end
+
+    def example(code, options)
+      <<-EXAMPLE
+        <div class="example">
+          <iframe src="/styleguide/example?example=#{Base64.urlsafe_encode64(code)}"
+                  width="#{options['width'] || '100%'}"
+                  height="#{options['height'] || 'auto'}"></iframe>
+        </div>
+        <div class="example-source">
+          #{block_code(code.strip, 'erb')}
+        </div>
+      EXAMPLE
+    end
+
+    private
+
+    def parse_options(code)
+      pieces = code.split("---")
+
+      if pieces.length > 1
+        options = pieces[0].split("\n").map { |i| i.split(": ") }.to_h
+        [options, pieces[1]]
+      else
+        options = {}
+        [options, pieces[0]]
+      end
+    end
+  end
+end

data/lib/elemental_styleguide/railtie.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class Railtie < ::Rails::Railtie
+  end
+end

data/lib/elemental_styleguide/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  VERSION = "1.0.0.beta1"
+end

data/lib/generators/elemental_styleguide/install_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module ElementalStyleguide
+  class InstallGenerator < Rails::Generators::Base
+    desc "Install style guide"
+
+    source_root File.expand_path("templates", __dir__)
+
+    def create_style_guide
+      directory "install", "app"
+    end
+  end
+end

data/lib/generators/elemental_styleguide/templates/install/views/layouts/styleguide/example.html.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= stylesheet_link_tag "application", media: "all" %>
+    <%= javascript_include_tag "application" %>
+  </head>
+  <body>
+    <div id="example">
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/lib/generators/elemental_styleguide/templates/install/views/styleguide/01_home.md

@@ -0,0 +1,5 @@
+# Style guide
+
+The homepage of a style guide should provide high-level information around what the design system is, what benefits it provides, who it’s for, and how to get started with it.
+
+Check out Brad Frost's [Style Guide Guide](https://github.com/bradfrost/style-guide-guide) for style guide inspiration.

data/lib/tasks/elemental_styleguide_tasks.rake

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# desc "Explaining what the task does"
+# task :elemental_styleguide do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,150 @@
+--- !ruby/object:Gem::Specification
+name: elemental_styleguide
+version: !ruby/object:Gem::Version
+  version: 1.0.0.beta1
+platform: ruby
+authors:
+- Jens Ljungblad
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-02-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.1.0
+- !ruby/object:Gem::Dependency
+  name: redcarpet
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.5.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.5.0
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.13.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.13.0
+- !ruby/object:Gem::Dependency
+  name: appraisal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.74.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.74.0
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.0
+description: Simple style guide for Rails 5.1+
+email:
+- jens.ljungblad@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/elemental_styleguide_manifest.js
+- app/assets/javascripts/elemental_styleguide/application.js
+- app/assets/stylesheets/elemental_styleguide/application.css.erb
+- app/controllers/elemental_styleguide/application_controller.rb
+- app/controllers/elemental_styleguide/examples_controller.rb
+- app/controllers/elemental_styleguide/pages_controller.rb
+- app/helpers/elemental_styleguide/navigation_helper.rb
+- app/views/layouts/elemental_styleguide/application.html.erb
+- config/routes.rb
+- lib/elemental_styleguide.rb
+- lib/elemental_styleguide/engine.rb
+- lib/elemental_styleguide/markdown_handler.rb
+- lib/elemental_styleguide/markdown_renderer.rb
+- lib/elemental_styleguide/railtie.rb
+- lib/elemental_styleguide/version.rb
+- lib/generators/elemental_styleguide/install_generator.rb
+- lib/generators/elemental_styleguide/templates/install/views/layouts/styleguide/example.html.erb
+- lib/generators/elemental_styleguide/templates/install/views/styleguide/01_home.md
+- lib/tasks/elemental_styleguide_tasks.rake
+homepage: https://www.github.com/jensljungblad/elemental_styleguide
+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: 1.3.1
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.7.6
+signing_key: 
+specification_version: 4
+summary: Simple style guide for Rails 5.1+
+test_files: []