ui directory type fix done

andrew-bierman · Dec 29, 2024 · edb2785 · edb2785
1 parent 951c508
commit edb2785
Show file tree

Hide file tree

Showing 31 changed files with 255 additions and 231 deletions.
diff --git a/packages/ui/src/Bento/animation/microinteractions/NumberSlider.tsx b/packages/ui/src/Bento/animation/microinteractions/NumberSlider.tsx
@@ -97,4 +97,4 @@ const AnimatedNumber = styled(Text, {
   '$group-window-xs': {
     fontSize: '$8',
   },
-});
+} as any);
diff --git a/packages/ui/src/Bento/ecommerce/cart/Fullpage.tsx b/packages/ui/src/Bento/ecommerce/cart/Fullpage.tsx
@@ -233,7 +233,8 @@ const Item = ({ item }: { item: Items[number] }) => {
             borderRadius="$12"
             theme="green"
           >
-            <Text htmlFor={'remove-product' + item.id}>Remove</Text>
+            {/* <Text htmlFor={'remove-product' + item.id}>Remove</Text> */}
+            <Text>Remove</Text>
           </Button>
           <Button
             flexGrow={1}
@@ -243,7 +244,8 @@ const Item = ({ item }: { item: Items[number] }) => {
             size="$3"
             borderRadius="$12"
           >
-            <Text htmlFor="add-favorite">Favorite</Text>
+            {/* <Text htmlFor="add-favorite">Favorite</Text> */}
+            <Text>Favorite</Text>
           </Button>
         </View>
       </View>

diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductList.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductList.tsx
@@ -21,7 +21,8 @@ const StyledText = styled(Text, {
   lineHeight: '$4',
 });
 
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+  if (!item) return null;
   return (
     // Note: you can also use `Link` from solito/link
     <Link
@@ -89,9 +90,9 @@ export function ProductList() {
         paddingHorizontal: '$3',
       }}
     >
-      {products.map((item, index) => (
-        <Item key={item.id} item={item} />
-      ))}
+      {products.map(
+        (item, index) => item && <Item key={item.id} item={item} />,
+      )}
       {someSpacers}
     </XStack>
   );

diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListBestItems.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListBestItems.tsx
@@ -24,7 +24,8 @@ const StyledText = styled(Text, {
 
 type Product = ReturnType<typeof getProducts>[0];
 
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+  if (!item) return null;
   return (
     // Note: you can also use `Link` from solito/link
     <Link
@@ -110,9 +111,9 @@ export function ProductListBestItems() {
         padding: 28,
       }}
     >
-      {products.map((item, index) => (
-        <Item key={item.id} item={item} />
-      ))}
+      {products.map(
+        (item, index) => item && <Item key={item.id} item={item} />,
+      )}
     </ScrollView>
   );
 }

diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListGridThumbs.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListGridThumbs.tsx
@@ -12,7 +12,8 @@ const StyledText = styled(Text, {
   lineHeight: '$4',
 });
 
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+  if (!item) return null;
   return (
     // Note: you can also use `Link` from solito/link
     <Link
@@ -68,9 +69,9 @@ export function ProductListGridThumbs() {
   }, []);
   return (
     <XStack maxWidth="100%" backgroundColor="$color1" flexWrap="wrap">
-      {products.map((item, index) => (
-        <Item key={item.id} item={item} />
-      ))}
+      {products.map(
+        (item, index) => item && <Item key={item.id} item={item} />,
+      )}
       {someSpacers}
     </XStack>
   );

diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListWithFeatures.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListWithFeatures.tsx
@@ -23,7 +23,8 @@ const StyledText = styled(Text, {
   lineHeight: '$4',
 });
 
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+  if (!item) return null;
   return (
     <Link
       flexGrow={1}
@@ -108,9 +109,9 @@ export function ProductListWithFeatures() {
         paddingHorizontal: '$3',
       }}
     >
-      {products.map((item, index) => (
-        <Item key={item.id} item={item} />
-      ))}
+      {products.map(
+        (item, index) => item && <Item key={item.id} item={item} />,
+      )}
       {someSpacers}
     </XStack>
   );

diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListWithLabel.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListWithLabel.tsx
@@ -18,7 +18,8 @@ type Product = ReturnType<typeof getProducts>[0];
 const premiums = [3, 6, 12, 15, 20, 25];
 const bestSellers = [1, 5, 10, 13, 18, 23];
 
