wini-web-components 0.3.0 → 0.4.0

package/src/component/slider/slider.tsx

@@ -1,87 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import AwesomeSlider from 'react-awesome-slider';
-import 'react-awesome-slider/dist/styles.css';
-import './slider.css';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircleChevronLeft, faCircleChevronRight } from '@fortawesome/free-solid-svg-icons';
-
-interface SliderProps {
-    children?: Array<ReactNode>,
-    autoPlay?: boolean,
-    /** default: 2000ms */
-    duration?: number,
-    className?: string,
-    iconSize?: number | string,
-    iconColor?: string,
-    prevButton?: ReactNode,
-    nextButton?: ReactNode,
-    style?: CSSProperties,
-    buttons?: boolean,
-    onChage?: (i: number) => void
-}
-
-interface SliderState {
-    page: number
-}
-
-export class CustomSlider extends React.Component<SliderProps, SliderState> {
-    private intervalPlay: any
-    constructor(props: SliderProps) {
-        super(props)
-        props.buttons ??= true
-        this.state = {
-            page: 0
-        }
-        this.autoPlay = this.autoPlay.bind(this)
-    }
-
-    nextPage = () => {
-        let index = this.state?.page ?? 0;
-        if (this.props?.children && (index + 1) < this.props.children.length) {
-            this.setState({ page: index + 1 })
-            if (this.props.onChage) this.props.onChage(index + 1)
-        }
-    }
-
-    previousPage = () => {
-        let index = this.state?.page ?? 0;
-        if (this.props?.children && index > 0) {
-            this.setState({ page: index - 1 })
-            if (this.props.onChage) this.props.onChage(index - 1)
-        }
-    }
-
-
-    private autoPlay = () => {
-        let index = this.state?.page ?? 0;
-        if (this.props?.children && (index + 1) === this.props.children.length)
-            index = -1
-        this.setState({ page: index + 1 })
-        if (this.props.onChage) this.props.onChage(index + 1)
-    }
-
-    componentDidMount(): void {
-        if (this.props.autoPlay) this.intervalPlay = setInterval(this.autoPlay, this.props.duration ?? 2000)
-    }
-
-
-
-    componentDidUpdate(prevProps: Readonly<SliderProps>, prevState: Readonly<SliderState>): void {
-        if (this.props.autoPlay !== prevProps.autoPlay && !this.props.autoPlay) clearInterval(this.intervalPlay)
-    }
-
-    render() {
-        return <AwesomeSlider
-            style={this.props.style}
-            className={`custom-slider-container ${this.props.className ?? ''}`}
-            selected={this.state.page}
-            bullets={false}
-            buttons={this.props.buttons ? (this.props.children && this.props.children?.length > 1) : false}
-            organicArrows={false}
-            buttonContentLeft={this.props.prevButton ?? <FontAwesomeIcon icon={faCircleChevronLeft} style={{ color: this.props.iconColor ?? '#ffffff', fontSize: this.props.iconSize ?? '2.4rem' }} />}
-            buttonContentRight={this.props.nextButton ?? <FontAwesomeIcon icon={faCircleChevronRight} style={{ color: this.props.iconColor ?? '#ffffff', fontSize: this.props.iconSize ?? '2.4rem' }} />}
-        >
-            {this.props.children}
-        </AwesomeSlider>
-    }
-}

package/src/component/switch/switch.css

@@ -1,53 +0,0 @@
-.switch-container {
-    position: relative;
-    display: inline-block;
-    background-color: var(--off-bg) !important;
-    border-radius: 50vw !important;
-    border: none;
-    outline: none;
-}
-
-.switch-container>input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    border: none;
-    outline: none;
-}
-
-.switch-container>.slider {
-    font-size: var(--size);
-    position: absolute;
-    height: calc(100% - 0.2em);
-    aspect-ratio: 1 / 1;
-    left: 0.1em;
-    top: 0.1em;
-    background-color: var(--dot-color);
-    transition: 0.4s;
-    border-radius: 50%;
-}
-
-.switch-container>input:checked+.slider {
-    -webkit-transform: translateX(calc(0.8 * (100% + 0.2em)));
-    -ms-transform: translateX(calc(0.8 * (100% + 0.2em)));
-    transform: translateX(calc(0.8 * (100% + 0.2em)));
-}
-
-.switch-container:has(> input:checked) {
-    background-color: var(--on-bg) !important;
-}
-
-.switch-container:has(> input:disabled:not(*:checked)) {
-    pointer-events: none;
-    border: 1px inset #00358033;
-    background-color: var(--disabled-background) !important;
-}
-
-.switch-container:has(> input:disabled:not(*:checked)) .slider {
-    background-color: #00204D40;
-}
-
-.switch-container:has(> input:disabled:checked) {
-    pointer-events: none;
-    background-color: #bccdf5 !important;
-}

