wini-web-components 0.1.0

package/src/component/slider/slider.tsx

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,53 @@
+.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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,74 @@
+.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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,63 @@
+.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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,64 @@
+.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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,21 @@
+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,
+        });
+    }
+}