playtpus_ui/src/components/generator.ts

React Component Libary

import { primaryTxtColor,   mobileWidth } from '../config';
import { Ref } from 'react';

export interface GridStyle {
    cols? : number | string | undefined;
    rows? : number | string;
    customCols? : string;
    customRows? : string;
    gridGap? : number | string;
    mobileCols? : string;
    mobileLayout? : boolean;
    placeItems? : string, 
    hideOnMobile? : boolean,
};

export const gridStyle = ({ cols, customCols, customRows, gridGap, mobileCols, mobileLayout, placeItems, hideOnMobile }: GridStyle)=>`
    display: grid;
    grid-gap: ${gridGap || '1em'} ;
    grid-template-columns: repeat(${cols ? cols : "1"}, 1fr);
    ${customCols? `grid-template-columns: ${customCols};`: ``}
    ${customRows? `grid-template-rows: ${customRows};` : ``}
    place-items: center;
    ${placeItems? `place-items: ${placeItems};` : ``}
    @media(max-width: ${mobileWidth}){
        ${hideOnMobile? `display: none; !important` : ''}
        ${mobileLayout !== false?  `grid-template-columns: 1fr;` : ``}
        ${mobileCols? `grid-template-columns: ${mobileCols};` : ``}  
    }
`;


export interface FontStyle {
    size? : number | string | undefined;
    color? : string;
    bold? :boolean;
    textAlign? :  number | string;
    placeSelf? : string,
    textShadow? : string,
};

export const fontStyle = ({ color, size, bold, textAlign,  placeSelf, textShadow } : FontStyle | any, darkMode : boolean)=>`
    text-align: ${textAlign || 'center'};
    ${`color : ${color || primaryTxtColor}`};
    font-size: ${size || '1em'};
    ${textShadow? `text-shadow: 1.2px 1.2px 2px black;` : ""}
    font-weight: ${bold ? `bolder` : 'normal'};
    ${placeSelf? `place-self: ${placeSelf};` : ''}`;

export interface SizeStyle {
    width? : number | string | undefined;
    height? : number | string;
    max? : boolean;
    padding? :  number | string;
    margin? :  number | string,
    minWidth? :  number | string,
};

export const sizeStyle = ({width, height, max, padding, margin, minWidth} : any)=>`
    width: ${width || "auto"};
    min-width : ${minWidth || "auto"};
    height: ${height || "auto"};
    margin: ${margin || "0"} ;
    padding: ${padding || "0"};

`;

export interface DesignStyle {
    shadow? : boolean;
    rounded? : boolean;
    bg? : string;
    background? : string;
    cursor? :  string;
    hideOnMobile? : boolean,
};

export const designStyle = ({shadow, rounded, bg, background, hideOnMobile, cursor} : DesignStyle)=>`
    ${shadow? `box-shadow: 0 .25em .5em rgba(0,0,0,.5);` : ""}
    pointer : ${cursor? 'cursor': 'default'};
    transition: 200ms ease-out;
    border-radius: ${rounded? '1.2em' : `.25em`};
    border: 0px;
    ${background?  `background: ${background};` : ""}
    background-repeat: no-repeat;
    @media(max-width: ${mobileWidth}){
        ${hideOnMobile? `display: none;` : ''}
    }
`;

export interface ElementProps {
    className? : string;
    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
    style?: React.CSSProperties;
    ref? : Ref<any>
};


export const elementProps = (props: ElementProps | any) => {
    const {style, className, onClick, ref}  = props;
    const property = {...style? { style }: {}, ...className? {className} : {}, ...onClick? {onClick} : {}, ...ref? ref: {}};
    return property;
}