Merge pull request #44 from magicspon/dev

Dev

.changeset/cool-jars-provide.md

@@ -0,0 +1,11 @@
+---
+"eslint-config-custom": major
+"tailwind-config": major
+"tsconfig": major
+"utils": major
+"ui": major
+"cms": major
+"web": major
+---
+
+Update to latest dependencies

README.md

@@ -20,6 +20,7 @@ pnpm dev
 - Prettier
 - Commitlint
 - Lintstaged
+- Changesets
 - Github Actions
 
 ## About

apps/cms/package.json

@@ -13,40 +13,40 @@
     "@focus-reactive/sanity-plugin-inline-svg-input": "^1.0.1",
     "@mobily/ts-belt": "^3.13.1",
     "@portabletext/react": "^3.0.11",
-    "@q42/sanity-plugin-page-tree": "^1.0.4",
-    "@sanity/client": "^6.10.0",
-    "@sanity/color-input": "^3.1.0",
+    "@q42/sanity-plugin-page-tree": "^1.1.1",
+    "@sanity/client": "^6.15.5",
+    "@sanity/color-input": "^3.1.1",
     "@sanity/dashboard": "^3.1.6",
-    "@sanity/icons": "^2.8.0",
+    "@sanity/icons": "^2.11.2",
     "@sanity/image-url": "^1.0.2",
-    "@sanity/orderable-document-list": "^1.1.0",
-    "@sanity/ui": "^1.9.3",
-    "@sanity/vision": "3.23.4",
+    "@sanity/orderable-document-list": "^1.2.1",
+    "@sanity/ui": "^2.0.10",
+    "@sanity/vision": "3.34.0",
     "get-youtube-id": "^1.0.1",
     "groqd": "^0.15.10",
     "groqd-playground": "^0.0.18",
-    "marked": "^11.1.0",
-    "nanoid": "^5.0.4",
-    "next-sanity": "^7.0.5",
+    "marked": "^12.0.1",
+    "nanoid": "^5.0.6",
+    "next-sanity": "^8.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "^18.2.0",
-    "sanity": "^3.23.4",
-    "sanity-plugin-asset-source-unsplash": "^1.1.2",
+    "sanity": "^3.34.0",
+    "sanity-plugin-asset-source-unsplash": "^2.0.1",
     "sanity-plugin-iframe-pane": "^3.1.3",
-    "sanity-plugin-media": "^2.2.4",
+    "sanity-plugin-media": "^2.2.5",
     "sanity-plugin-webhooks": "^1.0.0",
-    "sanity-plugin-workflow": "^1.0.2",
-    "styled-components": "^6.1.6",
+    "sanity-plugin-workflow": "^1.0.4",
+    "styled-components": "^6.1.8",
     "utils": "2.0.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@sanity/eslint-config-studio": "^3.0.0",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "eslint-config-custom": "2.0.0",
     "tsconfig": "2.0.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   }
 }

apps/cms/queries/fragments/portable.fragment.ts

@@ -32,7 +32,7 @@ export const richText = q('body').filter().select({
   "_type == 'links'": linksSelection,
 })
 
