[6.x] Add MiddleEllipsis component to Storybook (#14215)

Author: duncanmcclean

resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue

@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
 import truncateOnResize from './TruncateText.js';
 
 const props = defineProps({
+    /** The text to display. Will be truncated from the middle when it overflows its container. */
     text: { type: String, required: true },
 });
 

resources/js/stories/MiddleEllipsis.stories.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { MiddleEllipsis } from '@ui';
+
+const meta = {
+    title: 'Components/MiddleEllipsis',
+    component: MiddleEllipsis,
+    argTypes: {
+        text: {
+            control: 'text',
+        },
+    },
+} satisfies Meta<typeof MiddleEllipsis>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        text: 'uploads/images/2024/vacation-photos/IMG_20240615_143256.jpg',
+    },
+    decorators: [
+        () => ({
+            template: '<div style="width: 250px;"><story /></div>',
+        }),
+    ],
+};
+
+const introCode = `
+<MiddleEllipsis text="uploads/images/2024/vacation-photos/IMG_20240615_143256.jpg" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: introCode },
+        },
+    },
+    render: () => ({
+        components: { MiddleEllipsis },
+        template: `
+            <div style="width: 250px;">
+                <MiddleEllipsis text="uploads/images/2024/vacation-photos/IMG_20240615_143256.jpg" />
+            </div>
+        `,
+    }),
+};
+
+const widthsCode = `
+<div style="width: 500px;"><MiddleEllipsis :text="text" /></div>
+<div style="width: 400px;"><MiddleEllipsis :text="text" /></div>
+<div style="width: 300px;"><MiddleEllipsis :text="text" /></div>
+<div style="width: 200px;"><MiddleEllipsis :text="text" /></div>
+`;
+
+export const _DifferentWidths: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: widthsCode },
+        },
+    },
+    render: () => ({
+        components: { MiddleEllipsis },
+        setup() {
+            const text = 'uploads/images/2024/vacation-photos/IMG_20240615_143256.jpg';
+            return { text };
+        },
+        template: `
+            <div class="space-y-4">
+                <div>
+                    <div class="text-xs text-gray-600 mb-1">500px</div>
+                    <div style="width: 500px;"><MiddleEllipsis :text="text" /></div>
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-1">400px</div>
+                    <div style="width: 400px;"><MiddleEllipsis :text="text" /></div>
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-1">300px</div>
+                    <div style="width: 300px;"><MiddleEllipsis :text="text" /></div>
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-1">200px</div>
+                    <div style="width: 200px;"><MiddleEllipsis :text="text" /></div>
+                </div>
+            </div>
+        `,
+    }),
+};
+
+const resizableCode = `
+<div style="resize: horizontal; overflow: auto; width: 250px;">
+    <MiddleEllipsis text="uploads/images/2024/vacation-photos/IMG_20240615_143256.jpg" />
+</div>
+`;
+
+export const _Resizable: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: resizableCode },
+        },
+    },
+    render: () => ({
+        components: { MiddleEllipsis },
+        template: `
+            <div>
+                <div class="text-xs text-gray-600 mb-2">Drag the corner to resize</div>
+                <div class="border border-dashed rounded" style="resize: horizontal; overflow: auto; min-width: 100px; max-width: 500px; width: 250px; padding: 8px;">
+                    <MiddleEllipsis text="uploads/images/2024/vacation-photos/IMG_20240615_143256.jpg" />
+                </div>
+            </div>
+        `,
+    }),
+};

resources/js/stories/docs/MiddleEllipsis.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as MiddleEllipsisStories from '../MiddleEllipsis.stories';
+
+<Meta of={MiddleEllipsisStories} />
+
+# MiddleEllipsis
+Truncates text from the middle when it overflows its container, preserving both the beginning and end of the string. This is useful for displaying file paths, URLs, and other strings where context at both ends is important.
+<Canvas of={MiddleEllipsisStories._DocsIntro} sourceState={'shown'} />
+
+## Responsive Behavior
+The component fills its container and automatically truncates when needed. The full text is always available in the element's `title` attribute for hover tooltips.
+<Canvas of={MiddleEllipsisStories._DifferentWidths} sourceState={'shown'} />
+
+## Live Resizing
+The truncation updates in real-time as the container is resized. Try dragging the corner of the box below.
+<Canvas of={MiddleEllipsisStories._Resizable} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={MiddleEllipsisStories} />