@kanda-libs/ks-design-library-new 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -11,8 +11,38 @@ export interface TableProps<T extends StringIndexedObject<unknown>> {
11
11
  pageSize?: number;
12
12
  compact?: boolean;
13
13
  isLoading?: boolean;
14
+ canSelectRow?: boolean;
14
15
  query?: string;
15
16
  }
16
- export declare function Table<T extends StringIndexedObject<unknown>>({ compact, isLoading, ...props }: PropsWithChildren<TableProps<T>>): JSX.Element;
17
+ export declare function Table<T extends StringIndexedObject<unknown>>({ compact, isLoading, canSelectRow, ...props }: PropsWithChildren<TableProps<T>>): JSX.Element;
18
+ export type Widths = 80 | 96 | 120 | 160;
19
+ export interface SplashScreenProps {
20
+ logo?: boolean;
21
+ icon: string;
22
+ iconClassName?: string;
23
+ iconSize?: number;
24
+ title: string;
25
+ subText: string | JSX.Element;
26
+ boldSubText?: string;
27
+ cta?: JSX.Element;
28
+ append?: JSX.Element;
29
+ width?: Widths;
30
+ contentWidth?: Widths;
31
+ content?: JSX.Element;
32
+ }
33
+ export declare const SplashScreen: {
34
+ ({ logo, icon, iconClassName, iconSize, title, subText, boldSubText, cta, append, width, contentWidth, content, }: SplashScreenProps): JSX.Element;
35
+ defaultProps: {
36
+ logo: boolean;
37
+ iconClassName: string;
38
+ iconSize: number;
39
+ cta: null;
40
+ append: null;
41
+ boldSubText: null;
42
+ content: null;
43
+ width: number;
44
+ contentWidth: number;
45
+ };
46
+ };
17
47
 
18
48
  export {};
@@ -1,2 +1,2 @@
1
- import{Pagination as Ce}from"@kanda-libs/ks-design-library";import{SkeletonLoader as Z}from"@kanda-libs/ks-design-library";import{useIsDesktop as X}from"@kanda-libs/ks-design-library";function u(e){if(!e)return{};let o=X();return{...e,width:o?e==null?void 0:e.width:"100%"}}import{Icon as Y}from"@kanda-libs/ks-design-library";var R="flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20",N={icon:"chevron-down",stroke:"neutral-500",size:12,className:"ml-2 my-auto"},H={width:"calc(100% + 16px)"},f={container:{base:"w-full h-full overflow-hidden",padding:"pl-4 -ml-4"},flex:{base:"w-full h-full md:flex px-4 md:px-0",padding:"md:pl-4"}};import{jsx as q,jsxs as K}from"react/jsx-runtime";var $=function({label:e,...o}){return K("button",{className:R,...o,children:[e,q(Y,{...N})]})},v=$;import L from"clsx";function T(e){let o=e===0?H:{};return{classNames:{container:L(f.container.base,e===0?f.container.padding:""),flex:L(f.flex.base,e===0?"":f.flex.padding)},containerStyle:o}}import{jsx as k}from"react/jsx-runtime";var Q=function({index:e,children:o}){let{classNames:t,containerStyle:r}=T(e);return k("div",{className:t.container,style:r,children:k("div",{className:t.flex,children:o})})},I=Q;var P={Button:v,Wrapper:I};import O from"clsx";var m={main:"flex md:h-14",loading:{base:"my-auto w-full mr-8",margin:"ml-4"},wrapper:{padding:"md:px-2 md:pt-2",popover:"pb-1"}};function S(e,o){return{classNames:{...m,loading:O(m.loading.base,e===0?"":m.loading.margin),wrapper:O(m.wrapper.padding,o?"":m.wrapper.popover)}}}import{jsx as g}from"react/jsx-runtime";var ee=function({index:e,isLoading:o=!1,popoverButtons:t=!1,label:r,...n}){let{classNames:a}=S(e,t),{style:s,...p}=n,i=u(s);return g("div",{...p,style:i,className:a.main,children:g(Z,{isLoading:o,wrapperClassName:a.loading,afterLoading:g(P.Wrapper,{index:e,children:g(P.Button,{label:r})})})})},M=ee;var E={base:"flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200"};function C(e,o){let{headers:t,getHeaderGroupProps:r}=e,n=r({}),a=o.filter(s=>s.isVisible).length;return{headers:t,headerGroupProps:n,totalVisible:a}}import{jsx as A}from"react/jsx-runtime";function oe({headerGroup:e,columns:o,isLoading:t}){let{headerGroupProps:r,headers:n}=C(e,o);return A("div",{...r,className:E.base,children:n.map((a,s)=>A(M,{index:s,label:a.render("Header"),isLoading:t,...a.getHeaderProps(a.getSortByToggleProps())}))})}var _=oe;import{SkeletonLoader as re,Text as ne}from"@kanda-libs/ks-design-library";import te from"clsx";var d={container:"flex w-full h-full",render:"w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis",renderLoading:"w-full my-auto mr-8 text-style-g",mobileLabel:"block md:hidden text-16-24-em text-neutral-600 mr-2",cell:{base:"px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex",compact:"h-8 flex",padding:"md:pl-4"}};function y(e,o,t){return{cell:te(o?d.cell.compact:d.cell.base,e===0?"":d.cell.padding),container:d.container,render:t?d.renderLoading:d.render,mobileLabel:d.mobileLabel}}import{Fragment as se,jsx as b,jsxs as le}from"react/jsx-runtime";var ae=function({render:e,index:o,compact:t=!1,isLoading:r=!1,label:n,...a}){let s=y(o,t,r),{style:p,...i}=a,l=u(p);return b("div",{...i,style:l,className:s.cell,children:b("div",{className:s.container,children:b("div",{className:s.render,children:b(re,{isLoading:r,afterLoading:le(se,{children:[b(ne,{text:`${n}:`,className:s.mobileLabel}),e()]})})})})})},W=ae;import{useClasses as pe}from"@kanda-libs/ks-design-library";var F={base:"relative md:h-16 flex-col py-2 md:py-0 md:flex-row",compact:"relative h-8",border:"border-b border-neutral-200",hover:"group hover:bg-neutral-50 cursor-pointer",button:"hidden group-hover:block"};function w(e){return pe(F,{base:[".base",e===9?"":".border",".hover"],button:[".button"]})}import{jsx as G}from"react/jsx-runtime";function ie({cells:e,index:o,compact:t=!1,isLoading:r=!1,...n}){let a=w(o);return G("div",{...n,className:t?a.compact:a.base,children:e.map((s,p)=>G(W,{...s.getCellProps(),index:p,isLoading:r,render:()=>s.render("Cell"),label:s.column.Header}))})}var j=ie;import{Fragment as me,jsx as B}from"react/jsx-runtime";function de({page:e,prepareRow:o,isLoading:t=!1,compact:r=!1}){return B(me,{children:e.map((n,a)=>(o(n),B(j,{...n.getRowProps(),index:a,cells:n.cells,isLoading:t,compact:r})))})}var z=de;import{useTable as be,useGlobalFilter as xe,usePagination as ge,useSortBy as Te,useFlexLayout as Pe}from"react-table";import ce from"fuse.js";var ue=(e,o)=>e.filter(t=>Object.values(t.values).join(", ").toLowerCase().includes(o.toLowerCase())),V=(e,o)=>e.filter(({id:t})=>o.filter(r=>r.id===t).length===0),fe=(e,o,t,r,n)=>{let a=e.map(l=>l.values),i=new ce(a,{keys:t.map(l=>({name:l,getFn:c=>c[l]}))}).search(o).map(({item:l})=>l).slice(0,r).map(l=>e.find(c=>c.values.cid===l.cid)).filter(Boolean);return V(i,n)},D=(e,o,t,r=10)=>{if(t.length<1)return e;let n=ue(e,t).slice(0,r),a=V(e,n),s=fe(a,t,o,r-n.length,n),p=[...n,...s];return e.map(({id:i})=>p.find(l=>l.id===i)).filter(Boolean)};import{useEffect as Se}from"react";function h({columns:e,data:o,pageSize:t=10,query:r=""}){let n=be({columns:e,data:o,initialState:{pageSize:10,pageIndex:0},autoResetGlobalFilter:!1,globalFilter:(l,c,J)=>D(l,c,J,t)},xe,Te,ge,Pe),{gotoPage:a,pageCount:s,state:{pageIndex:p}}=n,i={pageCount:s,pageIndex:p,setPage:l=>{a(l)}};return Se(()=>{n.setGlobalFilter(r)},[r]),{paginationProps:i,...n}}import{Fragment as he,jsx as x,jsxs as U}from"react/jsx-runtime";function ye({compact:e=!1,isLoading:o=!1,...t}){let{page:r,prepareRow:n,columns:a,getTableProps:s,headerGroups:p,paginationProps:i}=h(t);return U(he,{children:[U("div",{...s(),className:"w-full",children:[x("div",{children:p.map(l=>x(_,{headerGroup:l,columns:a,isLoading:o}))}),x(z,{page:r,prepareRow:n,isLoading:o,compact:e})]}),i.pageCount>1&&x("div",{className:"px-4 py-4",children:x(Ce,{...i})})]})}var we=ye;export{we as Table};
1
+ import{Pagination as Ne}from"@kanda-libs/ks-design-library";import{SkeletonLoader as re}from"@kanda-libs/ks-design-library";import{useIsDesktop as K}from"@kanda-libs/ks-design-library";function f(e){if(!e)return{};let o=K();return{...e,width:o?e==null?void 0:e.width:"100%"}}import{Icon as Q}from"@kanda-libs/ks-design-library";var H="flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20",L={icon:"chevron-down",stroke:"neutral-500",size:12,className:"ml-2 my-auto"},I={width:"calc(100% + 16px)"},b={container:{base:"w-full h-full overflow-hidden",padding:"pl-4 -ml-4"},flex:{base:"w-full h-full md:flex px-4 md:px-0",padding:"md:pl-4"}};import{jsx as ee,jsxs as oe}from"react/jsx-runtime";var Z=function({label:e,...o}){return oe("button",{className:H,...o,children:[e,ee(Q,{...L})]})},k=Z;import O from"clsx";function C(e){let o=e===0?I:{};return{classNames:{container:O(b.container.base,e===0?b.container.padding:""),flex:O(b.flex.base,e===0?"":b.flex.padding)},containerStyle:o}}import{jsx as E}from"react/jsx-runtime";var te=function({index:e,children:o}){let{classNames:t,containerStyle:r}=C(e);return E("div",{className:t.container,style:r,children:E("div",{className:t.flex,children:o})})},W=te;var h={Button:k,Wrapper:W};import M from"clsx";var c={main:"flex md:h-14",loading:{base:"my-auto w-full mr-8",margin:"ml-4"},wrapper:{padding:"md:px-2 md:pt-2",popover:"pb-1"}};function w(e,o){return{classNames:{...c,loading:M(c.loading.base,e===0?"":c.loading.margin),wrapper:M(c.wrapper.padding,o?"":c.wrapper.popover)}}}import{jsx as T}from"react/jsx-runtime";var ne=function({index:e,isLoading:o=!1,popoverButtons:t=!1,label:r,...n}){let{classNames:a}=w(e,t),{style:s,...p}=n,i=f(s);return T("div",{...p,style:i,className:a.main,children:T(re,{isLoading:o,wrapperClassName:a.loading,afterLoading:T(h.Wrapper,{index:e,children:T(h.Button,{label:r})})})})},A=ne;var _={base:"flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200"};function y(e,o){let{headers:t,getHeaderGroupProps:r}=e,n=r({}),a=o.filter(s=>s.isVisible).length;return{headers:t,headerGroupProps:n,totalVisible:a}}import{jsx as F}from"react/jsx-runtime";function ae({headerGroup:e,columns:o,isLoading:t}){let{headerGroupProps:r,headers:n}=y(e,o);return F("div",{...r,className:_.base,children:n.map((a,s)=>F(A,{index:s,label:a.render("Header"),isLoading:t,...a.getHeaderProps(a.getSortByToggleProps())}))})}var G=ae;import{SkeletonLoader as le,Text as pe}from"@kanda-libs/ks-design-library";import se from"clsx";var m={container:"flex w-full h-full",render:"w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis",renderLoading:"w-full my-auto mr-8 text-style-g",mobileLabel:"block md:hidden text-16-24-em text-neutral-600 mr-2",cell:{base:"px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex",compact:"h-8 flex",padding:"md:pl-4"}};function N(e,o,t){return{cell:se(o?m.cell.compact:m.cell.base,e===0?"":m.cell.padding),container:m.container,render:t?m.renderLoading:m.render,mobileLabel:m.mobileLabel}}import{Fragment as de,jsx as x,jsxs as me}from"react/jsx-runtime";var ie=function({render:e,index:o,compact:t=!1,isLoading:r=!1,label:n,...a}){let s=N(o,t,r),{style:p,...i}=a,l=f(p);return x("div",{...i,style:l,className:s.cell,children:x("div",{className:s.container,children:x("div",{className:s.render,children:x(le,{isLoading:r,afterLoading:me(de,{children:[x(pe,{text:`${n}:`,className:s.mobileLabel}),e()]})})})})})},j=ie;import{useClasses as ce}from"@kanda-libs/ks-design-library";var B={base:"relative md:h-16 flex-col py-2 md:py-0 md:flex-row",compact:"relative h-8",border:"border-b border-neutral-200",hover:"group hover:bg-neutral-50 cursor-pointer",button:"hidden group-hover:block"};function R(e,o){return ce(B,{base:[".base",e===9?"":".border",o?".hover":""],button:[".button"]})}import{jsx as z}from"react/jsx-runtime";function ue({cells:e,index:o,compact:t=!1,isLoading:r=!1,canSelect:n=!1,...a}){let s=R(o,n);return z("div",{...a,className:t?s.compact:s.base,children:e.map((p,i)=>z(j,{...p.getCellProps(),index:i,isLoading:r,render:()=>p.render("Cell"),label:p.column.Header}))})}var J=ue;import{Fragment as be,jsx as X}from"react/jsx-runtime";function fe({page:e,prepareRow:o,isLoading:t=!1,compact:r=!1,canSelectRow:n=!1}){return X(be,{children:e.map((a,s)=>(o(a),X(J,{...a.getRowProps(),index:s,cells:a.cells,isLoading:t,compact:r,canSelect:n})))})}var V=fe;import{useTable as Te,useGlobalFilter as Pe,usePagination as Ce,useSortBy as he,useFlexLayout as we}from"react-table";import xe from"fuse.js";var ge=(e,o)=>e.filter(t=>Object.values(t.values).join(", ").toLowerCase().includes(o.toLowerCase())),D=(e,o)=>e.filter(({id:t})=>o.filter(r=>r.id===t).length===0),Se=(e,o,t,r,n)=>{let a=e.map(l=>l.values),i=new xe(a,{keys:t.map(l=>({name:l,getFn:d=>d[l]}))}).search(o).map(({item:l})=>l).slice(0,r).map(l=>e.find(d=>d.values.cid===l.cid)).filter(Boolean);return D(i,n)},$=(e,o,t,r=10)=>{if(t.length<1)return e;let n=ge(e,t).slice(0,r),a=D(e,n),s=Se(a,t,o,r-n.length,n),p=[...n,...s];return e.map(({id:i})=>p.find(l=>l.id===i)).filter(Boolean)};import{useEffect as ye}from"react";function v({columns:e,data:o,pageSize:t=10,query:r=""}){let n=Te({columns:e,data:o,initialState:{pageSize:10,pageIndex:0},autoResetGlobalFilter:!1,globalFilter:(l,d,S)=>$(l,d,S,t)},Pe,he,Ce,we),{gotoPage:a,pageCount:s,state:{pageIndex:p}}=n,i={pageCount:s,pageIndex:p,setPage:l=>{a(l)}};return ye(()=>{n.setGlobalFilter(r)},[r]),{paginationProps:i,...n}}import{Fragment as He,jsx as g,jsxs as U}from"react/jsx-runtime";function Re({compact:e=!1,isLoading:o=!1,canSelectRow:t=!1,...r}){let{page:n,prepareRow:a,columns:s,getTableProps:p,headerGroups:i,paginationProps:l}=v(r);return U(He,{children:[U("div",{...p(),className:"w-full",children:[g("div",{children:i.map(d=>g(G,{headerGroup:d,columns:s,isLoading:o}))}),g(V,{page:n,prepareRow:a,isLoading:o,compact:e,canSelectRow:t})]}),l.pageCount>1&&g("div",{className:"px-4 py-4",children:g(Ne,{...l})})]})}var ve=Re;import{Icon as Le,Logo as Ie}from"@kanda-libs/ks-design-library";import{jsx as u,jsxs as P}from"react/jsx-runtime";var Y={80:"max-w-80",96:"max-w-96",120:"max-w-120",160:"max-w160"},q=({logo:e,icon:o,iconClassName:t,iconSize:r,title:n,subText:a,boldSubText:s,cta:p,append:i,width:l=80,contentWidth:d=80,content:S})=>P("div",{className:`flex flex-col m-auto w-full ${Y[l]} text-center items-center justify-center`,children:[e&&u("div",{className:"mb-10",children:u(Ie,{height:32})}),!e&&u(Le,{icon:o,size:r,className:`mx-auto mb-8 ${t}`}),u("h1",{className:"text-24-28-em mb-4",children:n}),P("div",{className:`flex flex-col w-full ${Y[d]} mx-auto`,children:[S&&u("div",{className:"mt-4 mb-8",children:S}),P("span",{className:"text-16-24 text-neutral-600",children:[a,s&&P("b",{children:[" ",s]})]}),p&&u("div",{className:"mt-10",children:p}),i]})]});q.defaultProps={logo:!1,iconClassName:"",iconSize:104,cta:null,append:null,boldSubText:null,content:null,width:96,contentWidth:96};var ke=q;export{ke as SplashScreen,ve as Table};
2
2
  //# sourceMappingURL=index.esm.mjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/components/Table/index.tsx", "../src/components/Table/components/HeaderColumn/index.tsx", "../src/hooks/useMobileFullWidthCellStyle.ts", "../src/components/Table/components/HeaderButton/Button.tsx", "../src/components/Table/components/HeaderButton/constants.ts", "../src/components/Table/components/HeaderButton/useWrapperProps.ts", "../src/components/Table/components/HeaderButton/Wrapper.tsx", "../src/components/Table/components/HeaderButton/index.tsx", "../src/components/Table/components/HeaderColumn/useHeaderColumnProps.ts", "../src/components/Table/components/HeaderColumn/constants.ts", "../src/components/Table/components/HeaderGroup/constants.ts", "../src/components/Table/components/HeaderGroup/useHeaderGroupProps.ts", "../src/components/Table/components/HeaderGroup/index.tsx", "../src/components/Table/components/Cell/index.tsx", "../src/components/Table/components/Cell/useCellClassNames.ts", "../src/components/Table/components/Cell/constants.ts", "../src/components/Table/components/Row/useRowClassNames.ts", "../src/components/Table/components/Row/constants.ts", "../src/components/Table/components/Row/index.tsx", "../src/components/Table/components/Pages/index.tsx", "../src/components/Table/useTableProps.ts", "../src/components/Table/helpers/search.ts"],
