@skalfa/skalfa-app 1.0.0

package/components/base.components/table/Table.component.tsx

@@ -0,0 +1,469 @@
+"use client"
+
+import { isValidElement, ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowDownZA, faArrowUpAZ, faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { ApiFilterType, cn, pcn, useLazySearch, useResponsive } from "@utils";
+import { ControlBarComponent, ControlBarOptionType, PaginationComponent, PaginationProps, ScrollContainerComponent, FilterColumnOption, CheckboxComponent, SwipeComponent, SwipeActionType } from "@components";
+
+
+
+type CT = "controller-bar" | "head-column" | "column" | "row" | "floating-action" | "base";
+
+export interface TableColumnType {
+  selector    :  string;
+  label       :  string | ReactNode;
+  width      ?:  string;
+  sortable   ?:  boolean;
+  searchable ?:  boolean;
+  filterable ?:  boolean | {
+    type      : "text" | "number" | "currency" | "date";
+  } | {
+    type      :  "select";
+    options   :  { label: string; value: any }[];
+  };
+  className  ?:  string;
+  item       ?:  (data: any) => string | ReactNode;
+  tip        ?:  string | ((data: any) => string);
+};
+
+export interface TableProps {
+  id                        ?: string;
+  
+  controlBar                ?:  false | ControlBarOptionType[];
+
+  columns                    :  TableColumnType[];
+  data                       :  Record<string, any>[];
+  pagination                ?:  PaginationProps | false;
+
+  loading                   ?:  boolean;
+  sortBy                    ?:  string[];
+  onChangeSortBy            ?:  (sort: string[]) => void;
+  search                    ?:  string;
+  onChangeSearch            ?:  (search: string) => void;
+  searchableColumn          ?:  string[];
+  onChangeSearchableColumn  ?:  (column: string) => void;
+  filter                    ?:  ApiFilterType[];
+  onChangeFilter            ?:  (filters: ApiFilterType[]) => void;
+  checks                    ?:  (string | number)[];
+  onChangeChecks            ?:  (checks: (string | number)[]) => void;
+  actionBulking             ?:  ((checks: (string | number)[]) => ReactNode) | false
+  focus                     ?:  number | null,
+  setFocus                  ?:  (focus: number | null) => void, 
+
+  onRowClick                ?:  (data: Record<string, any>, key: number) => void;
+  onRefresh                 ?:  () => void;
+
+  block                     ?: boolean;
+  noIndex                   ?: boolean;
+  responsiveControl         ?: {
+    mobile                ?: {
+      item                ?:  (item: Record<string, any>, key: number) => ReactNode,
+      leftActionControl   ?:  Omit<SwipeActionType, "onAction"> & { onAction?: (item: Record<string, any>, key?: number) => void },
+      rightActionControl  ?:  Omit<SwipeActionType, "onAction"> & { onAction?: (item: Record<string, any>, key?: number) => void },
+    }
+  }
+
+  /** Use custom class with: "controller-bar::", "head-column::", "column::", "floating-action::", "row::". */
+  className?: string;
+};
+
+
+
+export function TableComponent({
+  id,
+  controlBar,
+  columns,
+  data,
+  pagination,
+  loading,
+  
+  sortBy,
+  onChangeSortBy,
+  search,
+  onChangeSearch,
+  searchableColumn,
+  onChangeSearchableColumn,
+  filter,
+  onChangeFilter,
+  checks,
+  onChangeChecks,
+  actionBulking,
+  focus,
+
+  onRowClick,
+  onRefresh,
+  
+  block,
+  noIndex,
+  responsiveControl,
+  
+  className = "",
+}: TableProps) {
+  const [displayColumns, setDisplayColumns]              =  useState<string[]>([]);
+  const [showFloatingAction, setShowFloatingAction]      =  useState(false);
+  const [floatingActionActive, setFloatingActionActive]  =  useState<false | number>(false);
+  const [keyword, setKeyword]                            =  useState<string>("");
+  const [keywordSearch]                                  =  useLazySearch(keyword);
+  const { isSm }                                         =  useResponsive ();
+
+  const actionColumnRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (columns) setDisplayColumns([...columns.map((column) => column.selector)]);
+  }, [columns]);
+  
+
+  useEffect(() => {
+    setKeyword(search || "");
+  }, [search]);
+
+  useEffect(() => {
+    keywordSearch ? onChangeSearch?.(keywordSearch) : onChangeSearch?.("");
+    
+    if(pagination != false) {
+      pagination?.onChange?.(pagination.totalRow, pagination.paginate, 1);
+    }
+  }, [keywordSearch]);
+
+  const columnMapping = useMemo(() => {
+    return ( columns?.filter((column) => displayColumns.includes(column.selector)) || []);
+  }, [columns, displayColumns]);
+
+
+
+  const styles = {
+    head            :  "px-4 py-2.5 font-bold w-full flex justify-between gap-2 items-center text-sm text-foreground capitalize",
+    column          :  cn("px-4 py-4 font-medium", pcn<CT>(className, "column")),
+    row             :  "flex items-center gap-4 rounded-[4px] relative opacity-0 animate-intro-fade border-b hover:bg-light-primary/30",
+    floatingAction  :  cn("sticky bg-background -right-5 z-30 cursor-pointer flex items-center shadow rounded-l-lg", pcn<CT>(className, "floating-action")),
+  };
+
+
+  const numberOfRow = (key: number) => pagination && (pagination?.page || 1) != 1 ? pagination?.paginate * ((pagination?.page || 1) - 1) + key + 1 : key + 1;
+
+
+  function renderHead() {
+    return (
+      <>
+        {columnMapping?.map((column, key) => {
+          const sortColumn  = sortBy?.find((e) => e.split(" ")?.at(0) == column.selector)?.split(" ")?.at(0) || "";
+          const sortDirection  = sortBy?.find((e) => e.split(" ")?.at(0) == column.selector)?.split(" ")?.at(1) || "";
+
+          return (
+            <div
+              key={key}
+              className={cn(
+                styles?.head,
+                column.sortable && "cursor-pointer",
+                pcn<CT>(className, "head-column")
+              )}
+              style={{ width: column.width ? column.width : 200 }}
+              onClick={() => column.sortable && onChangeSortBy?.([`${column.selector} ${sortDirection == "desc" ? "asc" : "desc"}`])}
+            >
+              {column.label}
+
+              {!!sortColumn && (
+                <FontAwesomeIcon
+                  icon={sortDirection == "desc" ? faArrowDownZA : faArrowUpAZ}
+                  className="text-light-foreground/70"
+                />
+              )}
+            </div>
+          );
+        })}
+      </>
+    );
+  }
+
+
+  function renderItem(item: Record<string, any>, itemKey: number) {
+    const itemMapping = columnMapping.map((column) => {
+      if (column?.item) {
+        return column.item(item);
+      }
+
+      const value = item[column.selector];
+
+      if (isValidElement(value)) {
+        return value;
+      }
+
+      if (value === null || value === undefined) {
+        return "-";
+      }
+
+      if (typeof value === "object") {
+        return JSON.stringify(value);
+      }
+
+      return value;
+    });
+
+    if(!isSm || !responsiveControl?.mobile) {
+      return (
+        <>
+          {itemMapping?.map((one, key) => {
+            const column = columnMapping?.[key];
+          
+            let title = one as string;
+            if (column?.tip) {
+              if (typeof column.tip === "string") {
+                title = (item[column.tip as keyof object] as any)?.toString() || "-";
+              } else if (typeof column.tip === "function") {
+                title = column.tip(item);
+              }
+            }
+            return (
+              <div
+                key={key}
+                className={cn(styles.column , onRowClick && "cursor-pointer")}
+                style={{ width: columnMapping?.at(key)?.width || 200 }}
+                onClick={() => onRowClick?.(item, itemKey) }
+                title={title}
+              >
+                {one}
+              </div>
+            );
+          })}
+        </>
+      );
+    } else {
+
+      const { onAction: onLeftAction, ...restLeftAction } = responsiveControl?.mobile?.leftActionControl || {};
+      const { onAction: onRightAction, ...restRightAction } = responsiveControl?.mobile?.rightActionControl || {};
+      
+      return (
+        <SwipeComponent 
+          className="border-b py-2 px-2 bg-white"
+          leftActionControl={!!responsiveControl?.mobile?.leftActionControl ? {
+            ...restLeftAction,
+            ...(onLeftAction ? { onAction: () => onLeftAction?.(item, itemKey)} : {})
+          } : undefined}
+          rightActionControl={!!responsiveControl?.mobile?.rightActionControl ? {
+            ...restRightAction,
+            ...(onRightAction ? { onAction: () => onRightAction?.(item, itemKey)} : {})
+          } : undefined}
+        >
+          {responsiveControl?.mobile?.item ? responsiveControl?.mobile?.item(item, itemKey) : (
+            <div onClick={() => onRowClick?.(item, itemKey) }>
+              <p className="font-semibold">{Object.values(itemMapping)[0]}</p>
+              <p className="text-sm">{Object.values(itemMapping)[1]}</p>
+            </div>
+          )}
+        </SwipeComponent>
+      )
+    }
+  }
+
+
+
+  
+
+
+  
+
+
+
+
+  return (
+    <div className={cn("relative", pcn<CT>(className, "base"))}>
+      {controlBar != false && (
+        <ControlBarComponent 
+          id={id}
+          options={!controlBar ? ["SEARCH", "SELECTABLE", "REFRESH"] : controlBar}
+          searchableOptions={columns?.filter((c: TableColumnType) => c.searchable)}
+          onSearchable={(e) => onChangeSearchableColumn?.(String(e))}
+          searchable={searchableColumn || []}
+          onSearch={(e) => setKeyword(e)}
+          search={keyword}
+          selectableOptions={columns}
+          onSelectable={(e) => setDisplayColumns(e)}
+          selectable={displayColumns}
+          sortableOptions={columns?.filter((c: TableColumnType) => c.sortable)}
+          sort={sortBy}
+          onSort={(sort) => onChangeSortBy?.(sort)}
+          onRefresh={() => onRefresh?.()}
+          filterableColumns={columns?.filter((c) => !!c?.filterable)?.map((c) => ({
+            label: c.label, 
+            selector: c.selector, 
+            type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
+            options: typeof c?.filterable == "object" &&  c?.filterable?.type == "select" ? c?.filterable?.options : undefined
+          })) as FilterColumnOption[]}
+          onFilter={(filters) => onChangeFilter?.(filters)}
+          filter={filter}
+          className={pcn<CT>(className, "controller-bar") || ""}
+        />
+      )}
+
+      <div className="relative">
+        <ScrollContainerComponent
+          scrollFloating={!isSm && block}
+          className="w-full"
+          onScroll={(e) => {
+            actionColumnRef.current?.clientWidth &&  e.scrollLeft &&
+              setShowFloatingAction(e.scrollLeft + e.clientWidth <=  e.scrollWidth - actionColumnRef.current?.clientWidth);
+          }}
+          footer={
+            <>
+              {block && pagination && (
+                <>
+                  <div className="py-6"></div>
+                  <div className="my-2 absolute bottom-0 w-full">
+                    <PaginationComponent {...pagination} />
+                  </div>
+                </>
+              )}
+            </>
+          }
+        >
+          {loading ? (
+            <>
+              {
+                // =========================>
+                // ## When Loading
+                // =========================>
+              }
+              <div className="w-max min-w-full">
+                <div className="flex flex-col items-center justify-center gap-8 p-20">
+                  <h1 className="text-lg text-light-foreground animate-pulse">
+                    Memuat data...
+                  </h1>
+                </div>
+              </div>
+            </>
+          ) : !data || !data.length ? (
+            <>
+              {
+                // =========================>
+                // ## When Empty
+                // =========================>
+              }
+              <div className="flex flex-col items-center justify-center gap-8 p-20 opacity-50">
+                <h1 className="text-lg text-light-foreground">
+                  Belum Ada Data
+                </h1>
+              </div>
+            </>
+          ) : (
+            <>
+              {!isSm || !responsiveControl?.mobile ? (
+                <>
+                  <div className="w-max min-w-full">
+                    {
+                      // =========================>
+                      // ## Head Column
+                      // =========================>
+                    }
+                    <div className={cn("flex gap-4", pcn<CT>(className, "row"))}>
+                      {!!actionBulking && (
+                        <div className={cn(styles.head, "w-max")}>
+                          <CheckboxComponent
+                            name="selected_table"
+                            className="w-5 h-5"
+                            checked={data.length > 0 && checks?.length === data.length}
+                            onChange={() => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id))}
+                          />
+                        </div>
+                      )}
+                      {!noIndex && <div className={cn(styles.head, "w-8", pcn<CT>(className, "head-column"))}>#</div>}
+                      {renderHead()}
+                    </div>
+
+                    {
+                      // =========================>
+                      // ## Body Column
+                      // =========================>
+                    }
+                    <div className={`flex flex-col gap-y-0.5`}>
+                      {data.map((item: Record<string, any>, key) => {
+                        return (
+                          <div
+                            style={{ animationDelay: `${(key + 1) * 0.05}s` }}
+                            className={cn(
+                              styles.row,
+                              key % 2 ? "bg-light-primary/10" : "bg-white",
+                              focus == key && "bg-light-primary/30",
+                              pcn<CT>(className, "row")
+                            )}
+                            key={key}
+                          >
+                            {!!actionBulking && (
+                              <div className={cn("w-max", styles.column)}>
+                                <CheckboxComponent
+                                  name="selected_table"
+                                  className="w-5 h-5"
+                                  checked={checks?.includes(item?.id)}
+                                  onChange={() => checks?.includes(item?.id) ? onChangeChecks?.(checks.filter((i) => i !== item?.id)) : onChangeChecks?.([...(checks || []), item?.id])}
+                                />
+                              </div>
+                            )}
+                            {!noIndex && <div className={cn("w-8", styles?.column)}>{numberOfRow(key)}</div>}
+                            {renderItem(item, key)}
+                            <div ref={actionColumnRef} className={cn(`flex-1 flex justify-end gap-2 px-4 py-2`)}>
+                              {item["action" as keyof object]}
+                            </div>
+
+                            {item["action" as keyof object] &&
+                              showFloatingAction && (
+                                <div
+                                  className={styles.floatingAction}
+                                  onClick={() =>
+                                    floatingActionActive !== false &&
+                                    floatingActionActive == key ? setFloatingActionActive(false) : setFloatingActionActive(key)
+                                  }
+                                >
+                                  <div className="pl-4 pr-7 py-2">
+                                    <FontAwesomeIcon icon={floatingActionActive === false || floatingActionActive != key ? faChevronLeft : faChevronRight}/>
+                                  </div>
+
+                                  <div className={`py-1 flex gap-2 ${floatingActionActive !== false && floatingActionActive == key ? "w-max pl-2 pr-8" : "w-0"}`}>
+                                    {item["action" as keyof object]}
+                                  </div>
+                                </div>
+                              )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className={`w-full flex flex-col gap-y-0.5`}>
+                    {data.map((item: Record<string, any>, key) => {
+                      return (
+                        <div
+                          style={{ animationDelay: `${(key + 1) * 0.05}s` }}
+                          key={key}
+                        >
+                          {renderItem(item, key)}
+                        </div>
+                      )
+                    })}
+                  </div>
+                </>
+              )}
+              
+            </>
+          )}
+        </ScrollContainerComponent>
+      </div>
+
+      {!!actionBulking && !!checks?.length && (
+        <div className="rounded-[6px] bg-white mt-4 w-full px-4 py-2 border flex justify-between items-center">
+          <div className="text-sm font-semibold">{checks?.length} Data Terpilih</div>
+          <div className="flex justify-end items-center gap-2">
+            {actionBulking?.(checks)}
+          </div>
+        </div>
+      )}
+
+      {!block && pagination && (
+        <div className="mt-4">
+          <PaginationComponent {...pagination} />
+        </div>
+      )}
+    </div>
+  );
+}

package/components/base.components/typography/TypographyArticle.component.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react'
+
+export interface TypographyArticleProps {
+  title     :  string | ReactNode;
+  content   :  string | ReactNode;
+  header   ?:  string | ReactNode;
+  footer   ?:  string | ReactNode;
+}
+
+export function TypographyArticleComponent({
+  title,
+  content,
+  header,
+  footer,
+} : TypographyArticleProps) {
+  return (
+    <>
+      <h4 className="text-light-foreground">{header}</h4>
+      <h1 className="text-2xl font-bold mt-2">{title}</h1>
+      <div className="text-justify mt-2">{content}</div>
+      <div className="text-sm text-light-foreground mt-4">
+        {footer}
+      </div>
+    </>
+  )
+}

package/components/base.components/typography/TypographyColumn.component.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface TypographyColumnProps {
+  title     :  string | ReactNode;
+  content   :  string | ReactNode;
+}
+
+export function TypographyColumnComponent({
+  title,
+  content,
+} : TypographyColumnProps) {
+  return (
+    <>
+      <div>
+        <div className="text-xs font-semibold text-light-foreground">{title}</div>
+        <div>{content}</div>
+      </div>
+    </>
+  )
+}

package/components/base.components/typography/TypographyContent.component.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface TypographyContentProps {
+  title     :  string | ReactNode;
+  content   :  string | ReactNode;
+}
+
+export function TypographyContentComponent({
+  title,
+  content,
+} : TypographyContentProps) {
+  return (
+    <>
+      <div>
+        <p className="font-semibold">{title}</p>
+        <p className="text-sm text-light-foreground">{content}</p>
+      </div>
+    </>
+  )
+}

package/components/base.components/typography/TypographyTips.component.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface TypographyTipsProps {
+  title     :  string | ReactNode;
+  content   :  string | ReactNode;
+}
+
+export function TypographyTipsComponent({
+  title,
+  content,
+} : TypographyTipsProps) {
+  return (
+    <>
+      <div className="pl-3 py-1 border-l-2 border-light-primary">
+        <p className="font-semibold">{title}</p>
+        <p className="text-sm text-light-foreground">{content}</p>
+      </div>
+    </>
+  )
+}