classicy 0.5.4 → 0.5.6

package/src/SystemFolder/QuickTime/PictureViewer/PictureViewer.tsx

@@ -1,130 +0,0 @@
-import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {ClassicyApp} from '@/SystemFolder/SystemResources/App/ClassicyApp'
-import {quitMenuItemHelper} from '@/SystemFolder/SystemResources/App/ClassicyAppUtils'
-import {ClassicyWindow} from '@/SystemFolder/SystemResources/Window/ClassicyWindow'
-import React, {useEffect} from 'react'
-import appIcon from 'img/icons/system/quicktime/player.png'
-import defaultDocumentIcon from 'img/icons/system/quicktime/movie.png'
-
-export type QuickTimeImageDocument = {
-    url: string
-    name?: string
-    icon?: string
-}
-
-export const PictureViewerAppInfo = {
-    name: 'Picture Viewer',
-    id: 'PictureViewer.app',
-    icon: appIcon,
-}
-
-export const QuickTimePictureViewer: React.FC = () => {
-    const {name: appName, id: appId, icon: appIcon} = PictureViewerAppInfo
-
-    const desktopEventDispatch = useAppManagerDispatch()
-    const desktop = useAppManager()
-
-    const appData = desktop.System.Manager.App.apps[appId]?.data
-
-    const openDocuments = appData && 'openFiles' in appData ? appData['openFiles'] : []
-
-    // Load Default Demo documents on open
-    useEffect(() => {
-        const appData = desktop.System.Manager.App.apps[appId]?.data || {}
-        if (
-            (desktop.System.Manager.App.apps[appId]?.open && !appData['openDocuments']) ||
-            appData['openDocuments']?.length === 0
-        ) {
-            const defaultDocs = [
-                {
-                    url: '/assets/img/apps/quicktime/sample-picture.jpg',
-                    name: 'Sample Picture',
-                    icon: defaultDocumentIcon,
-                },
-            ]
-            desktopEventDispatch({
-                type: 'ClassicyAppPictureViewerOpenDocuments',
-                documents: defaultDocs,
-            })
-        }
-    }, [])
-
-    const openUrl = (name: string, url: string, iconUrl?: string) => {
-        desktopEventDispatch({
-            type: 'ClassicyAppPictureViewerOpenDocument',
-            document: {name, url: url, icon: iconUrl || defaultDocumentIcon},
-        })
-
-        const windowIndex = desktop.System.Manager.App.apps[appId].windows.findIndex(
-            (w) => w.id === appId + '_PictureViewer_' + url
-        )
-        const ws = desktop.System.Manager.App.apps[appId].windows[windowIndex]
-        if (ws) {
-            ws.closed = false
-            desktopEventDispatch({
-                type: 'ClassicyWindowOpen',
-                app: {
-                    id: appId,
-                },
-                window: ws,
-            })
-            desktopEventDispatch({
-                type: 'ClassicyWindowFocus',
-                app: {
-                    id: appId,
-                },
-                window: ws,
-            })
-        }
-    }
-
-    const appMenu = [
-        {
-            id: 'file',
-            title: 'File',
-            menuChildren: [quitMenuItemHelper(appId, appName, appIcon)],
-        },
-    ]
-
-    return (
-        <ClassicyApp id={appId} name={appName} icon={appIcon}>
-            {Array.isArray(openDocuments) &&
-                openDocuments.length > 0 &&
-                openDocuments.map((doc: QuickTimeImageDocument) => (
-                    <ClassicyWindow
-                        key={doc.name + '_' + doc.url}
-                        id={appId + '_PictureViewer_' + doc.url}
-                        title={doc.name}
-                        icon={doc.icon || undefined}
-                        minimumSize={[300, 60]}
-                        appId={appId}
-                        closable={true}
-                        resizable={true}
-                        zoomable={true}
-                        scrollable={true}
-                        collapsable={false}
-                        initialSize={[400, 100]}
-                        initialPosition={[300, 50]}
-                        modal={false}
-                        appMenu={appMenu}
-                        onCloseFunc={() =>
-                            desktopEventDispatch({
-                                type: 'ClassicyAppPictureViewerCloseDocument',
-                                document: doc,
-                            })
-                        }
-                    >
-                        <img
-                            src={doc.url}
-                            alt={doc.name}
-                            style={{
-                                width: 'calc(100% - var(--window-padding-size))',
-                                height: 'calc(100% - var(--window-padding-size))',
-                                objectFit: 'contain',
-                            }}
-                        />
-                    </ClassicyWindow>
-                ))}
-        </ClassicyApp>
-    )
-}

