@skalfa/skalfa-app 1.0.0

package/blueprints/starter.blueprint.json

@@ -0,0 +1,103 @@
+[
+    {
+        "model"   :  "iam/user",
+        "schema"  :  {
+            "name"                   :  "type:string,200 required min:1 max:200 fillable searchable selectable",
+            "email"                  :  "type:string,100 unique index required min:5 max:100 fillable searchable selectable",
+            "password"               :  "type:string,200 required min:8 max:50 fillable hidden",
+            "image"                  :  "type:string,100 required fillable selectable file",
+            "email_verification_at"  :  "type:timestamp"
+        },
+        "relations": {
+            "roles": "[]:Role expandable fillable",
+            "permission": "[1]Permission"
+        },
+        "seeders"      :  [
+            ["Admin", "admin@mail.com", "$2b$10$tPX5QhnM.vUEDmDpht6O4OarVyTh43NTxhkzFrNxfRijJ3uhSHcli", null, "0001-01-01 01:01:01.000+00"], 
+            ["User", "user@mail.com", "$2b$10$tPX5QhnM.vUEDmDpht6O4OarVyTh43NTxhkzFrNxfRijJ3uhSHcli", null, "0001-01-01 01:01:01.000+00"]
+        ],
+        "migrations"  :  false,
+
+        "pages": {
+            "iam/user": {
+                "features": "create import export print",
+                "schema": {
+                    "Nama"      :  "name column:sortable form:text|required|min:1|max:200|6",
+                    "Email"     :  "email column:sortable form:text|required|email|min:5|max:100|6",
+                    "Password"  :  "password form:input-password|required,create|min:8|max:50",
+                    "Foto"      :  "image form:image|6"
+                }
+            }
+        }
+    },
+    {
+        "model"   :  "iam/role",
+        "schema"  :  {
+            "name"  :  "type:string,25 index required min:1 max:25 fillable searchable selectable"
+        },
+        "controllers"  :  ["iam/role"],
+        "seeders"      :  [["Admin"], ["User"]],
+        "migrations"   :  false,
+
+        "pages": {
+            "iam/user": {
+                "features": "create",
+                "schema": {
+                    "Nama"      :  "name column:sortable form:text|required|min:1|max:25"
+                }
+            }
+        }
+    },
+    {
+        "model"   :  "iam/user-role",
+        "schema"  :  {
+            "user_id"  :  "type:bigInteger unsigned index required fillable selectable",
+            "role_id"  :  "type:bigInteger unsigned index required fillable selectable"
+        },
+        "relations": {
+            "role"  :  "Role",
+            "user"  :  "User"
+        },
+        "controllers"  :  false,
+        "seeders"      :  [[1, 1], [2, 2]],
+        "migrations"   :  false,
+        "pages": false
+    },
+    {
+        "model"   :  "iam/role-permission",
+        "schema"  :  {
+            "user_id"       :  "type:bigInteger unsigned index fillable selectable",
+            "role_id"       :  "type:bigInteger unsigned index fillable selectable",
+            "permissions"   :  "type:json nullable fillable selectable"
+        },
+        "migrations"  :  false
+    },
+    {
+        "model"        :  "iam/user-access-token",
+        "controllers"  :  false,
+        "schema"       :  {
+            "user_id"       :  "type:bigInteger unsigned index fillable selectable",
+            "agent"         :  "type:string,100 nullable index fillable selectable",
+            "token"         :  "type:string,200 fillable selectable hidden",
+            "permissions"   :  "type:json nullable fillable selectable",
+            "last_used_ip"  :  "type:string,100 nullable fillable selectable",
+            "last_used_at"  :  "type:timestamp nullable fillable selectable",
+            "expired_at"    :  "type:timestamp nullable fillable selectable"
+        },
+        "migrations"  :  false,
+        "pages": false
+    },
+    {
+        "model"        :  "iam/user-mail-token",
+        "controllers"  :  false,
+        "schema"       :  {
+            "user_id"     :  "type:bigInteger unsigned index fillable selectable",
+            "type"        :  "type:string,10 fillable selectable hidden",
+            "token"       :  "type:string,200 fillable selectable hidden",
+            "used_at"     :  "type:timestamp fillable selectable",
+            "expired_at"  :  "type:timestamp fillable selectable"
+        },
+        "migrations"  :  false,
+        "pages": false
+    }
+]

