Skip to content

Commit

Permalink
refactor(ui): improve first run and blank slate messaging
Browse files Browse the repository at this point in the history
  • Loading branch information
@allmarkedup
allmarkedup committed Feb 22, 2023
1 parent 21f8e94 commit 8939817
Show file tree
Hide file tree
Showing 34 changed files with 2,108 additions and 1,900 deletions.
5 changes: 4 additions & 1 deletion app/assets/lookbook/css/themes/blue.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@
--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-message-bg: var(--lookbook-white);
--lookbook-message-border: var(--lookbook-divider);
--lookbook-message-title: var(--lookbook-base-600);
--lookbook-message-text: var(--lookbook-text);
--lookbook-embed-title: var(--lookbook-text);
--lookbook-branding-text: var(--lookbook-header-text);
}
5 changes: 4 additions & 1 deletion app/assets/lookbook/css/themes/green.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@
--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-message-bg: var(--lookbook-white);
--lookbook-message-border: var(--lookbook-divider);
--lookbook-message-title: var(--lookbook-base-600);
--lookbook-message-text: var(--lookbook-text);
--lookbook-embed-title: var(--lookbook-text);
--lookbook-branding-text: var(--lookbook-header-text);
}
5 changes: 4 additions & 1 deletion app/assets/lookbook/css/themes/indigo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@
--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-message-bg: var(--lookbook-white);
--lookbook-message-border: var(--lookbook-divider);
--lookbook-message-title: var(--lookbook-base-600);
--lookbook-message-text: var(--lookbook-text);
--lookbook-embed-title: var(--lookbook-text);
--lookbook-branding-text: var(--lookbook-header-text);
}
5 changes: 4 additions & 1 deletion app/assets/lookbook/css/themes/rose.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@
--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-message-bg: var(--lookbook-white);
--lookbook-message-border: var(--lookbook-divider);
--lookbook-message-title: var(--lookbook-base-600);
--lookbook-message-text: var(--lookbook-text);
--lookbook-embed-title: var(--lookbook-text);
--lookbook-branding-text: var(--lookbook-header-text);
}
5 changes: 4 additions & 1 deletion app/assets/lookbook/css/themes/zinc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@
--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-message-bg: var(--lookbook-white);
--lookbook-message-border: var(--lookbook-divider);
--lookbook-message-title: var(--lookbook-base-600);
--lookbook-message-text: var(--lookbook-text);
--lookbook-embed-title: var(--lookbook-text);
--lookbook-branding-text: var(--lookbook-header-text);
}
1,738 changes: 869 additions & 869 deletions app/assets/lookbook/img/lucide-sprite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/components/lookbook/icon/component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@apply transition block flex-none leading-none;

