blixify-ui-web-mcp 0.1.1

package/lib/components/auth/signUp/README.md

@@ -0,0 +1,136 @@
+# Sign Up Template
+
+<!-- STORY -->
+
+<hr>
+
+A two-column sign-up page layout. The left panel renders custom `leftComponents` (branding, stepper, etc.) and the right two columns render a `BareSignUp` multi-step form. All `BareSignUp` props are forwarded.
+
+##### Import
+
+```js
+import { SignUpTemplate } from "blixify-ui-web/auth/signUp";
+import { AvailableProvider } from "blixify-ui-web/auth/bareSignIn";
+```
+
+##### Usage
+
+```jsx
+const custFormRef = useRef(null);
+const input1 = useRef(null);
+const input2 = useRef(null);
+
+const [type, setType] = useState("");
+const [stepIndex, setStepIndex] = useState(0);
+
+const handleChangeProvider = (provider) => {
+  setType(provider);
+  setStepIndex(0);
+};
+
+<SignUpTemplate
+  type={type}
+  stepIndex={stepIndex}
+  handleUpdateStepIndex={setStepIndex}
+  onChangeProvider={handleChangeProvider}
+  provider={["email", "phone", "google"]}
+  defaultProvider="email"
+  leftComponents={
+    <>
+      <h3 className="text-lg font-medium text-gray-700">Create Your Account</h3>
+      <Stepper steps={steps} stepIndex={stepIndex} onChange={setStepIndex} />
+    </>
+  }
+  leftClassName="bg-gray-50"
+  formList={{
+    steps: [
+      {
+        components: [
+          <TextInput
+            ref={input1}
+            id="name"
+            value=""
+            type="name"
+            label="Name"
+            placeholder="John Doe"
+          />,
+          <TextInput
+            ref={input2}
+            id="phone"
+            value=""
+            type="mobile"
+            label="Mobile"
+            placeholder="+60123456789"
+          />,
+        ],
+        formRef: custFormRef,
+        refs: [input1, input2],
+        onHandleComponents: () => setStepIndex(1),
+      },
+      {
+        components: [
+          <TextInput
+            ref={input1}
+            id="email"
+            value=""
+            type="email"
+            label="Email"
+            placeholder="Enter your email"
+          />,
+          <TextInput
+            ref={input2}
+            id="password"
+            value=""
+            type="password"
+            label="Password"
+            placeholder="Enter your password"
+          />,
+        ],
+        formRef: custFormRef,
+        refs: [input1, input2],
+        onHandleComponents: () => {
+          /* submit */
+        },
+      },
+    ],
+  }}
+  version="1.0.0"
+/>;
+```
+
+##### Required props
+
+| Name                    | Type                                                 | Description                                                                                         |
+| ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `type`                  | `"email" \| "phone" \| "google" \| ""`               | Active provider. Empty string shows the provider selection screen                                   |
+| `provider`              | `Array<"email" \| "phone" \| "google">`              | All available sign-up providers                                                                     |
+| `stepIndex`             | `number`                                             | Index of the currently active step in `formList.steps`                                              |
+| `formList`              | `FormList`                                           | Multi-step form definition — see FormList below                                                     |
+| `leftComponents`        | `ReactElement`                                       | Content rendered in the left panel. Re-render it when `stepIndex` changes to keep a stepper in sync |
+| `handleUpdateStepIndex` | `(index: number) => void`                            | Called to advance or go back between steps                                                          |
+| `onChangeProvider`      | `(provider: typeof AvailableProvider \| "") => void` | Called when a provider is selected or the user returns to provider selection                        |
+
+##### Optional props
+
+| Name                 | Type                       | Default | Description                                                        |
+| -------------------- | -------------------------- | ------- | ------------------------------------------------------------------ |
+| `defaultProvider`    | `typeof AvailableProvider` | —       | Provider shown as the primary button on the selection screen       |
+| `leftClassName`      | `string`                   | —       | Tailwind classes applied to the left panel (e.g. background color) |
+| `preventBack`        | `boolean`                  | `false` | Hides the back button between steps                                |
+| `version`            | `string`                   | —       | Version string shown at the bottom of the form                     |
+| `onCompleteEachStep` | `() => void`               | —       | Called when a step's form is submitted successfully                |
+
+##### FormList
+
+| Name    | Type      | Description                               |
+| ------- | --------- | ----------------------------------------- |
+| `steps` | `Steps[]` | Ordered list of steps in the sign-up flow |
+
+##### Steps
+
+| Name                 | Type            | Description                                                         |
+| -------------------- | --------------- | ------------------------------------------------------------------- |
+| `components`         | `JSX.Element[]` | Form field components to render for this step                       |
+| `refs`               | `any[]`         | Refs to input components — used for validation before advancing     |
+| `formRef`            | `Ref<Form>`     | Ref to the `Form` wrapper — used to trigger submit programmatically |
+| `onHandleComponents` | `() => void`    | Called when the user clicks "Next" or "Submit" on this step         |

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