-function Item({ item, index }: { item: Product; index: number }) {
+function Item({ item, index }: { item: Product | null; index: number }) {
+  if (!item) return null;
   const isPremium = premiums.includes(index);
   const isBestSeller = bestSellers.includes(index);
   const showLabel = isPremium || isBestSeller;
@@ -121,9 +122,10 @@ export function ProductListWithLabel() {
         paddingHorizontal: '$3',
       }}
     >
-      {products.map((item, index) => (
-        <Item index={index} key={item.id} item={item} />
-      ))}
+      {products.map(
+        (item, index) =>
+          item && <Item index={index} key={item.id} item={item} />,
+      )}
       {someSpacers}
     </XStack>
   );

diff --git a/packages/ui/src/Bento/ecommerce/product_list/data/products.tsx b/packages/ui/src/Bento/ecommerce/product_list/data/products.tsx
@@ -56,8 +56,9 @@ export const getProducts = () => {
     .fill(0)
     .map((_, i) => {
       const category = allImages[i % allImages.length];
-      const name = Object.keys(category)[i % 10];
-      const image = category[name];
+      if (!category) return null;
+      const name = Object.keys(category ?? {})[i % 10];
+      const image = name ? category[name] : '';
       return {
         id: i,
         name,

diff --git a/packages/ui/src/Bento/ecommerce/product_page/ProductHorizontalGallery.tsx b/packages/ui/src/Bento/ecommerce/product_page/ProductHorizontalGallery.tsx
@@ -89,7 +89,7 @@ export const SizableText = styled(Text, {
 /** ------ EXAMPLE ------ */
 export function ProductHorizontalGallery() {
   const [selectedPicture, setSelectedPicture] = useState(
-    product.pictures[0].picture,
+    product.pictures?.[0]?.picture || '',
   );
   const [tempPicture, setTempPicture] = useState<string | null>(null);
   const setDebounceTempPicture = debounce(setTempPicture, 100);

diff --git a/packages/ui/src/Bento/ecommerce/product_page/ProductWithReview.tsx b/packages/ui/src/Bento/ecommerce/product_page/ProductWithReview.tsx
@@ -86,7 +86,7 @@ export const SizableText = styled(Text, {
 /** ------ EXAMPLE ------ */
 export function ProductWithReview() {
   const [selectedPicture, setSelectedPicture] = useState(
-    product.pictures[0].picture,
+    product.pictures?.[0]?.picture || '',
   );
   const [tempPicture, setTempPicture] = useState<string | null>(null);
   const setDebounceTempPicture = debounce(setTempPicture, 100);

diff --git a/packages/ui/src/Bento/elements/datepickers/DatePicker.tsx b/packages/ui/src/Bento/elements/datepickers/DatePicker.tsx
@@ -1,4 +1,7 @@
-import { useDatePickerContext } from '@rehookify/datepicker';
+import {
+  useDatePickerContext,
+  DatePickerProvider as _DatePickerProvider,
+} from '@rehookify/datepicker';
 import type { DPDay } from '@rehookify/datepicker';
 import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
 import { useEffect, useMemo, useState } from 'react';
@@ -21,7 +24,9 @@ function CalendarHeader() {
     propGetters: { subtractOffset },
   } = useDatePickerContext();
   const { type: header, setHeader } = useHeaderType();
-  const { year, month } = calendars[0];
+  const calendar = calendars[0];
+  if (!calendar) return null;
+  const { year, month } = calendar;
 
   if (header === 'year') {
     return <YearRangeSlider />;
@@ -125,21 +130,29 @@ export function useDateAnimation({
 
   useEffect(() => {
     if (listenTo === 'month') {
-      if (currentMonth !== calendars[0].month) {
-        setCurrentMonth(calendars[0].month);
+      const calendar = calendars[0];
+      if (!calendar) return;
+      if (currentMonth !== calendar.month) {
+        setCurrentMonth(calendar.month);
       }
     }
-  }, [calendars[0][listenTo], currentMonth]);
+  }, [calendars[0]?.[listenTo], currentMonth]);
 
   useEffect(() => {
     if (listenTo === 'year') {
-      if (currentYear !== calendars[0].year) {
-        setCurrentYear(calendars[0].year);
+      const calendar = calendars[0];
+      if (!calendar) return;
+      if (currentYear !== calendar.year) {
+        setCurrentYear(calendar.year);
       }
     }
-  }, [calendars[0][listenTo], currentYear]);
+  }, [calendars[0]?.[listenTo], currentYear]);
 
   const prevNextAnimation = () => {
+    const c0 = calendars[0];
+    if (!c0) {
+      return { enterStyle: { opacity: 0 } };
+    }
     if (listenTo === 'years') {
       if (currentYearsSum === null) return { enterStyle: { opacity: 0 } };
 
@@ -149,19 +162,19 @@ export function useDateAnimation({
       };
     }
     if (listenTo === 'month') {
-      if (currentMonth === null) return { enterStyle: { opacity: 0 } };
-      const newDate = new Date(
-        `${calendars[0][listenTo]} 1, ${calendars[0].year}`,
+      if (!c0 || currentMonth === null) return { enterStyle: { opacity: 0 } };
+      const newDate = new Date(`${c0.month} 1, ${c0.year}`);
+      const currentDate = new Date(
+        `${currentMonth ?? c0.month} 1, ${currentYear ?? c0.year}`,
       );
-      const currentDate = new Date(`${currentMonth} 1, ${calendars[0].year}`);
 
-      if (currentMonth === 'December' && calendars[0].month === 'January') {
+      if (currentMonth === 'December' && c0.month === 'January') {
         return {
           enterStyle: { opacity: 0, x: 15 },
           exitStyle: { opacity: 0, x: 15 },
         };
       }
-      if (currentMonth === 'January' && calendars[0].month === 'December') {
+      if (currentMonth === 'January' && c0.month === 'December') {
         return {
           enterStyle: { opacity: 0, x: -15 },
           exitStyle: { opacity: 0, x: -15 },
@@ -174,8 +187,8 @@ export function useDateAnimation({
     }
     if (listenTo === 'year') {
       if (currentYear === null) return { enterStyle: { opacity: 0 } };
-      const newDate = new Date(`${calendars[0].month} 1, ${calendars[0].year}`);
-      const currentDate = new Date(`${calendars[0].month} 1, ${currentYear}`);
+      const newDate = new Date(`${c0.month} 1, ${c0.year}`);
+      const currentDate = new Date(`${c0.month} 1, ${currentYear ?? c0.year}`);
 
       return {
         enterStyle: { opacity: 0, x: newDate < currentDate ? -15 : 15 },
@@ -186,7 +199,7 @@ export function useDateAnimation({
   return {
     prevNextAnimation,
     prevNextAnimationKey:
-      listenTo === 'years' ? sumYears() : calendars[0][listenTo],
+      listenTo === 'years' ? sumYears() : calendars[0]?.[listenTo],
   };
 }
 
@@ -196,7 +209,7 @@ function DayPicker() {
     propGetters: { dayButton },
   } = useDatePickerContext();
 
-  const { days } = calendars[0];
+  const { days = [] } = calendars[0] || {};
 
   const { prevNextAnimation, prevNextAnimationKey } = useDateAnimation({
     listenTo: 'month',
@@ -205,14 +218,14 @@ function DayPicker() {
   // divide days array into sub arrays that each has 7 days, for better stylings
   const subDays = useMemo(
     () =>
-      days.reduce((acc, day, i) => {
+      calendars[0]?.days?.reduce((acc, day, i) => {
         if (i % 7 === 0) {
           acc.push([]);
         }
-        acc[acc.length - 1].push(day);
+        acc[acc.length - 1]?.push(day);
         return acc;
-      }, [] as DPDay[][]),
-    [days],
+      }, [] as DPDay[][]) ?? [],
+    [calendars],
   );
 
   return (
@@ -228,7 +241,11 @@ function DayPicker() {
         <View flexDirection="column" gap="$1" flexWrap="wrap">
           {subDays.map((days) => {
             return (
-              <View flexDirection="row" key={days[0].$date.toString()} gap="$1">
+              <View
+                flexDirection="row"
+                key={days[0]?.$date.toString() ?? 'row-fallback'}
+                gap="$1"
+              >
                 {days.map((d) => (
                   <Button
                     key={d.$date.toString()}
@@ -295,17 +312,7 @@ export function DatePickerExample() {
   }, [selectedDates]);
 
   return (
-    <DatePicker
-      open={open}
-      onOpenChange={setOpen}
-      config={{
-        selectedDates,
-        onDatesChange,
-        calendar: {
-          startDay: 1,
-        },
-      }}
-    >
+    <DatePicker open={open} onOpenChange={setOpen}>
       <DatePicker.Trigger asChild>
         <DatePickerInput
           placeholder="Select Date"
@@ -316,7 +323,17 @@ export function DatePickerExample() {
       </DatePicker.Trigger>
       <DatePicker.Content>
         <DatePicker.Content.Arrow />
-        <DatePickerBody />
+        <_DatePickerProvider
+          config={{
+            selectedDates,
+            onDatesChange,
+            calendar: {
+              startDay: 1,
+            },
+          }}
+        >
+          <DatePickerBody />
+        </_DatePickerProvider>
       </DatePicker.Content>
     </DatePicker>
   );