wini-web-components 0.3.0 → 0.4.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "wini-web-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "react": "^18.3.1",
+    "date-fns": "^3.6.0",
+    "react": "^18.0.0",
     "react-awesome-slider": "^4.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^18.0.0",
     "react-hook-form": "^7.52.0",
     "react-paginate": "^8.2.0",
     "react-scripts": "5.0.1",
@@ -14,10 +15,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "webpack --mode development",
+    "build:prod": "webpack --mode production"
   },
   "eslintConfig": {
     "extends": [
@@ -38,8 +37,25 @@
     ]
   },
   "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
-  "main": "index.js",
-  "devDependencies": {},
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "babel-loader": "^8.0.0",
+    "css-loader": "^5.0.0",
+    "style-loader": "^2.0.0",
+    "typescript": "^4.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0"
+  },
   "publishConfig": {
     "@WiniGit:registry": "https://npm.pkg.github.com"
   },

package/src/component/calendar/calendar.css

@@ -1,133 +0,0 @@
-.calendar-container {
-    background-color: #ffffff;
-    border-radius: 0.8rem;
-    align-items: stretch;
-    border: var(--border-grey1);
-    width: fit-content;
-}
-
-.calendar-container button {
-    outline: none;
-    padding: 0;
-    border: none;
-    cursor: pointer;
-}
-
-.calendar-container>.calendar-body:has(*:nth-child(2))>.row:first-child {
-    border-bottom: var(--border-grey1);
-}
-
-.calendar-sidebar-options {
-    padding: 0.8rem 2.4rem 0.8rem 0;
-    border-right: var(--border-grey1);
-}
-
-.calendar-sidebar-options>.calendar-sidebar-option-buttton {
-    color: #00204DE5;
-    padding: 0.8rem 1.6rem;
-}
-
-.picker-time-container {
-    border-left: var(--border-grey1);
-    height: 34.2rem;
-}
-
-.picker-time-container>.heading-7 {
-    padding: 1.2rem 1.6rem;
-    border-bottom: var(--border-grey1);
-    text-align: center;
-}
-
-.picker-time-container div[class*="scroll-picker-"] {
-    flex: 1;
-    height: 100%;
-    gap: 0.4rem;
-    padding: 0.4rem 0;
-    overflow: hidden auto;
-    scrollbar-width: thin;
-}
-
-.picker-time-container .scroll-picker-minutes {
-    border-left: var(--border-grey1);
-    border-right: var(--border-grey1);
-}
-
-.picker-time-container div[class*="scroll-picker-"]>button {
-    width: 5.6rem;
-    padding: 0.4rem 0;
-}
-
-.picker-time-container div[class*="scroll-picker-"]>button.selected {
-    background-color: var(--infor-background);
-    color: var(--infor-color);
-}
-
-.picker-date-header {
-    padding: 1.2rem 1.6rem;
-    gap: 1.2rem;
-    background-color: transparent !important;
-    border-bottom: var(--border-grey1);
-}
-
-.picker-date-header>span {
-    width: 100%;
-    flex: 1;
-    text-align: center;
-    cursor: pointer;
-    ;
-}
-
-.picker-date-header>button {
-    width: 1.6rem;
-    height: 1.6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.picker-date-header>button>svg {
-    font-size: 1.4rem;
-    color: #00204D99;
-    pointer-events: none;
-}
-
-.picker-date-body {
-    padding: 1.2rem 1.6rem;
-    width: 31.2rem;
-    gap: 0.8rem;
-    flex-wrap: wrap;
-}
-
-.date-picker-circle {
-    width: calc((100% - 0.8rem * 6) / 7);
-    height: 3.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-}
-
-.month-picker-circle,
-.year-picker-circle {
-    width: calc((100% - 0.8rem * 2) / 3);
-    height: 3.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 2.4rem;
-    color: #00204de5;
-}
-
-button[class*="-picker-circle"] {
-    border: 1px solid transparent;
-}
-
-button[class*="-picker-circle"].selected {
-    background-color: var(--infor-color);
-    color: #ffffff;
-}
-
-button[class*="-picker-circle"][in-range="false"] {
-    opacity: 0.24 !important;
-    pointer-events: none !important;
-}

package/src/component/calendar/calendar.tsx

@@ -1,448 +0,0 @@
-import React, { CSSProperties, ReactNode } from "react"
-import './calendar.css'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faAngleDoubleLeft, faAngleDoubleRight, faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"
-import { differenceInCalendarDays } from "date-fns"
-
-export const today = new Date()
-export const startDate = new Date(
-    today.getFullYear() - 100,
-    today.getMonth(),
-    today.getDate()
-)
-export const endDate = new Date(
-    today.getFullYear() + 100,
-    today.getMonth(),
-    today.getDate()
-)
-
-export const inRangeTime = (date: Date, startDate: Date, endDate: Date) => (differenceInCalendarDays(date, startDate) > -1 && differenceInCalendarDays(endDate, date) > -1)
-
-export const enum CalendarType {
-    DATE,
-    MONTH,
-    YEAR,
-    DATETIME,
-}
-
-interface CalendarProps {
-    value?: Date,
-    min?: Date,
-    max?: Date,
-    onSelect?: (props: Date) => void,
-    disabled?: boolean,
-    helperText?: string,
-    helperTextColor?: string,
-    placeholder?: string,
-    className?: string,
-    style?: CSSProperties,
-    type: CalendarType,
-    showSidebar?: boolean,
-    footer?: ReactNode
-}
-
-interface CalendarState {
-    value: Date,
-    selectDate?: Date,
-    selectMonth: number,
-    selectYear: number,
-    selectHours: number,
-    selectMinutes: number,
-    selectSeconds: number,
-    type: CalendarType,
-}
-
-export class Calendar extends React.Component<CalendarProps, CalendarState> {
-    state: Readonly<CalendarState> = {
-        value: this.props.value ?? today,
-        selectDate: this.props.value ?? today,
-        selectMonth: (this.props.value ?? today).getMonth(),
-        selectYear: (this.props.value ?? today).getFullYear(),
-        type: CalendarType.DATE,
-        selectHours: this.props.value?.getHours() ?? 0,
-        selectMinutes: this.props.value?.getMinutes() ?? 0,
-        selectSeconds: this.props.value?.getSeconds() ?? 0,
-    }
-
-    showDateInMonth() {
-        let firstDayOfMonth = new Date(this.state.selectYear, this.state.selectMonth, 1)
-        return <>
-            {Array.from({ length: 7 }).map((_, i) => {
-                switch (i) {
-                    case 0:
-                        var weekdayTitle = 'Su'
-                        break
-                    case 1:
-                        weekdayTitle = 'Mo'
-                        break
-                    case 2:
-                        weekdayTitle = 'Tu'
-                        break
-                    case 3:
-                        weekdayTitle = 'We'
-                        break
-                    case 4:
-                        weekdayTitle = 'Th'
-                        break
-                    case 5:
-                        weekdayTitle = 'Fr'
-                        break
-                    case 6:
-                        weekdayTitle = 'Sa'
-                        break
-                    default:
-                        weekdayTitle = ''
-                        break
-                }
-                return <div key={'dtwk-' + i} className='date-picker-circle label-4' style={{ color: '#00204D99' }}>
-                    {weekdayTitle}
-                </div>
-            })}
-            {Array.from({ length: 42 }).map((_, i) => {
-                let dateNumber = (i % 7) + (Math.floor(i / 7) * 7) - firstDayOfMonth.getDay()
-                const timeValue = new Date(this.state.selectYear, this.state.selectMonth, dateNumber + 1, this.state.selectHours, this.state.selectMinutes, this.state.selectSeconds)
-                let style = {}
-                let additionProps = {}
-                let selected = false
-                if (dateNumber + 1 === today.getDate() && this.state.selectMonth === today.getMonth() && this.state.selectYear === today.getFullYear()) {
-                    style = { borderColor: 'var(--infor-color)' }
-                }
-                if (!inRangeTime(timeValue, startDate, endDate)) {
-                    additionProps = { 'in-range': 'false' }
-                } else if (!inRangeTime(timeValue, this.props.min ?? startDate, this.props.min ?? endDate)) {
-                    style = {
-                        ...style,
-                        color: 'var(--disabled-font-color)',
-                        pointerEvents: 'none'
-                    }
-                } else if (this.state.value.valueOf() === timeValue.valueOf()) {
-                    additionProps = { ...additionProps }
-                    selected = true
-                } else if (timeValue.getMonth() !== this.state.selectMonth) {
-                    style = { ...style, color: '#9fb0c7' }
-                }
-                return <button type="button" key={timeValue.toString()} className={`date-picker-circle body-3 ${selected ? 'selected' : ''}`} style={style} {...additionProps}
-                    onClick={() => {
-                        this.setState({ ...this.state, value: timeValue })
-                        if (this.props.onSelect) this.props.onSelect(timeValue)
-                    }} >
-                    {timeValue.getDate()}
-                </button>
-            })}
-        </>
-    }
-
-    showMonthInYear() {
-        return <>
-            {Array.from({ length: 12 }).map((_, i) => {
-                let monthTitle: string = ''
-                switch (i) {
-                    case 0:
-                        monthTitle = 'Jan'
-                        break
-                    case 1:
-                        monthTitle = 'Feb'
-                        break
-                    case 2:
-                        monthTitle = 'Mar'
-                        break
-                    case 3:
-                        monthTitle = 'Apr'
-                        break
-                    case 4:
-                        monthTitle = 'May'
-                        break
-                    case 5:
-                        monthTitle = 'Jun'
-                        break
-                    case 6:
-                        monthTitle = 'Jul'
-                        break
-                    case 7:
-                        monthTitle = 'Aug'
-                        break
-                    case 8:
-                        monthTitle = 'Sep'
-                        break
-                    case 9:
-                        monthTitle = 'Oct'
-                        break
-                    case 10:
-                        monthTitle = 'Nov'
-                        break
-                    case 11:
-                        monthTitle = 'Dec'
-                        break
-                    default:
-                        break
-                }
-                const timeValue = new Date(this.state.selectYear, i, today.getDate())
-                let additionProps = {}
-                let style = {}
-                let selected = false
-                if (this.state.selectYear === today.getFullYear() && today.getMonth() === i) {
-                    style = { borderColor: 'var(--infor-color)' }
-                } if (!inRangeTime(timeValue, startDate, endDate)) {
-                    additionProps = { 'in-range': 'false' }
-                } else if (!inRangeTime(new Date(this.state.selectYear, this.state.selectMonth), this.props.min ?? startDate, this.props.min ?? endDate)) {
-                    if (this.state.selectYear === this.state.selectDate?.getFullYear() && this.state.selectDate.getMonth() === i) {
-                        style = {
-                            color: 'var(--disabled-font-color)',
-                            pointerEvents: 'none'
-                        }
-                    }
-                }
-                if (this.state.selectYear === this.state.value.getFullYear() && i === this.state.value.getMonth()) {
-                    selected = true
-                }
-                return <button type="button" key={timeValue.toString()} className={`month-picker-circle body-3 row ${selected ? 'selected' : ''}`} style={style} {...additionProps}
-                    onClick={() => {
-                        if (this.props.type === CalendarType.MONTH) {
-                            this.setState({ ...this.state, value: timeValue })
-                            if (this.props.onSelect) this.props.onSelect(timeValue)
-                        } else {
-                            this.setState({ ...this.state, selectMonth: i, type: CalendarType.DATE })
-                        }
-                    }}
-                >
-                    {monthTitle}
-                </button>
-            })}
-        </>
-    }
-
-    showYearInRange() {
-        return <>
-            {Array.from({ length: 12 }).map((_, i) => {
-                let firstYearInTable = this.state.selectYear - ((this.state.selectYear - startDate.getFullYear()) % 12)
-                let yearNumber = i + firstYearInTable
-                let additionProps = {}
-                let style = {}
-                let selected = false
-                if (yearNumber === today.getFullYear()) {
-                    style = { borderColor: 'var(--infor-color)' }
-                } else if (yearNumber < ((this.props.min ?? startDate).getFullYear()) || yearNumber > ((this.props.min ?? endDate).getFullYear())) {
-                    additionProps = { 'in-range': 'false' }
-                }
-                if (yearNumber === this.state.value.getFullYear()) {
-                    selected = true
-                }
-                return <button type="button" key={yearNumber.toString()} className={`year-picker-circle body-3 row ${selected ? 'selected' : ''}`} style={style} {...additionProps}
-                    onClick={() => {
-                        if (this.props.type === CalendarType.YEAR) {
-                            this.setState({ ...this.state, value: new Date(yearNumber) })
-                            if (this.props.onSelect) this.props.onSelect(new Date(yearNumber))
-                        } else {
-                            this.setState({ ...this.state, type: CalendarType.MONTH, selectYear: yearNumber })
-                        }
-                    }}
-                >
-                    {yearNumber}
-                </button>
-            })}
-        </>
-    }
-
-    getTitle() {
-        switch (this.state.type) {
-            case CalendarType.YEAR:
-                let firstYearInTable = this.state.selectYear - ((this.state.selectYear - startDate.getFullYear()) % 12)
-                return `${firstYearInTable}-${firstYearInTable + 11}`
-            case CalendarType.MONTH:
-                return this.state.selectYear
-            default:
-                switch (this.state.selectMonth) {
-                    case 0:
-                        var monthName = 'January'
-                        break
-                    case 1:
-                        monthName = 'February'
-                        break
-                    case 2:
-                        monthName = 'March'
-                        break
-                    case 3:
-                        monthName = 'April'
-                        break
-                    case 4:
-                        monthName = 'May'
-                        break
-                    case 5:
-                        monthName = 'June'
-                        break
-                    case 6:
-                        monthName = 'July'
-                        break
-                    case 7:
-                        monthName = 'August'
-                        break
-                    case 8:
-                        monthName = 'September'
-                        break
-                    case 9:
-                        monthName = 'October'
-                        break
-                    case 10:
-                        monthName = 'November'
-                        break
-                    case 11:
-                        monthName = 'December'
-                        break
-                    default:
-                        monthName = ''
-                        break
-                }
-                return `${monthName} ${this.state.selectYear}`
-        }
-    }
-
-    render(): React.ReactNode {
-        return <div className={`row calendar-container ${this.props.className}`} style={this.props.style}>
-            {this.props.showSidebar ? <div className="calendar-sidebar-options col">
-                <button type="button" onClick={() => { }} className="label-4 calendar-sidebar-option-buttton">Yesterday</button>
-                <button type="button" className="label-4 calendar-sidebar-option-buttton">Last week</button>
-                <button type="button" className="label-4 calendar-sidebar-option-buttton">Last month</button>
-                <button type="button" className="label-4 calendar-sidebar-option-buttton">Last year</button>
-            </div> : null}
-            <div className="calendar-body col">
-                <div className="row" style={{ alignItems: 'start' }} >
-                    <div className="picker-date-container col">
-                        <div className='picker-date-header row'>
-                            <button type='button'
-                                onClick={() => {
-                                    switch (this.state.type) {
-                                        case CalendarType.YEAR:
-                                            if (this.state.selectYear - 20 < startDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: startDate.getFullYear() })
-                                            } else {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 20 })
-                                            }
-                                            break
-                                        case CalendarType.MONTH:
-                                            if (this.state.selectYear - 10 < startDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: startDate.getFullYear() })
-                                            } else {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 10 })
-                                            }
-                                            break
-                                        default:
-                                            this.setState({ ...this.state, selectYear: this.state.selectYear - 1 })
-                                            break
-                                    }
-                                }}
-                            >
-                                <FontAwesomeIcon icon={faAngleDoubleLeft} />
-                            </button>
-                            <button type='button'
-                                onClick={() => {
-                                    switch (this.state.type) {
-                                        case CalendarType.YEAR:
-                                            if (this.state.selectYear - 10 < startDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: startDate.getFullYear() })
-                                            } else {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 10 })
-                                            }
-                                            break
-                                        case CalendarType.MONTH:
-                                            if (this.state.selectYear - 1 >= startDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 1 })
-                                            }
-                                            break
-                                        default:
-                                            const newDataVl = new Date(this.state.selectYear, this.state.selectMonth - 1, 1)
-                                            this.setState({ ...this.state, selectMonth: newDataVl.getMonth(), selectYear: newDataVl.getFullYear() })
-                                            break
-                                    }
-                                }}
-                            >
-                                <FontAwesomeIcon icon={faAngleLeft} />
-                            </button>
-                            <span className="heading-7" onClick={() => {
-                                if (this.state.type !== CalendarType.YEAR)
-                                    this.setState({ ...this.state, type: this.state.type === CalendarType.DATE ? CalendarType.MONTH : CalendarType.YEAR })
-                            }} >
-                                {this.getTitle()}
-                            </span>
-                            <button type='button'
-                                onClick={() => {
-                                    switch (this.state.type) {
-                                        case CalendarType.YEAR:
-                                            if (this.state.selectYear + 10 > endDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: endDate.getFullYear() })
-                                            } else {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 10 })
-                                            }
-                                            break
-                                        case CalendarType.MONTH:
-                                            if (this.state.selectYear + 1 <= endDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 1 })
-                                            }
-                                            break
-                                        default:
-                                            const newDataVl = new Date(this.state.selectYear, this.state.selectMonth + 1, 1)
-                                            this.setState({ ...this.state, selectMonth: newDataVl.getMonth(), selectYear: newDataVl.getFullYear() })
-                                            break
-                                    }
-                                }}
-                            >
-                                <FontAwesomeIcon icon={faAngleRight} />
-                            </button>
-                            <button type='button'
-                                onClick={() => {
-                                    switch (this.state.type) {
-                                        case CalendarType.YEAR:
-                                            if (this.state.selectYear + 20 > endDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: endDate.getFullYear() })
-                                            } else {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 20 })
-                                            }
-                                            break
-                                        case CalendarType.MONTH:
-                                            if (this.state.selectYear + 10 < endDate.getFullYear()) {
-                                                this.setState({ ...this.state, selectYear: endDate.getFullYear() })
-                                            } else {
-                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 10 })
-                                            }
-                                            break
-                                        default:
-                                            this.setState({ ...this.state, selectYear: this.state.selectYear + 1 })
-                                            break
-                                    }
-                                }}
-                            >
-                                <FontAwesomeIcon icon={faAngleDoubleRight} />
-                            </button>
-                        </div>
-                        <div className='picker-date-body row' >
-                            {this.state.type === CalendarType.YEAR ? this.showYearInRange() : this.state.type === CalendarType.MONTH ? this.showMonthInYear() : this.showDateInMonth()}
-                        </div>
-                    </div>
-                    {this.props.type === CalendarType.DATETIME ? <div className="picker-time-container col">
-                        <div className="heading-7">{this.state.selectHours < 10 ? `0${this.state.selectHours}` : this.state.selectHours}:{this.state.selectMinutes < 10 ? `0${this.state.selectMinutes}` : this.state.selectMinutes}:{this.state.selectSeconds < 10 ? `0${this.state.selectSeconds}` : this.state.selectSeconds}</div>
-                        <div className="row" style={{ alignItems: 'start', flex: 1, height: '100%' }}>
-                            <div className="scroll-picker-hours col">{Array.from({ length: 24 }).map((_, i) => <button type="button" onClick={() => {
-                                let newValue = this.state.value
-                                newValue.setHours(i)
-                                this.setState({ ...this.state, selectHours: i, value: newValue })
-                                if (this.props.onSelect) this.props.onSelect(newValue)
-                            }} key={`hours-${i}`} className={`label-4 ${this.state.selectHours === (i) ? 'selected' : ''}`} >{i < 10 ? `0${i}` : i}</button>)}</div>
-                            <div className="scroll-picker-minutes col">{Array.from({ length: 60 }).map((_, i) => <button type="button" onClick={() => {
-                                let newValue = this.state.value
-                                newValue.setMinutes(i)
-                                this.setState({ ...this.state, selectMinutes: i, value: newValue })
-                                if (this.props.onSelect) this.props.onSelect(newValue)
-                            }} key={`hours-${i}`} className={`label-4 ${this.state.selectMinutes === (i) ? 'selected' : ''}`} >{i < 10 ? `0${i}` : i}</button>)}</div>
-                            <div className="scroll-picker-seconds col">{Array.from({ length: 60 }).map((_, i) => <button type="button" onClick={() => {
-                                let newValue = this.state.value
-                                newValue.setSeconds(i)
-                                this.setState({ ...this.state, selectSeconds: i, value: newValue })
-                                if (this.props.onSelect) this.props.onSelect(newValue)
-                            }} key={`hours-${i}`} className={`label-4 ${this.state.selectSeconds === (i) ? 'selected' : ''}`} >{i < 10 ? `0${i}` : i}</button>)}</div>
-                        </div>
-                    </div> : null}
-                </div>
-                {this.props.footer}
-            </div>
-        </div>
-    }
-}

package/src/component/checkbox/checkbox.css

@@ -1,46 +0,0 @@
-.checkbox-container {
-    position: relative;
-    border-radius: 0.4rem;
-    border: 1px solid #00358033;
-    background-color: var(--infor-color);
-    transition: border, background-color 0.5s;
-    cursor: pointer;
-}
-
-.checkbox-container:not(*:has(> input:checked)) {
-    background-color: transparent !important;
-}
-
-.checkbox-container>input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-.checkbox-container>svg {
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    opacity: 0 !important;
-    transition: visibility, opacity 0.5s;
-}
-
-.checkbox-container>input:checked~svg {
-    visibility: visible;
-    opacity: 1 !important;
-}
-
-.checkbox-container:has(> input:checked) {
-    border: none !important;
-}
-
-.checkbox-container:has(> input:disabled)  {
-    background-color: var(--disabled-background) !important;
-    border: 1px solid #00358033 !important;
-}
-
-.checkbox-container:has(> input:disabled) > svg > path {
-    stroke: #00204D40 !important;
-}