lookbook 1.5.1 → 2.0.0.beta.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11cae6b11c0235c9c609462d70782b48f95e8f33a654296cabbf4e081cab4c27
-  data.tar.gz: df711457ea8f7c7b2ea8956cf621130bf508b539c17563efc0d40592161430e5
+  metadata.gz: 01c53cc76e29d3d9862a67b29bbabd927c623003bc55355415775c778ec0c99a
+  data.tar.gz: e8bf4e7538bf3224e70a00458cddea148c594cf4a61287dce978c15793873dfe
 SHA512:
-  metadata.gz: e0adbfc0d81f98a8876c3e5b5325808c4b3120c702fe2a4b85af3d4599cffaf869bb0b5ba453685c2f31b6b1a1080750bdc77da9c4a9d0d940187aa9f6846490
-  data.tar.gz: cc581f238ea0f3fc00108350a6ab7657cd41a1ee9ea0f946a91a2d0baf86f11dcd532ca0bbdc6fe1a3f67e275e9f9c976be4bcb0a6726555391e34576fc00fdc
+  metadata.gz: 7d2049f0d6b79e2994596a3cbe76e14e247ae75f15f137b0ccd8ed6863dc71637145765beb7c2b826d84f2b350af2e88d72e746667b809f82626e7a70aa4d03f
+  data.tar.gz: afc5b06b19975253e8f9125723fc1e11d3857ae53af9f5831b9b4c59f1c79fa5d620ffdeed3177a30175c9ad98e92b19b5ba4a37508c0940520ac63ac13fa7bf

data/README.md

@@ -1,26 +1,28 @@
 <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.
+Lookbook is a **UI development environment** for Ruby on Rails applications.
 
 [![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)
+[![CI status](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg?branch=v2)](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml)
 <br>
 
-## Documentation
+---
 
-✨ **Lookbook guide and API docs**: [lookbook.build](https://lookbook.build)
+**🚨 This is the v2.0 development branch! 🚨**
 
-> _Looking for pre-v1.0 documentation? [Head over here](https://github.com/ViewComponent/lookbook/tree/0.9.x)._
+For the current stable release see the [main branch](https://github.com/ViewComponent/lookbook/tree/main).
 
+---
 
-## Demo
+## Resources
 
-✨ **Online Demo**: [lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook)
+* 🚧 **Docs**: [v2.lookbook.build](https://v2.lookbook.build)
+* 🚧 **Demo**: [v2-demo.lookbook.build/](http://v2-demo.lookbook.build/) ([repo here](https://github.com/ViewComponent/lookbook-demo/tree/v2))
 
-✨ **Demo repo**: [github.com/ViewComponent/lookbook-demo](https://github.com/ViewComponent/lookbook-demo)
+<br>
 
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
+[![Lookbook UI](.github/assets/lookbook_ui.png)](http://v2-demo.lookbook.build/)
 
 
 ## Development
@@ -30,21 +32,9 @@ Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails
 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`
-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.
-
 ### 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.

data/app/assets/lookbook/css/lookbook.css

@@ -126,4 +126,13 @@
   input[type="color"]::-webkit-color-swatch {
     @apply border-0 rounded-lg;
   }
+
+  select.compact {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+    border-radius: 0.375rem;
+    padding: 0.26rem 1.5rem 0.26rem 0.6rem;
+    background-size: 1.2em 1.2em;
+    background-position: right 0.4rem center;
+  }
 }

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

@@ -25,8 +25,14 @@
   --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-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
   --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
   --lookbook-scrollbar: var(--lookbook-base-200);
   --lookbook-scrollbar-hover: var(--lookbook-base-300);
   --lookbook-toolbar-bg: var(--lookbook-white);
@@ -62,5 +68,6 @@
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

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

@@ -25,8 +25,14 @@
   --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-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
   --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
   --lookbook-scrollbar: var(--lookbook-base-200);
   --lookbook-scrollbar-hover: var(--lookbook-base-300);
   --lookbook-toolbar-bg: var(--lookbook-white);
@@ -62,5 +68,6 @@
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

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

@@ -25,8 +25,14 @@
   --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-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
   --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
   --lookbook-scrollbar: var(--lookbook-base-200);
   --lookbook-scrollbar-hover: var(--lookbook-base-300);
   --lookbook-toolbar-bg: var(--lookbook-white);
@@ -62,5 +68,6 @@
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

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

@@ -25,8 +25,14 @@
   --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-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
   --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
   --lookbook-scrollbar: var(--lookbook-base-200);
   --lookbook-scrollbar-hover: var(--lookbook-base-300);
   --lookbook-toolbar-bg: var(--lookbook-white);
@@ -62,5 +68,6 @@
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

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

@@ -25,8 +25,14 @@
   --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-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
   --lookbook-tooltip-bg: var(--lookbook-accent-500);
   --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
   --lookbook-scrollbar: var(--lookbook-base-200);
   --lookbook-scrollbar-hover: var(--lookbook-base-300);
   --lookbook-toolbar-bg: var(--lookbook-white);
@@ -62,5 +68,6 @@
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
   --lookbook-blank-slate-title: var(--lookbook-accent-600);
+  --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/app/assets/lookbook/css/tooltip.css

@@ -25,26 +25,29 @@
 }
 
 .tippy-box[data-theme~="menu"] {
-  border: 1px solid theme("colors.gray.300");
-  @apply bg-white text-gray-600 shadow-lg;
+  @apply shadow-lg !max-w-none;
+
+  border: 1px solid var(--lookbook-dropdown-divider);
+  color: var(--lookbook-dropdown-text);
+  background: var(--lookbook-dropdown-bg);
 
   & > .tippy-content {
     @apply rounded p-0 overflow-hidden;
   }
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: white;
+    border-top-color: var(--lookbook-dropdown-bg);
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: white;
+    border-bottom-color: var(--lookbook-dropdown-bg);
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: white;
+    border-left-color: var(--lookbook-dropdown-bg);
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: white;
+    border-right-color: var(--lookbook-dropdown-bg);
   }
 }