@trafilea/afrodita-components 3.0.7-beta.0 → 4.0.1-beta.1

package/build/dts/core/theme/Theme.d.ts

@@ -0,0 +1,382 @@
+import { CSSProperties, ElementType, FC, ReactNode } from 'react';
+export declare const ThemeProvider: FC<{
+    theme: Theme;
+    children: ReactNode;
+}>;
+export declare const useTheme: () => Theme;
+export declare const ThemeVariables: FC<{
+    theme: any;
+    Container?: ElementType;
+}>;
+export declare const AssetsProvider: FC<{
+    assets: ThemeAssets;
+}>;
+export declare const useThemeAssets: () => ThemeAssets;
+export declare type Theme = {
+    name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: ThemeBreakpoints;
+    colors: ThemeColors;
+    component: ThemeComponent;
+    typography: ThemeTypography;
+    fonts: ThemeFonts;
+    assets: ThemeAssets;
+};
+export declare type ThemeBreakpoints = {
+    mobile: number;
+    desktop: number;
+};
+export declare type ThemeBasicPallete = {
+    color: string;
+    contrast: string;
+};
+export declare type ThemeColorPallete = ThemeBasicPallete & {
+    soft: ThemeBasicPallete;
+};
+declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
+    20: ThemeColorPallete;
+    40: ThemeColorPallete;
+    60: ThemeColorPallete;
+    80: ThemeColorPallete;
+};
+export declare type ThemeColors = {
+    pallete: {
+        primary: ThemeColorPrimaryPallete;
+        secondary: ThemeColorPrimaryPallete;
+    } & Partial<Record<string, ThemeColorPallete>>;
+    shades: {
+        black: ThemeBasicPallete;
+        white: ThemeBasicPallete;
+        5: ThemeBasicPallete;
+        10: ThemeBasicPallete;
+        50: ThemeBasicPallete;
+        100: ThemeBasicPallete;
+        150: ThemeBasicPallete;
+        200: ThemeBasicPallete;
+        250: ThemeBasicPallete;
+        300: ThemeBasicPallete;
+        350: ThemeBasicPallete;
+        400: ThemeBasicPallete;
+        450: ThemeBasicPallete;
+        500: ThemeBasicPallete;
+        550: ThemeBasicPallete;
+        600: ThemeBasicPallete;
+        650: ThemeBasicPallete;
+        700: ThemeBasicPallete;
+        750: ThemeBasicPallete;
+        800: ThemeBasicPallete;
+        850: ThemeBasicPallete;
+        900: ThemeBasicPallete;
+        950: ThemeBasicPallete;
+        990: ThemeBasicPallete;
+    };
+    semantic: {
+        positive: ThemeBasicPallete;
+        urgent: ThemeBasicPallete;
+        attention: ThemeBasicPallete;
+        informative: ThemeBasicPallete;
+    };
+    border: {
+        color: string;
+        disabled: string;
+        highlight: string;
+    };
+    background: {
+        color: string;
+        disabled: string;
+    };
+    text: {
+        color: string;
+        disabled: string;
+    };
+};
+export declare type ThemeComponent = {
+    button: {
+        border: string;
+        borderRadius: string;
+        fontWeight: number;
+        size: {
+            small: {
+                fontSize: string;
+                padding: string;
+            };
+            medium: {
+                fontSize: string;
+                padding: string;
+            };
+            large: {
+                fontSize: string;
+                padding: string;
+            };
+        };
+        primary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        secondary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+    };
+    input: {
+        background: string;
+        color: string;
+        placeholderColor: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        padding: string;
+        lineHeight: string;
+        border: string;
+        boxShadow: string;
+    };
+    inputCustom: {
+        button: {
+            borderRadius: string;
+        };
+        input: {
+            borderRadius: string;
+        };
+    };
+    selector: {
+        size: {
+            small: {
+                padding: string;
+                borderRadius: string;
+            };
+            medium: {
+                padding: string;
+                borderRadius: string;
+            };
+        };
+        default: {
+            fontWeight: number;
+            border: string;
+            background: string;
+            color: string;
+        };
+        hover: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
+        disabled: {
+            border: string;
+        };
+        fontSize: string;
+    };
+    rating: {
+        fontWeight: number;
+        size: {
+            xsmall: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    card: {
+        borderRadius: string;
+    };
+    radio: {
+        borderColor: string;
+        background: string;
+        size: {
+            small: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            medium: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            large: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+        };
+    };
+    label: {
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        lineHeight: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    checkbox: {
+        background: string;
+        borderColor: string;
+        active: {
+            background: string;
+        };
+        size: {
+            large: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            medium: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            small: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+    accordion: {
+        variant: {
+            box: {
+                container: {
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+            simple: {
+                container: {
+                    borderTop: string;
+                    borderBottom: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+        };
+    };
+    dropdown: {
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        padding: string;
+        color: string;
+        fill: string;
+        options: {
+            borderColor: string;
+            color: string;
+        };
+    };
+};
+export declare type ThemeTypography = {
+    config: {
+        weight: {
+            heavy: number;
+            bold: number;
+            demi: number;
+            regular: number;
+        };
+    };
+    variants: Record<string, CSSProperties>;
+};
+export declare type ThemeFonts = {
+    url: string;
+    config: Array<{
+        src: string;
+        family: string;
+        weight?: number | string;
+        style?: string;
+        stretch?: string;
+    }>;
+};
+export declare type ThemeAssets = {
+    images: {
+        favicon: string;
+        logo: string;
+    };
+    [key: string]: any;
+};
+export {};

package/build/dts/core/theme/Theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/dts/core/theme/shapermint.theme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from 'src/core/theme/Theme';
+declare const shapermint: Theme;
+export default shapermint;

package/build/dts/core/theme/theme.helpers.d.ts

@@ -0,0 +1,13 @@
+import { Theme, ThemeBasicPallete, ThemeColorPallete } from './Theme';
+export declare function color(color: string, contrast: string, softColor: string, softContrast: string): ThemeColorPallete;
+export declare function basic(color: string, contrast: string): ThemeBasicPallete;
+export declare const applyVariablesIntoTheme: (theme: Theme) => Theme;
+export declare const variablesToObject: (variables: Record<string, any>, theme: Theme) => Theme;
+export declare const transformToVariables: (prefix: string, variables: Record<string, any>, theme: Record<string, any>, pending: Record<string, any>) => void;
+export declare const stringify: (variables: Record<string, string>) => string;
+export declare const transformThemeIntoVariables: ({ name, fonts, ...theme }: Theme) => string;
+export declare const transformFonts: (fonts: {
+    url: string;
+    config: Theme['fonts']['config'];
+}) => string;
+export declare const inline: (text: string) => string;

package/build/dts/core/theme/truekind.theme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './Theme';
+declare const truekind: Theme;
+export default truekind;

package/build/dts/hooks/WindowDimensions.d.ts

@@ -0,0 +1,8 @@
+import { ThemeBreakpoints } from 'src/core/theme/Theme';
+export declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
+    isMobile: boolean;
+    windowDimensions: {
+        width: number;
+        height: number;
+    };
+};

package/build/dts/hooks/click-outside.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
+export default useOnClickOutside;

package/build/dts/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import useOnClickOutside from './click-outside';
+import { useWindowDimensions } from './WindowDimensions';
+export { useOnClickOutside, useWindowDimensions };

package/build/dts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './core/theme/Theme';
+export * from './types/enums';
+export * from './types/types';
+export * from './hooks';

package/build/dts/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/dts/types/enums.d.ts

@@ -0,0 +1,21 @@
+export declare enum CardSectionType {
+    Header = 0,
+    Footer = 1
+}
+export declare enum ComponentSize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XSmall = "xsmall"
+}
+export declare enum ComponentPosition {
+    Top = 0,
+    Bottom = 1,
+    Left = 2,
+    Right = 3
+}
+export declare enum InputValidationType {
+    Error = 0,
+    Valid = 1,
+    Empty = 2
+}

package/build/dts/types/types.d.ts

@@ -0,0 +1,81 @@
+import { IconType } from '../components/icons';
+import { ComponentSize } from './enums';
+export interface IconProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+    title?: string;
+}
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export interface CTAProps {
+    onClick: () => void;
+    disabled?: boolean;
+    wide?: boolean | false;
+    size?: ComponentSize;
+    text: string;
+    type?: ButtonType;
+    className?: string;
+}
+export declare type DropdownOption<T> = {
+    key: string;
+    label: string;
+    value: T;
+    disabled: boolean;
+};
+export declare type SizeOption = {
+    label: string;
+    description: string;
+    disabled?: boolean;
+};
+export declare type Color = {
+    primaryColor: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+};
+export declare type Pattern = {
+    url: string;
+};
+export declare type ColorPickerOption = {
+    label: string;
+    color?: Color;
+    pattern?: Pattern;
+};
+export declare type RadioGroupOption = {
+    value: string;
+    label: string;
+};
+export declare type ImageType = {
+    key: string;
+    imageUrl: string;
+    alt: string;
+};
+export interface IconWithOpacityProps extends IconProps {
+    opacity?: number;
+}
+export interface WithTestId {
+    dataTestId?: string;
+}
+export declare type DropdownListIconsItem = {
+    Icon: IconType;
+    items: DropdownListIconsSubItem[];
+};
+export declare type DropdownListIconsSubItem = {
+    description: string;
+    callback: () => void;
+};
+export declare type Filter = {
+    title: string;
+    columns: number;
+    isOpenByDefault?: boolean;
+    items: string[];
+};
+export declare type FilterChange = {
+    sectionIndex: number;
+    itemIndex: number;
+    checked?: boolean;
+};
+export interface SearchBarOptionItem {
+    src: string;
+    price: string;
+    title: string;
+}

package/build/dts/utils/dateFormatter/dateFormatter.d.ts

@@ -0,0 +1 @@
+export declare function formatDate(date: Date): string;

package/build/dts/utils/dateFormatter/dateFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/dts/utils/decimalParser/decimalParser.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @returns number formatted with "," and 2 decimals as string
+ */
+export declare const decimalFormat: (number: number) => string;

package/build/dts/utils/decimalParser/decimalParser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/dts/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './decimalParser/decimalParser';
+export * from './validations/validations';
+export * from './simulateClick/simulateClick';
+export * from './sliceString/sliceString';

package/build/dts/utils/media.d.ts

@@ -0,0 +1,7 @@
+import facepaint from 'facepaint';
+import { Theme } from 'src/core/theme/Theme';
+interface MediaQueriesProps {
+    theme: Theme;
+}
+export declare const mediaQueries: ({ theme }: MediaQueriesProps) => facepaint.DynamicStyleFunction;
+export {};

package/build/dts/utils/simulateClick/simulateClick.d.ts

@@ -0,0 +1 @@
+export declare const simulateMouseClick: (element: HTMLElement) => void;

package/build/dts/utils/simulateClick/simulateClick.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/dts/utils/sliceString/sliceString.d.ts

@@ -0,0 +1 @@
+export declare const sliceString: (str: string, maxLength: number) => string;

package/build/dts/utils/sliceString/sliceString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/dts/utils/validations/validations.d.ts

@@ -0,0 +1,5 @@
+export declare const isEmpty: (value: string) => boolean;
+export declare const isEmail: (value: string) => boolean;
+export declare const isNumber: (value: string) => boolean;
+export declare const isPhoneNumber: (value: string) => boolean;
+export declare const isValidDate: (value: string) => boolean;

package/build/dts/utils/validations/validations.test.d.ts

@@ -0,0 +1 @@
+export {};