asma-ui-datetime 0.0.0

package/dist/src/components/table/components/columns/expandColumn.d.ts

@@ -0,0 +1,11 @@
+import { type CellContext } from '@tanstack/react-table';
+export declare function generateExpandColumn<TData>(): {
+    id: string;
+    minSize: number;
+    maxSize: number;
+    size: number;
+    enableHiding: boolean;
+    enableSorting: boolean;
+    header: () => null;
+    cell: ({ cell }: CellContext<TData, TData>) => JSX.Element | null;
+};

package/dist/src/components/table/components/columns/selectColumn.d.ts

@@ -0,0 +1,9 @@
+import type { CellContext, HeaderContext } from '@tanstack/react-table';
+export declare function selectColumn<TData>(): {
+    id: string;
+    minSize: number;
+    maxSize: number;
+    size: number;
+    header: ({ table }: HeaderContext<TData, TData>) => JSX.Element;
+    cell: ({ cell }: CellContext<TData, TData>) => JSX.Element;
+};

package/dist/src/components/table/helpers/getTableHeaderStyle.d.ts

@@ -0,0 +1,10 @@
+import type { Header } from '@tanstack/react-table';
+export declare const getTableHeaderStyle: <TData>(props: {
+    enableResizing: boolean;
+    header: Header<TData, unknown>;
+    element: HTMLTableCellElement | null;
+}) => {
+    width: string | number | undefined;
+    maxWidth: string | number | undefined;
+    minWidth: string | number | undefined;
+};

package/dist/src/components/table/helpers/injectColumns.d.ts

@@ -0,0 +1,4 @@
+import { type StyledTableProps } from '../types';
+export declare const injectColumns: <TData extends {
+    id: string | number;
+}, TCustomData = Record<string, unknown>>(props: StyledTableProps<TData, TCustomData>) => void;

package/dist/src/components/table/hooks/useStyledTable.d.ts

@@ -0,0 +1,6 @@
+import { type StyledTableProps } from '../types';
+export declare const useStyledTable: <TData extends {
+    id: string | number;
+}, TCustomData = Record<string, unknown>>(props: StyledTableProps<TData, TCustomData>) => {
+    table: import("@tanstack/react-table").Table<TData>;
+};

package/dist/src/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './StyledTable';
+export { createColumnHelper, type Table, type Row, type ColumnDef } from '@tanstack/react-table';

package/dist/src/components/table/story/components/styled-flex-table/generateActions.d.ts

@@ -0,0 +1,6 @@
+import type { Row } from '@tanstack/react-table';
+import type { ITemplate } from '../../service/types';
+export declare const generateActions: (row: Row<ITemplate>) => {
+    label: string;
+    onClick: () => void;
+}[];

package/dist/src/components/table/story/components/styled-flex-table/useColumns.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { ITemplate } from '../../service/types';
+export declare const useColumns: () => {
+    columns: ColumnDef<ITemplate, ITemplate>[];
+};

package/dist/src/components/table/story/components/styled-table/RenderSubRows.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Participant } from '../../helpers/makeData';
+export declare const RenderSubRows: React.FC<{
+    subRows: Participant[];
+}>;

package/dist/src/components/table/story/components/styled-table/getRowActions.d.ts

@@ -0,0 +1,23 @@
+import type { Person } from '../../helpers/makeData';
+import type { Row } from '@tanstack/react-table';
+export declare function getRowActions(row: Row<Person>): ({
+    label: string;
+    hide: boolean;
+    onClick: () => void;
+    className?: undefined;
+} | {
+    label: string;
+    onClick: () => void;
+    hide?: undefined;
+    className?: undefined;
+} | {
+    label: string;
+    className: string;
+    onClick: () => void;
+    hide?: undefined;
+} | {
+    label: string;
+    hide: boolean;
+    className: string;
+    onClick: () => void;
+})[];

package/dist/src/components/table/story/components/styled-table/useTableColumns.d.ts

@@ -0,0 +1,10 @@
+import type { Person } from '../../helpers/makeData';
+import type { ColumnDef } from '@tanstack/react-table';
+/**
+ * Custom props:
+ * @param size. use NaN (width 100%) only one time for the main column. It will make the column very responsive
+ *
+ */
+export declare const useStyledTableColumns: () => {
+    columns: ColumnDef<Person, Person>[];
+};

package/dist/src/components/table/story/components/styled-table/useTableSubRowsColumns.d.ts

