blixify-ui-web-mcp 0.1.1

package/lib/components/structure/container/container.stories.tsx

@@ -0,0 +1,19 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Container } from ".";
+import README from "./README.md";
+const stories = storiesOf("Structure", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Container", () => {
+  return (
+    <Container>
+      <h1>Item 1</h1>
+    </Container>
+  );
+});

package/lib/components/structure/link/README.md

@@ -0,0 +1,55 @@
+# Link
+
+<!-- STORY -->
+
+<hr>
+
+Link for navigation
+
+##### Import
+
+```js
+import { Link } from "blixify-ui-web/components/structure/link";
+```
+
+##### Usage
+
+```jsx
+<>
+  <Link href="https://blixify.co" linkType="external">
+    <Text size="base" color="primary" type="p">
+      Link - External
+    </Text>
+  </Link>
+  <Link href="https://blixify.co" linkType="default">
+    <Text size="base" color="primary" type="p">
+      Link - Internal
+    </Text>
+  </Link>
+</>
+```
+
+##### Required props
+
+| Name       | Type            | Description     |
+| ---------- | --------------- | --------------- |
+| `children` | `React.Element` | React Element   |
+| `linkType` | `string`        | Type of link    |
+| `href`     | `string`        | Navigation link |
+
+##### Optional props
+
+| Name        | Type             | Default | Description                               |
+| ----------- | ---------------- | ------- | ----------------------------------------- |
+| `custom`    | `Custom Class`   | null    | Required if type is react/gatsby/next     |
+| `className` | `tailwind class` | ""      |                                           |
+| `target`    | `string`         | null    | Link target (e.g., "\_blank" for new tab) |
+
+##### Link Props Class
+
+###### Extended to components who posses link
+
+| Name       | Type           | Default      | Description                           |
+| ---------- | -------------- | ------------ | ------------------------------------- |
+| `linkType` | `string`       | Type of link | react/gatsby/next/external/default    |
+| `custom`   | `Custom Class` | null         | Required if type is react/gatsby/next |

package/lib/components/structure/link/link.stories.tsx

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Link } from ".";
+import { Text } from "../text";
+import README from "./README.md";
+
+const stories = storiesOf("Structure", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Link", () => {
+  return (
+    <>
+      <Link href="https://blixify.co" linkType="external">
+        <Text size="base" color="primary" type="p">
+          Link - External
+        </Text>
+      </Link>
+      <Link href="https://blixify.co" linkType="default">
+        <Text size="base" color="primary" type="p">
+          Link - Internal
+        </Text>
+      </Link>
+    </>
+  );
+});

package/lib/components/structure/text/README.md

@@ -0,0 +1,42 @@
+# Text
+
+<!-- STORY -->
+
+<hr>
+
+Display Text
+
+##### Import
+
+```js
+import { Text } from "blixify-ui-web/components/structure/text";
+```
+
+##### Usage
+
+```jsx
+<Text size="lg" color="primary" bold="bold" type="h1">
+  Hello World
+</Text>
+<Text size="base" color="pale" type="p">
+  Lorem Ipsum
+</Text>
+```
+
+##### Required props
+
+| Name       | Type            | Description             |
+| ---------- | --------------- | ----------------------- |
+| `children` | `React.Element` | React Element           |
+| `size`     | `string`        | Tailwind size selection |
+| `type`     | `string`        | Html tag selection      |
+
+##### Optional props
+
+| Name        | Type                         | Default          | Description |
+| ----------- | ---------------------------- | ---------------- | ----------- |
+| `bold`      | `semibold / bold`            | `Bold variation` |
+| `mobile`    | boolean                      | null             |
+| `color`     | `primary / secondary / pale` | null             |
+| `className` | `tailwind class`             | ""               |
+| `animated`  | `boolean`                    | ""               |

package/lib/components/structure/text/text.stories.tsx

@@ -0,0 +1,39 @@
+import { storiesOf } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+import { Text } from ".";
+import README from "./README.md";
+const stories = storiesOf("Structure", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Text", () => {
+  const textList = ["Hello", "World"];
+  const [textValue, setTextValue] = useState(textList[0]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setTextValue(textList[currentIndex]);
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % textList.length);
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [currentIndex]);
+
+  return (
+    <>
+      <Text size="lg" color="primary" bold="bold" type="h1">
+        Hello World
+      </Text>
+      <Text size="base" color="pale" type="p">
+        Lorem Ipsum
+      </Text>
+      <Text size="lg" color="primary" type="h1" bold="bold" animated>
+        {textValue}
+      </Text>
+    </>
+  );
+});

package/lib/components/template/authPage/authPage.stories.tsx

