add banner for use client directive (#4281)

* feat(build): add banner

* feat(core): add changeset

Author: PixeledCode

.changeset/shaggy-eggs-own.md

@@ -0,0 +1,119 @@
+---
+"@twilio-paste/icons": patch
+"@twilio-paste/account-switcher": patch
+"@twilio-paste/ai-chat-log": patch
+"@twilio-paste/alert": patch
+"@twilio-paste/alert-dialog": patch
+"@twilio-paste/anchor": patch
+"@twilio-paste/avatar": patch
+"@twilio-paste/badge": patch
+"@twilio-paste/base-radio-checkbox": patch
+"@twilio-paste/blockquote": patch
+"@twilio-paste/breadcrumb": patch
+"@twilio-paste/button": patch
+"@twilio-paste/button-group": patch
+"@twilio-paste/callout": patch
+"@twilio-paste/card": patch
+"@twilio-paste/chart-provider": patch
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/chat-log": patch
+"@twilio-paste/checkbox": patch
+"@twilio-paste/code-block": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/corner-ornament": patch
+"@twilio-paste/data-grid": patch
+"@twilio-paste/date-picker": patch
+"@twilio-paste/description-list": patch
+"@twilio-paste/detail-text": patch
+"@twilio-paste/disclosure": patch
+"@twilio-paste/display-heading": patch
+"@twilio-paste/display-pill-group": patch
+"@twilio-paste/editable-code-block": patch
+"@twilio-paste/example-text": patch
+"@twilio-paste/file-picker": patch
+"@twilio-paste/file-uploader": patch
+"@twilio-paste/form": patch
+"@twilio-paste/form-pill-group": patch
+"@twilio-paste/heading": patch
+"@twilio-paste/help-text": patch
+"@twilio-paste/in-page-navigation": patch
+"@twilio-paste/inline-code": patch
+"@twilio-paste/inline-control-group": patch
+"@twilio-paste/input": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/keyboard-key": patch
+"@twilio-paste/label": patch
+"@twilio-paste/list": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/meter": patch
+"@twilio-paste/minimizable-dialog": patch
+"@twilio-paste/modal": patch
+"@twilio-paste/page-header": patch
+"@twilio-paste/pagination": patch
+"@twilio-paste/paragraph": patch
+"@twilio-paste/popover": patch
+"@twilio-paste/product-switcher": patch
+"@twilio-paste/progress-bar": patch
+"@twilio-paste/progress-steps": patch
+"@twilio-paste/radio-button-group": patch
+"@twilio-paste/radio-group": patch
+"@twilio-paste/screen-reader-only": patch
+"@twilio-paste/select": patch
+"@twilio-paste/separator": patch
+"@twilio-paste/side-modal": patch
+"@twilio-paste/side-panel": patch
+"@twilio-paste/sidebar": patch
+"@twilio-paste/skeleton-loader": patch
+"@twilio-paste/slider": patch
+"@twilio-paste/spinner": patch
+"@twilio-paste/status": patch
+"@twilio-paste/summary-detail": patch
+"@twilio-paste/switch": patch
+"@twilio-paste/table": patch
+"@twilio-paste/tabs": patch
+"@twilio-paste/textarea": patch
+"@twilio-paste/time-picker": patch
+"@twilio-paste/timeline": patch
+"@twilio-paste/toast": patch
+"@twilio-paste/tooltip": patch
+"@twilio-paste/topbar": patch
+"@twilio-paste/truncate": patch
+"@twilio-paste/user-dialog": patch
+"@twilio-paste/visual-picker": patch
+"@twilio-paste/core": patch
+"@twilio-paste/aspect-ratio": patch
+"@twilio-paste/flex": patch
+"@twilio-paste/grid": patch
+"@twilio-paste/media-object": patch
+"@twilio-paste/stack": patch
+"@twilio-paste/box": patch
+"@twilio-paste/combobox-primitive": patch
+"@twilio-paste/disclosure-primitive": patch
+"@twilio-paste/listbox-primitive": patch
+"@twilio-paste/menu-primitive": patch
+"@twilio-paste/modal-dialog-primitive": patch
+"@twilio-paste/non-modal-dialog-primitive": patch
+"@twilio-paste/sibling-box": patch
+"@twilio-paste/tabs-primitive": patch
+"@twilio-paste/text": patch
+"@twilio-paste/tooltip-primitive": patch
+"@twilio-paste/customization": patch
+"@twilio-paste/animation-library": patch
+"@twilio-paste/clipboard-copy-library": patch
+"@twilio-paste/code-editor-library": patch
+"@twilio-paste/data-visualization-library": patch
+"@twilio-paste/dropdown-library": patch
+"@twilio-paste/lexical-library": patch
+"@twilio-paste/react-spectrum-library": patch
+"@twilio-paste/react-textarea-autosize-library": patch
+"@twilio-paste/reakit-library": patch
+"@twilio-paste/styling-library": patch
+"@twilio-paste/syntax-highlighter-library": patch
+"@twilio-paste/uid-library": patch
+"@twilio-paste/style-props": patch
+"@twilio-paste/theme": patch
+"@twilio-paste/types": patch
+"@twilio-paste/utils": patch
+---
+
+[all packages]: add use client directive to the components and icons. This will make paste library compatible with server components

packages/paste-icons/build.js

@@ -19,6 +19,9 @@ esbuild
     ...config,
     format: "cjs",
     outdir: "cjs",
+    banner: {
+      js: `"use client";`,
+    },
   })
   .catch(() => process.exit(1));
 
@@ -27,5 +30,8 @@ esbuild
     ...config,
     format: "esm",
     outdir: "esm",
+    banner: {
+      js: `"use client";`,
+    },
   })
   .catch(() => process.exit(1));

tools/build/esbuild.js

@@ -77,6 +77,9 @@ async function build(packageJson) {
       minifySyntax: true,
       format: "cjs",
       outfile: outFileCJS,
+      banner: {
+        js: `"use client";`,
+      },
       // Needed to fix ES6 module import paths for CJS builds
       plugins: [PasteCJSResolverPlugin, esbuildPluginVersionInjector(versionInjectorConfig)],
     })
@@ -94,6 +97,9 @@ async function build(packageJson) {
       minifySyntax: true,
       format: "esm",
       outfile: outFileESM,
+      banner: {
+        js: `"use client";`,
+      },
       // Needed to fix a bug with replacing require with import statements https://github.com/evanw/esbuild/issues/566
       plugins: [EsmExternalsPlugin({ externals: external }), esbuildPluginVersionInjector(versionInjectorConfig)],
     })