package/src/SystemFolder/QuickTime/PictureViewer/PictureViewerContext.tsx

@@ -1,67 +0,0 @@
-import { classicyAppEventHandler, ClassicyStore } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManager'
-import { PictureViewerAppInfo } from '@/SystemFolder/QuickTime/PictureViewer/PictureViewer'
-import {ClassicyQuickTimeDocument} from '@/SystemFolder/QuickTime/MoviePlayer/MoviePlayerContext'
-
-type classicyQuickTimeEvent = {
-    type: string
-    document?: ClassicyQuickTimeDocument
-    documents?: ClassicyQuickTimeDocument[]
-}
-
-export const classicyQuickTimePictureViewerEventHandler = (ds: ClassicyStore, action: classicyQuickTimeEvent) => {
-    const { id: appId } = PictureViewerAppInfo
-    if (!ds.System.Manager.App.apps[appId]) {
-        ds = classicyAppEventHandler(ds, {
-            type: 'ClassicyAppLoad',
-            app: PictureViewerAppInfo,
-        })
-    }
-
-    if (!ds.System.Manager.App.apps[appId].data) {
-        ds.System.Manager.App.apps[appId].data = {}
-    }
-
-    if (!("openFiles" in ds.System.Manager.App.apps[appId].data)) {
-        ds.System.Manager.App.apps[appId].data['openFiles'] = []
-    }
-
-    const openDocUrls = ds.System.Manager.App.apps[appId].data['openFiles'].map(
-        (of: ClassicyQuickTimeDocument) => of.url
-    )
-
-    switch (action.type) {
-        case 'ClassicyAppPictureViewerOpenDocument': {
-            if (Array.isArray(openDocUrls) && !openDocUrls.includes(action.document?.url)) {
-                ds.System.Manager.App.apps[appId].data['openFiles'] = Array.from(
-                    new Set([...ds.System.Manager.App.apps[appId].data['openFiles'], action.document])
-                )
-                ds = classicyAppEventHandler(ds, {
-                    type: 'ClassicyAppOpen',
-                    app: PictureViewerAppInfo,
-                })
-            }
-            break
-        }
-        case 'ClassicyAppPictureViewerOpenDocuments': {
-            const docs = action.documents?.filter((doc) => !openDocUrls.includes(doc.url))
-            if (!docs) {
-                break
-            }
-            ds.System.Manager.App.apps[appId].data['openFiles'] = Array.from(
-                new Set([...ds.System.Manager.App.apps[appId].data['openFiles'], ...docs])
-            )
-            ds = classicyAppEventHandler(ds, {
-                type: 'ClassicyAppOpen',
-                app: PictureViewerAppInfo,
-            })
-            break
-        }
-        case 'ClassicyAppPictureViewerCloseDocument': {
-            ds.System.Manager.App.apps[appId].data['openFiles'] = ds.System.Manager.App.apps[appId].data[
-                'openFiles'
-            ].filter((p: ClassicyQuickTimeDocument) => p.url != action.document?.url)
-            break
-        }
-    }
-    return ds
-}

package/src/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow.scss

@@ -1,10 +0,0 @@
-.aboutWindow {
-  font-family: var(--header-font) serif;
-  display: flex;
-  align-content: center;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  justify-items: center;
-}

package/src/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow.tsx

