groovinads-ui 1.9.7 → 1.9.9

package/index.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps {
   className?: string;
   disabled?: boolean;
   endIcon?: string;
+  hideLabelOnDesktop?: boolean;
   hideLabelOnMobile?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   processing?: boolean;
@@ -32,10 +33,20 @@ export interface DropdownComponentProps {
   disabled?: boolean;
   drop?: 'up' | 'down' | 'start' | 'end';
   fullWidth?: boolean;
+  icon?: string;
+  isChild?: boolean;
+  label?: ReactNode;
   onToggle?: (show: boolean) => void;
   overflow?: boolean;
+  processing?: boolean;
+  requiredText?: string;
+  selectedValue?: ReactNode;
   setShow?: Dispatch<SetStateAction<boolean>>;
   show?: boolean;
+  showError?: boolean;
+  size?: 'xs' | 'md' | 'lg';
+  style?: 'default' | 'success' | 'danger' | 'warning' | 'link';
+  variant?: 'primary' | 'secondary' | 'terciary' | 'outline' | 'input';
 }
 
 export const DropdownComponent: React.FC<DropdownComponentProps>;
@@ -214,20 +225,42 @@ export interface InputEmailProps {
 export const InputEmail: React.FC<InputEmailProps>;
 
 export interface InputChipProps {
-  chips?: string[];
+  autoFocus?: boolean;
   className?: string;
+  counter?: boolean;
   disabled?: boolean;
+  duplicateKeywordErrorText?: string;
   helpText?: string;
-  label?: string;
-  maxChips?: number;
-  name?: string;
-  onChipsChange?: (chips: string[]) => void;
-  placeholder?: string;
-  size?: 'xs' | 'md' | 'lg';
+  keywordsList: string[];
+  maxKeywords: number;
+  maxKeywordLength: number;
+  pillColor?: 'blue' | 'danger' | 'dark' | 'green' | 'light' | 'midtone' | 'neutral' | 'red' | 'yellow';
+  placeholder: string;
+  recomendedKeywords: number;
+  requiredText: string;
+  setKeywordsList: (keywords: string[]) => void;
 }
 
 export const InputChip: React.FC<InputChipProps>;
 
+export interface SliderProps {
+  className?: string;
+  disabled?: boolean;
+  label?: string;
+  labelInputMax?: string;
+  labelInputMin?: string;
+  max?: number;
+  min?: number;
+  onChange?: (value: number | [number, number]) => void;
+  orientation?: 'horizontal' | 'vertical';
+  range?: boolean;
+  step?: number;
+  tooltip?: boolean;
+  value?: number | [number, number];
+}
+
+export const Slider: React.FC<SliderProps>;
+
 // ============================================================================
 // LABEL COMPONENTS
 // ============================================================================
@@ -244,6 +277,25 @@ export interface AlertProps {
 
 export const Alert: React.FC<AlertProps>;
 
+export interface BlockIconProps {
+  className?: string;
+  color?: 'green' | 'grey' | 'yellow' | 'red' | 'danger' | 'neutral' | 'blue' | 'light' | 'midtone' | 'dark';
+  name?: string;
+  size?: 'xs' | 'md' | 'lg';
+}
+
+export const BlockIcon: React.FC<BlockIconProps>;
+
+export interface EditableContentProps {
+  as: string;
+  className?: string;
+  onChange: (value: string) => void;
+  onSave: (value: string) => Promise<void>;
+  value?: string;
+}
+
+export const EditableContent: React.FC<EditableContentProps>;
+
 export interface IconProps {
   className?: string;
   iconName: string;
@@ -261,10 +313,12 @@ export interface LoginSourceProps {
 export const LoginSource: React.FC<LoginSourceProps>;
 
 export interface PillComponentProps {
+  children?: ReactNode;
   className?: string;
-  icon?: string;
-  label: string;
-  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+  closeButton?: boolean;
+  color?: 'green' | 'yellow' | 'red' | 'danger' | 'neutral' | 'blue' | 'light' | 'midtone' | 'dark';
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
 export const PillComponent: React.FC<PillComponentProps>;
@@ -277,6 +331,19 @@ export interface SpinnerProps {
 
 export const Spinner: React.FC<SpinnerProps>;
 
+export interface ProgressBarProps {
+  className?: string;
+  dangerTo?: number;
+  label?: string;
+  max?: number;
+  orientation?: 'horizontal' | 'vertical';
+  showNumbers?: boolean;
+  value?: number;
+  warningTo?: number;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps>;
+
 export interface StatusIconProps {
   className?: string;
   icon?: string;
@@ -319,6 +386,24 @@ export interface ToastProgressProps {
 
 export const ToastProgress: React.FC<ToastProgressProps>;
 
+// ============================================================================
+// MODAL COMPONENTS
+// ============================================================================
+
+export interface ModalComponentProps {
+  children: ReactNode;
+  className?: string;
+  footer?: ReactNode;
+  header: string | ReactNode;
+  onBeforeClose?: () => void;
+  setShow: Dispatch<SetStateAction<boolean>>;
+  show: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  type?: 'default' | 'confirmation' | 'error';
+}
+
+export const ModalComponent: React.FC<ModalComponentProps>;
+
 // ============================================================================
 // NAVIGATION COMPONENTS
 // ============================================================================
@@ -335,6 +420,18 @@ export interface NavbarProps {
 
 export const Navbar: React.FC<NavbarProps>;
 
+export interface AsideProps {
+  backdrop?: boolean;
+  belowNavbar?: boolean;
+  children: ReactNode;
+  className?: string;
+  header: string | ReactNode;
+  onHide: () => void;
+  show: boolean;
+}
+
+export const Aside: React.FC<AsideProps>;
+
 export interface StepperProps {
   activeStep?: number;
   className?: string;
@@ -352,6 +449,22 @@ export interface TabnavProps {
 
 export const Tabnav: React.FC<TabnavProps>;
 
+export interface PaginationProps {
+  className?: string;
+  currentPage: number;
+  onNextPage: () => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  onPrevPage: () => void;
+  pageSize: number;
+  pageSizeOptions?: number[];
+  paginationMode?: 'local' | 'remote';
+  showPerPageLabel?: string;
+  totalPages?: number;
+}
+
+export const Pagination: React.FC<PaginationProps>;
+
 export interface SidebarProps {
   children?: ReactNode;
   className?: string;
@@ -362,3 +475,15 @@ export interface SidebarProps {
 
 export const Sidebar: React.FC<SidebarProps>;
 
+// ============================================================================
+// TABLE COMPONENTS
+// ============================================================================
+
+export interface TableSkeletonProps {
+  className?: string;
+  cols: number;
+  rows: number;
+}
+
+export const TableSkeleton: React.FC<TableSkeletonProps>;
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "groovinads-ui",
   "description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-  "version": "1.9.07",
+  "version": "1.9.9",
   "type": "module",
   "keywords": [
     "css",
@@ -30,10 +30,13 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-links": "^10.0.8",
-    "@storybook/addon-onboarding": "^10.0.8",
-    "@storybook/react-vite": "^10.0.8",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-links": "^10.1.2",
+    "@storybook/addon-onboarding": "^10.1.2",
+    "@storybook/addon-vitest": "^10.1.2",
+    "@storybook/react-vite": "^10.1.2",
+    "@vitest/browser-playwright": "^4.0.14",
+    "@vitest/coverage-v8": "^4.0.14",
     "axios": "^1.7.2",
     "babel-loader": "^9.1.3",
     "eslint": "^8.0.1",
@@ -43,13 +46,14 @@
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-storybook": "10.0.8",
+    "eslint-plugin-storybook": "10.1.2",
     "js-cookie": "^3.0.5",
+    "playwright": "^1.57.0",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-bootstrap": "^2.10.4",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.0",
     "react-router-dom": "^6.24.0",
     "react-tabulator": "^0.21.0",
     "remark-gfm": "^4.0.1",
@@ -61,17 +65,18 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.72.0",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.2",
     "typescript": "^5.4.4",
-    "vite": "^5.2.2"
+    "vite": "^5.2.2",
+    "vitest": "^4.0.14"
   },
   "peerDependencies": {
     "axios": "^1.7.2",
     "babel-loader": "^9.1.3",
     "js-cookie": "^3.0.5",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-bootstrap": "^2.10.4",
-    "react-dom": "^18.2.0"
+    "react-dom": "^19.1.0"
   },
   "packageManager": "yarn@4.1.1",
   "scripts": {
@@ -81,7 +86,6 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.24",
     "react-datepicker": "^7.3.0",
     "react-loading-skeleton": "^3.5.0",
     "react-responsive": "^10.0.0"