🩹 NICE-93 images for books ♻️ storybook [b] (#2327)

Update API to pull Images and Bookshop URL from Notion.

- This is still hacky as I did not want to spend the time to apply teh AWS Expiration from Notion here, and instead hosted images on a CDN and do not feel like redoing all these Book entries 😂


Also updates `storybook` a bit to be `ts` --- but most likely Storybook is going away, I do not use it and have moved away from a custom Design System to use `@radix-ui/themes` ✅ 

Introduces a dropdown to limit what is shown to someone on the init.

- Eventually this should pull dynamically from an API like Music
- No need to do this now of course

**Commits:**

- [x] 🩹  NICE-93 images for books
- [x] 🚚 (storybook) NICE-93 jsx(x)=>ts(x)
- [x] ♻️  NICE-93 add bookStatus to store

packages/design-system/src/components/Callout/Callout.tsx

@@ -14,6 +14,7 @@ type AdditionalProps = {
   children?: ReactNode
   className?: string
   classNameText?: string
+  color?: string
   icon?: any
 }
 type CalloutRootPropsImpl = CalloutRootProps & AdditionalProps
@@ -22,13 +23,15 @@ function CalloutImpl({
   children = <>This page is in the process of being updated.</>,
   className = '',
   classNameText = '',
+  color = 'pink',
   icon: Icon = FileTextIcon,
   size = '2',
   variant = 'soft',
 }: CalloutRootPropsImpl) {
   return (
     <CalloutRoot
       className={cx('w-full font-mono', className)}
+      color={color}
       size={size}
       variant={variant}
     >

packages/next-notion/src/utils/getAwsImage.ts

@@ -2,10 +2,10 @@
 
 import { formatInTimeZone } from '@jeromefitz/date-fns-tz'
 
-// import { isAfter, differenceInSeconds, parseISO } from 'date-fns'
-import { isAfter, parseISO } from 'date-fns'
+import { differenceInSeconds, isAfter, parseISO } from 'date-fns'
+// import { isAfter, parseISO } from 'date-fns'
 
-// const DEBUG = true
+const DEBUG = false
 
 const TZ_UTC = 'UTC'
 // const TZ_AWS = 'America/New_York'
@@ -83,16 +83,16 @@ function isImageExpired(image) {
   const utc = formatInTimeZone(timestamp, TZ_UTC, `yyyy-MM-dd'T'HH:mm:ss.ms'Z'`)
   const isExpired = isAfter(parseISO(utc), parseISO(image?.expiry_time))
 
-  // // @debug
-  // if (DEBUG) {
-  //   const diff = differenceInSeconds(parseISO(utc), parseISO(image?.expiry_time))
-  //   // diff = diff < 0 ? diff * -1 : diff
-  //   console.dir(`utc:          ${utc}`)
-  //   console.dir(`expiry_time:  ${image?.expiry_time}`)
-  //   console.dir(`diff:         ${diff} (${diff / 60} minutes)`)
-  //   console.dir(`isExpired:    ${isExpired ? 'y' : 'n'}`)
-  //   console.dir(`---`)
-  // }
+  // @debug
+  if (DEBUG) {
+    const diff = differenceInSeconds(parseISO(utc), parseISO(image?.expiry_time))
+    // diff = diff < 0 ? diff * -1 : diff
+    console.dir(`utc:          ${utc}`)
+    console.dir(`expiry_time:  ${image?.expiry_time}`)
+    console.dir(`diff:         ${diff} (${diff / 60} minutes)`)
+    console.dir(`isExpired:    ${isExpired ? 'y' : 'n'}`)
+    console.dir(`---`)
+  }
 
   return isExpired
 }

packages/storybook-config/withTailwindTheme.decorator.js → packages/storybook-config/withTailwindTheme.decorator.tsx

@@ -1,25 +1,23 @@
-import { cx } from '../design-system/src/utils/cx'
-
 import { Box } from '@radix-ui/themes/dist/esm/components/box.js'
 import { Theme } from '@radix-ui/themes/dist/esm/components/theme.js'
 import React, { useEffect } from 'react'
 
+import { cx } from '../design-system/src/utils/cx'
+
 export const DEFAULT_THEME = 'light'
 
 export const withTailwindTheme = (Story, context) => {
   const { theme } = context.globals
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     const htmlTag = document.documentElement
-    const bodyTag = document.body
-
     /**
      * @note(storybook) applies attributes to iframe
      */
     htmlTag.setAttribute('class', theme || DEFAULT_THEME)
     htmlTag.setAttribute('data-mode', theme || DEFAULT_THEME)
     htmlTag.setAttribute('style', `color-scheme: ${theme || DEFAULT_THEME};`)
-    bodyTag.setAttribute('class', `radix-themes`)
   }, [theme])
 
   return (

sites/jeromefitzgerald.com/src/app/(notion)/_config/Book.types.ts

@@ -20,11 +20,10 @@ type PropertiesBook = {
   'Date.Released': DatePropertyItemObjectResponse
   'Date.Released.ISO': FormulaPropertyItemObjectResponse
   ID: FormulaPropertyItemObjectResponse
-  'ISBN-10': RichTextPropertyItemObjectResponse
-  'ISBN-13': RichTextPropertyItemObjectResponse
+  'ISBN-13.Hard': NumberPropertyItemObjectResponse
+  'ISBN-13.Soft': NumberPropertyItemObjectResponse
   'Is.Active': CheckboxPropertyItemObjectResponse
-  'Is.HouseTeam': CheckboxPropertyItemObjectResponse
-  'Is.HouseTeam.Past': CheckboxPropertyItemObjectResponse
+  'Is.Bookshop': CheckboxPropertyItemObjectResponse
   'Is.Indexed': CheckboxPropertyItemObjectResponse
   'Is.Published': CheckboxPropertyItemObjectResponse
   Pages: RichTextPropertyItemObjectResponse
@@ -40,8 +39,8 @@ type PropertiesBook = {
   Subtitle: RichTextPropertyItemObjectResponse
   Title: TitlePropertyItemObjectResponse
   'URL.Amazon': UrlPropertyItemObjectResponse
-  'URL.Biblio': UrlPropertyItemObjectResponse
-  'URL.Bookshop': UrlPropertyItemObjectResponse
+  'URL.Biblio': FormulaPropertyItemObjectResponse
+  'URL.Bookshop': FormulaPropertyItemObjectResponse
   'URL.Goodreads': UrlPropertyItemObjectResponse
 }
 type PageObjectResponseBook = Spread<

sites/jeromefitzgerald.com/src/app/(notion)/_config/Book.utils.ts

@@ -19,12 +19,12 @@ function getBookData(properties) {
     isActive: getPropertyTypeDataBook(properties, 'Is.Active'),
     isIndexed: getPropertyTypeDataBook(properties, 'Is.Indexed'),
     isPublished: getPropertyTypeDataBook(properties, 'Is.Published'),
-    // isbn10: getPropertyTypeDataBook(properties, 'ISBN-10'),
-    // isbn13: getPropertyTypeDataBook(properties, 'ISBN-13'),
+    isbn13Hard: getPropertyTypeDataBook(properties, 'ISBN-13.Hard'),
+    isbn13Soft: getPropertyTypeDataBook(properties, 'ISBN-13.Soft'),
     pages: getPropertyTypeDataBook(properties, 'Pages'),
     publisher: getPropertyTypeDataBook(properties, 'Publisher'),
     // seoDescription: getPropertyTypeDataBook(properties, 'SEO.Description'),
-    // seoImage: getPropertyTypeDataBook(properties, 'SEO.Image')[0],
+    seoImage: getPropertyTypeDataBook(properties, 'SEO.Image')[0],
     // seoImageDescription: getPropertyTypeDataBook(
     //   properties,
     //   'SEO.Image.Description',
@@ -34,8 +34,8 @@ function getBookData(properties) {
     subtitle: getPropertyTypeDataBook(properties, 'Subtitle'),
     title: getPropertyTypeDataBook(properties, 'Title'),
     // urlAmazon: getPropertyTypeDataBook(properties, 'URL.Amazon'),
-    // urlBiblio: getPropertyTypeDataBook(properties, 'URL.Biblio'),
-    // urlBookshop: getPropertyTypeDataBook(properties, 'URL.Bookshop'),
+    urlBiblio: getPropertyTypeDataBook(properties, 'URL.Biblio'),
+    urlBookshop: getPropertyTypeDataBook(properties, 'URL.Bookshop'),
     // urlGoodreads: getPropertyTypeDataBook(properties, 'URL.Goodreads'),
   }
   return data