package/src/component/switch/switch.tsx

@@ -1,67 +0,0 @@
-import React, { CSSProperties } from 'react';
-import './switch.css';
-
-interface SwitchProps {
-    onChange?: (value: boolean) => void,
-    value?: boolean,
-    disabled: false,
-    style: CSSProperties,
-    size?: number | string,
-    dotColor?: string,
-    onBackground?: string,
-    offBackground?: string,
-    name?: string,
-    className?: string,
-}
-
-interface SwitchState {
-    value?: boolean,
-}
-
-export class Switch extends React.Component<SwitchProps, SwitchState> {
-    state: Readonly<SwitchState> = {
-        value: this.props.value ?? false
-    }
-
-    componentDidUpdate(prevProps: Readonly<SwitchProps>): void {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ value: this.props.value })
-        }
-    }
-
-    render() {
-        const propStyle = {
-            '--off-bg': this.props.offBackground ?? 'var(--background)',
-            '--on-bg': this.props.onBackground ?? 'var(--infor-color)',
-            '--dot-color': this.props.dotColor ?? '#ffffff',
-            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '2rem'
-        }
-        let convertStyle: CSSProperties = {
-            height: this.props.size ?? '2rem',
-            width: `calc(${this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '2rem'} * 9 / 5)`,
-            ...propStyle
-        }
-        if (this.props.style) {
-            delete this.props.style.width
-            delete this.props.style.minWidth
-            delete this.props.style.maxWidth
-            delete this.props.style.height
-            delete this.props.style.minHeight
-            delete this.props.style.maxHeight
-            convertStyle = {
-                ...this.props.style,
-                ...convertStyle,
-            }
-        }
-        return <label className={`switch-container row ${this.props.className ?? ''}`} style={convertStyle} >
-            <input type="checkbox" checked={this.state.value} name={this.props.name} disabled={this.props.disabled}
-                onChange={() => {
-                    const newValue = !this.state.value
-                    this.setState({ value: newValue })
-                    if (this.props.onChange) this.props.onChange(newValue)
-                }}
-            />
-            <span className="slider"></span>
-        </label>
-    }
-}

package/src/component/table/table.css

@@ -1,74 +0,0 @@
-.custom-table {
-    border: none;
-    min-width: 100%;
-    border-collapse: collapse;
-}
-
-.custom-table>.tb-header {
-    top: -1px;
-    z-index: 4;
-    position: sticky;
-    background-color: #f9fafb;
-}
-
-.custom-table>.tb-header>tr {
-    border-top: var(--border-grey1);
-    border-bottom: var(--border-grey1);
-}
-
-.custom-table .tb-cell {
-    height: 4.4rem;
-    text-align: left;
-    padding: 0 2.4rem;
-    font: 400 1.4rem/2.2rem 'Inter';
-    color: #00204DCC;
-    vertical-align: middle;
-}
-
-.custom-table>.tb-header>tr>td {
-    font: 600 1.2rem/2rem 'Inter';
-    white-space: nowrap;
-    color: #00204D99;
-    background-color: #f9fafb !important;
-}
-
-.custom-table tr>td {
-    background-color: #ffffff !important;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 52rem;
-}
-
-.custom-table tr.selected {
-    background-color: #f5f7fa !important;
-}
-
-.custom-table tr.selected>td {
-    background-color: #f5f7fa !important;
-}
-
-.tb-row>.tb-cell.tb-cell-fixed {
-    z-index: 2;
-    position: sticky;
-    /* box-shadow: 1px 0px 6px 0px rgba(45, 50, 57, 0.06); */
-    background-color: #ffffff;
-}
-
-.tb-header .tb-cell.tb-cell-fixed {
-    z-index: 2;
-    position: sticky;
-    /* box-shadow: 1px 0px 6px 0px rgba(45, 50, 57, 0.06); */
-    background-color: #ffffff;
-}
-
-.tb-cell[align-cell='start'] {
-    text-align: start;
-}
-
-.tb-cell[align-cell='center'] {
-    text-align: center;
-}
-
-.tb-cell[align-cell='end'] {
-    text-align: end;
-}

