@zauru-sdk/components 1.0.54 → 1.0.60

package/src/NavBar/NavBar.types.ts

@@ -1,64 +1,64 @@
-export type NavBarItemsSchema = {
-  name: string;
-  link: string;
-  loggedIn: boolean;
-  icon?: any;
-  color?: "green";
-  childrens?: Exclude<NavBarItemsSchema, "loggedIn">[];
-};
-
-export type NavBarProps = {
-  title: string;
-  loggedIn: boolean;
-  items: Array<NavBarItemsSchema>;
-  selectedColor:
-    | "pink"
-    | "purple"
-    | "slate"
-    | "green"
-    | "yellow"
-    | "red"
-    | "sky";
-  LinkComponent?: any;
-};
-
-export type NavBarStateProps = {
-  NavBarOpen: boolean;
-  setNavBarOpen?: any;
-};
-
-export type ColorInterface = {
-  bg900: string;
-  bg700: string;
-  bg600: string;
-  bg500: string;
-  ring600: string;
-  ring500: string;
-};
-
-export type NavItemProps = {
-  name: string;
-  link: string;
-  icon?: any;
-  color: ColorInterface;
-  specialColor?: ColorInterface;
-  childrens?: Exclude<NavItemProps, "index" | "color">[];
-};
-
-export type EntityNameType = {
-  entityName: string;
-};
-
-export type EntityProps = {
-  name?: string;
-  color: ColorInterface;
-  options: any[];
-};
-
-export type DropDownLinkButtonType = {
-  text: string;
-  path: string;
-  icon?: any;
-  buttonHover?: string;
-  LinkComponent?: any;
-};
+export type NavBarItemsSchema = {
+  name: string;
+  link: string;
+  loggedIn: boolean;
+  icon?: any;
+  color?: "green";
+  childrens?: Exclude<NavBarItemsSchema, "loggedIn">[];
+};
+
+export type NavBarProps = {
+  title: string;
+  loggedIn: boolean;
+  items: Array<NavBarItemsSchema>;
+  selectedColor:
+    | "pink"
+    | "purple"
+    | "slate"
+    | "green"
+    | "yellow"
+    | "red"
+    | "sky";
+  LinkComponent?: any;
+};
+
+export type NavBarStateProps = {
+  NavBarOpen: boolean;
+  setNavBarOpen?: any;
+};
+
+export type ColorInterface = {
+  bg900: string;
+  bg700: string;
+  bg600: string;
+  bg500: string;
+  ring600: string;
+  ring500: string;
+};
+
+export type NavItemProps = {
+  name: string;
+  link: string;
+  icon?: any;
+  color: ColorInterface;
+  specialColor?: ColorInterface;
+  childrens?: Exclude<NavItemProps, "index" | "color">[];
+};
+
+export type EntityNameType = {
+  entityName: string;
+};
+
+export type EntityProps = {
+  name?: string;
+  color: ColorInterface;
+  options: any[];
+};
+
+export type DropDownLinkButtonType = {
+  text: string;
+  path: string;
+  icon?: any;
+  buttonHover?: string;
+  LinkComponent?: any;
+};

package/src/NavBar/NavBar.utils.ts