4
- "sourcesContent": ["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport {\n Pagination,\n type StringIndexedObject,\n} from '@kanda-libs/ks-design-library';\nimport type { Column } from 'react-table';\nimport HeaderGroup from './components/HeaderGroup';\nimport Pages from './components/Pages';\nimport useTableProps from './useTableProps';\n\nexport interface TableProps<T extends StringIndexedObject<unknown>> {\n columns: Readonly<Column<T>[]>;\n data: T[];\n filter?: string;\n pageSize?: number;\n compact?: boolean;\n isLoading?: boolean;\n query?: string;\n}\n\nexport type TableFunctionComponent<\n T extends StringIndexedObject<unknown> = any,\n> = FunctionComponent<TableProps<T>>;\n\nfunction Table<T extends StringIndexedObject<unknown>>({\n compact = false,\n isLoading = false,\n ...props\n}: PropsWithChildren<TableProps<T>>) {\n const {\n page,\n prepareRow,\n columns,\n getTableProps,\n headerGroups,\n paginationProps,\n } = useTableProps(props);\n\n return (\n <>\n <div {...getTableProps()} className=\"w-full\">\n <div>\n {headerGroups.map((headerGroup) => (\n <HeaderGroup\n headerGroup={headerGroup}\n columns={columns}\n isLoading={isLoading}\n />\n ))}\n </div>\n <Pages\n page={page}\n prepareRow={prepareRow}\n isLoading={isLoading}\n compact={compact}\n />\n </div>\n {paginationProps.pageCount > 1 && (\n <div className=\"px-4 py-4\">\n <Pagination {...paginationProps} />\n </div>\n )}\n </>\n );\n}\n\nexport default Table;\n", "import { SkeletonLoader } from '@kanda-libs/ks-design-library';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport type { TableHeaderProps } from 'react-table';\nimport useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';\nimport HeaderButton from '../HeaderButton';\nimport useHeaderColumnProps from './useHeaderColumnProps';\n\nexport interface HeaderColumnProps extends TableHeaderProps {\n index: number;\n isLoading?: boolean;\n popoverButtons?: boolean;\n label: ReactNode;\n}\n\nconst HeaderColumn: FunctionComponent<HeaderColumnProps> = function ({\n index,\n isLoading = false,\n popoverButtons = false,\n label,\n ...props\n}) {\n const { classNames } = useHeaderColumnProps(index, popoverButtons);\n\n const { style: unformattedStyle, ...formattedProps } = props;\n const style = useMobileFullWidthCellStyle(unformattedStyle);\n\n return (\n <div {...formattedProps} style={style} className={classNames.main}>\n <SkeletonLoader\n isLoading={isLoading}\n wrapperClassName={classNames.loading}\n afterLoading={\n <HeaderButton.Wrapper index={index}>\n <HeaderButton.Button label={label} />\n </HeaderButton.Wrapper>\n }\n />\n </div>\n );\n};\n\nexport default HeaderColumn;\n", "import { useIsDesktop } from '@kanda-libs/ks-design-library';\nimport type { CSSProperties } from 'react';\n\nexport type MobileFullWidthCellStyleHook = CSSProperties;\n\nexport default function useMobileFullWidthCellStyle(\n style?: CSSProperties,\n): MobileFullWidthCellStyleHook {\n if (!style) return {};\n\n const isDesktop = useIsDesktop();\n\n // For mobile, we want to make sure that the cell is always 100% width\n const formattedStyle = {\n ...style,\n width: isDesktop ? style?.width : '100%',\n };\n\n return formattedStyle;\n}\n", "import type { FunctionComponent, HTMLAttributes, ReactNode } from 'react';\nimport { Icon } from '@kanda-libs/ks-design-library';\nimport { BUTTON_CLASS_NAMES, ICON_PROPS } from './constants';\n\nexport interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {\n label: ReactNode;\n}\n\nconst Button: FunctionComponent<ButtonProps> = function ({ label, ...props }) {\n return (\n <button className={BUTTON_CLASS_NAMES} {...props}>\n {label}\n <Icon {...ICON_PROPS} />\n </button>\n );\n};\n\nexport default Button;\n", "export const BUTTON_CLASS_NAMES =\n 'flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20';\n\nexport const ICON_PROPS = {\n icon: 'chevron-down',\n stroke: 'neutral-500',\n size: 12,\n className: 'ml-2 my-auto',\n};\n\nexport const WRAPPER_STYLE = {\n width: 'calc(100% + 16px)',\n};\n\nexport const WRAPPER_CLASS_NAMES = {\n container: {\n base: 'w-full h-full overflow-hidden',\n padding: 'pl-4 -ml-4',\n },\n flex: {\n base: 'w-full h-full md:flex px-4 md:px-0',\n padding: 'md:pl-4',\n },\n};\n", "import type { CSSProperties } from 'react';\nimport clsx from 'clsx';\nimport { WRAPPER_STYLE, WRAPPER_CLASS_NAMES } from './constants';\n\nexport interface WrapperPropsHook {\n classNames: {\n container: string;\n flex: string;\n };\n containerStyle: CSSProperties;\n}\n\nexport default function useWrapperProps(index: number): WrapperPropsHook {\n const containerStyle = index === 0 ? WRAPPER_STYLE : {};\n\n const classNames = {\n container: clsx(\n WRAPPER_CLASS_NAMES.container.base,\n index === 0 ? WRAPPER_CLASS_NAMES.container.padding : '',\n ),\n flex: clsx(\n WRAPPER_CLASS_NAMES.flex.base,\n index === 0 ? '' : WRAPPER_CLASS_NAMES.flex.padding,\n ),\n };\n\n return {\n classNames,\n containerStyle,\n };\n}\n", "import type { FunctionComponent } from 'react';\nimport useWrapperProps from './useWrapperProps';\n\nexport interface WrapperProps {\n index: number;\n children?: JSX.Element | JSX.Element[];\n}\n\nconst Wrapper: FunctionComponent<WrapperProps> = function ({\n index,\n children,\n}) {\n const { classNames, containerStyle } = useWrapperProps(index);\n\n return (\n <div className={classNames.container} style={containerStyle}>\n <div className={classNames.flex}>{children}</div>\n </div>\n );\n};\n\nexport default Wrapper;\n", "import Button from './Button';\nimport Wrapper from './Wrapper';\n\nexport default {\n Button,\n Wrapper,\n};\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport interface HeaderColumnPropsHook {\n classNames: {\n main: string;\n loading: string;\n wrapper: string;\n };\n}\n\nexport default function useHeaderColumnProps(\n index: number,\n popoverButtons: boolean,\n): HeaderColumnPropsHook {\n const classNames = {\n ...CLASS_NAMES,\n loading: clsx(\n CLASS_NAMES.loading.base,\n index === 0 ? '' : CLASS_NAMES.loading.margin,\n ),\n wrapper: clsx(\n CLASS_NAMES.wrapper.padding,\n popoverButtons ? '' : CLASS_NAMES.wrapper.popover,\n ),\n };\n\n return {\n classNames,\n };\n}\n", "export const CLASS_NAMES = {\n main: 'flex md:h-14',\n loading: {\n base: 'my-auto w-full mr-8',\n margin: 'ml-4',\n },\n wrapper: {\n padding: 'md:px-2 md:pt-2',\n popover: 'pb-1',\n },\n};\n\nexport const MOVE_LEFT_ITEM_PROPS = {\n name: 'Move column left',\n icon: 'arrow-left',\n};\n\nexport const MOVE_RIGHT_ITEM_PROPS = {\n name: 'Move column right',\n icon: 'arrow-right',\n};\n\nexport const HIDE_COLUMN_PROPS = {\n name: 'Hide column',\n icon: 'eye-off',\n};\n", "export const CLASS_NAMES = {\n base: 'flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200',\n};\n", "import type {\n ColumnInstance,\n HeaderGroup,\n TableHeaderProps,\n} from 'react-table';\n\nexport interface HeaderGroupPropsHook<T extends Object> {\n headers: ColumnInstance<T>[];\n headerGroupProps: TableHeaderProps;\n totalVisible: number;\n}\n\nexport default function useHeaderGroupProps<T extends Object>(\n headerGroup: HeaderGroup<T>,\n columns: ColumnInstance<T>[],\n): HeaderGroupPropsHook<T> {\n const { headers, getHeaderGroupProps } = headerGroup;\n const headerGroupProps = getHeaderGroupProps({});\n\n const totalVisible = columns.filter((column) => column.isVisible).length;\n\n return {\n headers,\n headerGroupProps,\n totalVisible,\n };\n}\n", "import type { PropsWithChildren } from 'react';\nimport type {\n ColumnInstance,\n HeaderGroup as HeaderGroupType,\n} from 'react-table';\nimport HeaderColumn from '../HeaderColumn';\nimport { CLASS_NAMES } from './constants';\nimport useHeaderGroupProps from './useHeaderGroupProps';\n\nexport interface HeaderGroupProps<T extends Object> {\n headerGroup: HeaderGroupType<T>;\n columns: ColumnInstance<T>[];\n isLoading?: boolean;\n}\n\nfunction HeaderGroup<T extends Object>({\n headerGroup,\n columns,\n isLoading,\n}: PropsWithChildren<HeaderGroupProps<T>>) {\n const { headerGroupProps, headers } = useHeaderGroupProps(\n headerGroup,\n columns,\n );\n\n return (\n <div {...headerGroupProps} className={CLASS_NAMES.base}>\n {headers.map((column, index) => (\n <HeaderColumn\n index={index}\n label={column.render('Header')}\n isLoading={isLoading}\n {...column.getHeaderProps(column.getSortByToggleProps())}\n />\n ))}\n </div>\n );\n}\n\nexport default HeaderGroup;\n", "import type { FunctionComponent, ReactNode } from 'react';\nimport type { TableCellProps } from 'react-table';\nimport { SkeletonLoader, Text } from '@kanda-libs/ks-design-library';\nimport useCellClassNames from './useCellClassNames';\nimport useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';\n\nexport interface CellProps extends TableCellProps {\n index: number;\n render: () => ReactNode;\n compact?: boolean;\n isLoading?: boolean;\n label?: string;\n}\n\nconst Cell: FunctionComponent<CellProps> = function ({\n render,\n index,\n compact = false,\n isLoading = false,\n label,\n ...props\n}) {\n const classNames = useCellClassNames(index, compact, isLoading);\n\n const { style: unformattedStyle, ...formattedProps } = props;\n const style = useMobileFullWidthCellStyle(unformattedStyle);\n\n return (\n <div {...formattedProps} style={style} className={classNames.cell}>\n <div className={classNames.container}>\n <div className={classNames.render}>\n <SkeletonLoader\n isLoading={isLoading}\n afterLoading={\n <>\n <Text text={`${label}:`} className={classNames.mobileLabel} />\n {render()}\n </>\n }\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default Cell;\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport type CellClassNamesHook = {\n cell: string;\n container: string;\n render: string;\n mobileLabel: string;\n};\n\nexport default function useCellClassNames(\n index: number,\n compact: boolean,\n isLoading: boolean,\n): CellClassNamesHook {\n return {\n cell: clsx(\n compact ? CLASS_NAMES.cell.compact : CLASS_NAMES.cell.base,\n index === 0 ? '' : CLASS_NAMES.cell.padding,\n ),\n container: CLASS_NAMES.container,\n render: isLoading ? CLASS_NAMES.renderLoading : CLASS_NAMES.render,\n mobileLabel: CLASS_NAMES.mobileLabel,\n };\n}\n", "export const CLASS_NAMES = {\n container: 'flex w-full h-full',\n render:\n 'w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis',\n renderLoading: 'w-full my-auto mr-8 text-style-g',\n mobileLabel: 'block md:hidden text-16-24-em text-neutral-600 mr-2',\n cell: {\n base: 'px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex',\n compact: 'h-8 flex',\n padding: 'md:pl-4',\n },\n};\n", "import { useClasses } from '@kanda-libs/ks-design-library';\nimport { CLASS_NAMES } from './constants';\n\nexport interface RowClassNamesHook {\n base: string;\n compact: string;\n border: string;\n hover: string;\n button: string;\n}\n\nexport default function useRowClassNames(index: number): RowClassNamesHook {\n const classNames = useClasses(CLASS_NAMES, {\n base: ['.base', index === 9 ? '' : '.border', '.hover'],\n button: ['.button'],\n });\n\n return classNames as RowClassNamesHook;\n}\n", "export const CLASS_NAMES = {\n base: 'relative md:h-16 flex-col py-2 md:py-0 md:flex-row',\n compact: 'relative h-8',\n border: 'border-b border-neutral-200',\n hover: 'group hover:bg-neutral-50 cursor-pointer',\n button: 'hidden group-hover:block',\n};\n", "import type { PropsWithChildren } from 'react';\nimport type { Row as RowType, TableRowProps } from 'react-table';\nimport Cell from '../Cell';\nimport useRowClassNames from './useRowClassNames';\n\nexport interface RowProps<T extends Object> extends TableRowProps {\n cells: RowType<T>['cells'];\n index: number;\n compact?: boolean;\n isLoading?: boolean;\n}\n\nfunction Row<T extends Object>({\n cells,\n index,\n compact = false,\n isLoading = false,\n ...props\n}: PropsWithChildren<RowProps<T>>) {\n const classNames = useRowClassNames(index);\n\n return (\n <div {...props} className={compact ? classNames.compact : classNames.base}>\n {cells.map((cell, cellIndex) => (\n <Cell\n {...cell.getCellProps()}\n index={cellIndex}\n isLoading={isLoading}\n render={() => cell.render('Cell')}\n label={cell.column.Header as string}\n />\n ))}\n </div>\n );\n}\n\nexport default Row;\n", "import type { StringIndexedObject } from '@kanda-libs/ks-design-library';\nimport type { PropsWithChildren } from 'react';\nimport type { Row as RowType } from 'react-table';\nimport Row from '../Row';\n\nexport interface PagesProps<T extends StringIndexedObject> {\n page: RowType<T>[];\n prepareRow: (row: RowType<T>) => void;\n isLoading?: boolean;\n compact?: boolean;\n}\n\nfunction Pages<T extends StringIndexedObject>({\n page,\n prepareRow,\n isLoading = false,\n compact = false,\n}: PropsWithChildren<PagesProps<T>>) {\n return (\n <>\n {page.map((row, index) => {\n prepareRow(row);\n return (\n <Row\n {...row.getRowProps()}\n index={index}\n cells={row.cells}\n isLoading={isLoading}\n compact={compact}\n />\n );\n })}\n </>\n );\n}\nexport default Pages;\n", "import type { TableInstance, Row } from '../../@types/index';\nimport {\n useTable,\n useGlobalFilter,\n usePagination,\n useSortBy,\n useFlexLayout,\n type IdType,\n TableOptions,\n} from 'react-table';\nimport type { TableProps } from '.';\nimport { globalFilter } from './helpers/search';\nimport type {\n PaginationProps,\n StringIndexedObject,\n} from '@kanda-libs/ks-design-library';\nimport { useEffect } from 'react';\n\nexport interface TablePropsHook<T extends StringIndexedObject<unknown>>\n extends TableInstance<T> {\n paginationProps: PaginationProps;\n}\n\nexport default function useTableProps<T extends StringIndexedObject<unknown>>({\n columns,\n data,\n pageSize = 10,\n query = '',\n}: TableProps<T>): TablePropsHook<T> {\n const table = useTable<T>(\n {\n columns,\n data,\n initialState: {\n pageSize: 10,\n pageIndex: 0,\n },\n autoResetGlobalFilter: false,\n globalFilter: (\n rows: Row<T>[],\n searchKeys: IdType<T>[],\n filterValue: string,\n ) => globalFilter(rows, searchKeys, filterValue, pageSize),\n } as unknown as TableOptions<T>,\n useGlobalFilter,\n useSortBy,\n usePagination,\n useFlexLayout,\n );\n\n const {\n gotoPage,\n pageCount,\n state: { pageIndex },\n } = table;\n\n const paginationProps: PaginationProps = {\n pageCount,\n pageIndex,\n setPage: (nextPage: number) => {\n gotoPage(nextPage);\n },\n };\n\n useEffect(() => {\n table.setGlobalFilter(query);\n }, [query]);\n\n return {\n paginationProps,\n ...table,\n };\n}\n", "import type { IdType } from 'react-table';\nimport type { Row } from '../../../@types/index';\nimport Fuse from 'fuse.js';\nimport type { StringIndexedObject } from '~/types';\n\nconst exactMatchSearch = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n filterValue: string,\n) => {\n return rows.filter((row) => {\n // Take all values from the row, and add them together in a string\n // for the purposes of searching\n const rowValues = Object.values(row.values).join(', ');\n\n return rowValues.toLowerCase().includes(filterValue.toLowerCase());\n });\n};\n\nconst excludeExactMatches = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n exactMatchRows: Row<T>[],\n) =>\n rows.filter(\n ({ id }) => exactMatchRows.filter((p) => p.id === id).length === 0,\n );\n\nconst fuzzySearch = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n filterValue: string,\n searchKeys: string[],\n numberOfRows: number,\n exactMatchRows: Row<T>[],\n): Row<T>[] => {\n const currentRows = rows.map((row) => {\n return row.values;\n });\n\n const fuse = new Fuse(currentRows, {\n keys: searchKeys.map((key) => ({\n name: key,\n // Because FuseJS allows for dot notation,\n // we need to use a function to get the value\n // as the object returned from the table is flat,\n // rather than nested\n getFn: (obj: StringIndexedObject) => obj[key],\n })),\n });\n\n const results = fuse\n .search(filterValue)\n .map(({ item }) => item)\n .slice(0, numberOfRows);\n\n const filteredResults = results\n .map((result) => rows.find((row) => row.values.cid === result.cid))\n .filter(Boolean) as Row<T>[];\n\n return excludeExactMatches(filteredResults, exactMatchRows);\n};\n\nexport const globalFilter = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n searchKeys: IdType<T>[],\n filterValue: string,\n pageSize = 10,\n): Row<T>[] => {\n if (filterValue.length < 1) {\n return rows;\n }\n\n // Get the first 10 exact matches. The reason for this is that exact matching\n // should take presedence over fuzzy matching. An exact match is more useful\n // but also less expensive to compute. So there's no need to do a fuzzy search\n // if there are >= 10 exact matches.\n const exactMatches = exactMatchSearch(rows, filterValue).slice(0, pageSize);\n const currentRowsExcludingExactMatches = excludeExactMatches(\n rows,\n exactMatches,\n );\n\n const fuzzyMatches = fuzzySearch(\n currentRowsExcludingExactMatches,\n filterValue,\n searchKeys,\n pageSize - exactMatches.length,\n exactMatches,\n );\n\n const results = [...exactMatches, ...fuzzyMatches];\n\n // Return the rows in the same order as the original rows\n // to preserve sorting, which happens before fuzzy matching\n return rows\n .map(({ id }) => results.find((row) => row.id === id))\n .filter(Boolean) as Row<T>[];\n};\n"],
5
- "mappings": "AACA,OACE,cAAAA,OAEK,gCCJP,OAAS,kBAAAC,MAAsB,gCCA/B,OAAS,gBAAAC,MAAoB,gCAKd,SAARC,EACLC,EAC8B,CAC9B,GAAI,CAACA,EAAO,MAAO,CAAC,EAEpB,IAAMC,EAAYH,EAAa,EAQ/B,MALuB,CACrB,GAAGE,EACH,MAAOC,EAAYD,GAAA,YAAAA,EAAO,MAAQ,MACpC,CAGF,CClBA,OAAS,QAAAE,MAAY,gCCDd,IAAMC,EACX,6IAEWC,EAAa,CACxB,KAAM,eACN,OAAQ,cACR,KAAM,GACN,UAAW,cACb,EAEaC,EAAgB,CAC3B,MAAO,mBACT,EAEaC,EAAsB,CACjC,UAAW,CACT,KAAM,gCACN,QAAS,YACX,EACA,KAAM,CACJ,KAAM,qCACN,QAAS,SACX,CACF,EDbI,OAEE,OAAAC,EAFF,QAAAC,MAAA,oBAFJ,IAAMC,EAAyC,SAAU,CAAE,MAAAC,KAAUC,CAAM,EAAG,CAC5E,OACEH,EAAC,UAAO,UAAWI,EAAqB,GAAGD,EACxC,UAAAD,EACDH,EAACM,EAAA,CAAM,GAAGC,EAAY,GACxB,CAEJ,EAEOC,EAAQN,EEhBf,OAAOO,MAAU,OAWF,SAARC,EAAiCC,EAAiC,CACvE,IAAMC,EAAiBD,IAAU,EAAIE,EAAgB,CAAC,EAatD,MAAO,CACL,WAZiB,CACjB,UAAWC,EACTC,EAAoB,UAAU,KAC9BJ,IAAU,EAAII,EAAoB,UAAU,QAAU,EACxD,EACA,KAAMD,EACJC,EAAoB,KAAK,KACzBJ,IAAU,EAAI,GAAKI,EAAoB,KAAK,OAC9C,CACF,EAIE,eAAAH,CACF,CACF,CCdM,cAAAI,MAAA,oBARN,IAAMC,EAA2C,SAAU,CACzD,MAAAC,EACA,SAAAC,CACF,EAAG,CACD,GAAM,CAAE,WAAAC,EAAY,eAAAC,CAAe,EAAIC,EAAgBJ,CAAK,EAE5D,OACEF,EAAC,OAAI,UAAWI,EAAW,UAAW,MAAOC,EAC3C,SAAAL,EAAC,OAAI,UAAWI,EAAW,KAAO,SAAAD,EAAS,EAC7C,CAEJ,EAEOI,EAAQN,EClBf,IAAOO,EAAQ,CACb,OAAAC,EACA,QAAAC,CACF,ECNA,OAAOC,MAAU,OCAV,IAAMC,EAAc,CACzB,KAAM,eACN,QAAS,CACP,KAAM,sBACN,OAAQ,MACV,EACA,QAAS,CACP,QAAS,kBACT,QAAS,MACX,CACF,EDCe,SAARC,EACLC,EACAC,EACuB,CAavB,MAAO,CACL,WAbiB,CACjB,GAAGC,EACH,QAASC,EACPD,EAAY,QAAQ,KACpBF,IAAU,EAAI,GAAKE,EAAY,QAAQ,MACzC,EACA,QAASC,EACPD,EAAY,QAAQ,QACpBD,EAAiB,GAAKC,EAAY,QAAQ,OAC5C,CACF,CAIA,CACF,CPGY,cAAAE,MAAA,oBAnBZ,IAAMC,GAAqD,SAAU,CACnE,MAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,MAAAC,KACGC,CACL,EAAG,CACD,GAAM,CAAE,WAAAC,CAAW,EAAIC,EAAqBN,EAAOE,CAAc,EAE3D,CAAE,MAAOK,KAAqBC,CAAe,EAAIJ,EACjDK,EAAQC,EAA4BH,CAAgB,EAE1D,OACET,EAAC,OAAK,GAAGU,EAAgB,MAAOC,EAAO,UAAWJ,EAAW,KAC3D,SAAAP,EAACa,EAAA,CACC,UAAWV,EACX,iBAAkBI,EAAW,QAC7B,aACEP,EAACc,EAAa,QAAb,CAAqB,MAAOZ,EAC3B,SAAAF,EAACc,EAAa,OAAb,CAAoB,MAAOT,EAAO,EACrC,EAEJ,EACF,CAEJ,EAEOU,EAAQd,GSzCR,IAAMe,EAAc,CACzB,KAAM,0EACR,ECUe,SAARC,EACLC,EACAC,EACyB,CACzB,GAAM,CAAE,QAAAC,EAAS,oBAAAC,CAAoB,EAAIH,EACnCI,EAAmBD,EAAoB,CAAC,CAAC,EAEzCE,EAAeJ,EAAQ,OAAQK,GAAWA,EAAO,SAAS,EAAE,OAElE,MAAO,CACL,QAAAJ,EACA,iBAAAE,EACA,aAAAC,CACF,CACF,CCEQ,cAAAE,MAAA,oBAbR,SAASC,GAA8B,CACrC,YAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAA2C,CACzC,GAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAQ,EAAIC,EACpCL,EACAC,CACF,EAEA,OACEH,EAAC,OAAK,GAAGK,EAAkB,UAAWG,EAAY,KAC/C,SAAAF,EAAQ,IAAI,CAACG,EAAQC,IACpBV,EAACW,EAAA,CACC,MAAOD,EACP,MAAOD,EAAO,OAAO,QAAQ,EAC7B,UAAWL,EACV,GAAGK,EAAO,eAAeA,EAAO,qBAAqB,CAAC,EACzD,CACD,EACH,CAEJ,CAEA,IAAOG,EAAQX,GCrCf,OAAS,kBAAAY,GAAgB,QAAAC,OAAY,gCCFrC,OAAOC,OAAU,OCAV,IAAMC,EAAc,CACzB,UAAW,qBACX,OACE,mGACF,cAAe,mCACf,YAAa,sDACb,KAAM,CACJ,KAAM,iDACN,QAAS,WACT,QAAS,SACX,CACF,EDDe,SAARC,EACLC,EACAC,EACAC,EACoB,CACpB,MAAO,CACL,KAAMC,GACJF,EAAUG,EAAY,KAAK,QAAUA,EAAY,KAAK,KACtDJ,IAAU,EAAI,GAAKI,EAAY,KAAK,OACtC,EACA,UAAWA,EAAY,UACvB,OAAQF,EAAYE,EAAY,cAAgBA,EAAY,OAC5D,YAAaA,EAAY,WAC3B,CACF,CDUc,mBAAAC,GACE,OAAAC,EADF,QAAAC,OAAA,oBApBd,IAAMC,GAAqC,SAAU,CACnD,OAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,MAAAC,KACGC,CACL,EAAG,CACD,IAAMC,EAAaC,EAAkBN,EAAOC,EAASC,CAAS,EAExD,CAAE,MAAOK,KAAqBC,CAAe,EAAIJ,EACjDK,EAAQC,EAA4BH,CAAgB,EAE1D,OACEX,EAAC,OAAK,GAAGY,EAAgB,MAAOC,EAAO,UAAWJ,EAAW,KAC3D,SAAAT,EAAC,OAAI,UAAWS,EAAW,UACzB,SAAAT,EAAC,OAAI,UAAWS,EAAW,OACzB,SAAAT,EAACe,GAAA,CACC,UAAWT,EACX,aACEL,GAAAF,GAAA,CACE,UAAAC,EAACgB,GAAA,CAAK,KAAM,GAAGT,KAAU,UAAWE,EAAW,YAAa,EAC3DN,EAAO,GACV,EAEJ,EACF,EACF,EACF,CAEJ,EAEOc,EAAQf,GG9Cf,OAAS,cAAAgB,OAAkB,gCCApB,IAAMC,EAAc,CACzB,KAAM,qDACN,QAAS,eACT,OAAQ,8BACR,MAAO,2CACP,OAAQ,0BACV,EDKe,SAARC,EAAkCC,EAAkC,CAMzE,OALmBC,GAAWC,EAAa,CACzC,KAAM,CAAC,QAASF,IAAU,EAAI,GAAK,UAAW,QAAQ,EACtD,OAAQ,CAAC,SAAS,CACpB,CAAC,CAGH,CEMQ,cAAAG,MAAA,oBAZR,SAASC,GAAsB,CAC7B,MAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,MACTC,CACL,EAAmC,CACjC,IAAMC,EAAaC,EAAiBL,CAAK,EAEzC,OACEH,EAAC,OAAK,GAAGM,EAAO,UAAWF,EAAUG,EAAW,QAAUA,EAAW,KAClE,SAAAL,EAAM,IAAI,CAACO,EAAMC,IAChBV,EAACW,EAAA,CACE,GAAGF,EAAK,aAAa,EACtB,MAAOC,EACP,UAAWL,EACX,OAAQ,IAAMI,EAAK,OAAO,MAAM,EAChC,MAAOA,EAAK,OAAO,OACrB,CACD,EACH,CAEJ,CAEA,IAAOG,EAAQX,GCjBX,mBAAAY,GAIM,OAAAC,MAJN,oBAPJ,SAASC,GAAqC,CAC5C,KAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EAAU,EACZ,EAAqC,CACnC,OACEL,EAAAD,GAAA,CACG,SAAAG,EAAK,IAAI,CAACI,EAAKC,KACdJ,EAAWG,CAAG,EAEZN,EAACQ,EAAA,CACE,GAAGF,EAAI,YAAY,EACpB,MAAOC,EACP,MAAOD,EAAI,MACX,UAAWF,EACX,QAASC,EACX,EAEH,EACH,CAEJ,CACA,IAAOI,EAAQR,GClCf,OACE,YAAAS,GACA,mBAAAC,GACA,iBAAAC,GACA,aAAAC,GACA,iBAAAC,OAGK,cCPP,OAAOC,OAAU,UAGjB,IAAMC,GAAmB,CACvBC,EACAC,IAEOD,EAAK,OAAQE,GAGA,OAAO,OAAOA,EAAI,MAAM,EAAE,KAAK,IAAI,EAEpC,YAAY,EAAE,SAASD,EAAY,YAAY,CAAC,CAClE,EAGGE,EAAsB,CAC1BH,EACAI,IAEAJ,EAAK,OACH,CAAC,CAAE,GAAAK,CAAG,IAAMD,EAAe,OAAQE,GAAMA,EAAE,KAAOD,CAAE,EAAE,SAAW,CACnE,EAEIE,GAAc,CAClBP,EACAC,EACAO,EACAC,EACAL,IACa,CACb,IAAMM,EAAcV,EAAK,IAAKE,GACrBA,EAAI,MACZ,EAkBKS,EAhBO,IAAIb,GAAKY,EAAa,CACjC,KAAMF,EAAW,IAAKI,IAAS,CAC7B,KAAMA,EAKN,MAAQC,GAA6BA,EAAID,EAC3C,EAAE,CACJ,CAAC,EAGE,OAAOX,CAAW,EAClB,IAAI,CAAC,CAAE,KAAAa,CAAK,IAAMA,CAAI,EACtB,MAAM,EAAGL,CAAY,EAGrB,IAAKM,GAAWf,EAAK,KAAME,GAAQA,EAAI,OAAO,MAAQa,EAAO,GAAG,CAAC,EACjE,OAAO,OAAO,EAEjB,OAAOZ,EAAoBQ,EAAiBP,CAAc,CAC5D,EAEaY,EAAe,CAC1BhB,EACAQ,EACAP,EACAgB,EAAW,KACE,CACb,GAAIhB,EAAY,OAAS,EACvB,OAAOD,EAOT,IAAMkB,EAAenB,GAAiBC,EAAMC,CAAW,EAAE,MAAM,EAAGgB,CAAQ,EACpEE,EAAmChB,EACvCH,EACAkB,CACF,EAEME,EAAeb,GACnBY,EACAlB,EACAO,EACAS,EAAWC,EAAa,OACxBA,CACF,EAEMG,EAAU,CAAC,GAAGH,EAAc,GAAGE,CAAY,EAIjD,OAAOpB,EACJ,IAAI,CAAC,CAAE,GAAAK,CAAG,IAAMgB,EAAQ,KAAMnB,GAAQA,EAAI,KAAOG,CAAE,CAAC,EACpD,OAAO,OAAO,CACnB,ED/EA,OAAS,aAAAiB,OAAiB,QAOX,SAARC,EAAuE,CAC5E,QAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,EACV,EAAqC,CACnC,IAAMC,EAAQC,GACZ,CACE,QAAAL,EACA,KAAAC,EACA,aAAc,CACZ,SAAU,GACV,UAAW,CACb,EACA,sBAAuB,GACvB,aAAc,CACZK,EACAC,EACAC,IACGC,EAAaH,EAAMC,EAAYC,EAAaN,CAAQ,CAC3D,EACAQ,GACAC,GACAC,GACAC,EACF,EAEM,CACJ,SAAAC,EACA,UAAAC,EACA,MAAO,CAAE,UAAAC,CAAU,CACrB,EAAIZ,EAEEa,EAAmC,CACvC,UAAAF,EACA,UAAAC,EACA,QAAUE,GAAqB,CAC7BJ,EAASI,CAAQ,CACnB,CACF,EAEA,OAAApB,GAAU,IAAM,CACdM,EAAM,gBAAgBD,CAAK,CAC7B,EAAG,CAACA,CAAK,CAAC,EAEH,CACL,gBAAAc,EACA,GAAGb,CACL,CACF,CpBjCI,mBAAAe,GAIQ,OAAAC,EAHN,QAAAC,MADF,oBAfJ,SAASC,GAA8C,CACrD,QAAAC,EAAU,GACV,UAAAC,EAAY,MACTC,CACL,EAAqC,CACnC,GAAM,CACJ,KAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,aAAAC,EACA,gBAAAC,CACF,EAAIC,EAAcP,CAAK,EAEvB,OACEJ,EAAAF,GAAA,CACE,UAAAE,EAAC,OAAK,GAAGQ,EAAc,EAAG,UAAU,SAClC,UAAAT,EAAC,OACE,SAAAU,EAAa,IAAKG,GACjBb,EAACc,EAAA,CACC,YAAaD,EACb,QAASL,EACT,UAAWJ,EACb,CACD,EACH,EACAJ,EAACe,EAAA,CACC,KAAMT,EACN,WAAYC,EACZ,UAAWH,EACX,QAASD,EACX,GACF,EACCQ,EAAgB,UAAY,GAC3BX,EAAC,OAAI,UAAU,YACb,SAAAA,EAACgB,GAAA,CAAY,GAAGL,EAAiB,EACnC,GAEJ,CAEJ,CAEA,IAAOM,GAAQf",
6
- "names": ["Pagination", "SkeletonLoader", "useIsDesktop", "useMobileFullWidthCellStyle", "style", "isDesktop", "Icon", "BUTTON_CLASS_NAMES", "ICON_PROPS", "WRAPPER_STYLE", "WRAPPER_CLASS_NAMES", "jsx", "jsxs", "Button", "label", "props", "BUTTON_CLASS_NAMES", "Icon", "ICON_PROPS", "Button_default", "clsx", "useWrapperProps", "index", "containerStyle", "WRAPPER_STYLE", "clsx", "WRAPPER_CLASS_NAMES", "jsx", "Wrapper", "index", "children", "classNames", "containerStyle", "useWrapperProps", "Wrapper_default", "HeaderButton_default", "Button_default", "Wrapper_default", "clsx", "CLASS_NAMES", "useHeaderColumnProps", "index", "popoverButtons", "CLASS_NAMES", "clsx", "jsx", "HeaderColumn", "index", "isLoading", "popoverButtons", "label", "props", "classNames", "useHeaderColumnProps", "unformattedStyle", "formattedProps", "style", "useMobileFullWidthCellStyle", "SkeletonLoader", "HeaderButton_default", "HeaderColumn_default", "CLASS_NAMES", "useHeaderGroupProps", "headerGroup", "columns", "headers", "getHeaderGroupProps", "headerGroupProps", "totalVisible", "column", "jsx", "HeaderGroup", "headerGroup", "columns", "isLoading", "headerGroupProps", "headers", "useHeaderGroupProps", "CLASS_NAMES", "column", "index", "HeaderColumn_default", "HeaderGroup_default", "SkeletonLoader", "Text", "clsx", "CLASS_NAMES", "useCellClassNames", "index", "compact", "isLoading", "clsx", "CLASS_NAMES", "Fragment", "jsx", "jsxs", "Cell", "render", "index", "compact", "isLoading", "label", "props", "classNames", "useCellClassNames", "unformattedStyle", "formattedProps", "style", "useMobileFullWidthCellStyle", "SkeletonLoader", "Text", "Cell_default", "useClasses", "CLASS_NAMES", "useRowClassNames", "index", "useClasses", "CLASS_NAMES", "jsx", "Row", "cells", "index", "compact", "isLoading", "props", "classNames", "useRowClassNames", "cell", "cellIndex", "Cell_default", "Row_default", "Fragment", "jsx", "Pages", "page", "prepareRow", "isLoading", "compact", "row", "index", "Row_default", "Pages_default", "useTable", "useGlobalFilter", "usePagination", "useSortBy", "useFlexLayout", "Fuse", "exactMatchSearch", "rows", "filterValue", "row", "excludeExactMatches", "exactMatchRows", "id", "p", "fuzzySearch", "searchKeys", "numberOfRows", "currentRows", "filteredResults", "key", "obj", "item", "result", "globalFilter", "pageSize", "exactMatches", "currentRowsExcludingExactMatches", "fuzzyMatches", "results", "useEffect", "useTableProps", "columns", "data", "pageSize", "query", "table", "useTable", "rows", "searchKeys", "filterValue", "globalFilter", "useGlobalFilter", "useSortBy", "usePagination", "useFlexLayout", "gotoPage", "pageCount", "pageIndex", "paginationProps", "nextPage", "Fragment", "jsx", "jsxs", "Table", "compact", "isLoading", "props", "page", "prepareRow", "columns", "getTableProps", "headerGroups", "paginationProps", "useTableProps", "headerGroup", "HeaderGroup_default", "Pages_default", "Pagination", "Table_default"]
3
+ "sources": ["../src/components/Table/index.tsx", "../src/components/Table/components/HeaderColumn/index.tsx", "../src/hooks/useMobileFullWidthCellStyle.ts", "../src/components/Table/components/HeaderButton/Button.tsx", "../src/components/Table/components/HeaderButton/constants.ts", "../src/components/Table/components/HeaderButton/useWrapperProps.ts", "../src/components/Table/components/HeaderButton/Wrapper.tsx", "../src/components/Table/components/HeaderButton/index.tsx", "../src/components/Table/components/HeaderColumn/useHeaderColumnProps.ts", "../src/components/Table/components/HeaderColumn/constants.ts", "../src/components/Table/components/HeaderGroup/constants.ts", "../src/components/Table/components/HeaderGroup/useHeaderGroupProps.ts", "../src/components/Table/components/HeaderGroup/index.tsx", "../src/components/Table/components/Cell/index.tsx", "../src/components/Table/components/Cell/useCellClassNames.ts", "../src/components/Table/components/Cell/constants.ts", "../src/components/Table/components/Row/useRowClassNames.ts", "../src/components/Table/components/Row/constants.ts", "../src/components/Table/components/Row/index.tsx", "../src/components/Table/components/Pages/index.tsx", "../src/components/Table/useTableProps.ts", "../src/components/Table/helpers/search.ts", "../src/components/SplashScreen/index.tsx"],
4
+ "sourcesContent": ["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport {\n Pagination,\n type StringIndexedObject,\n} from '@kanda-libs/ks-design-library';\nimport type { Column } from 'react-table';\nimport HeaderGroup from './components/HeaderGroup';\nimport Pages from './components/Pages';\nimport useTableProps from './useTableProps';\n\nexport interface TableProps<T extends StringIndexedObject<unknown>> {\n columns: Readonly<Column<T>[]>;\n data: T[];\n filter?: string;\n pageSize?: number;\n compact?: boolean;\n isLoading?: boolean;\n canSelectRow?: boolean;\n query?: string;\n}\n\nexport type TableFunctionComponent<\n T extends StringIndexedObject<unknown> = any,\n> = FunctionComponent<TableProps<T>>;\n\nfunction Table<T extends StringIndexedObject<unknown>>({\n compact = false,\n isLoading = false,\n canSelectRow = false,\n ...props\n}: PropsWithChildren<TableProps<T>>) {\n const {\n page,\n prepareRow,\n columns,\n getTableProps,\n headerGroups,\n paginationProps,\n } = useTableProps(props);\n\n return (\n <>\n <div {...getTableProps()} className=\"w-full\">\n <div>\n {headerGroups.map((headerGroup) => (\n <HeaderGroup\n headerGroup={headerGroup}\n columns={columns}\n isLoading={isLoading}\n />\n ))}\n </div>\n <Pages\n page={page}\n prepareRow={prepareRow}\n isLoading={isLoading}\n compact={compact}\n canSelectRow={canSelectRow}\n />\n </div>\n {paginationProps.pageCount > 1 && (\n <div className=\"px-4 py-4\">\n <Pagination {...paginationProps} />\n </div>\n )}\n </>\n );\n}\n\nexport default Table;\n", "import { SkeletonLoader } from '@kanda-libs/ks-design-library';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport type { TableHeaderProps } from 'react-table';\nimport useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';\nimport HeaderButton from '../HeaderButton';\nimport useHeaderColumnProps from './useHeaderColumnProps';\n\nexport interface HeaderColumnProps extends TableHeaderProps {\n index: number;\n isLoading?: boolean;\n popoverButtons?: boolean;\n label: ReactNode;\n}\n\nconst HeaderColumn: FunctionComponent<HeaderColumnProps> = function ({\n index,\n isLoading = false,\n popoverButtons = false,\n label,\n ...props\n}) {\n const { classNames } = useHeaderColumnProps(index, popoverButtons);\n\n const { style: unformattedStyle, ...formattedProps } = props;\n const style = useMobileFullWidthCellStyle(unformattedStyle);\n\n return (\n <div {...formattedProps} style={style} className={classNames.main}>\n <SkeletonLoader\n isLoading={isLoading}\n wrapperClassName={classNames.loading}\n afterLoading={\n <HeaderButton.Wrapper index={index}>\n <HeaderButton.Button label={label} />\n </HeaderButton.Wrapper>\n }\n />\n </div>\n );\n};\n\nexport default HeaderColumn;\n", "import { useIsDesktop } from '@kanda-libs/ks-design-library';\nimport type { CSSProperties } from 'react';\n\nexport type MobileFullWidthCellStyleHook = CSSProperties;\n\nexport default function useMobileFullWidthCellStyle(\n style?: CSSProperties,\n): MobileFullWidthCellStyleHook {\n if (!style) return {};\n\n const isDesktop = useIsDesktop();\n\n // For mobile, we want to make sure that the cell is always 100% width\n const formattedStyle = {\n ...style,\n width: isDesktop ? style?.width : '100%',\n };\n\n return formattedStyle;\n}\n", "import type { FunctionComponent, HTMLAttributes, ReactNode } from 'react';\nimport { Icon } from '@kanda-libs/ks-design-library';\nimport { BUTTON_CLASS_NAMES, ICON_PROPS } from './constants';\n\nexport interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {\n label: ReactNode;\n}\n\nconst Button: FunctionComponent<ButtonProps> = function ({ label, ...props }) {\n return (\n <button className={BUTTON_CLASS_NAMES} {...props}>\n {label}\n <Icon {...ICON_PROPS} />\n </button>\n );\n};\n\nexport default Button;\n", "export const BUTTON_CLASS_NAMES =\n 'flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20';\n\nexport const ICON_PROPS = {\n icon: 'chevron-down',\n stroke: 'neutral-500',\n size: 12,\n className: 'ml-2 my-auto',\n};\n\nexport const WRAPPER_STYLE = {\n width: 'calc(100% + 16px)',\n};\n\nexport const WRAPPER_CLASS_NAMES = {\n container: {\n base: 'w-full h-full overflow-hidden',\n padding: 'pl-4 -ml-4',\n },\n flex: {\n base: 'w-full h-full md:flex px-4 md:px-0',\n padding: 'md:pl-4',\n },\n};\n", "import type { CSSProperties } from 'react';\nimport clsx from 'clsx';\nimport { WRAPPER_STYLE, WRAPPER_CLASS_NAMES } from './constants';\n\nexport interface WrapperPropsHook {\n classNames: {\n container: string;\n flex: string;\n };\n containerStyle: CSSProperties;\n}\n\nexport default function useWrapperProps(index: number): WrapperPropsHook {\n const containerStyle = index === 0 ? WRAPPER_STYLE : {};\n\n const classNames = {\n container: clsx(\n WRAPPER_CLASS_NAMES.container.base,\n index === 0 ? WRAPPER_CLASS_NAMES.container.padding : '',\n ),\n flex: clsx(\n WRAPPER_CLASS_NAMES.flex.base,\n index === 0 ? '' : WRAPPER_CLASS_NAMES.flex.padding,\n ),\n };\n\n return {\n classNames,\n containerStyle,\n };\n}\n", "import type { FunctionComponent } from 'react';\nimport useWrapperProps from './useWrapperProps';\n\nexport interface WrapperProps {\n index: number;\n children?: JSX.Element | JSX.Element[];\n}\n\nconst Wrapper: FunctionComponent<WrapperProps> = function ({\n index,\n children,\n}) {\n const { classNames, containerStyle } = useWrapperProps(index);\n\n return (\n <div className={classNames.container} style={containerStyle}>\n <div className={classNames.flex}>{children}</div>\n </div>\n );\n};\n\nexport default Wrapper;\n", "import Button from './Button';\nimport Wrapper from './Wrapper';\n\nexport default {\n Button,\n Wrapper,\n};\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport interface HeaderColumnPropsHook {\n classNames: {\n main: string;\n loading: string;\n wrapper: string;\n };\n}\n\nexport default function useHeaderColumnProps(\n index: number,\n popoverButtons: boolean,\n): HeaderColumnPropsHook {\n const classNames = {\n ...CLASS_NAMES,\n loading: clsx(\n CLASS_NAMES.loading.base,\n index === 0 ? '' : CLASS_NAMES.loading.margin,\n ),\n wrapper: clsx(\n CLASS_NAMES.wrapper.padding,\n popoverButtons ? '' : CLASS_NAMES.wrapper.popover,\n ),\n };\n\n return {\n classNames,\n };\n}\n", "export const CLASS_NAMES = {\n main: 'flex md:h-14',\n loading: {\n base: 'my-auto w-full mr-8',\n margin: 'ml-4',\n },\n wrapper: {\n padding: 'md:px-2 md:pt-2',\n popover: 'pb-1',\n },\n};\n\nexport const MOVE_LEFT_ITEM_PROPS = {\n name: 'Move column left',\n icon: 'arrow-left',\n};\n\nexport const MOVE_RIGHT_ITEM_PROPS = {\n name: 'Move column right',\n icon: 'arrow-right',\n};\n\nexport const HIDE_COLUMN_PROPS = {\n name: 'Hide column',\n icon: 'eye-off',\n};\n", "export const CLASS_NAMES = {\n base: 'flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200',\n};\n", "import type {\n ColumnInstance,\n HeaderGroup,\n TableHeaderProps,\n} from 'react-table';\n\nexport interface HeaderGroupPropsHook<T extends Object> {\n headers: ColumnInstance<T>[];\n headerGroupProps: TableHeaderProps;\n totalVisible: number;\n}\n\nexport default function useHeaderGroupProps<T extends Object>(\n headerGroup: HeaderGroup<T>,\n columns: ColumnInstance<T>[],\n): HeaderGroupPropsHook<T> {\n const { headers, getHeaderGroupProps } = headerGroup;\n const headerGroupProps = getHeaderGroupProps({});\n\n const totalVisible = columns.filter((column) => column.isVisible).length;\n\n return {\n headers,\n headerGroupProps,\n totalVisible,\n };\n}\n", "import type { PropsWithChildren } from 'react';\nimport type {\n ColumnInstance,\n HeaderGroup as HeaderGroupType,\n} from 'react-table';\nimport HeaderColumn from '../HeaderColumn';\nimport { CLASS_NAMES } from './constants';\nimport useHeaderGroupProps from './useHeaderGroupProps';\n\nexport interface HeaderGroupProps<T extends Object> {\n headerGroup: HeaderGroupType<T>;\n columns: ColumnInstance<T>[];\n isLoading?: boolean;\n}\n\nfunction HeaderGroup<T extends Object>({\n headerGroup,\n columns,\n isLoading,\n}: PropsWithChildren<HeaderGroupProps<T>>) {\n const { headerGroupProps, headers } = useHeaderGroupProps(\n headerGroup,\n columns,\n );\n\n return (\n <div {...headerGroupProps} className={CLASS_NAMES.base}>\n {headers.map((column, index) => (\n <HeaderColumn\n index={index}\n label={column.render('Header')}\n isLoading={isLoading}\n {...column.getHeaderProps(column.getSortByToggleProps())}\n />\n ))}\n </div>\n );\n}\n\nexport default HeaderGroup;\n", "import type { FunctionComponent, ReactNode } from 'react';\nimport type { TableCellProps } from 'react-table';\nimport { SkeletonLoader, Text } from '@kanda-libs/ks-design-library';\nimport useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';\nimport useCellClassNames from './useCellClassNames';\n\nexport interface CellProps extends TableCellProps {\n index: number;\n render: () => ReactNode;\n compact?: boolean;\n isLoading?: boolean;\n label?: string;\n}\n\nconst Cell: FunctionComponent<CellProps> = function ({\n render,\n index,\n compact = false,\n isLoading = false,\n label,\n ...props\n}) {\n const classNames = useCellClassNames(index, compact, isLoading);\n\n const { style: unformattedStyle, ...formattedProps } = props;\n const style = useMobileFullWidthCellStyle(unformattedStyle);\n\n return (\n <div {...formattedProps} style={style} className={classNames.cell}>\n <div className={classNames.container}>\n <div className={classNames.render}>\n <SkeletonLoader\n isLoading={isLoading}\n afterLoading={\n <>\n <Text text={`${label}:`} className={classNames.mobileLabel} />\n {render()}\n </>\n }\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default Cell;\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport type CellClassNamesHook = {\n cell: string;\n container: string;\n render: string;\n mobileLabel: string;\n};\n\nexport default function useCellClassNames(\n index: number,\n compact: boolean,\n isLoading: boolean,\n): CellClassNamesHook {\n return {\n cell: clsx(\n compact ? CLASS_NAMES.cell.compact : CLASS_NAMES.cell.base,\n index === 0 ? '' : CLASS_NAMES.cell.padding,\n ),\n container: CLASS_NAMES.container,\n render: isLoading ? CLASS_NAMES.renderLoading : CLASS_NAMES.render,\n mobileLabel: CLASS_NAMES.mobileLabel,\n };\n}\n", "export const CLASS_NAMES = {\n container: 'flex w-full h-full',\n render:\n 'w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis',\n renderLoading: 'w-full my-auto mr-8 text-style-g',\n mobileLabel: 'block md:hidden text-16-24-em text-neutral-600 mr-2',\n cell: {\n base: 'px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex',\n compact: 'h-8 flex',\n padding: 'md:pl-4',\n },\n};\n", "import { useClasses } from '@kanda-libs/ks-design-library';\nimport { CLASS_NAMES } from './constants';\n\nexport interface RowClassNamesHook {\n base: string;\n compact: string;\n border: string;\n hover: string;\n button: string;\n}\n\nexport default function useRowClassNames(\n index: number,\n canSelect: boolean,\n): RowClassNamesHook {\n const classNames = useClasses(CLASS_NAMES, {\n base: ['.base', index === 9 ? '' : '.border', canSelect ? '.hover' : ''],\n button: ['.button'],\n });\n\n return classNames as RowClassNamesHook;\n}\n", "export const CLASS_NAMES = {\n base: 'relative md:h-16 flex-col py-2 md:py-0 md:flex-row',\n compact: 'relative h-8',\n border: 'border-b border-neutral-200',\n hover: 'group hover:bg-neutral-50 cursor-pointer',\n button: 'hidden group-hover:block',\n};\n", "import type { PropsWithChildren } from 'react';\nimport type { Row as RowType, TableRowProps } from 'react-table';\nimport Cell from '../Cell';\nimport useRowClassNames from './useRowClassNames';\n\nexport interface RowProps<T extends Object> extends TableRowProps {\n cells: RowType<T>['cells'];\n index: number;\n compact?: boolean;\n isLoading?: boolean;\n canSelect?: boolean;\n}\n\nfunction Row<T extends Object>({\n cells,\n index,\n compact = false,\n isLoading = false,\n canSelect = false,\n ...props\n}: PropsWithChildren<RowProps<T>>) {\n const classNames = useRowClassNames(index, canSelect);\n\n return (\n <div {...props} className={compact ? classNames.compact : classNames.base}>\n {cells.map((cell, cellIndex) => (\n <Cell\n {...cell.getCellProps()}\n index={cellIndex}\n isLoading={isLoading}\n render={() => cell.render('Cell')}\n label={cell.column.Header as string}\n />\n ))}\n </div>\n );\n}\n\nexport default Row;\n", "import type { StringIndexedObject } from '@kanda-libs/ks-design-library';\nimport type { PropsWithChildren } from 'react';\nimport type { Row as RowType } from 'react-table';\nimport Row from '../Row';\n\nexport interface PagesProps<T extends StringIndexedObject> {\n page: RowType<T>[];\n prepareRow: (row: RowType<T>) => void;\n isLoading?: boolean;\n compact?: boolean;\n canSelectRow?: boolean;\n}\n\nfunction Pages<T extends StringIndexedObject>({\n page,\n prepareRow,\n isLoading = false,\n compact = false,\n canSelectRow = false,\n}: PropsWithChildren<PagesProps<T>>) {\n return (\n <>\n {page.map((row, index) => {\n prepareRow(row);\n return (\n <Row\n {...row.getRowProps()}\n index={index}\n cells={row.cells}\n isLoading={isLoading}\n compact={compact}\n canSelect={canSelectRow}\n />\n );\n })}\n </>\n );\n}\nexport default Pages;\n", "import type { TableInstance, Row } from '../../@types/index';\nimport {\n useTable,\n useGlobalFilter,\n usePagination,\n useSortBy,\n useFlexLayout,\n type IdType,\n TableOptions,\n} from 'react-table';\nimport type { TableProps } from '.';\nimport { globalFilter } from './helpers/search';\nimport type {\n PaginationProps,\n StringIndexedObject,\n} from '@kanda-libs/ks-design-library';\nimport { useEffect } from 'react';\n\nexport interface TablePropsHook<T extends StringIndexedObject<unknown>>\n extends TableInstance<T> {\n paginationProps: PaginationProps;\n}\n\nexport default function useTableProps<T extends StringIndexedObject<unknown>>({\n columns,\n data,\n pageSize = 10,\n query = '',\n}: TableProps<T>): TablePropsHook<T> {\n const table = useTable<T>(\n {\n columns,\n data,\n initialState: {\n pageSize: 10,\n pageIndex: 0,\n },\n autoResetGlobalFilter: false,\n globalFilter: (\n rows: Row<T>[],\n searchKeys: IdType<T>[],\n filterValue: string,\n ) => globalFilter(rows, searchKeys, filterValue, pageSize),\n } as unknown as TableOptions<T>,\n useGlobalFilter,\n useSortBy,\n usePagination,\n useFlexLayout,\n );\n\n const {\n gotoPage,\n pageCount,\n state: { pageIndex },\n } = table;\n\n const paginationProps: PaginationProps = {\n pageCount,\n pageIndex,\n setPage: (nextPage: number) => {\n gotoPage(nextPage);\n },\n };\n\n useEffect(() => {\n table.setGlobalFilter(query);\n }, [query]);\n\n return {\n paginationProps,\n ...table,\n };\n}\n", "import type { IdType } from 'react-table';\nimport type { Row } from '../../../@types/index';\nimport Fuse from 'fuse.js';\nimport type { StringIndexedObject } from '~/types';\n\nconst exactMatchSearch = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n filterValue: string,\n) => {\n return rows.filter((row) => {\n // Take all values from the row, and add them together in a string\n // for the purposes of searching\n const rowValues = Object.values(row.values).join(', ');\n\n return rowValues.toLowerCase().includes(filterValue.toLowerCase());\n });\n};\n\nconst excludeExactMatches = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n exactMatchRows: Row<T>[],\n) =>\n rows.filter(\n ({ id }) => exactMatchRows.filter((p) => p.id === id).length === 0,\n );\n\nconst fuzzySearch = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n filterValue: string,\n searchKeys: string[],\n numberOfRows: number,\n exactMatchRows: Row<T>[],\n): Row<T>[] => {\n const currentRows = rows.map((row) => {\n return row.values;\n });\n\n const fuse = new Fuse(currentRows, {\n keys: searchKeys.map((key) => ({\n name: key,\n // Because FuseJS allows for dot notation,\n // we need to use a function to get the value\n // as the object returned from the table is flat,\n // rather than nested\n getFn: (obj: StringIndexedObject) => obj[key],\n })),\n });\n\n const results = fuse\n .search(filterValue)\n .map(({ item }) => item)\n .slice(0, numberOfRows);\n\n const filteredResults = results\n .map((result) => rows.find((row) => row.values.cid === result.cid))\n .filter(Boolean) as Row<T>[];\n\n return excludeExactMatches(filteredResults, exactMatchRows);\n};\n\nexport const globalFilter = <T extends StringIndexedObject<unknown>>(\n rows: Row<T>[],\n searchKeys: IdType<T>[],\n filterValue: string,\n pageSize = 10,\n): Row<T>[] => {\n if (filterValue.length < 1) {\n return rows;\n }\n\n // Get the first 10 exact matches. The reason for this is that exact matching\n // should take presedence over fuzzy matching. An exact match is more useful\n // but also less expensive to compute. So there's no need to do a fuzzy search\n // if there are >= 10 exact matches.\n const exactMatches = exactMatchSearch(rows, filterValue).slice(0, pageSize);\n const currentRowsExcludingExactMatches = excludeExactMatches(\n rows,\n exactMatches,\n );\n\n const fuzzyMatches = fuzzySearch(\n currentRowsExcludingExactMatches,\n filterValue,\n searchKeys,\n pageSize - exactMatches.length,\n exactMatches,\n );\n\n const results = [...exactMatches, ...fuzzyMatches];\n\n // Return the rows in the same order as the original rows\n // to preserve sorting, which happens before fuzzy matching\n return rows\n .map(({ id }) => results.find((row) => row.id === id))\n .filter(Boolean) as Row<T>[];\n};\n", "import { Icon, Logo } from '@kanda-libs/ks-design-library';\n\ntype Widths = 80 | 96 | 120 | 160;\n\ninterface SplashScreenProps {\n logo?: boolean;\n icon: string;\n iconClassName?: string;\n iconSize?: number;\n title: string;\n subText: string | JSX.Element;\n boldSubText?: string;\n cta?: JSX.Element;\n append?: JSX.Element;\n width?: Widths;\n contentWidth?: Widths;\n content?: JSX.Element;\n}\n\nconst WIDTHS = {\n 80: 'max-w-80',\n 96: 'max-w-96',\n 120: 'max-w-120',\n 160: 'max-w160',\n};\n\nconst SplashScreen = ({\n logo,\n icon,\n iconClassName,\n iconSize,\n title,\n subText,\n boldSubText,\n cta,\n append,\n width = 80,\n contentWidth = 80,\n content,\n}: SplashScreenProps) => (\n <div\n className={`flex flex-col m-auto w-full ${WIDTHS[width]} text-center items-center justify-center`}\n >\n {logo && (\n <div className=\"mb-10\">\n <Logo height={32} />\n </div>\n )}\n {!logo && (\n <Icon\n icon={icon}\n size={iconSize}\n className={`mx-auto mb-8 ${iconClassName}`}\n />\n )}\n <h1 className=\"text-24-28-em mb-4\">{title}</h1>\n <div className={`flex flex-col w-full ${WIDTHS[contentWidth]} mx-auto`}>\n {content && <div className=\"mt-4 mb-8\">{content}</div>}\n <span className=\"text-16-24 text-neutral-600\">\n {subText}\n {boldSubText && <b> {boldSubText}</b>}\n </span>\n {cta && <div className=\"mt-10\">{cta}</div>}\n {append}\n </div>\n </div>\n);\n\nSplashScreen.defaultProps = {\n logo: false,\n iconClassName: '',\n iconSize: 104,\n cta: null,\n append: null,\n boldSubText: null,\n content: null,\n width: 96,\n contentWidth: 96,\n};\n\nexport default SplashScreen;\n"],
5
+ "mappings": "AACA,OACE,cAAAA,OAEK,gCCJP,OAAS,kBAAAC,OAAsB,gCCA/B,OAAS,gBAAAC,MAAoB,gCAKd,SAARC,EACLC,EAC8B,CAC9B,GAAI,CAACA,EAAO,MAAO,CAAC,EAEpB,IAAMC,EAAYH,EAAa,EAQ/B,MALuB,CACrB,GAAGE,EACH,MAAOC,EAAYD,GAAA,YAAAA,EAAO,MAAQ,MACpC,CAGF,CClBA,OAAS,QAAAE,MAAY,gCCDd,IAAMC,EACX,6IAEWC,EAAa,CACxB,KAAM,eACN,OAAQ,cACR,KAAM,GACN,UAAW,cACb,EAEaC,EAAgB,CAC3B,MAAO,mBACT,EAEaC,EAAsB,CACjC,UAAW,CACT,KAAM,gCACN,QAAS,YACX,EACA,KAAM,CACJ,KAAM,qCACN,QAAS,SACX,CACF,EDbI,OAEE,OAAAC,GAFF,QAAAC,OAAA,oBAFJ,IAAMC,EAAyC,SAAU,CAAE,MAAAC,KAAUC,CAAM,EAAG,CAC5E,OACEH,GAAC,UAAO,UAAWI,EAAqB,GAAGD,EACxC,UAAAD,EACDH,GAACM,EAAA,CAAM,GAAGC,EAAY,GACxB,CAEJ,EAEOC,EAAQN,EEhBf,OAAOO,MAAU,OAWF,SAARC,EAAiCC,EAAiC,CACvE,IAAMC,EAAiBD,IAAU,EAAIE,EAAgB,CAAC,EAatD,MAAO,CACL,WAZiB,CACjB,UAAWC,EACTC,EAAoB,UAAU,KAC9BJ,IAAU,EAAII,EAAoB,UAAU,QAAU,EACxD,EACA,KAAMD,EACJC,EAAoB,KAAK,KACzBJ,IAAU,EAAI,GAAKI,EAAoB,KAAK,OAC9C,CACF,EAIE,eAAAH,CACF,CACF,CCdM,cAAAI,MAAA,oBARN,IAAMC,GAA2C,SAAU,CACzD,MAAAC,EACA,SAAAC,CACF,EAAG,CACD,GAAM,CAAE,WAAAC,EAAY,eAAAC,CAAe,EAAIC,EAAgBJ,CAAK,EAE5D,OACEF,EAAC,OAAI,UAAWI,EAAW,UAAW,MAAOC,EAC3C,SAAAL,EAAC,OAAI,UAAWI,EAAW,KAAO,SAAAD,EAAS,EAC7C,CAEJ,EAEOI,EAAQN,GClBf,IAAOO,EAAQ,CACb,OAAAC,EACA,QAAAC,CACF,ECNA,OAAOC,MAAU,OCAV,IAAMC,EAAc,CACzB,KAAM,eACN,QAAS,CACP,KAAM,sBACN,OAAQ,MACV,EACA,QAAS,CACP,QAAS,kBACT,QAAS,MACX,CACF,EDCe,SAARC,EACLC,EACAC,EACuB,CAavB,MAAO,CACL,WAbiB,CACjB,GAAGC,EACH,QAASC,EACPD,EAAY,QAAQ,KACpBF,IAAU,EAAI,GAAKE,EAAY,QAAQ,MACzC,EACA,QAASC,EACPD,EAAY,QAAQ,QACpBD,EAAiB,GAAKC,EAAY,QAAQ,OAC5C,CACF,CAIA,CACF,CPGY,cAAAE,MAAA,oBAnBZ,IAAMC,GAAqD,SAAU,CACnE,MAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,MAAAC,KACGC,CACL,EAAG,CACD,GAAM,CAAE,WAAAC,CAAW,EAAIC,EAAqBN,EAAOE,CAAc,EAE3D,CAAE,MAAOK,KAAqBC,CAAe,EAAIJ,EACjDK,EAAQC,EAA4BH,CAAgB,EAE1D,OACET,EAAC,OAAK,GAAGU,EAAgB,MAAOC,EAAO,UAAWJ,EAAW,KAC3D,SAAAP,EAACa,GAAA,CACC,UAAWV,EACX,iBAAkBI,EAAW,QAC7B,aACEP,EAACc,EAAa,QAAb,CAAqB,MAAOZ,EAC3B,SAAAF,EAACc,EAAa,OAAb,CAAoB,MAAOT,EAAO,EACrC,EAEJ,EACF,CAEJ,EAEOU,EAAQd,GSzCR,IAAMe,EAAc,CACzB,KAAM,0EACR,ECUe,SAARC,EACLC,EACAC,EACyB,CACzB,GAAM,CAAE,QAAAC,EAAS,oBAAAC,CAAoB,EAAIH,EACnCI,EAAmBD,EAAoB,CAAC,CAAC,EAEzCE,EAAeJ,EAAQ,OAAQK,GAAWA,EAAO,SAAS,EAAE,OAElE,MAAO,CACL,QAAAJ,EACA,iBAAAE,EACA,aAAAC,CACF,CACF,CCEQ,cAAAE,MAAA,oBAbR,SAASC,GAA8B,CACrC,YAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAA2C,CACzC,GAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAQ,EAAIC,EACpCL,EACAC,CACF,EAEA,OACEH,EAAC,OAAK,GAAGK,EAAkB,UAAWG,EAAY,KAC/C,SAAAF,EAAQ,IAAI,CAACG,EAAQC,IACpBV,EAACW,EAAA,CACC,MAAOD,EACP,MAAOD,EAAO,OAAO,QAAQ,EAC7B,UAAWL,EACV,GAAGK,EAAO,eAAeA,EAAO,qBAAqB,CAAC,EACzD,CACD,EACH,CAEJ,CAEA,IAAOG,EAAQX,GCrCf,OAAS,kBAAAY,GAAgB,QAAAC,OAAY,gCCFrC,OAAOC,OAAU,OCAV,IAAMC,EAAc,CACzB,UAAW,qBACX,OACE,mGACF,cAAe,mCACf,YAAa,sDACb,KAAM,CACJ,KAAM,iDACN,QAAS,WACT,QAAS,SACX,CACF,EDDe,SAARC,EACLC,EACAC,EACAC,EACoB,CACpB,MAAO,CACL,KAAMC,GACJF,EAAUG,EAAY,KAAK,QAAUA,EAAY,KAAK,KACtDJ,IAAU,EAAI,GAAKI,EAAY,KAAK,OACtC,EACA,UAAWA,EAAY,UACvB,OAAQF,EAAYE,EAAY,cAAgBA,EAAY,OAC5D,YAAaA,EAAY,WAC3B,CACF,CDUc,mBAAAC,GACE,OAAAC,EADF,QAAAC,OAAA,oBApBd,IAAMC,GAAqC,SAAU,CACnD,OAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,MAAAC,KACGC,CACL,EAAG,CACD,IAAMC,EAAaC,EAAkBN,EAAOC,EAASC,CAAS,EAExD,CAAE,MAAOK,KAAqBC,CAAe,EAAIJ,EACjDK,EAAQC,EAA4BH,CAAgB,EAE1D,OACEX,EAAC,OAAK,GAAGY,EAAgB,MAAOC,EAAO,UAAWJ,EAAW,KAC3D,SAAAT,EAAC,OAAI,UAAWS,EAAW,UACzB,SAAAT,EAAC,OAAI,UAAWS,EAAW,OACzB,SAAAT,EAACe,GAAA,CACC,UAAWT,EACX,aACEL,GAAAF,GAAA,CACE,UAAAC,EAACgB,GAAA,CAAK,KAAM,GAAGT,KAAU,UAAWE,EAAW,YAAa,EAC3DN,EAAO,GACV,EAEJ,EACF,EACF,EACF,CAEJ,EAEOc,EAAQf,GG9Cf,OAAS,cAAAgB,OAAkB,gCCApB,IAAMC,EAAc,CACzB,KAAM,qDACN,QAAS,eACT,OAAQ,8BACR,MAAO,2CACP,OAAQ,0BACV,EDKe,SAARC,EACLC,EACAC,EACmB,CAMnB,OALmBC,GAAWC,EAAa,CACzC,KAAM,CAAC,QAASH,IAAU,EAAI,GAAK,UAAWC,EAAY,SAAW,EAAE,EACvE,OAAQ,CAAC,SAAS,CACpB,CAAC,CAGH,CEKQ,cAAAG,MAAA,oBAbR,SAASC,GAAsB,CAC7B,MAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,UAAAC,EAAY,MACTC,CACL,EAAmC,CACjC,IAAMC,EAAaC,EAAiBN,EAAOG,CAAS,EAEpD,OACEN,EAAC,OAAK,GAAGO,EAAO,UAAWH,EAAUI,EAAW,QAAUA,EAAW,KAClE,SAAAN,EAAM,IAAI,CAACQ,EAAMC,IAChBX,EAACY,EAAA,CACE,GAAGF,EAAK,aAAa,EACtB,MAAOC,EACP,UAAWN,EACX,OAAQ,IAAMK,EAAK,OAAO,MAAM,EAChC,MAAOA,EAAK,OAAO,OACrB,CACD,EACH,CAEJ,CAEA,IAAOG,EAAQZ,GCjBX,mBAAAa,GAIM,OAAAC,MAJN,oBARJ,SAASC,GAAqC,CAC5C,KAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EAAU,GACV,aAAAC,EAAe,EACjB,EAAqC,CACnC,OACEN,EAAAD,GAAA,CACG,SAAAG,EAAK,IAAI,CAACK,EAAKC,KACdL,EAAWI,CAAG,EAEZP,EAACS,EAAA,CACE,GAAGF,EAAI,YAAY,EACpB,MAAOC,EACP,MAAOD,EAAI,MACX,UAAWH,EACX,QAASC,EACT,UAAWC,EACb,EAEH,EACH,CAEJ,CACA,IAAOI,EAAQT,GCrCf,OACE,YAAAU,GACA,mBAAAC,GACA,iBAAAC,GACA,aAAAC,GACA,iBAAAC,OAGK,cCPP,OAAOC,OAAU,UAGjB,IAAMC,GAAmB,CACvBC,EACAC,IAEOD,EAAK,OAAQE,GAGA,OAAO,OAAOA,EAAI,MAAM,EAAE,KAAK,IAAI,EAEpC,YAAY,EAAE,SAASD,EAAY,YAAY,CAAC,CAClE,EAGGE,EAAsB,CAC1BH,EACAI,IAEAJ,EAAK,OACH,CAAC,CAAE,GAAAK,CAAG,IAAMD,EAAe,OAAQE,GAAMA,EAAE,KAAOD,CAAE,EAAE,SAAW,CACnE,EAEIE,GAAc,CAClBP,EACAC,EACAO,EACAC,EACAL,IACa,CACb,IAAMM,EAAcV,EAAK,IAAKE,GACrBA,EAAI,MACZ,EAkBKS,EAhBO,IAAIb,GAAKY,EAAa,CACjC,KAAMF,EAAW,IAAKI,IAAS,CAC7B,KAAMA,EAKN,MAAQC,GAA6BA,EAAID,EAC3C,EAAE,CACJ,CAAC,EAGE,OAAOX,CAAW,EAClB,IAAI,CAAC,CAAE,KAAAa,CAAK,IAAMA,CAAI,EACtB,MAAM,EAAGL,CAAY,EAGrB,IAAKM,GAAWf,EAAK,KAAME,GAAQA,EAAI,OAAO,MAAQa,EAAO,GAAG,CAAC,EACjE,OAAO,OAAO,EAEjB,OAAOZ,EAAoBQ,EAAiBP,CAAc,CAC5D,EAEaY,EAAe,CAC1BhB,EACAQ,EACAP,EACAgB,EAAW,KACE,CACb,GAAIhB,EAAY,OAAS,EACvB,OAAOD,EAOT,IAAMkB,EAAenB,GAAiBC,EAAMC,CAAW,EAAE,MAAM,EAAGgB,CAAQ,EACpEE,EAAmChB,EACvCH,EACAkB,CACF,EAEME,EAAeb,GACnBY,EACAlB,EACAO,EACAS,EAAWC,EAAa,OACxBA,CACF,EAEMG,EAAU,CAAC,GAAGH,EAAc,GAAGE,CAAY,EAIjD,OAAOpB,EACJ,IAAI,CAAC,CAAE,GAAAK,CAAG,IAAMgB,EAAQ,KAAMnB,GAAQA,EAAI,KAAOG,CAAE,CAAC,EACpD,OAAO,OAAO,CACnB,ED/EA,OAAS,aAAAiB,OAAiB,QAOX,SAARC,EAAuE,CAC5E,QAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,EACV,EAAqC,CACnC,IAAMC,EAAQC,GACZ,CACE,QAAAL,EACA,KAAAC,EACA,aAAc,CACZ,SAAU,GACV,UAAW,CACb,EACA,sBAAuB,GACvB,aAAc,CACZK,EACAC,EACAC,IACGC,EAAaH,EAAMC,EAAYC,EAAaN,CAAQ,CAC3D,EACAQ,GACAC,GACAC,GACAC,EACF,EAEM,CACJ,SAAAC,EACA,UAAAC,EACA,MAAO,CAAE,UAAAC,CAAU,CACrB,EAAIZ,EAEEa,EAAmC,CACvC,UAAAF,EACA,UAAAC,EACA,QAAUE,GAAqB,CAC7BJ,EAASI,CAAQ,CACnB,CACF,EAEA,OAAApB,GAAU,IAAM,CACdM,EAAM,gBAAgBD,CAAK,CAC7B,EAAG,CAACA,CAAK,CAAC,EAEH,CACL,gBAAAc,EACA,GAAGb,CACL,CACF,CpB/BI,mBAAAe,GAIQ,OAAAC,EAHN,QAAAC,MADF,oBAhBJ,SAASC,GAA8C,CACrD,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,aAAAC,EAAe,MACZC,CACL,EAAqC,CACnC,GAAM,CACJ,KAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,aAAAC,EACA,gBAAAC,CACF,EAAIC,EAAcP,CAAK,EAEvB,OACEL,EAAAF,GAAA,CACE,UAAAE,EAAC,OAAK,GAAGS,EAAc,EAAG,UAAU,SAClC,UAAAV,EAAC,OACE,SAAAW,EAAa,IAAKG,GACjBd,EAACe,EAAA,CACC,YAAaD,EACb,QAASL,EACT,UAAWL,EACb,CACD,EACH,EACAJ,EAACgB,EAAA,CACC,KAAMT,EACN,WAAYC,EACZ,UAAWJ,EACX,QAASD,EACT,aAAcE,EAChB,GACF,EACCO,EAAgB,UAAY,GAC3BZ,EAAC,OAAI,UAAU,YACb,SAAAA,EAACiB,GAAA,CAAY,GAAGL,EAAiB,EACnC,GAEJ,CAEJ,CAEA,IAAOM,GAAQhB,GsBrEf,OAAS,QAAAiB,GAAM,QAAAC,OAAY,gCA6CnB,cAAAC,EAegB,QAAAC,MAfhB,oBA1BR,IAAMC,EAAS,CACb,GAAI,WACJ,GAAI,WACJ,IAAK,YACL,IAAK,UACP,EAEMC,EAAe,CAAC,CACpB,KAAAC,EACA,KAAAC,EACA,cAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,IAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EAAe,GACf,QAAAC,CACF,IACEd,EAAC,OACC,UAAW,+BAA+BC,EAAOW,6CAEhD,UAAAT,GACCJ,EAAC,OAAI,UAAU,QACb,SAAAA,EAACD,GAAA,CAAK,OAAQ,GAAI,EACpB,EAED,CAACK,GACAJ,EAACF,GAAA,CACC,KAAMO,EACN,KAAME,EACN,UAAW,gBAAgBD,IAC7B,EAEFN,EAAC,MAAG,UAAU,qBAAsB,SAAAQ,EAAM,EAC1CP,EAAC,OAAI,UAAW,wBAAwBC,EAAOY,aAC5C,UAAAC,GAAWf,EAAC,OAAI,UAAU,YAAa,SAAAe,EAAQ,EAChDd,EAAC,QAAK,UAAU,8BACb,UAAAQ,EACAC,GAAeT,EAAC,KAAE,cAAES,GAAY,GACnC,EACCC,GAAOX,EAAC,OAAI,UAAU,QAAS,SAAAW,EAAI,EACnCC,GACH,GACF,EAGFT,EAAa,aAAe,CAC1B,KAAM,GACN,cAAe,GACf,SAAU,IACV,IAAK,KACL,OAAQ,KACR,YAAa,KACb,QAAS,KACT,MAAO,GACP,aAAc,EAChB,EAEA,IAAOa,GAAQb",
6
+ "names": ["Pagination", "SkeletonLoader", "useIsDesktop", "useMobileFullWidthCellStyle", "style", "isDesktop", "Icon", "BUTTON_CLASS_NAMES", "ICON_PROPS", "WRAPPER_STYLE", "WRAPPER_CLASS_NAMES", "jsx", "jsxs", "Button", "label", "props", "BUTTON_CLASS_NAMES", "Icon", "ICON_PROPS", "Button_default", "clsx", "useWrapperProps", "index", "containerStyle", "WRAPPER_STYLE", "clsx", "WRAPPER_CLASS_NAMES", "jsx", "Wrapper", "index", "children", "classNames", "containerStyle", "useWrapperProps", "Wrapper_default", "HeaderButton_default", "Button_default", "Wrapper_default", "clsx", "CLASS_NAMES", "useHeaderColumnProps", "index", "popoverButtons", "CLASS_NAMES", "clsx", "jsx", "HeaderColumn", "index", "isLoading", "popoverButtons", "label", "props", "classNames", "useHeaderColumnProps", "unformattedStyle", "formattedProps", "style", "useMobileFullWidthCellStyle", "SkeletonLoader", "HeaderButton_default", "HeaderColumn_default", "CLASS_NAMES", "useHeaderGroupProps", "headerGroup", "columns", "headers", "getHeaderGroupProps", "headerGroupProps", "totalVisible", "column", "jsx", "HeaderGroup", "headerGroup", "columns", "isLoading", "headerGroupProps", "headers", "useHeaderGroupProps", "CLASS_NAMES", "column", "index", "HeaderColumn_default", "HeaderGroup_default", "SkeletonLoader", "Text", "clsx", "CLASS_NAMES", "useCellClassNames", "index", "compact", "isLoading", "clsx", "CLASS_NAMES", "Fragment", "jsx", "jsxs", "Cell", "render", "index", "compact", "isLoading", "label", "props", "classNames", "useCellClassNames", "unformattedStyle", "formattedProps", "style", "useMobileFullWidthCellStyle", "SkeletonLoader", "Text", "Cell_default", "useClasses", "CLASS_NAMES", "useRowClassNames", "index", "canSelect", "useClasses", "CLASS_NAMES", "jsx", "Row", "cells", "index", "compact", "isLoading", "canSelect", "props", "classNames", "useRowClassNames", "cell", "cellIndex", "Cell_default", "Row_default", "Fragment", "jsx", "Pages", "page", "prepareRow", "isLoading", "compact", "canSelectRow", "row", "index", "Row_default", "Pages_default", "useTable", "useGlobalFilter", "usePagination", "useSortBy", "useFlexLayout", "Fuse", "exactMatchSearch", "rows", "filterValue", "row", "excludeExactMatches", "exactMatchRows", "id", "p", "fuzzySearch", "searchKeys", "numberOfRows", "currentRows", "filteredResults", "key", "obj", "item", "result", "globalFilter", "pageSize", "exactMatches", "currentRowsExcludingExactMatches", "fuzzyMatches", "results", "useEffect", "useTableProps", "columns", "data", "pageSize", "query", "table", "useTable", "rows", "searchKeys", "filterValue", "globalFilter", "useGlobalFilter", "useSortBy", "usePagination", "useFlexLayout", "gotoPage", "pageCount", "pageIndex", "paginationProps", "nextPage", "Fragment", "jsx", "jsxs", "Table", "compact", "isLoading", "canSelectRow", "props", "page", "prepareRow", "columns", "getTableProps", "headerGroups", "paginationProps", "useTableProps", "headerGroup", "HeaderGroup_default", "Pages_default", "Pagination", "Table_default", "Icon", "Logo", "jsx", "jsxs", "WIDTHS", "SplashScreen", "logo", "icon", "iconClassName", "iconSize", "title", "subText", "boldSubText", "cta", "append", "width", "contentWidth", "content", "SplashScreen_default"]
7
7
  }
