classicy 0.5.2 → 0.5.5

package/src/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.tsx

@@ -1,54 +0,0 @@
-import './ClassicyCheckbox.scss'
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import classNames from 'classnames'
-import React, {useState} from 'react'
-
-type ClassicyCheckboxProps = {
-    id: string
-    checked?: boolean
-    mixed?: boolean
-    isDefault?: boolean
-    disabled?: boolean
-    onClickFunc?: (checked: boolean) => void
-    label?: string
-}
-
-export const ClassicyCheckbox: React.FC<ClassicyCheckboxProps> = ({
-                                                                      id,
-                                                                      checked,
-                                                                      mixed,
-                                                                      isDefault,
-                                                                      disabled,
-                                                                      onClickFunc,
-                                                                      label,
-                                                                  }) => {
-    const [check, setCheck] = useState<boolean>(checked || false)
-
-    const handleOnClick = () => {
-        if (onClickFunc) {
-            onClickFunc(!check)
-        }
-        if (!disabled) {
-            setCheck(!check)
-        }
-    }
-
-    return (
-        <div className={"ClassicyCheckboxGroup"}>
-            <input
-                type={'checkbox'}
-                onClick={handleOnClick}
-                tabIndex={0}
-                id={id}
-                checked={check}
-                disabled={disabled}
-                className={classNames(
-                    "ClassicyCheckbox",
-                    isDefault ? "ClassicyCheckboxDefault" : '',
-                    mixed ? "ClassicyCheckboxMixed" : ''
-                )}
-            />
-            <ClassicyControlLabel label={label} labelFor={id} disabled={disabled} onClickFunc={handleOnClick}/>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.scss

@@ -1,11 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.classicyContextMenuWrapper {
-  position: fixed;
-  z-index: 900;
-  display: inline-block;
-  margin: 0;
-
-  @include appearance.platinumWindowBoxShadow;
-  padding: 0;
-}

package/src/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.tsx

@@ -1,25 +0,0 @@
-import './ClassicyContextualMenu.scss'
-import {ClassicyMenu, ClassicyMenuItem} from '@/SystemFolder/SystemResources/Menu/ClassicyMenu'
-import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
-import React from 'react'
-
-interface ClassicyMenuProps {
-    name: string
-    position: number[]
-    menuItems: ClassicyMenuItem[]
-}
-
-export const ClassicyContextualMenu: React.FC<ClassicyMenuProps> = ({name, menuItems, position}) => {
-    return (
-        <div
-            className={"classicyContextMenuWrapper"}
-            style={{left: position[0], top: position[1]}}
-        >
-            <ClassicyMenu
-                name={name}
-                menuItems={menuItems}
-                subNavClass={"classicyContextSubMenu"}
-            ></ClassicyMenu>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.scss

@@ -1,22 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use '../../ControlPanels/AppearanceManager/styles/assets';
-
-.classicyControlGroup {
-  position: relative;
-}
-
-.classicyControlGroupNoColumns {
-  columns: 1;
-}
-
-.classicyControlGroupColumns {
-  flex-grow: 1;
-  columns: 2;
-}
-
-.classicyControlGroupLegend {
-  font-family: var(--ui-font), sans-serif;
-  font-size: calc(var(--ui-font-size) * 0.75);
-  margin: 0;
-  padding: 0;
-}

package/src/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.tsx

@@ -1,27 +0,0 @@
-import './ClassicyControlGroup.scss'
-import classNames from 'classnames'
-import React from 'react'
-
-type ClassicyControlGroupProps = {
-    label: string
-    columns?: boolean
-    children: React.ReactNode
-}
-
-export const ClassicyControlGroup: React.FC<ClassicyControlGroupProps> = ({ label = '', columns = false, children }) => {
-    return (
-        <fieldset
-            className={classNames(
-                "classicyControlGroup",
-                columns
-                    ? "classicyControlGroupColumns"
-                    : "classicyControlGroupNoColumns"
-            )}
-        >
-            {label !== '' && <legend className={"classicyControlGroupLegend"}>{label}</legend>}
-            <div className={columns ? "classicyControlGroupContentColumns" : ''}>
-                {children}
-            </div>
-        </fieldset>
-    )
-}

package/src/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.scss

@@ -1,28 +0,0 @@
-.classicyControlLabel {
-  font-family: var(--ui-font), sans-serif;
-  user-select: none;
-}
-
-.classicyControlLabelSmall {
-  font-size: calc(var(--ui-font-size) / 2);
-}
-
-.classicyControlLabelMedium {
-  font-size: var(--ui-font-size);
-}
-
-.classicyControlLabelLarge {
-  font-size: calc(var(--ui-font-size) * 2);
-}
-
-.classicyControlLabelDisabled {
-  color: var(--color-system-05);
-}
-
-.classicyControlLabelLeft {
-  margin-left: calc(var(--window-control-size) / 2);
-}
-
-.classicyControlLabelRight {
-  margin-right: calc(var(--window-control-size) / 2);
-}

package/src/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.tsx

@@ -1,99 +0,0 @@
-import './ClassicyControlLabel.scss'
-import classNames from 'classnames'
-import React from 'react'
-
-type ClassicyControlLabelDirections = 'left' | 'right'
-type ClassicyControlLabelSize = 'small' | 'medium' | 'large'
-
-interface ClassicyControlLabelProps {
-    labelFor?: string
-    label?: string
-    labelSize?: ClassicyControlLabelSize
-    disabled?: boolean
-    icon?: string
-    iconSize?: string
-    direction?: ClassicyControlLabelDirections
-    children?: any
-    onClickFunc?: Function
-}
-
-export const ClassicyControlLabel: React.FC<ClassicyControlLabelProps> = ({
-    labelFor = '',
-    label = '',
-    labelSize = 'medium',
-    disabled = false,
-    direction = 'left',
-    icon,
-    iconSize,
-    children,
-    onClickFunc,
-}) => {
-
-    if (label == '') {
-        return
-    }
-
-    const getDirectionClass = (direction: ClassicyControlLabelDirections) => {
-        if (direction === 'right') {
-            return "classicyControlLabelRight"
-        }
-        return "classicyControlLabelLeft"
-    }
-
-    const getSizeClass = (size: ClassicyControlLabelSize) => {
-        switch (size) {
-            case 'small':
-                return "classicyControlLabelSmall"
-            case 'medium':
-                return "classicyControlLabelMedium"
-            case 'large':
-                return "classicyControlLabelLarge"
-            default:
-                return "classicyControlLabelLeft"
-        }
-    }
-
-    const imageSize = (s: string | undefined) => {
-        if (s === 'sm') {
-            return '16px'
-        }
-        if (s === 'lg') {
-            return '64px'
-        }
-        return '32px'
-    }
-
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: ['left', 'bottom'].includes(direction) ? 'row' : 'row-reverse',
-                alignItems: icon ? 'center' : '',
-            }}
-            onClick={(e) => {
-                e.preventDefault()
-                if (onClickFunc) {
-                    onClickFunc(e)
-                }
-            }}
-        >
-            {icon && <img src={icon} width={imageSize(iconSize)} alt={label} />}
-
-            {['left', 'bottom'].includes(direction) && children}
-
-            <label
-                htmlFor={labelFor}
-                className={classNames(
-                    "classicyControlLabel",
-                    disabled ? "classicyControlLabelDisabled" : '',
-                    getDirectionClass(direction),
-                    getSizeClass(labelSize)
-                )}
-            >
-                {label}
-            </label>
-
-            {['right', 'top'].includes(direction) && children}
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/DatePicker/ClassicyDatePicker.scss

@@ -1,50 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use 'sass:list';
-
-.classicyDatePickerHolder {
-  display: flex;
-  align-items: baseline;
-  flex-direction: row;
-  width: calc(100% - var(--window-padding-size) * 2);
-  padding: calc(var(--window-padding-size) + var(--window-border-size) * 2);
-  gap: 0;
-}
-
-.classicyDatePicker {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  width: auto;
-  border: var(--window-border-size) solid black;
-  box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05),
-  calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) 0 0 var(--color-system-04);
-  display: flex;
-  align-items: baseline;
-  flex-direction: row;
-  background-color: var(--color-white);
-
-  input {
-    margin: 0;
-    padding: 0;
-    font-family: var(--ui-font), sans-serif;
-    box-shadow: none !important;
-    height: 100%;
-    margin-right: calc(var(--window-padding-size) /2);
-    text-align: right;
-    border: none;
-    outline: none;
-
-    &:focus-visible {
-      outline: 0 !important;
-    }
-  }
-}
-
-.classicyDatePickerDefault {
-}
-
-.classicyDatePickerLabel {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  height: var(--window-control-size);
-  user-select: none;
-}

package/src/SystemFolder/SystemResources/DatePicker/ClassicyDatePicker.tsx

@@ -1,191 +0,0 @@
-import {useDesktop} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import './ClassicyDatePicker.scss'
-import {validateDayOfMonth, validateMonth,} from '@/SystemFolder/SystemResources/DatePicker/ClassicyDatePickerUtils'
-import classNames from 'classnames'
-import React, {ChangeEvent, KeyboardEvent, useRef, useState} from 'react'
-
-interface ClassicyDatePickerProps {
-    id: string
-    inputType?: 'text'
-    onChangeFunc?: any
-    labelTitle?: string
-    placeholder?: string
-    prefillValue?: Date
-    disabled?: boolean
-    isDefault?: boolean
-}
-
-export const ClassicyDatePicker: React.FC<ClassicyDatePickerProps> = React.forwardRef<
-    HTMLInputElement,
-    ClassicyDatePickerProps
->(function ClassicyDatePicker(
-    {id, inputType, labelTitle, placeholder, prefillValue, disabled = false, isDefault, onChangeFunc}, ref
-) {
-    const desktop = useDesktop()
-
-    const yearRef = useRef<HTMLInputElement>(null)
-    const monthRef = useRef<HTMLInputElement>(null)
-    const dayRef = useRef<HTMLInputElement>(null)
-
-    const [selectedDate, setSelectedDate] = useState<Date>(new Date(desktop.System.Manager.DateAndTime.dateTime))
-    const [month, setMonth] = useState<string>(
-        (new Date(desktop.System.Manager.DateAndTime.dateTime).getMonth() + 1).toString()
-    )
-    const [day, setDay] = useState<string>(new Date(desktop.System.Manager.DateAndTime.dateTime).getDate().toString())
-    const [year, setYear] = useState<string>(
-        new Date(desktop.System.Manager.DateAndTime.dateTime).getFullYear().toString()
-    )
-
-    const selectText = (e: React.MouseEvent<HTMLInputElement>) => {
-        e.currentTarget.focus()
-        e.currentTarget.select()
-    }
-
-    const handleDateChange = (date: Date) => {
-        if (onChangeFunc) {
-            onChangeFunc(date)
-        }
-    }
-
-    const handleDatePartChange = (e: ChangeEvent<HTMLInputElement>, part: 'month' | 'day' | 'year') => {
-        let inputValue = parseInt(e.currentTarget.value)
-
-        if (isNaN(inputValue)) {
-            return
-        }
-
-        let updatedDate = new Date(selectedDate)
-
-        switch (part) {
-            case 'month':
-                inputValue--
-                if (inputValue < 0 || inputValue > 11) {
-                    setMonth('1')
-                    return
-                }
-                updatedDate.setMonth(inputValue)
-                setMonth(e.currentTarget.value)
-                break
-            case 'day':
-                inputValue = validateDayOfMonth(inputValue, parseInt(month))
-                updatedDate.setDate(inputValue)
-                setDay(e.currentTarget.value)
-                break
-            case 'year':
-                if (inputValue < 0) {
-                    return
-                }
-                updatedDate.setFullYear(inputValue)
-                setYear(e.currentTarget.value)
-                break
-        }
-
-        setSelectedDate(updatedDate)
-        handleDateChange(updatedDate)
-    }
-
-    const incrementDatePartChange = (e: KeyboardEvent<HTMLInputElement>, part: 'month' | 'day' | 'year') => {
-        let updatedDate = new Date(selectedDate)
-        let modifier = 0
-
-        switch (e.key) {
-            case 'ArrowDown':
-                modifier = -1
-                break
-            case 'ArrowUp':
-                modifier = 1
-                break
-        }
-
-        switch (part) {
-            case 'month':
-                let currentMonth = validateMonth(parseInt(month) + modifier)
-                updatedDate.setHours(currentMonth)
-                setMonth(currentMonth.toString())
-                break
-            case 'day':
-                let currentDay = validateDayOfMonth(parseInt(day) + modifier, parseInt(month))
-                updatedDate.setDate(currentDay)
-                setDay(currentDay.toString())
-                break
-            case 'year':
-                let currentYear = parseInt(year) + modifier
-                updatedDate.setFullYear(currentYear)
-                setYear(currentYear.toString())
-                break
-        }
-
-        setSelectedDate(updatedDate)
-        handleDateChange(updatedDate)
-    }
-
-    return (
-        <>
-            <div className={"classicyDatePickerHolder"}>
-                {labelTitle && (
-                    <ClassicyControlLabel
-                        label={labelTitle}
-                        labelFor={id}
-                        direction={'left'}
-                        disabled={disabled}
-                    ></ClassicyControlLabel>
-                )}
-                <div
-                    className={classNames(
-                        "classicyDatePicker",
-                        isDefault ? "classicyDatePickerDefault" : ''
-                    )}
-                >
-                    <input
-                        id={id + '_month'}
-                        tabIndex={0}
-                        onChange={(e) => handleDatePartChange(e, 'month')}
-                        onBlur={(e) => handleDatePartChange(e, 'month')}
-                        onKeyDown={(e) => incrementDatePartChange(e, 'month')}
-                        onClick={selectText}
-                        name={id + '_month'}
-                        type={inputType}
-                        ref={monthRef}
-                        disabled={disabled}
-                        value={month}
-                        maxLength={2}
-                        style={{width: '25%'}}
-                    ></input>
-                    /
-                    <input
-                        id={id + '_day'}
-                        tabIndex={0}
-                        onChange={(e) => handleDatePartChange(e, 'day')}
-                        onBlur={(e) => handleDatePartChange(e, 'day')}
-                        onKeyDown={(e) => incrementDatePartChange(e, 'day')}
-                        onClick={selectText}
-                        name={id + '_day'}
-                        type={inputType}
-                        ref={dayRef}
-                        disabled={disabled}
-                        value={day}
-                        maxLength={2}
-                        style={{width: '25%'}}
-                    ></input>
-                    /
-                    <input
-                        id={id + '_year'}
-                        tabIndex={0}
-                        onClick={selectText}
-                        onChange={(e) => handleDatePartChange(e, 'year')}
-                        onBlur={(e) => handleDatePartChange(e, 'year')}
-                        onKeyDown={(e) => incrementDatePartChange(e, 'year')}
-                        name={id + '_year'}
-                        type={inputType}
-                        ref={yearRef}
-                        disabled={disabled}
-                        value={year}
-                        maxLength={4}
-                        style={{width: '50%'}}
-                    ></input>
-                </div>
-            </div>
-        </>
-    )
-})

package/src/SystemFolder/SystemResources/DatePicker/ClassicyDatePickerUtils.tsx

@@ -1,22 +0,0 @@
-const monthsAndDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-
-export const validateDayOfMonth = (day: number, month: number): number => {
-    if (day <= 0) {
-        return 1
-    }
-    const monthInt = month - 1
-    if (day > monthsAndDays[monthInt]) {
-        return monthsAndDays[monthInt]
-    }
-    return day
-}
-
-export const validateMonth = (month: number): number => {
-    if (month <= 0) {
-        return 1
-    }
-    if (month > 12) {
-        return 12
-    }
-    return month
-}

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktop.scss

@@ -1,52 +0,0 @@
-@use 'sass:list';
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use '../../ControlPanels/AppearanceManager/styles/scrollbars';
-
-.classicyDesktop {
-  overflow: hidden;
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  cursor: default;
-  user-select: none;
-  background-color: var(--desktop-background-color);
-  background-image: var(--desktop-background-image);
-  background-repeat: var(--desktop-background-repeat);
-  background-position: var(--desktop-background-position);
-  background-size: var(--desktop-background-size);
-  user-drag: none;
-  @include appearance.no-select;
-
-  &,
-  & * {
-    @include scrollbars.scrollbars;
-    @include scrollbars.scrollbars-themed;
-    accent-color: var(--color-theme-04);
-
-    &:focus-visible {
-      outline-color: var(--color-outline);
-    }
-
-    &::marker {
-      color: var(--color-theme-02);
-    }
-
-    &:is( ::-webkit-calendar-picker-indicator,
-      ::-webkit-clear-button,
-      ::-webkit-inner-spin-button,
-      ::-webkit-outer-spin-button) {
-      color: var(--color-theme-02);
-    }
-  }
-
-  *::selection {
-    background: var(--color-theme-02) !important;
-  }
-}
-
-.classicyDesktopSelect {
-  position: absolute !important;
-  border: var(--window-border-size) dotted var(--color-black);
-  outline: var(--window-border-size) dotted var(--color-black);
-}