@piximind/ds-p-23 v1.10.6

Installation

Using npm

npm i @piximind/ds-p-23

Pre requirements

npm i react react-dom 
npm i react-popper 
npm i react-icomoon 
npm i @piximind/custom-hook 
npm i @piximind/validation 
npm i moment 
npm i react-number-format

Usage

Import css

import '@piximind/ds-p-23/lib/main.css'

Font css

default font : Lato

Class css

width

   number 1 -> 200

height

   number 1 -> 200

margin

   number 1 -> 200

padding

number 1 -> 200

opacity

number 1 -> 10

Color css

Primary

Secondary

Secondary

    
$white: #fff;
$dark: #000;
$grey: #b3b3b3;
$grey50: #eaeeeb;
$quaternary: #e0004d;
$quaternaryLighter: #f5afc7;
$quaternaryDarker: #a10038;
$quaternary50 : #FCDFEA;
$quaternary100 : #FFCFDF;
$quaternary200 : #F5B1C9;
$quaternary300 : #F696B7;
$quaternary500 : #E94D82;
$quaternary700 : #C20143;
$quaternary800 : #910133;
$success900: #14532d;
$success800: #166534;
$success700: #15803d;
$success600: #16a34a;
$success500: #22c55e;
$success400: #4ade80;
$success300: #86efac;
$success200: #bbf7d0;
$success100: #dcfce7;
$success50: #f0fdf4;
$warning900: #78350f;
$warning800: #92400e;
$warning700: #b45309;
$warning600: #d97706;
$warning500: #f59e0b;
$warning400: #fbbf24;
$warning300: #fbd34d;
$warning200: #fde68a;
$warning100: #fef3c7;
$warning50: #fffbeb;
$error900: #7f1d1d;
$error800: #991b1b;
$error700: #b91c1c;
$error600: #dc2626;
$error500: #ef4444;
$error400: #f87171;
$error300: #f87171;
$error200: #fecaca;
$error100: #fee2e2;
$error50: #fef2f2;
$neutral900: #1d324a;
$neutral800: #283c53;
$neutral700: #34475c;
$neutral600: #3f5165;
$neutral500: #536375;
$neutral400: #8e98a4;
$neutral300: #c9ced4;
$neutral200: #dfe2e6;
$neutral100: #f1f3f4;
$neutral50: #f8f9fa;
$neutral25: #e5e7eb;
$transparent: transparent;

Color cssClass

    text color -> ds-text-{$colorName}
    background color -> ds-bg-{$colorName}
    font-weight ->ds-text-weight{100 -> 900} // incrementation par 100
    font-size -> ds-text-size-{1 -> 200}
    line-height -> ds-text-line-{1 -> 200}
    border-radius -> ds-borad-{1 -> 200}
    ds-border-radius-10 -> {border-radius: 50px;}

Flex cssClass

    .ds-flex {
        display: flex;
    }
    .ds-flex-col {
        display: flex;
        flex-direction: column;
    }

    .ds-center {
        justify-content: center;
        align-items: center;
    }

    .ds-justify-center {
        justify-content: center;
    }

    .ds-justify-end {
        justify-content: flex-end;
    }

    .ds-justify-start {
        justify-content: flex-start;
    }

    .ds-align-center {
        align-items: center;
    }

    .ds-align-end {
        align-items: flex-end;
    }

    .ds-align-start {
        align-items: flex-start;
    }

    .ds-justify-between {
        justify-content: space-between;
    }

    .ds-justify-around {
        justify-content: space-around;
    }

    .ds-flex-wrap {
        flex-wrap: wrap;
    }

    .ds-align-baseline {
        align-items: baseline;
    }
    .ds-flex-grow1{
        flex-grow: 1;
    }

Logo List

[ piximindLogoLarge ,
  piximindLogoSmall , 
  piximindIconSmall ,
  piximindIconLarge , 
  iconGoole ,
  iconTwitter ,
  iconLinkedin ,
  iconWatsapp ,
  iconFacebook ,
  iconTumblr
]