package/components/base.components/accordion/Accordion.component.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react";
+import { faChevronDown, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "container" | "head" | "active" | "base";
+
+export interface AccordionProps {
+  setActive   ?:  number | null;
+  items        :  { head: ReactNode; content: ReactNode }[];
+  horizontal  ?:  boolean;
+  className   ?:  string;
+};
+
+
+
+export function AccordionComponent({
+  items,
+  setActive = null,
+  horizontal = false,
+
+  /** Use custom class with: "container::", "head::", "active::". */
+  className = "",
+}: AccordionProps) {
+  const [isActive, setIsActive] = useState<number | null>(setActive);
+
+  useEffect(() => {
+    setIsActive(setActive);
+  }, [setActive]);
+
+  const styles = {
+    container: cn(
+      "bg-white border rounded-lg flex",
+      horizontal ? "flex-row w-min border-r-0" : "flex-col border-b-0",
+      pcn<CT>(className, "container"),
+    ),
+    head: cn(
+      "flex justify-between items-center gap-4 font-semibold cursor-pointer",
+      horizontal ? "flex-col px-2 py-4" : "py-2 px-4",
+      pcn<CT>(className, "head"),
+    ),
+  };
+
+  return (
+    <div className={styles?.container}>
+      {items.map(({ head, content }, key) => (
+        <div
+          key={key}
+          className={cn(horizontal ? "border-r flex" : "border-b")}
+        >
+          <div
+            className={styles?.head}
+            onClick={() => setIsActive(isActive === key ? null : key)}
+          >
+            <div>{head}</div>
+            <div
+              className={cn(
+                "w-min transition-transform",
+                isActive !== key && "rotate-180",
+              )}
+            >
+              <FontAwesomeIcon icon={horizontal ? faChevronLeft : faChevronDown} />
+            </div>
+          </div>
+          <div
+            className={cn(
+              "transition-all overflow-hidden",
+              horizontal ? isActive === key  ? "max-w-max pr-4 py-2" : "max-w-0 px-0"
+                : isActive === key ? "max-h-max pb-4 px-4" : "max-h-0 pb-0 px-4",
+              pcn<CT>(className, "base"),
+              isActive === key && pcn<CT>(className, "active"),
+            )}
+          >{content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/base.components/breadcrumb/Breadcrumb.component.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { Fragment, ReactNode } from "react";
+import Link from "next/link";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "container" | "active" | "base";
+
+export interface BreadcrumbItemProps {
+  path        :  string;
+  label       :  string;
+  className  ?:  string;
+};
+
+export interface BreadcrumbProps {
+  items              :  BreadcrumbItemProps[];
+  square            ?:  boolean;
+  separatorContent  ?:  string | ReactNode;
+
+  /** Use custom class with: "container::", "active::". */
+  className  ?:  string;
+};
+
+
+export function BreadcrumbComponent({
+  items,
+  className  =  "",
+  square     =  false,
+  separatorContent,
+}: BreadcrumbProps) {
+  return (
+    <nav
+      className={cn(
+        "w-full overflow-x-auto overflow-y-hidden whitespace-nowrap",
+        pcn<CT>(className, "container"),
+      )}
+    >
+      <ol className="flex">
+        {items.map((item, index) => {
+          const isActive = index === items.length - 1;
+
+          return (
+            <Fragment key={item.path}>
+              <li>
+                <Link
+                  href={item.path}
+                  className={cn(
+                    "capitalize",
+                    pcn<CT>(className, "base"),
+                    square && "py-2 px-4 rounded-[6px] bg-light-foreground/10",
+                    isActive && "text-primary",
+                    isActive && square && "text-primary bg-primary/10",
+                    isActive && pcn<CT>(className, "active"),
+                  )}
+                >
+                  {item.label}
+                </Link>
+              </li>
+              
+              {!isActive && (
+                <li className="mx-2">
+                  {separatorContent || (
+                    <FontAwesomeIcon
+                      icon={faChevronRight}
+                      className="text-light-foreground"
+                    />
+                  )}
+                </li>
+              )}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/components/base.components/button/Button.component.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { ReactNode } from "react";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+import { buttonVariant, buttonContainer, buttonRadius } from "./button.decorate";
+
+
+
+type CT = "icon" | "loading" | "base";
+
+export interface ButtonProps {
+  type      ?:  "submit" | "button";
+  label     ?:  string | ReactNode;
+  variant   ?:  "solid" | "outline" | "light" | "simple";
+  paint     ?:  "primary" | "secondary" | "success" | "danger" | "warning";
+  rounded   ?:  boolean | string;
+  block     ?:  boolean;
+  disabled  ?:  boolean;
+  size      ?:  "xs" | "sm" | "md" | "lg";
+  onClick   ?:  any;
+  href      ?:  string;
+  icon      ?:  any;
+  loading   ?:  boolean;
+  hover     ?:  boolean;
+
+  /** Use custom class with: "icon::", "loading::". */
+  className?: string;
+};
+
+
+
+
+export function ButtonComponent({
+  type       =  "button",
+  label,
+  variant    =  "solid",
+  paint      =  "primary",
+  rounded,
+  block,
+  disabled,
+  size       =  "md",
+  onClick,
+  href,
+  icon,
+  loading,
+  className  =  "",
+}: ButtonProps) {
+  const buttonClasses = cn(
+    "button",
+    buttonVariant[variant][paint],
+    buttonContainer[size],
+    rounded ? "rounded-full" : buttonRadius[size],
+    block && "w-full justify-center",
+    pcn<CT>(className, "base"),
+  );
+
+  const loadingClasses = cn(
+    "button-loading",
+    size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
+    pcn<CT>(className, "loading"),
+  );
+
+  const iconClasses = cn(
+    size === "xs"? "text-xs" : size === "sm" ? "text-sm mb-0.5" : size === "lg" ? "text-xl mb-0.5" : "text-base mb-0.5",
+    pcn<CT>(className, "icon"),
+  );
+
+  return (
+    <ButtonComponentWrapper
+      type={type}
+      className={buttonClasses}
+      disabled={disabled || loading}
+      onClick={onClick}
+      href={href}
+    >
+      {loading ? (
+        <div className={loadingClasses}></div>
+      ) : (
+        icon && <FontAwesomeIcon icon={icon} className={iconClasses} />
+      )}
+      {label}
+    </ButtonComponentWrapper>
+  );
+}
+
+
+const ButtonComponentWrapper = (props: ButtonProps & {children?: ReactNode}) => {
+  return !props.href ? <button {...props} >{props.children}</button> : <Link href={props.href || ""} {...props}></Link> 
+}

package/components/base.components/button/IconButton.component.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+import { buttonVariant, buttonRadius, iconButtonContainer } from "./button.decorate";
+
+
+
+type CT = "icon" | "loading" | "base";
+
+export interface IconButtonProps {
+  icon         ?:  any;
+  type         ?:  "submit" | "button";
+  variant      ?:  "solid" | "outline" | "light" | "simple";
+  rounded      ?:  boolean | string;
+  disabled     ?:  boolean;
+  size         ?:  "xs" | "sm" | "md" | "lg";
+  onClick      ?:  any;
+  loading      ?:  boolean;
+  hover        ?:  boolean;
+  tips         ?:  string | undefined;
+  paint        ?:  "primary" | "secondary" | "success" | "danger" | "warning";
+  customPaint  ?:  {
+    bg         ?:  string;
+    color      ?:  string;
+    border     ?:  string;
+  };
+
+  /** Use custom class with: "icon::", "loading::". */
+  className?: string;
+};
+
+
+
+export function IconButtonComponent({
+  type     =  "button",
+  variant  =  "solid",
+  paint    =  "primary",
+  size     =  "md",
+  rounded,
+  disabled,
+  onClick,
+  icon,
+  loading,
+  tips,
+  className  =  "",
+}: IconButtonProps) {
+  const buttonClasses = cn(
+    "button",
+    buttonVariant[variant][paint],
+    iconButtonContainer[size],
+    rounded ? "rounded-full" : buttonRadius[size],
+    pcn<CT>(className, "base")
+  );
+
+  const loadingClasses = cn(
+    "button-loading",
+    size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
+    pcn<CT>(className, "loading")
+  );
+
+  const iconClasses = cn(
+    size === "xs"
+      ? "text-xs"
+      : size === "sm"
+        ? "text-sm mb-0.5"
+        : size === "lg"
+          ? "text-xl mb-0.5"
+          : "text-base mb-0.5",
+    pcn<CT>(className, "icon")
+  );
+
+  return (
+    <button
+      type={type}
+      className={buttonClasses}
+      disabled={disabled || loading}
+      onClick={onClick}
+      title={tips}
+    >
+      {loading ? (
+        <div className={loadingClasses}></div>
+      ) : (
+        <FontAwesomeIcon icon={icon} className={iconClasses} />
+      )}
+    </button>
+  );
+}

package/components/base.components/button/button.decorate.ts

@@ -0,0 +1,82 @@
+export const buttonContainer = {
+  lg: "px-14 py-3 flex items-center gap-3",
+  md: "px-8 py-2 flex items-center gap-2",
+  sm: "px-6 py-2 text-xs flex items-center gap-2",
+  xs: "px-3 py-1 text-xs flex items-center gap-1.5",
+};
+
+export const iconButtonContainer = {
+  lg: "w-10 h-10 flex items-center justify-center",
+  md: "w-8 h-8 flex items-center justify-center",
+  sm: "w-7 h-7 text-xs flex items-center justify-center",
+  xs: "w-6 h-6 text-xs flex items-center justify-center",
+};
+
+export const buttonVariant = {
+  solid: {
+    primary: "bg-primary text-white",
+    secondary: "bg-secondary text-white",
+    warning: "bg-warning text-white",
+    danger: "bg-danger text-white",
+    success: "bg-success text-white",
+  },
+  outline: {
+    primary: "border text-primary",
+    secondary: "border text-secondary",
+    warning: "border text-warning",
+    danger: "border text-danger",
+    success: "border text-success",
+  },
+  light: {
+    primary: "bg-light-primary text-primary",
+    secondary: "bg-light-secondary text-secondary",
+    warning: "bg-light-warning text-warning",
+    danger: "bg-light-danger text-danger",
+    success: "bg-light-success text-success",
+  },
+  simple: {
+    primary: "text-primary",
+    secondary: "text-secondary",
+    warning: "text-warning",
+    danger: "text-danger",
+    success: "text-success",
+  },
+};
+
+export const buttonIcon = {
+  solid: {
+    primary: "text-white",
+    secondary: "text-white",
+    warning: "text-white",
+    danger: "text-white",
+    success: "text-white",
+  },
+  outline: {
+    primary: "text-primary",
+    secondary: "text-secondary",
+    warning: "text-warning",
+    danger: "text-danger",
+    success: "text-success",
+  },
+  light: {
+    primary: "text-primary",
+    secondary: "text-secondary",
+    warning: "text-warning",
+    danger: "text-danger",
+    success: "text-success",
+  },
+  simple: {
+    primary: "text-primary",
+    secondary: "text-secondary",
+    warning: "text-warning",
+    danger: "text-danger",
+    success: "text-success",
+  },
+};
+
+export const buttonRadius = {
+  lg: "rounded-sm",
+  md: "rounded-sm",
+  sm: "rounded-sm",
+  xs: "rounded-xs",
+};

package/components/base.components/card/AlertCard.component.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { ReactNode } from "react";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "badge" | "title" | "base";
+
+export interface AlertCardProps {
+  title        ?:  string | ReactNode;
+  leftContent  ?:  string | ReactNode;
+  badge        ?:  string | ReactNode;
+  content      ?:  string | ReactNode;
+  footer       ?:  string | ReactNode;
+
+  /** Use custom class with: "badge::", "title::". */
+  className  ?:  string;
+}
+
+
+
+export function AlertCardComponent({
+  title,
+  leftContent,
+  badge,
+  content,
+  footer,
+  className = "",
+}: AlertCardProps) {
+  return (
+    <>
+      <section
+        className={cn(
+          "rounded-[6px] bg-white p-4 border sm:p-6",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        <div className="flex items-start sm:gap-8">
+          {leftContent}
+
+          <div>
+            <strong
+              className={cn(
+                "rounded-[4px] border text-primary bg-primary/20 px-3 py-1.5 text-xs font-bold",
+                pcn<CT>(className, "badge"),
+              )}
+            >
+              {badge}
+            </strong>
+
+            <h3
+              className={cn(
+                "mt-4 text-lg font-medium sm:text-xl",
+                pcn<CT>(className, "title"),
+              )}
+            >
+              {title}
+            </h3>
+
+            {content}
+
+            {footer && <div className="pt-4">{footer}</div>}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

package/components/base.components/card/Card.component.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { cn } from "@utils";
+
+
+
+export interface CardProps {
+  children    :  React.ReactNode;
+  className  ?:  string;
+}
+
+
+
+export function CardComponent({
+  children,
+  className,
+}: CardProps) {
+  return (
+    <>
+      <div className={cn("px-4 py-2.5 rounded-[6px] border bg-white", className)}>
+        {children}
+      </div>
+    </>
+  );
+}

package/components/base.components/card/DashboardCard.component.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import Link from "next/link";
+import { ReactNode } from "react";
+import { cn } from "@utils";
+
+
+
+export interface DashboardCardProps {
+  content       ?:  string | ReactNode;
+  title         ?:  string | ReactNode;
+  rightContent  ?:  string | ReactNode;
+  path          ?:  string;
+  className     ?:  string;
+}
+
+
+
+export function DashboardCardComponent({
+  content,
+  title,
+  rightContent,
+  path,
+  className,
+} : DashboardCardProps) {
+  return (
+    <>
+      <Link href={path || ""}>
+        <div
+          className={cn(
+            `bg-white border py-4 px-6 rounded-[6px] flex justify-between gap-4 items-center`,
+            className,
+          )}
+        >
+          <div>
+            <div className="flex gap-4 items-center">{content}</div>
+            {title}
+          </div>
+          <div>{rightContent}</div>
+        </div>
+      </Link>
+    </>
+  );
+}