package/dist/library.css CHANGED
@@ -994,11 +994,40 @@ video {
994
994
  z-index: 20;
995
995
  }
996
996
 
997
+ .m-auto {
998
+ margin: auto;
999
+ }
1000
+
1001
+ .mx-auto {
1002
+ margin-left: auto;
1003
+ margin-right: auto;
1004
+ }
1005
+
997
1006
  .my-auto {
998
1007
  margin-top: auto;
999
1008
  margin-bottom: auto;
1000
1009
  }
1001
1010
 
1011
+ .mb-10 {
1012
+ margin-bottom: 40px;
1013
+ }
1014
+
1015
+ .mb-8 {
1016
+ margin-bottom: 32px;
1017
+ }
1018
+
1019
+ .mb-4 {
1020
+ margin-bottom: 16px;
1021
+ }
1022
+
1023
+ .mt-4 {
1024
+ margin-top: 16px;
1025
+ }
1026
+
1027
+ .mt-10 {
1028
+ margin-top: 40px;
1029
+ }
1030
+
1002
1031
  .mr-8 {
1003
1032
  margin-right: 32px;
1004
1033
  }
@@ -1055,6 +1084,18 @@ video {
1055
1084
  width: 100%;
1056
1085
  }
1057
1086
 
1087
+ .max-w-80 {
1088
+ max-width: 320px;
1089
+ }
1090
+
1091
+ .max-w-96 {
1092
+ max-width: 384px;
1093
+ }
1094
+
1095
+ .max-w-120 {
1096
+ max-width: 480px;
1097
+ }
1098
+
1058
1099
  .transform {
1059
1100
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1060
1101
  }
