lookbook 1.0.0.rc.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74c62e76c265b02970bc86ad242fb43c347ccf0ad141b512148f3ef1e3eb2ae9
-  data.tar.gz: d389ed323fa6918a5919865414e6c4b17e23870a27d398ba92af055ffa958bf4
+  metadata.gz: 5617d397419ae8b9e95fa6c53ceb94dd3a7dffe83ea1fae0f643f17f6c15b995
+  data.tar.gz: 1fb037740def1192fa5aa9d0c076419dc06ed629996e7cc82ed741e7aefa000f
 SHA512:
-  metadata.gz: a64d8542e71251f52b36d88548dfe5fbd0347c1d6a52ff6e0f6bbe8e1e256d93a5761089f7594b95453c7865bf619822483efa229fe011474d2f2818d9bcd96c
-  data.tar.gz: 2360d8e4a06cf428dd10c7ea3d39d9d17b4bea377fa98861e9f3848026d3b9ed60da882df07005bd9547891fd63b88a8368da4a15dedc076de759a1418a06385
+  metadata.gz: a5710f8a40f7594bc4d9ac3347ca8c04102f708b50c21d96d1695b26ab4d6ccc23436e1288cea7d43516264260c31f091530cb15d3ea144707d2ae280442c333
+  data.tar.gz: 1bfdcf6ce5bb68e2af399b5920ec821a73057e77aaf4732216da498b1745c5c8eb15b220ce56115dd8c14d757febe75315c2620c6c6c929b3e973d001a5b7797

data/README.md

@@ -1,83 +1,52 @@
-# Lookbook v1.0
+# Lookbook
 
 <div>
 <a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
-<img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=v1.0-beta" alt="CI status">
+<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>
 
