@kanda-libs/ks-design-library-new 0.0.1

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@kanda-libs/ks-design-library-new",
+  "version": "0.0.1",
+  "description": "Kanda design components library",
+  "main": "dist/index.esm.mjs",
+  "module": "dist/index.esm.mjs",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "format": "esm",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "prebuild": "yarn clean",
+    "build": "yarn build:style && yarn build:esbuild",
+    "watch": "yarn && yarn clean && tsc && yarn build:style && DEV_WATCH=true yarn build:esbuild && yalc publish",
+    "app:dev": "yarn --cwd ./app && yarn --cwd ./app yalc:link && yarn --cwd ./app dev --force --host",
+    "build:types": "./node_modules/.bin/dts-bundle-generator --external-inlines=./generated -o dist/index.d.ts src/index.ts",
+    "build:style": "npx tailwindcss --postcss ./src/theme/postcss/tailwind.postcss.config.js -i ./src/styles/tailwind.css -c ./tailwind.config.js -o ./src/styles/library.css",
+    "watch:style": "npx tailwindcss --postcss ./src/theme/postcss/tailwind.postcss.config.js -i ./src/styles/tailwind.css -c ./tailwind.config.js -o ./src/styles/library.css --watch",
+    "build:dev": "APP_ENV=dev yarn build",
+    "build:esbuild": "yarn clean && yarn build:style && node build.ts && yarn build:types",
+    "lint": "eslint '**/*.{js,ts,tsx}'",
+    "type": "tsc --noEmit",
+    "bundlesize": "yarn build:style && yarn build:modern && bundlesize",
+    "start:app": "yarn clean && tsc && yarn build:style && yarn build:esm && yarn link && yarn --cwd node_modules/react link && yarn --cwd ./app link react ks-design-library && yarn --cwd ./app && yarn --cwd ./app run dev",
+    "test:app": "yarn && yarn clean && yarn build && yalc publish && yarn --cwd ./app yalc:link && yarn --cwd ./app && yarn --cwd ./app dev --force"
+  },
+  "author": "rob@kanda.co.uk",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/runtime": "^7.21.0",
+    "@kanda-libs/ks-tailwind-config": "0.2.11",
+    "@types/file-saver": "^2.0.5",
+    "@types/lodash.get": "^4.4.7",
+    "@types/lodash.set": "^4.3.7",
+    "@types/node": "^18.11.9",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "@types/react-timeago": "^4.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "autoprefixer": "^10.4.13",
+    "bundlesize": "^0.18.1",
+    "clsx": "^1.1.1",
+    "dts-bundle-generator": "^7.1.0",
+    "esbuild": "^0.15.15",
+    "esbuild-copy-static-files": "^0.1.0",
+    "esbuild-node-externals": "^1.5.0",
+    "esbuild-plugin-svgr": "^1.0.1",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "lint-staged": "^12.3.5",
+    "postcss": "^8.4.20",
+    "postcss-100vh-fix": "^1.0.2",
+    "prettier": "^2.5.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-loading-skeleton": "^3.1.0",
+    "rimraf": "^3.0.2",
+    "tailwindcss": "^3.2.4",
+    "tailwindcss-invalid-variant-plugin": "^1.0.3",
+    "tsd": "^0.19.1",
+    "typescript": "^4.6.3"
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/index.cjs.js",
+      "maxSize": "10000 kB"
+    }
+  ],
+  "peerDependencies": {
+    "clsx": "^1.1.1",
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-loading-skeleton": "^3.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kanda-co/ks-design-library.git"
+  },
+  "keywords": [
+    "design"
+  ],
+  "bugs": {
+    "url": "https://github.com/kanda-co/ks-design-library/issues"
+  },
+  "resolutions": {
+    "@types/react": "17.0.2"
+  },
+  "homepage": "https://github.com/kanda-co/ks-design-library#readme",
+  "dependencies": {
+    "@kanda-libs/ks-amplitude-provider": "^0.0.7",
+    "@kanda-libs/ks-design-library": "^0.2.60",
+    "@types/react-table": "^7.7.14",
+    "file-saver": "^2.0.5",
+    "fuse.js": "^6.6.2",
+    "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
+    "react-image": "^4.0.3",
+    "react-loading-skeleton": "^3.1.0",
+    "react-number-format": "^4.6.4",
+    "react-table": "^7.7.14",
+    "react-teleporter": "^3.0.2",
+    "react-toastify": "^9.0.8",
+    "use-debounce": "^8.0.4"
+  }
+}

package/src/@types/assets/index.d.ts

@@ -0,0 +1,26 @@
+declare module '*.svg' {
+  import { type FunctionComponent } from 'react';
+  export const ReactComponent: FunctionComponent<{
+    className?: string;
+    children?: JSX.Element | JSX.Element[];
+    width?: number;
+    height?: number;
+  }>;
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.json' {
+  const content: string;
+  export default content;
+}

