Merge branch 'master' into stack-bg-color

Author: jasonvarga

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/vue3-vite';
+import { resolve } from 'path';
 
 const config: StorybookConfig = {
     stories: [
@@ -16,6 +17,15 @@ const config: StorybookConfig = {
             docgen: 'vue-component-meta'
         }
     },
+    async viteFinal(config) {
+        if (config.resolve) {
+            config.resolve.alias = {
+                ...config.resolve.alias,
+                '@api': resolve(process.cwd(), 'resources/js/api.js'),
+            };
+        }
+        return config;
+    },
 };
 
 export default config;

.storybook/manager-head.html

@@ -1,3 +1,8 @@
+<link rel="icon" type="image/x-icon" href="favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">

.storybook/preview-head.html

@@ -1,3 +1,8 @@
+<link rel="icon" type="image/x-icon" href="favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+
 <link rel="preconnect" href="https://use.typekit.net" crossorigin>
 <link rel="preconnect" href="https://p.typekit.net" crossorigin>
 <link rel="stylesheet" href="https://use.typekit.net/wyy0pka.css"/>

.storybook/preview.ts

@@ -1,14 +1,19 @@
-import type { Preview } from '@storybook/vue3-vite';
-import { setup } from '@storybook/vue3';
-import { create as createTheme } from 'storybook/theming';
-import { router } from '@inertiajs/vue3';
-import { action } from 'storybook/actions';
+import type {Preview} from '@storybook/vue3-vite';
+import {setup} from '@storybook/vue3';
+import {create as createTheme} from 'storybook/theming';
+import {router} from '@inertiajs/vue3';
+import {action} from 'storybook/actions';
 import './storybook.css';
 import './theme.css';
-import { translate } from '@/translations/translator';
+import {translate} from '@/translations/translator';
 import registerUiComponents from '@/bootstrap/ui';
 import DateFormatter from '@/components/DateFormatter';
 import cleanCodeSnippet from './clean-code-snippet';
+import PortalVue from 'portal-vue';
+import FullscreenHeader from '@/components/publish/FullscreenHeader.vue';
+import Portal from '@/components/portals/Portal.vue';
+import PortalTargets from '@/components/portals/PortalTargets.vue';
+import { portals, stacks } from '@api';
 
 // Intercept Inertia navigation and log to Actions tab.
 router.on('before', (event) => {
@@ -18,8 +23,43 @@ router.on('before', (event) => {
 
 setup(async (app) => {
   window.__ = translate;
+
+  window.Statamic = {
+      $config: {
+          get(key) {
+              const config = {
+                  linkToDocs: true,
+                  paginationSize: 50,
+                  paginationSizeOptions: [10, 25, 50, 100, 500],
+              };
+
+              return config[key] ?? null;
+          }
+      },
+      $commandPalette: {
+          add(command) {
+              //
+          }
+      },
+      $progress: {
+          loading(name, loading) {
+              //
+          }
+      }
+  };
+
   app.config.globalProperties.__ = translate;
   app.config.globalProperties.$date = new DateFormatter;
+  app.config.globalProperties.cp_url = (url) => url;
+  app.config.globalProperties.$portals = portals;
+  app.config.globalProperties.$stacks = stacks;
+
+  app.use(PortalVue, { portalName: 'v-portal' });
+
+  app.component('portal', Portal);
+  app.component('PortalTargets', PortalTargets);
+  app.component('publish-field-fullscreen-header', FullscreenHeader);
+
   await registerUiComponents(app);
 });
 
@@ -50,11 +90,11 @@ const preview: Preview = {
         options: {
             storySort: {
                 order: [
-                    // 'Getting Started',
-                    // 'Installation',
-                    '*',
-                    'Components'
+                    'Overview',
+                    'Components',
+                    '*'
                 ],
+                method: 'alphabetical',
             },
         },
     },
@@ -87,7 +127,10 @@ const preview: Preview = {
                 }
             }
 
-            return story();
+            return {
+                components: { PortalTargets },
+                template: '<div><story /><PortalTargets /></div>',
+            };
         },
     ],
 };

.storybook/public/apple-touch-icon.png

@@ -1,31 +1,34 @@
 @import 'tailwindcss';
 @import '../resources/css/ui.css';
+@import '../resources/css/core/utilities.css';
+@import '../resources/css/elements/tables.css';
+@import '../resources/css/components/stacks.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
-.sbdocs h1,
-.sbdocs h2,
-.sbdocs h3,
-.sbdocs h4,
-.sbdocs h5,
-.sbdocs h6 {
+.sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1),
+.sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2),
+.sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3),
+.sbdocs h4:not(.sbdocs-preview *, .sbdocs-preview h4),
+.sbdocs h5:not(.sbdocs-preview *, .sbdocs-preview h5),
+.sbdocs h6:not(.sbdocs-preview *, .sbdocs-preview h6) {
     font-family: p22-mackinac-pro, serif;
 }
 
-.sbdocs h1 {
+.sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1) {
     font-size: 2.5rem;
 }
 
-.sbdocs h2 {
+.sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2) {
     font-size: 1.75rem;
     font-weight: 600;
 }
 
-.sbdocs h3 {
+.sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3) {
     font-size: 1.25rem;
 }
 
-.sbdocs p,
-.sbdocs li {
+.sbdocs p:not(.sbdocs-preview *, .sbdocs-preview p),
+.sbdocs li:not(.sbdocs-preview *, .sbdocs-preview li) {
     font-size: 1rem;
     line-height: 1.6;
     font-weight: 350;
@@ -44,3 +47,11 @@
 .dark .sbdocs-preview {
     background: var(--theme-color-content-bg);
 }
+
+.docs-story div[scale="1"] {
+    transform: none !important;
+}
+
+.stacks-on-stacks {
+    z-index: 100;
+}

.storybook/public/favicon-16x16.png

@@ -40,3 +40,4 @@ manually copy them here.
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
     }
 }
+