@@ -1,58 +1,58 @@
-export const COLORS = {
-  sky: {
-    bg900: "bg-sky-900",
-    bg700: "bg-sky-700",
-    bg600: "bg-sky-600",
-    bg500: "bg-sky-500",
-    ring600: "ring-sky-600",
-    ring500: "ring-sky-500",
-  },
-  purple: {
-    bg900: "bg-purple-900",
-    bg700: "bg-purple-700",
-    bg600: "bg-purple-600",
-    bg500: "bg-purple-500",
-    ring600: "ring-purple-600",
-    ring500: "ring-purple-500",
-  },
-  pink: {
-    bg900: "bg-pink-900",
-    bg700: "bg-pink-700",
-    bg600: "bg-pink-600",
-    bg500: "bg-pink-500",
-    ring600: "ring-pink-600",
-    ring500: "ring-pink-500",
-  },
-  slate: {
-    bg900: "bg-slate-900",
-    bg700: "bg-slate-700",
-    bg600: "bg-slate-600",
-    bg500: "bg-slate-500",
-    ring600: "ring-slate-600",
-    ring500: "ring-slate-500",
-  },
-  green: {
-    bg900: "bg-green-900",
-    bg700: "bg-green-700",
-    bg600: "bg-green-600",
-    bg500: "bg-green-500",
-    ring600: "ring-green-600",
-    ring500: "ring-green-500",
-  },
-  yellow: {
-    bg900: "bg-yellow-900",
-    bg700: "bg-yellow-700",
-    bg600: "bg-yellow-600",
-    bg500: "bg-yellow-500",
-    ring600: "ring-yellow-600",
-    ring500: "ring-yellow-500",
-  },
-  red: {
-    bg900: "bg-red-900",
-    bg700: "bg-red-700",
-    bg600: "bg-red-600",
-    bg500: "bg-red-500",
-    ring600: "ring-red-600",
-    ring500: "ring-red-500",
-  },
-};
+export const COLORS = {
+  sky: {
+    bg900: "bg-sky-900",
+    bg700: "bg-sky-700",
+    bg600: "bg-sky-600",
+    bg500: "bg-sky-500",
+    ring600: "ring-sky-600",
+    ring500: "ring-sky-500",
+  },
+  purple: {
+    bg900: "bg-purple-900",
+    bg700: "bg-purple-700",
+    bg600: "bg-purple-600",
+    bg500: "bg-purple-500",
+    ring600: "ring-purple-600",
+    ring500: "ring-purple-500",
+  },
+  pink: {
+    bg900: "bg-pink-900",
+    bg700: "bg-pink-700",
+    bg600: "bg-pink-600",
+    bg500: "bg-pink-500",
+    ring600: "ring-pink-600",
+    ring500: "ring-pink-500",
+  },
+  slate: {
+    bg900: "bg-slate-900",
+    bg700: "bg-slate-700",
+    bg600: "bg-slate-600",
+    bg500: "bg-slate-500",
+    ring600: "ring-slate-600",
+    ring500: "ring-slate-500",
+  },
+  green: {
+    bg900: "bg-green-900",
+    bg700: "bg-green-700",
+    bg600: "bg-green-600",
+    bg500: "bg-green-500",
+    ring600: "ring-green-600",
+    ring500: "ring-green-500",
+  },
+  yellow: {
+    bg900: "bg-yellow-900",
+    bg700: "bg-yellow-700",
+    bg600: "bg-yellow-600",
+    bg500: "bg-yellow-500",
+    ring600: "ring-yellow-600",
+    ring500: "ring-yellow-500",
+  },
+  red: {
+    bg900: "bg-red-900",
+    bg700: "bg-red-700",
+    bg600: "bg-red-600",
+    bg500: "bg-red-500",
+    ring600: "ring-red-600",
+    ring500: "ring-red-500",
+  },
+};

package/src/NavBar/index.tsx

@@ -1,5 +1,5 @@
-export * from "./NavBar.js";
-
-export * from "./NavBar.types.js";
-
-export * from "./NavBar.utils.js";
+export * from "./NavBar.js";
+
+export * from "./NavBar.types.js";
+
+export * from "./NavBar.utils.js";

