@pure-ds/storybook 0.7.25 → 0.7.26

package/stories/components/PdsDaterange.stories.js

@@ -0,0 +1,85 @@
+import { html } from 'lit';
+
+const docsParameters = {
+  description: {
+    component: 'Form-associated date range picker with compact dual-calendar dropdown and ISO interval value output.'
+  }
+};
+
+if (typeof window !== 'undefined') {
+  import('../reference/reference-docs.js')
+    .then(({ createComponentDocsPage }) => {
+      docsParameters.page = createComponentDocsPage('pds-daterange');
+    })
+    .catch((error) => {
+      console.warn('storybook: docs page failed to load for pds-daterange', error);
+    });
+}
+
+export default {
+  title: 'Components/pds-daterange',
+  tags: ['autodocs', 'date', 'range', 'travel', 'form'],
+  parameters: {
+    pds: {
+      tags: ['pds-daterange', 'date', 'range', 'calendar', 'form']
+    },
+    docs: docsParameters
+  }
+};
+
+export const Default = {
+  render: () => {
+    setTimeout(() => {
+      const form = document.querySelector('#daterange-form');
+      const daterange = document.querySelector('#booking-range');
+      const output = document.querySelector('#daterange-output');
+
+      if (!form || !daterange || !output) return;
+
+      const writeOutput = (label) => {
+        const value = daterange.value || '(empty)';
+        output.textContent = `${label}: ${value}`;
+      };
+
+      daterange.addEventListener('range-change', () => {
+        writeOutput('range-change');
+      });
+
+      form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        if (!form.reportValidity()) {
+          writeOutput('invalid');
+          return;
+        }
+
+        const formData = new FormData(form);
+        const payload = Object.fromEntries(formData.entries());
+        output.textContent = JSON.stringify(payload, null, 2);
+      });
+
+      form.addEventListener('reset', () => {
+        setTimeout(() => writeOutput('reset'), 0);
+      });
+
+      writeOutput('ready');
+    }, 0);
+
+    return html`
+      <section class="card stack-md">
+        <h3>Booking Dates</h3>
+        <p class="text-muted">Select check-in and check-out in the dropdown panel. Value is form-associated and submits as ISO interval YYYY-MM-DD/YYYY-MM-DD.</p>
+
+        <form id="daterange-form" class="stack-md">
+          <pds-daterange id="booking-range" name="travelPeriod" required></pds-daterange>
+
+          <div class="flex gap-sm">
+            <button type="submit" class="btn-primary">Submit</button>
+            <button type="reset" class="btn-secondary">Reset</button>
+          </div>
+        </form>
+
+        <pre id="daterange-output" class="card surface-subtle">ready: (empty)</pre>
+      </section>
+    `;
+  }
+};

package/stories/components/PdsForm.Basics.stories.js

@@ -0,0 +1,16 @@
+import * as FormStories from "./PdsForm.stories.js";
+
+export default {
+	title: "Components/pds-form/Basics",
+};
+
+export const SimpleForm = FormStories.SimpleForm;
+export const ComplexForm = FormStories.ComplexForm;
+export const WithInitialData = FormStories.WithInitialData;
+export const WithTogglesSwitches = FormStories.WithTogglesSwitches;
+export const WithRangeSliders = FormStories.WithRangeSliders;
+export const WithIcons = FormStories.WithIcons;
+export const WithPdsUpload = FormStories.WithPdsUpload;
+export const WithPdsRichtext = FormStories.WithPdsRichtext;
+export const ComprehensiveExample = FormStories.ComprehensiveExample;
+export const CustomFormActions = FormStories.CustomFormActions;

package/stories/components/PdsForm.ConditionalAndCalculated.stories.js

@@ -0,0 +1,16 @@
+import * as FormStories from "./PdsForm.stories.js";
+
+export default {
+	title: "Components/pds-form/Conditional & Calculated",
+};
+
+export const ConditionalShowHide = FormStories.ConditionalShowHide;
+export const ConditionalRequired = FormStories.ConditionalRequired;
+export const ConditionalComplex = FormStories.ConditionalComplex;
+export const ConditionalWithIf = FormStories.ConditionalWithIf;
+export const ConditionalWithRegex = FormStories.ConditionalWithRegex;
+export const ConditionalWithLogicalOperators = FormStories.ConditionalWithLogicalOperators;
+export const ConditionalWithComparison = FormStories.ConditionalWithComparison;
+export const ConditionalDisabledFields = FormStories.ConditionalDisabledFields;
+export const CalculatedValues = FormStories.CalculatedValues;
+export const CalculateWithOverride = FormStories.CalculateWithOverride;

package/stories/components/PdsForm.CustomContent.stories.js

@@ -0,0 +1,10 @@
+import * as FormStories from "./PdsForm.stories.js";
+
+export default {
+	title: "Components/pds-form/Custom Content",
+};
+
+export const CustomContentBeforeAfter = FormStories.CustomContentBeforeAfter;
+export const CustomContentRender = FormStories.CustomContentRender;
+export const CustomContentWrapper = FormStories.CustomContentWrapper;
+export const CustomContentSlots = FormStories.CustomContentSlots;

package/stories/components/PdsForm.Dialogs.stories.js

@@ -0,0 +1,7 @@
+import * as FormStories from "./PdsForm.stories.js";
+
+export default {
+	title: "Components/pds-form/Dialogs",
+};
+
+export const WithDialogForms = FormStories.WithDialogForms;

package/stories/components/PdsForm.Layout.stories.js

@@ -0,0 +1,16 @@
+import * as FormStories from "./PdsForm.stories.js";
+
+export default {
+	title: "Components/pds-form/Layout",
+};
+
+export const WithFlexLayout = FormStories.WithFlexLayout;
+export const WithGridLayout = FormStories.WithGridLayout;
+export const WithGridLayoutAuto = FormStories.WithGridLayoutAuto;
+export const WithAccordionLayout = FormStories.WithAccordionLayout;
+export const WithTabsLayout = FormStories.WithTabsLayout;
+export const WithSurfaces = FormStories.WithSurfaces;
+export const RootGridLayout = FormStories.RootGridLayout;
+export const RootFlexLayout = FormStories.RootFlexLayout;
+export const RootLayoutWithFieldOptions = FormStories.RootLayoutWithFieldOptions;
+export const RootThreeColumnGrid = FormStories.RootThreeColumnGrid;

package/stories/components/PdsForm.SelectionAndArrays.stories.js

@@ -0,0 +1,12 @@
+import * as FormStories from "./PdsForm.stories.js";
+
+export default {
+	title: "Components/pds-form/Selection & Arrays",
+};
+
+export const WithRadioGroupOpen = FormStories.WithRadioGroupOpen;
+export const WithDatalistAutocomplete = FormStories.WithDatalistAutocomplete;
+export const WithPdsOmnibox = FormStories.WithPdsOmnibox;
+export const WithArrayFields = FormStories.WithArrayFields;
+export const EnumWithOneOfAnyOf = FormStories.EnumWithOneOfAnyOf;
+export const OneOfWithPresetValues = FormStories.OneOfWithPresetValues;