blixify-ui-web-mcp 0.1.1

package/lib/components/navigation/header/README.md

@@ -0,0 +1,149 @@
+# Header
+
+<!-- STORY -->
+
+<hr>
+
+Header for Application UI for Normal User
+
+##### Import
+
+```js
+import { Header } from "blixify-ui-web/components/navigation/header";
+```
+
+##### Usage
+
+```jsx
+const multiNavigation = [
+  {
+    name: "Section 1",
+    href: "/dashboard/section1",
+    description:
+      "This is a dropdown section that allows you navigate to section 1",
+    icon: PhoneIcon,
+  },
+  {
+    name: "Section 2",
+    href: "/dashboard/section2",
+    description:
+      "This is a dropdown section that allows you navigate to section 2",
+    icon: ComputerDesktopIcon,
+  },
+  {
+    name: "Section 3",
+    href: "/dashboard/section3",
+    description:
+      "This is a dropdown section that allows you navigate to section 3",
+    icon: BookOpenIcon,
+  },
+  {
+    name: "Section 4",
+    href: "/dashboard/section4",
+    description:
+      "This is a dropdown section that allows you navigate to section 4",
+    icon: MapIcon,
+  },
+];
+
+const navigation = [
+  { name: "Dashboard", href: "/dashboard" },
+  {
+    name: "Activities",
+    href: "/dashboard/logistic",
+    multiNav: multiNavigation,
+  },
+  { name: "Records", href: "/dashboard/transaction" },
+  { name: "Donees", href: "/dashboard/orgs" },
+  { name: "FAQ", href: "https://google.com", openInNewTab: true },
+];
+
+const [modal, setModal] = useState(false);
+
+const handleSwapAccount = () => {
+  setModal(!modal);
+  window.alert("Swap account clicked");
+};
+
+const userNavigation = [
+  { name: "My Profile", href: "/dashboard/profile" },
+  {
+    name: "Swap Account",
+    customAction: handleSwapAccount,
+    notification: true,
+  },
+  { name: "Sign out", action: "logout", href: "#" },
+];
+
+return (
+  <div className="bg-gray-100">
+    <Header
+      defaultNav="/"
+      page="Activities"
+      transparent={true}
+      logo={Logo}
+      navigation={navigation}
+      userNavigation={userNavigation}
+      user={{
+        name: "Louis Ong",
+        email: "louis@blixify.co",
+        image: Favicon,
+      }}
+      lib={{
+        Disclosure,
+        Menu,
+        Transition,
+        Popover,
+      }}
+    />
+  </div>
+);
+```
+
+##### Required props
+
+| Name             | Type             | Description                                   |
+| ---------------- | ---------------- | --------------------------------------------- |
+| `defaultNav`     | `string`         | Default path once logo is selected            |
+| `page`           | `string`         | Current selected path according to navigation |
+| `logo`           | `string`         | Logo                                          |
+| `navigation`     | `Navigation`     | Class                                         |
+| `userNavigation` | `UserNavigation` | Class                                         |
+| `lib`            | `class`          | Class                                         |
+
+##### Optional props
+
+| Name          | Type               | Default                                        | Description                                             |
+| ------------- | ------------------ | ---------------------------------------------- | ------------------------------------------------------- |
+| `user`        | `class`            | `null `                                        |                                                         |
+| `transparent` | `boolean`          | `false`                                        | Make background transparent                             |
+| `linkProps`   | `Link Props Class` | Refer to Link Component for more documentation |                                                         |
+| `extra`       | `React Element`    | `null`                                         | React Element placed on the left of userNavigation menu |
+
+##### Navigation props
+
+| Name           | Type                   | Description                              |
+| -------------- | ---------------------- | ---------------------------------------- |
+| `name`         | `string`               | Name of path                             |
+| `href`         | `string`               | Url                                      |
+| `multiNav`     | `Multi Nav List Class` | Optional for multiple navigation list    |
+| `openInNewTab` | `boolean`              | Optional. If true, opens link in new tab |
+
+##### UserNavigation props
+
+| Name           | Type       | Description    |
+| -------------- | ---------- | -------------- |
+| `name`         | `string`   | Name of path   |
+| `href`         | `string`   | Url            |
+| `notification` | `boolean`  | True or false  |
+| `action`       | `function` | Trigger logout |
+| `customAction` | `function` | Optional       |
+
+##### Multi Navigation props
+
+| Name          | Type            | Description  |
+| ------------- | --------------- | ------------ |
+| `name`        | `string`        | Name of path |
+| `href`        | `string`        | Url          |
+| `icon`        | `React Element` |              |
+| `description` | `string`        |              |

