@skalfa/skalfa-app 1.0.3 → 1.0.6

package/styles/globals.css

@@ -1,6 +1,13 @@
 @import "tailwindcss";
+@import "./components.css";
+@import "./utilities.css";
+
+
 
 @theme {
+  /* ============================ */
+  /* ## Colors                    */
+  /* ============================ */
   --color-background: #FAFDFF;
   --color-foreground: #575757;
   --color-light-foreground: #9b9b9b;
@@ -16,7 +23,13 @@
   --color-light-success: #9af8f9;
   --color-disable: #c4c3c3;
   --color-light-disable: #f4f4f4;
+  --color-stroke: #e2e8f0;
+  --color-light-stroke: #f1f5f9;
+
 
+  /* ============================ */
+  /* ## Animates                  */
+  /* ============================ */
   --animate-intro-fade: intro_fade 0.1s ease-in-out forwards;
   @keyframes intro_fade {
     from {
@@ -26,6 +39,7 @@
       opacity: 1;
     }
   }
+
   --animate-intro-right: intro_right 0.1s ease-in-out;
   @keyframes intro_right {
     from {
@@ -33,6 +47,15 @@
       opacity: 0;
     }
   }
+
+  --animate-intro-left: intro_left 0.1s ease-in-out;
+  @keyframes intro_left {
+    from {
+      transform: translateX(-100);
+      opacity: 0;
+    }
+  }
+
   --animate-intro-down: intro_down 0.1s ease-in-out;
   @keyframes intro_down {
     from {
@@ -40,192 +63,34 @@
       opacity: 0;
     }
   }
-}
-
-body {
-  @apply bg-background text-foreground max-w-full overflow-x-hidden font-normal;
-}
-
-* {
-  @apply transition duration-75 border-foreground/30;
-}
-
-@layer base {
-}
-
-
-@layer components {
-  .button {
-    @apply whitespace-nowrap cursor-pointer disabled:!text-disable disabled:!bg-light-disable;
-    transform: scale(1);
-    filter: brightness(0.94);
-  }
 
-  .button:disabled {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .button:hover {
-    /* transform: scale(1.02); */
-    filter: brightness(1);
-    /* box-shadow: 0 2px 5px 0 rgba(87, 87, 87, 0.15); */
-  }
-
-  .button:active {
-    transform: scale(1);
-    filter: brightness(0.9);
-    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.25);
-  }
-
-  .button-loading {
-    border-radius: 50%;
-    display: inline-block;
-    border-top: 2.5px solid;
-    border-left: 2.5px solid;
-    border-right: 2.5px solid transparent;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-  }
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
+  --animate-intro-up: intro_up 0.1s ease-in-out;
+  @keyframes intro_up {
+    from {
+      transform: translateY(100);
+      opacity: 0;
     }
   }
 
-  .input {
-    @apply px-4 py-2 rounded-[6px] text-foreground bg-background w-full transition duration-150 ease-in-out focus:outline-none border border-slate-300 placeholder:font-normal placeholder:text-light-foreground focus:!border-primary disabled:opacity-60;
-  }
-
-  .input-file {
-    @apply file:-mx-3 file:-my-1 file:cursor-pointer file:overflow-hidden file:rounded-md file:border-0 file:border-solid file:border-inherit file:[margin-inline-end:0.75rem] file:bg-slate-200 file:px-3 file:py-1 file:text-slate-500;
-  }
-
-  .input-label {
-    @apply select-none text-sm text-foreground;
-  }
 
-  .input-error {
-    @apply !border-light-danger bg-light-danger/20;
-  }
-
-  .input-icon {
-    @apply absolute top-1/2 -translate-y-1/2 text-light-foreground;
-  }
-
-  .input-error-message {
-    @apply text-xs text-danger;
-  }
-
-  .input-tip {
-    @apply text-xs text-light-foreground;
-  }
-
-  .input-suggest-container {
-    @apply py-2 rounded-lg absolute left-0 w-full bg-background shadow z-30 overflow-hidden ease-in-out max-h-[200px] overflow-y-auto;
-  }
-
-  .input-suggest {
-    @apply py-1 px-4 cursor-pointer w-full list-none text-foreground hover:text-primary;
-  }
-
-  .input-values-container {
-    @apply flex gap-2 flex-nowrap w-max;
-  }
-
-  .input-values-item {
-    @apply flex text-sm px-1 pl-2 justify-between bg-white text-foreground border items-center rounded-[4px];
-  }
-
-  .input-values-delete {
-    @apply text-xs cursor-pointer text-light-foreground pl-2 pr-1 py-1 hover:text-danger;
-  }
-
-  .input-scroll::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-    position: fixed;
-    top: 0;
-    left: 0;
-  }
-
-  .input-scroll:hover::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-
-  .input-scroll::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-  }
-
-  .input-scroll::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-  }
-
-  .input-scroll::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.1);
-  }
-
-  .modal {
-    @apply isolate fixed left-1/2 -translate-x-1/2 top-[1rem] md:top-[15vh] opacity-100 bg-white z-40;
-  }
-
-  .modal-header {
-    @apply flex justify-between items-center gap-8 px-4 pt-4;
-  }
-
-  .modal-footer {
-    @apply px-4 py-2.5 mt-4 bg-background rounded-b-[6px];
-  }
-
-  .floating-page {
-    @apply fixed top-[1rem] right-0 bg-background lg:top-0 h-screen z-40 border-t-4 md:border-t-0 md:border-l-4 !border-primary overflow-hidden overflow-y-auto;
-  }
-
-  .toast {
-    @apply isolate fixed right-5 bottom-5 opacity-100 bg-white z-40;
-  }
-
-  .modal-backdrop {
-    @apply isolate fixed left-0 top-0 z-40 w-screen h-screen bg-light-foreground/20 backdrop-blur-[1px];
-  }
 }
 
