Merge pull request #28626 from backstage/canon-remove-client-directive

Canon - Remove client directive

.changeset/hungry-rings-live.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Removed client directive as they are not needed in React 18.

canon-docs/src/app/(docs)/components/icon/page.mdx

@@ -1,5 +1,4 @@
 import { PropsTable } from '@/components/PropsTable';
-import { icons } from '@backstage/canon';
 import { IconPreview } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
@@ -44,7 +43,7 @@ Icons are used to represent an action or a state.
 <PropsTable
   data={{
     name: {
-      type: Object.keys(icons),
+      type: 'icon',
       responsive: false,
     },
     size: {

canon-docs/src/components/CodeBlock/client.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { CodeBlockProps } from '.';
+import { Text } from '../../../../packages/canon';
+import styles from './styles.module.css';
+
+export const CodeBlockClient = ({
+  out,
+  title,
+}: {
+  out: string;
+  title?: CodeBlockProps['title'];
+}) => {
+  return (
+    <div className={styles.codeBlock}>
+      {title && (
+        <div className={styles.title}>
+          <Text variant="body">{title}</Text>
+        </div>
+      )}
+      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
+    </div>
+  );
+};

canon-docs/src/components/CodeBlock/index.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import styles from './styles.module.css';
+import { CodeBlockClient } from './client';
 
-interface CodeBlockProps {
+export interface CodeBlockProps {
   lang?: BundledLanguage;
   title?: string;
   code?: string;
@@ -19,14 +17,5 @@ export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
     },
   });
 
-  return (
-    <div className={styles.codeBlock}>
-      {title && (
-        <div className={styles.title}>
-          <Text variant="body">{title}</Text>
-        </div>
-      )}
-      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
-    </div>
-  );
+  return <CodeBlockClient out={out} title={title} />;
 }

canon-docs/src/components/HeadlessBanners/BaseUI.tsx

@@ -1,6 +1,7 @@
+'use client';
+
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
 
 interface BaseUIProps {
   href: string;

canon-docs/src/components/IconLibrary/IconLibrary.tsx

@@ -13,12 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use client';
 
-import React from 'react';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
-import type { IconNames } from '../../../../packages/canon/src/components/Icon';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { icons } from '../../../../packages/canon/src/components/Icon/icons';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {

canon-docs/src/components/PropsTable/PropsTable.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+'use client';
+
 import * as Table from '../Table';
 import { Chip } from '../Chip';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
@@ -33,7 +35,9 @@ export const PropsTable = <T extends Record<string, PropData>>({
               <div
                 style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}
               >
-                {Array.isArray(data[n].type) ? (
+                {data[n].type === 'icon' ? (
+                  Object.keys(icons).map(icon => <Chip key={icon}>{icon}</Chip>)
+                ) : Array.isArray(data[n].type) ? (
                   data[n].type.map(t => <Chip key={t}>{t}</Chip>)
                 ) : (
                   <Chip>{data[n].type}</Chip>

canon-docs/src/components/Snippet/index.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { CodeBlock } from '../CodeBlock';
-import { Text } from '../../../../packages/canon/src/components/Text';
 import { Collapsible } from '@base-ui-components/react/collapsible';
 import styles from './styles.module.css';
 
@@ -31,7 +30,7 @@ export const Snippet = ({
           {preview}
         </div>
         <Collapsible.Trigger className={styles.trigger}>
-          <Text variant="body">View code</Text>
+          View code
         </Collapsible.Trigger>
       </div>
       <Collapsible.Panel className={styles.panel}>

canon-docs/src/components/Snippet/styles.module.css

@@ -33,6 +33,7 @@
   right: 16px;
   bottom: 12px;
   cursor: pointer;
+  font-size: 14px;
 }
 
 [data-theme='dark'] .previewContent {

canon-docs/src/components/Tabs/parts.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
 
 export const Root = ({
   className,

canon-docs/src/mdx-components.tsx

@@ -6,7 +6,6 @@ import { Box } from '../../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
-    // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => (
       <Box style={{ marginTop: '4rem' }}>
         <h1

canon-docs/src/snippets/field.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Field } from '../../../packages/canon';
 
 export const FieldPreview = () => {

canon-docs/src/snippets/input.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Grid } from '../../../packages/canon';
 
 export const InputPreview = () => {

packages/canon/src/components/Button/Button.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import clsx from 'clsx';

packages/canon/src/components/Heading/Heading.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';

packages/canon/src/components/Icon/Icon.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React from 'react';
 import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';

packages/canon/src/components/Input/Input.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { ElementRef, forwardRef } from 'react';
 import { Input as InputPrimitive } from '@base-ui-components/react/input';
 import clsx from 'clsx';

packages/canon/src/components/Text/Text.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';

packages/canon/src/contexts/canon.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { createContext, ReactNode, useContext } from 'react';
 import { icons } from '../components/Icon/icons';
 import { IconMap, IconNames } from '../components/Icon/types';