@esic-lab/data-core-ui 0.0.55 → 0.0.57

package/dist/index.d.mts

@@ -7,6 +7,7 @@ import { InputNumberProps, SelectProps } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -442,9 +443,10 @@ interface SortFilterProps {
 declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploaderProps {
-    onUpload: (file: File) => Promise<void>;
+    onUpload: (file: any) => Promise<void>;
     onRemove?: (index: number) => Promise<void>;
     onError?: (message: string) => void;
+    onClickFile?: (file: any) => void;
     accept?: string[];
     maxSize?: number;
     disabled?: boolean;
@@ -452,8 +454,12 @@ interface FileUploaderProps {
     description?: string;
     label?: string;
     value?: File[] | any[];
+    uploadText?: string;
+    uploaderWidth?: string;
+    attachWidth?: string;
+    readOnly?: boolean;
 }
-declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;
@@ -522,16 +528,22 @@ interface IndicatorProps {
     }[];
     type: "OUTPUT" | "OUTCOME";
     arrayData: IndicatorArray[];
+    canEdit?: boolean;
     setArrayData: (data: IndicatorArray[]) => void;
+    onDeleteClick?: (payload: {
+        index: number;
+        item: IndicatorArray;
+        confirm: () => void;
+    }) => void;
 }
 interface IndicatorArray {
     indicatorType: "OUTPUT" | "OUTCOME";
     inputType: "TEXT" | "NUMBER";
     textValue: string;
-    numberValue?: string;
+    numberValue?: number;
     unit?: string;
 }
-declare function Indicator({ option, type, arrayData, setArrayData, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
 
 interface optionSelect {
     value: string;
@@ -542,4 +554,70 @@ declare const FilterPopUp: (filter: {
     handleSearch: (listFiler: string[]) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProgressBar, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };
+interface UserData {
+    id: string;
+    name: string;
+    profile: string;
+}
+interface ProfileSelectProp {
+    allUser: UserData[];
+    assignUser: UserData[];
+    mode: "show" | "showAssign" | "icon";
+    className?: string;
+    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
+}
+declare function ProfileSelect({ allUser, assignUser, mode, className, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
+
+interface QRCodeGeneratorProps {
+    url: string;
+    previewSize?: number;
+    defaultExportSize?: number;
+    fileBaseName?: string;
+}
+declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
+
+interface TabProjectProp {
+    tabOption: {
+        key: string;
+        label: string;
+        icon: ReactNode$1;
+    }[];
+    projectId: string;
+    now: string;
+    onChange: (key: string) => void;
+}
+declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
+
+type Datum = {
+    x: string;
+    y: number;
+};
+type Props = {
+    data: Datum[];
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    yLabel?: string;
+    xLabel?: string;
+    colorPalette?: string[];
+};
+declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
+
+interface PieChartProps {
+    title?: string;
+    description?: string;
+    data: {
+        label: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    colorPalette?: string[];
+}
+declare const PieChart: react.FC<PieChartProps>;
+
+export { AntDModal, AntDataTable, BarChart, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PieChart, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { InputNumberProps, SelectProps } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -442,9 +443,10 @@ interface SortFilterProps {
 declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploaderProps {
-    onUpload: (file: File) => Promise<void>;
+    onUpload: (file: any) => Promise<void>;
     onRemove?: (index: number) => Promise<void>;
     onError?: (message: string) => void;
+    onClickFile?: (file: any) => void;
     accept?: string[];
     maxSize?: number;
     disabled?: boolean;
@@ -452,8 +454,12 @@ interface FileUploaderProps {
     description?: string;
     label?: string;
     value?: File[] | any[];
+    uploadText?: string;
+    uploaderWidth?: string;
+    attachWidth?: string;
+    readOnly?: boolean;
 }
-declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;
@@ -522,16 +528,22 @@ interface IndicatorProps {
     }[];
     type: "OUTPUT" | "OUTCOME";
     arrayData: IndicatorArray[];
+    canEdit?: boolean;
     setArrayData: (data: IndicatorArray[]) => void;
+    onDeleteClick?: (payload: {
+        index: number;
+        item: IndicatorArray;
+        confirm: () => void;
+    }) => void;
 }
 interface IndicatorArray {
     indicatorType: "OUTPUT" | "OUTCOME";
     inputType: "TEXT" | "NUMBER";
     textValue: string;
-    numberValue?: string;
+    numberValue?: number;
     unit?: string;
 }
-declare function Indicator({ option, type, arrayData, setArrayData, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
 
 interface optionSelect {
     value: string;
@@ -542,4 +554,70 @@ declare const FilterPopUp: (filter: {
     handleSearch: (listFiler: string[]) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProgressBar, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };
+interface UserData {
+    id: string;
+    name: string;
+    profile: string;
+}
+interface ProfileSelectProp {
+    allUser: UserData[];
+    assignUser: UserData[];
+    mode: "show" | "showAssign" | "icon";
+    className?: string;
+    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
+}
+declare function ProfileSelect({ allUser, assignUser, mode, className, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
+
+interface QRCodeGeneratorProps {
+    url: string;
+    previewSize?: number;
+    defaultExportSize?: number;
+    fileBaseName?: string;
+}
+declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
+
+interface TabProjectProp {
+    tabOption: {
+        key: string;
+        label: string;
+        icon: ReactNode$1;
+    }[];
+    projectId: string;
+    now: string;
+    onChange: (key: string) => void;
+}
+declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
+
+type Datum = {
+    x: string;
+    y: number;
+};
+type Props = {
+    data: Datum[];
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    yLabel?: string;
+    xLabel?: string;
+    colorPalette?: string[];
+};
+declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
+
+interface PieChartProps {
+    title?: string;
+    description?: string;
+    data: {
+        label: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    colorPalette?: string[];
+}
+declare const PieChart: react.FC<PieChartProps>;
+
+export { AntDModal, AntDataTable, BarChart, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PieChart, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

package/dist/index.js

@@ -4588,11 +4588,32 @@ var BarChart = ({
       (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d).attr("x", width)
     );
-    const t = svg.transition().duration(400);
+    const t = d3.transition().duration(400);
     const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
     bars.join(
-      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
-      // Bring the new bars to the front
+      // (enter) =>
+      //   enter
+      //     .append("rect")
+      //     .attr("class", "bar")
+      //     .attr("x", (d) => margin.left)
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", () => margin.top + y(0))
+      //     .attr("height", () => innerH - y(0))
+      //     .attr("rx", 5) // rounded corners
+      //     .attr("ry", 5) // rounded corners
+      //     .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
+      //     .append("title")
+      //     .text((d) => `${d.x}: ${d.y}`)
+      //     .merge(bars) // merge the existing bars after joining
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", (d) => y(d.y))
+      //     .attr("height", (d) => innerH - y(d.y))
+      //     .call((enter) => enter.raise()), // Bring the new bars to the front
+      (enter) => {
+        const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
+        rects.append("title").text((d) => `${d.x}: ${d.y}`);
+        return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
+      },
       (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
       // Update color on update
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
@@ -4607,7 +4628,6 @@ var BarChart = ({
     render();
   }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("title", { children: "Bar chart" }),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { ref: xAxisRef }),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { ref: yAxisRef })

package/dist/index.mjs

@@ -4531,11 +4531,32 @@ var BarChart = ({
       (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d).attr("x", width)
     );
-    const t = svg.transition().duration(400);
+    const t = d3.transition().duration(400);
     const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
     bars.join(
-      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
-      // Bring the new bars to the front
+      // (enter) =>
+      //   enter
+      //     .append("rect")
+      //     .attr("class", "bar")
+      //     .attr("x", (d) => margin.left)
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", () => margin.top + y(0))
+      //     .attr("height", () => innerH - y(0))
+      //     .attr("rx", 5) // rounded corners
+      //     .attr("ry", 5) // rounded corners
+      //     .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
+      //     .append("title")
+      //     .text((d) => `${d.x}: ${d.y}`)
+      //     .merge(bars) // merge the existing bars after joining
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", (d) => y(d.y))
+      //     .attr("height", (d) => innerH - y(d.y))
+      //     .call((enter) => enter.raise()), // Bring the new bars to the front
+      (enter) => {
+        const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
+        rects.append("title").text((d) => `${d.x}: ${d.y}`);
+        return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
+      },
       (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
       // Update color on update
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
@@ -4550,7 +4571,6 @@ var BarChart = ({
     render();
   }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
   return /* @__PURE__ */ jsx45("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs39("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
-    /* @__PURE__ */ jsx45("title", { children: "Bar chart" }),
     /* @__PURE__ */ jsx45("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
     /* @__PURE__ */ jsx45("g", { ref: xAxisRef }),
     /* @__PURE__ */ jsx45("g", { ref: yAxisRef })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,8 +41,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsup src/index.ts --format esm,cjs --out-dir dist && npm run copy-assets",
-    "build:dts": "tsup src/index.ts --dts --dts-resolve --out-dir dist",
+    "build": "tsup src/index.ts --dts --dts-resolve --format esm,cjs --out-dir dist && npm run copy-assets",
     "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y",
     "type-check": "tsc --noEmit"
   },