-@layer utilities {
-  body::-webkit-scrollbar,
-  .scroll::-webkit-scrollbar {
-    @apply w-[10px] h-[10px];
-  }
-
-  .scroll-sm::-webkit-scrollbar {
-    @apply w-[7px] h-[7px];
-  }
 
-  .scroll-lg::-webkit-scrollbar {
-    @apply w-[14px] h-[14px];
-  }
 
-  body::-webkit-scrollbar-thumb,
-  .scroll::-webkit-scrollbar-thumb,
-  .scroll-sm::-webkit-scrollbar-thumb,
-  .scroll-lg::-webkit-scrollbar-thumb {
-    @apply bg-light-primary/60 cursor-pointer rounded-[3px];
+@layer base {
+  /* ============================ */
+  /* ## Body default style        */
+  /* ============================ */
+  body {
+    @apply bg-background text-foreground max-w-full overflow-x-hidden font-normal;
   }
 
-  body::-webkit-scrollbar-thumb:hover,
-  .scroll:hover::-webkit-scrollbar-thumb:hover,
-  .scroll-sm:hover::-webkit-scrollbar-thumb:hover,
-  .scroll-lg:hover::-webkit-scrollbar-thumb:hover {
-    @apply bg-primary;
-  }
 
-  .scroll-none::-webkit-scrollbar {
-    @apply w-0 h-0;
+  /* ============================ */
+  /* ## All default style         */
+  /* ============================ */
+  * {
+    @apply transition duration-75 border-stroke;
   }
 }
+

package/styles/utilities.css

@@ -0,0 +1,37 @@
+@layer utilities {
+  /* ============================ */
+  /* ## Scroll style              */
+  /* ============================ */
+  body::-webkit-scrollbar,
+  .scroll::-webkit-scrollbar {
+    @apply w-[10px] h-[10px];
+  }
+
+  .scroll-sm::-webkit-scrollbar {
+    @apply w-[7px] h-[7px];
+  }
+
+  .scroll-lg::-webkit-scrollbar {
+    @apply w-[14px] h-[14px];
+  }
+
+  body::-webkit-scrollbar-thumb,
+  .scroll::-webkit-scrollbar-thumb,
+  .scroll-sm::-webkit-scrollbar-thumb,
+  .scroll-lg::-webkit-scrollbar-thumb {
+    @apply bg-light-primary/60 cursor-pointer rounded-[3px];
+  }
+
+  body::-webkit-scrollbar-thumb:hover,
+  .scroll::-webkit-scrollbar-thumb:hover,
+  .scroll-sm::-webkit-scrollbar-thumb:hover,
+  .scroll-lg::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary;
+  }
+
+  .scroll-none::-webkit-scrollbar {
+    @apply w-0 h-0;
+  }
+
+
+}

package/tsconfig.json

@@ -19,8 +19,10 @@
       "@/*"            :  ["./*"],
       "@utils"         :  ["./utils/index.ts"],
       "@utils/*"       :  ["./utils/*"],
-      "@components"    :  ["./components/index.ts"],
-      "@components/*"  :  ["./components/*", "./components/base.components/*", "./components/construct.components/*", "./components/structure.components/*"],
+      "@components"    :  ["./components/index.ts", "../skalfa-component/dist/index.d.ts"],
+      "@components/*"  :  ["./components/*", "../skalfa-component/dist/*"],
+      "@skalfa/skalfa-component": ["../skalfa-component/dist/index.d.ts"],
+      "@skalfa/skalfa-component/*": ["../skalfa-component/dist/*"],
       "@contexts"      :  ["./contexts/index.ts"],
       "@contexts/*"    :  ["./contexts/*"],
       "@app"           :  ["./app/index.ts"],

package/utils/commands/skalfa.ts

@@ -1,3 +1,3 @@
-import { runCli } from "@skalfa/skalfa-app-core";
+import { runCli } from "@skalfa/skalfa-app-core/dist/commands/cli";
 
 runCli();

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

@@ -1,82 +0,0 @@
-"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

@@ -1,80 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-"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

@@ -1,88 +0,0 @@
-"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>
-  );
-}