lookbook 1.2.1 → 1.4.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 746247239c9d22b8537a0327dfa40e3d4a2b687a9d48e0a4b61819cba7766bec
-  data.tar.gz: c288e6e752520bb2b4b90b5e1f682cd68c99961939496b5d698abf2604962efc
+  metadata.gz: bda485cc3ea6b7d85317d466952627d1f72dd724aba79140cfdc604512a5f4bc
+  data.tar.gz: 6be6a4c31c8f31851083d6f822dd9751ffda7fae471a1ed1fce80246526c3bb2
 SHA512:
-  metadata.gz: 6b0aae039cf5d29f2d9f93aca8f2fd62996ecbce1ad9cc9ab8c8b19e82343f71a3dc6694406182e5ebd41b0a6ad97c160a7c156e51463cda51f522b186a25a1d
-  data.tar.gz: cf44c51bfa10e5eabc5dc6c88931d3e1676e5b72599e00304c83aca343d6a080ef31afa0044e39383d1c4b4ccc179260832afb5951d5427858767b09ff749a4a
+  metadata.gz: f1b4af27b5664136e08f65cbcfede40f9a4963d909eab70848376f6e236197ff51b4dd09c95dea2ff95ee5617f8d9ebd3906638efc99b3c09ce0d91b55c31097
+  data.tar.gz: 71d7191d3de4543b5068a279462182bb87908a5182667b158aa8a78ced51443696537b8a915f94d9405268d36fd49502ba37d1893737820200fb97827030e413

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 allmarkedup
+Copyright (c) 2021 Mark Perkins
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -1,30 +1,42 @@
-# Lookbook
-
-<div>
-<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
-<a href="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml"><img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status"></a>
-</div>
 <br>
+<img src=".github/assets/lookbook_logo.svg" width="180"> 
 
 A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
 