@@ -1067,6 +1108,14 @@ video {
1067
1108
  flex-direction: column;
1068
1109
  }
1069
1110
 
1111
+ .items-center {
1112
+ align-items: center;
1113
+ }
1114
+
1115
+ .justify-center {
1116
+ justify-content: center;
1117
+ }
1118
+
1070
1119
  .overflow-hidden {
1071
1120
  overflow: hidden;
1072
1121
  }
@@ -1138,6 +1187,10 @@ video {
1138
1187
  padding-bottom: 4px;
1139
1188
  }
1140
1189
 
1190
+ .text-center {
1191
+ text-align: center;
1192
+ }
1193
+
1141
1194
  .uppercase {
1142
1195
  text-transform: uppercase;
1143
1196
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kanda-libs/ks-design-library-new",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "Kanda design components library",
5
5
  "main": "dist/index.esm.mjs",
6
6
  "module": "dist/index.esm.mjs",
@@ -40,7 +40,7 @@
40
40
  "@types/lodash.get": "^4.4.7",
41
41
  "@types/lodash.set": "^4.3.7",
42
42
  "@types/node": "^18.11.9",
43
- "@types/react": "17.0.2",
43
+ "@types/react": "18.0.2",
44
44
  "@types/react-dom": "17.0.2",
45
45
  "@types/react-timeago": "^4.1.3",
46
46
  "@typescript-eslint/eslint-plugin": "^5.14.0",
@@ -0,0 +1,81 @@
1
+ import { Icon, Logo } from '@kanda-libs/ks-design-library';
2
+
3
+ type Widths = 80 | 96 | 120 | 160;
4
+
5
+ interface SplashScreenProps {
6
+ logo?: boolean;
7
+ icon: string;
8
+ iconClassName?: string;
9
+ iconSize?: number;
10
+ title: string;
11
+ subText: string | JSX.Element;
12
+ boldSubText?: string;
13
+ cta?: JSX.Element;
14
+ append?: JSX.Element;
15
+ width?: Widths;
16
+ contentWidth?: Widths;
17
+ content?: JSX.Element;
18
+ }
19
+
20
+ const WIDTHS = {
21
+ 80: 'max-w-80',
22
+ 96: 'max-w-96',
23
+ 120: 'max-w-120',
24
+ 160: 'max-w160',
25
+ };
26
+
27
+ const SplashScreen = ({
28
+ logo,
29
+ icon,
30
+ iconClassName,
31
+ iconSize,
32
+ title,
33
+ subText,
34
+ boldSubText,
35
+ cta,
36
+ append,
37
+ width = 80,
38
+ contentWidth = 80,
39
+ content,
40
+ }: SplashScreenProps) => (
41
+ <div
42
+ className={`flex flex-col m-auto w-full ${WIDTHS[width]} text-center items-center justify-center`}
43
+ >
44
+ {logo && (
45
+ <div className="mb-10">
46
+ <Logo height={32} />
47
+ </div>
48
+ )}
49
+ {!logo && (
50
+ <Icon
51
+ icon={icon}
52
+ size={iconSize}
53
+ className={`mx-auto mb-8 ${iconClassName}`}
54
+ />
55
+ )}
56
+ <h1 className="text-24-28-em mb-4">{title}</h1>
57
+ <div className={`flex flex-col w-full ${WIDTHS[contentWidth]} mx-auto`}>
58
+ {content && <div className="mt-4 mb-8">{content}</div>}
59
+ <span className="text-16-24 text-neutral-600">
60
+ {subText}
61
+ {boldSubText && <b> {boldSubText}</b>}
62
+ </span>
63
+ {cta && <div className="mt-10">{cta}</div>}
64
+ {append}
65
+ </div>
66
+ </div>
67
+ );
68
+
69
+ SplashScreen.defaultProps = {
70
+ logo: false,
71
+ iconClassName: '',
72
+ iconSize: 104,
73
+ cta: null,
74
+ append: null,
75
+ boldSubText: null,
76
+ content: null,
77
+ width: 96,
78
+ contentWidth: 96,
79
+ };
80
+
81
+ export default SplashScreen;
@@ -1,8 +1,8 @@
1
1
  import type { FunctionComponent, ReactNode } from 'react';
2
2
  import type { TableCellProps } from 'react-table';
3
3
  import { SkeletonLoader, Text } from '@kanda-libs/ks-design-library';
4
- import useCellClassNames from './useCellClassNames';
5
4
  import useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';
5
+ import useCellClassNames from './useCellClassNames';
6
6
 
7
7
  export interface CellProps extends TableCellProps {
8
8
  index: number;
@@ -8,6 +8,7 @@ export interface PagesProps<T extends StringIndexedObject> {
8
8
  prepareRow: (row: RowType<T>) => void;
9
9
  isLoading?: boolean;
10
10
  compact?: boolean;
11
+ canSelectRow?: boolean;
11
12
  }
12
13
 
13
14
  function Pages<T extends StringIndexedObject>({
@@ -15,6 +16,7 @@ function Pages<T extends StringIndexedObject>({
15
16
  prepareRow,
16
17
  isLoading = false,
17
18
  compact = false,
19
+ canSelectRow = false,
18
20
  }: PropsWithChildren<PagesProps<T>>) {
19
21
  return (
20
22
  <>
@@ -27,6 +29,7 @@ function Pages<T extends StringIndexedObject>({
27
29
  cells={row.cells}
28
30
  isLoading={isLoading}
29
31
  compact={compact}
32
+ canSelect={canSelectRow}
30
33
  />
31
34
  );
32
35
  })}
@@ -8,6 +8,7 @@ export interface RowProps<T extends Object> extends TableRowProps {
8
8
  index: number;
9
9
  compact?: boolean;
10
10
  isLoading?: boolean;
11
+ canSelect?: boolean;
11
12
  }
12
13
 
13
14
  function Row<T extends Object>({
@@ -15,9 +16,10 @@ function Row<T extends Object>({
15
16
  index,
16
17
  compact = false,
17
18
  isLoading = false,
19
+ canSelect = false,
18
20
  ...props
19
21
  }: PropsWithChildren<RowProps<T>>) {
20
- const classNames = useRowClassNames(index);
22
+ const classNames = useRowClassNames(index, canSelect);
21
23
 
22
24
  return (
23
25
  <div {...props} className={compact ? classNames.compact : classNames.base}>
@@ -9,9 +9,12 @@ export interface RowClassNamesHook {
9
9
  button: string;
10
10
  }
11
11
 
12
- export default function useRowClassNames(index: number): RowClassNamesHook {
12
+ export default function useRowClassNames(
13
+ index: number,
14
+ canSelect: boolean,
15
+ ): RowClassNamesHook {
13
16
  const classNames = useClasses(CLASS_NAMES, {
14
- base: ['.base', index === 9 ? '' : '.border', '.hover'],
17
+ base: ['.base', index === 9 ? '' : '.border', canSelect ? '.hover' : ''],
15
18
  button: ['.button'],
16
19
  });
17
20
 
@@ -15,6 +15,7 @@ export interface TableProps<T extends StringIndexedObject<unknown>> {
15
15
  pageSize?: number;
16
16
  compact?: boolean;
17
17
  isLoading?: boolean;
18
+ canSelectRow?: boolean;
18
19
  query?: string;
19
20
  }
20
21
 
@@ -25,6 +26,7 @@ export type TableFunctionComponent<
25
26
  function Table<T extends StringIndexedObject<unknown>>({
26
27
  compact = false,
27
28
  isLoading = false,
29
+ canSelectRow = false,
28
30
  ...props
29
31
  }: PropsWithChildren<TableProps<T>>) {
30
32
  const {
@@ -53,6 +55,7 @@ function Table<T extends StringIndexedObject<unknown>>({
53
55
  prepareRow={prepareRow}
54
56
  isLoading={isLoading}
55
57
  compact={compact}
58
+ canSelectRow={canSelectRow}
56
59
  />
57
60
  </div>
58
61
  {paginationProps.pageCount > 1 && (
@@ -1 +1,2 @@
1
1
  export { default as Table } from './Table';
2
+ export { default as SplashScreen } from './SplashScreen';
@@ -994,11 +994,40 @@ video {
994
994
  z-index: 20;
995
995
  }
996
996
 
997
+ .m-auto {
998
+ margin: auto;
999
+ }
1000
+
1001
+ .mx-auto {
1002
+ margin-left: auto;
1003
+ margin-right: auto;
1004
+ }
1005
+
997
1006
  .my-auto {
998
1007
  margin-top: auto;
999
1008
  margin-bottom: auto;
1000
1009
  }
1001
1010
 
1011
+ .mb-10 {
1012
+ margin-bottom: 40px;
1013
+ }
1014
+
1015
+ .mb-8 {
1016
+ margin-bottom: 32px;
1017
+ }
1018
+
1019
+ .mb-4 {
1020
+ margin-bottom: 16px;
1021
+ }
1022
+
1023
+ .mt-4 {
1024
+ margin-top: 16px;
1025
+ }
1026
+
1027
+ .mt-10 {
1028
+ margin-top: 40px;
1029
+ }
1030
+
1002
1031
  .mr-8 {
1003
1032
  margin-right: 32px;
1004
1033
  }
@@ -1055,6 +1084,18 @@ video {
1055
1084
  width: 100%;
1056
1085
  }
1057
1086
 
1087
+ .max-w-80 {
1088
+ max-width: 320px;
1089
+ }
1090
+
1091
+ .max-w-96 {
1092
+ max-width: 384px;
1093
+ }
1094
+
1095
+ .max-w-120 {
1096
+ max-width: 480px;
1097
+ }
1098
+
1058
1099
  .transform {
1059
1100
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1060
1101
  }
@@ -1067,6 +1108,14 @@ video {
1067
1108
  flex-direction: column;
1068
1109
  }
1069
1110
 
1111
+ .items-center {
1112
+ align-items: center;
1113
+ }
1114
+
1115
+ .justify-center {
1116
+ justify-content: center;
1117
+ }
1118
+
1070
1119
  .overflow-hidden {
1071
1120
  overflow: hidden;
1072
1121
  }
@@ -1138,6 +1187,10 @@ video {
1138
1187
  padding-bottom: 4px;
1139
1188
  }
1140
1189
 
1190
+ .text-center {
1191
+ text-align: center;
1192
+ }
1193
+
1141
1194
  .uppercase {
1142
1195
  text-transform: uppercase;
1143
1196
  }