package/src/component/table/table.tsx

@@ -1,99 +0,0 @@
-import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import './table.css'
-
-export enum CellAlignItems {
-    start = 'start',
-    center = 'center',
-    end = 'end',
-}
-
-type TbCellProps = {
-    fixed?: boolean,
-    children?: ReactNode,
-    className?: string,
-    style?: CSSProperties,
-    align?: CellAlignItems | string,
-}
-
-export class TbCell extends React.Component<TbCellProps> {
-    render(): React.ReactNode {
-        return <td style={this.props.style} align-cell={this.props.align ?? CellAlignItems.start} className={`tb-cell ${this.props.className ?? ''} ${this.props.fixed ? 'tb-cell-fixed' : ''}`}>{this.props.children}</td>
-    }
-}
-
-interface TbRowProps {
-    children?: Array<TbCell>,
-    className?: string,
-    style?: CSSProperties,
-    onClick?: MouseEventHandler<HTMLTableRowElement>,
-}
-
-
-export class TbRow extends React.Component<TbRowProps> {
-    render(): React.ReactNode {
-        return <tr style={this.props.style} className={`tb-row ${this.props.className ?? ""}`} onClick={this.props.onClick}>
-            {(this.props.children ?? []).map((e: TbCell, i: number) => {
-                let ox: number | string = 0
-                if (this.props.children && i > 0 && i < (this.props.children.length - 1)) {
-                    ox = `calc(${this.props.children.slice(0, i).map(tb => {
-                        const wValue = tb.props.style?.minWidth ?? tb.props.style?.width
-                        return wValue ? typeof wValue === 'number' ? `${wValue}px` : wValue : '60px';
-                    }).join(" + ")})`
-                }
-                return <TbCell
-                    key={`tb-cell-${i}`}
-                    align={e.props.align}
-                    children={e.props.children}
-                    fixed={e.props.fixed}
-                    style={e.props.fixed ? (this.props.children && i === this.props.children.length - 1) ? { right: 0, ...(e.props.style ?? {}) } : { left: ox, ...(e.props.style ?? {}) } : e.props.style}
-                    className={e.props.className} />;
-            })}
-        </tr>
-    }
-}
-
-export class TbHeader extends React.Component<TbRowProps> {
-    render() {
-        return <thead style={this.props.style} className={`tb-header ${this.props.className ?? ""}`}>
-            <tr>
-                {(this.props.children ?? []).map((e: TbCell, i: number) => {
-                    let ox: number | string = 0
-                    if (this.props.children && i > 0 && i < (this.props.children.length - 1)) {
-                        ox = `calc(${this.props.children.slice(0, i).map(tb => tb.props.style?.width ? typeof tb.props.style.width === 'number' ? `${tb.props.style.width}px` : tb.props.style.width : '60px').join(" + ")})`
-                    }
-                    return <TbCell
-                        key={`tb-cell-${i}`}
-                        align={e.props.align}
-                        children={e.props.children}
-                        fixed={e.props.fixed}
-                        style={e.props.fixed ? (this.props.children && i === this.props.children.length - 1) ? { right: 0, ...(e.props.style ?? {}) } : { left: ox, ...(e.props.style ?? {}) } : e.props.style}
-                        className={e.props.className} />;
-                })}
-            </tr>
-        </thead>
-    }
-}
-
-interface TbBodyProps {
-    children?: Array<TbRow>,
-    className?: string,
-    style?: CSSProperties,
-}
-
-export class TbBody extends React.Component<TbBodyProps> {
-    render(): React.ReactNode {
-        return <tbody>{this.props.children as ReactNode}</tbody>
-    }
-}
-
-interface TableProps {
-    children?: Array<TbBody | TbHeader>,
-    className?: string,
-    style?: CSSProperties,
-}
-
-export class Table extends React.Component<TableProps> {
-    render(): React.ReactNode {
-        return <table className={`custom-table ${this.props.className}`} style={this.props.style}>{this.props.children as ReactNode}</table>
-    }
-}

