lookbook 0.8.0 → 1.0.0.beta.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +43 -830
- data/app/assets/lookbook/css/lookbook.css +55 -0
- data/app/assets/lookbook/css/themes/blue.css +42 -0
- data/app/assets/lookbook/css/themes/indigo.css +42 -0
- data/app/assets/lookbook/css/themes/zinc.css +42 -0
- data/app/assets/lookbook/css/{tooltip_theme.css → tooltip.css} +14 -8
- data/app/assets/lookbook/js/app.js +64 -61
- data/app/assets/lookbook/js/components/clipboard.js +47 -0
- data/app/assets/lookbook/js/components/tooltip.js +30 -0
- data/app/assets/lookbook/js/config.js +7 -4
- data/app/assets/lookbook/js/helpers/build.js +22 -0
- data/app/assets/lookbook/js/helpers/dom.js +45 -0
- data/app/assets/lookbook/js/helpers/layout.js +21 -0
- data/app/assets/lookbook/js/helpers/request.js +16 -0
- data/app/assets/lookbook/js/helpers/string.js +11 -0
- data/app/assets/lookbook/js/lib/socket.js +4 -3
- data/app/assets/lookbook/js/lib/tippy.js +8 -0
- data/app/assets/lookbook/js/lookbook.js +61 -0
- data/app/assets/lookbook/js/plugins/logger.js +39 -0
- data/app/assets/lookbook/js/stores/filter.js +2 -2
- data/app/assets/lookbook/js/stores/inspector.js +22 -16
- data/app/assets/lookbook/js/stores/layout.js +101 -5
- data/app/assets/lookbook/js/stores/nav.js +17 -16
- data/app/assets/lookbook/js/stores/pages.js +4 -2
- data/app/assets/lookbook/js/stores/settings.js +7 -0
- data/app/assets/lookbook/js/stores/workbench.js +29 -0
- data/app/components/lookbook/button/component.html.erb +28 -0
- data/app/components/lookbook/button/component.js +55 -0
- data/app/components/lookbook/button/component.rb +39 -0
- data/app/components/lookbook/button_group/component.html.erb +3 -0
- data/app/components/lookbook/button_group/component.rb +18 -0
- data/app/components/lookbook/code/component.css +57 -0
- data/app/components/lookbook/code/component.html.erb +10 -0
- data/app/components/lookbook/code/component.js +3 -0
- data/app/components/lookbook/code/component.rb +56 -0
- data/app/components/lookbook/code/highlight_github_light.css +217 -0
- data/app/components/lookbook/component.rb +41 -0
- data/app/components/lookbook/copy_button/component.html.erb +11 -0
- data/app/components/lookbook/copy_button/component.js +16 -0
- data/app/components/lookbook/copy_button/component.rb +23 -0
- data/app/components/lookbook/dimensions_display/component.html.erb +10 -0
- data/app/components/lookbook/dimensions_display/component.js +30 -0
- data/app/components/lookbook/dimensions_display/component.rb +18 -0
- data/app/components/lookbook/embed/component.html.erb +50 -0
- data/app/components/lookbook/embed/component.js +39 -0
- data/app/components/lookbook/embed/component.rb +22 -0
- data/app/components/lookbook/filter/component.html.erb +17 -0
- data/app/components/lookbook/filter/component.js +21 -0
- data/app/components/lookbook/filter/component.rb +15 -0
- data/app/components/lookbook/header/component.html.erb +79 -0
- data/app/components/lookbook/header/component.rb +9 -0
- data/app/components/lookbook/icon/component.css +11 -0
- data/app/components/lookbook/icon/component.html.erb +5 -0
- data/app/components/lookbook/icon/component.js +5 -0
- data/app/components/lookbook/icon/component.rb +23 -0
- data/app/components/lookbook/nav/component.html.erb +33 -0
- data/app/components/lookbook/nav/component.js +52 -0
- data/app/components/lookbook/nav/component.rb +37 -0
- data/app/components/lookbook/nav/item/component.html.erb +23 -0
- data/app/components/lookbook/nav/item/component.js +66 -0
- data/app/components/lookbook/nav/item/component.rb +84 -0
- data/app/components/lookbook/params_editor/component.html.erb +3 -0
- data/app/components/lookbook/params_editor/component.js +12 -0
- data/app/components/lookbook/params_editor/component.rb +11 -0
- data/app/components/lookbook/params_editor/field/component.html.erb +50 -0
- data/app/components/lookbook/params_editor/field/component.js +36 -0
- data/app/components/lookbook/params_editor/field/component.rb +41 -0
- data/app/components/lookbook/prose/component.css +12 -0
- data/app/components/lookbook/prose/component.html.erb +3 -0
- data/app/components/lookbook/prose/component.rb +26 -0
- data/app/components/lookbook/split_layout/component.html.erb +13 -0
- data/app/components/lookbook/split_layout/component.js +151 -0
- data/app/components/lookbook/split_layout/component.rb +11 -0
- data/app/components/lookbook/tabbed_content/component.html.erb +5 -0
- data/app/components/lookbook/tabbed_content/component.js +21 -0
- data/app/components/lookbook/tabbed_content/component.rb +20 -0
- data/app/components/lookbook/tabbed_content/section/component.html.erb +8 -0
- data/app/components/lookbook/tabbed_content/section/component.rb +9 -0
- data/app/components/lookbook/tabs/component.css +8 -0
- data/app/components/lookbook/tabs/component.html.erb +14 -0
- data/app/components/lookbook/tabs/component.js +107 -0
- data/app/components/lookbook/tabs/component.rb +30 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +14 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.rb +16 -0
- data/app/components/lookbook/tabs/tab/component.html.erb +18 -0
- data/app/components/lookbook/tabs/tab/component.rb +16 -0
- data/app/components/lookbook/tag_component.rb +29 -0
- data/app/components/lookbook/toolbar/component.css +16 -0
- data/app/components/lookbook/toolbar/component.html.erb +5 -0
- data/app/components/lookbook/toolbar/component.rb +26 -0
- data/app/components/lookbook/viewport/component.css +11 -0
- data/app/components/lookbook/viewport/component.html.erb +57 -0
- data/app/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js} +57 -14
- data/app/components/lookbook/viewport/component.rb +21 -0
- data/app/controllers/lookbook/application_controller.rb +16 -5
- data/app/controllers/lookbook/pages_controller.rb +18 -8
- data/app/controllers/lookbook/previews_controller.rb +60 -23
- data/app/helpers/lookbook/application_helper.rb +5 -1
- data/app/helpers/lookbook/component_helper.rb +22 -10
- data/app/helpers/lookbook/output_helper.rb +8 -4
- data/app/helpers/lookbook/page_helper.rb +13 -21
- data/app/views/layouts/lookbook/application.html.erb +76 -28
- data/app/views/layouts/lookbook/inspector.html.erb +7 -0
- data/app/views/layouts/lookbook/page.html.erb +53 -0
- data/app/views/layouts/lookbook/shell.html.erb +64 -0
- data/app/views/layouts/lookbook/skeleton.html.erb +27 -10
- data/app/views/layouts/lookbook/standalone.html.erb +5 -0
- data/app/views/lookbook/404.html.erb +15 -0
- data/app/views/lookbook/error.html.erb +34 -34
- data/app/views/lookbook/index.html.erb +11 -6
- data/app/views/lookbook/pages/show.html.erb +29 -67
- data/app/views/{layouts/lookbook → lookbook}/preview.html.erb +3 -5
- data/app/views/lookbook/previews/panels/_notes.html.erb +19 -25
- data/app/views/lookbook/previews/panels/_output.html.erb +7 -18
- data/app/views/lookbook/previews/panels/_params.html.erb +13 -15
- data/app/views/lookbook/previews/panels/_preview.html.erb +6 -52
- data/app/views/lookbook/previews/panels/_source.html.erb +7 -16
- data/app/views/lookbook/previews/show.html.erb +130 -24
- data/config/routes.rb +5 -5
- data/lib/lookbook/code_formatter.rb +37 -13
- data/lib/lookbook/collection.rb +19 -16
- data/lib/lookbook/config.rb +125 -0
- data/lib/lookbook/engine.rb +79 -74
- data/lib/lookbook/entity.rb +47 -0
- data/lib/lookbook/error.rb +1 -2
- data/lib/lookbook/features.rb +1 -1
- data/lib/lookbook/markdown.rb +3 -4
- data/lib/lookbook/page.rb +21 -12
- data/lib/lookbook/page_collection.rb +8 -0
- data/lib/lookbook/params.rb +15 -4
- data/lib/lookbook/preview.rb +15 -6
- data/lib/lookbook/preview_collection.rb +8 -0
- data/lib/lookbook/preview_controller.rb +6 -2
- data/lib/lookbook/preview_example.rb +5 -6
- data/lib/lookbook/preview_group.rb +4 -9
- data/lib/lookbook/{code_inspector.rb → source_inspector.rb} +2 -2
- data/lib/lookbook/theme.rb +22 -0
- data/lib/lookbook/utils.rb +10 -2
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +4 -1
- data/lib/tasks/lookbook_tasks.rake +12 -0
- data/public/lookbook-assets/css/app.css +2340 -1
- data/public/lookbook-assets/css/app.css.map +11 -1
- data/public/lookbook-assets/css/lookbook.css +3040 -0
- data/public/lookbook-assets/css/lookbook.css.map +1 -0
- data/public/lookbook-assets/css/themes/blue.css +44 -0
- data/public/lookbook-assets/css/themes/blue.css.map +1 -0
- data/public/lookbook-assets/css/themes/indigo.css +44 -0
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -0
- data/public/lookbook-assets/css/themes/zinc.css +44 -0
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -0
- data/public/lookbook-assets/js/app.js +10861 -1
- data/public/lookbook-assets/js/app.js.map +2571 -1
- data/public/lookbook-assets/js/embed.js +895 -1
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +13529 -0
- data/public/lookbook-assets/js/lookbook.js.map +1 -0
- metadata +127 -114
- data/app/assets/lookbook/css/app.css +0 -161
- data/app/assets/lookbook/css/code_theme.css +0 -214
- data/app/assets/lookbook/js/components/app.js +0 -55
- data/app/assets/lookbook/js/components/code.js +0 -5
- data/app/assets/lookbook/js/components/copy.js +0 -20
- data/app/assets/lookbook/js/components/embed.js +0 -89
- data/app/assets/lookbook/js/components/filter.js +0 -35
- data/app/assets/lookbook/js/components/inspector.js +0 -66
- data/app/assets/lookbook/js/components/nav-group.js +0 -47
- data/app/assets/lookbook/js/components/nav-item.js +0 -29
- data/app/assets/lookbook/js/components/nav.js +0 -28
- data/app/assets/lookbook/js/components/page.js +0 -25
- data/app/assets/lookbook/js/components/param.js +0 -34
- data/app/assets/lookbook/js/components/sidebar.js +0 -18
- data/app/assets/lookbook/js/components/sizes.js +0 -16
- data/app/assets/lookbook/js/components/splitter.js +0 -25
- data/app/assets/lookbook/js/components/tabs.js +0 -52
- data/app/assets/lookbook/js/lib/split.js +0 -15
- data/app/assets/lookbook/js/stores/sidebar.js +0 -26
- data/app/views/layouts/lookbook/basic.html.erb +0 -7
- data/app/views/lookbook/components/_branding.html.erb +0 -8
- data/app/views/lookbook/components/_code.html.erb +0 -17
- data/app/views/lookbook/components/_copy_button.html.erb +0 -11
- data/app/views/lookbook/components/_drawer.html.erb +0 -112
- data/app/views/lookbook/components/_embed.html.erb +0 -39
- data/app/views/lookbook/components/_errors.html.erb +0 -13
- data/app/views/lookbook/components/_filter.html.erb +0 -18
- data/app/views/lookbook/components/_header.html.erb +0 -6
- data/app/views/lookbook/components/_icon.html.erb +0 -5
- data/app/views/lookbook/components/_nav.html.erb +0 -16
- data/app/views/lookbook/components/_nav_collection.html.erb +0 -5
- data/app/views/lookbook/components/_nav_group.html.erb +0 -14
- data/app/views/lookbook/components/_nav_item.html.erb +0 -24
- data/app/views/lookbook/components/_nav_page.html.erb +0 -22
- data/app/views/lookbook/components/_nav_preview.html.erb +0 -13
- data/app/views/lookbook/components/_not_found.html.erb +0 -11
- data/app/views/lookbook/components/_param.html.erb +0 -21
- data/app/views/lookbook/components/_preview.html.erb +0 -77
- data/app/views/lookbook/components/_sidebar.html.erb +0 -69
- data/app/views/lookbook/pages/not_found.html.erb +0 -15
- data/app/views/lookbook/previews/error.html.erb +0 -1
- data/app/views/lookbook/previews/inputs/_select.html.erb +0 -7
- data/app/views/lookbook/previews/inputs/_text.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_textarea.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_toggle.html.erb +0 -13
- data/app/views/lookbook/previews/not_found.html.erb +0 -23
@@ -0,0 +1,55 @@
|
|
1
|
+
@import "tailwindcss/base";
|
2
|
+
@import "tailwindcss/components";
|
3
|
+
@import "tailwindcss/utilities";
|
4
|
+
|
5
|
+
@import "./tooltip.css";
|
6
|
+
|
7
|
+
@import-glob "../../../components/lookbook/**/*/component.css";
|
8
|
+
|
9
|
+
@layer base {
|
10
|
+
html {
|
11
|
+
@apply scroll-smooth h-screen;
|
12
|
+
}
|
13
|
+
|
14
|
+
@media screen and (prefers-reduced-motion: reduce) {
|
15
|
+
html {
|
16
|
+
@apply scroll-auto;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
body {
|
21
|
+
@apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;
|
22
|
+
}
|
23
|
+
|
24
|
+
[x-cloak] {
|
25
|
+
@apply !hidden;
|
26
|
+
}
|
27
|
+
|
28
|
+
pre[class*="language-"] {
|
29
|
+
@apply !p-0 !m-0;
|
30
|
+
}
|
31
|
+
|
32
|
+
::-webkit-scrollbar {
|
33
|
+
@apply w-1 h-1;
|
34
|
+
}
|
35
|
+
|
36
|
+
::-webkit-scrollbar-track {
|
37
|
+
@apply bg-transparent;
|
38
|
+
}
|
39
|
+
|
40
|
+
::-webkit-scrollbar-thumb {
|
41
|
+
@apply transition-colors rounded-full bg-clip-content bg-lookbook-scrollbar;
|
42
|
+
}
|
43
|
+
|
44
|
+
::-webkit-scrollbar-thumb:hover {
|
45
|
+
@apply bg-lookbook-scrollbar-hover;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
@layer components {
|
50
|
+
.form-input {
|
51
|
+
@apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;
|
52
|
+
@apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;
|
53
|
+
@apply rounded-md text-sm w-full bg-lookbook-input;
|
54
|
+
}
|
55
|
+
}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
:root {
|
2
|
+
--lookbook-text: theme("colors.zinc.800");
|
3
|
+
--lookbook-divider: theme("colors.zinc.300");
|
4
|
+
--lookbook-button-text: theme("colors.zinc.400");
|
5
|
+
--lookbook-button-text-hover: theme("colors.blue.600");
|
6
|
+
--lookbook-tooltip: theme("colors.blue.500");
|
7
|
+
--lookbook-tooltip-text: theme("colors.white");
|
8
|
+
--lookbook-scrollbar: theme("colors.zinc.200");
|
9
|
+
--lookbook-scrollbar-hover: theme("colors.zinc.300");
|
10
|
+
--lookbook-toolbar: theme("colors.white");
|
11
|
+
--lookbook-toolbar-divider: var(--lookbook-divider);
|
12
|
+
--lookbook-nav-text: var(--lookbook-text);
|
13
|
+
--lookbook-nav-toggle: theme("colors.zinc.500");
|
14
|
+
--lookbook-nav-icon: theme("colors.blue.500");
|
15
|
+
--lookbook-nav-item-hover: theme("colors.zinc.100");
|
16
|
+
--lookbook-nav-item-active: theme("colors.blue.50");
|
17
|
+
--lookbook-input: theme("colors.white");
|
18
|
+
--lookbook-input-border: theme("colors.zinc.300");
|
19
|
+
--lookbook-input-border-focus: theme("colors.blue.200");
|
20
|
+
--lookbook-input-text: theme("colors.zinc.600");
|
21
|
+
--lookbook-input-text-placeholder: theme("colors.zinc.400");
|
22
|
+
--lookbook-input-toggle: theme("colors.zinc.300");
|
23
|
+
--lookbook-input-toggle-active: theme("colors.blue.500");
|
24
|
+
--lookbook-prose: theme("colors.white");
|
25
|
+
--lookbook-prose-text: theme("colors.zinc.600");
|
26
|
+
--lookbook-prose-link: theme("colors.blue.900");
|
27
|
+
--lookbook-tabs-text: theme("colors.zinc.500");
|
28
|
+
--lookbook-tabs-text-hover: theme("colors.zinc.700");
|
29
|
+
--lookbook-tabs-text-disabled: theme("colors.zinc.300");
|
30
|
+
--lookbook-tabs-highlight: theme("colors.blue.400");
|
31
|
+
--lookbook-viewport-handle: theme("colors.white");
|
32
|
+
--lookbook-viewport-handle-icon: theme("colors.zinc.300");
|
33
|
+
--lookbook-viewport-handle-icon-hover: theme("colors.zinc.700");
|
34
|
+
--lookbook-sidebar: theme("colors.zinc.50");
|
35
|
+
--lookbook-page: theme("colors.white");
|
36
|
+
--lookbook-drawer: theme("colors.zinc.50");
|
37
|
+
--lookbook-header: theme("colors.blue.600");
|
38
|
+
--lookbook-header-text: theme("colors.white");
|
39
|
+
--lookbook-header-border: theme("colors.blue.700");
|
40
|
+
--lookbook-branding-text: var(--lookbook-header-text);
|
41
|
+
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
42
|
+
}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
:root {
|
2
|
+
--lookbook-text: theme("colors.zinc.800");
|
3
|
+
--lookbook-divider: theme("colors.zinc.300");
|
4
|
+
--lookbook-button-text: theme("colors.zinc.400");
|
5
|
+
--lookbook-button-text-hover: theme("colors.indigo.600");
|
6
|
+
--lookbook-tooltip: theme("colors.indigo.500");
|
7
|
+
--lookbook-tooltip-text: theme("colors.white");
|
8
|
+
--lookbook-scrollbar: theme("colors.zinc.200");
|
9
|
+
--lookbook-scrollbar-hover: theme("colors.zinc.300");
|
10
|
+
--lookbook-toolbar: theme("colors.white");
|
11
|
+
--lookbook-toolbar-divider: var(--lookbook-divider);
|
12
|
+
--lookbook-nav-text: var(--lookbook-text);
|
13
|
+
--lookbook-nav-toggle: theme("colors.zinc.500");
|
14
|
+
--lookbook-nav-icon: theme("colors.indigo.500");
|
15
|
+
--lookbook-nav-item-hover: theme("colors.zinc.100");
|
16
|
+
--lookbook-nav-item-active: theme("colors.indigo.50");
|
17
|
+
--lookbook-input: theme("colors.white");
|
18
|
+
--lookbook-input-border: theme("colors.zinc.300");
|
19
|
+
--lookbook-input-border-focus: theme("colors.indigo.200");
|
20
|
+
--lookbook-input-text: theme("colors.zinc.600");
|
21
|
+
--lookbook-input-text-placeholder: theme("colors.zinc.400");
|
22
|
+
--lookbook-input-toggle: theme("colors.zinc.300");
|
23
|
+
--lookbook-input-toggle-active: theme("colors.indigo.500");
|
24
|
+
--lookbook-prose: theme("colors.white");
|
25
|
+
--lookbook-prose-text: theme("colors.zinc.600");
|
26
|
+
--lookbook-prose-link: theme("colors.indigo.900");
|
27
|
+
--lookbook-tabs-text: theme("colors.zinc.500");
|
28
|
+
--lookbook-tabs-text-hover: theme("colors.zinc.700");
|
29
|
+
--lookbook-tabs-text-disabled: theme("colors.zinc.300");
|
30
|
+
--lookbook-tabs-highlight: theme("colors.indigo.400");
|
31
|
+
--lookbook-viewport-handle: theme("colors.white");
|
32
|
+
--lookbook-viewport-handle-icon: theme("colors.zinc.300");
|
33
|
+
--lookbook-viewport-handle-icon-hover: theme("colors.zinc.700");
|
34
|
+
--lookbook-sidebar: theme("colors.zinc.50");
|
35
|
+
--lookbook-page: theme("colors.white");
|
36
|
+
--lookbook-drawer: theme("colors.zinc.50");
|
37
|
+
--lookbook-header: theme("colors.indigo.600");
|
38
|
+
--lookbook-header-text: theme("colors.white");
|
39
|
+
--lookbook-header-border: theme("colors.indigo.700");
|
40
|
+
--lookbook-branding-text: var(--lookbook-header-text);
|
41
|
+
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
42
|
+
}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
:root {
|
2
|
+
--lookbook-text: theme("colors.zinc.800");
|
3
|
+
--lookbook-divider: theme("colors.zinc.300");
|
4
|
+
--lookbook-button-text: theme("colors.zinc.400");
|
5
|
+
--lookbook-button-text-hover: theme("colors.zinc.600");
|
6
|
+
--lookbook-tooltip: theme("colors.zinc.500");
|
7
|
+
--lookbook-tooltip-text: theme("colors.white");
|
8
|
+
--lookbook-scrollbar: theme("colors.zinc.200");
|
9
|
+
--lookbook-scrollbar-hover: theme("colors.zinc.300");
|
10
|
+
--lookbook-toolbar: theme("colors.white");
|
11
|
+
--lookbook-toolbar-divider: var(--lookbook-divider);
|
12
|
+
--lookbook-nav-text: var(--lookbook-text);
|
13
|
+
--lookbook-nav-toggle: theme("colors.zinc.500");
|
14
|
+
--lookbook-nav-icon: theme("colors.zinc.500");
|
15
|
+
--lookbook-nav-item-hover: theme("colors.zinc.100");
|
16
|
+
--lookbook-nav-item-active: theme("colors.zinc.50");
|
17
|
+
--lookbook-input: theme("colors.white");
|
18
|
+
--lookbook-input-border: theme("colors.zinc.300");
|
19
|
+
--lookbook-input-border-focus: theme("colors.zinc.200");
|
20
|
+
--lookbook-input-text: theme("colors.zinc.600");
|
21
|
+
--lookbook-input-text-placeholder: theme("colors.zinc.400");
|
22
|
+
--lookbook-input-toggle: theme("colors.zinc.300");
|
23
|
+
--lookbook-input-toggle-active: theme("colors.zinc.500");
|
24
|
+
--lookbook-prose: theme("colors.white");
|
25
|
+
--lookbook-prose-text: theme("colors.zinc.600");
|
26
|
+
--lookbook-prose-link: theme("colors.zinc.900");
|
27
|
+
--lookbook-tabs-text: theme("colors.zinc.500");
|
28
|
+
--lookbook-tabs-text-hover: theme("colors.zinc.700");
|
29
|
+
--lookbook-tabs-text-disabled: theme("colors.zinc.300");
|
30
|
+
--lookbook-tabs-highlight: theme("colors.zinc.400");
|
31
|
+
--lookbook-viewport-handle: theme("colors.white");
|
32
|
+
--lookbook-viewport-handle-icon: theme("colors.zinc.300");
|
33
|
+
--lookbook-viewport-handle-icon-hover: theme("colors.zinc.700");
|
34
|
+
--lookbook-sidebar: theme("colors.zinc.50");
|
35
|
+
--lookbook-page: theme("colors.white");
|
36
|
+
--lookbook-drawer: theme("colors.zinc.50");
|
37
|
+
--lookbook-header: theme("colors.zinc.600");
|
38
|
+
--lookbook-header-text: theme("colors.white");
|
39
|
+
--lookbook-header-border: theme("colors.zinc.700");
|
40
|
+
--lookbook-branding-text: var(--lookbook-header-text);
|
41
|
+
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
42
|
+
}
|
@@ -1,29 +1,35 @@
|
|
1
|
-
.tippy
|
2
|
-
|
1
|
+
@import "tippy.js/dist/tippy";
|
2
|
+
@import "tippy.js/dist/border";
|
3
|
+
|
4
|
+
.tippy-box[data-theme~="tooltip"] {
|
5
|
+
@apply text-xs opacity-90;
|
6
|
+
|
7
|
+
background-color: var(--lookbook-tooltip);
|
8
|
+
color: var(--lookbook-tooltip-text);
|
3
9
|
|
4
10
|
&[data-placement^="top"] > .tippy-arrow::before {
|
5
|
-
border-top-color:
|
11
|
+
border-top-color: var(--lookbook-tooltip);
|
6
12
|
}
|
7
13
|
|
8
14
|
&[data-placement^="bottom"] > .tippy-arrow::before {
|
9
|
-
border-bottom-color:
|
15
|
+
border-bottom-color: var(--lookbook-tooltip);
|
10
16
|
}
|
11
17
|
|
12
18
|
&[data-placement^="left"] > .tippy-arrow::before {
|
13
|
-
border-left-color:
|
19
|
+
border-left-color: var(--lookbook-tooltip);
|
14
20
|
}
|
15
21
|
|
16
22
|
&[data-placement^="right"] > .tippy-arrow::before {
|
17
|
-
border-right-color:
|
23
|
+
border-right-color: var(--lookbook-tooltip);
|
18
24
|
}
|
19
25
|
}
|
20
26
|
|
21
27
|
.tippy-box[data-theme~="menu"] {
|
22
28
|
border: 1px solid theme("colors.gray.300");
|
23
|
-
@apply bg-white text-gray-600 shadow-
|
29
|
+
@apply bg-white text-gray-600 shadow-lg;
|
24
30
|
|
25
31
|
& > .tippy-content {
|
26
|
-
|
32
|
+
@apply rounded p-0 overflow-hidden;
|
27
33
|
}
|
28
34
|
|
29
35
|
&[data-placement^="top"] > .tippy-arrow::before {
|
@@ -1,72 +1,75 @@
|
|
1
|
-
import
|
2
|
-
import
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import Tooltip from "@ryangjchandler/alpine-tooltip";
|
1
|
+
import createSocket from "./lib/socket";
|
2
|
+
import { morph } from "./helpers/dom";
|
3
|
+
import { fetchHTML } from "./helpers/request";
|
4
|
+
import { isExternalLink } from "./helpers/dom";
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
import previewWindow from "./components/preview-window";
|
11
|
-
import filter from "./components/filter";
|
12
|
-
import param from "./components/param";
|
13
|
-
import sidebar from "./components/sidebar";
|
14
|
-
import nav from "./components/nav";
|
15
|
-
import navItem from "./components/nav-item";
|
16
|
-
import navGroup from "./components/nav-group";
|
17
|
-
import splitter from "./components/splitter";
|
18
|
-
import tabs from "./components/tabs";
|
19
|
-
import copy from "./components/copy";
|
20
|
-
import code from "./components/code";
|
21
|
-
import sizes from "./components/sizes";
|
22
|
-
import embed from "./components/embed";
|
6
|
+
export default function app() {
|
7
|
+
return {
|
8
|
+
version: Alpine.$persist("").as("lookbook-version"),
|
23
9
|
|
24
|
-
|
25
|
-
import initLayoutStore from "./stores/layout";
|
26
|
-
import initNavStore from "./stores/nav";
|
27
|
-
import initSidebarStore from "./stores/sidebar";
|
28
|
-
import initInspectorStore from "./stores/inspector";
|
29
|
-
import initPagesStore from "./stores/pages";
|
10
|
+
location: window.location,
|
30
11
|
|
31
|
-
|
12
|
+
init() {
|
13
|
+
if (window.SOCKET_PATH) {
|
14
|
+
const socket = createSocket(window.SOCKET_PATH);
|
15
|
+
socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
|
16
|
+
}
|
17
|
+
},
|
32
18
|
|
33
|
-
|
34
|
-
|
35
|
-
|
19
|
+
navigateTo(path) {
|
20
|
+
this.debug(`Navigating to ${path}`);
|
21
|
+
history.pushState({}, null, path);
|
22
|
+
this.$dispatch("popstate");
|
23
|
+
},
|
36
24
|
|
37
|
-
|
25
|
+
async handleNavigation() {
|
26
|
+
this.debug("Navigating to ", window.location.pathname);
|
27
|
+
this.$dispatch("navigation:start");
|
28
|
+
this.location = window.location;
|
29
|
+
await this.updateDOM();
|
30
|
+
this.$dispatch("navigation:complete");
|
31
|
+
},
|
38
32
|
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
33
|
+
hijax(evt) {
|
34
|
+
const link = evt.target.closest("a[href]");
|
35
|
+
if (link && !isExternalLink(link)) {
|
36
|
+
evt.preventDefault();
|
37
|
+
this.navigateTo(link.href);
|
38
|
+
}
|
39
|
+
},
|
45
40
|
|
46
|
-
|
41
|
+
async updateDOM() {
|
42
|
+
this.debug("Starting DOM update");
|
43
|
+
this.$dispatch("dom:update-start");
|
44
|
+
try {
|
45
|
+
const { fragment, title } = await fetchHTML(
|
46
|
+
window.location,
|
47
|
+
`#${this.$root.id}`
|
48
|
+
);
|
49
|
+
morph(this.$root, fragment);
|
50
|
+
document.title = title;
|
51
|
+
this.$dispatch("dom:update-complete");
|
52
|
+
this.debug("DOM update complete");
|
53
|
+
} catch (err) {
|
54
|
+
this.error(err);
|
55
|
+
window.location.reload();
|
56
|
+
}
|
57
|
+
},
|
47
58
|
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
Alpine.data("splitter", splitter);
|
52
|
-
Alpine.data("previewWindow", previewWindow);
|
53
|
-
Alpine.data("copy", copy);
|
54
|
-
Alpine.data("code", code);
|
55
|
-
Alpine.data("inspector", inspector);
|
56
|
-
Alpine.data("filter", filter);
|
57
|
-
Alpine.data("param", param);
|
58
|
-
Alpine.data("sizes", sizes);
|
59
|
-
Alpine.data("nav", nav);
|
60
|
-
Alpine.data("tabs", tabs);
|
61
|
-
Alpine.data("navItem", navItem);
|
62
|
-
Alpine.data("navGroup", navGroup);
|
63
|
-
Alpine.data("embed", embed);
|
59
|
+
toggleSidebar() {
|
60
|
+
this.$store.layout.sidebar.hidden = !this.$store.layout.sidebar.hidden;
|
61
|
+
},
|
64
62
|
|
65
|
-
|
63
|
+
closeMobileSidebar() {
|
64
|
+
if (this.$store.layout.mobile && !this.sidebarHidden) {
|
65
|
+
this.toggleSidebar();
|
66
|
+
}
|
67
|
+
},
|
66
68
|
|
67
|
-
|
68
|
-
|
69
|
-
}
|
69
|
+
get sidebarHidden() {
|
70
|
+
return this.$store.layout.sidebar.hidden;
|
71
|
+
},
|
70
72
|
|
71
|
-
|
72
|
-
|
73
|
+
...Alpine.$log,
|
74
|
+
};
|
75
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { decodeEntities } from "../helpers/string";
|
2
|
+
|
3
|
+
function initClipboard(context = {}) {
|
4
|
+
let copyTimeout = null;
|
5
|
+
|
6
|
+
return Object.assign(context, {
|
7
|
+
copied: false,
|
8
|
+
|
9
|
+
async copyToClipboard(target = null) {
|
10
|
+
let targetEl;
|
11
|
+
if (this.$refs.copyTarget) {
|
12
|
+
targetEl = this.$refs.copyTarget;
|
13
|
+
} else if (typeof target === "string") {
|
14
|
+
targetEl = document.querySelector(target);
|
15
|
+
}
|
16
|
+
|
17
|
+
if (!targetEl) {
|
18
|
+
this.warn("Could not find copy target");
|
19
|
+
return false;
|
20
|
+
}
|
21
|
+
|
22
|
+
const content = decodeEntities(targetEl.innerText.trim());
|
23
|
+
|
24
|
+
await window.navigator.clipboard.writeText(content);
|
25
|
+
this.copied = true;
|
26
|
+
|
27
|
+
if (copyTimeout) {
|
28
|
+
clearTimeout(copyTimeout);
|
29
|
+
}
|
30
|
+
|
31
|
+
copyTimeout = setTimeout(() => {
|
32
|
+
this.copied = false;
|
33
|
+
this.onCopyComplete();
|
34
|
+
}, 1000);
|
35
|
+
|
36
|
+
return content;
|
37
|
+
},
|
38
|
+
|
39
|
+
onCopyComplete() {},
|
40
|
+
});
|
41
|
+
}
|
42
|
+
|
43
|
+
export default function clipboardComponent() {
|
44
|
+
return initClipboard({});
|
45
|
+
}
|
46
|
+
|
47
|
+
export { initClipboard };
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import tippy from "../lib/tippy";
|
2
|
+
|
3
|
+
function tooltipCreator({ target }) {
|
4
|
+
const content =
|
5
|
+
this.$el.dataset.tooltipText ||
|
6
|
+
(this.$refs.tooltip ? this.$refs.tooltip.innerHTML : null);
|
7
|
+
if (content) {
|
8
|
+
return tippy(target || this.$refs.tooltipTarget || this.$el, {
|
9
|
+
delay: [200, 0],
|
10
|
+
content,
|
11
|
+
theme: "tooltip",
|
12
|
+
triggerTarget: this.$el,
|
13
|
+
onShow: () => this.$store.settings.showTooltips,
|
14
|
+
});
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
function initTooltip(context, opts) {
|
19
|
+
return tooltipCreator.bind(context)(opts || {});
|
20
|
+
}
|
21
|
+
|
22
|
+
export default function tooltipComponent() {
|
23
|
+
return {
|
24
|
+
init() {
|
25
|
+
initTooltip(this);
|
26
|
+
},
|
27
|
+
};
|
28
|
+
}
|
29
|
+
|
30
|
+
export { initTooltip };
|
@@ -1,21 +1,24 @@
|
|
1
1
|
export default {
|
2
2
|
desktopWidth: 768,
|
3
|
+
wideDesktopWidth: 1200,
|
3
4
|
sidebar: {
|
4
5
|
defaultWidth: 280,
|
5
6
|
minWidth: 200,
|
6
|
-
|
7
|
+
minSectionHeight: 200,
|
8
|
+
},
|
9
|
+
main: {
|
10
|
+
minWidth: 200,
|
7
11
|
},
|
8
12
|
inspector: {
|
9
13
|
drawer: {
|
10
|
-
orientation: "horizontal",
|
11
|
-
defaultPanel: "source",
|
12
14
|
defaultHeight: 300,
|
13
15
|
defaultWidth: 500,
|
14
16
|
minWidth: 350,
|
15
17
|
minHeight: 200,
|
16
18
|
},
|
17
19
|
preview: {
|
18
|
-
|
20
|
+
minHeight: 200,
|
21
|
+
minWidth: 200,
|
19
22
|
},
|
20
23
|
},
|
21
24
|
};
|
@@ -0,0 +1,22 @@
|
|
1
|
+
function getComponents(importObject, path = []) {
|
2
|
+
let components = {};
|
3
|
+
Object.keys(importObject).forEach((key) => {
|
4
|
+
if (key === "default") {
|
5
|
+
components[toCamel(path.join("_"))] = importObject[key];
|
6
|
+
} else {
|
7
|
+
components = {
|
8
|
+
...components,
|
9
|
+
...getComponents(importObject[key], [...path, key]),
|
10
|
+
};
|
11
|
+
}
|
12
|
+
});
|
13
|
+
return components;
|
14
|
+
}
|
15
|
+
|
16
|
+
function toCamel(s) {
|
17
|
+
return s.replace(/([-_][a-z])/gi, ($1) => {
|
18
|
+
return $1.toUpperCase().replace("-", "").replace("_", "");
|
19
|
+
});
|
20
|
+
}
|
21
|
+
|
22
|
+
export { getComponents };
|
@@ -0,0 +1,45 @@
|
|
1
|
+
function morph(from, to) {
|
2
|
+
Alpine.morph(from, to, {
|
3
|
+
key(el) {
|
4
|
+
return el.getAttribute("key") ? el.getAttribute("key") : el.id;
|
5
|
+
},
|
6
|
+
lookahead: true,
|
7
|
+
updating(el, toEl, childrenOnly, skip) {
|
8
|
+
if (
|
9
|
+
el.getAttribute &&
|
10
|
+
el.getAttribute("data-morph-strategy") === "replace"
|
11
|
+
) {
|
12
|
+
el.innerHTML = toEl.innerHTML;
|
13
|
+
return skip();
|
14
|
+
}
|
15
|
+
},
|
16
|
+
});
|
17
|
+
}
|
18
|
+
|
19
|
+
function getElementSize(el, opts = {}) {
|
20
|
+
const style = window.getComputedStyle(el, null);
|
21
|
+
return {
|
22
|
+
width: opts.includeMargins
|
23
|
+
? el.offsetWidth +
|
24
|
+
parseInt(style.getPropertyValue("margin-left")) +
|
25
|
+
parseInt(style.getPropertyValue("margin-right"))
|
26
|
+
: el.offsetWidth,
|
27
|
+
height: opts.includeMargins
|
28
|
+
? el.offsetHeight +
|
29
|
+
parseInt(style.getPropertyValue("margin-top")) +
|
30
|
+
parseInt(style.getPropertyValue("margin-bottom"))
|
31
|
+
: el.offsetHeight,
|
32
|
+
};
|
33
|
+
}
|
34
|
+
|
35
|
+
function isExternalLink(link) {
|
36
|
+
if (link.getAttribute("target") === "_blank") {
|
37
|
+
return true;
|
38
|
+
}
|
39
|
+
if (link.href) {
|
40
|
+
return link.host !== window.location.host;
|
41
|
+
}
|
42
|
+
return false;
|
43
|
+
}
|
44
|
+
|
45
|
+
export { morph, getElementSize, isExternalLink };
|
@@ -0,0 +1,21 @@
|
|
1
|
+
function addMediaQueryListener(condition, callback) {
|
2
|
+
const mediaQueryList = window.matchMedia(condition);
|
3
|
+
const handleChange = (mql) => callback(mql.matches);
|
4
|
+
handleChange(mediaQueryList);
|
5
|
+
mediaQueryList.addEventListener("change", (mql) => handleChange(mql));
|
6
|
+
return mediaQueryList;
|
7
|
+
}
|
8
|
+
|
9
|
+
function observeSize(element, callback = () => {}) {
|
10
|
+
const observer = new ResizeObserver((entries) => {
|
11
|
+
const rect = entries[0].target.getBoundingClientRect();
|
12
|
+
callback({
|
13
|
+
width: Math.round(rect.width),
|
14
|
+
height: Math.round(rect.height),
|
15
|
+
});
|
16
|
+
});
|
17
|
+
observer.observe(element);
|
18
|
+
return observer;
|
19
|
+
}
|
20
|
+
|
21
|
+
export { addMediaQueryListener, observeSize };
|
@@ -0,0 +1,16 @@
|
|
1
|
+
async function fetchHTML(url, selector) {
|
2
|
+
const response = await fetch(url || window.document.location);
|
3
|
+
if (response.ok) {
|
4
|
+
const html = await response.text();
|
5
|
+
const doc = new DOMParser().parseFromString(html, "text/html");
|
6
|
+
return {
|
7
|
+
fragment: selector ? doc.querySelector(selector).outerHTML : null,
|
8
|
+
title: doc.title,
|
9
|
+
doc,
|
10
|
+
};
|
11
|
+
} else {
|
12
|
+
throw new Error(`Error fetching HTML from ${url}`);
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
export { fetchHTML };
|
@@ -0,0 +1,11 @@
|
|
1
|
+
function decodeEntities(content) {
|
2
|
+
var txt = document.createElement("textarea");
|
3
|
+
txt.innerHTML = content;
|
4
|
+
return txt.value;
|
5
|
+
}
|
6
|
+
|
7
|
+
function prefixString(string, prefix = null) {
|
8
|
+
return prefix ? `${prefix}-${string}` : string;
|
9
|
+
}
|
10
|
+
|
11
|
+
export { prefixString, decodeEntities };
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { createConsumer } from "@rails/actioncable";
|
2
2
|
import debounce from "debounce";
|
3
|
+
import { log } from "../plugins/logger";
|
3
4
|
|
4
5
|
export default function socket(endpoint) {
|
5
6
|
const uid = (Date.now() + ((Math.random() * 100) | 0)).toString();
|
@@ -8,14 +9,14 @@ export default function socket(endpoint) {
|
|
8
9
|
addListener(channel, callback) {
|
9
10
|
consumer.subscriptions.create(channel, {
|
10
11
|
received: debounce((data) => {
|
11
|
-
|
12
|
+
log.debug("Lookbook files changed");
|
12
13
|
callback(data);
|
13
14
|
}, 200),
|
14
15
|
connected() {
|
15
|
-
|
16
|
+
log.info("Lookbook websocket connected");
|
16
17
|
},
|
17
18
|
disconnected() {
|
18
|
-
|
19
|
+
log.info("Lookbook websocket disconnected");
|
19
20
|
},
|
20
21
|
});
|
21
22
|
},
|