Blur cssClass

    {background: none; backdrop-filter: blur(0px);} -> ds-blur0
    {background: rgba(17,24,39,0.2); backdrop-filter: blur(8px);} -> ds-blur1
    {background: rgba(17,24,39,0.2); backdrop-filter: blur(16px);} -> ds-blur2
    {background: rgba(17,24,39,0.2); backdrop-filter: blur(24px);} -> ds-blur3
    {background: rgba(17,24,39,0.2); backdrop-filter: blur(40px);} -> ds-blur4

box-shadow cssClass

{box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);} -> ds-box-shadow1

{box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -2px rgba(16, 24, 40, 0.1);} -> ds-box-shadow2

{box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1);} -> ds-box-shadow3

{box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1);} -> ds-box-shadow4 

{box-shadow: 0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16,24, 40, 0.1);} -> ds-box-shadow5 

{box-shadow: 0px 25px 50px -12px rgba(16, 24, 40, 0.1)} -> ds-box-shadow6 

Text

    <Text />

Props

    enum TextType {
        "type-1" = "type-1",
        "type-2" = "type-2",
        "type-3" = "type-3",
        "type-4" = "type-4",
        "type-5" = "type-5",
        "type-6" = "type-6",
        "subtitle-1" = "subtitle-1",
        "subtitle-2" = "subtitle-2",
        "body-1" = "body-1",
        "body-2" = "body-2",
        "btn-text" = "btn-text",
        "caption" = "caption",
        "overline" = "overline",
    }



    interface ITextProps extends React.HTMLProps<HTMLElement> {
        isLabel?: boolean;
        isSpan?: boolean;
        text?: string;
        id?: string;
        isLoading?: boolean;
        bsPrefix?: string;
        type?: TextType;
        weight?: string;
    }

PlaceHolder

    <PlaceHolder />

Props

    interface IAtomPlaceHolder {
        className?: string;
        style?: object | undefined | null;
    }

Input

    <Input />

Props

    enum ETypesInput {
        password = 'password',
        text = 'text'
    }
    enum ESizeInput {
        small = 'small',
        medium = 'medium',
        large = 'large',
    }
    interface IElementIcon {
        icon: string,
        className?: string,
        style?: Object,
        color?: string,
        size?: number | string,
        isLeft?: boolean,
        onClick?: any
    }
    interface IListIcons extends Array<IElementIcon> { }
    interface IMolInputProps extends React.HTMLProps<HTMLElement> {
        className?: string,
        id?: string,
        value?: string,
        type?: ETypesInput,
        inputSize?:ESizeInput,
        placeholder?:string,
        onChange?: Function,
        disabled?: boolean,
        isInvalid?: boolean,
        isValid?: boolean,
        bsPrefix?:string,
        containerClassName?: string,
        listIcons?: IListIcons
        label?: string,
        labelClassName?: string
        error?: string,
        errorClassName?: string,
        success?: string
        successClassName?: string,
        isPassword?: boolean,
        isSelect?: boolean,
        selectValue?: Array<string>
        selectOption?: Array<{ label: string, value: string }>,
        onChangeSelect?: Function,
        isMulti?: boolean,
        isClerable?: boolean,
        onClear?: Function,
        isSearch?: boolean,
        messageNoOptions?: string
        onKeyPress: Function
        onFocusChange?:Function
    }

Button

    <Button />

Props

    export enum Type {
        primary = "primary",
        secondary = "secondary",
    }

    export enum Size {
        small = "small",
        medium = "medium",
        large = "large",
    }

    interface IMoleculeButton {
        className?: string | undefined
        style?: Object
        onClick?: Function | undefined,
        children?: React.ReactNode | React.ReactNode[] | string
        type?: Type
        disabled?: boolean
        isRadius?: boolean
        size?: Size
        bsPrefix?: string | undefined
        isRightIcon?: boolean,
        text?: string,
        isLoading?: boolean
        icon?: string | undefined,
        iconClassName?:string,
        iconStyle?:Object,  
        iconSize?:string | number | undefined
        iconColor?:string,
    }