package/src/@types/index.d.ts

@@ -0,0 +1,207 @@
+import type {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  UseSortByState,
+  TableInstance as TableInstanceType,
+} from 'react-table';
+
+declare module 'react-table' {
+  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
+
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+      UseFiltersOptions<D>,
+      UseGlobalFiltersOptions<D>,
+      UseGroupByOptions<D>,
+      UsePaginationOptions<D>,
+      UseResizeColumnsOptions<D>,
+      UseRowSelectOptions<D>,
+      UseRowStateOptions<D>,
+      UseSortByOptions<D>,
+      // note that having Record here allows you to add anything to the options, this matches the spirit of the
+      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+      // feature set, this is a safe default.
+      Record<string, any> {}
+
+  export interface Hooks<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseExpandedHooks<D>,
+      UseGroupByHooks<D>,
+      UseRowSelectHooks<D>,
+      UseSortByHooks<D> {}
+
+  export interface TableInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderInstanceProps<D>,
+      UseExpandedInstanceProps<D>,
+      UseFiltersInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D>,
+      UseGroupByInstanceProps<D>,
+      UsePaginationInstanceProps<D>,
+      UseRowSelectInstanceProps<D>,
+      UseRowStateInstanceProps<D>,
+      UseSortByInstanceProps<D> {}
+
+  export interface TableState<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderState<D>,
+      UseExpandedState<D>,
+      UseFiltersState<D>,
+      UseGlobalFiltersState<D>,
+      UseGroupByState<D>,
+      UsePaginationState<D>,
+      UseResizeColumnsState<D>,
+      UseRowSelectState<D>,
+      UseRowStateState<D>,
+      UseSortByState<D> {}
+
+  export interface ColumnInterface<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseFiltersColumnOptions<D>,
+      UseGlobalFiltersColumnOptions<D>,
+      UseGroupByColumnOptions<D>,
+      UseResizeColumnsColumnOptions<D>,
+      UseSortByColumnOptions<D> {}
+
+  export interface ColumnInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseFiltersColumnProps<D>,
+      UseGroupByColumnProps<D>,
+      UseResizeColumnsColumnProps<D>,
+      UseSortByColumnProps<D> {}
+
+  export interface Cell<
+    D extends Record<string, unknown> = Record<string, unknown>,
+    V = any,
+  > extends UseGroupByCellProps<D>,
+      UseRowStateCellProps<D> {}
+
+  export interface Row<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseExpandedRowProps<D>,
+      UseGroupByRowProps<D>,
+      UseRowSelectRowProps<D>,
+      UseRowStateRowProps<D> {}
+}
+
+// take this file as-is, or comment out the sections that don't apply to your plugin configuration
+
+export interface TableOptions<D extends Record<string, unknown>>
+  extends UseExpandedOptions<D>,
+    UseFiltersOptions<D>,
+    UseGlobalFiltersOptions<D>,
+    UseGroupByOptions<D>,
+    UsePaginationOptions<D>,
+    UseResizeColumnsOptions<D>,
+    UseRowSelectOptions<D>,
+    UseRowStateOptions<D>,
+    UseSortByOptions<D>,
+    // note that having Record here allows you to add anything to the options, this matches the spirit of the
+    // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+    // feature set, this is a safe default.
+    Record<string, any> {}
+
+export interface Hooks<
+  D extends Record<string, unknown> = Record<string, unknown>,
+> extends UseExpandedHooks<D>,
+    UseGroupByHooks<D>,
+    UseRowSelectHooks<D>,
+    UseSortByHooks<D> {}
+
+export interface TableInstance<
+  D extends Record<string, unknown> = Record<string, unknown>,
+> extends TableInstanceType<D>,
+    UseColumnOrderInstanceProps<D>,
+    UseExpandedInstanceProps<D>,
+    UseFiltersInstanceProps<D>,
+    UseGlobalFiltersInstanceProps<D>,
+    UseGroupByInstanceProps<D>,
+    UsePaginationInstanceProps<D>,
+    UseRowSelectInstanceProps<D>,
+    UseRowStateInstanceProps<D>,
+    UseSortByInstanceProps<D> {}
+
+export interface TableState<
+  D extends Record<string, unknown> = Record<string, unknown>,
+> extends UseColumnOrderState<D>,
+    UseExpandedState<D>,
+    UseFiltersState<D>,
+    UseGlobalFiltersState<D>,
+    UseGroupByState<D>,
+    UsePaginationState<D>,
+    UseResizeColumnsState<D>,
+    UseRowSelectState<D>,
+    UseRowStateState<D>,
+    UseSortByState<D> {}
+
+export interface ColumnInterface<
+  D extends Record<string, unknown> = Record<string, unknown>,
+> extends UseFiltersColumnOptions<D>,
+    UseGlobalFiltersColumnOptions<D>,
+    UseGroupByColumnOptions<D>,
+    UseResizeColumnsColumnOptions<D>,
+    UseSortByColumnOptions<D> {}
+
+export interface ColumnInstance<
+  D extends Record<string, unknown> = Record<string, unknown>,
+> extends UseFiltersColumnProps<D>,
+    UseGroupByColumnProps<D>,
+    UseResizeColumnsColumnProps<D>,
+    UseSortByColumnProps<D> {}
+
+export interface Cell<
+  D extends Record<string, unknown> = Record<string, unknown>,
+  V = any,
+> extends UseGroupByCellProps<D>,
+    UseRowStateCellProps<D> {}
+
+export interface Row<
+  D extends Record<string, unknown> = Record<string, unknown>,
+> extends UseExpandedRowProps<D>,
+    UseGroupByRowProps<D>,
+    UseRowSelectRowProps<D>,
+    UseRowStateRowProps<D> {}

