groovinads-ui 1.2.74 → 1.9.0

package/index.d.ts

@@ -0,0 +1,364 @@
+import { ReactNode, MouseEventHandler, ChangeEventHandler, CSSProperties, Dispatch, SetStateAction } from 'react';
+
+// ============================================================================
+// BUTTON COMPONENTS
+// ============================================================================
+
+export interface ButtonProps {
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  endIcon?: string;
+  hideLabelOnMobile?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  processing?: boolean;
+  size?: 'xs' | 'md' | 'lg';
+  startIcon?: string;
+  style?: 'default' | 'success' | 'danger' | 'warning' | 'link';
+  variant?: 'primary' | 'secondary' | 'terciary' | 'outline';
+}
+
+export const Button: React.FC<ButtonProps>;
+
+// ============================================================================
+// DROPDOWN COMPONENTS
+// ============================================================================
+
+export interface DropdownComponentProps {
+  align?: 'start' | 'end';
+  autoClose?: boolean | 'inside' | 'outside';
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  drop?: 'up' | 'down' | 'start' | 'end';
+  fullWidth?: boolean;
+  onToggle?: (show: boolean) => void;
+  overflow?: boolean;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  show?: boolean;
+}
+
+export const DropdownComponent: React.FC<DropdownComponentProps>;
+
+export interface DropdownFilterProps {
+  align?: 'start' | 'end';
+  autoClose?: boolean | 'inside' | 'outside';
+  className?: string;
+  data: Array<{ id: string | number; name: string; [key: string]: any }>;
+  disabled?: boolean;
+  dropDirection?: 'up' | 'down' | 'start' | 'end';
+  fullWidth?: boolean;
+  iconName?: string;
+  label: string;
+  maxHeight?: string;
+  onFilter: (selectedItems: any[]) => void;
+  search?: boolean;
+  selectedItems?: Array<{ id: string | number; name: string; [key: string]: any }>;
+}
+
+export const DropdownFilter: React.FC<DropdownFilterProps>;
+
+export interface DropdownMultiSelectProps {
+  align?: 'start' | 'end';
+  autoClose?: boolean | 'inside' | 'outside';
+  className?: string;
+  data: Array<{ id: string | number; name: string; [key: string]: any }>;
+  disabled?: boolean;
+  dropDirection?: 'up' | 'down' | 'start' | 'end';
+  fullWidth?: boolean;
+  iconName?: string;
+  label: string;
+  maxHeight?: string;
+  onChange: (selectedItems: any[]) => void;
+  search?: boolean;
+  selectedItems?: Array<{ id: string | number; name: string; [key: string]: any }>;
+}
+
+export const DropdownMultiSelect: React.FC<DropdownMultiSelectProps>;
+
+export interface DropdownDatePickerProps {
+  align?: 'start' | 'end';
+  className?: string;
+  defaultSelected?: string;
+  disabled?: boolean;
+  dropDirection?: 'up' | 'down' | 'start' | 'end';
+  fullWidth?: boolean;
+  iconName?: string;
+  label?: string;
+  maxDate?: Date;
+  minDate?: Date;
+  onDateChange: (date: Date | null) => void;
+  selectedDate?: Date | null;
+}
+
+export const DropdownDatePicker: React.FC<DropdownDatePickerProps>;
+
+export interface DropdownSimpleDatePickerProps {
+  align?: 'start' | 'end';
+  className?: string;
+  dateFormat?: string;
+  disabled?: boolean;
+  dropDirection?: 'up' | 'down' | 'start' | 'end';
+  endDate?: Date | null;
+  fullWidth?: boolean;
+  iconName?: string;
+  label?: string;
+  maxDate?: Date;
+  minDate?: Date;
+  onChange: (dates: [Date | null, Date | null]) => void;
+  selectsRange?: boolean;
+  startDate?: Date | null;
+}
+
+export const DropdownSimpleDatePicker: React.FC<DropdownSimpleDatePickerProps>;
+
+// ============================================================================
+// INPUT COMPONENTS
+// ============================================================================
+
+export interface CheckboxProps {
+  checked?: boolean;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  label?: string;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  required?: boolean;
+}
+
+export const Checkbox: React.FC<CheckboxProps>;
+
+export interface InputProps {
+  autoFocus?: boolean;
+  className?: string;
+  disabled?: boolean;
+  focus?: boolean;
+  helpText?: string;
+  icon?: string;
+  label?: string;
+  max?: string | number;
+  maxLength?: number;
+  min?: string | number;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  prefix?: string;
+  requiredText?: string;
+  setShowError?: Dispatch<SetStateAction<boolean>>;
+  showError?: boolean;
+  size?: 'xs' | 'md' | 'lg';
+  suffix?: string;
+  type?: 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'image' | 'month' | 'number' | 'password' | 'tel' | 'text' | 'time' | 'url' | 'week';
+  value?: string | number;
+}
+
+export const Input: React.FC<InputProps>;
+
+export interface RadioProps {
+  checked?: boolean;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  label?: string;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  required?: boolean;
+  value?: string | number;
+}
+
+export const Radio: React.FC<RadioProps>;
+
+export interface SwitchProps {
+  checked?: boolean;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  label?: string;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+export const Switch: React.FC<SwitchProps>;
+
+export interface TextareaProps {
+  autoFocus?: boolean;
+  className?: string;
+  disabled?: boolean;
+  helpText?: string;
+  label?: string;
+  maxLength?: number;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  placeholder?: string;
+  requiredText?: string;
+  rows?: number;
+  showError?: boolean;
+  size?: 'xs' | 'md' | 'lg';
+  value?: string;
+}
+
+export const Textarea: React.FC<TextareaProps>;
+
+export interface InputEmailProps {
+  className?: string;
+  disabled?: boolean;
+  helpText?: string;
+  label?: string;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  required?: boolean;
+  size?: 'xs' | 'md' | 'lg';
+  value?: string;
+}
+
+export const InputEmail: React.FC<InputEmailProps>;
+
+export interface InputChipProps {
+  chips?: string[];
+  className?: string;
+  disabled?: boolean;
+  helpText?: string;
+  label?: string;
+  maxChips?: number;
+  name?: string;
+  onChipsChange?: (chips: string[]) => void;
+  placeholder?: string;
+  size?: 'xs' | 'md' | 'lg';
+}
+
+export const InputChip: React.FC<InputChipProps>;
+
+// ============================================================================
+// LABEL COMPONENTS
+// ============================================================================
+
+export interface AlertProps {
+  children?: ReactNode;
+  className?: string;
+  dismissible?: boolean;
+  icon?: string;
+  onClose?: () => void;
+  show?: boolean;
+  style?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+}
+
+export const Alert: React.FC<AlertProps>;
+
+export interface IconProps {
+  className?: string;
+  iconName: string;
+  scale?: number;
+  style?: 'solid' | 'regular' | 'light' | 'thin' | 'duotone' | 'brands';
+}
+
+export const Icon: React.FC<IconProps>;
+
+export interface LoginSourceProps {
+  className?: string;
+  source: string;
+}
+
+export const LoginSource: React.FC<LoginSourceProps>;
+
+export interface PillComponentProps {
+  className?: string;
+  icon?: string;
+  label: string;
+  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+}
+
+export const PillComponent: React.FC<PillComponentProps>;
+
+export interface SpinnerProps {
+  className?: string;
+  scale?: number;
+  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+}
+
+export const Spinner: React.FC<SpinnerProps>;
+
+export interface StatusIconProps {
+  className?: string;
+  icon?: string;
+  label?: string;
+  status: 'success' | 'warning' | 'danger' | 'info' | 'disabled';
+}
+
+export const StatusIcon: React.FC<StatusIconProps>;
+
+// ============================================================================
+// TOAST COMPONENTS
+// ============================================================================
+
+export interface ToastComponentProps {
+  autohide?: boolean;
+  className?: string;
+  delay?: number;
+  icon?: string;
+  message: string;
+  onClose?: () => void;
+  show?: boolean;
+  style?: 'success' | 'danger' | 'warning' | 'info';
+  title?: string;
+}
+
+export const ToastComponent: React.FC<ToastComponentProps>;
+
+export interface ToastProgressProps {
+  autohide?: boolean;
+  className?: string;
+  delay?: number;
+  icon?: string;
+  message: string;
+  onClose?: () => void;
+  progress?: number;
+  show?: boolean;
+  style?: 'success' | 'danger' | 'warning' | 'info';
+  title?: string;
+}
+
+export const ToastProgress: React.FC<ToastProgressProps>;
+
+// ============================================================================
+// NAVIGATION COMPONENTS
+// ============================================================================
+
+export interface NavbarProps {
+  children?: ReactNode;
+  logoUrl?: string;
+  logoUrlMobile?: string;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  show?: boolean;
+  showDeckMenu?: boolean;
+  showUserMenu?: boolean;
+}
+
+export const Navbar: React.FC<NavbarProps>;
+
+export interface StepperProps {
+  activeStep?: number;
+  className?: string;
+  steps: Array<{ label: string; [key: string]: any }>;
+}
+
+export const Stepper: React.FC<StepperProps>;
+
+export interface TabnavProps {
+  activeTab?: string | number;
+  className?: string;
+  onTabChange?: (tabId: string | number) => void;
+  tabs: Array<{ id: string | number; label: string; content?: ReactNode; [key: string]: any }>;
+}
+
+export const Tabnav: React.FC<TabnavProps>;
+
+export interface SidebarProps {
+  children?: ReactNode;
+  className?: string;
+  header?: ReactNode;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  show?: boolean;
+}
+
+export const Sidebar: React.FC<SidebarProps>;
+

package/package.json

@@ -1,81 +1,89 @@
 {
-	"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.2.74",
-	"keywords": [
-		"css",
-		"sass",
-		"groovinads",
-		"responsive",
-		"front-end",
-		"components"
-	],
-	"homepage": "https://www.groovinads.com/",
-	"main": "dist/index.js",
-	"module": "dist/index.es.js",
-	"style": "https://ui.groovinads.com/styles.min.css",
-	"repository": "git@bitbucket.org:groovinads/react-components.git",
-	"author": "Pablo Piñero <pablo.piniero@groovinads.com>",
-	"license": "MIT",
-	"devDependencies": {
-		"@babel/core": "^7.24.3",
-		"@babel/preset-react": "^7.24.1",
-		"@chromatic-com/storybook": "^1.2.25",
-		"@rollup/plugin-json": "^6.1.0",
-		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@storybook/addon-essentials": "^8.0.4",
-		"@storybook/addon-interactions": "^8.0.4",
-		"@storybook/addon-links": "^8.0.4",
-		"@storybook/addon-onboarding": "^8.0.4",
-		"@storybook/blocks": "^8.0.4",
-		"@storybook/react": "^8.0.4",
-		"@storybook/react-vite": "^8.0.4",
-		"@storybook/test": "^8.0.4",
-		"axios": "^1.7.2",
-		"babel-loader": "^9.1.3",
-		"eslint": "^8.0.1",
-		"eslint-config-prettier": "^8.6.0",
-		"eslint-config-standard": "^17.0.0",
-		"eslint-plugin-import": "^2.25.2",
-		"eslint-plugin-n": "^15.0.0",
-		"eslint-plugin-promise": "^6.0.0",
-		"eslint-plugin-react": "^7.31.11",
-		"js-cookie": "^3.0.5",
-		"prettier": "^3.2.5",
-		"prop-types": "^15.8.1",
-		"react": "^18.2.0",
-		"react-bootstrap": "^2.10.4",
-		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.24.0",
-		"rollup": "^4.14.0",
-		"rollup-plugin-babel": "^4.4.0",
-		"rollup-plugin-commonjs": "^10.1.0",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-typescript2": "^0.36.0",
-		"sass": "^1.72.0",
-		"storybook": "^8.0.4",
-		"typescript": "^5.4.4",
-		"vite": "^5.2.2"
-	},
-	"peerDependencies": {
-		"axios": "^1.7.2",
-		"babel-loader": "^9.1.3",
-		"js-cookie": "^3.0.5",
-		"react": "^18.2.0",
-		"react-bootstrap": "^2.10.4",
-		"react-dom": "^18.2.0"
-	},
-	"packageManager": "yarn@4.1.1",
-	"scripts": {
-		"sb": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"build-lib": "rollup -c"
-	},
-	"dependencies": {
-		"date-fns": "^4.1.0",
-		"react-datepicker": "^7.3.0",
-		"react-responsive": "^10.0.0"
-	}
+  "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.0",
+  "type": "module",
+  "keywords": [
+    "css",
+    "sass",
+    "groovinads",
+    "responsive",
+    "front-end",
+    "components"
+  ],
+  "homepage": "https://www.groovinads.com/",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "index.d.ts",
+  "files": [
+    "dist",
+    "index.d.ts",
+    "README.md"
+  ],
+  "style": "https://ui.groovinads.com/2.0.0/styles.min.css",
+  "repository": "git@bitbucket.org:groovinads/react-components.git",
+  "author": "Pablo Piñero <pablo.piniero@groovinads.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@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",
+    "axios": "^1.7.2",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-storybook": "10.0.8",
+    "js-cookie": "^3.0.5",
+    "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.24.0",
+    "react-tabulator": "^0.21.0",
+    "remark-gfm": "^4.0.1",
+    "rollup": "^4.14.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.72.0",
+    "storybook": "^10.0.8",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.2"
+  },
+  "peerDependencies": {
+    "axios": "^1.7.2",
+    "babel-loader": "^9.1.3",
+    "js-cookie": "^3.0.5",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.2.0"
+  },
+  "packageManager": "yarn@4.1.1",
+  "scripts": {
+    "sb": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-lib": "rollup -c"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "react-datepicker": "^7.3.0",
+    "react-loading-skeleton": "^3.5.0",
+    "react-responsive": "^10.0.0"
+  }
 }

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-react"]
-}