@@ -0,0 +1,193 @@
+import { storiesOf } from "@storybook/react";
+import React, { useRef, useState } from "react";
+import { SignUpTemplate } from ".";
+import { Stepper } from "../../display/stepper";
+import { Option, Select } from "../../input/select";
+import { TextInput } from "../../input/textInput";
+import { AvailableProvider } from "../bareSignIn";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Auth", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const genderOptions: Option[] = [
+  { key: "M", label: "Male" },
+  { key: "F", label: "Female" },
+];
+
+const signUpSteps = [
+  {
+    title: "Profile Information",
+    description: "Help us to understand you better",
+  },
+  { title: "Create Account", description: "Place your security credentials" },
+  {
+    title: "Verification",
+    description: "Verify your email to ensure that you are contactable",
+  },
+];
+
+stories.add("Sign Up", () => {
+  const custFormRef: any = useRef(null);
+  const signUpFormRef: any = useRef(null);
+  const input1: any = useRef(null);
+  const input2: any = useRef(null);
+
+  const [signUpType, setSignUpType] =
+    useState<typeof AvailableProvider | "">("");
+  const [stepIndex, setStepIndex] = useState(0);
+
+  const handleChangeProvider = (provider: typeof AvailableProvider | "") => {
+    setSignUpType(provider);
+    setStepIndex(0);
+  };
+
+  /*
+    leftComponents re-renders on each stepIndex change so the Stepper
+    reflects the current step. Pass it as a prop (not a render function)
+    so SignUpTemplate receives the updated element.
+  */
+  const leftComponents = (
+    <>
+      <h3 className="text-lg font-medium text-gray-700">Create Your Account</h3>
+      <Stepper
+        steps={signUpSteps}
+        disabled={true}
+        className="mt-5"
+        stepIndex={stepIndex}
+        onChange={setStepIndex}
+      />
+    </>
+  );
+
+  const formList = {
+    steps: [
+      {
+        components: [
+          <TextInput
+            ref={input1}
+            id="name"
+            value=""
+            type="name"
+            label="Name"
+            placeholder="John Doe"
+          />,
+          <TextInput
+            ref={input2}
+            id="phoneNumber"
+            value=""
+            type="mobile"
+            label="Mobile"
+            placeholder="+60123456789"
+          />,
+          <Select
+            value="M"
+            label="Gender"
+            options={genderOptions}
+            onChange={() => {}}
+          />,
+          <div className="text-sm sm:col-span-2">
+            By signing up, you agree to our terms & condition, privacy & policy
+          </div>,
+        ],
+        formRef: custFormRef,
+        refs: [input1, input2],
+        onHandleComponents: () => setStepIndex(1),
+      },
+      {
+        components: [
+          <TextInput
+            ref={input1}
+            id="email"
+            value=""
+            type="email"
+            label="Email"
+            placeholder="Enter your email"
+          />,
+          <TextInput
+            ref={input2}
+            id="password"
+            value=""
+            type="password"
+            label="Password"
+            placeholder="Enter your password"
+          />,
+        ],
+        formRef: signUpFormRef,
+        refs: [input1, input2],
+        onHandleComponents: () => {},
+      },
+    ],
+  };
+
+  return (
+    <div className="font-sans max-w-4xl p-6">
+      <StorySection
+        title="Default Layout"
+        description={
+          <>
+            Two-column layout: <code>leftComponents</code> fills the left panel,{" "}
+            <code>BareSignUp</code> fills the right two columns. The left panel
+            is ideal for branding or a progress stepper that reflects{" "}
+            <code>stepIndex</code>. Use <code>leftClassName</code> to style the
+            panel background.
+          </>
+        }
+      >
+        <div className="w-full bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+          <SignUpTemplate
+            type={signUpType}
+            stepIndex={stepIndex}
+            leftComponents={leftComponents}
+            leftClassName="bg-gray-50"
+            handleUpdateStepIndex={setStepIndex}
+            onChangeProvider={handleChangeProvider}
+            provider={["email", "phone", "google"]}
+            defaultProvider="email"
+            formList={formList}
+            version="0.0.1"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Colored Left Panel"
+        description={
+          <>
+            Pass a branded background via <code>leftClassName</code>. The left
+            panel content can be anything — here it shows a simple welcome
+            message.
+          </>
+        }
+      >
+        <div className="w-full rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+          <SignUpTemplate
+            type={signUpType}
+            stepIndex={stepIndex}
+            leftComponents={
+              <div className="text-white">
+                <h3 className="text-lg font-medium">Join us today</h3>
+                <p className="mt-4 text-sm opacity-80">
+                  Create your account to get started.
+                </p>
+              </div>
+            }
+            leftClassName="bg-primary-700"
+            handleUpdateStepIndex={setStepIndex}
+            onChangeProvider={handleChangeProvider}
+            provider={["email", "google"]}
+            defaultProvider="email"
+            formList={formList}
+            version="0.0.1"
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+});

package/lib/components/chart/README.md

@@ -0,0 +1,13 @@
+##### Chart Utils props
+
+| Name               | Type              | Default | Description              |
+| ------------------ | ----------------- | ------- | ------------------------ |
+| `containerStyle`   | `string`          | ""      |                          |
+| `chartOnly`        | `boolean `        | `false` |                          |
+| `chartSize`        | `number`          | ""      |                          |
+| `tool`             | `React Element`   | ""      |                          |
+| `customDate`       | `Range Interface` |         |                          |
+| `dateRangeVisible` | `boolean`         | `false` |                          |
+| `onChangeDate`     | `function`        |         | Handle Change Chart Data |
+| `colours`          | `string[]`        | `false` | Colours of Chart         |
+| `hideGradient`     | `true`            | `false` | Enable Gradient          |

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

@@ -0,0 +1,133 @@
+# Area Chart
+
+<!-- STORY -->
+
+<hr>
+
+An area chart for displaying trends over time. Supports single series, stacked multi-series, dark mode, gradient fill, and an optional date range picker.
+
+##### Import
+
+```js
+import { AreaChart } from "blixify-ui-web/chart/areaChart";
+```
+
+##### Usage
+
+Single series:
+
+```jsx
+const [seriesData, setSeriesData] = useState([]);
+
+<AreaChart
+  title="Sales"
+  seriesName="Value"
+  seriesData={seriesData}
+  dateRangeVisible={true}
+  customDate={{ startDate, endDate, isDuration: true }}
+  onChangeDate={(range) => setSeriesData(filterData(range))}
+/>;
+```
+
+Stacked multi-series:
+
+```jsx
+<AreaChart
+  title="Sales by Region"
+  categories={["Jan", "Feb", "Mar", "Apr"]}
+  stackedAreaSeries={[
+    { name: "North", data: [430, 460, 478, 500] },
+    { name: "South", data: [400, 430, 448, 470] },
+  ]}
+  dateRangeVisible={true}
+  customDate={{ startDate, endDate, isDuration: true }}
+  onChangeDate={handleSetData}
+/>
+```
+
+Dark mode with gradient:
+
+```jsx
+<AreaChart
+  title="Sales"
+  categories={categories}
+  stackedAreaSeries={stackedAreaSeries}
+  darkMode={true}
+  darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+  enableGradient={true}
+  borderColor=""
+/>
+```
+
+Chart only (no header or date range):
+
+```jsx
+<AreaChart
+  title="Sales"
+  seriesData={seriesData}
+  chartOnly={true}
+  chartSize={200}
+  containerStyle="w-full"
+/>
+```
+
+##### Required props
+
+| Name    | Type     | Description                                                                      |
+| ------- | -------- | -------------------------------------------------------------------------------- |
+| `title` | `string` | Title shown in the chart header (also used as link text when `newTabUrl` is set) |
+
+##### Chart props
+
+| Name                | Type                                        | Default     | Description                                                              |
+| ------------------- | ------------------------------------------- | ----------- | ------------------------------------------------------------------------ |
+| `seriesData`        | `SeriesData[]`                              | `[]`        | Data points for a single series — array of `{ x: string, y: number }`    |
+| `seriesName`        | `string`                                    | `""`        | Label shown in the tooltip for single-series mode                        |
+| `stackedAreaSeries` | `SeriesItem[]`                              | `[]`        | Data for stacked multi-series mode — array of `{ name, data: number[] }` |
+| `categories`        | `string[]`                                  | `[]`        | X-axis category labels, required when using `stackedAreaSeries`          |
+| `showDataLabel`     | `boolean`                                   | `false`     | Show value labels on each data point                                     |
+| `showToolbar`       | `boolean`                                   | `false`     | Show the ApexCharts toolbar (download, zoom, etc.)                       |
+| `enableGradient`    | `boolean`                                   | `false`     | Fill the area with a gradient instead of a solid colour                  |
+| `borderColor`       | `string`                                    | `"#e7e7e7"` | Grid line colour. Pass `""` to remove grid lines                         |
+| `onClick`           | `(category: string, value: string) => void` | —           | Called when a data point is clicked                                      |
+| `newTabUrl`         | `string`                                    | `""`        | Makes the chart title a link. Opens in a new tab                         |
+
+##### ChartUtils props (shared across all chart components)
+
+| Name               | Type                                    | Default         | Description                                                                              |
+| ------------------ | --------------------------------------- | --------------- | ---------------------------------------------------------------------------------------- |
+| `tool`             | `ReactElement`                          | —               | Icon or element rendered in the top-right of the chart header                            |
+| `dateRangeVisible` | `boolean`                               | `false`         | Shows a date range picker below the chart                                                |
+| `customDate`       | `RangeInterface`                        | —               | Initial date range for the picker                                                        |
+| `onChangeDate`     | `(customDate?: RangeInterface) => void` | —               | Called when the user applies a new date range                                            |
+| `colors`           | `string[]`                              | —               | Custom hex colour array for the series. Falls back to `localChartColors` in localStorage |
+| `darkMode`         | `boolean`                               | `false`         | Switches the chart to a dark theme                                                       |
+| `darkModeBg`       | `string`                                | `"bg-gray-900"` | Tailwind classes for the dark mode background                                            |
+| `chartOnly`        | `boolean`                               | `false`         | Renders only the chart canvas — no title, tool, or date range bar                        |
+| `chartSize`        | `number`                                | `280`           | Chart height in pixels                                                                   |
+| `containerStyle`   | `string`                                | —               | Tailwind classes applied to the outer container                                          |
+| `minInterval`      | `number`                                | `60`            | Time picker interval in minutes (used in the date range modal)                           |
+
+##### SeriesData
+
+| Name | Type     | Description          |
+| ---- | -------- | -------------------- |
+| `x`  | `string` | Category / label     |
+| `y`  | `number` | Value for this point |
+
+##### SeriesItem (stacked)
+
+| Name   | Type       | Description                     |
+| ------ | ---------- | ------------------------------- |
+| `name` | `string`   | Series name shown in the legend |
+| `data` | `number[]` | Values aligned to `categories`  |
+
+##### RangeInterface
+
+| Name         | Type      | Description                                              |
+| ------------ | --------- | -------------------------------------------------------- |
+| `startDate`  | `Date`    | Start of the range                                       |
+| `endDate`    | `Date`    | End of the range                                         |
+| `isDuration` | `boolean` | `true` = date range, `false` = "beginning until endDate" |
+| `startTime`  | `string`  | Optional time string `"HH:mm:ss"` for same-day ranges    |
+| `endTime`    | `string`  | Optional time string `"HH:mm:ss"` for same-day ranges    |

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

@@ -0,0 +1,199 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { AreaChart } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const stackedAreaSeries = [
+  {
+    name: "South",
+    data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
+  },
+  {
+    name: "North",
+    data: [430, 460, 478, 500, 570, 610, 720, 1130, 1230, 1410],
+  },
+  {
+    name: "Central",
+    data: [448, 470, 490, 520, 590, 630, 740, 1150, 1250, 1430],
+  },
+];
+
+const categories = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+];
+
+const rawData = [
+  { label: "Apple", value: 10, daysAgo: 7 },
+  { label: "Mango", value: 20, daysAgo: 7 },
+  { label: "Orange", value: 5, daysAgo: 1 },
+  { label: "Watermelon", value: 15, daysAgo: 1 },
+  { label: "Banana", value: 55, daysAgo: 28 },
+];
+
+stories.add("Area Chart", () => {
+  const [seriesData, setSeriesData] = useState<any[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    const today = new Date();
+    return rawData.map((d) => {
+      const date = new Date();
+      date.setDate(today.getDate() - d.daysAgo);
+      return { label: d.label, value: d.value, createdAt: date };
+    });
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      const points = chartDummyData
+        .filter((d) => {
+          if (!customDate) return true;
+          if (customDate.isDuration)
+            return (
+              d.createdAt >= customDate.startDate &&
+              d.createdAt <= customDate.endDate
+            );
+          return customDate.endDate ? d.createdAt <= customDate.endDate : true;
+        })
+        .map((d) => ({ x: d.label, y: d.value }));
+      setSeriesData(points);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+
+  const defaultDateRange: RangeInterface = {
+    startDate: sevenDaysAgo,
+    endDate: moment().toDate(),
+    isDuration: true,
+  };
+
+  return (
+    <div className="font-sans max-w-3xl p-6">
+      <StorySection
+        title="Single Series"
+        description={
+          <>
+            Basic area chart using <code>seriesData</code> (array of{" "}
+            <code>&#123; x: string, y: number &#125;</code>). Pass{" "}
+            <code>seriesName</code> to label the tooltip. Use <code>tool</code>{" "}
+            to render an action icon in the header, and <code>newTabUrl</code>{" "}
+            to make the title a link.
+          </>
+        }
+      >
+        <AreaChart
+          title="Sales"
+          seriesName="Value"
+          seriesData={seriesData}
+          tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+          dateRangeVisible={true}
+          customDate={defaultDateRange}
+          onChangeDate={handleSetData}
+          showDataLabel={false}
+          newTabUrl="https://www.google.com/"
+        />
+      </StorySection>
+
+      <StorySection
+        title="Stacked Area Chart"
+        description={
+          <>
+            Use <code>stackedAreaSeries</code> (array of{" "}
+            <code>&#123; name: string, data: number[] &#125;</code>) together
+            with <code>categories</code> for the x-axis labels. Multiple series
+            are stacked automatically.
+          </>
+        }
+      >
+        <AreaChart
+          title="Sales by Region"
+          categories={categories}
+          stackedAreaSeries={stackedAreaSeries}
+          tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+          dateRangeVisible={true}
+          customDate={defaultDateRange}
+          onChangeDate={handleSetData}
+          showDataLabel={false}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode with Gradient"
+        description={
+          <>
+            Set <code>darkMode=&#123;true&#125;</code> to switch to a dark
+            theme. Use <code>darkModeBg</code> to customise the background
+            (accepts Tailwind classes).
+            <code>enableGradient=&#123;true&#125;</code> fills the area with a
+            gradient instead of a solid colour. Pass <code>borderColor=""</code>{" "}
+            to remove the grid border lines.
+          </>
+        }
+        dark
+      >
+        <AreaChart
+          title="Sales by Region"
+          categories={categories}
+          stackedAreaSeries={stackedAreaSeries}
+          tool={<PencilIcon className="h-4 w-4 text-white" />}
+          dateRangeVisible={true}
+          customDate={defaultDateRange}
+          onChangeDate={handleSetData}
+          showDataLabel={false}
+          darkMode={true}
+          darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+          borderColor=""
+          enableGradient={true}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Chart Only (no container)"
+        description={
+          <>
+            Set <code>chartOnly=&#123;true&#125;</code> to render just the
+            ApexCharts canvas without the title, tool, or date range bar. Use{" "}
+            <code>containerStyle</code> to apply Tailwind classes to the wrapper
+            and <code>chartSize</code> to set the height in pixels.
+          </>
+        }
+      >
+        <AreaChart
+          title="Sales"
+          seriesName="Value"
+          seriesData={seriesData}
+          chartOnly={true}
+          chartSize={200}
+          containerStyle="w-full"
+        />
+      </StorySection>
+    </div>
+  );
+});