✨ NICE-43 revamp Next RSC, Notion API, & Tailwind

BREAKING CHANGE: New Notion Implementation through Next 13 App

packages/design-system/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@heroicons/react": "2.0.17",
+    "@jeromefitz/shared": "workspace:*",
     "@radix-ui/primitive": "1.0.0",
     "@radix-ui/react-accessible-icon": "1.0.2",
     "@radix-ui/react-accordion": "1.1.1",
@@ -80,7 +81,7 @@
     "@jeromefitz/storybook-config": "workspace:*",
     "@jeromefitz/tailwind-config": "workspace:*",
     "@mantine/hooks": "6.0.10",
-    "next": "13.3.4",
+    "next": "13.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

packages/design-system/src/components/Button/Button.stories.tsx

@@ -1,7 +1,6 @@
+import { cx } from '@jeromefitz/shared/src/utils'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { cx } from '../../utils/cx'
-
 import { Button } from './Button'
 import { VARIANTS } from './Button.vars'
 

packages/design-system/src/components/Button/Button.styles.ts

@@ -1,4 +1,4 @@
-import { cx } from '../../utils/cx'
+import { cx } from '@jeromefitz/shared/src/utils'
 
 import type { Variant } from './Button.types'
 
@@ -13,8 +13,8 @@ export const commonStyles = cx(
 )
 
 export const variantStyles = {
-  default: cx('tomato-button'),
-  empty: cx(),
+  default: cx(),
+  empty: cx(''),
   ghost: cx(),
   primary: cx('tomato-button-cta'),
   secondary: cx('tomato-button-outline'),

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

@@ -1,8 +1,7 @@
+import { cx } from '@jeromefitz/shared/src/utils'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardRefRenderFunction } from 'react'
 
-import { cx } from '../../utils/cx'
-
 import { commonStyles, variantStyles } from './Button.styles'
 import type { Classname, Variant } from './Button.types'
 import { VARIANTS } from './Button.vars'

packages/design-system/src/components/Button/ButtonLink.stories.tsx

