blixify-ui-web-mcp 0.1.19 → 0.1.21

package/lib/components/data/flexFilter/flexFilter.stories.tsx

@@ -1,171 +0,0 @@
-import { Transition } from "@headlessui/react";
-import axios from "axios";
-import React, { useState } from "react";
-import { Button } from "../../action/button";
-import { StorySection } from "../../storyUtils";
-import { DataStructure } from "../dataTemplate/model";
-import {
-  FlexFilter as FlexFilterComponent,
-  FlexFilterData,
-  renderFlexFilterConditions,
-} from ".";
-import { Toggle } from "../../action/toggle";
-import {
-  meraqueDevSettings,
-  MeraqueWorkOrderSchema,
-} from "../../data/testSchema";
-
-const meta = { title: "Data/Flex Filter" };
-export default meta;
-
-const sampleSchema: DataStructure[] = MeraqueWorkOrderSchema;
-const devSettings = meraqueDevSettings;
-
-export const FlexFilter = () => {
-  const [bareFilters, setBareFilters] = useState<FlexFilterData[]>([
-    { id: "bare-init", columnId: "", operator: "=", value: undefined },
-  ]);
-
-  const [autoFilters, setAutoFilters] = useState<FlexFilterData[]>([
-    { id: "auto-init", columnId: "", operator: "=", value: undefined },
-  ]);
-
-  const [modalFilters, setModalFilters] = useState<FlexFilterData[]>([
-    { id: "modal-init", columnId: "", operator: "=", value: undefined },
-  ]);
-
-  const [addCompFilters, setAddCompFilters] = useState<FlexFilterData[]>([
-    { id: "addcomp-init", columnId: "", operator: "=", value: undefined },
-  ]);
-
-  const bareQueryConditions = renderFlexFilterConditions(
-    bareFilters,
-    sampleSchema,
-  );
-  const autoQueryConditions = renderFlexFilterConditions(
-    autoFilters,
-    sampleSchema,
-  );
-  const modalQueryConditions = renderFlexFilterConditions(
-    modalFilters,
-    sampleSchema,
-  );
-  const addCompQueryConditions = renderFlexFilterConditions(
-    addCompFilters,
-    sampleSchema,
-  );
-
-  return (
-    <div className="flex flex-col space-y-12">
-      <StorySection
-        title="Variant: bare"
-        description="Raw filter panel with no wrapper. Consumer renders their own container."
-      >
-        <div className="flex flex-col">
-          <div className="max-w-[700px]">
-            <FlexFilterComponent
-              structure={sampleSchema}
-              filters={bareFilters}
-              onChange={setBareFilters}
-              devSettings={devSettings}
-              dbModule={axios}
-              variant="bare"
-              lib={{ Transition }}
-            />
-          </div>
-          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
-            <p className="text-sm font-semibold mb-2">
-              Generated Query Conditions ({bareQueryConditions.length})
-            </p>
-            <pre className="text-xs whitespace-pre-wrap">
-              {JSON.stringify(bareQueryConditions, null, 2)}
-            </pre>
-          </div>
-        </div>
-      </StorySection>
-
-      <StorySection
-        title="Variant: auto (PopUp on desktop, Modal on mobile)"
-        description="Uses PopUp on md+ screens and Modal on mobile. Click the funnel icon to open."
-      >
-        <div className="flex flex-col w-96 max-w-96">
-          <div className="flex gap-x-3 w-ful">
-            <div className="h-12 bg-gray-100 rounded-lg flex-1"></div>
-            <FlexFilterComponent
-              structure={sampleSchema}
-              filters={autoFilters}
-              onChange={setAutoFilters}
-              devSettings={devSettings}
-              dbModule={axios}
-              variant="auto"
-              lib={{ Transition }}
-            />
-          </div>
-          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
-            <p className="text-sm font-semibold mb-2">
-              Generated Query Conditions ({autoQueryConditions.length})
-            </p>
-            <pre className="text-xs whitespace-pre-wrap">
-              {JSON.stringify(autoQueryConditions, null, 2)}
-            </pre>
-          </div>
-        </div>
-      </StorySection>
-      <StorySection
-        title="Variant: modal with custom CTA"
-        description="Modal variant triggered by a custom button instead of the default funnel icon."
-      >
-        <div className="flex flex-col">
-          <FlexFilterComponent
-            structure={sampleSchema}
-            filters={modalFilters}
-            onChange={setModalFilters}
-            devSettings={devSettings}
-            dbModule={axios}
-            variant="modal"
-            lib={{ Transition }}
-            ctaComp={<Button text="Filters" type="normal" size="small" />}
-          />
-          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
-            <p className="text-sm font-semibold mb-2">
-              Generated Query Conditions ({modalQueryConditions.length})
-            </p>
-            <pre className="text-xs whitespace-pre-wrap">
-              {JSON.stringify(modalQueryConditions, null, 2)}
-            </pre>
-          </div>
-        </div>
-      </StorySection>
-
-      <StorySection
-        title="Variant: bare with additional filter components"
-        description="bareListFilterAddComponent renders extra filter inputs above the flex filter rows."
-      >
-        <div className="flex flex-col">
-          <div className="max-w-[700px]">
-            <FlexFilterComponent
-              structure={sampleSchema}
-              filters={addCompFilters}
-              onChange={setAddCompFilters}
-              devSettings={devSettings}
-              dbModule={axios}
-              variant="bare"
-              lib={{ Transition }}
-              bareListFilterAddComponent={[
-                <Toggle text="Show all events" value={true} direction="left" />,
-              ]}
-            />
-          </div>
-          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
-            <p className="text-sm font-semibold mb-2">
-              Generated Query Conditions ({addCompQueryConditions.length})
-            </p>
-            <pre className="text-xs whitespace-pre-wrap">
-              {JSON.stringify(addCompQueryConditions, null, 2)}
-            </pre>
-          </div>
-        </div>
-      </StorySection>
-    </div>
-  );
-};