-export type RichText = InferType<typeof richText>
+export type TRichText = InferType<typeof richText>
 
 const blocks = {
   _type: q.literal('blocks'),

apps/cms/sanity.config.ts

@@ -1,5 +1,5 @@
 import { DocumentDefinition, defineConfig } from 'sanity'
-import { deskTool } from 'sanity/desk'
+import { structureTool } from 'sanity/structure'
 import {
   dashboardTool,
   projectUsersWidget,
@@ -42,7 +42,7 @@ const config = defineConfig({
       widgets: [projectUsersWidget(), projectInfoWidget()],
     }),
 
-    deskTool({
+    structureTool({
       structure: (S) => {
         const makeSingle = (schema: DocumentDefinition) =>
           S.listItem()

apps/web/app/components/portable/RichText/RichText.tsx

@@ -5,12 +5,12 @@ import { Link } from '../marks/Link'
 // import { Text } from 'ui/src/primitives/Text'
 // import { Heading } from 'ui/src/primitives/Heading'
 // import { createIdFromChildren } from '~utils/createIdFromChildren'
-import { RichText } from 'cms/queries/fragments/portable.fragment'
+import { TRichText } from 'cms/queries/fragments/portable.fragment'
 import * as style from '../shared/variants'
 import { createBlock } from '../shared/block'
 
 export type BlockProps = {
-  block: RichText
+  block: TRichText
 } & style.Variant
 
 export function RichText({ block, variant }: BlockProps) {

apps/web/app/components/portable/shared/block.tsx

@@ -21,7 +21,9 @@ export const createBlock = ({ variant }: style.Variant) => {
         id={createIdFromChildren(children)}
         level={2}
         intent="h2"
-        className={style.heading2({ variant })}
+        className={style.heading2({
+          variant,
+        })}
       >
         {children}
       </Heading>

apps/web/package.json

@@ -9,45 +9,46 @@
     "lint": "tsc --pretty --noEmit --project tsconfig.json && TIMING=1 eslint \"./**/*.{js,ts,tsx}\" --fix --quiet"
   },
   "dependencies": {
-    "@capsizecss/metrics": "^1.2.0",
-    "@hookform/resolvers": "^3.3.3",
+    "@capsizecss/core": "^4.1.0",
+    "@capsizecss/metrics": "^2.2.0",
+    "@hookform/resolvers": "^3.3.4",
     "@portabletext/react": "^3.0.11",
     "@radix-ui/react-slot": "^1.0.2",
-    "@sanity/preview-kit": "^5.0.7",
-    "@sanity/preview-url-secret": "^1.4.1",
-    "@sanity/webhook": "^4.0.0",
-    "@tanstack/react-query": "^5.15.0",
-    "@tanstack/react-query-devtools": "^5.17.1",
-    "@tanstack/react-query-next-experimental": "^5.15.0",
-    "@vercel/analytics": "^1.1.1",
+    "@sanity/preview-kit": "^5.0.33",
+    "@sanity/preview-url-secret": "^1.6.4",
+    "@sanity/webhook": "^4.0.2",
+    "@tanstack/react-query": "^5.28.4",
+    "@tanstack/react-query-devtools": "^5.28.4",
+    "@tanstack/react-query-next-experimental": "^5.28.4",
+    "@vercel/analytics": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cms": "2.0.0",
-    "framer-motion": "^10.16.16",
-    "next": "14.0.4",
-    "next-sanity": "^7.0.5",
+    "framer-motion": "^11.0.14",
+    "next": "14.1.3",
+    "next-sanity": "^8.4.1",
     "popmotion": "^11.0.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.49.2",
+    "react-hook-form": "^7.51.0",
     "react-hook-form-persist": "^3.0.0",
     "tailwind-config": "2.0.0",
     "ui": "2.0.0",
-    "usehooks-ts": "^2.9.1",
+    "usehooks-ts": "^3.0.1",
     "utils": "2.0.0",
     "zod": "^3.22.4",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.0.4",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "autoprefixer": "^10.4.15",
+    "@next/eslint-plugin-next": "^14.1.3",
+    "@types/node": "^20.11.28",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "autoprefixer": "^10.4.18",
     "eslint-config-custom": "2.0.0",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.7",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "tsconfig": "2.0.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   }
 }

apps/web/tailwind.config.ts

@@ -1,19 +1,70 @@
 import preset from 'tailwind-config'
-import { Config } from 'tailwindcss'
-import fontMetrics from '@capsizecss/metrics/roboto'
+import type { Config } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
 
 export default {
   content: ['./app/**/*.{ts,tsx}', '../../packages/ui/**/*.{ts,tsx}'],
   presets: [preset],
+
+  plugins: [
+    // this is a bit silly <div className="grid stack-[12_._._24] />
+    plugin(function ({ matchUtilities, theme, addComponents }) {
+      addComponents({
+        '[class*=stack]': {
+          gap: 'var(--stack)',
+        },
+      }),
+        matchUtilities({
+          stack: (value) => {
+            const values = value.split(' ')
+            const spacing = theme('spacing')
+            const breakpoints = Object.values(theme('screens')!)
+            const items = values.reduce(
+              (acc, v, i) => {
+                const space = v.startsWith('--') ? `var(${v})` : spacing?.[v]
+                if (!space) {
+                  if (v !== '.') {
+                    console.warn(`No ${v} spacing value found`)
+                  }
+                  return acc
+                }
+                if (i === 0) {
+                  acc['--stack'] = space
+                } else {
+                  const mq = breakpoints[i - 1]
+                  acc[`@media only screen and (min-width: ${mq})`] = {
+                    '--stack': space,
+                  }
+                }
+
+                return acc
+              },
+              {} as Record<string, string | Record<string, string>>,
+            )
+
+            return items
+          },
+        })
+    }),
+  ],
+
   theme: {
-    capsize: {
-      rootLineHeightUnitless: 1.2,
-      fontMetrics: {
-        sans: fontMetrics,
-      },
-      className: 'trim',
-    },
     extend: {
+      fontSize: {
+        xs: ['0.75rem', { lineHeight: '1' }],
+        sm: ['0.875rem', { lineHeight: '1.25' }],
+        base: ['1rem', { lineHeight: '1.25' }],
+        lg: ['1.125rem', { lineHeight: '1.24' }],
+        xl: ['1.25rem', { lineHeight: '1.25' }],
+        '2xl': ['1.5rem', { lineHeight: '1.25' }],
+        '3xl': ['2rem', { lineHeight: '1.15' }],
+        '4xl': ['2.5rem', { lineHeight: '1' }],
+        '5xl': ['3rem', { lineHeight: '1' }],
+        '6xl': ['3.5rem', { lineHeight: '1' }],
+        '7xl': ['4.5rem', { lineHeight: '1' }],
+        '8xl': ['6rem', { lineHeight: '1' }],
+        '9xl': ['8rem', { lineHeight: '1' }],
+      },
       gridTemplateColumns: {
         site: `[full-start] var(--full)
                 [feature-start] var(--feature)

package.json

@@ -33,20 +33,20 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.3",
+    "@commitlint/cli": "^19.2.0",
+    "@commitlint/config-conventional": "^19.1.0",
     "@manypkg/cli": "^0.21.3",
     "@total-typescript/ts-reset": "^0.5.1",
-    "commitlint": "^18.6.1",
-    "eslint": "8.56.0",
+    "commitlint": "^19.2.0",
+    "eslint": "8.57.0",
     "eslint-config-custom": "2.0.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "hygen": "^6.2.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "tsconfig": "2.0.0",
     "turbo": "^1.12.5",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   },
   "engines": {
     "node": ">=18",

packages/config/eslint-custom-config/package.json

@@ -8,13 +8,13 @@
     "base.js"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
-    "eslint": "8.56.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "1.11.2",
+    "eslint-config-turbo": "1.12.5",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "7.33.2"
+    "eslint-plugin-react": "7.34.1"
   }
 }

packages/config/tailwind/package.json

@@ -9,15 +9,15 @@
     "postcss.js"
   ],
   "devDependencies": {
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.7",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "tsconfig": "2.0.0"
   },
   "dependencies": {
-    "@capsizecss/core": "^3.1.1",
-    "@capsizecss/metrics": "^1.2.0",
-    "@capsizecss/unpack": "^1.0.0",
+    "@capsizecss/core": "^4.1.0",
+    "@capsizecss/metrics": "^2.2.0",
+    "@capsizecss/unpack": "^2.1.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.9",
     "@themosaad/tailwindcss-capsize": "^1.0.0",