blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,78 @@
+# Bare Sign In
+
+<!-- STORY -->
+
+<hr>
+
+A headless sign-in form that supports multiple authentication providers. Renders the appropriate input fields based on the active `type`, and shows alternative provider buttons for the remaining entries in `provider`.
+
+##### Import
+
+```js
+import { BareSignIn, AvailableProvider } from "blixify-ui-web/auth/bareSignIn";
+```
+
+##### Usage
+
+Basic email sign-in:
+
+```jsx
+const [provider, setProvider] = useState("email");
+
+<BareSignIn
+  type={provider}
+  provider={["email", "phone", "google"]}
+  onChangeProvider={setProvider}
+  column="flex"
+  version="1.0.0"
+/>;
+```
+
+Phone sign-in with country picker:
+
+```jsx
+<BareSignIn
+  type="phone"
+  provider={["phone", "email"]}
+  mobilePicker={true}
+  mobileCountryEditable={true}
+  onChangeProvider={setProvider}
+  column="flex"
+/>
+```
+
+OTP sign-in with resend:
+
+```jsx
+<BareSignIn
+  type="phoneOTP"
+  provider={["phoneOTP"]}
+  onChangeProvider={setProvider}
+  column="flex"
+  onChangeResendOTP={() => {
+    /* trigger resend */
+  }}
+/>
+```
+
+##### Required props
+
+| Name               | Type                                                                | Description                                                                             |
+| ------------------ | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `type`             | `"email" \| "phone" \| "phoneOTP" \| "username" \| "google"`        | Currently active sign-in method — determines which form fields are rendered             |
+| `provider`         | `Array<"email" \| "phone" \| "phoneOTP" \| "username" \| "google">` | Full list of supported providers. Non-active ones render as alternative sign-in buttons |
+| `onChangeProvider` | `(provider: typeof AvailableProvider) => void`                      | Called when the user clicks an alternative provider button                              |
+
+##### Optional props
+
+| Name                    | Type                   | Default  | Description                                                                |
+| ----------------------- | ---------------------- | -------- | -------------------------------------------------------------------------- |
+| `version`               | `string`               | —        | Version string displayed at the bottom of the form                         |
+| `column`                | `"grid" \| "flex"`     | `"grid"` | Layout of the form fields. `"flex"` stacks them vertically                 |
+| `mobilePicker`          | `boolean`              | `false`  | Shows a country code picker on the phone input                             |
+| `mobileCountryEditable` | `boolean`              | `false`  | Allows the user to edit the country code in the mobile picker              |
+| `imgLogo`               | `string`               | —        | Custom logo URL used for the Google sign-in button icon                    |
+| `className`             | `string`               | —        | Tailwind classes applied to the outer wrapper                              |
+| `bottomComponent`       | `ReactElement`         | —        | Extra element rendered below the version string                            |
+| `onComplete`            | `(value: any) => void` | —        | Called with the form state when the sign-in form is submitted successfully |
+| `onChangeResendOTP`     | `(value: any) => void` | —        | When provided, shows a "Resend OTP" link on the `phoneOTP` form            |

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