@@ -0,0 +1,5 @@
+import type { Participant } from '../../helpers/makeData';
+import type { ColumnDef } from '@tanstack/react-table';
+export declare const useTableSubRowsColumns: () => {
+    columns: ColumnDef<Participant, Participant>[];
+};

package/dist/src/components/table/story/service/Templates.query.d.ts

@@ -0,0 +1,5 @@
+export declare const TemplatesQueryString: () => string;
+export declare const TemplatesQuery: {
+    query: string;
+    variables: {};
+};

package/dist/src/components/table/story/service/types.d.ts

@@ -0,0 +1,9 @@
+export type ITemplate = {
+    id: string;
+    context: string;
+    archived: string;
+    title: string;
+    template_uuid: string;
+    valid_days: string;
+    updated_at: string;
+};

package/dist/src/components/table/story/service/useFetchTemplates.d.ts

@@ -0,0 +1,4 @@
+import type { ITemplate } from './types';
+export declare const useFetchTemplates: () => {
+    data: ITemplate[];
+};

package/dist/src/components/table/types.d.ts

@@ -0,0 +1,65 @@
+import type { CellContext, ColumnMeta, HeaderContext, Row, TableOptions, Table } from '@tanstack/react-table';
+import type { AccessorFn, ColumnDefTemplate } from '@tanstack/react-table';
+import type { ColumnPinningColumnDef, ColumnSizingColumnDef, FiltersColumnDef, GroupingColumnDef, RowData, SortingColumnDef, VisibilityColumnDef } from '@tanstack/react-table';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
+declare module '@tanstack/react-table' {
+    interface ColumnDefExtensions<TData extends RowData, TValue = unknown> extends VisibilityColumnDef, ColumnPinningColumnDef, FiltersColumnDef<TData>, SortingColumnDef<TData>, GroupingColumnDef<TData, TValue>, ColumnSizingColumnDef {
+        className?: string;
+        cellAlign?: 'left' | 'center' | 'right';
+        headerAlign?: 'left' | 'center' | 'right';
+    }
+    interface ColumnDefBase<TData extends RowData, TValue = unknown> extends ColumnDefExtensions<TData, TValue> {
+        getUniqueValues?: AccessorFn<TData, unknown[]>;
+        footer?: ColumnDefTemplate<HeaderContext<TData, TValue>>;
+        cell?: ColumnDefTemplate<CellContext<TData, TValue>>;
+        meta?: ColumnMeta<TData, TValue>;
+    }
+}
+export interface IAction<TData> {
+    label: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    hide?: boolean;
+    onClick?: (row: Row<TData>) => void;
+}
+type IFooter<TData> = {
+    footer?: (table: Table<TData>) => ReactNode;
+    hideFooter?: never;
+};
+type IHideFooter = {
+    footer?: never;
+    hideFooter?: boolean;
+};
+type TFooter<TData> = IFooter<TData> | IHideFooter;
+type TTableOptions<TData> = TableOptions<TData>;
+export type * from '@tanstack/react-table';
+export type StyledTableProps<TData, TCustomData> = {
+    locale?: 'no' | 'en';
+    height?: string | number;
+    actions?: (row: Row<TData>) => IAction<TData>[];
+    customActionsNode?: (row: CellContext<TData, TData>) => ReactNode;
+    customSubRowData?: Map<string, TCustomData[]>;
+    headerPin?: boolean;
+    expandArrow?: boolean;
+    loading?: boolean;
+    noRowsOverlay?: ReactElement;
+    tableInstanceRef?: React.MutableRefObject<Table<TData> | null>;
+    className?: string;
+    rowHeight?: number;
+    tdClassName?: string;
+    focusable?: boolean;
+    stickyHeader?: boolean;
+    getRowClassName?: (row: Row<TData>) => string;
+    onRowClick?: (e: MouseEvent<HTMLTableRowElement, globalThis.MouseEvent>, row: Row<TData>) => void;
+    renderSubRows?: (props: {
+        rows: TCustomData[];
+        row: TData;
+    }) => ReactElement | null;
+    getRowSelectionIds?: (ids: string[]) => void;
+    hideHeader?: boolean;
+    pageSize?: number;
+    enableResizing?: boolean;
+} & Omit<TTableOptions<TData>, 'getCoreRowModel' | 'getExpandedRowModel' | 'getFilteredRowModel' | 'getSortedRowModel'> & TFooter<TData>;
+export declare const SELECT_COLUMN_ID = "select";
+export declare const EXPAND_COLUMN_ID = "expand-column-id";
+export declare const ACTIONS_COLUMN_ID = "actions";