@@ -1,7 +1,6 @@
+import { cx } from '@jeromefitz/shared/src/utils'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { cx } from '../../utils/cx'
-
 import { ButtonLink } from './ButtonLink'
 
 const meta = {

packages/design-system/src/components/Button/ButtonLink.tsx

@@ -1,10 +1,8 @@
-// eslint-disable-next-line no-restricted-imports
+import { cx } from '@jeromefitz/shared/src/utils'
 import Link from 'next/link'
 import { forwardRef } from 'react'
 import type { ComponentProps, ForwardRefRenderFunction } from 'react'
 
-import { cx } from '../../utils/cx'
-
 import { commonStyles, variantStyles } from './Button.styles'
 import type { Variant } from './Button.types'
 import { VARIANTS } from './Button.vars'

packages/design-system/src/components/Icon/Icon.stories.tsx

@@ -1,7 +1,6 @@
+import { cx } from '@jeromefitz/shared/src/utils'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { cx } from '../../utils/cx'
-
 import { MapIcon } from './Icon'
 
 const meta = {

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

@@ -72,7 +72,7 @@ import {
 } from '@radix-ui/react-icons'
 // import { Slot } from '@radix-ui/react-slot'
 
-import { cx } from '../../utils/cx'
+import { cx } from '@jeromefitz/shared/src/utils'
 
 import { IconProps } from './Icon.types'
 

packages/design-system/src/ui/blocks/Callout.tsx

@@ -0,0 +1,5 @@
+function Callout({ children }) {
+  return <div>{children}</div>
+}
+
+export { Callout }

packages/design-system/src/ui/blocks/Column.tsx

@@ -0,0 +1,7 @@
+function Column({ children }) {
+  return (
+    <div className="my-3 flex flex-[1_1] flex-col md:my-3 md:pr-5">{children}</div>
+  )
+}
+
+export { Column }

packages/design-system/src/ui/blocks/ColumnList.tsx

@@ -0,0 +1,7 @@
+function ColumnList({ children }) {
+  return (
+    <div className="my-4 flex flex-col justify-between md:flex-row">{children}</div>
+  )
+}
+
+export { ColumnList }

packages/design-system/src/ui/blocks/Divider.tsx

@@ -0,0 +1,9 @@
+function Divider() {
+  return (
+    <div className="my-7 h-12 w-full">
+      <hr />
+    </div>
+  )
+}
+
+export { Divider }

packages/design-system/src/ui/blocks/Heading1.tsx

@@ -0,0 +1,9 @@
+/**
+ * @note(notion) PageHeader, previous to Notion Content is H1
+ * => All Headings from Notion are bumped up by 1 as a result.
+ */
+function Heading1({ children }) {
+  return <h2 className="mb-3 text-3xl font-black md:mb-5 md:text-5xl">{children}</h2>
+}
+
+export { Heading1 }

packages/design-system/src/ui/blocks/Heading2.tsx

@@ -0,0 +1,11 @@
+/**
+ * @note(notion) PageHeader, previous to Notion Content is H1
+ * => All Headings from Notion are bumped up by 1 as a result.
+ */
+function Heading2({ children }) {
+  return (
+    <h3 className="my-4 text-xl font-black md:mt-0 md:text-4xl">{children}</h3>
+  )
+}
+
+export { Heading2 }

packages/design-system/src/ui/blocks/Heading3.tsx

@@ -0,0 +1,9 @@
+/**
+ * @note(notion) PageHeader, previous to Notion Content is H1
+ * => All Headings from Notion are bumped up by 1 as a result.
+ */
+function Heading3({ children }) {
+  return <h4 className="mb-3 text-lg font-black md:text-2xl">{children}</h4>
+}
+
+export { Heading3 }

packages/design-system/src/ui/blocks/ListBulleted.tsx

@@ -0,0 +1,5 @@
+function ListBulleted({ children }) {
+  return <ul className="flex list-inside list-disc flex-col">{children}</ul>
+}
+
+export { ListBulleted }

packages/design-system/src/ui/blocks/ListItem.tsx

@@ -0,0 +1,9 @@
+function ListItem({ children }) {
+  return (
+    <li>
+      <span className="mb-3 inline-block leading-tight">{children}</span>
+    </li>
+  )
+}
+
+export { ListItem }

packages/design-system/src/ui/blocks/ListNumbered.tsx

@@ -0,0 +1,5 @@
+function ListNumbered({ children }) {
+  return <ol className="flex list-inside list-decimal flex-col">{children}</ol>
+}
+
+export { ListNumbered }

packages/design-system/src/ui/blocks/Paragraph.tsx

@@ -0,0 +1,5 @@
+function Paragraph({ children }) {
+  return <p className="mb-4 text-lg font-normal leading-normal">{children}</p>
+}
+
+export { Paragraph }

packages/design-system/src/ui/blocks/Quote.tsx

@@ -0,0 +1,5 @@
+function Quote({ children }) {
+  return <blockquote>{children}</blockquote>
+}
+
+export { Quote }

packages/design-system/src/ui/blocks/index.ts

@@ -0,0 +1,12 @@
+export { Callout } from './Callout'
+export { Column } from './Column'
+export { ColumnList } from './ColumnList'
+export { Divider } from './Divider'
+export { Heading1 } from './Heading1'
+export { Heading2 } from './Heading2'
+export { Heading3 } from './Heading3'
+export { ListBulleted } from './ListBulleted'
+export { ListItem } from './ListItem'
+export { ListNumbered } from './ListNumbered'
+export { Paragraph } from './Paragraph'
+export { Quote } from './Quote'

packages/next-notion/package.json

@@ -41,6 +41,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@jeromefitz/shared": "workspace:*",
     "@jeromefitz/utils": "2.2.2",
     "clsx": "1.2.1",
     "fast-json-stable-stringify": "2.1.0",

packages/next-notion/src/app/components/code.tsx

@@ -1,4 +1,5 @@
-import { cx } from '../../utils'
+import { cx } from '@jeromefitz/shared/src/utils'
+
 import getContentTypeDetail from '../utils/getContentTypeDetail'
 
 const code = ({ content, id }) => {

packages/next-notion/src/app/components/link.tsx

@@ -1,6 +1,7 @@
+import { cx } from '@jeromefitz/shared/src/utils'
 import NextLink from 'next/link'
 
-import { cx, getNextLink } from '../../utils'
+import { getNextLink } from '../../utils'
 const nextSeo = { url: `https://${process.env.NEXT_PUBLIC__SITE}` }
 const domain = new URL(nextSeo.url)
 

packages/next-notion/src/app/utils/TextAnnotations.tsx

@@ -1,6 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { cx } from '../../../../../sites/jeromefitzgerald.com/src/utils/cx'
+import { cx } from '@jeromefitz/shared/src/utils'
+
 import { CONTENT_NODE_TYPES, getContentNode } from '../index'
 
 // const EmojiParser = dynamic(

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

@@ -1,4 +1,3 @@
-import { cx } from './cx'
 import { getKeysByJoin, getKeysBySlugger } from './getKey'
 import getNextLink from './getNextLink'
 import getNextPageStatus from './getNextPageStatus'
@@ -7,7 +6,6 @@ import isActiveLink from './isActiveLink'
 import { isElementOfType } from './isElementOfType'
 
 export {
-  cx,
   getKeysByJoin,
   getKeysBySlugger,
   getNextLink,

packages/shared/package.json

@@ -30,20 +30,21 @@
   "dependencies": {
     "@jeromefitz/design-system": "4.2.1",
     "@tanem/react-nprogress": "5.0.37",
+    "clsx": "1.2.1",
     "fathom-client": "3.5.0",
     "lodash": "4.17.21",
     "next": "13.4.1",
     "next-themes": "0.2.1",
     "plaiceholder": "2.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "swr": "2.1.5"
+    "swr": "2.1.5",
+    "tailwind-merge": "1.12.0"
   },
   "devDependencies": {
     "@types/lodash": "4.14.194",
     "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
-    "next-notion": "workspace:*"
+    "@types/react-dom": "18.2.4"
   },
   "publishConfig": {
     "access": "public"

packages/shared/src/utils/index.ts

@@ -0,0 +1 @@
+export { cx } from './cx'

packages/tailwind-config/radix.plugin.js

@@ -1,8 +1,17 @@
 const radixColors = require('@radix-ui/colors')
 const plugin = require('tailwindcss/plugin')
 
-const { backgrounds, buttons } = require('./src/index')
+const { backgrounds, buttons, notion, notionColors } = require('./src/index')
 
+/**
+ * @debug
+ */
+// console.dir(`> backgrounds`)
+// console.dir(backgrounds)
+// console.dir(`> buttons`)
+// console.dir(buttons)
+// console.dir(`> notion`)
+// console.dir(notion)
 /**
  * @note(tailwind) radix-colors-for-tailwind
  *
@@ -53,7 +62,7 @@ const radixPlugin = plugin.withOptions(
         )
         darkColors = { ...darkColors, ...dark, ...darkA }
         lightColors = { ...lightColors, ...light, ...lightA }
-        radixStyles = { ...radixStyles, ...backgrounds, ...buttons }
+        radixStyles = { ...radixStyles, ...backgrounds, ...buttons, ...notion }
       })
       addBase({
         ':root': {
@@ -63,6 +72,8 @@ const radixPlugin = plugin.withOptions(
           ...darkColors,
         },
       })
+      // console.dir(`>> radixStyles > notions`)
+      // console.dir(notion)
       addComponents(radixStyles)
     }
   },
@@ -90,14 +101,25 @@ const radixPlugin = plugin.withOptions(
         )
         return obj
       }, {})
+    // const filteredNotion = {}
+    // notionColors.map((n) => {
+    //   filteredNotion[n] = n.includes('_background')
+    //     ? `var(--${n.split('_')[0]}6)`
+    //     : `var(--${n}11)`
+    // })
+
+    const radix = {
+      ...filtered,
+      ...filteredA,
+      // ...filteredNotion,
+    }
+    // console.dir(`>> radix > filteredNotion`)
+    // console.dir(filteredNotion)
     return {
       theme: {
         extend: {
           colors: {
-            radix: {
-              ...filtered,
-              ...filteredA,
-            },
+            radix,
           },
         },
       },

packages/tailwind-config/src/backgrounds.js

@@ -3,11 +3,11 @@
  * https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale
  *
  */
-const { colors, excludes } = require('./lib/const')
+const { excludes, radixColors } = require('./lib/const')
 
 const backgrounds = {}
 
-colors.map((_color) => {
+radixColors.map((_color) => {
   let color = _color
   if (excludes.includes(color)) {
     color = `${color}A`

packages/tailwind-config/src/buttons.js

@@ -3,13 +3,13 @@
  * https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale
  *
  */
-const { colors, excludes, foregroundTextBlack } = require('./lib/const')
+const { excludes, foregroundTextBlack, radixColors } = require('./lib/const')
 
 const buttons = {}
 const types = ['', '-cta', '-outline', '-solid', '-transparent']
 const buttonTypes = []
 
-colors.map((color) => {
+radixColors.map((color) => {
   if (excludes.includes(color)) {
     return
   }

packages/tailwind-config/src/index.js

@@ -1,5 +1,13 @@
 const { backgrounds } = require('./backgrounds')
 const { buttons, buttonTypes } = require('./buttons')
-const { colors } = require('./lib/const')
+const { radixColors } = require('./lib/const')
+const { notion, notionColors } = require('./notion')
 
-module.exports = { backgrounds, buttons, buttonTypes, colors }
+module.exports = {
+  backgrounds,
+  buttons,
+  buttonTypes,
+  notion,
+  notionColors,
+  radixColors,
+}