@@ -0,0 +1,141 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { AvailableProvider, BareSignIn } from ".";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Auth", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const cardCls =
+  "w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-100";
+
+stories.add("Bare Sign In", () => {
+  const [provider, setProvider] = useState<typeof AvailableProvider>("email");
+
+  return (
+    <div className="font-sans max-w-2xl p-6">
+      <StorySection
+        title="Email Provider"
+        description={
+          <>
+            Sign in form for <code>type="email"</code>. Renders email + password
+            fields with a "Forgot Your Password?" toggle. The{" "}
+            <code>provider</code> array controls which alternative sign-in
+            buttons appear below the form.
+          </>
+        }
+      >
+        <div className={cardCls}>
+          <BareSignIn
+            version="0.0.1"
+            type="email"
+            provider={["email", "phone", "google", "username"]}
+            onChangeProvider={setProvider}
+            column="flex"
+            className="py-6 px-4"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Phone Provider"
+        description={
+          <>
+            Sign in form for <code>type="phone"</code>. Renders a mobile number
+            input with a reCAPTCHA container. Set{" "}
+            <code>mobilePicker=&#123;true&#125;</code> to show a country code
+            picker, and <code>mobileCountryEditable</code> to allow editing it.
+          </>
+        }
+      >
+        <div className={cardCls}>
+          <BareSignIn
+            version="0.0.1"
+            type="phone"
+            mobilePicker={true}
+            mobileCountryEditable={true}
+            provider={["phone", "email"]}
+            onChangeProvider={setProvider}
+            column="flex"
+            className="py-6 px-4"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Username Provider"
+        description={
+          <>
+            Sign in form for <code>type="username"</code>. Renders a username +
+            password input. Username is validated against alphanumeric
+            characters and dots.
+          </>
+        }
+      >
+        <div className={cardCls}>
+          <BareSignIn
+            version="0.0.1"
+            type="username"
+            provider={["username", "email"]}
+            onChangeProvider={setProvider}
+            column="flex"
+            className="py-6 px-4"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="OTP Provider"
+        description={
+          <>
+            Sign in form for <code>type="phoneOTP"</code>. Renders a 6-digit OTP
+            input. Pass <code>onChangeResendOTP</code> to show a "Resend OTP"
+            link.
+          </>
+        }
+      >
+        <div className={cardCls}>
+          <BareSignIn
+            version="0.0.1"
+            type="phoneOTP"
+            provider={["phoneOTP"]}
+            onChangeProvider={setProvider}
+            column="flex"
+            className="py-6 px-4"
+            onChangeResendOTP={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Switchable Provider (controlled)"
+        description={
+          <>
+            Use <code>onChangeProvider</code> with local state to let users
+            switch between sign-in methods. The active <code>type</code> drives
+            which form is rendered.
+          </>
+        }
+      >
+        <div className={cardCls}>
+          <BareSignIn
+            version="0.0.1"
+            type={provider}
+            mobilePicker={true}
+            mobileCountryEditable={true}
+            provider={["phone", "email", "google", "username"]}
+            onChangeProvider={setProvider}
+            column="flex"
+            className="py-6 px-4"
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+});

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

@@ -0,0 +1,130 @@
+# Bare Sign Up
+
+<!-- STORY -->
+
+<hr>
+
+A headless multi-step sign-up form. Shows a provider selection screen when no `type` is active, then steps through `formList.steps` one at a time. Includes a back button between steps.
+
+##### Import
+
+```js
+import { BareSignUp } from "blixify-ui-web/auth/bareSignUp";
+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);
+};
+
+<BareSignUp
+  type={type}
+  stepIndex={stepIndex}
+  handleUpdateStepIndex={setStepIndex}
+  onChangeProvider={handleChangeProvider}
+  provider={["email", "phone", "google"]}
+  defaultProvider="email"
+  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 shown on the selection screen         |
+| `stepIndex`             | `number`                                             | Index of the currently active step in `formList.steps`                |
+| `formList`              | `FormList`                                           | Defines the multi-step form — see FormList below                      |
+| `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 goes back to selection |
+
+##### Optional props
+
+| Name                 | Type                       | Default | Description                                                                      |
+| -------------------- | -------------------------- | ------- | -------------------------------------------------------------------------------- |
+| `defaultProvider`    | `typeof AvailableProvider` | —       | Provider shown as the primary button on the selection screen                     |
+| `preventBack`        | `boolean`                  | `false` | Hides the back button between steps and from the form back to provider selection |
+| `maxCol`             | `number`                   | —       | Overrides the default two-column grid. Pass `1` for a single-column layout       |
+| `version`            | `string`                   | —       | Version string displayed at the bottom                                           |
+| `imgLogo`            | `string`                   | —       | Custom logo URL for the Google sign-up button icon                               |
+| `className`          | `string`                   | —       | Tailwind classes applied to the inner wrapper                                    |
+| `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/bareSignUp/bareSignUp.stories.tsx

@@ -0,0 +1,159 @@
+import { storiesOf } from "@storybook/react";
+import React, { useRef, useState } from "react";
+import { BareSignUp } from ".";
+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" },
+];
+
+stories.add("Bare 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);
+  };
+
+  /*
+    formList.steps defines each step of the multi-step sign-up flow.
+    Each step has:
+      - components: the form fields to render
+      - refs: input refs used for validation
+      - formRef: ref to the Form wrapper for triggering submit
+      - onHandleComponents: called when the user clicks "Next" or "Submit"
+  */
+  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">
+            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-2xl p-6">
+      <StorySection
+        title="Multi-step Sign Up"
+        description={
+          <>
+            Provider selection screen shown when <code>type</code> is empty.
+            Once a provider is selected, the form steps in <code>formList</code>{" "}
+            are rendered one at a time, controlled by <code>stepIndex</code> and{" "}
+            <code>handleUpdateStepIndex</code>. A back button appears between
+            steps unless <code>preventBack</code> is set.
+          </>
+        }
+      >
+        <div className="p-4 w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-100">
+          <BareSignUp
+            type={signUpType}
+            stepIndex={stepIndex}
+            handleUpdateStepIndex={setStepIndex}
+            onChangeProvider={handleChangeProvider}
+            provider={["email", "phone", "google"]}
+            defaultProvider="email"
+            formList={formList}
+            version="0.0.1"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Single Column Layout"
+        description={
+          <>
+            Use <code>maxCol=&#123;1&#125;</code> to force a single-column form
+            layout, overriding the default two-column grid on larger screens.
+          </>
+        }
+      >
+        <div className="p-4 w-full max-w-sm bg-white rounded-lg shadow-sm border border-gray-100">
+          <BareSignUp
+            type={signUpType}
+            stepIndex={stepIndex}
+            handleUpdateStepIndex={setStepIndex}
+            onChangeProvider={handleChangeProvider}
+            provider={["email", "phone", "google"]}
+            defaultProvider="email"
+            formList={formList}
+            maxCol={1}
+            version="0.0.1"
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+});

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

@@ -0,0 +1,53 @@
+# Sign In Template
+
+<!-- STORY -->
+
+<hr>
+
+A two-column sign-in page layout. The left panel renders custom `leftComponents` (branding, contact info, etc.) and the right two columns render a `BareSignIn` form. All `BareSignIn` props are forwarded.
+
+##### Import
+
+```js
+import { SignInTemplate } from "blixify-ui-web/auth/signIn";
+import { AvailableProvider } from "blixify-ui-web/auth/bareSignIn";
+```
+
+##### Usage
+
+```jsx
+const [provider, setProvider] = useState("email");
+
+<SignInTemplate
+  type={provider}
+  provider={["email", "phone", "google"]}
+  onChangeProvider={setProvider}
+  leftComponents={
+    <div>
+      <h3 className="text-lg font-medium text-gray-700">Contact information</h3>
+      <p className="mt-4 text-sm text-gray-600">info@example.com</p>
+    </div>
+  }
+  leftClassName="bg-gray-50"
+  version="1.0.0"
+/>;
+```
+
+##### Required props
+
+| Name               | Type                                                                | Description                                                            |
+| ------------------ | ------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `type`             | `"email" \| "phone" \| "phoneOTP" \| "username" \| "google"`        | Active sign-in provider — determines which form fields are rendered    |
+| `provider`         | `Array<"email" \| "phone" \| "phoneOTP" \| "username" \| "google">` | All available providers. Non-active ones render as alternative buttons |
+| `leftComponents`   | `ReactElement \| ReactElement[]`                                    | Content rendered in the left panel (branding, contact info, etc.)      |
+| `onChangeProvider` | `(provider: typeof AvailableProvider) => void`                      | Called when the user switches to a different provider                  |
+
+##### Optional props
+
+| Name                | Type                   | Default | Description                                                           |
+| ------------------- | ---------------------- | ------- | --------------------------------------------------------------------- |
+| `leftClassName`     | `string`               | —       | Tailwind classes applied to the left panel (e.g. background color)    |
+| `version`           | `string`               | —       | Version string shown at the bottom of the form                        |
+| `bottomComponents`  | `ReactElement`         | —       | Extra element rendered below the version string                       |
+| `onComplete`        | `(value: any) => void` | —       | Called with form state when sign-in is submitted successfully         |
+| `onChangeResendOTP` | `(value: any) => void` | —       | Shows a "Resend OTP" link when provided (used with `type="phoneOTP"`) |

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

@@ -0,0 +1,120 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { SignInTemplate } from ".";
+import { AvailableProvider } from "../bareSignIn";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Auth", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const contactInfo = (
+  <>
+    <h3 className="text-lg font-medium text-gray-700">Contact information</h3>
+    <dl className="mt-8 space-y-6">
+      <dd className="flex text-base text-gray-600">
+        <svg
+          className="flex-shrink-0 w-6 h-6 text-gray-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+          />
+        </svg>
+        <span className="ml-3">+(60) 12-3456789</span>
+      </dd>
+      <dd className="flex text-base text-gray-600">
+        <svg
+          className="flex-shrink-0 w-6 h-6 text-gray-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          />
+        </svg>
+        <span className="ml-3">info@example.com</span>
+      </dd>
+    </dl>
+  </>
+);
+
+stories.add("Sign In", () => {
+  const [provider, setProvider] = useState<typeof AvailableProvider>("email");
+
+  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>BareSignIn</code> fills the right two columns. Use{" "}
+            <code>leftClassName</code> to style the left panel background. The
+            active <code>type</code> and <code>provider</code> array work the
+            same as in <code>BareSignIn</code>.
+          </>
+        }
+      >
+        <div className="w-full bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+          <SignInTemplate
+            version="0.0.1"
+            leftComponents={contactInfo}
+            leftClassName="bg-gray-50"
+            type={provider}
+            provider={["phone", "email", "google"]}
+            onChangeProvider={setProvider}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Colored Left Panel"
+        description={
+          <>
+            Pass any Tailwind background class via <code>leftClassName</code> to
+            brand the left panel. Combine with custom{" "}
+            <code>leftComponents</code>
+            content for a fully styled auth page.
+          </>
+        }
+      >
+        <div className="w-full bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+          <SignInTemplate
+            version="0.0.1"
+            leftComponents={
+              <div className="text-white">
+                <h3 className="text-lg font-medium">Welcome back</h3>
+                <p className="mt-4 text-sm opacity-80">
+                  Sign in to continue to your account.
+                </p>
+              </div>
+            }
+            leftClassName="bg-primary-700"
+            type={provider}
+            provider={["email", "google"]}
+            onChangeProvider={setProvider}
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+});