blixify-ui-web-mcp 0.1.19 → 0.1.21

package/lib/components/action/iconButton/iconButton.stories.tsx

@@ -5,7 +5,6 @@ import { IconButton as IconButtonImpl } from ".";
 const meta = { title: "Action/Icon Button" };
 export default meta;
 
-
 export const IconButton = () => {
   return (
     <IconButtonImpl
@@ -13,4 +12,14 @@ export const IconButton = () => {
       onClick={() => {}}
     />
   );
-}
+};
+
+export const SquareIconButton = () => {
+  return (
+    <IconButtonImpl
+      icon={<Bars3Icon className="h-5 w-5" />}
+      className="h-10 w-10"
+      onClick={() => {}}
+    />
+  );
+};

package/lib/components/auth/signUp/signUp.stories.tsx

@@ -36,6 +36,7 @@ export const SignUp = () => {
   const [signUpType, setSignUpType] =
     useState<typeof AvailableProvider | "">("");
   const [stepIndex, setStepIndex] = useState(0);
+  const [phone, setPhone] = useState("");
 
   const handleChangeProvider = (provider: typeof AvailableProvider | "") => {
     setSignUpType(provider);
@@ -75,10 +76,11 @@ export const SignUp = () => {
           <TextInput
             ref={input2}
             id="phoneNumber"
-            value=""
+            value={phone}
             type="mobile"
             label="Mobile"
             placeholder="+60123456789"
+            onChange={(e) => setPhone(e.target.value)}
           />,
           <Select
             value="M"
@@ -120,6 +122,21 @@ export const SignUp = () => {
     ],
   };
 
+  // INFO: with the country picker on, the code comes from the selector, so the
+  // number field only asks for the local part; the other sections keep the full
+  // +60 format a plain mobile field expects
+  const pickerFormList = {
+    ...formList,
+    steps: formList.steps.map((eachStep) => ({
+      ...eachStep,
+      components: eachStep.components.map((eachComponent) =>
+        eachComponent.props?.id === "phoneNumber"
+          ? React.cloneElement(eachComponent, { placeholder: "123456789" })
+          : eachComponent
+      ),
+    })),
+  };
+
   return (
     <div className="font-sans max-w-4xl p-6">
       <StorySection
@@ -150,6 +167,27 @@ export const SignUp = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Phone Country Picker"
+        description="Enable mobilePicker and mobileCountryEditable on SignUpTemplate to apply an editable country selector to mobile TextInput fields."
+      >
+        <div className="w-full bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+          <SignUpTemplate
+            type="phone"
+            stepIndex={0}
+            leftComponents={leftComponents}
+            leftClassName="bg-gray-50"
+            handleUpdateStepIndex={setStepIndex}
+            onChangeProvider={handleChangeProvider}
+            provider={["phone"]}
+            defaultProvider="phone"
+            formList={pickerFormList}
+            mobilePicker={true}
+            mobileCountryEditable={true}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Colored Left Panel"
         description={

package/lib/components/chart/statsCard/README.md

@@ -43,6 +43,12 @@ With date range picker:
 />
 ```
 
+Compact (mobile KPI grid):
+
+```jsx
+<StatsCard stats={stats} size="compact" gridSize={3} />
+```
+
 Dark mode:
 
 ```jsx
@@ -66,6 +72,7 @@ Dark mode:
 | ------------------ | --------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |
 | `gridSize`         | `1 \| 2 \| 3`                           | —               | Max columns in the grid. `1` = 1-col, `2` = 2-col, `3` = 2-col md / 3-col lg. When omitted, defaults to 2-col md / 4-col lg |
 | `minGridSize`      | `2`                                     | —               | Forces a 2-column minimum on small screens. Only `2` is supported                                                           |
+| `size`             | `"default" \| "compact"`                | `"default"`     | `compact` renders a stat-first card — small muted label, stat as the hero, icon and action tucked right. Starts 2-up on mobile and drops the `divide-*` rules, since each compact card carries its own border. Roughly halves the grid on mobile; see Choosing a size |
 | `icon`             | `ReactElement`                          | —               | Small icon rendered in the top-right corner of the card group                                                               |
 | `darkMode`         | `boolean`                               | `false`         | Switches cards to a dark theme                                                                                              |
 | `darkModeBg`       | `string`                                | `"bg-gray-900"` | Tailwind classes for the dark mode card background                                                                          |
@@ -86,6 +93,23 @@ Dark mode:
 | `actionIcon`        | `ReactElement` | no       | Icon rendered in the top-right of the individual card                       |
 | `onActionIconClick` | `() => void`   | no       | Click handler for `actionIcon`                                              |
 
+##### Choosing a size
+
+| | `default` | `compact` |
+| --- | --- | --- |
+| Padding | `p-5` | `p-3` |
+| Label | `text-base`, primary text colour | `text-xs`, muted |
+| Stat | `text-2xl` | `text-lg` |
+| Mobile grid | 1-up (2-up with `minGridSize={2}`) | 2-up |
+| Seams | `divide-y` / `md:divide-x` | per-card border |
+| Icon | rendered inline at the caller's own size | pinned to `h-4 w-4`, chipped right |
+
+`gridSize` still applies at `md` and above in both sizes, so a 4-up desktop dashboard collapses to a readable 2-up on mobile. An explicit `gridSize={1}` stays one column at every breakpoint.
+
+The saving is in the grid, not the card. Measured at 390px with four stats, the grid drops from 495px to 247px — because compact is 2-up, not because the card shrank. At equal card width the compact card is only marginally shorter (118px vs 125px), and at mobile width it is slightly taller, since compact stacks label, stat, previous and badge vertically while default puts the stat and badge on one baseline row.
+
+> Not to be confused with `bareCompactMode` — that is a `DataTemplate` `bareSettings` flag that switches `DetailList` to its compact row layout in the read view. Same word, unrelated component.
+
 ##### RangeInterface
 
 | Name         | Type      | Description                                              |

package/lib/components/chart/statsCard/statsCard.stories.tsx

@@ -97,6 +97,74 @@ export const StatsCard = () => {
 
   return (
     <>
+      <StorySection
+        title="size=&quot;compact&quot; — 2-Up KPI Grid"
+        description="Stat-first compact layout. Label small and muted, stat is the hero, icon and action tucked right. Starts 2-up on mobile instead of the default 1-up — which roughly halves the grid height there — and drops the divide rules since each card carries its own border."
+      >
+        <div className="w-full">
+          <StatsCardImpl stats={baseStats} size="compact" />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — 4-Up Dashboard Glance"
+        description="Compact honours gridSize at md and above, so a 4-up desktop dashboard collapses to a readable 2-up on mobile. Resize the frame to see the grid step down."
+      >
+        <div className="w-full">
+          <StatsCardImpl
+            stats={[
+              ...baseStats,
+              {
+                name: "Active Users",
+                stats: "3,240",
+                previousStats: "3,100",
+                change: "4.5%",
+                changeType: "increase",
+                icon: <UserGroupIcon className="w-6 h-6 text-gray-600" />,
+              },
+            ]}
+            size="compact"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — gridSize=1"
+        description="An explicit gridSize of 1 stays a single column at every breakpoint. Compact's 2-up mobile default used to override it, which put MORE columns on the narrow screen than the wide one — resize the frame and this should never split into two."
+      >
+        <div className="w-full">
+          <StatsCardImpl stats={baseStats} size="compact" gridSize={1} />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — With DateRange Picker"
+        description="dateRangeVisible renders below the compact grid exactly as it does for the default size."
+      >
+        <div className="w-full">
+          <StatsCardImpl
+            stats={seriesData}
+            size="compact"
+            dateRangeVisible={true}
+            onChangeDate={handleSetData}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="size=&quot;compact&quot; — Dark Mode"
+        description="Compact cards swap to a gray-900 surface with a gray-700 border and a gray-800 icon chip."
+        dark
+      >
+        <div className="w-full">
+          <StatsCardImpl
+            stats={baseStats}
+            size="compact"
+            darkMode={true}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Default (4-column grid)"
         description="When gridSize is omitted the component defaults to a 4-column grid on large screens. Each card shows a name, stat value, optional previous stat, and an optional change badge."

package/lib/components/chat/chatBase/chatBase.stories.tsx

@@ -237,7 +237,7 @@ export const ChatBase = () => {
         sender: botUser,
         messageBody: {
           fileName:
-            "https://firebasestorage.googleapis.com/v0/b/verdant-solar-dev.appspot.com/o/preCheckList%2F0184b7ee-8bb0-4a48-992c-ac8d37f8e833%2FPre-Checklist.pdf?alt=media&token=1de8eafb-27c4-4ff7-91a3-e640e4ef07cf",
+            "https://firebasestorage.googleapis.com/v0/b/demo-bucket.appspot.com/o/files%2FPre-Checklist.pdf?alt=media",
           token: "sample-document.pdf",
           type: "application/pdf",
         } as any,

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

@@ -26,7 +26,7 @@ export const DataGraph = () => {
                 type: "card",
                 title: "Total Products",
                 description: "All products in catalogue",
-                spaceId: "esh-products",
+                spaceId: "products",
                 query: [],
                 queryBaseType: "count",
               },
@@ -35,7 +35,7 @@ export const DataGraph = () => {
                 type: "card",
                 title: "Total Revenue",
                 description: "Sum of all order prices",
-                spaceId: "esh-products",
+                spaceId: "products",
                 query: [],
                 queryBaseType: "sum",
                 queryAttributeId: ["price"],
@@ -60,7 +60,7 @@ export const DataGraph = () => {
                 type: "card",
                 title: "All Products",
                 description: "Total product count",
-                spaceId: "esh-products",
+                spaceId: "products",
                 query: [],
                 queryBaseType: "count",
               },
@@ -69,7 +69,7 @@ export const DataGraph = () => {
                 type: "card",
                 title: "Total Price",
                 description: "Sum of all prices",
-                spaceId: "esh-products",
+                spaceId: "products",
                 query: [],
                 queryBaseType: "sum",
                 queryAttributeId: ["price"],
@@ -78,7 +78,7 @@ export const DataGraph = () => {
                 gridSize: 2,
                 type: "bar",
                 title: "Price per Code",
-                spaceId: "esh-products",
+                spaceId: "products",
                 query: [
                   { type: "=", queryId: "code", value: "P001" },
                   { type: "=", queryId: "code", value: "N001" },