Merge pull request #197 from dpwoert/develop

Develop

core/online/src/Sidebar.tsx

@@ -74,8 +74,10 @@ const Sidebar = ({ app }: SidebarProps) => {
     async (url: string) => {
       await app.reset(false);
 
-      const frame: HTMLIFrameElement = document.querySelector('#frame iframe');
-      frame.src = url;
+      const frame: HTMLIFrameElement | null =
+        document.querySelector('#frame iframe');
+
+      if (frame) frame.src = url;
 
       // Show layers
       app.sidebar.setFn((curr) => ({

core/online/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": false,
     "incremental": true,

core/state/src/AppProvider.tsx

@@ -2,7 +2,7 @@ import { createContext } from 'react';
 
 import { App } from '@magic-circle/schema';
 
-export const AppContext = createContext<App>(null);
+export const AppContext = createContext<App | null>(null);
 
 type AppProviderProps = {
   app: App;

core/state/src/index.ts

@@ -2,5 +2,6 @@ export { default as AppProvider, AppContext } from './AppProvider';
 export { default as Store } from './store';
 export { default as StoreFamily } from './storeFamily';
 export { default as useStore } from './useStore';
+export { default as useStoreFamily } from './useStoreFamily';
 export { default as useReference } from './useReference';
 export { default as usePermanentState } from './usePermanentState';

core/state/src/storeFamily.ts

@@ -2,9 +2,9 @@
 import Store from './store';
 
 export default class StoreFamily<T> {
-  read: (id: string) => T;
-  cache: Record<string, Store<T>>;
-  _keys: string[];
+  read?: (id: string) => T;
+  cache: Record<string, Store<T>> = {};
+  private _keys: string[] = [];
 
   constructor() {
     this.reset();
@@ -15,19 +15,19 @@ export default class StoreFamily<T> {
 
     // ensure all values are updated
     Object.keys(this.cache).forEach((key) => {
-      this.cache[key].set(this.read(key));
+      this.cache[key].set(fn(key));
     });
 
     return this;
   }
 
   get(id: string) {
     if (!id) {
-      return new Store<T>(null);
+      return new Store(null);
     }
 
     // create store when needed
-    if (!this.cache[id]) {
+    if (!this.cache[id] && this.read) {
       const data = this.read(id);
       const store = new Store<T>(data);
       this.cache[id] = store;
@@ -38,12 +38,13 @@ export default class StoreFamily<T> {
       this._keys.push(id);
     }
 
-    return this.cache[id];
+    return this.cache[id] || null;
   }
 
   export(fn: (key: string, value: T) => void) {
     this._keys.forEach((key) => {
-      fn(key, this.get(key).value);
+      const result = this.get(key);
+      if (result && result.value) fn(key, result.value);
     });
   }
 

core/state/src/useReference.ts

@@ -8,10 +8,10 @@ export default function useReference(reference: CommandLineReference) {
   const app = useContext(AppContext);
 
   useEffect(() => {
-    app.commandLineReference.set(reference);
+    if (app) app.commandLineReference.set(reference);
 
     return () => {
-      app.commandLineReference.set(null);
+      if (app) app.commandLineReference.set(null);
     };
   }, [app, reference]);
 }

core/state/src/useStoreFamily.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import StoreFamily from './storeFamily';
+
+export default function useStoreFamily<T>(
+  storeFamily: StoreFamily<T>,
+  key: string
+): T | null {
+  const [value, setValue] = useState<T | null>(
+    () => storeFamily.get(key)?.value || null
+  );
+
+  useEffect(() => {
+    const listener = (newValue: T | null) => {
+      setValue(newValue);
+    };
+
+    // Listen to updates
+    const store = storeFamily.get(key);
+    store.onChange(listener);
+
+    // make sure we're in sync if changing stores
+    if (value !== store.value) {
+      setValue(store.value);
+    }
+
+    return () => {
+      store.removeListener(listener);
+    };
+  }, [storeFamily, key, value]);
+
+  return value;
+}

core/state/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": false,
     "incremental": true,

core/styles/src/Expand.tsx

@@ -9,13 +9,13 @@ import styled from 'styled-components';
 
 type ContainerProps = {
   expand: boolean;
-  height: number;
+  height?: number;
   duration: number;
 };
 
 const Container = styled.div<ContainerProps>`
   max-height: ${(props) => {
-    if (props.height === null) return 'auto';
+    if (props.height === undefined) return 'auto';
     return props.expand ? `${props.height}px` : 0;
   }};
   transition: max-height ${(props) => props.duration}ms ease;
@@ -34,8 +34,8 @@ const Expand = ({
   duration = 300,
   ...props
 }: ExpandProps) => {
-  const ref = useRef(null);
-  const [height, setHeight] = useState<number>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number>();
 
   useLayoutEffect(() => {
     if (ref.current) {

core/styles/src/Icon.tsx

@@ -24,7 +24,7 @@ export default function Icon({ name, ...props }: IconProps) {
   let Comp: Component | string = 'div';
 
   if (registry.has(name)) {
-    Comp = registry.get(name);
+    Comp = registry.get(name) || 'div';
   } else {
     console.error(`Icon '${name}' is not registered yet`);
   }

core/styles/src/Inner.tsx

@@ -160,10 +160,12 @@ const Inner = ({ children, breadcrumbs, buttons, onClose }: InnerProps) => {
           )}
           <Close
             onClick={() => {
-              app.layoutHooks.set({
-                ...app.layoutHooks.value,
-                inner: undefined,
-              });
+              if (app) {
+                app.layoutHooks.set({
+                  ...app.layoutHooks.value,
+                  inner: undefined,
+                });
+              }
 
               if (onClose) onClose();
             }}

core/styles/src/Menu.tsx

@@ -247,7 +247,11 @@ const MenuContainer = ({ items, close }: MenuContainerProps) => {
               }
             }}
             disabled={item.disabled}
-            key={item.key || (typeof item.label === 'string' && item.label)}
+            key={
+              item.key ||
+              (typeof item.label === 'string' ? item.label : '') ||
+              ''
+            }
             checked={item.type === MenuItemType.CHECKBOX && item.checked}
             active={item.active}
           >

core/styles/src/MenuPortal.tsx

@@ -18,7 +18,14 @@ const MenuPortal = ({ menu, ...props }: MenuPortalProps) => {
       placement={Placement.BOTTOM}
       alignment={Alignment.CENTER}
       background={COLORS.shades.s500.css}
-      content={(toggle) => <MenuList menu={menu} close={() => toggle()} />}
+      content={(toggle) => (
+        <MenuList
+          menu={menu}
+          close={() => {
+            if (toggle) toggle();
+          }}
+        />
+      )}
       {...props}
     />
   );

core/styles/src/Popover.tsx

@@ -239,9 +239,9 @@ const Popover = ({
   // create a unique id for each instance of this component
   // const idGen = String(Math.round(Math.random() * 1000));
   // const [id] = useState<string>(`popover-trigger-${idGen}`);
-  const container = useRef(null);
-  const contentRef = useRef(null);
-  const portal = useRef(null);
+  const container = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const portal = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState<boolean>(false);
   const [position, setPosition] = useState<[number, number]>([0, 0]);
   const [size, setSize] = useState<[number, number]>([0, 0]);

core/styles/src/breakpoints.ts

@@ -16,8 +16,8 @@ export const breakpointSize = {
   [Breakpoint.MEDIUM]: 960,
   [Breakpoint.LARGE]: 1400,
   [Breakpoint.EXTRA_LARGE]: 1600,
-  // [Breakpoint.IPAD]: 1024,
-  // [Breakpoint.IPAD_PRO]: 1366,
+  [Breakpoint.IPAD]: 1024,
+  [Breakpoint.IPAD_PRO]: 1366,
 };
 
 const query =
@@ -30,23 +30,34 @@ const query =
 
 type breakpointGroup = Record<Breakpoint, ReturnType<typeof query>>;
 
-const emptyGroup = (): breakpointGroup => {
+const createGroup = (set?: 'min' | 'max'): breakpointGroup => {
   return {
-    [Breakpoint.EXTRA_SMALL]: null,
-    [Breakpoint.SMALL]: null,
-    [Breakpoint.MEDIUM]: null,
-    [Breakpoint.LARGE]: null,
-    [Breakpoint.EXTRA_LARGE]: null,
-    [Breakpoint.IPAD]: null,
-    [Breakpoint.IPAD_PRO]: null,
+    [Breakpoint.EXTRA_SMALL]: query(
+      breakpointSize[Breakpoint.EXTRA_SMALL],
+      set
+    ),
+    [Breakpoint.SMALL]: query(breakpointSize[Breakpoint.SMALL], set),
+    [Breakpoint.MEDIUM]: query(breakpointSize[Breakpoint.MEDIUM], set),
+    [Breakpoint.LARGE]: query(breakpointSize[Breakpoint.LARGE], set),
+    [Breakpoint.EXTRA_LARGE]: query(
+      breakpointSize[Breakpoint.EXTRA_LARGE],
+      set
+    ),
+    [Breakpoint.IPAD]: query(breakpointSize[Breakpoint.IPAD], set),
+    [Breakpoint.IPAD_PRO]: query(breakpointSize[Breakpoint.IPAD_PRO], set),
   };
 };
 
-const breakpoints: {
+const breakpoints: breakpointGroup & {
   min: breakpointGroup;
   max: breakpointGroup;
   custom: typeof query;
-} = { min: emptyGroup(), max: emptyGroup(), custom: null };
+} = {
+  ...createGroup(),
+  min: createGroup('min'),
+  max: createGroup('max'),
+  custom: query,
+};
 
 Object.values(Breakpoint).forEach((key) => {
   // default (max)
@@ -55,8 +66,6 @@ Object.values(Breakpoint).forEach((key) => {
   breakpoints.max[key] = query(breakpointSize[key], 'max');
 });
 
-breakpoints.custom = query;
-
 // USAGE EXAMPLE
 // breakpoints.small`-css here-`
 // breakpoints.min.small`-css here-`

core/styles/src/colors.ts

@@ -141,7 +141,8 @@ export class Color {
     }
 
     const c1 = this.value;
-    const c2 = typeof color2 === 'string' ? new Color(color2) : color2.value;
+    const c2 =
+      typeof color2 === 'string' ? new Color(color2).value : color2.value;
     return c1[0] === c2[0] && c1[1] === c2[1] && c1[2] === c2[2];
   }
 

core/styles/src/control.tsx

@@ -127,7 +127,11 @@ const LabelStyled = styled.div`
   }
 `;
 
-export const Label = ({ children, ...props }) => {
+type LabelProps = {
+  children?: React.ReactNode;
+};
+
+export const Label = ({ children, ...props }: LabelProps) => {
   return (
     <LabelStyled {...props}>
       <span>{children}</span>

core/styles/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": false,
     "incremental": true,

plugins/controls/package.json

@@ -39,6 +39,7 @@
   "devDependencies": {
     "@types/react": "^18.0.21",
     "@types/color-rgba": "^2.1.2",
+    "@types/wicg-file-system-access": "*",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {

plugins/controls/src/ImageControl.tsx

@@ -89,7 +89,7 @@ const ImageControlField = ({
     // Create blob
     const file = await fileHandle.getFile();
     const arr: ArrayBuffer = await file.arrayBuffer();
-    const blob = new Blob([arr], { type: fileHandle.type });
+    const blob = new Blob([arr], { type: file.type });
 
     if (typeof value === 'string') {
       // Create base64 string