package/src/common/helpers.ts

@@ -0,0 +1,15 @@
+export const getWindow = (): Window | undefined => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  return window;
+};
+
+export const getDocument = (): Document | undefined => {
+  if (typeof document === 'undefined') {
+    return undefined;
+  }
+
+  return document;
+};

package/src/components/Table/components/Cell/constants.ts

@@ -0,0 +1,11 @@
+export const CLASS_NAMES = {
+  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',
+  cell: {
+    base: 'h-16 flex',
+    compact: 'h-8 flex',
+    padding: 'pl-4',
+  },
+};

package/src/components/Table/components/Cell/index.tsx

@@ -0,0 +1,36 @@
+import type { FunctionComponent, ReactNode } from 'react';
+import type { TableCellProps } from 'react-table';
+import { SkeletonLoader } from '@kanda-libs/ks-design-library';
+import useCellClassNames from './useCellClassNames';
+
+export interface CellProps extends TableCellProps {
+  index: number;
+  render: () => ReactNode;
+  compact?: boolean;
+  isLoading?: boolean;
+}
+
+const Cell: FunctionComponent<CellProps> = function ({
+  render,
+  index,
+  compact = false,
+  isLoading = false,
+  ...props
+}) {
+  const classNames = useCellClassNames(index, compact, isLoading);
+
+  return (
+    <div {...props} className={classNames.cell}>
+      <div className={classNames.container}>
+        <div className={classNames.render}>
+          <SkeletonLoader
+            isLoading={isLoading}
+            afterLoading={<>{render()}</>}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Cell;

package/src/components/Table/components/Cell/useCellClassNames.ts

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { CLASS_NAMES } from './constants';
+
+export type CellClassNamesHook = {
+  cell: string;
+  container: string;
+  render: string;
+};
+
+export default function useCellClassNames(
+  index: number,
+  compact: boolean,
+  isLoading: boolean,
+): CellClassNamesHook {
+  return {
+    cell: clsx(
+      compact ? CLASS_NAMES.cell.compact : CLASS_NAMES.cell.base,
+      index === 0 ? '' : CLASS_NAMES.cell.padding,
+    ),
+    container: CLASS_NAMES.container,
+    render: isLoading ? CLASS_NAMES.renderLoading : CLASS_NAMES.render,
+  };
+}

package/src/components/Table/components/HeaderButton/Button.tsx

@@ -0,0 +1,18 @@
+import type { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import { Icon } from '@kanda-libs/ks-design-library';
+import { BUTTON_CLASS_NAMES, ICON_PROPS } from './constants';
+
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  label: ReactNode;
+}
+
+const Button: FunctionComponent<ButtonProps> = function ({ label, ...props }) {
+  return (
+    <button className={BUTTON_CLASS_NAMES} {...props}>
+      {label}
+      <Icon {...ICON_PROPS} />
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Table/components/HeaderButton/Wrapper.tsx

@@ -0,0 +1,22 @@
+import type { FunctionComponent } from 'react';
+import useWrapperProps from './useWrapperProps';
+
+export interface WrapperProps {
+  index: number;
+  children?: JSX.Element | JSX.Element[];
+}
+
+const Wrapper: FunctionComponent<WrapperProps> = function ({
+  index,
+  children,
+}) {
+  const { classNames, containerStyle } = useWrapperProps(index);
+
+  return (
+    <div className={classNames.container} style={containerStyle}>
+      <div className={classNames.flex}>{children}</div>
+    </div>
+  );
+};
+
+export default Wrapper;

package/src/components/Table/components/HeaderButton/constants.ts

@@ -0,0 +1,24 @@
+export const BUTTON_CLASS_NAMES =
+  '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';
+
+export const ICON_PROPS = {
+  icon: 'chevron-down',
+  stroke: 'neutral-500',
+  size: 12,
+  className: 'ml-2 my-auto',
+};
+
+export const WRAPPER_STYLE = {
+  width: 'calc(100% + 16px)',
+};
+
+export const WRAPPER_CLASS_NAMES = {
+  container: {
+    base: 'w-full h-full overflow-hidden',
+    padding: 'pl-4 -ml-4',
+  },
+  flex: {
+    base: 'w-full h-full flex',
+    padding: 'pl-4',
+  },
+};

package/src/components/Table/components/HeaderButton/index.tsx

@@ -0,0 +1,7 @@
+import Button from './Button';
+import Wrapper from './Wrapper';
+
+export default {
+  Button,
+  Wrapper,
+};

package/src/components/Table/components/HeaderButton/useWrapperProps.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+import clsx from 'clsx';
+import { WRAPPER_STYLE, WRAPPER_CLASS_NAMES } from './constants';
+
+export interface WrapperPropsHook {
+  classNames: {
+    container: string;
+    flex: string;
+  };
+  containerStyle: CSSProperties;
+}
+
+export default function useWrapperProps(index: number): WrapperPropsHook {
+  const containerStyle = index === 0 ? WRAPPER_STYLE : {};
+
+  const classNames = {
+    container: clsx(
+      WRAPPER_CLASS_NAMES.container.base,
+      index === 0 ? WRAPPER_CLASS_NAMES.container.padding : '',
+    ),
+    flex: clsx(
+      WRAPPER_CLASS_NAMES.flex.base,
+      index === 0 ? '' : WRAPPER_CLASS_NAMES.flex.padding,
+    ),
+  };
+
+  return {
+    classNames,
+    containerStyle,
+  };
+}

package/src/components/Table/components/HeaderColumn/constants.ts

@@ -0,0 +1,26 @@
+export const CLASS_NAMES = {
+  main: 'flex h-14',
+  loading: {
+    base: 'my-auto w-full mr-8',
+    margin: 'ml-4',
+  },
+  wrapper: {
+    padding: 'px-2 pt-2',
+    popover: 'pb-1',
+  },
+};
+
+export const MOVE_LEFT_ITEM_PROPS = {
+  name: 'Move column left',
+  icon: 'arrow-left',
+};
+
+export const MOVE_RIGHT_ITEM_PROPS = {
+  name: 'Move column right',
+  icon: 'arrow-right',
+};
+
+export const HIDE_COLUMN_PROPS = {
+  name: 'Hide column',
+  icon: 'eye-off',
+};

package/src/components/Table/components/HeaderColumn/index.tsx

@@ -0,0 +1,38 @@
+import { SkeletonLoader } from '@kanda-libs/ks-design-library';
+import type { FunctionComponent, ReactNode } from 'react';
+import type { TableHeaderProps } from 'react-table';
+import HeaderButton from '../HeaderButton';
+import useHeaderColumnProps from './useHeaderColumnProps';
+
+export interface HeaderColumnProps extends TableHeaderProps {
+  index: number;
+  isLoading?: boolean;
+  popoverButtons?: boolean;
+  label: ReactNode;
+}
+
+const HeaderColumn: FunctionComponent<HeaderColumnProps> = function ({
+  index,
+  isLoading = false,
+  popoverButtons = false,
+  label,
+  ...props
+}) {
+  const { classNames } = useHeaderColumnProps(index, popoverButtons);
+
+  return (
+    <div {...props} className={classNames.main}>
+      <SkeletonLoader
+        isLoading={isLoading}
+        wrapperClassName={classNames.loading}
+        afterLoading={
+          <HeaderButton.Wrapper index={index}>
+            <HeaderButton.Button label={label} />
+          </HeaderButton.Wrapper>
+        }
+      />
+    </div>
+  );
+};
+
+export default HeaderColumn;

package/src/components/Table/components/HeaderColumn/useHeaderColumnProps.ts

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { CLASS_NAMES } from './constants';
+
+export interface HeaderColumnPropsHook {
+  classNames: {
+    main: string;
+    loading: string;
+    wrapper: string;
+  };
+}
+
+export default function useHeaderColumnProps(
+  index: number,
+  popoverButtons: boolean,
+): HeaderColumnPropsHook {
+  const classNames = {
+    ...CLASS_NAMES,
+    loading: clsx(
+      CLASS_NAMES.loading.base,
+      index === 0 ? '' : CLASS_NAMES.loading.margin,
+    ),
+    wrapper: clsx(
+      CLASS_NAMES.wrapper.padding,
+      popoverButtons ? '' : CLASS_NAMES.wrapper.popover,
+    ),
+  };
+
+  return {
+    classNames,
+  };
+}

package/src/components/Table/components/HeaderGroup/constants.ts

@@ -0,0 +1,3 @@
+export const CLASS_NAMES = {
+  base: 'h-14 border-b border-neutral-200',
+};