Icon

    <Icon />

Props

    interface IAtomIcon  {
        id?:string
        icon?: string | undefined,
        className?:string,
        color?:string,
        style?:Object,  
        size?:string | number | undefined
        onClick?:Function
    }

Spinner

    <Spinner />

Props

    interface IAtomSpinner {
        width?: number | string | undefined,
        height?: number | string | undefined,
        className?: string | undefined,
        color?: string,
        type?: Type
    }

Radio:

    < Radio />

Props:

    interface IAtomRadio {
        disabled?: boolean | undefined,
        className?: string | undefined,
        labelClassName?: string | undefined,
        label?: string | undefined,
        bsPrefix?: string | undefined,
        labelBsPrefix?: string,
        onClick?: any,
        isValid?: boolean,
        isInvalid?: boolean,
        containerClassName?: string,
        name?: string,
        value?: string,
        isVertical : boolean,
        data?: Array<{
        label: string;
        value: string;
        }>
    }
        export enum Type {
        switch = "switch",
        checkbox = "checkbox",
        
    }

Checkbox:

    <Checkbox />

Props:

    interface IAtomCheckbox {
        disabled?: boolean | undefined,
        className?: string | undefined,
        checked?: boolean | undefined,
        labelClassName?: string | undefined,
        label?: string | undefined,
        type?: Type | undefined,
        bsPrefix?: string | undefined
        labelBsPrefix?: string,
        onClick?: any,
        isValid?: boolean
        isInvalid?: boolean,
        containerClassName?: string
    }

Avatar:

    <Avatar />

Props:

    export enum Size {
        small = "16",
        medium = "32",
        large = "48",
        xlarge = "64",
        xxlarge = "80",
    }

    interface IAtomAvatar {
        className?: string | undefined
        textClassName?: string | undefined
        containerClassName?: string | undefined
        statusClassName?: string | undefined

        style?: object
        alt?: string | undefined
        src?: string | undefined
        size?: Size

        text?: string | undefined
        isImage?: boolean
        status?: boolean
        isActive?: boolean

        bsPrefix?: string | undefined
        textBsPrefix?: string | undefined
        statusBsPrefix?: string | undefined
        containerBsPrefix?: string | undefined
    }

Navbar:

    <Navbar />

Props:

    enum NavbarPosition {
        left = "left",
        right = "right",
        center = "center",
    }
    interface IIconNavbar extends IAtomIcon{
        isAvatar?: boolean
        img?: string
    }
    interface IMoleculeNavbar {
        className?: string,
        onClick?: any
        withButton?: boolean,
        btnText?: string,
        links?: Array<{
        label: string;
        path: string;
        sousLinks?: Array<{
        label: string;
        path: string;
        }>
        }>
        position: NavbarPosition
        withIcon?: boolean
        icons?: Partial<IIconNavbar>[]
        withOptionsList: boolean
        optionsList: {
           selectOption: { label: string; value: string; }[]
           selectValue: string[] 
           containerClassName: string
           className: string
           onChangeSelect: Function
        }
        optionsClassName: string
        isLogout: boolean
        logout: IAtomIcon
    }

Pricing:

    <Pricing />

Props:

    interface IMoleculePricing {
        className?: string,
        bsPrefix?: string,
        containerClassName?: string,
        containerBsPrefix?: string,
        iconClassName?: string,
        withTitle?: boolean,
        title?: string,
        description?: string,
        onClick?: any,

        data?: Array<{
        title: string;
        price: string;
        description?: string,
        recommended?: boolean,
        priceLabel: string;
        list?: Array<{
        text: string;
        checked: boolean;
        }>
        }>
    }