package/src/component/text/text.css

@@ -1,16 +0,0 @@
-.comp-text {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--max-line);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: start;
-}
-
-.comp-text[class*="subtitle"] {
-    color: #00204D99;
-}
-
-.comp-text.type-button {
-    cursor: pointer;
-}

package/src/component/text/text.tsx

@@ -1,21 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import './text.css';
-
-interface TextProps {
-    children?: ReactNode,
-    style?: CSSProperties,
-    className?: string,
-    maxLine?: number,
-    onClick?: React.MouseEventHandler<HTMLDivElement>,
-    onHover?: React.MouseEventHandler<HTMLDivElement>,
-}
-
-export class Text extends React.Component<TextProps> {
-    render(): React.ReactNode {
-        let convertStyle: CSSProperties = this.props.style ?? {}
-        if (this.props.maxLine) {
-            convertStyle = { ...convertStyle, '--max-line': this.props.maxLine } as CSSProperties
-        }
-        return <div onMouseOver={this.props.onHover} onClick={this.props.onClick} className={`comp-text ${this.props.onClick ? 'type-button' : ''} ${this.props.className ?? ''}`} style={convertStyle}>{this.props.children}</div>
-    }
-}

package/src/component/text-area/text-area.css

@@ -1,63 +0,0 @@
-.text-area-container {
-    height: 4rem;
-    position: relative;
-    gap: 0.8rem;
-    border-radius: 0.4rem;
-    border: 0.5px solid #00358033;
-    padding: 1.6rem;
-    align-items: start;
-}
-
-.text-area-container:has(> textarea:disabled) {
-    background-color: var(--disabled-background) !important;
-    pointer-events: none !important;
-}
-
-.text-area-container:has(> textarea:focus) {
-    border-color: #366AE2;
-}
-
-.text-area-container>textarea {
-    flex: 1;
-    padding: 0;
-    width: 100%;
-    height: inherit;
-    max-height: 100%;
-    border: none;
-    outline: none;
-    background-color: transparent !important;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-    resize: inherit;
-}
-
-.text-field-container>textarea::placeholder {
-    opacity: 0.4;
-}
-
-.text-area-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.text-area-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.text-area-container.helper-text::after {
-    content: attr(helper-text);
-    color: var(--helper-text-color);
-    position: absolute;
-    left: 0;
-    bottom: -0.4rem;
-    width: max-content;
-    font: 400 1.2rem/1.6rem 'Inter';
-    transform: translate(-7.5%, 92.5%) scale(0.85);
-}

package/src/component/text-area/text-area.tsx

@@ -1,55 +0,0 @@
-import React, { CSSProperties } from "react";
-import './text-area.css'
-import { UseFormRegister } from "react-hook-form";
-
-interface TextAreaProps {
-    value?: string,
-    maxLength?: number,
-    defaultValue?: string,
-    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
-    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>,
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>,
-    placeholder?: string,
-    disabled?: boolean,
-    readOnly?: boolean,
-    autoFocus?: boolean,
-    className?: string,
-    helperText?: string,
-    name?: string,
-    helperTextColor?: string,
-    style?: CSSProperties,
-    register?: UseFormRegister<{}>,
-}
-
-export class TextArea extends React.Component<TextAreaProps> {
-    render(): React.ReactNode {
-        return <div
-            className={`text-area-container row ${this.props.className ?? 'placeholder-2'} ${this.props.helperText?.length && 'helper-text'}`}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-        >
-            {this.props.register ?
-                <textarea
-                    autoFocus={this.props.autoFocus}
-                    {...this.props.register}
-                    maxLength={this.props.maxLength}
-                    name={this.props.name}
-                    placeholder={this.props.placeholder}
-                    readOnly={this.props.readOnly}
-                    disabled={this.props.disabled}
-                    onFocus={this.props.onFocus}
-                /> : <textarea
-                    autoFocus={this.props.autoFocus}
-                    maxLength={this.props.maxLength}
-                    name={this.props.name}
-                    defaultValue={this.props.defaultValue}
-                    value={this.props.value}
-                    placeholder={this.props.placeholder}
-                    readOnly={this.props.readOnly}
-                    disabled={this.props.disabled}
-                    onChange={this.props.onChange}
-                    onFocus={this.props.onFocus}
-                    onBlur={this.props.onBlur}
-                />}
-        </div>
-    }
-}

