@citizenplane/pimp 13.0.0 → 14.0.0

package/src/stories/CpTransitionSize.stories.ts

@@ -0,0 +1,147 @@
+import { computed, ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/CpButton.vue'
+import CpTransitionSize from '@/components/CpTransitionSize.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionSize',
+  component: CpTransitionSize,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['width', 'height'],
+    },
+  },
+} satisfies Meta<typeof CpTransitionSize>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 12px;'
+
+export const Default: Story = {
+  args: {
+    type: 'width',
+  },
+  render: (args) => ({
+    components: { CpTransitionSize, CpButton },
+    setup() {
+      const isShort = ref(true)
+      const dynamicLabel = computed(() => {
+        return isShort.value ? 'Short label' : 'Much longer label'
+      })
+      return { args, isShort, dynamicLabel }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton
+        appearance="primary"
+        color="accent"
+        @click="isShort = !isShort"
+        >
+          <CpTransitionSize v-bind="args">
+            <span>{{ dynamicLabel }}</span>
+          </CpTransitionSize>
+        </CpButton>
+      </div>
+    `,
+  }),
+}
+
+export const HeightTransition: Story = {
+  args: {
+    type: 'height',
+  },
+  render: (args) => ({
+    components: { CpTransitionSize, CpButton },
+    setup() {
+      const isOpen = ref(false)
+      const currentStep = ref(0)
+      const stepCount = 3
+
+      const dialogTitle = computed(() => `Step ${currentStep.value + 1} of ${stepCount}`)
+
+      /** More steps ⇒ more paragraphs (1-based depth). */
+      const paragraphCount = computed(() => (currentStep.value + 1) * 3)
+
+      const openDialog = () => {
+        currentStep.value = 0
+        isOpen.value = true
+      }
+
+      const closeDialog = () => {
+        isOpen.value = false
+        currentStep.value = 0
+      }
+
+      const paragraphStyle = computed(() => {
+        return { margin: 0, whiteSpace: 'normal' }
+      })
+
+      return {
+        args,
+        isOpen,
+        currentStep,
+        stepCount,
+        dialogTitle,
+        paragraphCount,
+        openDialog,
+        closeDialog,
+        paragraphStyle,
+      }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton appearance="primary" color="accent" @click="openDialog">
+          Open stepped dialog
+        </CpButton>
+        <CpTransitionDialog>
+          <CpDialog
+            v-if="isOpen"
+            :max-width="520"
+            :title="dialogTitle"
+            @close="closeDialog"
+          >
+            <CpTransitionSize v-bind="args">
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <p v-for="i in paragraphCount" :key="i" :style="paragraphStyle">
+                  Paragraph {{ i }}. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+                </p>
+              </div>
+            </CpTransitionSize>
+            <template #footer>
+              <div style="display: flex; justify-content: space-between; gap: 8px; width: 100%;">
+                <CpButton
+                  v-if="currentStep > 0"
+                  appearance="secondary"
+                  color="neutral"
+                  @click="currentStep--"
+                >
+                  Back
+                </CpButton>
+                <CpButton
+                  v-if="currentStep < stepCount - 1"
+                  appearance="primary"
+                  color="accent"
+                  @click="currentStep++"
+                >
+                  Next
+                </CpButton>
+                <CpButton
+                  v-if="currentStep === stepCount - 1"
+                  appearance="primary"
+                  color="accent"
+                  @click="closeDialog"
+                >
+                  Done
+                </CpButton>
+              </div>
+            </template>
+          </CpDialog>
+        </CpTransitionDialog>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTransitionSlide.stories.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/CpButton.vue'
+import CpTransitionSlide from '@/components/CpTransitionSlide.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionSlide',
+  component: CpTransitionSlide,
+  argTypes: {
+    slideTo: {
+      control: 'select',
+      options: ['top', 'left'],
+    },
+    mode: {
+      control: 'select',
+      options: ['default', 'in-out', 'out-in'],
+    },
+  },
+} satisfies Meta<typeof CpTransitionSlide>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 60px; min-width: 600px;'
+
+const panelStyle =
+  'min-width: 260px; max-width: 320px; padding: 20px; border-radius: 12px; background: #f3f4f6; text-align: center;'
+
+export const Toggle: Story = {
+  name: 'Toggle',
+  args: {
+    slideTo: 'top',
+    mode: 'out-in',
+  },
+  render: (args) => ({
+    components: { CpTransitionSlide, CpButton },
+    setup() {
+      const showFirst = ref(true)
+      return { args, showFirst }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton appearance="primary" color="accent" @click="showFirst = !showFirst">
+          <CpTransitionSize size="md">
+            <span>{{ showFirst ? 'Show second view' : 'Show first view' }}</span>
+          </CpTransitionSize>
+        </CpButton>
+        <CpTransitionSlide v-bind="args">
+          <div :key="showFirst ? 'a' : 'b'" style="${panelStyle}">
+            <template v-if="showFirst">
+              <strong>View A</strong>
+              <p style="margin: 8px 0 0; font-size: 14px;">Vertical slide (top).</p>
+            </template>
+            <template v-else>
+              <strong>View B</strong>
+              <p style="margin: 8px 0 0; font-size: 14px;">Vertical slide (top).</p>
+            </template>
+          </div>
+        </CpTransitionSlide>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTransitionTabContent.stories.ts

@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpTabs from '@/components/CpTabs.vue'
+import CpTransitionTabContent from '@/components/CpTransitionTabContent.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionTabContent',
+  component: CpTransitionTabContent,
+  argTypes: {
+    duration: {
+      control: { type: 'number', min: 100, max: 800, step: 50 },
+    },
+    direction: { table: { disable: true } },
+  },
+} satisfies Meta<typeof CpTransitionTabContent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const tabs = [
+  { title: 'Details', icon: 'info' },
+  { title: 'History', icon: 'clock' },
+  { title: 'Settings', icon: 'settings' },
+]
+
+const tabBodies = [
+  'Overview and metadata for this item.',
+  'Past changes and audit trail appear here.',
+  'Preferences and access rules for this workspace.',
+]
+
+const layoutStyle = 'display: flex; flex-direction: column; gap: 20px; min-width: 600px;'
+
+const panelStyle =
+  'min-height: 120px; padding: 20px; border-radius: 12px; background: #f3f4f6; font-size: 15px; line-height: 1.5;'
+
+export const Default: Story = {
+  args: {
+    duration: 300,
+  },
+  render: (args) => ({
+    components: { CpTabs, CpTransitionTabContent },
+    setup() {
+      const activeTabIndex = ref(0)
+      const transitionDirection = ref<'forward' | 'backward'>('forward')
+
+      const onTabClick = (index: number) => {
+        if (index === activeTabIndex.value) return
+        transitionDirection.value = index > activeTabIndex.value ? 'forward' : 'backward'
+        activeTabIndex.value = index
+      }
+
+      return {
+        args,
+        tabs,
+        tabBodies,
+        activeTabIndex,
+        transitionDirection,
+        onTabClick,
+        layoutStyle,
+        panelStyle,
+      }
+    },
+    template: `
+      <div :style="layoutStyle">
+        <CpTabs :tabs="tabs" @on-tab-click="onTabClick" />
+        <CpTransitionTabContent v-bind="args" :direction="transitionDirection">
+          <div :key="activeTabIndex" :style="panelStyle">
+            <strong>{{ tabs[activeTabIndex].title }}</strong>
+            <p style="margin: 8px 0 0;">{{ tabBodies[activeTabIndex] }}</p>
+          </div>
+        </CpTransitionTabContent>
+      </div>
+    `,
+  }),
+}

package/src/stories/documentationStyles.ts

@@ -0,0 +1,16 @@
+export const docPageStyle =
+  'padding: 24px; background: #f3f4f6; min-height: 100vh; width: 70vw; box-sizing: border-box;'
+
+export const docSectionStyle =
+  'background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);'
+
+export const docTitleStyle =
+  'margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;'
+
+export const docRowWrapStyle = 'display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;'
+
+export const docRowColumnStyle = 'display: flex; flex-direction: column; gap: 24px;'
+
+export const docCellStyle = 'display: flex; flex-direction: column; gap: 10px; align-items: flex-start;'
+
+export const docLabelStyle = 'font-size: 12px; color: #6b7280;'