Stepper:

    <Stepper />

Props:

    interface IMoleculeStepper {
        containerClassName?: string
        bsPrefix?: string
        isVertical?: boolean;
        withLike?: boolean;
        children?: any
        titleClassName?: string
        textClassName?: string
        className?: string
        containerBsPrefix?: string
        onChange?: Function,
        step?: number | null
        data?: Array<{
        title: string;
        text: string;
    }>

Portal:

    <Portal />

Props:

    interface IAtomPortal extends React.HTMLProps<HTMLElement> {
        container?: Element | DocumentFragment
    }

Label:

    <Label />

Props:

    enum TypeLabel {
        "Progress" = "In Progress",
        "Completed" = "Completed",
        "Pending" = "Pending",
        "Approved" = "Approved",
        "Rejected" = "Rejected",
    }

    interface IAtomLabel {
        className?: string 
        style?: object
        onClick?: any,
        typeLabel?: TypeLabel
        bsPrefix?: string 
        primary?: boolean
    }

TextArea:

    <TextArea />

Props:

    interface ITextAreaProps extends React.HTMLProps<HTMLElement> {
        isInvalid?: boolean,
        isValid?: boolean,
        ref?: React.Ref<HTMLTextAreaElement>,
        bsPrefix?: string
        rows?: number
    }
    interface IMoleculeTextArea extends ITextAreaProps, IInputMessage {
        containerClassName?: string,
        ref?: | React.Ref<HTMLTextAreaElement>
    }

Table:

    <Table />

Props:

    interface IElementHeader {
        key: string,
        label: string,
        isSort?: boolean,
        isUser?: boolean,
        isDate?: boolean,
        isStatus?: boolean,
        isNotFilledStatus?: boolean,
        withAvatar?: boolean,
        avatarDataKey?: string
        isCustom?: boolean
        renderCustom?: Function
        dateFormat?: string
    }

    interface IListHeader extends Array<IElementHeader> { }

    interface IElementData {
        [key: string]: string | number | string[] | Date
    }

    interface IListData extends Array<IElementData> { }
   
    interface IListActions extends Array<IActionsTable> { }
    
    interface IActionsTable {
        label?: string
        icon?: string,
        onClick: Function,
        isDisplayed: boolean
    }
    
    interface IOrganismTable {
        containerClassName?: string,
        className?: string,
        headers?: IListHeader,
        data?: IListData,
        withCheckox?: boolean,
        onSelect?: Function,
        listSelectedElement?: Array<string>,
        onSort?: Function,
        actions(index: number)?: IListActions,
        withPagination?: boolean,
        numberOfPage?: number,
        isRightPagination?: boolean,
        iconNavigation?: boolean,
        maxElementInPagination?: number,
        paginationContainerClassName?: string,
        page?: number,
        onPaginate?: Function,
        ligneHeight? : string,
        lang?: ELang
    }

    enum ELang {
        fr = 'fr',
        en = 'en'
     }

Data & headers samples :

    headers={[
                {
                    key: "firstName",
                    label: "Prénom",
                    isSort: true,
                    withAvatar: true,
                    avatarDataKey: 'avatar'

                },
                {
                    key: "lastName",
                    label: "Nom",
                    isSort: true
                },
                {
                    key: "date",
                    label: "Date",
                    isSort: true,
                    isDate: true,
                    dateFormat: "dddd, MMMM Do YYYY, h:mm:ss a"
                },
                {
                    key: "users",
                    label: "Users",
                    isUser: true
                },
                {
                    key: "status",
                    label: "Status",
                    isStatus: true,
                    isNotFilledStatus: true,
                    isSort: true
                },
                {
                    key: "action",
                    label: "Actions"
                },
            ]},
    data: [
        {
            firstName: "xxxx",
            lastName: 'xxxxx',
            date: "12/12/2022",
            avatar: 'https://static.vecteezy.com/ti/vecteur-libre/t1/2275847-male-avatar-profil-icone-de-souriant-caucasien-homme-vectoriel.jpg',
            users: ['https://static.vecteezy.com/ti/vecteur-libre/t1/2275847-male-avatar-profil-icone-de-souriant-caucasien-homme-vectoriel.jpg'],
            status: 'Completed',
            _id: 1,
        },
        {
            firstName: "yyyyyy",
            lastName: 'yyyyy',
            date: "13/12/2022",
            avatar: 'https://www.w3schools.com/howto/img_avatar.png',
            users: ['https://static.vecteezy.com/ti/vecteur-libre/t1/2275847-male-avatar-profil-icone-de-souriant-caucasien-homme-vectoriel.jpg', 'https://www.w3schools.com/howto/img_avatar.png'],
            status: 'Pending',
            _id: 2,
        },
        {
            firstName: "zzzzzz",
            lastName: 'zzzzzz',
            date: "18/01/2023",
            avatar: 'https://www.w3schools.com/w3images/avatar2.png',
            users: ['https://static.vecteezy.com/ti/vecteur-libre/t1/2275847-male-avatar-profil-icone-de-souriant-caucasien-homme-vectoriel.jpg', 'https://www.w3schools.com/howto/img_avatar.png', 'https://www.w3schools.com/howto/img_avatar.png'],
            status: 'Rejected',
            _id: 3,
        },
    ]
}