-> **This is the Lookbook v1.0 BETA development branch.**<br>
->_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
+A tool to help develop, test and document [ViewComponents](https://viewcomponent.org/) in isolation.
 
+## Documentation
 
-## Get started
+**Lookbook (v1.x)** documentation: **[https://lookbook.build](https://lookbook.build)**
 
-If you are already using Lookbook in your project, just update the Lookbook gem to the latest beta release and then head over to the [beta documentation site](https://beta.lookbook.build/) to read more about the new features.
+> _Looking for v0.9.x docs? [Head over here](https://github.com/allmarkedup/lookbook/tree/0.9.x)._
 
-```ruby
-gem "lookbook", ">= 1.0.0.beta.8"
-```
 
-If you are **new to Lookbook** then check out the <a href="https://beta.lookbook.build/guide/quick-start/">v1.0 quick start guide</a> for more detailed instructions on installing Lookbook in your project
-
-
-<h4>Useful Resources</h4>
-
-* 👉 <a href="https://beta.lookbook.build/">v1.0 docs</a>
-* 👉 <a href="https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook">v1.0 demo app</a> <em>(The repo for the demo <a href="https://github.com/allmarkedup/lookbook-demo/tree/v1.0-beta">is here</a> if you want to dig in further)</em>
-
-
-
-## Changes and new features in v1.0
-
-Lookbook v1.0 includes a completely re-written UI, many under-the hood improvements and a some exciting new customisation options.
-
-### Frontend changes:
-
-* Completely re-written UI - now built with ViewComponents
-* New [UI themes and customisation options](https://beta.lookbook.build/guide/themes/)
-* Improved small-screen/mobile view
-* Debug menu
-* ...and many other small visual and usability improvements
-
-### New options for extending Lookbook:
-
-* Define [custom tags](https://beta.lookbook.build/guide/extend/tags/) for preview file annotations
-* Create [your own tab panels](https://beta.lookbook.build/guide/extend/panels/) - with complete control over content/layout and access to all Lookbook data
-* Use [lifecycle hooks](https://beta.lookbook.build/guide/extend/hooks/) to run your own code when Lookbook starts up, when files change or at shutdown
-
-### Other changes
-
-* 'Workbench' app for developing Lookbook's UI components in Lookbook
-* New Rspec-based test suite and dummy app
-* All new documentation site built using [Bridgetown](https://www.bridgetownrb.com/)
+## Demo
 
+**Online Demo:** [https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook) 
 
 [![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
 
-## Workbench
 
-As of this release, Lookbook's UI is itself built using ViewComponent components. To help with development it is possible to preview these components (in a Lookbook instance!) by running the included 'Workbench" app, as follows:
+## Development
+
+Lookbook's UI is itself built using ViewComponents. To preview these components in a Lookbook instance you can run the included `workbench` app:
 
 1. Clone this repo
 2. Install dependencies: `bundle install & npm install`
-3. Start the Workbench: `foreman start`
-4. Open http://localhost:4545 in your browser to view the Workbench
+3. Start the app: `bin/workbench`
+4. Visit http://localhost:4545/lookbook to view the Lookbook instance
+
+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.
 
-This will start the Workbench app in development mode and any changes to Lookbooks views or assets will immediately be visible in the UI.
+### Docs 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.
 
-## Running tests
+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.
 
-The test suite is in the process of being completely overhauled.
+### Testing
 
-Tests are now written using RSpec and the system now uses [Combustion](https://github.com/pat/combustion) under the hood.
+Lookbook uses RSpec for testing.
 
-- Tests can be run using the `rake lookbook:test` or `bundle exec rspec` commands.
-- The dummy app that the tests are being run against can be viewed by running the `rake lookbook:test:serve` command and then browsing to http://localhost:9292/lookbook
+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
 
----
 
 ## License
 

data/app/assets/lookbook/js/components/clipboard.js

@@ -19,7 +19,7 @@ function initClipboard(context = {}) {
         return false;
       }
 
-      const content = decodeEntities(targetEl.innerText.trim());
+      const content = decodeEntities(targetEl.innerHTML.trim());
 
       await window.navigator.clipboard.writeText(content);
       this.copied = true;

data/app/components/lookbook/base_component.rb

@@ -35,7 +35,7 @@ module Lookbook
       alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
         args = Array.wrap(alpine_data)
-        args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name
+        args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
       end
     end
   end

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

@@ -13,7 +13,7 @@
           href: lookbook_inspect_path(@example.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: lookbook_inspect_path(@example.path, @params),
+          href: lookbook_preview_path(@example.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
       <% end %>

data/app/components/lookbook/params_editor/field/component.html.erb

@@ -1,7 +1,7 @@
 <%= render_component_tag class: "px-4 py-3" do %>
   <div class="flex items-start max-w-[800px]" :class="isNarrowLayout && '!block'">
     <label
-      for="param-<%= @name %>"
+      for="param-<%= name %>"
       class="block font-bold cursor-pointer flex-none py-2 w-[140px] truncate pr-2">
       <%= label %>
     </label>
@@ -27,12 +27,12 @@
         <select
           class="form-input"
           x-bind="bindings.input || {}"
-          x-model="value">
+          x-model="value"
+          name="<%= name %>">
           <%= options_for_select(@options || [], value) %>
         </select>
 
       <% elsif field_type == "toggle" %>
-
         <button type="button"
           class="<%= value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle" %> relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-input-border-focus"
           role="switch"
@@ -42,7 +42,6 @@
             class="<%= value == true ? "translate-x-5" : "translate-x-0" %>  pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
           ></span>
         </button>
-
       <% end %>
     </div>
   </div>

data/app/components/lookbook/params_editor/field/component.rb

@@ -1,5 +1,7 @@
 module Lookbook
   class ParamsEditor::Field::Component < Lookbook::BaseComponent
+    attr_reader :name
+
     def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
       @input = input
       @name = name
@@ -12,7 +14,7 @@ module Lookbook
     end
 
     def label
-      @name.titleize
+      name.titleize
     end
 
     def value
@@ -31,8 +33,8 @@ module Lookbook
     protected
 
     def alpine_data
-      escaped_value = value.is_a?(String) ? helpers.j(value) : value
-      "{name: '#{@name}', value: '#{escaped_value}'}"
+      escaped_value = helpers.raw json_escape(value.to_json)
+      "{name: '#{name}', value: #{escaped_value}}"
     end
 
     def alpine_component

data/app/controllers/lookbook/application_controller.rb

@@ -1,5 +1,6 @@
 module Lookbook
   class ApplicationController < ActionController::Base
+    content_security_policy false, if: -> { Rails.env.development? }
     protect_from_forgery with: :exception
 
     helper Lookbook::ApplicationHelper

data/lib/lookbook/engine.rb

@@ -1,4 +1,3 @@
-require "rails"
 require "view_component"
 require "action_cable/engine"
 require "listen"

data/lib/lookbook/preview_controller.rb

@@ -14,7 +14,7 @@ module Lookbook
       render html: render_to_string(template, **opts)
     end
 
-    def render_in_layout_to_string(template, locals, **opts)
+    def render_in_layout_to_string(template, locals, opts = {})
       append_view_path Lookbook::Engine.root.join("app/views")
       html = render_to_string(template, locals: locals, **determine_layout(opts[:layout]))
       if opts[:append_html].present?

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0.rc.1"
+  VERSION = "1.0.0"
 end

data/lib/tasks/lookbook_tasks.rake

@@ -1,18 +1,6 @@
 require_relative "../lookbook"
 
 namespace :lookbook do
-  desc "Run the rspec tests"
-  task :test do
-    sh "bundle exec rspec"
-  end
-
-  namespace :test do
-    desc "Start a server to view the test app"
-    task :serve do
-      sh "bundle exec rackup"
-    end
-  end
-
   namespace :previews do
     desc "Preparse the previews"
     task preparse: :environment do
@@ -20,21 +8,4 @@ namespace :lookbook do
       puts "Lookbook preview parsing complete"
     end
   end
-
-  namespace :release do
-    desc "Bump the Lookbook engine version number"
-    task :bump_version, [:version] do |t, args|
-      filename = Lookbook::Engine.root.join("lib/lookbook/version.rb")
-      current_version = Lookbook::VERSION.to_s
-      new_version = args[:version].sub("v", "").tr("-", ".")
-      file = File.open(filename)
-      contents = file.read
-      File.write(filename, contents.gsub(current_version, new_version))
-    end
-
-    desc "Build Gem and push to RubyGems"
-    task :build_and_push do
-      sh("rake build && gem push pkg/lookbook-#{Lookbook::VERSION}.gem")
-    end
-  end
 end

data/public/lookbook-assets/css/themes/zinc.css.map.91837.5

@@ -0,0 +1 @@
+{"mappings":"AAAA","sources":["app/assets/lookbook/css/themes/zinc.css"],"sourcesContent":[":root {\n  --lookbook-white: theme(\"colors.white\");\n  --lookbook-accent-50: theme(\"colors.zinc.50\");\n  --lookbook-accent-100: theme(\"colors.zinc.100\");\n  --lookbook-accent-200: theme(\"colors.zinc.200\");\n  --lookbook-accent-300: theme(\"colors.zinc.300\");\n  --lookbook-accent-400: theme(\"colors.zinc.400\");\n  --lookbook-accent-500: theme(\"colors.zinc.500\");\n  --lookbook-accent-600: theme(\"colors.zinc.600\");\n  --lookbook-accent-700: theme(\"colors.zinc.700\");\n  --lookbook-accent-800: theme(\"colors.zinc.800\");\n  --lookbook-accent-900: theme(\"colors.zinc.900\");\n  --lookbook-base-50: theme(\"colors.zinc.50\");\n  --lookbook-base-100: theme(\"colors.zinc.100\");\n  --lookbook-base-200: theme(\"colors.zinc.200\");\n  --lookbook-base-300: theme(\"colors.zinc.300\");\n  --lookbook-base-400: theme(\"colors.zinc.400\");\n  --lookbook-base-500: theme(\"colors.zinc.500\");\n  --lookbook-base-600: theme(\"colors.zinc.600\");\n  --lookbook-base-700: theme(\"colors.zinc.700\");\n  --lookbook-base-800: theme(\"colors.zinc.800\");\n  --lookbook-base-900: theme(\"colors.zinc.900\");\n  --lookbook-text: var(--lookbook-base-800);\n  --lookbook-divider: var(--lookbook-base-300);\n  --lookbook-icon-button-stroke: var(--lookbook-base-400);\n  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);\n  --lookbook-tooltip-bg: var(--lookbook-accent-500);\n  --lookbook-tooltip-text: var(--lookbook-white);\n  --lookbook-scrollbar: var(--lookbook-base-200);\n  --lookbook-scrollbar-hover: var(--lookbook-base-300);\n  --lookbook-toolbar-bg: var(--lookbook-white);\n  --lookbook-toolbar-divider: var(--lookbook-divider);\n  --lookbook-nav-text: var(--lookbook-text);\n  --lookbook-nav-toggle: var(--lookbook-base-500);\n  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);\n  --lookbook-nav-item-hover: var(--lookbook-base-100);\n  --lookbook-nav-item-active: var(--lookbook-accent-50);\n  --lookbook-input-bg: var(--lookbook-white);\n  --lookbook-input-border: var(--lookbook-base-300);\n  --lookbook-input-border-focus: var(--lookbook-accent-200);\n  --lookbook-input-text: var(--lookbook-base-600);\n  --lookbook-input-text-placeholder: var(--lookbook-base-400);\n  --lookbook-input-toggle: var(--lookbook-base-300);\n  --lookbook-input-toggle-active: var(--lookbook-accent-500);\n  --lookbook-prose-bg: var(--lookbook-white);\n  --lookbook-prose-text: var(--lookbook-base-600);\n  --lookbook-prose-link: var(--lookbook-accent-900);\n  --lookbook-tabs-text: var(--lookbook-base-500);\n  --lookbook-tabs-text-hover: var(--lookbook-base-700);\n  --lookbook-tabs-text-disabled: var(--lookbook-base-300);\n  --lookbook-tabs-border-active: var(--lookbook-accent-400);\n  --lookbook-viewport-handle: var(--lookbook-white);\n  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);\n  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);\n  --lookbook-sidebar-bg: var(--lookbook-base-50);\n  --lookbook-page-bg: var(--lookbook-white);\n  --lookbook-drawer-bg: var(--lookbook-base-50);\n  --lookbook-header-bg: var(--lookbook-accent-600);\n  --lookbook-header-text: var(--lookbook-white);\n  --lookbook-header-border: var(--lookbook-accent-700);\n  --lookbook-blank-slate-title: var(--lookbook-accent-600);\n  --lookbook-branding-text: var(--lookbook-header-text);\n  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);\n}\n"],"names":[],"version":3,"file":"zinc.css.map","sourceRoot":"../../../../"}

data/public/lookbook-assets/js/lookbook.js

@@ -11421,7 +11421,7 @@ function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
                 this.warn("Could not find copy target");
                 return false;
             }
-            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerText.trim());
+            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
             await window.navigator.clipboard.writeText(content);
             this.copied = true;
             if (copyTimeout) clearTimeout(copyTimeout);