+[![Gem version](https://img.shields.io/gem/v/lookbook)](https://rubygems.org/gems/lookbook)
+[![CI status](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml)
+<br>
+
 ## Documentation
 
-**Lookbook (v1.x)** documentation: **[https://lookbook.build](https://lookbook.build)**
+✨ **Lookbook guide and API docs**: [lookbook.build](https://lookbook.build)
 
-> _Looking for v0.9.x docs? [Head over here](https://github.com/allmarkedup/lookbook/tree/0.9.x)._
+> _Looking for pre-v1.0 documentation? [Head over here](https://github.com/ViewComponent/lookbook/tree/0.9.x)._
 
 
 ## Demo
 
-**Online Demo:** [https://lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook) 
+✨ **Online Demo**: [lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook)
+
+✨ **Demo repo**: [github.com/ViewComponent/lookbook-demo](https://github.com/ViewComponent/lookbook-demo)
 
 [![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
 
 
 ## Development
 
-Lookbook's UI is itself built using ViewComponents. To preview these components in a Lookbook instance you can run the included `workbench` app:
+Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for it's UI.
+
+This repository contains:
+
+* The Lookbook source code ([`/app`](https://github.com/ViewComponent/lookbook/tree/main/app), [`/lib`](https://github.com/ViewComponent/lookbook/tree/main/lib), [`/config`](https://github.com/ViewComponent/lookbook/tree/main/config), etc)
+* A '[workbench](#workbench)' app used for Lookbook component development ([`/workbench`](https://github.com/ViewComponent/lookbook/tree/main/workbench)).
+* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/ViewComponent/lookbook/tree/main/docs)).
+* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/ViewComponent/lookbook/tree/main/spec)).
+
+### Workbench
+
+To preview the Lookbook components within a Lookbook instance you can run the included `workbench` app:
 
 1. Clone this repo
 2. Install dependencies: `bundle install & npm install`
@@ -33,21 +45,42 @@ Lookbook's UI is itself built using ViewComponents. To preview these components
 
 The `workbench` app will be started in development mode and any changes to Lookbook's views or assets will immediately be reflected in the UI.
 
-### Docs site
+### Documentation site
 
 The [Lookbook docs site](https://lookbook.build) is built using [Bridgetown](https://www.bridgetownrb.com/) and the source files can be found in the `./docs` directory.
 
-To see a local version of the site run `bin/docs` from the root of this repo and then visit http://localhost:4000 in your browser.
+To preview changes locally you can run a development version of the docs site:
+
+1. Clone this repo
+2. Install dependencies: `bundle install`
+3. Start the app: `bin/docs`
+4. Visit http://localhost:4000 
 
 ### Testing
 
-Lookbook uses RSpec for testing.
+Lookbook uses [RSpec](https://relishapp.com/rspec) for testing.
 
 Tests can be run using the `rake spec` or `bundle exec rspec` commands.
 
 The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 
 
+## Contributing
+
+Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!
+
+Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/ViewComponent/lookbook/discussions) and we will do our best to help you out.
+
+## Contributors 
+
+Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow
+&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/ViewComponent/lookbook/graphs/contributors):
+<br>
+<br>
+<a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
+</a>
+
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/lookbook/css/themes/blue.css

@@ -22,6 +22,7 @@
   --lookbook-base-900: theme("colors.zinc.900");
   --lookbook-text: var(--lookbook-base-800);
   --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
   --lookbook-icon-button-stroke: var(--lookbook-base-400);
   --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
   --lookbook-tabs-text-disabled: var(--lookbook-base-300);
   --lookbook-tabs-border-active: var(--lookbook-accent-400);
   --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
   --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
   --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
   --lookbook-sidebar-bg: var(--lookbook-base-50);
   --lookbook-page-bg: var(--lookbook-white);
   --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
-  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/css/themes/green.css

@@ -0,0 +1,66 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.green.50");
+  --lookbook-accent-100: theme("colors.green.100");
+  --lookbook-accent-200: theme("colors.green.200");
+  --lookbook-accent-300: theme("colors.green.300");
+  --lookbook-accent-400: theme("colors.green.400");
+  --lookbook-accent-500: theme("colors.green.500");
+  --lookbook-accent-600: theme("colors.green.600");
+  --lookbook-accent-700: theme("colors.green.700");
+  --lookbook-accent-800: theme("colors.green.800");
+  --lookbook-accent-900: theme("colors.green.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/app/assets/lookbook/css/themes/indigo.css

@@ -22,6 +22,7 @@
   --lookbook-base-900: theme("colors.zinc.900");
   --lookbook-text: var(--lookbook-base-800);
   --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
   --lookbook-icon-button-stroke: var(--lookbook-base-400);
   --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
   --lookbook-tabs-text-disabled: var(--lookbook-base-300);
   --lookbook-tabs-border-active: var(--lookbook-accent-400);
   --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
   --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
   --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
   --lookbook-sidebar-bg: var(--lookbook-base-50);
   --lookbook-page-bg: var(--lookbook-white);
   --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
-  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/css/themes/rose.css

@@ -0,0 +1,66 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.rose.50");
+  --lookbook-accent-100: theme("colors.rose.100");
+  --lookbook-accent-200: theme("colors.rose.200");
+  --lookbook-accent-300: theme("colors.rose.300");
+  --lookbook-accent-400: theme("colors.rose.400");
+  --lookbook-accent-500: theme("colors.rose.500");
+  --lookbook-accent-600: theme("colors.rose.600");
+  --lookbook-accent-700: theme("colors.rose.700");
+  --lookbook-accent-800: theme("colors.rose.800");
+  --lookbook-accent-900: theme("colors.rose.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/app/assets/lookbook/css/themes/zinc.css

@@ -22,6 +22,7 @@
   --lookbook-base-900: theme("colors.zinc.900");
   --lookbook-text: var(--lookbook-base-800);
   --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
   --lookbook-icon-button-stroke: var(--lookbook-base-400);
   --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
   --lookbook-tabs-text-disabled: var(--lookbook-base-300);
   --lookbook-tabs-border-active: var(--lookbook-accent-400);
   --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
   --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
   --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
   --lookbook-sidebar-bg: var(--lookbook-base-50);
   --lookbook-page-bg: var(--lookbook-white);
   --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
-  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/components/lookbook/base_component.rb

@@ -32,9 +32,9 @@ module Lookbook
 
     def alpine_encode(data)
       if data.is_a? String
-        "\'#{json_escape data}\'"
+        "'#{json_escape data}'"
       else
-        json_escape data.to_json.tr("\"", "\'")
+        json_escape data.to_json.tr("\"", "'")
       end
     end
 

data/app/components/lookbook/code/component.css

@@ -1,4 +1,4 @@
-@import "./highlight_github_light.css";
+@import "./highlight_github.css";
 
 @layer components {
   [data-component="code"] {
@@ -25,7 +25,7 @@
 
       & .line-numbers {
         width: min-content;
-        @apply bg-white border-r border-dashed border-lookbook-divider z-10 h-full p-3 select-none text-gray-400 text-right;
+        @apply border-r border-dashed z-10 h-full p-3 select-none text-right;
       }
 
       & .line-number {

data/app/components/lookbook/code/component.html.erb

@@ -3,8 +3,9 @@
     {
       "numbered": numbered?,
       "focussed": focussed?,
-      "h-full": full_height?
+      "h-full": full_height?,
+      "dark": is_dark?
     } 
   ] do %>
-  <%= Lookbook::CodeFormatter.highlight(source, **@highlight_opts) %>
+  <%= Lookbook::CodeHighlighter.call(source, **@highlight_opts) %>
 <% end %>

data/app/components/lookbook/code/component.rb

@@ -9,7 +9,8 @@ module Lookbook
       highlight_lines: [],
       start_line: 1,
       wrap: false,
-      theme: :github_light,
+      theme: nil,
+      dark: false,
       full_height: false,
       **html_attrs
     )
@@ -23,6 +24,7 @@ module Lookbook
       @highlight_lines = highlight_lines
       @wrap = wrap
       @theme = theme
+      @dark = dark
       @full_height = full_height
       super(**html_attrs)
     end
@@ -44,7 +46,16 @@ module Lookbook
     end
 
     def full_height?
-      @full_height == true
+      @full_height
+    end
+
+    def is_dark?
+      @dark
+    end
+
+    def before_render
+      @theme ||= Lookbook.config.highlighter_options.fetch(:theme, :github).to_sym
+      @dark ||= !!Lookbook.config.highlighter_options.fetch(:dark, false)
     end
 
     protected