React Server Components support

[kyleawayan]

Describe the bug Hi, we are using the Next.js app router for a project. Next.js uses React Server Components for the app router. However all of the SDS components do not work out of the box as they require the use client directive on each component.

To Reproduce Steps to reproduce the behavior:

1. npx create-next-app@latest (with App router enabled)
2. Install SDS
3. Import and add the Button component somewhere in src/app/page.js of the Next.js template
4. Next.js reports the error:

Error: 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

Expected behavior The Button component works, even when put into a server component.

Workaround A workaround is to wrap the Button component into its own file, then using the "use client" directive:

"use client";
// components/WrappedButton.tsx
import React from "react";
import { Button } from "@czi-sds/components";

type ButtonProps = React.ComponentProps<typeof Button>;

export default function WrappedButton(props: ButtonProps) {
  return <Button {...props} />;
}

Then importing this component in src/app/page.js works.