svg {
@apply w-full h-full stroke-current stroke-2 fill-transparent;
@apply w-full h-full stroke-current fill-transparent;
stroke-linecap: round;
stroke-linejoin: round;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/lookbook/icon/component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
<svg>
<svg stroke-width="<%= stroke %>">
<use :href="`/lookbook-assets/img/lucide-sprite.svg#${iconName}`" x-cloak />
</svg>
<% end %>
5 changes: 4 additions & 1 deletion app/components/lookbook/icon/component.rb
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
module Lookbook
class Icon::Component < Lookbook::BaseComponent
def initialize(name:, size: 4, **html_attrs)
attr_reader :stroke

def initialize(name:, size: 4, stroke: 2, **html_attrs)
@alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
@size = size || 4
@stroke = stroke
super(**html_attrs)
end

Expand Down
33 changes: 33 additions & 0 deletions app/components/lookbook/message/component.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@layer components {
[data-component="message"] {
@apply bg-lookbook-message-bg p-4 xs:p-6 shadow border border-lookbook-divider rounded flex gap-6 w-full;

&.icon-right {
@apply flex-row-reverse items-center;
}

&.icon-left {
@apply items-start;
}

& .message-title {
@apply text-base text-lookbook-message-title truncate uppercase font-bold tracking-wide mb-2;
}

& .message-icon {
@apply flex-none opacity-30 hidden xs:block;
}

&.theme-error {
@apply border-red-200;

& .message-title {
@apply text-red-700;
}

& .message-icon {
@apply text-red-600 opacity-50;
}
}
}
}
26 changes: 26 additions & 0 deletions app/components/lookbook/message/component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<%= render_component_tag class: {
"icon-left": (icon_position == :left),
"icon-right": (icon_position == :right),
"theme-info": (theme == :info),
"theme-error": (theme == :error),
} do %>
<% if icon_name %>
<div class="message-icon">
<% if icon_name == :logo %>
<%= lookbook_render :logo, stroke: 1, size: 10 %>
<% else %>
<%= icon icon_name, stroke: 1, size: 10 %>
<% end %>
</div>
<% end %>
<div class="flex-grow">
<% if title %>
<h4 class="message-title">
<%= title %>
</h4>
<% end %>
<div class="opacity-70">
<%= lookbook_render :prose, size: :sm, content: content %>
</div>
</div>
<% end %>
13 changes: 13 additions & 0 deletions app/components/lookbook/message/component.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module Lookbook
class Message::Component < Lookbook::BaseComponent
attr_reader :title, :icon_name, :icon_position, :theme

def initialize(title: nil, icon: nil, icon_position: :left, theme: :info, **html_attrs)
@title = title
@icon_name = icon
@icon_position = icon_position
@theme = theme
super(**html_attrs)
end
end
end
1 change: 1 addition & 0 deletions app/controllers/lookbook/application_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ def assign_instance_vars
@config = Lookbook.config
@engine = Lookbook.engine
@embed = !!params[:lookbook_embed]
@blank_slate = Engine.pages.none? && Engine.previews.none?
end

def raise_not_found(message = "Page not found")
Expand Down
16 changes: 10 additions & 6 deletions app/views/lookbook/errors/not_found.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<div class="flex flex-col items-center justify-center w-full h-full bg-checked">
<div class="text-center bg-white px-8 py-6 border border-gray-200 rounded min-w-[400px text-lookbook-prose-text">
<h4 class="text-base tracking-tight mb-2"><%= @error.message %></h4>
<p class="opacity-70">It may have been moved or deleted.</p>
</div>
</div>
<%= render "lookbook/partials/blank_slate" do %>
<%= lookbook_render :message,
id: "not-found-message",
title: @error.message,
icon: :file_x,
icon_position: :right,
theme: :error do %>
<%= @error.detail || "It may have been moved or deleted." %>
<% end %>
<% end %>
53 changes: 29 additions & 24 deletions app/views/lookbook/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
<div id="landing" class="flex flex-col items-center justify-center h-full w-full">
<div class="text-center" id="landing-<%= @previews.any? ? "with" : "no" %>-content">
<% if @config.project_name.downcase == "lookbook" %>
<div class="flex justify-center pb-4">
<svg class="flex-none mx-auto w-[140px]" viewBox="0 0 275 36">
<g fill-rule="nonzero" fill="none">
<path d="M4.536 35c-1.408 0-2.504-.392-3.288-1.176-.784-.784-1.176-1.88-1.176-3.288V5.576c0-1.44.384-2.544 1.152-3.312.768-.768 1.856-1.152 3.264-1.152 1.44 0 2.536.384 3.288 1.152.752.768 1.128 1.872 1.128 3.312v22.08h11.712c1.216 0 2.152.312 2.808.936.656.624.984 1.528.984 2.712 0 1.184-.328 2.096-.984 2.736-.656.64-1.592.96-2.808.96H4.536ZM42.066.632c3.425 0 6.425.72 9 2.16 2.577 1.44 4.585 3.464 6.025 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528C37.17 1.04 39.507.632 42.067.632Zm0 7.392c-1.663 0-3.095.392-4.295 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664 1.696 0 3.136-.4 4.32-1.2 1.07-.723 1.917-1.733 2.543-3.031-.39-1.314-.934-2.855-2.087-5.286-.07-.147-.07-.233 0-.38l2.187-5.84a8.262 8.262 0 0 0-1.06-1.735c-1.407-1.76-3.375-2.64-5.903-2.64ZM80.27.632c3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528C75.373 1.04 77.71.632 80.27.632Zm0 7.392c-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664 1.696 0 3.136-.4 4.32-1.2.999-.675 1.804-1.6 2.416-2.775-.395-1.37-.933-2.95-2.162-5.542-.07-.147-.07-.233 0-.38l2.276-6.08a8.166 8.166 0 0 0-.946-1.495c-1.408-1.76-3.376-2.64-5.904-2.64Zm26.299 27.408c-1.408 0-2.496-.392-3.264-1.176-.768-.784-1.152-1.88-1.152-3.288V5.192c0-1.472.384-2.584 1.152-3.336.768-.752 1.856-1.128 3.264-1.128 1.44 0 2.536.376 3.288 1.128.752.752 1.128 1.864 1.128 3.336v10.464h.096l11.664-12.864a7.705 7.705 0 0 1 1.944-1.512c.688-.368 1.464-.552 2.328-.552 1.344 0 2.312.344 2.904 1.032.592.688.864 1.488.816 2.4-.048.912-.424 1.752-1.128 2.52l-11.616 12.336v-3.6l12.192 13.776c.832.928 1.248 1.88 1.248 2.856s-.328 1.784-.984 2.424c-.656.64-1.624.96-2.904.96-1.088 0-1.96-.216-2.616-.648-.656-.432-1.368-1.08-2.136-1.944L111.08 19.736h-.096v11.232c0 1.408-.368 2.504-1.104 3.288-.736.784-1.84 1.176-3.312 1.176Z" fill="#919191"/>
<path d="M140.403 35c-1.504 0-2.648-.392-3.432-1.176-.784-.784-1.176-1.912-1.176-3.384V5.72c0-1.472.392-2.6 1.176-3.384.784-.784 1.928-1.176 3.432-1.176h11.712c2.432 0 4.504.36 6.216 1.08 1.712.72 3.016 1.736 3.912 3.048.896 1.312 1.344 2.848 1.344 4.608 0 1.984-.568 3.68-1.704 5.088-1.136 1.408-2.68 2.368-4.632 2.88v-.768c2.304.416 4.088 1.344 5.352 2.784 1.264 1.44 1.896 3.28 1.896 5.52 0 2.976-1.064 5.32-3.192 7.032-2.128 1.712-5.032 2.568-8.712 2.568h-12.192Zm3.84-6.48h7.152c1.632 0 2.824-.312 3.576-.936.752-.624 1.128-1.56 1.128-2.808 0-1.248-.376-2.176-1.128-2.784-.752-.608-1.944-.912-3.576-.912h-7.152v7.44Zm0-13.92h6.288c1.6 0 2.776-.288 3.528-.864.752-.576 1.128-1.456 1.128-2.64 0-1.184-.376-2.056-1.128-2.616-.752-.56-1.928-.84-3.528-.84h-6.288v6.96Zm41.034 20.928c-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528 2.112-.816 4.448-1.224 7.008-1.224 3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224Zm0-7.392c1.696 0 3.136-.4 4.32-1.2 1.184-.8 2.096-1.952 2.736-3.456.64-1.504.96-3.312.96-5.424 0-3.168-.704-5.632-2.112-7.392-1.408-1.76-3.376-2.64-5.904-2.64-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664Zm38.203 7.392c-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528 2.112-.816 4.448-1.224 7.008-1.224 3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224Zm0-7.392c1.696 0 3.136-.4 4.32-1.2 1.184-.8 2.096-1.952 2.736-3.456.64-1.504.96-3.312.96-5.424 0-3.168-.704-5.632-2.112-7.392-1.408-1.76-3.376-2.64-5.904-2.64-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664Zm26.299 7.296c-1.408 0-2.496-.392-3.264-1.176-.768-.784-1.152-1.88-1.152-3.288V5.192c0-1.472.384-2.584 1.152-3.336.768-.752 1.856-1.128 3.264-1.128 1.44 0 2.536.376 3.288 1.128.752.752 1.128 1.864 1.128 3.336v10.464h.096l11.664-12.864a7.705 7.705 0 0 1 1.944-1.512c.688-.368 1.464-.552 2.328-.552 1.344 0 2.312.344 2.904 1.032.592.688.864 1.488.816 2.4-.048.912-.424 1.752-1.128 2.52l-11.616 12.336v-3.6l12.192 13.776c.832.928 1.248 1.88 1.248 2.856s-.328 1.784-.984 2.424c-.656.64-1.624.96-2.904.96-1.088 0-1.96-.216-2.616-.648-.656-.432-1.368-1.08-2.136-1.944L254.29 19.736h-.096v11.232c0 1.408-.368 2.504-1.104 3.288-.736.784-1.84 1.176-3.312 1.176Z" fill="#ABABAB"/>
</g>
</svg>
</div>
<% elsif @config.project_name != false %>
<h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wide mb-2">
<%= @config.project_name %>
</h5>
<%= render "lookbook/partials/blank_slate" do %>
<% if @blank_slate %>
<%= lookbook_render :message,
id: "welcome-message",
title: "Welcome to your Lookbook!",
icon: :logo do %>
<p>
There isn't much to see yet, but
<%= link_to "component previews",
"#{@config.links.docs}/guide/previews",
target: "_blank"
%>
and
<%= link_to "content pages",
"#{@config.links.docs}/guide/pages",
target: "_blank"
%>
will show up here as soon as they are added.
</p>
<% end %>
<% else %>
<%= lookbook_render :message,
id: "get-started-message",
title: @config.project_name,
icon: :inspect,
icon_position: :right do %>
<p>Select a preview from the nav to get started.</p>
<% end %>
<% end %>
<div class="opacity-60">
<% if @previews.any? %>
<p>Select a preview from the nav to get started.</p>
<% else %>
<p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
<% end %>
</div>
</div>
</div>
<% end %>
7 changes: 7 additions & 0 deletions app/views/lookbook/partials/_blank_slate.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="flex justify-center w-full h-full bg-checked">
<div class="px-4 py-6 xs:py-8 sm:p-8 md:p-12">
<div class="w-full xs:w-auto xs:mx-auto xs:min-w-[440px] xs:max-w-[680px]">
<%= yield %>
</div>
</div>
</div>
5 changes: 5 additions & 0 deletions config/app.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ shared:
debug_menu: false
experimental_features: false

links:
docs: https://v2.lookbook.build
demo: https://v2-demo.lookbook.build
repo: https://github.com/ViewComponent/lookbook/tree/v2

development:
debug_menu: true

Expand Down
Loading

0 comments on commit 8939817

Please sign in to comment.