Tab:

    <Tab />

Props:

    interface IMoleculeTab extends React.HTMLProps<HTMLElement> {
        tabClassName?: string | undefined;
        onClick?:Function;
        onFocus?:Function;
        list?: itemsList;
        bsPrefix?:string;
        isTopTab?:boolean;
        isBlockTab?:boolean;
        selectedIndex?:number
    }
    enum TabType {
    primary = "primary",
    secondary = "secondary",
}

    type itemsList=Array<{
    label:string,
    }>

Container:

    <Container />

Props:

interface IAtomContainer {
        className?: string,
        children?: ReactNode,
        style?: object
    }

Row:

    <Row />

Props:

interface IAtomContainer {
        className?: string,
        children?: ReactNode,
        style?: object
    }

Col:

    <Col />

Props:

interface IATomCol extends IAtomContainer {
    xs?: number | string
    sm?: number | string
    md?: number | string
    lg?: number | string
    xl?: number | string
    xxl?: number | string
    col?: number | string
}
xs	<576px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1400px

Sidebar:

    <Sidebar />

Props:

   export type Items = Array<{
    label?: string,
    path?: string,
    icon?: string,
    subItems?: SubItem,
    isClicked?: boolean,
    isLeftSecondaryIcon?: boolean,
}>
export type ListItems = Array<{
    category?: string,
    items?: Items,
    recently?: string[],
}>
export type UserDetails = Array<{
    title: string,
    userDetails: Items,
    isDotshorizontal?: boolean
}>
export enum SidebarType {
    type1 = 'type1',
    type2 = 'type2',
    type3 = 'type3'
}
export interface IOrganismSidebar {
    type: SidebarType,
    logo?: any,
    avatar?: any,
    userName?: string
    items: Items;
    subItems: string[];
    isUserSelected?: boolean;
    text?: string;
    classNameHeader?: string;
    containerClassName?: string;
    contentItems: ListItems;
    isRightBar: boolean,
    selectedItem?: number,
    buttonText?: string,
    children?: JSX.Element | JSX.Element[],
    favorite?: FavoriteType,
    notifications?:NotifcationType,
    activities?:ActivityType,
    contacts?:ActivityType,
}
export type FavoriteType = Array<{
    label: string,
    items: string[]
}>
export type NotifcationType = Array<{
    label: string,
    time: string,
    icon:string,
}>
export type ActivityType = Array<{
    label: string,
    time?: string,
    avatar:string,
}>
export type SubItem = Array<{
    label?: string,
}>