package/dist/src/components/utils/accordion/StyledAccordion.d.ts

@@ -0,0 +1,2 @@
+import { type AccordionProps } from '@mui/material';
+export declare const StyledAccordion: (props: AccordionProps) => JSX.Element;

package/dist/src/components/utils/accordion/StyledAccordionDetails.d.ts

@@ -0,0 +1,2 @@
+import { type AccordionDetailsProps } from '@mui/material';
+export declare const StyledAccordionDetails: (props: AccordionDetailsProps) => JSX.Element;

package/dist/src/components/utils/accordion/StyledAccordionSummary.d.ts

@@ -0,0 +1,2 @@
+import { type AccordionSummaryProps } from '@mui/material';
+export declare const StyledAccordionSummary: (props: AccordionSummaryProps) => JSX.Element;

package/dist/src/components/utils/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from './StyledAccordion';
+export * from './StyledAccordionSummary';
+export * from './StyledAccordionDetails';

package/dist/src/components/utils/filter-menu/StyledFilterMenu.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PopoverProps } from '@mui/material';
+/**
+ * Custom props:
+ * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
+ * @param popoverContent
+ */
+type StyledFilterMenuProps = {
+    dataTest: string;
+    filterIsActive: boolean;
+    popoverContent: React.ReactNode;
+    disabled?: boolean;
+    size?: 'small' | 'large' | 'medium';
+    variant?: 'contained' | 'outlined' | 'text' | 'textGray';
+    popoverProps?: Omit<PopoverProps, 'open' | 'anchorEl' | 'onClose'>;
+};
+export declare const StyledFilterMenu: React.FC<StyledFilterMenuProps>;
+export {};

package/dist/src/components/utils/popover/StyledPopover.d.ts

@@ -0,0 +1,2 @@
+import { type PopoverProps } from '@mui/material';
+export declare const StyledPopover: (props: PopoverProps) => JSX.Element;

package/dist/src/components/utils/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './StyledPopover';

package/dist/src/helpers/date.helper.d.ts

@@ -0,0 +1,2 @@
+export declare const setMidnightTime: (date: Date) => Date;
+export declare const setZeroTime: (date: Date) => Date;

package/dist/src/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './reflections.helper';
+export * from './date.helper';

package/dist/src/helpers/reflections.helper.d.ts

@@ -0,0 +1 @@
+export declare const omit: <T extends object, K extends keyof T>(obj: T, keys: readonly K[]) => Omit<T, K>;

package/dist/src/hooks/useToggleMenuVisibility.hook.d.ts

