classicy 0.5.2 → 0.5.4

package/src/SystemFolder/SystemResources/RadioInput/ClassicyRadioInput.tsx

@@ -3,6 +3,7 @@ import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/
 import './ClassicyRadioInput.scss'
 import classNames from 'classnames'
 import React, { useState } from 'react'
+import {useAnalytics} from 'use-analytics'
 
 type ClassicyRadioInputProps = {
     name: string
@@ -33,8 +34,12 @@ export const ClassicyRadioInput: React.FC<ClassicyRadioInputProps> = ({
     const [check, setCheck] = useState<string>(inputs.findLast((input) => input.checked === true)?.id || '')
     const player = useSoundDispatch()
 
+    const {track} = useAnalytics()
+    const analyticsArgs = {name, label, disabled, inputs}
+
     const handleOnChange = (id: string) => {
         setCheck(id)
+        track("selected", {type: 'ClassicyRadioInput', itemId: id, ...analyticsArgs })
         if (onClickFunc) {
             onClickFunc(id)
         }
@@ -74,6 +79,7 @@ export const ClassicyRadioInput: React.FC<ClassicyRadioInputProps> = ({
                                     tabIndex={0}
                                     onChange={() => !item.disabled && handleOnChange(item.id)}
                                     onMouseDown={() => {
+                                        track("click", {type: 'ClassicyRadioInput', itemId: item.id, ...analyticsArgs})
                                         player({ type: 'ClassicySoundPlay', sound: 'ClassicyInputRadioClickDown' })
                                     }}
                                     onMouseUp={() => {
@@ -85,7 +91,9 @@ export const ClassicyRadioInput: React.FC<ClassicyRadioInputProps> = ({
                                 labelFor={item.id}
                                 disabled={item.disabled}
                                 label={item.label}
-                                onClickFunc={() => !item.disabled && handleOnChange(item.id)}
+                                onClickFunc={() => {
+                                    !item.disabled && handleOnChange(item.id)
+                                }}
                             />
                         </div>
                     ))}

package/src/SystemFolder/SystemResources/Tabs/ClassicyTabs.tsx

@@ -2,6 +2,7 @@ import './ClassicyTabs.scss'
 import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
 import tabMaskImageURL from 'img/ui/tab.svg'
 import React, {useState} from 'react'
+import {useAnalytics} from 'use-analytics'
 
 interface TabProps {
     tabs: TabIndividual[]
@@ -15,15 +16,22 @@ interface TabIndividual {
 export const ClassicyTabs: React.FC<TabProps> = ({tabs}) => {
     const [activeTab, setActiveTab] = useState(0)
     const player = useSoundDispatch()
+    const {track} = useAnalytics()
+    const analyticsArgs = {tabs: tabs.map((t) => t.title)}
 
     const handleTabClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         player({type: 'ClassicySoundPlay', sound: 'ClassicyTabClickUp'})
-        setActiveTab(parseInt((e.target as HTMLButtonElement).id))
+        const tabId = parseInt((e.target as HTMLButtonElement).id)
+        track("click", {type: 'ClassicyTab', tabId, ...analyticsArgs})
+        setActiveTab(tabId)
     }
     const startTabClick = (e: React.MouseEvent<HTMLButtonElement>)=> {
         player({type: 'ClassicySoundPlay', sound: 'ClassicyTabClickDown'})
+        const tabId = parseInt((e.target as HTMLButtonElement).id)
+        track("selected", {type: 'ClassicyTab', tabId, ...analyticsArgs})
     }
 
+
     return (
         <div className={"classicyTabContainer"}>
             <div className={"classicyButtonsHolder"}>

package/src/SystemFolder/SystemResources/Window/ClassicyWindow.scss

@@ -139,8 +139,8 @@
   box-shadow: none !important;
 
   * {
-    user-select: none; /* Prevent text selection while dragging */
     opacity: 0;
+    user-select: none; /* Prevent text selection while dragging */
     user-drag: none; /* Prevent accidental dragging of child elements */
   }
 }

package/src/SystemFolder/SystemResources/Window/ClassicyWindow.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import {ClassicyStoreSystemAppWindow} from "@/SystemFolder/ControlPanels/AppManager/ClassicyAppManager";
-import fileIcon from 'img/icons/system/files/file.png'
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
 import {ClassicyContextualMenu} from '@/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu'
 import {ClassicyMenuItem} from '@/SystemFolder/SystemResources/Menu/ClassicyMenu'
 import './ClassicyWindow.scss'
-import {ClassicyWindowState} from '@/SystemFolder/SystemResources/Window/ClassicyWindowContext'
 import classNames from 'classnames'
+import fileIcon from 'img/icons/system/files/file.png'
 import React, {ReactNode, useEffect, useMemo, useRef, useState} from 'react'
+import {useAnalytics} from 'use-analytics'
 
 interface ClassicyWindowProps {
     title?: string
@@ -69,10 +69,30 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
 
     const clickOffset = [10, 10]
 
-    const desktopContext = useDesktop()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopContext = useAppManager()
+    const desktopEventDispatch = useAppManagerDispatch()
     let player = useSoundDispatch()
 
+    const {track} = useAnalytics()
+    const analyticsArgs = {
+        appId,
+        id,
+        icon,
+        hidden,
+        closable,
+        zoomable,
+        collapsable,
+        resizable,
+        scrollable,
+        modal,
+        windowType: type,
+        growable,
+        defaultWindow,
+        initialSize,
+        initialPosition,
+        minimumSize
+    }
+
     const windowRef = useRef<HTMLDivElement | null>(null)
 
     const ws = useMemo(() => {
@@ -92,7 +112,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
             default: defaultWindow,
             id: id,
             appId: appId,
-            minimumSize: [0,0],
+            minimumSize: [0, 0],
         }
 
         const window = desktopContext.System.Manager.App.apps[appId]?.windows.find((w) => w.id === id)
@@ -133,8 +153,8 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
     }, [appId, desktopContext.System.Manager.App.apps[appId], ws])
 
     const startResizeWindow = (e: React.MouseEvent<HTMLDivElement>) => {
-
         e.preventDefault()
+        track('resize', {type: "ClassicyWindow", ...analyticsArgs})
         desktopEventDispatch({
             type: 'ClassicyWindowPosition',
             app: {
@@ -154,6 +174,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
             // Don't allow modal error dialogs to move
             return
         }
+        track('move', {type: "ClassicyWindow", ...analyticsArgs})
         setClickPosition([
             e.clientX - (windowRef?.current?.getBoundingClientRect().left || 0),
             e.clientY - (windowRef?.current?.getBoundingClientRect().top || 0),
@@ -188,6 +209,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
     }
 
     const stopChangeWindow = (e: React.MouseEvent<HTMLDivElement>) => {
+        track('halt', {type: "ClassicyWindow", ...analyticsArgs})
         e.preventDefault()
         setActive()
         if (ws.resizing || ws.dragging || ws.moving) {
@@ -227,6 +249,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
 
     const setActive = (e?: React.MouseEvent<HTMLDivElement>) => {
         e?.preventDefault()
+        track('focus', {type: "ClassicyWindow", ...analyticsArgs})
         if (!isActive()) {
             player({type: 'ClassicySoundPlay', sound: 'ClassicyWindowFocus'})
 
@@ -261,6 +284,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
 
     const setCollapse = (toCollapse: boolean) => {
         if (toCollapse) {
+            track('collapse', {type: "ClassicyWindow", ...analyticsArgs})
             setZoom(false)
             player({type: 'ClassicySoundPlay', sound: 'ClassicyWindowCollapse'})
             desktopEventDispatch({
@@ -271,6 +295,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
                 },
             })
         } else {
+            track('expand', {type: "ClassicyWindow", ...analyticsArgs})
             player({type: 'ClassicySoundPlay', sound: 'ClassicyWindowExpand'})
             desktopEventDispatch({
                 type: 'ClassicyWindowExpand',
@@ -296,9 +321,10 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
         if (!playSound) {
             player({
                 type: 'ClassicySoundPlay',
-                sound: toZoom ? 'ClassicyWindowZoomMinimize' : 'ClassicyWindowZoomMinimize',
+                sound: toZoom ? 'ClassicyWindowZoomMaximize' : 'ClassicyWindowZoomMinimize',
             })
         }
+        track(toZoom ? 'zoom' : "minimize", {type: "ClassicyWindow", ...analyticsArgs})
         desktopEventDispatch({
             type: 'ClassicyWindowZoom',
             zoomed: toZoom,
@@ -321,7 +347,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
         // })
     }
 
-    const hideContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+    const onMouseOutHandler = (e: React.MouseEvent<HTMLDivElement>) => {
         e.preventDefault()
         setContextMenu(false, [0, 0])
     }
@@ -329,6 +355,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
     const showContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
         e.preventDefault()
         setActive()
+        track("contextMenu", {type: "ClassicyWindow", show: true, ...analyticsArgs})
         setContextMenu(true, [e.clientX - clickOffset[0], e.clientY - clickOffset[1]])
     }
 
@@ -351,6 +378,7 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
 
     const close = () => {
         setActive()
+        track("close", {type: "ClassicyWindow", show: true, ...analyticsArgs})
         player({type: 'ClassicySoundPlay', sound: 'ClassicyWindowClose'})
         desktopEventDispatch({
             type: 'ClassicyWindowClose',
@@ -364,24 +392,6 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
         }
     }
 
-    const titleBar = () => {
-        if (title !== '') {
-            return (
-                <>
-                    <div className={"classicyWindowTitleLeft"}></div>
-                    <div className={"classicyWindowIcon"}>
-                        <img src={icon} alt={title}/>
-                    </div>
-                    <div className={"classicyWindowTitleText"}>
-                        <p>{title}</p>
-                    </div>
-                    <div className={"classicyWindowTitleRight"}></div>
-                </>
-            )
-        }
-        return <div className={"classicyWindowTitleCenter"}></div>
-    }
-
     return (
         <>
             {!ws.closed && (
@@ -398,23 +408,23 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
                     }}
                     className={classNames(
                         "classicyWindow",
-                        ws.collapsed === true ? "classicyWindowCollapsed" : '',
-                        ws.zoomed === true ? "classicyWindowZoomed" : '',
+                        ws.collapsed ? "classicyWindowCollapsed" : '',
+                        ws.zoomed ? "classicyWindowZoomed" : '',
                         isActive()
                             ? "classicyWindowActive"
                             : "classicyWindowInactive",
-                        ws.closed === false ? '' : "classicyWindowInvisible",
-                        ws.moving === true ? "classicyWindowDragging" : '',
-                        ws.resizing === true ? "classicyWindowResizing" : '',
-                        modal === true ? "classicyWindowModal" : '',
+                        !ws.closed ? '' : "classicyWindowInvisible",
+                        ws.moving ? "classicyWindowDragging" : '',
+                        ws.resizing ? "classicyWindowResizing" : '',
+                        modal ? "classicyWindowModal" : '',
                         modal && type == 'error' ? "classicyWindowRed" : '',
-                        scrollable === true ? '' : "classicyWindowNoScroll"
+                        scrollable ? '' : "classicyWindowNoScroll"
                     )}
                     onMouseMove={changeWindow}
                     onMouseUp={stopChangeWindow}
                     onClick={setActive}
                     onContextMenu={showContextMenu}
-                    onMouseOut={hideContextMenu}
+                    onMouseOut={onMouseOutHandler}
                 >
                     <>
                         {contextMenu && ws.contextMenu && (
@@ -441,7 +451,20 @@ export const ClassicyWindow: React.FC<ClassicyWindowProps> = ({
                                 onMouseDown={startMoveWindow}
                                 onMouseUp={stopChangeWindow}
                             >
-                                {titleBar()}
+                                {title !== '' ? (
+                                        <>
+                                            <div className={"classicyWindowTitleLeft"}></div>
+                                            <div className={"classicyWindowIcon"}>
+                                                <img src={icon} alt={title}/>
+                                            </div>
+                                            <div className={"classicyWindowTitleText"}>
+                                                <p>{title}</p>
+                                            </div>
+                                            <div className={"classicyWindowTitleRight"}></div>
+                                        </>
+                                    )
+                                    : (<div className={"classicyWindowTitleCenter"}></div>)
+                                }
                             </div>
                             {zoomable && (
                                 <div className={"classicyWindowControlBox"}>

package/src/custom.d.ts

@@ -1,9 +1,90 @@
 declare module "*.svg" {
-  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  export default content;
+    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    export default content;
 }
 
 declare module "*.png" {
-  const value: any;
-  export default value;
-}
+    const value: any;
+    export default value;
+}
+
+
+declare module '@analytics/google-tag-manager' {
+    type AnalyticsPlugin = import('analytics').AnalyticsPlugin;
+
+    type GoogleTagManagerConfig = {
+        auth?: string;
+        containerId: string;
+        customScriptSrc?: string;
+        dataLayerName?: string;
+        debug?: boolean;
+        execution?: string;
+        preview?: string;
+    };
+
+    function googleTagManager(config: GoogleTagManagerConfig): AnalyticsPlugin;
+
+    export default googleTagManager;
+}
+
+declare module '@analytics/google-analytics' {
+    type GoogleAnalyticsOptions = {
+        /** Google Analytics MEASUREMENT IDs */
+        measurementIds: string[];
+
+        /** Enable Google Analytics debug mode */
+        debug?: boolean;
+
+        /** The optional name for dataLayer object. Defaults to 'ga4DataLayer'. */
+        dataLayerName?: string;
+
+        /** The optional name for the global gtag function. Defaults to 'gtag'. */
+        gtagName?: string;
+
+        /** Configuration for gtag, including anonymizing IP and cookie settings */
+        gtagConfig?: {
+            anonymize_ip?: boolean;
+            cookie_domain?: string;
+            cookie_expires?: number;
+            cookie_prefix?: string;
+            cookie_update?: boolean;
+            cookie_flags?: string;
+        };
+
+        /** Custom URL for google analytics script, if proxying calls */
+        customScriptSrc?: string;
+    };
+
+    type AnalyticsPlugin = {
+        /** Name of plugin */
+        name: string;
+
+        /** Exposed events of the plugin */
+        EVENTS?: any;
+
+        /** Configuration of the plugin */
+        config?: any;
+
+        /** Method to load analytics scripts */
+        initialize?: (...params: any[]) => any;
+
+        /** Page visit tracking method */
+        page?: (...params: any[]) => any;
+
+        /** Custom event tracking method */
+        track?: (...params: any[]) => any;
+
+        /** User identify method */
+        identify?: (...params: any[]) => any;
+
+        /** Function to determine if analytics script is loaded */
+        loaded?: (...params: any[]) => any;
+
+        /** Fire function when the plugin is ready */
+        ready?: (...params: any[]) => any;
+    };
+
+    function GoogleAnalytics(options: GoogleAnalyticsOptions): AnalyticsPlugin;
+
+    export default GoogleAnalytics;
+}

package/src/index.tsx

@@ -1,11 +1,57 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.scss";
-import App from "./App";
-
-const root = ReactDOM.createRoot(document.getElementById("app") as HTMLElement);
-root.render(
-    <React.StrictMode>
-        <App/>
-    </React.StrictMode>
-);
+export * from './SystemFolder/SystemResources/App/ClassicyApp';
+export * from './SystemFolder/SystemResources/App/ClassicyAppUtils';
+export * from './SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow';
+export * from './SystemFolder/SystemResources/Boot/ClassicyBoot';
+export * from './SystemFolder/SystemResources/File/ClassicyFileBrowser';
+export * from './SystemFolder/SystemResources/File/ClassicyFileSystem';
+export * from './SystemFolder/SystemResources/File/ClassicyFileBrowserViewTable';
+export * from './SystemFolder/SystemResources/File/ClassicyFileBrowserUtils';
+export * from './SystemFolder/SystemResources/File/ClassicyFileBrowserViewIcons';
+export * from './SystemFolder/SystemResources/File/DefaultClassicyFileSystem';
+export * from './SystemFolder/SystemResources/File/ClassicyFileSystemModel';
+export * from './SystemFolder/SystemResources/Button/ClassicyButton';
+export * from './SystemFolder/SystemResources/Checkbox/ClassicyCheckbox';
+export * from './SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu';
+export * from './SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup';
+export * from './SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel';
+export * from './SystemFolder/SystemResources/DatePicker/ClassicyDatePicker';
+export * from './SystemFolder/SystemResources/DatePicker/ClassicyDatePickerUtils';
+export * from './SystemFolder/SystemResources/Desktop/ClassicyDesktop';
+export * from './SystemFolder/SystemResources/Desktop/ClassicyDesktopIcon';
+export * from './SystemFolder/SystemResources/Desktop/ClassicyDesktopIconContext';
+export * from './SystemFolder/SystemResources/Desktop/ClassicyDesktopManager';
+export * from './SystemFolder/SystemResources/Desktop/ClassicyDesktopWindowManagerContext';
+export * from './SystemFolder/SystemResources/Desktop/MenuBar/ClassicyDesktopMenuBar';
+export * from './SystemFolder/SystemResources/Desktop/MenuBar/Widgets/Time/ClassicyDesktopMenuWidgetTime';
+export * from './SystemFolder/SystemResources/Desktop/MenuBar/Widgets/Sound/ClassicyDesktopMenuWidgetSound';
+export * from './SystemFolder/SystemResources/Disclosure/ClassicyDisclosure';
+export * from './SystemFolder/SystemResources/Icon/ClassicyIcon';
+export * from './SystemFolder/SystemResources/Input/ClassicyInput';
+export * from './SystemFolder/SystemResources/Menu/ClassicyMenu';
+export * from './SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu';
+export * from './SystemFolder/SystemResources/ProgressBar/ClassicyProgressBar';
+export * from './SystemFolder/SystemResources/QuickTime/QuickTimeUtils';
+export * from './SystemFolder/SystemResources/QuickTime/QuickTimeMovieEmbed';
+export * from './SystemFolder/SystemResources/RadioInput/ClassicyRadioInput';
+export * from './SystemFolder/SystemResources/RichTextEditor/ClassicyRichTextEditor';
+export * from './SystemFolder/SystemResources/Tabs/ClassicyTabs';
+export * from './SystemFolder/SystemResources/TextEditor/ClassicyTextEditor';
+export * from './SystemFolder/SystemResources/TimePicker/ClassicyTimePicker';
+export * from './SystemFolder/SystemResources/Window/ClassicyWindow';
+export * from './SystemFolder/SystemResources/Window/ClassicyWindowContext';
+export * from './SystemFolder/QuickTime/MoviePlayer/MoviePlayer';
+export * from './SystemFolder/QuickTime/MoviePlayer/MoviePlayerContext';
+export * from './SystemFolder/QuickTime/PictureViewer/PictureViewer';
+export * from './SystemFolder/QuickTime/PictureViewer/PictureViewerContext';
+export * from './SystemFolder/Finder/Finder';
+export * from './SystemFolder/Finder/FinderContext';
+export * from './SystemFolder/ControlPanels/ClassicyControlPanels';
+export * from './SystemFolder/ControlPanels/SoundManager/ClassicySoundManager';
+export * from './SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext';
+export * from './SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearanceManager';
+export * from './SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearance';
+export * from './SystemFolder/ControlPanels/AppearanceManager/ClassicyColors';
+export * from './SystemFolder/ControlPanels/AppearanceManager/ClassicySize';
+export * from './SystemFolder/ControlPanels/AppManager/ClassicyAppManager';
+export * from './SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext';
+export * from './SystemFolder/ControlPanels/DateAndTimeManager/ClassicyDateAndTimeManager';

package/.babelrc

@@ -1,11 +0,0 @@
-{
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false
-      }
-    ],
-    '@babel/preset-react'
-  ]
-}