@@ -0,0 +1,68 @@
+import { storiesOf } from "@storybook/react";
+import { useState } from "react";
+import { BareSignIn, AvailableProvider } from "../../auth/bareSignIn";
+import { FooterSection } from "../../design/footerSection";
+import "../../../index.css";
+
+const stories = storiesOf("Template", module);
+
+stories.add("Auth Page", () => {
+  const [signInType, setSignInType] = useState<typeof AvailableProvider>("email");
+
+  return (
+    <>
+    <div className="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-lg">
+        <img
+          src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?auto=format&fit=crop&w=128&h=128&q=80"
+          alt="[App Logo]"
+          className="mx-auto h-20 w-auto object-contain rounded-full"
+        />
+        <p className="mt-1 text-center text-sm font-semibold tracking-widest text-gray-500 uppercase">
+          [App Name]
+        </p>
+        <h2 className="mt-4 text-center text-3xl font-bold text-gray-900">Sign In</h2>
+        <p className="mt-2 text-center text-sm text-gray-600 max-w-sm mx-auto">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </p>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-2xl">
+        <div className="bg-white py-8 px-6 shadow sm:rounded-lg sm:px-10">
+          <BareSignIn
+            type={signInType}
+            provider={["email"]}
+            column="flex"
+            mobilePicker
+            mobileCountryEditable
+            onChangeProvider={(provider) => setSignInType(provider)}
+            onComplete={() => {}}
+            bottomComponent={
+              <span className="text-sm text-gray-600">
+                By proceeding, you agree to our{" "}
+                <a href="/terms" className="text-primary-600 hover:text-primary-500 font-medium">
+                  General Terms of Use
+                </a>
+              </span>
+            }
+          />
+        </div>
+      </div>
+    </div>
+
+    <FooterSection
+      linkType="external"
+      caption={`© ${new Date().getFullYear()} [App Name] App Pte Ltd. All rights reserved.`}
+      footerList={[
+        {
+          title: "Terms of Use",
+          subList: [
+            { name: "T&C", link: "/terms" },
+            { name: "Privacy Policy", link: "/privacy" },
+          ],
+        },
+      ]}
+    />
+  </>
+  );
+});

package/lib/components/template/landingPage/landingPage.stories.tsx

