gwan-design-system 0.1.1

package/src/templates/component-library/tables/index.tsx

@@ -0,0 +1,143 @@
+import { OrderInfoSVG } from "@/components/icons";
+import Table, { ITableColumn } from "@/components/table";
+import Tag, { TAG_TYPE } from "@/components/tag";
+import { ORDER_STATUS } from "@/components/timeLine";
+
+export interface IData {
+  date: string;
+  orderId: string;
+  price: string;
+  ownerName: string;
+  status: ORDER_STATUS;
+}
+
+const getTagType = (status: ORDER_STATUS) => {
+  switch (status) {
+    case ORDER_STATUS.PENDING:
+      return TAG_TYPE.WARNING;
+    case ORDER_STATUS.DELIVERED:
+      return TAG_TYPE.SUCCESS;
+    case ORDER_STATUS.ORDER_CANCELLED:
+      return TAG_TYPE.DANGER;
+    default:
+      return TAG_TYPE.DEFAULT;
+  }
+};
+
+const columns: ITableColumn[] = [
+  {
+    header: "Date",
+    headerClassName: "",
+    render: (row: IData) => <p>{row.date}</p>,
+  },
+  {
+    header: "Order ID",
+    headerClassName: "",
+    render: (row: IData) => <p>{row.orderId}</p>,
+  },
+  {
+    header: "Price",
+    headerClassName: "",
+    render: (row: IData) => <p>{row.price}</p>,
+  },
+  {
+    header: "Owner Name",
+    headerClassName: "w-[20%]",
+    render: (row: IData) => <p>{row.ownerName}</p>,
+  },
+  {
+    header: "Status",
+    headerClassName: "",
+    render: (row: IData) => (
+      <Tag type={getTagType(row.status)} label={row.status} />
+    ),
+  },
+  {
+    header: "View",
+    headerClassName: "w-[8%]",
+    render: () => (
+      <div className="size-5 cursor-pointer">
+        <OrderInfoSVG />
+      </div>
+    ),
+  },
+];
+
+const data = [
+  {
+    date: "12/12/2021",
+    orderId: "12345623948394",
+    price: "$100",
+    ownerName: "Sonali Rodrigo",
+    status: ORDER_STATUS.PENDING,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "12345623423423",
+    price: "$100",
+    ownerName: "Nimesh Fonseka",
+    status: ORDER_STATUS.DISPATCHED_TO_COURIER,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "1234562344234",
+    price: "$100",
+    ownerName: "Shemeera Fonseka",
+    status: ORDER_STATUS.ORDER_PLACED,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "1234561231231",
+    price: "$100",
+    ownerName: "Renola Mishel",
+    status: ORDER_STATUS.ORDER_CANCELLED,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "1234562345345",
+    price: "$100",
+    ownerName: "Shehan Sonura",
+    status: ORDER_STATUS.DELIVERED,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "123456345234",
+    price: "$100",
+    ownerName: "Abhirami Fernando",
+    status: ORDER_STATUS.PENDING,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "123456123133",
+    price: "$100",
+    ownerName: "Antonette Mari",
+    status: ORDER_STATUS.DISPATCHED_TO_COURIER,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "1234562123123",
+    price: "$100",
+    ownerName: "Dilhani Pereira",
+    status: ORDER_STATUS.ORDER_PLACED,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "123456354543",
+    price: "$100",
+    ownerName: "Johannes Nico",
+    status: ORDER_STATUS.ORDER_CANCELLED,
+  },
+  {
+    date: "12/12/2021",
+    orderId: "12345634534234",
+    price: "$100",
+    ownerName: "Dammika Bandara",
+    status: ORDER_STATUS.DELIVERED,
+  },
+];
+
+const Tables = () => {
+  return <Table columns={columns} data={data} />;
+};
+
+export default Tables;

package/src/templates/component-library/tags/index.tsx

@@ -0,0 +1,15 @@
+import Tag, { TAG_TYPE } from "@/components/tag";
+
+const Tags = () => {
+  return (
+    <div className="flex flex-row justify-center gap-4 items-center">
+      <Tag type={TAG_TYPE.DEFAULT} label="Default"/>
+      <Tag type={TAG_TYPE.SUCCESS} label="Success"/>
+      <Tag type={TAG_TYPE.INFO} label="Info"/>
+      <Tag type={TAG_TYPE.WARNING} label="Warning"/>
+      <Tag type={TAG_TYPE.DANGER} label="Danger"/>
+    </div>
+  );
+};
+
+export default Tags;

package/src/templates/component-library/timeLines/index.tsx