@@ -1,56 +0,0 @@
-import './ClassicyAboutWindow.scss'
-import {ClassicyButton} from '@/SystemFolder/SystemResources/Button/ClassicyButton'
-import {ClassicyMenuItem} from '@/SystemFolder/SystemResources/Menu/ClassicyMenu'
-import {ClassicyWindow} from '@/SystemFolder/SystemResources/Window/ClassicyWindow'
-import React, {useEffect} from "react";
-import {useAnalytics} from "use-analytics";
-
-export type ClassicyAboutWindowProps = {
-    appId: string
-    appName: string
-    appIcon: string
-    hideFunc: any
-    appMenu?: ClassicyMenuItem[]
-}
-
-export const ClassicyAboutWindow: React.FC<ClassicyAboutWindowProps> = ({
-                                                                            appId,
-                                                                            appName,
-                                                                            appIcon,
-                                                                            hideFunc,
-                                                                            appMenu,
-                                                                        }) => {
-    const {track} = useAnalytics()
-    const analyticsArgs = {type: "ClassicyAboutWindow", appId, appName, appIcon}
-
-    useEffect(() => {
-        track("open", analyticsArgs)
-    }, []);
-
-    return (
-        <ClassicyWindow
-            id="AppearanceManager_about"
-            appId={appId}
-            closable={false}
-            resizable={false}
-            zoomable={false}
-            scrollable={false}
-            collapsable={false}
-            initialSize={[0, 0]}
-            initialPosition={[50, 50]}
-            modal={true}
-            appMenu={appMenu}
-        >
-            <div className={"aboutWindow"}>
-                <img src={appIcon} alt="About"/>
-                <h1>{appName}</h1>
-                <h5>Not Copyright &copy; 1997 Apple Computer, Inc.</h5>
-                <ClassicyButton onClickFunc={hideFunc}>OK</ClassicyButton>
-            </div>
-        </ClassicyWindow>
-    )
-}
-
-export const getClassicyAboutWindow = (props: ClassicyAboutWindowProps) => {
-    return <ClassicyAboutWindow {...props} />
-}

package/src/SystemFolder/SystemResources/App/ClassicyApp.tsx

@@ -1,131 +0,0 @@
-import {intToHex} from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyColors'
-import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {ClassicyWindow} from '@/SystemFolder/SystemResources/Window/ClassicyWindow'
-import React, {useEffect} from 'react'
-import {JSONTree} from 'react-json-tree'
-
-export interface ClassicyAppProps {
-    id: string
-    name: string
-    icon: string
-    defaultWindow?: string
-    noDesktopIcon?: boolean
-    addSystemMenu?: boolean
-    debug?: boolean
-    openOnBoot?: boolean
-    children?: React.ReactNode
-}
-
-export const ClassicyApp: React.FC<ClassicyAppProps> = ({
-                                                            id,
-                                                            icon,
-                                                            name,
-                                                            openOnBoot,
-                                                            addSystemMenu,
-                                                            noDesktopIcon,
-                                                            defaultWindow,
-                                                            debug = false,
-                                                            children,
-                                                        }) => {
-    const desktopContext = useAppManager()
-    const desktopEventDispatch = useAppManagerDispatch()
-
-    const themeData = desktopContext.System.Manager.Appearance.activeTheme
-    const debuggerJSONTheme = {
-        base00: intToHex(themeData.color.white),
-        base01: intToHex(themeData.color.black),
-        base02: intToHex(themeData.color.system[3]),
-        base03: intToHex(themeData.color.system[3]),
-        base04: intToHex(themeData.color.system[3]),
-        base05: intToHex(themeData.color.system[4]),
-        base06: intToHex(themeData.color.system[5]),
-        base07: intToHex(themeData.color.system[6]),
-        base08: intToHex(themeData.color.error),
-        base09: intToHex(themeData.color.theme[2]),
-        base0A: intToHex(themeData.color.theme[1]),
-        base0B: intToHex(themeData.color.theme[2]),
-        base0C: intToHex(themeData.color.theme[3]),
-        base0D: intToHex(themeData.color.theme[4]),
-        base0E: intToHex(themeData.color.theme[5]),
-        base0F: intToHex(themeData.color.theme[6]),
-    }
-
-    const isAppOpen = () => {
-        return desktopContext.System.Manager.App.apps[id]?.open
-    }
-
-    const isAppActive = () => {
-        return desktopContext.System.Manager.App.apps[id]?.focused
-    }
-
-    const onFocus = () => {
-        desktopEventDispatch({
-            type: 'ClassicyAppActivate',
-            app: {id: id},
-        })
-    }
-
-    useEffect(() => {
-        if (addSystemMenu) {
-            desktopEventDispatch({
-                type: 'ClassicyDesktopAppMenuAdd',
-                app: {
-                    id: id,
-                    name: name,
-                    icon: icon,
-                },
-            })
-        } else {
-            desktopEventDispatch({
-                type: 'ClassicyDesktopAppMenuRemove',
-                app: {
-                    id: id,
-                    name: name,
-                    icon: icon,
-                },
-            })
-        }
-        if (isAppActive() && defaultWindow) {
-            desktopEventDispatch({
-                type: 'ClassicyWindowFocus',
-                app: {
-                    id: id,
-                },
-                window: {
-                    id: defaultWindow,
-                },
-            })
-        }
-
-        if (!noDesktopIcon) {
-            desktopEventDispatch({
-                type: 'ClassicyDesktopIconAdd',
-                app: {
-                    id: id,
-                    name: name,
-                    icon: icon,
-                },
-                kind: 'app_shortcut',
-            })
-        }
-    }, [addSystemMenu, noDesktopIcon])
-
-    return <div onMouseDown={onFocus}>{isAppOpen() && <>
-        {children}
-        {debug && (
-            <ClassicyWindow
-                initialSize={[400, 300]}
-                initialPosition={[100, 200]}
-                title={'DEBUG ' + name}
-                id={id + '_debugger'}
-                appId={id}
-                appMenu={[{id: 'Debug', title: 'Debug'}]}
-            >
-                <h1>Providers</h1>
-                <hr/>
-                <h2>desktopContext</h2>
-                <JSONTree data={desktopContext} theme={debuggerJSONTheme}/>
-            </ClassicyWindow>
-        )}
-    </>}</div>
-}