package/src/ProgressBar/ProgressBar.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-
-type Props = {
-  title?: string;
-  percent?: string;
-};
-
-export const ProgressBar = (props: Props) => {
-  const { title, percent } = props;
-  return (
-    <>
-      {percent && (
-        <>
-          {title && <div className="mb-1 text-lg font-medium">{title}</div>}
-          <div className="w-full h-6 bg-gray-200 rounded-full">
-            <div
-              className="h-6 bg-blue-600 rounded-full"
-              style={{ width: `${percent}%` }}
-            ></div>
-          </div>
-        </>
-      )}
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  title?: string;
+  percent?: string;
+};
+
+export const ProgressBar = (props: Props) => {
+  const { title, percent } = props;
+  return (
+    <>
+      {percent && (
+        <>
+          {title && <div className="mb-1 text-lg font-medium">{title}</div>}
+          <div className="w-full h-6 bg-gray-200 rounded-full">
+            <div
+              className="h-6 bg-blue-600 rounded-full"
+              style={{ width: `${percent}%` }}
+            ></div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};

package/src/ProgressBar/ProgressCircle.tsx

@@ -1,75 +1,75 @@
-import React, { useEffect, useState } from "react";
-
-export const ProgressCircle = ({
-  total,
-  completed,
-  description,
-  title,
-}: {
-  total: number;
-  completed: number;
-  description: string;
-  title?: string;
-}) => {
-  const [percentage, setPercentage] = useState(0);
-  const strokeDasharray = 2 * Math.PI * 42; // radio del circulo
-  const progressColor = `rgba(${255 - 2.55 * percentage}, ${
-    2.55 * percentage
-  }, 0)`;
-
-  useEffect(() => {
-    if (total > 0) {
-      setPercentage((completed / total) * 100);
-    } else {
-      setPercentage(100);
-    }
-  }, [total, completed]);
-
-  return (
-    <div className="flex flex-col items-center justify-center">
-      {title && (
-        <h2 className="mb-4 text-xl text-center text-gray-700">{title}</h2>
-      )}
-      <svg width="100" height="100" className="relative">
-        <circle
-          r="42"
-          cx="50"
-          cy="50"
-          fill="transparent"
-          stroke="#eee"
-          strokeWidth="8"
-        />
-        <circle
-          r="42"
-          cx="50"
-          cy="50"
-          fill="transparent"
-          stroke={progressColor}
-          strokeWidth="8"
-          strokeDasharray={strokeDasharray}
-          strokeDashoffset={
-            strokeDasharray - strokeDasharray * (percentage / 100)
-          }
-          strokeLinecap="round"
-          style={{
-            transform: "rotate(-90deg)",
-            transformOrigin: "50% 50%",
-          }}
-        />
-        <text
-          x="50"
-          y="55"
-          textAnchor="middle"
-          fill={progressColor}
-          style={{
-            fontSize: "16px",
-            fontWeight: "bold",
-          }}
-        >
-          {`${Math.round(percentage)}%`}
-        </text>
-      </svg>
-      <p className="mt-2 text-center text-gray-500">{description}</p>
-    </div>
-  );
-};
+import React, { useEffect, useState } from "react";
+
+export const ProgressCircle = ({
+  total,
+  completed,
+  description,
+  title,
+}: {
+  total: number;
+  completed: number;
+  description: string;
+  title?: string;
+}) => {
+  const [percentage, setPercentage] = useState(0);
+  const strokeDasharray = 2 * Math.PI * 42; // radio del circulo
+  const progressColor = `rgba(${255 - 2.55 * percentage}, ${
+    2.55 * percentage
+  }, 0)`;
+
+  useEffect(() => {
+    if (total > 0) {
+      setPercentage((completed / total) * 100);
+    } else {
+      setPercentage(100);
+    }
+  }, [total, completed]);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      {title && (
+        <h2 className="mb-4 text-xl text-center text-gray-700">{title}</h2>
+      )}
+      <svg width="100" height="100" className="relative">
+        <circle
+          r="42"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke="#eee"
+          strokeWidth="8"
+        />
+        <circle
+          r="42"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke={progressColor}
+          strokeWidth="8"
+          strokeDasharray={strokeDasharray}
+          strokeDashoffset={
+            strokeDasharray - strokeDasharray * (percentage / 100)
+          }
+          strokeLinecap="round"
+          style={{
+            transform: "rotate(-90deg)",
+            transformOrigin: "50% 50%",
+          }}
+        />
+        <text
+          x="50"
+          y="55"
+          textAnchor="middle"
+          fill={progressColor}
+          style={{
+            fontSize: "16px",
+            fontWeight: "bold",
+          }}
+        >
+          {`${Math.round(percentage)}%`}
+        </text>
+      </svg>
+      <p className="mt-2 text-center text-gray-500">{description}</p>
+    </div>
+  );
+};

package/src/ProgressBar/index.tsx

@@ -1,2 +1,2 @@
-export * from "./ProgressBar.js";
-export * from "./ProgressCircle.js";
+export * from "./ProgressBar.js";
+export * from "./ProgressCircle.js";

package/src/Skeletons/LoadingInputSkeleton.tsx

@@ -1,12 +1,12 @@
-export const LoadingInputSkeleton = () => {
-  return (
-    <div
-      className="w-full h-full bg-gray-300 animate-pulse rounded"
-      style={{
-        maxWidth: "100%",
-        height: "40px",
-        boxShadow: "0px 0px 0px 1px rgba(0, 0, 0, 0.1)",
-      }}
-    />
-  );
-};
+export const LoadingInputSkeleton = () => {
+  return (
+    <div
+      className="w-full h-full bg-gray-300 animate-pulse rounded"
+      style={{
+        maxWidth: "100%",
+        height: "40px",
+        boxShadow: "0px 0px 0px 1px rgba(0, 0, 0, 0.1)",
+      }}
+    />
+  );
+};

package/src/Skeletons/index.ts

@@ -1 +1 @@
-export * from "./LoadingInputSkeleton.js";
+export * from "./LoadingInputSkeleton.js";

package/src/Tab/Tab.tsx

@@ -1,63 +1,63 @@
-import { redirect } from "@remix-run/node";
-import { Outlet } from "@remix-run/react";
-import React from "react";
-
-export type TabItem = { title: string; link: string };
-
-type Props = {
-  items: Array<TabItem>;
-};
-
-//<reference> https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text
-export const Tabs = (props: Props) => {
-  const { items } = props;
-  const [openTab, setOpenTab] = React.useState(1);
-  return (
-    <>
-      <div className="flex flex-wrap">
-        <div className="w-full">
-          <ul
-            className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
-            role="tablist"
-          >
-            {items?.map((item: TabItem, index: number) => {
-              return (
-                <li
-                  key={index}
-                  className="mb-px mr-2 last:mr-0 flex-auto text-center"
-                >
-                  <a
-                    key={index}
-                    className={
-                      "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
-                      (openTab === index
-                        ? "text-white bg-red-600"
-                        : "text-red-600 bg-white")
-                    }
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setOpenTab(index);
-                      redirect(item.link);
-                    }}
-                    data-toggle="tab"
-                    href={item.link}
-                    role="tablist"
-                  >
-                    {item.title}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-          <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
-            <div className="px-4 py-5 flex-auto">
-              <div className="tab-content tab-space">
-                <Outlet />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
+import { redirect } from "@remix-run/node";
+import { Outlet } from "@remix-run/react";
+import React from "react";
+
+export type TabItem = { title: string; link: string };
+
+type Props = {
+  items: Array<TabItem>;
+};
+
+//<reference> https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text
+export const Tabs = (props: Props) => {
+  const { items } = props;
+  const [openTab, setOpenTab] = React.useState(1);
+  return (
+    <>
+      <div className="flex flex-wrap">
+        <div className="w-full">
+          <ul
+            className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
+            role="tablist"
+          >
+            {items?.map((item: TabItem, index: number) => {
+              return (
+                <li
+                  key={index}
+                  className="mb-px mr-2 last:mr-0 flex-auto text-center"
+                >
+                  <a
+                    key={index}
+                    className={
+                      "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
+                      (openTab === index
+                        ? "text-white bg-red-600"
+                        : "text-red-600 bg-white")
+                    }
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setOpenTab(index);
+                      redirect(item.link);
+                    }}
+                    data-toggle="tab"
+                    href={item.link}
+                    role="tablist"
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+          <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
+            <div className="px-4 py-5 flex-auto">
+              <div className="tab-content tab-space">
+                <Outlet />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/Tab/index.ts

@@ -1 +1 @@
-export * from "./Tab.js";
+export * from "./Tab.js";