package/lib/components/navigation/header/header.stories.tsx

@@ -0,0 +1,107 @@
+import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
+import {
+  BookOpenIcon,
+  ComputerDesktopIcon,
+  MapIcon,
+  PhoneIcon,
+} from "@heroicons/react/20/solid";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Header } from ".";
+import Favicon from "../../../assets/favicon.png";
+import Logo from "../../../assets/logo.png";
+import README from "./README.md";
+
+const stories = storiesOf("Navigation", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const multiNavigation = [
+  {
+    name: "Section 1",
+    href: "/dashboard/section1",
+    description:
+      "This is a dropdown section that allows you navigate to section 1",
+    icon: PhoneIcon,
+  },
+  {
+    name: "Section 2",
+    href: "/dashboard/section2",
+    description:
+      "This is a dropdown section that allows you navigate to section 2",
+    icon: ComputerDesktopIcon,
+  },
+  {
+    name: "Section 3",
+    href: "/dashboard/section3",
+    description:
+      "This is a dropdown section that allows you navigate to section 3",
+    icon: BookOpenIcon,
+  },
+  {
+    name: "Section 4",
+    href: "/dashboard/section4",
+    description:
+      "This is a dropdown section that allows you navigate to section 4",
+    icon: MapIcon,
+  },
+];
+
+const navigation = [
+  { name: "Dashboard", href: "/dashboard" },
+  {
+    name: "Activities",
+    href: "/dashboard/logistic",
+    multiNav: multiNavigation,
+  },
+  { name: "Records", href: "/dashboard/transaction" },
+  { name: "Donees", href: "/dashboard/orgs" },
+  { name: "FAQ", href: "https://google.com", openInNewTab: true },
+];
+
+stories.add("Header", () => {
+  const [modal, setModal] = useState(false);
+
+  const handleSwapAccount = () => {
+    setModal(!modal);
+    window.alert("Swap account clicked");
+  };
+
+  const userNavigation = [
+    { name: "My Profile", href: "/dashboard/profile" },
+    {
+      name: "Swap Account",
+      customAction: handleSwapAccount,
+      notification: true,
+    },
+    { name: "Sign out", action: "logout", href: "#" },
+  ];
+
+  return (
+    <div className="bg-gray-100">
+      <Header
+        defaultNav="/"
+        page="Activities"
+        transparent={true}
+        logo={Logo}
+        navigation={navigation}
+        userNavigation={userNavigation}
+        user={{
+          name: "Louis Ong",
+          email: "louis@blixify.co",
+          image: Favicon,
+        }}
+        lib={{
+          Disclosure,
+          Menu,
+          Transition,
+          Popover,
+        }}
+      />
+    </div>
+  );
+});

package/lib/components/navigation/leftNav/README.md

@@ -0,0 +1,91 @@
+# Left Nav
+
+<!-- STORY -->
+
+<hr>
+
+Left Nav for Dashboard Template
+
+##### Import
+
+```js
+const [mobile, setMobile] = useState(false);
+const navigation = [
+  {
+    id: "inspection",
+    name: "Inspection",
+    href: "/dashboard",
+    icon: HomeIcon,
+  },
+  {
+    id: "defects",
+    name: "Defects",
+    href: "/dashboard/defects",
+    icon: FolderIcon,
+  },
+];
+
+return (
+  <LeftNav
+    selectedId="inspection"
+    draggable={true}
+    navigation={navigation}
+    leftNavMobileMenu={mobile}
+    handleChangeNavigation={(value) => {
+      setNavigation(value);
+    }}
+    handleToggleLeftNavMobileMenu={() => {
+      setMobile(!mobile);
+    }}
+    renderDashboardLogo={() => (
+      <div className="flex items-center flex-shrink-0 px-6 cursor-pointer">
+        <img className="h-10 w-auto" src={Logo} alt="Favicon" />
+      </div>
+    )}
+    renderDashboardContent={() => {}}
+    renderDashboardHeaderContent={() => {}}
+  />
+);
+```
+
+##### Required props
+
+| Name                            | Type              | Description                    |
+| ------------------------------- | ----------------- | ------------------------------ |
+| `selectedId`                    | `string`          | Selected ID of navigation      |
+| `navigation`                    | `Navigation List` | Navigation list to render bars |
+| `leftNavMobileMenu`             | `boolean`         | Mobile menu activation         |
+| `bgColor`                       | `string`          | Content background color       |
+| `handleToggleLeftNavMobileMenu` | `function`        | Toggle mobile menu activation  |
+| `renderDashboardLogo`           | `function`        | Render Logo                    |
+| `renderDashboardContent`        | `function`        | Render Content                 |
+| `renderDashboardHeaderContent`  | `function`        | Render Header Content          |
+
+##### Optional props
+
+| Name                           | Type               | Default                                          | Description                                                     |
+| ------------------------------ | ------------------ | ------------------------------------------------ | --------------------------------------------------------------- |
+| `draggable`                    | `boolean`          | `false`                                          | `Make component items draggable`                                |
+| `handleChangeNavigation`       | `function`         | `(value) => {setNavigation(value)}`              | `Required when draggable is true`                               |
+| `handleDropEnd`                | `function`         | `(value) => {}`                                  | `Required when draggable is true`                               |
+| `renderDashboardFooterContent` | `function`         | `null`                                           | `Render Left Nav Footer`                                        |
+| `linkProps`                    | `Link Props Class` | `Refer to Link Component for more documentation` |                                                                 |
+| `transition`                   | `Transition Class` | `null`                                           |                                                                 |
+| `handleToggleCollapse`         | `function`         | `() => {}`                                       | `Required when transition exist`                                |
+| `handleBarsOnClick`            | `function`         | `(id:string) => {}`                              | `Used for single page rendering setState instead of navigation` |
+
+##### Navigation Class
+
+| Name   | Type            | Default | Description        |
+| ------ | --------------- | ------- | ------------------ |
+| `id`   | `string`        | ""      | ID of Menu         |
+| `name` | `string`        | ""      | Name of Menu       |
+| `href` | `string`        | ""      | Page Href          |
+| `icon` | `React Element` | ``      | Hero Icons Element |
+
+##### Transition Class
+
+| Name            | Type      | Default | Description                               |
+| --------------- | --------- | ------- | ----------------------------------------- |
+| `headerVisible` | `boolean` | "true"  | Render Header if it is true               |
+| `collapse`      | `boolean` | "false" | Left nav will be collapse when it is true |

package/lib/components/navigation/leftNav/leftNav.stories.tsx

@@ -0,0 +1,106 @@
+import { FolderIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+import { LeftNav } from ".";
+import Logo from "../../../assets/logo.png";
+import README from "./README.md";
+
+const stories = storiesOf("Navigation", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("LeftNav", () => {
+  useEffect(() => {
+    window.addEventListener("resize", checkViewportWidth);
+
+    return () => {
+      window.removeEventListener("resize", checkViewportWidth);
+    };
+  });
+
+  const [mobile, setMobile] = useState(false);
+  const [navigation, setNavigation] = useState([
+    {
+      id: "inspection",
+      name: "Inspection",
+      href: "/dashboard",
+      icon: HomeIcon,
+    },
+    {
+      id: "teams",
+      name: "Teams",
+      href: "/team",
+      icon: HomeIcon,
+      groupId: "team",
+    },
+    {
+      id: "engineering",
+      name: "Engineering",
+      href: "/teams/engineering",
+      icon: HomeIcon,
+      groupId: "team",
+    },
+    {
+      id: "human_resources",
+      name: "Human Resources",
+      href: "/teams/hr",
+      icon: HomeIcon,
+      groupId: "team",
+    },
+    {
+      id: "defects",
+      name: "Defects",
+      href: "/dashboard/defects",
+      icon: FolderIcon,
+    },
+  ]);
+
+  const [collapse, setCollapse] = useState(false);
+
+  const checkViewportWidth = () => {
+    const laptop = 1024;
+    if (window.innerWidth <= laptop) {
+      setCollapse(false);
+    }
+  };
+
+  return (
+    <LeftNav
+      selectedId="inspection"
+      navigation={navigation}
+      leftNavMobileMenu={mobile}
+      draggable={true}
+      transition={{
+        headerVisible: undefined,
+        collapse,
+      }}
+      handleToggleCollapse={() => {
+        setCollapse(!collapse);
+      }}
+      handleChangeNavigation={(value) => {
+        setNavigation(value);
+      }}
+      handleToggleLeftNavMobileMenu={() => {
+        setMobile(!mobile);
+      }}
+      renderDashboardLogo={() => (
+        <div className="flex items-center flex-shrink-0 px-6 cursor-pointer flex-col">
+          <img
+            className={`h-10 ${
+              collapse ? "w-1/4 object-contain lg:hidden" : "w-auto"
+            } `}
+            w-auto
+            src={Logo}
+            alt="Favicon"
+          />
+        </div>
+      )}
+      renderDashboardContent={() => {}}
+      renderDashboardHeaderContent={() => {}}
+    />
+  );
+});

package/lib/components/navigation/tabs/README.md

@@ -0,0 +1,75 @@
+# Tabs
+
+<!-- STORY -->
+
+<hr>
+
+Multiple tabs selection for navigation
+
+##### Import
+
+```js
+import { Tabs } from "blixify-ui-web/components/navigation/tabs";
+```
+
+##### Usage
+
+```jsx
+const [selectedId, setSelectedId] = useState("account");
+const [tabs, setTabs] = useState([
+{ id: "account", name: "My Account", href: "#" },
+{ id: "company", name: "Company", href: "#" },
+{ id: "members", name: "Team Members", href: "#" },
+{ id: "billing", name: "Billing", href: "#" },
+]);
+
+//Default
+<Tabs
+    tabs={tabs}
+    selectedId={selectedId}
+    onClick={(id) => {
+        setSelectedId(id);
+    }}
+    handleChangeTabs={(value) => setTabs(value)}
+    handleDropEnd={() => {}}
+    draggable={true}
+/>
+
+//Overflow Wrap
+<Tabs
+    tabs={tabs}
+    selectedId={selectedId}
+    onClick={(id) => {
+        setSelectedId(id);
+    }}
+    overflowWrap
+/>
+
+// Dark Mode
+<Tabs
+    tabs={tabs}
+    selectedId={selectedId}
+    onClick={(id) => {
+    setSelectedId(id);
+    }}
+    darkMode
+/>
+```
+
+##### Required props
+
+| Name         | Type         | Description     |
+| ------------ | ------------ | --------------- |
+| `tabs`       | `Tabs Class` | Tab Class List  |
+| `selectedId` | `string`     | Selected Tab ID |
+
+##### Optional Props
+
+| Name               | Type                   | Description                                    |
+| ------------------ | ---------------------- | ---------------------------------------------- |
+| `draggable`        | `boolean`              | Make component items draggable                 |
+| `overflowWrap`     | `boolean`              | Wrap tab options to new row when overflow      |
+| `linkProps`        | `Link Props Class`     | Refer to Link Component for more documentation |
+| `onClick`          | `(id: string) => void` | Callback function when tab option is clicked   |
+| `handleChangeTabs` | `(value) => void`      | Required when draggable is true                |
+| `handleDropEnd`    | `() => void`           | Required when draggable is true                |

package/lib/components/navigation/tabs/tabs.stories.tsx

@@ -0,0 +1,60 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Tabs } from ".";
+import README from "./README.md";
+const stories = storiesOf("Navigation", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Tabs", () => {
+  const [selectedId, setSelectedId] = useState("account");
+  const [tabs, setTabs] = useState([
+    { id: "account", name: "My Account", href: "#" },
+    { id: "company", name: "Company", href: "#" },
+    { id: "members", name: "Team Members", href: "#" },
+    { id: "billing", name: "Billing", href: "#" },
+  ]);
+
+  return (
+    <>
+      <h1 className="mb-2 text-lg font-bold">Default</h1>
+      <Tabs
+        tabs={tabs}
+        selectedId={selectedId}
+        onClick={(id) => {
+          setSelectedId(id);
+        }}
+        handleChangeTabs={(value) => setTabs(value)}
+        handleDropEnd={() => {}}
+        draggable={true}
+      />
+      <h1 className="mt-8 text-lg font-bold">Overflow Wrap</h1>
+      <p className="mb-2 text-sm text-gray-500">
+        Wrap tab options to new row when there's an overflow.
+      </p>
+      <Tabs
+        tabs={tabs}
+        selectedId={selectedId}
+        onClick={(id) => {
+          setSelectedId(id);
+        }}
+        overflowWrap
+      />
+      <h1 className="mt-8 mb-2 text-lg font-bold">Dark Mode</h1>
+      <div className="p-4 bg-black rounded-lg">
+        <Tabs
+          tabs={tabs}
+          selectedId={selectedId}
+          onClick={(id) => {
+            setSelectedId(id);
+          }}
+          darkMode={true}
+        />
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,40 @@
+# Column
+
+<!-- STORY -->
+
+<hr>
+
+Column to define vertical or row container
+
+##### Import
+
+```js
+import { Column } from "blixify-ui-web/components/structure/column";
+```
+
+##### Usage
+
+```jsx
+<Column orientation="row" mobileBp="sm" className="bg-gray-50">
+  <p>Row Item 1</p>
+  <p className="sm:ml-2">Row Item 2</p>
+</Column>
+<Column orientation="vertical" mobileBp="sm" className="bg-gray-50 mt-5">
+  <p>Row Item 1</p>
+  <p>Row Item 2</p>
+</Column>
+```
+
+##### Required props
+
+| Name          | Type             | Description     |
+| ------------- | ---------------- | --------------- |
+| `children`    | `React.Element`  | React Element   |
+| `orientation` | `row / vertical` | Row or Vertical |
+
+##### Optional props
+
+| Name        | Type             | Default | Description |
+| ----------- | ---------------- | ------- | ----------- |
+| `mobileBp`  | `sm / md / lg`   | Null    |
+| `className` | `tailwind class` | ""      |

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

@@ -0,0 +1,26 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Column } from ".";
+import README from "./README.md";
+const stories = storiesOf("Structure", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Column", () => {
+  return (
+    <>
+      <Column orientation="row" mobileBp="sm" className="bg-gray-50">
+        <p>Row Item 1</p>
+        <p className="sm:ml-2">Row Item 2</p>
+      </Column>
+      <Column orientation="vertical" mobileBp="sm" className="bg-gray-50 mt-5">
+        <p>Row Item 1</p>
+        <p>Row Item 2</p>
+      </Column>
+    </>
+  );
+});

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

@@ -0,0 +1,34 @@
+# Container
+
+<!-- STORY -->
+
+<hr>
+
+Root container to wrap objects with x-padding
+
+##### Import
+
+```js
+import { Container } from "blixify-ui-web/components/structure/container";
+```
+
+##### Usage
+
+```jsx
+<Container>
+  <h1>Item 1</h1>
+</Container>
+```
+
+##### Required props
+
+| Name       | Type            | Description   |
+| ---------- | --------------- | ------------- |
+| `children` | `React.Element` | React Element |
+
+##### Optional props
+
+| Name        | Type             | Default      | Description |
+| ----------- | ---------------- | ------------ | ----------- |
+| `bgColor`   | `string`         | `bg-gray-50` |             |
+| `className` | `tailwind class` | ""           |             |