package/src/SystemFolder/SystemResources/App/ClassicyAppUtils.tsx

@@ -1,25 +0,0 @@
-export const quitAppHelper = (appId: string, appName: string, appIcon: string) => {
-    return {
-        type: 'ClassicyAppClose',
-        app: {
-            id: appId,
-            title: appName,
-            icon: appIcon,
-        },
-    }
-}
-
-export const quitMenuItemHelper = (appId: string, appName: string, appIcon: string) => {
-    return {
-        id: appId + '_quit',
-        title: 'Quit',
-        event: 'ClassicyAppClose',
-        eventData: {
-            app: {
-                id: appId,
-                title: appName,
-                icon: appIcon,
-            },
-        },
-    }
-}

package/src/SystemFolder/SystemResources/Boot/ClassicyBoot.scss

@@ -1,9 +0,0 @@
-.classicyBoot {
-  position: absolute;
-  z-index: 1000 !important;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: black !important;
-}

package/src/SystemFolder/SystemResources/Boot/ClassicyBoot.tsx

@@ -1,11 +0,0 @@
-import './ClassicyBoot.scss'
-import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
-import classNames from 'classnames'
-import React from 'react'
-
-export const ClassicyBoot: React.FC = () => {
-    const player = useSoundDispatch()
-    player({type: 'ClassicySoundPlay', sound: 'ClassicyBoot'})
-
-    return <div className={classNames("classicyBoot")}/>
-}

package/src/SystemFolder/SystemResources/Button/ClassicyButton.scss

@@ -1,57 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.classicyButton {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-
-  margin: calc(var(--window-padding-size));
-  padding: calc(var(--window-padding-size) / 2) var(--window-padding-size);
-  user-select: none;
-
-  &:focus {
-    outline: var(--color-outline) solid calc(var(--window-border-size) * 2) !important;
-  }
-
-  @include appearance.platinumWindowDepressable;
-}
-
-.classicyButtonDefault {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-
-  margin: calc(var(--window-padding-size));
-  padding: calc(var(--window-padding-size) / 2) var(--window-padding-size);
-  user-select: none;
-
-  @include appearance.platinumDepressableDefault;
-
-  &:active:disabled {
-    box-shadow: none;
-  }
-}
-
-.classicyButtonShapeSquare {
-  width: calc(var(--window-control-size) * 4);
-  padding: calc(var(--window-padding-size) * 2);
-  border-radius: 0;
-  aspect-ratio: 1/1 !important;
-
-  img {
-    width: 100%;
-  }
-}
-
-.classicyButtonSmall {
-  font-size: calc(var(--ui-font-size) / 2);
-  border-radius: calc(var(--window-padding-size) / 2);
-}
-
-.classicyButtonShapeSquare.classicyButtonSmall {
-  width: calc(var(--window-control-size) * 2) !important;
-  height: calc(var(--window-control-size) * 2) !important;
-  padding: calc(var(--window-padding-size) * 0.5);
-
-  img {
-    width: 90%;
-  }
-}

package/src/SystemFolder/SystemResources/Button/ClassicyButton.tsx