Modal:

    <Modal>
    </Modal>

Props:

export interface IMoleculeModal {
    children?: ReactNode,
    withCloseIcon?: boolean,
    withSubmitAction?: boolean
    withCloseAction?: boolean
    btnSubmitProps?: IMoleculeButton
    btnResetProps?: IMoleculeButton
    contentClassName?: string
    containerClassName?: string
    containerBtnClassName?: string
    ref: ModalRefType,
    onExit?: Function
    onShow ?: Function
}
export interface ModalRefType {
    onClose: () => void,
    onOpen: () => void,
    containerRef?: React.MutableRefObject<HTMLDivElement>;
    contentRef?: React.MutableRefObject<HTMLDivElement>;
}

DatePicker:

  <DatePicker/>

Props:

interface IMoleculeDatepicker extends IInputMessage {
    isYear?: boolean;
    isRange?: boolean;
    containerClassName?: string
    placeholder?: string
    onChange?: Function,
    value?: Date | null,
    start?: Date | null
    end?: Date | null,
    inputSize?: ESizeInput,
    isInvalid?: boolean,
    isValid?: boolean,
    minDate?: Date | null,
    maxDate?: Date | null,
}

InputFile:

  <InputFile/>

Props:

export const enum TypeInputFile {
    type1 = 'type1',
    type2 = 'type2',

}
export const enum EInputAccept {
    png = "png",
    jpg = "jpg",
    gif = "gif",
    svg = "svg",
    jpeg = "jpeg",
    txt = "txt",
    pdf = "pdf",
    xlsx = "xlsx",
    docx = "docx"
}
export interface IFile extends File {
    path?: string
}

export interface IAtomInputFile extends IInputMessage {
    bsPrefix?: string,
    className?: string,
    containerClassName?: string,
    onChange?: Function,
    isInvalid?: boolean,
    isValid?: boolean,
    isDisabled?: boolean,
    type?: TypeInputFile,
    files?: IFile[],
    isMulti?: boolean,
    id?: string
    text?: string,
    onClickFile?: Function
    accept?: EInputAccept[]
}

Progressbar:

  <Progressbar/>

Props:

enum ESizeProgressBar {
    small = "small",
    medium = "medium",
    larg = "lang",
}
enum ETypeProgressBar {
    success = "success",
    warning = "warning",
    error = "error",
}
interface IAtomProgressbar {
    className?: string;
    height?: number;
    width?: number;
    size?: ESizeProgressBar,
    type?: ETypeProgressBar,
    percent: number
    withDot?: boolean
}

InputNumber:

  <NumberInput />

Props:

import { InputAttributes } from "react-number-format"
import { ESizeInput } from "../IAtomInput/IAtomInput"

enum EthousandsGroupStyle {
    thousand = 'thousand',
    lakh = 'lakh',
    wan = 'wan',
    none = 'none'
}

enum EDisplayType {
    input = 'input',
    text = 'text'
}

interface IAtomNumber {
    thousandsGroupStyle?: EthousandsGroupStyle,
    decimalSeparator?: string,
    thousandSeparator?: string,
    prefix?: string,
    suffix?: string,
    disabled?: boolean,
    readOnly?: boolean,
    value?: number | string | null,
    placeholder?: string,
    id?: string,
    displayType?: EDisplayType,
    customInput?: React.ComponentType<InputAttributes>,
    valueIsNumericString?: boolean,
    allowLeadingZeros?: boolean,
    allowNegative?: boolean,
    className?: string,
    onChange?: Function,
    bsPrefix?: string,
    inputSize?: ESizeInput,
    isInvalid?: boolean,
    isValid?: boolean,
}

interface IMoleculeNumber extends IAtomNumber {
    containerClassName?: string,
    label?: string,
    labelClassName?: string,
    success?: string,
    successClassName?: string,
    error?: string,
    errorClassName?: string,
}