Add 'use client' to every Syntax component

[christianvuerings]

After adding hooks usage to Typography and Heading (because of Cambio theming), we see the following exception:

createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
  at eval (webpack-internal:///(rsc)/./node_modules/@cambly/syntax-core/dist/__chunks/RXNTJFP4.js:100:69)
  at (rsc)/./node_modules/@cambly/syntax-core/dist/__chunks/RXNTJFP4.js (/Users/christian/cambly/Cambly-Frontend/.next/server/vendor-chunks/@cambly.js:380:1)
  at __webpack_require__ (/Users/christian/cambly/Cambly-Frontend/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/@cambly/syntax-core/dist/__chunks/32FNU7ZY.js:6:70)
  at (rsc)/./node_modules/@cambly/syntax-core/dist/__chunks/32FNU7ZY.js (/Users/christian/cambly/Cambly-Frontend/.next/server/vendor-chunks/@cambly.js:330:1)
  at __webpack_require__ (/Users/christian/cambly/Cambly-Frontend/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/@cambly/syntax-core/dist/__chunks/JBEJC7X2.js:5:70)
  at (rsc)/./node_modules/@cambly/syntax-core/dist/__chunks/JBEJC7X2.js (/Users/christian/cambly/Cambly-Frontend/.next/server/vendor-chunks/@cambly.js:360:1)
  at __webpack_require__ (/Users/christian/cambly/Cambly-Frontend/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./src/app/components/AdultLanding/ResponsiveHeading.tsx:8:77)
  at (rsc)/./src/app/components/AdultLanding/ResponsiveHeading.tsx (/Users/christian/cambly/Cambly-Frontend/.next/server/app/(nonauth)/english/(promoCodeBanner)/page.js:2034:1)
  at __webpack_require__ (/Users/christian/cambly/Cambly-Frontend/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./src/app/components/AdultLanding/BaseLandingPage/ProductComparison.tsx:17:103)
  at (rsc)/./src/app/components/AdultLanding/BaseLandingPage/ProductComparison.tsx (/Users/christian/cambly/Cambly-Frontend/.next/server/app/(nonauth)/english/(promoCodeBanner)/page.js:1790:1)
  at __webpack_require__ (/Users/christian/cambly/Cambly-Frontend/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./src/app/(nonauth)/english/(promoCodeBanner)/page.tsx:21:120)
  at (rsc)/./src/app/(nonauth)/english/(promoCodeBanner)/page.tsx (/Users/christian/cambly/Cambly-Frontend/.next/server/app/(nonauth)/english/(promoCodeBanner)/page.js:261:1)
  at Function.__webpack_require__ (/Users/christian/cambly/Cambly-Frontend/.next/server/webpack-runtime.js:33:43)
  at runNextTicks (node:internal/process/task_queues:60:5)
  at listOnTimeout (node:internal/timers:540:9)
  at process.processTimers (node:internal/timers:514:7)
  at async eV (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402872)
  at async tn (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406599)
  at async to (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:407149)
  at async to (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:407280)
  at async to (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:407280)
  at async to (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:407280)
  at async to (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:407280)
  at async tc (/Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
  at async /Users/christian/cambly/Cambly-Frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2576 {
digest: '3879854861',
page: '/english'

Fix is to add use client to every exported file:

More info

• Build react package for use in nextjs 13 egoist/tsup#835
• [core] Add use client directive to all components in a new build step  mui/material-ui#37503
• Add use client directive to all components in a new build step mui/mui-x#9833

[changeset-bot]

🦋 Changeset detected

Latest commit: 767775c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@cambly/syntax-core	Minor
@cambly/syntax-floating-components	Minor
@cambly/syntax-utils	Minor
@syntax/storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syntax	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 4, 2024 10:52pm