@@ -1,58 +0,0 @@
-import './ClassicyButton.scss'
-import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
-import classNames from 'classnames'
-import React from 'react'
-import {useAnalytics} from "use-analytics";
-
-type ClassicyButtonProps = React.PropsWithChildren<{
-    isDefault?: boolean
-    disabled?: boolean
-    onClickFunc?: React.MouseEventHandler<HTMLButtonElement>
-    buttonShape?: 'rectangle' | 'square'
-    buttonSize?: 'medium' | 'small'
-    buttonType?: 'button' | 'submit' | 'reset'
-}>
-
-export const ClassicyButton: React.FC<ClassicyButtonProps> = ({
-                                                                  isDefault = false,
-                                                                  buttonType = 'button',
-                                                                  buttonShape = 'rectangle',
-                                                                  buttonSize,
-                                                                  disabled = false,
-                                                                  onClickFunc,
-                                                                  children,
-                                                              }) => {
-    const player = useSoundDispatch()
-
-    const {track} = useAnalytics()
-    const analyticsArgs = {type: "ClassicyButton", isDefault, disabled}
-
-    const onHandleFunc = (e: React.MouseEvent<HTMLButtonElement>) => {
-        track('click', {...analyticsArgs})
-        onClickFunc && onClickFunc(e)
-    }
-
-    return (
-        <button
-            type={buttonType}
-            tabIndex={0}
-            role={buttonType}
-            className={classNames(
-                "classicyButton",
-                isDefault ? "classicyButtonDefault" : '',
-                buttonShape === 'square' ? "classicyButtonShapeSquare" : '',
-                buttonSize === 'small' ? "classicyButtonSmall" : ''
-            )}
-            onClick={onHandleFunc}
-            onMouseDown={() => {
-                player({type: 'ClassicySoundPlay', sound: 'ClassicyButtonClickDown'})
-            }}
-            onMouseUp={() => {
-                player({type: 'ClassicySoundPlay', sound: 'ClassicyButtonClickUp'})
-            }}
-            disabled={disabled}
-        >
-            {children}
-        </button>
-    )
-}

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

@@ -1,90 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.ClassicyCheckboxGroup {
-  display: flex;
-  flex-direction: row;
-  padding: calc(var(--window-border-size) * 2);
-}
-
-.ClassicyCheckbox {
-  width: calc(var(--window-control-size));
-  height: var(--window-control-size);
-  margin: var(--window-border-size);
-  border-radius: 0;
-  @include appearance.platinumWindowBorder;
-  background: var(--color-system-03);
-  appearance: none;
-
-  &:checked {
-    &:after {
-      font-family: var(--ui-font), sans-serif;
-      font-size: calc(var(--ui-font-size) * 1.25);
-      line-height: calc(var(--ui-font-size) * 0.65);
-      display: flex;
-      justify-content: center;
-      content: '\00D7';
-      text-shadow: var(--color-system-05) 1px 1px 2px;
-    }
-  }
-
-  &:disabled:checked {
-    color: var(--color-system-05);
-  }
-
-  &:active {
-    background: var(--color-system-06);
-    box-shadow: none;
-  }
-
-  &:focus {
-    border-radius: 1px;
-    outline: var(--color-outline) solid calc(var(--window-border-size) * 2) !important;
-  }
-
-  &:disabled,
-  &:disabled:active {
-    border: var(--window-border-size) solid var(--color-system-06) !important;
-    background: transparent;
-    box-shadow: none;
-  }
-}
-
-.ClassicyCheckboxLabel {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  height: var(--window-control-size);
-  margin-left: calc(var(--window-control-size) / 2);
-}
-
-.ClassicyCheckboxLabelDisabled {
-  color: var(--color-system-05);
-}
-
-.ClassicyCheckboxDefault {
-  &:checked,
-  &:active {
-    &:after {
-      font-family: var(--ui-font), sans-serif;
-      font-size: calc(var(--ui-font-size) * 1);
-      line-height: calc(var(--ui-font-size) * 0.75);
-      display: flex;
-      justify-content: center;
-      content: '\2713';
-      text-shadow: var(--color-system-05) 1px 1px 2px;
-    }
-  }
-}
-
-.ClassicyCheckboxMixed {
-  &:checked {
-    &:after {
-      font-family: var(--ui-font), sans-serif;
-      font-size: calc(var(--ui-font-size) * 1);
-      line-height: calc(var(--ui-font-size) * 0.75);
-      display: flex;
-      justify-content: center;
-      content: '-';
-      text-shadow: var(--color-system-05) 1px 1px 2px;
-    }
-  }
-}