@@ -0,0 +1,96 @@
+import TimeLine, { ORDER_STATUS } from "@/components/timeLine";
+
+const success = [
+  {
+    title: ORDER_STATUS.DELIVERED,
+    date: "2021-01-04",
+    description: "Package is delivered",
+  },
+  {
+    title: ORDER_STATUS.DISPATCHED_TO_COURIER,
+    date: "2021-01-03",
+    description: "Package is in transit",
+  },
+  {
+    title: ORDER_STATUS.PACKAGING,
+    date: "2021-01-03",
+    description: "Packaging is in progress",
+  },
+  {
+    title: ORDER_STATUS.PRINTING_IN_PROGRESS,
+    date: "2021-01-02",
+    description: "Planner is being printed",
+  },
+  {
+    title: ORDER_STATUS.ORDER_PLACED,
+    date: "2025-01-01",
+    description: "Order placed by customer",
+  },
+];
+
+const canceled = [
+  {
+    title: ORDER_STATUS.ORDER_CANCELLED,
+    date: "2021-01-04",
+    description: "Package is delivered",
+  },
+  {
+    title: ORDER_STATUS.DISPATCHED_TO_COURIER,
+    date: "2021-01-03",
+    description: "Package is in transit",
+  },
+  {
+    title: ORDER_STATUS.PACKAGING,
+    date: "2021-01-03",
+    description: "Packaging is in progress",
+  },
+  {
+    title: ORDER_STATUS.PRINTING_IN_PROGRESS,
+    date: "2021-01-02",
+    description: "Planner is being printed",
+  },
+  {
+    title: ORDER_STATUS.ORDER_PLACED,
+    date: "2025-01-01",
+    description: "Order placed by customer",
+  },
+];
+
+const pending = [
+  {
+    title: ORDER_STATUS.PACKAGING,
+    date: "2021-01-03",
+    description: "Packaging is in progress",
+  },
+  {
+    title: ORDER_STATUS.PRINTING_IN_PROGRESS,
+    date: "2021-01-02",
+    description: "Planner is being printed",
+  },
+  {
+    title: ORDER_STATUS.ORDER_PLACED,
+    date: "2025-01-01",
+    description: "Order placed by customer",
+  },
+];
+
+const TimeLines = () => {
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      <div className="flex flex-col gap-8">
+        <p className="text-base font-semibold">Order pending scenario</p>
+        <TimeLine logs={pending} />
+      </div>
+      <div className="flex flex-col gap-8">
+        <p className="text-base font-semibold">Order success scenario</p>
+        <TimeLine logs={success} />
+      </div>
+      <div className="flex flex-col gap-8">
+        <p className="text-base font-semibold">Order canceled scenario</p>
+        <TimeLine logs={canceled} />
+      </div>
+    </div>
+  );
+};
+
+export default TimeLines;

package/src/templates/component-library/tooltips/index.tsx

@@ -0,0 +1,61 @@
+import Tooltip, { TOOLTIP_POSITION } from "@/components/tooltip";
+import { useState } from "react";
+
+const Tooltips = () => {
+  const [showTopTooltip, setShowTopTooltip] = useState(false);
+  const [showRightTooltip, setShowRightTooltip] = useState(false);
+  const [showBottomTooltip, setShowBottomTooltip] = useState(false);
+  const [showLeftTooltip, setShowLeftTooltip] = useState(false);
+
+  const tooltipsComponents = [
+    {
+      label: "Tooltip on top",
+      position: TOOLTIP_POSITION.TOP,
+      showTooltip: showTopTooltip,
+      setShowTooltip: setShowTopTooltip,
+    },
+    {
+      label: "Tooltip on right",
+      position: TOOLTIP_POSITION.RIGHT,
+      showTooltip: showRightTooltip,
+      setShowTooltip: setShowRightTooltip,
+    },
+    {
+      label: "Tooltip on bottom",
+      position: TOOLTIP_POSITION.BOTTOM,
+      showTooltip: showBottomTooltip,
+      setShowTooltip: setShowBottomTooltip,
+    },
+    {
+      label: "Tooltip on left",
+      position: TOOLTIP_POSITION.LEFT,
+      showTooltip: showLeftTooltip,
+      setShowTooltip: setShowLeftTooltip,
+    },
+  ];
+
+  return (
+    <div className="flex flex-row items-center justify-around pt-16">
+      {tooltipsComponents.map(
+        ({ label, position, showTooltip, setShowTooltip }, index) => (
+          <div
+            key={index}
+            className="relative border border-neutrola-700 p-2 rounded-lg cursor-pointer hover:border-primary-500 hover:text-primary-500"
+            onMouseEnter={() => setShowTooltip(true)}
+            onMouseLeave={() => setShowTooltip(false)}
+          >
+            {label}
+            <Tooltip
+              position={position}
+              label={label}
+              isVisible={showTooltip}
+              toolTipWidth="w-32"
+            />
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+export default Tooltips;

package/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
+    "module": "ESNext",
+    "target": "ES6",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/components", "src/index.ts"],
+  "exclude": ["src/app", "src/templates", "node_modules", "dist"]
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}