@@ -0,0 +1,288 @@
+import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
+import { storiesOf } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../../action/button";
+import { ButtonGroup } from "../../action/buttonGroup";
+import { BarChart } from "../../chart/barChart";
+import { ActionSection } from "../../design/actionSection";
+import { FooterSection } from "../../design/footerSection";
+import { HeroSection } from "../../design/heroSection";
+import { IconList } from "../../design/iconList";
+import { LeftContent } from "../../design/leftContent";
+import { LogoCloud } from "../../design/logoCloud";
+import { RightContent } from "../../design/rightContent";
+import { SectionList } from "../../design/sectionList";
+import { Header } from "../../navigation/header";
+import "../../../index.css";
+const Logo = require("../../../assets/logo.png");
+
+const stories = storiesOf("Template", module);
+
+const NAVIGATION = [
+  { name: "Home", href: "/" },
+  { name: "Features", href: "#features" },
+  { name: "Pricing", href: "#pricing" },
+  { name: "About", href: "#about" },
+];
+
+const STEPS_ICON_LIST = [
+  {
+    name: "Step 1: Lorem Ipsum",
+    content: "Consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.",
+    icon: (
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    ),
+  },
+  {
+    name: "Step 2: Dolor Sit Amet",
+    content: "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi.",
+    icon: (
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      </svg>
+    ),
+  },
+  {
+    name: "Step 3: Adipiscing Elit",
+    content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
+    icon: (
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+    ),
+  },
+];
+
+const PRICING_ICON_LIST = [
+  {
+    name: "[Feature One]",
+    content: "Lorem ipsum dolor sit amet consectetur adipiscing elit.",
+    icon: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  {
+    name: "[Feature Two]",
+    content: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    icon: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  {
+    name: "[Feature Three]",
+    content: "Ut enim ad minim veniam quis nostrud exercitation ullamco.",
+    icon: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+];
+
+const STATS_DATA = [
+  { title: "[Stat 1]", content: "Lorem ipsum dolor sit amet consectetur." },
+  { title: "[Stat 2]", content: "Sed do eiusmod tempor incididunt ut labore." },
+  { title: "[Stat 3]", content: "Ut enim ad minim veniam quis nostrud." },
+];
+
+const PARTNER_LOGOS = [
+  { src: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=200&h=80&q=80", alt: "[Partner 1]", href: "#" },
+  { src: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?auto=format&fit=crop&w=200&h=80&q=80", alt: "[Partner 2]", href: "#" },
+  { src: "https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?auto=format&fit=crop&w=200&h=80&q=80", alt: "[Partner 3]", href: "#" },
+  { src: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=200&h=80&q=80", alt: "[Partner 4]", href: "#" },
+];
+
+const CHART1_DATA = [
+  { x: "[Tier 1]", y: 10 },
+  { x: "[Tier 2]", y: 20 },
+  { x: "[Tier 3]", y: 35 },
+  { x: "[Tier 4]", y: 50 },
+];
+
+const CHART2_DATA = [
+  { x: "[Option A]", y: 25 },
+  { x: "[Option B]", y: 40 },
+];
+
+stories.add("Landing Page", () => {
+  const [pricingTab, setPricingTab] = useState("tab1");
+
+  const activeData = pricingTab === "tab1" ? CHART1_DATA : CHART2_DATA;
+  const activeTitle = pricingTab === "tab1" ? "[Chart Title]" : "[Chart Title 2]";
+  const activeUnit = pricingTab === "tab1" ? "Value" : "Value";
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Header
+        logo={Logo}
+        page=""
+        defaultNav="#"
+        linkType="external"
+        navigation={NAVIGATION}
+        lib={{ Disclosure, Menu, Transition, Popover }}
+        extra={
+          <div className="flex items-center space-x-3 mr-2">
+            <a href="/signIn" className="text-sm text-gray-600 hover:text-gray-900">Sign In</a>
+            <Button text="Sign Up" type="normal" size="small" onClick={() => {}} />
+          </div>
+        }
+      />
+
+      <div className="bg-white py-8">
+        <HeroSection
+          size="small"
+          title="Lorem ipsum dolor sit amet consectetur adipiscing elit"
+          content="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation."
+          image="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=900&q=80"
+          callToAction={
+            <div className="flex gap-x-3">
+              <Button text="Get Started" type="normal" onClick={() => {}} />
+              <Button text="Learn More" type="light" onClick={() => {}} />
+            </div>
+          }
+        />
+      </div>
+
+      <div className="bg-white py-16 px-4">
+        <LeftContent
+          title="Lorem ipsum dolor sit amet"
+          contentList={[
+            "Consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+            "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
+          ]}
+          image="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=800&q=80"
+          callToAction={
+            <div className="mt-8">
+              <IconList iconList={STEPS_ICON_LIST} />
+            </div>
+          }
+        />
+      </div>
+
+      <div className="bg-white py-16 px-4">
+        <RightContent
+          title="Consectetur adipiscing elit"
+          contentList={[
+            "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+            "Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est.",
+          ]}
+          image="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80"
+          callToAction={<Button text="Learn More" type="normal" onClick={() => {}} />}
+        />
+      </div>
+
+      <div className="bg-white py-16 px-4">
+        <LeftContent
+          title="Sed do eiusmod tempor incididunt"
+          contentList={[
+            "Ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco.",
+          ]}
+          image="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?auto=format&fit=crop&w=800&q=80"
+          callToAction={
+            <div className="mt-8">
+              <SectionList sectionContent={STATS_DATA} />
+            </div>
+          }
+        />
+      </div>
+
+      <div className="bg-white py-16 px-4">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center">
+          <div>
+            <ButtonGroup
+              selection={[
+                { id: "tab1", name: "[Tab 1]" },
+                { id: "tab2", name: "[Tab 2]" },
+              ]}
+              selectedId={pricingTab}
+              onClick={(id) => setPricingTab(id)}
+            />
+            <div className="mt-4">
+              <BarChart
+                title={activeTitle}
+                seriesName={activeUnit}
+                seriesData={activeData}
+                showDataLabel={true}
+                roundedBars
+                customColors={["#22c55e"]}
+                chartSize={280}
+              />
+            </div>
+          </div>
+          <div>
+            <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
+              Ut enim ad minim veniam quis nostrud
+            </h2>
+            <div className="mt-4 text-gray-500 space-y-4">
+              <p className="text-base leading-7">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <p className="text-base leading-7">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+              <div className="mt-6">
+                <IconList iconList={PRICING_ICON_LIST} />
+              </div>
+              <div className="mt-6">
+                <Button text="Get Started" type="normal" onClick={() => {}} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white py-16 px-4">
+        <div className="max-w-7xl mx-auto lg:grid lg:grid-cols-2 lg:gap-24 lg:items-center">
+          <div>
+            <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">Working closely with [partners]</h2>
+            <p className="mt-4 text-base text-gray-500">Lorem ipsum dolor sit amet consectetur adipiscing elit. We are fortunate to work with organisations committed to excellence.</p>
+          </div>
+          <div className="mt-8 lg:mt-0 bg-gray-50 rounded-2xl p-8">
+            <LogoCloud
+              logoList={PARTNER_LOGOS}
+              linkType="external"
+              gridClassName="grid-cols-2 gap-6"
+              imgClassName="h-10 object-contain"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-gray-50 py-16 px-4">
+        <ActionSection
+          title="Lorem ipsum dolor sit amet consectetur"
+          buttonText="Sign Up Now"
+          buttonLink="#"
+          onClick={() => {}}
+        />
+      </div>
+
+      <FooterSection
+        linkType="external"
+        caption={`© ${new Date().getFullYear()} [App Name]. All rights reserved.`}
+        footerList={[
+          {
+            title: "Company",
+            subList: [
+              { name: "About Us", link: "#" },
+              { name: "How It Works", link: "#" },
+              { name: "Terms & Conditions", link: "#" },
+              { name: "Privacy Policy", link: "#" },
+            ],
+          },
+        ]}
+        logoCloud={
+          <div>
+            <div className="flex items-center space-x-2 mb-3">
+              <img src={Logo} alt="[App Name]" className="h-8 w-auto" />
+              <span className="font-semibold text-gray-900">[App Name]</span>
+            </div>
+            <p className="text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur.</p>
+          </div>
+        }
+      />
+    </div>
+  );
+});