@@ -0,0 +1,6 @@
+export declare const useToggleMenuVisibility: () => {
+    open: boolean;
+    handleClose: () => void;
+    handleOpen: (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => void;
+    anchorEl: HTMLElement | SVGSVGElement | null;
+};

package/dist/src/hooks/useWindowWidthSize.hook.d.ts

@@ -0,0 +1,5 @@
+export declare function useWindowWidthSize(): number;
+export declare const mobileView: (windowWidth: number | undefined) => boolean;
+export declare function useIsMobileView(): boolean;
+export declare function useIsTabletView(): boolean;
+export declare const tabletView: (windowWidth: number | undefined) => boolean;

package/dist/src/index.d.ts

@@ -0,0 +1,42 @@
+export * from './helpers';
+export * from './components/data-display/badge';
+export * from './components/data-display/chip';
+export * from './components/data-display/tooltip';
+export * from './components/icons';
+export * from './components/data-display/typography';
+export * from './components/feedback/dialog';
+export * from './components/feedback/alert';
+export * from './components/feedback/snack-bar';
+export * from './components/inputs/button';
+export * from './components/inputs/checkbox';
+export * from './components/inputs/input-field';
+export * from './components/inputs/textarea';
+export * from './components/inputs/rich-input';
+export * from './components/inputs/select';
+export * from './components/inputs/select-autocomplete';
+export * from './components/inputs/slider';
+export * from './components/inputs/switch';
+export * from './components/inputs/radio-button';
+export * from './components/inputs/label';
+export * from './components/pickers/date-picker';
+export * from './components/pickers/time-picker';
+export * from './components/miscellaneous/StyledFormControl';
+export * from './components/miscellaneous/StyledFormControlLabel';
+export * from './components/miscellaneous/StyledFormHelperText';
+export * from './components/miscellaneous/StyledFormLabel';
+export * from './components/miscellaneous/StyledInputLabel';
+export * from './components/miscellaneous/StyledFormGroup';
+export * from './components/navigation/drawer';
+export * from './components/navigation/menu';
+export * from './components/navigation/link';
+export * from './components/navigation/tabs';
+export * from './components/utils/accordion';
+export * from './components/table';
+export * from './components/utils/popover';
+export * from './components/custom/widget/widget-title/StyledWidgetTitle';
+export * from './components/custom/widget/widget-header/StyledWidgetHeader';
+export * from './components/custom/widget/widget/StyledWidget';
+export * from './components/custom/module/module-title/StyledModuleTitle';
+export * from './components/utils/filter-menu/StyledFilterMenu';
+export * from './components/feedback/minimizable-dialog/MinimizableDialog';
+export { Fade, Paper, ClickAwayListener, Popper, Avatar, Skeleton, Container, Stack } from '@mui/material';

package/dist/tailwind.config.d.ts

@@ -0,0 +1,142 @@
+declare const _default: {
+    mode: string;
+    important: true;
+    content: string[];
+    theme: {
+        fontFamily: {
+            sans: string[];
+            roboto: string[];
+        };
+        extend: {
+            colors: {
+                inherit: string;
+                "textcolor-component": string;
+                "color-active-component": string;
+                "alpha-100": string;
+                "alpha-500": string;
+                "alpha-600": string;
+                "alpha-700": string;
+                "beta-100": string;
+                "beta-500": string;
+                "beta-600": string;
+                "beta-700": string;
+                "gama-25": string;
+                "gama-50": string;
+                "gama-100": string;
+                "gama-200": string;
+                "gama-300": string;
+                "gama-400": string;
+                "gama-500": string;
+                "gama-600": string;
+                "gama-700": string;
+                "gama-800": string;
+                "delta-10": string;
+                "delta-50": string;
+                "delta-100": string;
+                "delta-200": string;
+                "delta-300": string;
+                "delta-400": string;
+                "delta-500": string;
+                "delta-600": string;
+                "delta-700": string;
+                "delta-800": string;
+                "delta-900": string;
+                "delta-9000": string;
+                "sigma-700": string;
+                "theta-100": string;
+                "theta-200": string;
+                "theta-300": string;
+                "theta-400": string;
+                "theta-500": string;
+                "theta-600": string;
+                "theta-700": string;
+                "theta-800": string;
+                "theta-hover": string;
+                "btn-bg": string;
+                "btn-bg-active": string;
+                "btn-bg-hover": string;
+                "btn-bg-disabled": string;
+                "btn-bg-danger": string;
+                "btn-bg-danger-active": string;
+                "btn-task-status-bg": string;
+                "btn-bg-mini-action": string;
+                "btn-bg-mini-action-hover": string;
+                "chat-ticket-message-bg": string;
+                "colors-topbar-text": string;
+                "custom-grey-01": string;
+                "custom-grey-02": string;
+                "custom-grey-03": string;
+                "custom-grey-04": string;
+                "custom-grey-06": string;
+            };
+            boxShadow: {
+                ash: string;
+                mui: string;
+            };
+            animation: {
+                "slide-in": string;
+                "slide-out": string;
+                "opacity-in": string;
+                "opacity-in-5": string;
+                "opacity-appear-3": string;
+                "opacity-out": string;
+            };
+            keyframes: {
+                "slide-in": {
+                    "0%": {
+                        margin: string;
+                    };
+                    "100%": {
+                        margin: string;
+                    };
+                };
+                "slide-out": {
+                    "0%": {
+                        margin: string;
+                    };
+                    "100%": {
+                        margin: string;
+                    };
+                };
+                "opacity-in": {
+                    "0%": {
+                        opacity: string;
+                        height: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                        height: string;
+                    };
+                };
+                "opacity-appear": {
+                    "0%": {
+                        opacity: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                    };
+                };
+                "opacity-out": {
+                    "0%": {
+                        opacity: string;
+                        height: string;
+                    };
+                    "60%": {
+                        opacity: string;
+                        height: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                        height: string;
+                    };
+                };
+            };
+        };
+    };
+    darkMode: "media";
+    corePlugins: {
+        preflight: false;
+    };
+    plugins: any[];
+};
+export default _default;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigExport;
+export default _default;

package/package.json

@@ -0,0 +1,125 @@
+{
+    "name": "asma-ui-datetime",
+    "publishConfig": {
+        "access": "public"
+    },
+    "version": "0.0.0",
+    "type": "module",
+    "files": [
+        "dist/**/*",
+        "dist/style.css",
+        "tw-configs/**/*"
+    ],
+    "keywords": [],
+    "author": "asma-team",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/asma-ui-datetime.es.js",
+    "module": "./dist/asma-ui-datetime.es.js",
+    "scripts": {
+        "dev": "vite",
+        "build": "npx tsc && rm -rf ./dist && vite build",
+        "preview": "vite preview",
+        "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+        "version": "echo $npm_package_version",
+        "lint:fix": "eslint --fix src/**/*.{jsx,ts,tsx}",
+        "prettier": "prettier --write src//**/*.{ts,tsx,scss} --config ./.prettierrc",
+        "storybook": "storybook dev -p 6006",
+        "storybook:no-browser": "storybook dev -p 6006 --no-open",
+        "storybook:node18": "export NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+        "storybook:node18:win": "set NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+        "build-storybook": "export NODE_OPTIONS=--max_old_space_size=6240 && storybook build",
+        "test-storybook": "test-storybook",
+        "changeset:pre-beta": "changeset pre enter beta",
+        "changeset:pre-exit": "changeset pre exit",
+        "changeset:version": "changeset version",
+        "changeset:publish": "changeset publish",
+        "changeset:status": "changeset status"
+    },
+    "license": "UNLICENSED",
+    "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@fontsource/material-icons": "^5.0.4",
+        "@fontsource/roboto": "^5.0.4",
+        "@iconify/react": "^4.1.1",
+        "@mui/material": "^5.13.7",
+        "@tanstack/react-table": "^8.10.0",
+        "clsx": "^1.2.1",
+        "date-fns": "^2.30.0",
+        "lodash-es": "^4.17.21",
+        "material-ui-popup-state": "^5.0.10",
+        "node": "18.17.0",
+        "notistack": "^3.0.1",
+        "react": "^18.2.0",
+        "react-day-picker": "^8.8.2",
+        "react-dom": "^18.2.0",
+        "react-quill": "^2.0.0",
+        "sass": "^1.77.5",
+        "vite-plugin-css-injected-by-js": "^3.5.1"
+    },
+    "devDependencies": {
+        "@changesets/cli": "^2.26.2",
+        "@faker-js/faker": "^8.0.2",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@storybook/addon-a11y": "^7.6.9",
+        "@storybook/addon-essentials": "^7.6.9",
+        "@storybook/addon-interactions": "^7.6.9",
+        "@storybook/addon-links": "^7.6.9",
+        "@storybook/addon-mdx-gfm": "^7.6.9",
+        "@storybook/addon-styling": "^1.3.7",
+        "@storybook/addons": "^7.6.9",
+        "@storybook/blocks": "^7.6.9",
+        "@storybook/manager-api": "^7.6.9",
+        "@storybook/preset-create-react-app": "^7.6.9",
+        "@storybook/react": "^7.6.9",
+        "@storybook/react-vite": "^7.6.9",
+        "@storybook/test-runner": "^0.16.0",
+        "@storybook/testing-library": "^0.2.2",
+        "@storybook/theming": "^7.6.9",
+        "@types/lodash-es": "^4.17.7",
+        "@types/node": "^18.0.3",
+        "@types/react": "^18.0.37",
+        "@types/react-dom": "^18.0.11",
+        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@typescript-eslint/parser": "^5.59.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "autoprefixer": "^10.4.14",
+        "axe-playwright": "^1.2.3",
+        "axios": "^1.6.8",
+        "eslint": "^8.38.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.3.4",
+        "eslint-plugin-storybook": "^0.6.15",
+        "postcss": "^8.4.24",
+        "prop-types": "^15.8.1",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "storybook": "^7.6.9",
+        "storybook-addon-themes": "^6.1.0",
+        "tailwind-scrollbar": "^3.1.0",
+        "tailwindcss": "^3.3.2",
+        "typescript": "^5.0.2",
+        "typescript-plugin-css-modules": "^5.0.1",
+        "vite": "^4.3.9",
+        "vite-plugin-dts": "^3.1.1",
+        "vite-tsconfig-paths": "^4.2.0"
+    },
+    "peerDependencies": {
+        "@emotion/react": "^11.*",
+        "@emotion/styled": "^11.*",
+        "@mui/material": "^5.*",
+        "immer": "^9.*",
+        "react": "^18.*",
+        "react-dom": "^18.*"
+    },
+    "resolutions": {
+        "@types/node": "18.0.3",
+        "node": "18.17.0"
+    },
+    "exports": {
+        ".": {
+            "import": "./dist/asma-ui-datetime.es.js"
+        },
+        "./dist/style.css": "./dist/style.css",
+        "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json"
+    }
+}