@sustaina/shared-ui 1.1.8 → 1.2.0

package/README.md

@@ -10,6 +10,135 @@ To use `@sustaina/shared-ui` in your project, follow these steps carefully.
 
 Make sure you've installed [TailwindCSS](https://tailwindcss.com/docs/installation) and [shadcn/ui](https://ui.shadcn.com/docs/installation/manual) before installing our library. **Don’t skip this.**
 
+### 1. Place shadcn/ui styles
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+### 2. Install library
+
 ```bash
 npm install @sustaina/shared-ui
 ```
@@ -45,8 +174,10 @@ Supported versions:
 To make styling work with our components, add this to your `index.css` or root CSS file:
 
 ```css
+... omit code
 @import "@sustaina/shared-ui/styles.css"; /* this include styles/theme.css already */
 @source "../../node_modules/@sustaina/shared-ui/dist"; /* depend your root CSS file locate. */
+... omit code
 ```
 
 ---
@@ -67,6 +198,28 @@ export default function MyComponent() {
 
 # Developer Notes
 
+## Git Flow
+
+### How to developed
+
+We follow a **`feature/xxx` → `dev` → `prod`** workflow:
+
+- Developed on `feature/xxx` or `bugfix/xxx` or any what you want. Then **merge request** to `dev`
+- Only `prod` branch triggers **npm package publishing**.
+- To publish a new version:
+  - Create a **merge request from `dev` to `prod`**, or
+  - Contact your lead developer or maintainer to perform the merge.
+
+### Versioning & Commits
+
+We use **semantic versioning**:
+
+- `patch` → bug fixes (`fix: description`)
+- `minor` → new features (`feat: description`)
+- All other commit types (e.g., `docs`, `chore`, `refactor`) **do not trigger a version change**.
+
+**<em>no major change for now just use `patch` and `minor`</em>**
+
 ## CSS and Custom Styling
 
 - **Prefer Tailwind classes inline** whenever possible.
@@ -104,4 +257,17 @@ export default function MyComponent() {
   - `"append"` → add content at the end of the destination file.
   - `"prepend"` → add content at the beginning of the destination file.
 - This script handles copying files into the `dist` folder during the build process.
+- After copying files, you can export them for consumers.
+  - Add `exports` your file in `package.json`
+  ```json
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/index.css",
+    "./helpers": "./dist/helpers.js"
+  }
+  ```
 - **Note:** This will happen automatically when you run `npm run build`.

package/dist/index.d.mts

@@ -351,6 +351,23 @@ interface AdvanceSearchProps {
 
 declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
 
+type ConfirmDialogProps = {
+    dialogData: {
+        state: boolean;
+        title?: string;
+        description?: string;
+        btn?: string;
+        variantBtn?: string;
+        btnState?: boolean;
+        onClickBtn?: () => void;
+        variant?: "default" | "success" | "error";
+        showCloseBtn?: boolean;
+    };
+    setDialog: (data: any) => void;
+    onClose?: () => void;
+};
+declare function ConfirmDialog({ dialogData, setDialog, onClose }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Utility function to intelligently combine class names using `clsx`
  * and resolve Tailwind CSS class conflicts using `tailwind-merge`.
@@ -454,4 +471,4 @@ type Breakpoints = {
 };
 declare const useScreenSize: (breakpoints?: Breakpoints) => UseScreenSizeResult;
 
-export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UseScreenSizeResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, useScreenSize };
+export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, ConfirmDialog as Dialog, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UseScreenSizeResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, useScreenSize };

package/dist/index.d.ts

@@ -351,6 +351,23 @@ interface AdvanceSearchProps {
 
 declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
 
+type ConfirmDialogProps = {
+    dialogData: {
+        state: boolean;
+        title?: string;
+        description?: string;
+        btn?: string;
+        variantBtn?: string;
+        btnState?: boolean;
+        onClickBtn?: () => void;
+        variant?: "default" | "success" | "error";
+        showCloseBtn?: boolean;
+    };
+    setDialog: (data: any) => void;
+    onClose?: () => void;
+};
+declare function ConfirmDialog({ dialogData, setDialog, onClose }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Utility function to intelligently combine class names using `clsx`
  * and resolve Tailwind CSS class conflicts using `tailwind-merge`.
@@ -454,4 +471,4 @@ type Breakpoints = {
 };
 declare const useScreenSize: (breakpoints?: Breakpoints) => UseScreenSizeResult;
 
-export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UseScreenSizeResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, useScreenSize };
+export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, ConfirmDialog as Dialog, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UseScreenSizeResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, useScreenSize };