@dexma/ui-components 6.8.0 → 7.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 DEXMA
+Copyright (c) [2024] [SPACEWELL ENERGY]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -18,33 +18,35 @@
 
 ## Table of contents
 
-- [Usage](#usage)
-- [Installation](#installation)
-- [Documentation](#documentation)
-- [Changelog](#changelog)
-- [Testing](#testing)
-- [Contributing](#contributing)
+-   [Usage](#usage)
+-   [Installation](#installation)
+-   [Documentation](#documentation)
+-   [Changelog](#changelog)
+-   [Testing](#testing)
+-   [Contributing](#contributing)
 
 ## Usage
 
-1) Install with [npm](https://www.npmjs.com): `npm install --save @dexma/ui-components`
+1. Install with [npm](https://www.npmjs.com): `npm install --save @dexma/ui-components`
 
-2) Use the component importing from the library
+2. Use the component importing from the library
 
-```javascript
-import { Button } from "@dexma/ui-components";
-<Button text="Some text" variant="primary" size="medium"/>
+```typescript
+import { Button } from '@dexma/ui-components';
+<Button text='Some text' variant='primary' size='medium' />;
 ```
 
-3) Optional: You can set the Theme with your personal variables, we provide the Theme component and you only need to set the options:
-
-```javascript
-import { Theme, Button } from "@dexma/ui-components";
-<Theme options={{
-    primary: "#aa0800"
-}}>
-    <Button text="Some text" variant="primary" size="medium"/>
-</Theme>
+3. Optional: You can set the Theme with your personal variables, we provide the Theme component and you only need to set the options:
+
+```typescript
+import { Theme, Button } from '@dexma/ui-components';
+<Theme
+    options={{
+        primary: '#aa0800',
+    }}
+>
+    <Button text='Some text' variant='primary' size='medium' />
+</Theme>;
 ```
 
 You can find all the configuration in the theme file [theme.js](https://github.com/dexma/ui-components/blob/master/src/styles/theme.js)
@@ -63,8 +65,8 @@ npm install
 
 For the documentation we use storybook docs that transforms our stories into world-class component documentation.
 
-- Run storybook: `npm run storybook`
-- If you need to export static doc run `npm run build-storybook` this will export a static folder with all our component docs
+-   Run storybook: `npm run storybook`
+-   If you need to export static doc run `npm run build-storybook` this will export a static folder with all our component docs
 
 ## Changelog
 
@@ -74,25 +76,25 @@ For changelogs, check out [the CHANGELOG section of ui-components](https://githu
 
 We use React Testing Library as our testing lib you can check out the [documentation](https://testing-library.com/docs/react-testing-library/intro)
 
-- To run our test: `npm run test`
+-   To run our test: `npm run test`
 
-Note: Due to the use of third-party libraries, some components use methods that JSDOM (the DOM implementation used by Jest) hasn't implemented yet, testing it is not easily possible. This is the case with window.matchMedia(). Jest returns ```TypeError: window.matchMedia is not a function``` and doesn't properly execute the test.
+Note: Due to the use of third-party libraries, some components use methods that JSDOM (the DOM implementation used by Jest) hasn't implemented yet, testing it is not easily possible. This is the case with window.matchMedia(). Jest returns `TypeError: window.matchMedia is not a function` and doesn't properly execute the test.
 
 In this case, to resolve this issue to execute successfully your tests when @dexma/ui-components is used, include the following code on setupTest file for Jest to mock matchMedia and it should solve the issue:
 
-```javascript
+```typescript
 Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
 });
 ```
 

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/index'

package/dist/lib/components/Alert/Alert.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, ReactNode } from 'react';
+
+export type AlertProps = {
+    message?: ReactNode;
+    type: 'basic' | 'outline' | 'warning' | 'info' | 'success' | 'error';
+    onClose?: (e: any) => void;
+    description?: string;
+    showIcon?: boolean;
+    closable?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const Alert: ({ type, closable, message, description, showIcon, onClose, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/components/Alert/index.d.ts

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

package/dist/lib/components/Button/Button.d.ts

@@ -0,0 +1,50 @@
+import { default as React, ButtonHTMLAttributes, ReactNode } from 'react';
+
+export declare enum ButtonSize {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XLARGE = "xlarge"
+}
+export declare const BUTTON_VARIANT: string[];
+export declare const ButtonGroup: (props: any) => import("react/jsx-runtime").JSX.Element;
+export type ButtonProps = {
+    text?: string;
+    size?: string | ButtonSize;
+    variant?: string;
+    iconBefore?: string;
+    iconAfter?: string;
+    iconColor?: string;
+    tooltip?: string;
+    onClick?: (e?: any) => void;
+    onFocus?: () => void;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isCircle?: boolean;
+    isExpanded?: boolean;
+    debounceTime?: number;
+    children?: ReactNode;
+    dataId?: string;
+    'data-testid'?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<{
+    text?: string;
+    size?: string | ButtonSize;
+    variant?: string;
+    iconBefore?: string;
+    iconAfter?: string;
+    iconColor?: string;
+    tooltip?: string;
+    onClick?: (e?: any) => void;
+    onFocus?: () => void;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isCircle?: boolean;
+    isExpanded?: boolean;
+    debounceTime?: number;
+    children?: ReactNode;
+    dataId?: string;
+    'data-testid'?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>, "dataId"> & Partial<{
+    dataId?: string;
+}> & React.RefAttributes<unknown>>;

package/dist/lib/components/Button/index.d.ts

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

package/dist/lib/components/Card/Card.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export type CardProps = {
+    link?: string;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    icon?: string;
+    image?: string;
+    footer?: React.ReactNode;
+    isActive?: boolean;
+    isHorizontal?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLAnchorElement>) => void;
+};
+export declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/lib/components/Card/index.d.ts

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

package/dist/lib/components/Cascader/Cascader.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { CascaderProps as CascaderAntdProps } from 'antd';
+import { DefaultOptionType } from 'antd/es/cascader';
+import { DefaultTheme } from 'styled-components';
+
+type Value = Array<string | number>;
+type CascaderProps<OptionType extends DefaultOptionType> = CascaderAntdProps & {
+    open?: boolean;
+    options?: OptionType[];
+    onChange?: (value: Value | Value[]) => void;
+};
+export declare const tagRender: (theme: DefaultTheme) => (props: {
+    label: ReactNode;
+    value: string;
+    closable: boolean;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Cascader: <OptionType extends DefaultOptionType>({ multiple, options, maxTagCount, onChange, open, ...props }: CascaderProps<OptionType>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Cascader/index.d.ts

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

package/dist/lib/components/Cell/Cell.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+
+type CellProps = {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xsOffset?: number;
+    smOffset?: number;
+    mdOffset?: number;
+    lgOffset?: number;
+    direction?: string;
+    onClick?: () => void;
+    ['data-testid']?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Cell: ({ xs, sm, md, lg, xsOffset, smOffset, mdOffset, lgOffset, direction, children, onClick, ...props }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Cell/index.d.ts

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

package/dist/lib/components/Chart/Chart.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { default as Highcharts } from 'highcharts';
+import { HighchartsReactRefObject } from 'highcharts-react-official';
+
+type ChartProps = {
+    options?: Highcharts.Options;
+    isLoading?: boolean;
+    showError?: boolean;
+    errorContent?: any;
+    dataId?: string;
+    'data-testid'?: string;
+    decimalPoint?: string;
+    thousandsSep?: string;
+    numericSymbols?: string[];
+    months?: string[];
+    shortMonths?: string[];
+    weekdays?: string[];
+    callback?: () => void;
+};
+export declare const Chart: React.ForwardRefExoticComponent<Omit<Omit<ChartProps & React.RefAttributes<HighchartsReactRefObject>, "dataId"> & Partial<{
+    dataId?: string;
+}>, "ref"> & React.RefAttributes<unknown>>;
+export {};

package/dist/lib/components/Chart/index.d.ts

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

package/dist/lib/components/Chart/types.d.ts

@@ -0,0 +1,24 @@
+import { XAxisOptions, YAxisOptions, PlotOptions, PlotSeriesOptions, PlotColumnOptions } from 'highcharts';
+
+type Modify<T, R> = Omit<T, keyof R> & R;
+type ChartXAxisOptions = XAxisOptions & {
+    index?: number;
+    isX?: boolean;
+};
+type ChartYAxisOptions = YAxisOptions & {
+    index?: number;
+};
+export type ChartOptions = Modify<Highcharts.Options, {
+    xAxis?: ChartXAxisOptions | ChartXAxisOptions[];
+    yAxis?: ChartYAxisOptions | ChartYAxisOptions[];
+    plotOptions?: PlotOptions & {
+        series?: PlotSeriesOptions & {
+            grouping?: boolean;
+        };
+        column?: PlotColumnOptions & {
+            borderRadiusTopLeft?: number;
+            borderRadiusTopRight: number;
+        };
+    };
+}>;
+export {};

package/dist/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CheckboxProps as AntCheckboxProps } from 'antd';
+
+export type CheckboxProps = {
+    dataId?: string;
+} & AntCheckboxProps;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<AntCheckboxProps, "dataId"> & Partial<{
+    dataId?: string;
+}> & React.RefAttributes<unknown>>;

package/dist/lib/components/Checkbox/index.d.ts

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

package/dist/lib/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export type ColorPickerProps = {
+    dataId?: string;
+    isLoading?: boolean;
+    placeholder?: string;
+    presetColors?: string[];
+    onChangePicker?: (color: any) => void;
+    onChangeInput?: (e: any) => void;
+    showInput?: boolean;
+    value?: string;
+};
+export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<Omit<ColorPickerProps & React.RefAttributes<HTMLInputElement>, "dataId"> & Partial<{
+    dataId?: string;
+}>, "ref"> & React.RefAttributes<unknown>>;

package/dist/lib/components/ColorPicker/index.d.ts

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

package/dist/lib/components/DataId/DataIdProvider.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export declare const DataIdContext: React.Context<string>;
+export declare const DataIdProvider: {
+    (props: {
+        children: React.ReactNode;
+        dataId: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    context: React.Context<string>;
+};

package/dist/lib/components/DataId/withDataId.d.ts

@@ -0,0 +1,7 @@
+import { default as React, ComponentType } from 'react';
+
+type WithDataIdProps = {
+    dataId?: string;
+};
+export declare const withDataId: <P extends object>(Component: ComponentType<P & WithDataIdProps>, defaultValue: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, "dataId"> & Partial<WithDataIdProps>> & React.RefAttributes<unknown>>;
+export {};

package/dist/lib/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { DatePickerProps } from 'antd';
+import { RangePickerProps } from 'antd/lib/date-picker';
+import { Theme } from '../../utils/theme';
+
+type CommonProps = {
+    lang?: 'en' | 'bg' | 'br' | 'be' | 'ca' | 'da' | 'de' | 'el' | 'es' | 'fi' | 'fr' | 'it' | 'nl' | 'pl' | 'pt' | 'sl' | 'sv' | 'tr' | 'us' | 'zh';
+    dataId?: string;
+    'data-testid'?: string;
+    theme?: Theme;
+};
+export type AntdDatePickerProps = DatePickerProps & CommonProps;
+export declare const AntdDatePicker: React.ForwardRefExoticComponent<Omit<AntdDatePickerProps, "dataId"> & Partial<{
+    dataId?: string;
+}> & React.RefAttributes<unknown>>;
+export type AntdRangePickerProps = RangePickerProps & CommonProps;
+export declare const AntdRangePicker: React.ForwardRefExoticComponent<Omit<AntdRangePickerProps, "dataId"> & Partial<{
+    dataId?: string;
+}> & React.RefAttributes<unknown>>;
+type DatePickerType = {
+    type: 'date' | 'range';
+} & (AntdDatePickerProps | AntdRangePickerProps);
+export declare const DatePicker: ({ type, ...props }: DatePickerType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/DatePicker/datePickerUtils.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from 'antd/lib/locale';
+
+export declare const getLocale: (language: string) => Locale;

package/dist/lib/components/DatePicker/index.d.ts

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

package/dist/lib/components/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+
+export type DividerProps = {
+    vertical?: boolean;
+} & HTMLAttributes<HTMLHRElement>;
+export declare const Divider: ({ vertical, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Divider/index.d.ts

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

package/dist/lib/components/Dots/Dots.d.ts

@@ -0,0 +1,5 @@
+export type DotsProps = {
+    steps: number;
+    size: number;
+};
+export declare const Dots: (props: DotsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Dots/index.d.ts

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

package/dist/lib/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,19 @@
+import { DropDownProps } from 'antd';
+
+type DropdownContent = {
+    text: string;
+    key?: string;
+    icon?: string;
+    dataId?: string;
+    variant?: string;
+    onClick?: (e: any) => void;
+};
+export type DropdownProps = DropDownProps & {
+    dataId?: string;
+    text?: string;
+    icon?: string;
+    variant?: string;
+    content?: DropdownContent[];
+};
+export declare const Dropdown: ({ dataId, trigger, text, placement, menu, icon, content, variant }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/dist/lib/components/Dropdown/index.d.ts

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

package/dist/lib/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,62 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { ButtonSize } from '../index.ts';
+
+export declare enum FieldGroupType {
+    RADIO = "radio",
+    CHECKBOX = "checkbox"
+}
+export declare enum FieldGroupVariant {
+    JOINED = "joined",
+    SPLIT = "split",
+    CUSTOM = "custom"
+}
+type FieldGroupProps<V> = {
+    selectedValues: V;
+    variant?: FieldGroupVariant;
+    values: FieldGroupItem[];
+    size?: ButtonSize;
+    name?: string;
+    vertical?: boolean;
+    onChange?: (e: FieldGroupItem) => void;
+    onFieldClick?: (e: FieldGroupItem) => void;
+    dataId?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type FieldGroupItem = {
+    id: string;
+    label?: ReactNode;
+    icon?: string;
+    name?: string;
+    uniqueId?: string;
+    value: string;
+    tooltip?: string;
+    isDisabled?: boolean;
+};
+export type RadioFieldGroupProps = FieldGroupProps<string | number>;
+export type CheckboxFieldGroupProps = FieldGroupProps<Array<string | number>>;
+export declare const RadioFieldGroup: React.ForwardRefExoticComponent<Omit<{
+    selectedValues: string | number;
+    variant?: FieldGroupVariant;
+    values: FieldGroupItem[];
+    size?: ButtonSize;
+    name?: string;
+    vertical?: boolean;
+    onChange?: (e: FieldGroupItem) => void;
+    onFieldClick?: (e: FieldGroupItem) => void;
+    dataId?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, "dataId"> & Partial<{
+    dataId?: string;
+}> & React.RefAttributes<unknown>>;
+export declare const CheckboxFieldGroup: React.ForwardRefExoticComponent<Omit<{
+    selectedValues: (string | number)[];
+    variant?: FieldGroupVariant;
+    values: FieldGroupItem[];
+    size?: ButtonSize;
+    name?: string;
+    vertical?: boolean;
+    onChange?: (e: FieldGroupItem) => void;
+    onFieldClick?: (e: FieldGroupItem) => void;
+    dataId?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, "dataId"> & Partial<{
+    dataId?: string;
+}> & React.RefAttributes<unknown>>;
+export {};

package/dist/lib/components/FieldGroup/index.d.ts

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

package/dist/lib/components/FormControl/FormControl.d.ts

@@ -0,0 +1,35 @@
+import { default as React, ReactNode } from 'react';
+
+type FormControlProps = {
+    dataId?: string;
+    control: 'Input' | 'Checkbox' | 'Textarea' | 'Select' | 'ColorPicker' | 'DatePicker';
+    name?: string;
+    error?: boolean;
+    success?: boolean;
+    message?: string;
+    options?: any[];
+    value?: any;
+    children?: ReactNode;
+    disabled?: boolean;
+    isLoading?: boolean;
+    checked?: boolean;
+    type?: 'range' | 'date';
+    showInput?: boolean;
+    format?: string;
+    onChange?: any;
+    onFocus?: any;
+    onBlur?: any;
+    onChangeInput?: any;
+    onChangePicker?: (e: {
+        hex: string;
+    }) => void;
+    onDatesChange?: any;
+    initialColor?: string;
+    placeholder?: string;
+    maxLength?: number;
+    rows?: number;
+};
+export declare const FormControl: React.ForwardRefExoticComponent<Omit<Omit<FormControlProps & React.RefAttributes<HTMLElement>, "dataId"> & Partial<{
+    dataId?: string;
+}>, "ref"> & React.RefAttributes<unknown>>;
+export {};

package/dist/lib/components/FormControl/index.d.ts

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