package/src/component/text-field/text-field.css

@@ -1,64 +0,0 @@
-.text-field-container {
-    height: 4rem;
-    position: relative;
-    gap: 0.8rem;
-    border-radius: 0.8rem;
-    border: 0.5px solid #00358033;
-    padding: 1rem 1.2rem;
-}
-
-.text-field-container:has(> input:disabled) {
-    background-color: var(--disabled-background) !important;
-    pointer-events: none !important;
-}
-
-.text-field-container:has(> input:focus) {
-    border-color: #366AE2;
-}
-
-.text-field-container>input {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    border: none;
-    outline: none;
-    padding: 0;
-    background-color: transparent !important;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-}
-
-.text-field-container>input::placeholder {
-    opacity: 0.5;
-}
-
-.text-field-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.text-field-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.text-field-container.helper-text::after {
-    content: attr(helper-text);
-    color: var(--helper-text-color);
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: max-content;
-    font: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    transform: translate(-7.5%, 92.5%) scale(0.85);
-}

package/src/component/text-field/text-field.tsx

@@ -1,63 +0,0 @@
-import React, { CSSProperties, ReactNode } from "react";
-import './text-field.css'
-import { UseFormRegister } from "react-hook-form";
-
-interface TextFieldProps {
-    value?: string,
-    maxLength?: number,
-    defaultValue?: string,
-    onChange?: React.ChangeEventHandler<HTMLInputElement>,
-    onBlur?: React.FocusEventHandler<HTMLInputElement>,
-    onFocus?: React.FocusEventHandler<HTMLInputElement>,
-    placeholder?: string,
-    disabled?: boolean,
-    readOnly?: boolean,
-    className?: string,
-    helperText?: string,
-    name?: string,
-    suffix?: ReactNode,
-    prefix?: ReactNode,
-    helperTextColor?: string,
-    style?: CSSProperties,
-    type?: React.HTMLInputTypeAttribute,
-    autoFocus?: boolean,
-    register?: UseFormRegister<{}>,
-}
-
-export class TextField extends React.Component<TextFieldProps> {
-    render(): React.ReactNode {
-        return <div
-            className={`text-field-container row ${this.props.className ?? 'placeholder-2'} ${this.props.helperText?.length && 'helper-text'}`}
-            helper-text={this.props.helperText}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-        >
-            {this.props.prefix}
-            {this.props.register ?
-                <input
-                    {...this.props.register}
-                    autoFocus={this.props.autoFocus}
-                    maxLength={this.props.maxLength}
-                    name={this.props.name}
-                    type={this.props.type ?? 'text'}
-                    placeholder={this.props.placeholder}
-                    readOnly={this.props.readOnly}
-                    disabled={this.props.disabled}
-                    onFocus={this.props.onFocus}
-                /> : <input
-                    autoFocus={this.props.autoFocus}
-                    maxLength={this.props.maxLength}
-                    name={this.props.name}
-                    type={this.props.type ?? 'text'}
-                    defaultValue={this.props.defaultValue}
-                    value={this.props.value}
-                    placeholder={this.props.placeholder}
-                    readOnly={this.props.readOnly}
-                    disabled={this.props.disabled}
-                    onChange={this.props.onChange}
-                    onFocus={this.props.onFocus}
-                    onBlur={this.props.onBlur}
-                />}
-            {this.props.suffix}
-        </div>
-    }
-}

package/src/component/toast-noti/toast-noti.tsx

@@ -1,21 +0,0 @@
-import { Slide, toast } from 'react-toastify';
-
-export class ToastMessage {
-    static success(message: string) {
-        toast.success(message, {
-            hideProgressBar: true,
-            transition: Slide,
-            autoClose: 800,
-            theme: "colored",
-        });
-    }
-    static errors(message: string) {
-        toast.error(message, {
-            theme: "colored",
-            pauseOnHover: false,
-            hideProgressBar: true,
-            transition: Slide,
-            autoClose: 800,
-        });
-    }
-}