package/.eslintignore

@@ -1,2 +0,0 @@
-dist
-.prettierrc

package/.eslintrc.cjs

@@ -1,32 +0,0 @@
-module.exports = {
-	env: {
-		browser: true,
-		es2021: true,
-	},
-	settings: {
-		react: {
-			version: "detect",
-		},
-	},
-	extends: [
-		"plugin:react/recommended",
-		"plugin:react/jsx-runtime",
-		"standard",
-		"eslint-config-prettier",
-	],
-	overrides: [],
-	parserOptions: {
-		ecmaVersion: "latest",
-		sourceType: "module",
-	},
-	plugins: ["react"],
-	rules: {
-		// values : warn - off - error
-		// "react/react-in-jsx-scope": "off"
-		"no-unused-vars": "warn",
-		"camelcase": "off",
-		"react/prop-types": "off",
-		"no-unneeded-ternary": "off",
-		"react/no-children-prop": "off"
-	},
-};

package/.prettierignore

@@ -1,9 +0,0 @@
-dist
-package-lock.json
-yarn.lock
-.prettierrc
-.eslintrc.cjs
-public/imgs
-public/locales
-public/css/ga-styles.scss
-public/css/ga-styles.css

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"jsxSingleQuote": true,
-	"arrowParents": "avoid",
-	"semi": true
-}

package/.storybook/main.js

@@ -1,19 +0,0 @@
-/** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,6 +0,0 @@
-<!-- Bootstrap styles -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
-<!-- Groovinads UI styles -->
-<link rel="stylesheet" href="http://ui.groovinads.com/styles.min.css">
-<!-- Fontawesome kit -->
-<script src="https://kit.fontawesome.com/79f14073fb.js" crossorigin="anonymous"></script>

package/.storybook/preview.js

@@ -1,13 +0,0 @@
-/** @type { import('@storybook/react').Preview } */
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;