Various type fixes

Studio384 · Feb 14, 2024 · 5fdb265 · 5fdb265
1 parent 2d1a14c
commit 5fdb265
Show file tree

Hide file tree

Showing 10 changed files with 4,904 additions and 49 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/app/Docs/pages/Beat.tsx b/docs/src/app/Docs/pages/Beat.tsx
@@ -4,7 +4,7 @@ import Code from '@/design/components/Code';
 
 import { aiExpand, aiHeart, aiPlay } from '@studio384/amaranth';
 
-import Playground, { IPlaygroundConfig } from '../playground/Playground';
+import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 import ApiTable from '../playground/ApiTable';
 
 export default function PageBeat() {
@@ -54,7 +54,7 @@ export default function PageBeat() {
 
       <Typography level="h4">API</Typography>
 
-      <ApiTable cssVariables={playgroundConfig.cssVariables} />
+      <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
   );
 }
diff --git a/docs/src/app/Docs/pages/Fade.tsx b/docs/src/app/Docs/pages/Fade.tsx
@@ -5,7 +5,7 @@ import Code from '@/design/components/Code';
 import { aiAmicons, aiCircleHalfInner, aiMusic } from '@studio384/amaranth';
 
 import ApiTable from '../playground/ApiTable';
-import Playground, { IPlaygroundConfig } from '../playground/Playground';
+import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 
 export default function PageFade() {
   const playgroundConfig: IPlaygroundConfig = {
@@ -54,7 +54,7 @@ export default function PageFade() {
 
       <Typography level="h4">API</Typography>
 
-      <ApiTable cssVariables={playgroundConfig.cssVariables} />
+      <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
   );
 }
diff --git a/docs/src/app/Docs/pages/Rotate.tsx b/docs/src/app/Docs/pages/Rotate.tsx
@@ -4,7 +4,7 @@ import Code from '@/design/components/Code';
 
 import { aiAmicons, aiArrowUp, aiMessageSmile } from '@studio384/amaranth';
 
-import Playground, { IPlaygroundConfig } from '../playground/Playground';
+import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 import ApiTable from '../playground/ApiTable';
 
 export default function PageRotate() {
@@ -44,7 +44,7 @@ export default function PageRotate() {
 
       <Typography level="h4">API</Typography>
 
-      <ApiTable cssVariables={playgroundConfig.cssVariables} />
+      <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
   );
 }
diff --git a/docs/src/app/Docs/pages/Spin.tsx b/docs/src/app/Docs/pages/Spin.tsx
@@ -5,7 +5,7 @@ import Code from '@/design/components/Code';
 import { aiGear, aiSpinner, aiSpinnerThird } from '@studio384/amaranth';
 
 import ApiTable from '../playground/ApiTable';
-import Playground, { IPlaygroundConfig } from '../playground/Playground';
+import Playground, { IIconCssVariables, IPlaygroundConfig } from '../playground/Playground';
 
 export default function PageSpin() {
   const playgroundConfig: IPlaygroundConfig = {
@@ -66,7 +66,7 @@ export default function PageSpin() {
         When setting the property to <Code>pulse</Code>, some additional variables are available while some defaults are changed.
       </Typography>
 
-      <ApiTable cssVariables={playgroundConfig.cssVariables} />
+      <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
   );
 }
diff --git a/docs/src/app/Docs/playground/ApiTable.tsx b/docs/src/app/Docs/playground/ApiTable.tsx
@@ -1,15 +1,10 @@
-import { ReactNode } from 'react';
-
 import { Sheet, Table } from '@mui/joy';
 
 import Code from '@/design/components/Code';
+import { IIconCssVariables } from './Playground';
 
 interface IApiTableProps {
-  cssVariables: {
-    name: string;
-    default: string | number | boolean;
-    description: ReactNode;
-  }[];
+  cssVariables: IIconCssVariables[];
 }
 
 export default function ApiTable({ cssVariables }: IApiTableProps) {

diff --git a/docs/src/app/Docs/playground/Playground.tsx b/docs/src/app/Docs/playground/Playground.tsx
@@ -1,25 +1,29 @@
-import { CSSProperties, ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 
 import { Box, Card, Chip, Divider, FormControl, FormLabel, IconButton, Input, Sheet, Stack, Typography } from '@mui/joy';
 
 import Codeblock from '@/design/components/Codeblock';
 
-import Amicon, { aiBroom, IAmicon } from '@studio384/amaranth';
+import Amicon, { aiBroom, IAmicon, IAmiconStyle } from '@studio384/amaranth';
 
 export interface IPlaygroundConfig {
   icons: IAmicon[];
-  properties?: {
-    label: string;
-    type: 'chip';
-    name: string;
-    values: unknown[];
-    default: unknown;
-  }[];
-  cssVariables?: {
-    name: string;
-    default: string | number | boolean;
-    description: ReactNode;
-  }[];
+  properties?: IIconProperties[];
+  cssVariables?: IIconCssVariables[];
+}
+
+export interface IIconProperties {
+  label: string;
+  type: 'chip';
+  name: string;
+  values: unknown[];
+  default: unknown;
+}
+
+export interface IIconCssVariables {
+  name: string;
+  default: string | number | boolean;
+  description: ReactNode;
 }
 
 interface IPlaygroundProps {
@@ -72,13 +76,13 @@ export default function Playground({ config }: IPlaygroundProps) {
   }, [iconProperties]);
 
   // CSS Variables
-  const [playgroundCssVariable, setPlaygroundCssVariable] = useState<CSSProperties>({});
+  const [playgroundCssVariable, setPlaygroundCssVariable] = useState<IAmiconStyle>({});
 
   const iconVariables: { [index: string]: string | number | boolean } = useMemo(() => {
     const props: { [index: string]: string | number | boolean } = {};
 
     config.cssVariables?.map((variable) => {
-      props[variable.name] = playgroundCssVariable?.[variable.name] ?? variable.default;
+      props[variable.name] = playgroundCssVariable?.[variable.name as keyof IAmiconStyle] ?? variable.default;
     });
 
     return props;
@@ -162,11 +166,11 @@ export default function Playground({ config }: IPlaygroundProps) {
                       {property.values.map((value, key) => (
                         <Chip
                           key={key}
-                          onClick={() => setPlaygroundProps((prev) => ({ ...prev, [property.name]: value }))}
+                          onClick={() => setPlaygroundProps((prev) => ({ ...prev, [property.name as string]: value as string | number }))}
                           color={iconProperties?.[property.name] === value ? 'primary' : 'neutral'}
                           variant={iconProperties?.[property.name] === value ? 'solid' : 'outlined'}
                         >
-                          {value.toString()}
+                          {value?.toString()}
                         </Chip>
                       ))}
                     </Stack>
@@ -180,8 +184,8 @@ export default function Playground({ config }: IPlaygroundProps) {
               <FormLabel>{variable.name}</FormLabel>
               <Input
                 onChange={(e) => setPlaygroundCssVariable((prev) => ({ ...prev, [variable.name]: e.target.value }))}
-                placeholder={variable.default}
-                value={playgroundCssVariable?.[variable.name] ?? ''}
+                placeholder={variable.default.toString()}
+                value={playgroundCssVariable?.[variable.name as keyof IAmiconStyle] ?? ''}
               />
             </FormControl>
           ))}