Port over various type fixes

sippy-platform · Feb 19, 2024 · 5f295fb · 5f295fb
1 parent 28ce0d7
commit 5f295fb
Show file tree

Hide file tree

Showing 3 changed files with 4,884 additions and 36 deletions.
diff --git a/docs/src/app/Icon.tsx b/docs/src/app/Icon.tsx
@@ -1,29 +1,35 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { Box, Button, Card, Chip, IconButton, Input, Stack, Typography } from '@mui/joy';
 
-import * as Icons from '@sippy-platform/valkyrie';
+import icons from '@/data/icons';
+import { IIcon, ILibraryIcon } from '@/types';
+
 import ValkyrieIcon, { viArrowLeft } from '@sippy-platform/valkyrie';
 
 export default function Icon() {
   const navigate = useNavigate();
   const { slug } = useParams();
 
-  const [icon, setIcon] = useState({});
+  const [icon, setIcon] = useState<IIcon | null>(null);
 
   useEffect(() => {
     fetch(`/data/icons/${slug}.json`)
       .then((res) => res.json())
       .then((data) => setIcon(data));
   }, [slug]);
 
-  const reactImport = `vi${slug
-    .split('-')
-    .map((word) => {
-      return word[0].toUpperCase() + word.substring(1);
-    })
-    .join('')}`;
+  const reactImport = slug
+    ? `vi${slug
+        .split('-')
+        .map((word) => {
+          return word[0].toUpperCase() + word.substring(1);
+        })
+        .join('')}`
+    : '';
+
+  const viIcon: ILibraryIcon = useMemo(() => icons.find((icon) => icon.component === reactImport)!, [reactImport]);
 
   return (
     <Stack spacing={2}>
@@ -32,18 +38,18 @@ export default function Icon() {
           <IconButton variant="outlined" size="sm" onClick={() => navigate('/')}>
             <ValkyrieIcon icon={viArrowLeft} />
           </IconButton>
-          <Typography level="h2">{icon.title}</Typography>
+          <Typography level="h2">{icon?.title}</Typography>
         </Stack>
       </Stack>
 
-      {(icon.categories || icon.tags) && (
+      {(icon?.categories || icon?.tags) && (
         <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
-          {icon.categories?.map((cat) => (
+          {icon?.categories?.map((cat) => (
             <Chip variant="solid" color="primary" size="sm" key={cat}>
               {cat}
             </Chip>
           ))}
-          {icon.tags?.map((tag) => (
+          {icon?.tags?.map((tag) => (
             <Chip key={tag} variant="outlined" size="sm">
               {tag}
             </Chip>
@@ -67,22 +73,22 @@ export default function Icon() {
             height: '20rem'
           }}
         >
-          <ValkyrieIcon icon={Icons[reactImport]} />
+          <ValkyrieIcon icon={viIcon?.icon} />
         </Card>
         <Card variant="outlined" sx={{ flexGrow: 1 }}>
           <Typography level="h3" sx={{ mb: 3 }}>
-            <ValkyrieIcon icon={Icons[reactImport]} /> Heading icon
+            <ValkyrieIcon icon={viIcon?.icon} /> Heading icon
           </Typography>
           <Typography level="body-md" sx={{ mb: 3 }}>
-            <ValkyrieIcon icon={Icons[reactImport]} /> Inline icon
+            <ValkyrieIcon icon={viIcon?.icon} /> Inline icon
           </Typography>
           <Box sx={{ mb: 3, display: 'flex', gap: 1 }}>
-            <Button startDecorator={<ValkyrieIcon icon={Icons[reactImport]} />}>Button icon</Button>
+            <Button startDecorator={<ValkyrieIcon icon={viIcon?.icon} />}>Button icon</Button>
             <IconButton color="primary" variant="soft">
-              <ValkyrieIcon icon={Icons[reactImport]} />
+              <ValkyrieIcon icon={viIcon?.icon} />
             </IconButton>
           </Box>
-          <Input startDecorator={<ValkyrieIcon icon={Icons[reactImport]} />} placeholder={icon.title} />
+          <Input startDecorator={<ValkyrieIcon icon={viIcon?.icon} />} placeholder={icon?.title} />
         </Card>
       </Stack>
       <Stack direction={{ xs: 'column', md: 'row' }} spacing={2}>
@@ -104,12 +110,12 @@ export default function Icon() {
         </Box>
       </Stack>
       <Stack direction="row" spacing={3} alignItems="center" justifyContent="center">
-        {icon.created && (
+        {icon?.created && (
           <Stack direction="row" spacing={1} alignItems="baseline">
             <Typography color="neutral">Created</Typography> <Chip size="sm">{icon.created}</Chip>
           </Stack>
         )}
-        {icon.updated && (
+        {icon?.updated && (
           <Stack direction="row" spacing={1} alignItems="baseline">
             <Typography color="neutral">Last updated</Typography> <Chip size="sm">{icon.updated}</Chip>
           </Stack>

diff --git a/docs/src/hooks/useSearch.js → docs/src/hooks/useSearch.ts b/docs/src/hooks/useSearch.js → docs/src/hooks/useSearch.ts
@@ -1,14 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useMemo, useState } from 'react';
 
-export default function useSearch(haystack, keys, initialNeedle) {
+interface ISeachResults {
+  [key: string]: any;
+  _score: number;
+}
+
+export default function useSearch(haystack: any[] | undefined, keys: string[], initialNeedle?: string) {
   const [needle, setNeedle] = useState(initialNeedle || '');
 
-  const flattenObject = useCallback((item, prefix = '') => {
-    const flattened = {};
+  const flattenObject = useCallback((item: { [key: string]: any }, prefix?: string) => {
+    const flattened: { [key: string]: any } = {};
     prefix = prefix ? prefix + '.' : '';
 
     for (const key in item) {
-      if (typeof item[key] === 'object' && item[key] !== null && !Array.isArray(item[key])) {
+      if (typeof item[key] === 'object' && item[key] !== null) {
         Object.assign(flattened, flattenObject(item[key], prefix + key));
       } else {
         flattened[prefix + key] = item[key];
@@ -18,7 +24,7 @@ export default function useSearch(haystack, keys, initialNeedle) {
     return flattened;
   }, []);
 
-  const scoreHaystackItem = useCallback((item, query) => {
+  const scoreHaystackItem = useCallback((item: string, query: string) => {
     const searchable = item.toString().toLowerCase().trim();
 
     // Check if the string is an exact match to this partial search query
@@ -44,24 +50,18 @@ export default function useSearch(haystack, keys, initialNeedle) {
       return haystack || [];
     }
 
-    const results = [];
+    const results: ISeachResults[] = [];
     const cleanNeedle = needle.trim().toLowerCase();
 
     // Loop through the haystack
     (haystack || []).map((item) => {
-      const flatItem = flattenObject(item);
+      const flatItem: { [key: string]: any } = flattenObject(item);
       let matchScore = 0;
 
       keys.forEach((key) => {
         if (flatItem[key]) {
-          if (Array.isArray(flatItem[key])) {
-            flatItem[key].map((arrayItem) => {
-              matchScore += scoreHaystackItem(arrayItem, cleanNeedle);
-            });
-          } else {
-            // Do a 1:1 comparison between all searchable items
-            matchScore += scoreHaystackItem(flatItem[key], cleanNeedle);
-          }
+          // Do a 1:1 comparison between all searchable items
+          matchScore += scoreHaystackItem(flatItem[key], cleanNeedle);
         }
       });