init

platform/ui-next/src/lib/createContext.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+// https://github.com/reach/reach-ui/blob/dev/packages/utils/src/context.tsx
+type ContextProvider<T> = React.FC<React.PropsWithChildren<T>>;
+
+export function createContext<ContextValueType extends object | null>(
+  rootComponentName: string,
+  defaultContext?: ContextValueType
+): [ContextProvider<ContextValueType>, (callerComponentName: string) => ContextValueType] {
+  const Ctx = React.createContext<ContextValueType | undefined>(defaultContext);
+
+  function Provider(props: React.PropsWithChildren<ContextValueType>) {
+    const { children, ...context } = props;
+    const value = React.useMemo(
+      () => context,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      Object.values(context)
+    ) as ContextValueType;
+    return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+  }
+
+  function useContext(callerComponentName: string) {
+    const context = React.useContext(Ctx);
+    if (context) {
+      return context;
+    }
+    if (defaultContext) {
+      return defaultContext;
+    }
+    throw Error(
+      `${callerComponentName} must be rendered inside of a ${rootComponentName} component.`
+    );
+  }
+
+  Ctx.displayName = `${rootComponentName}Context`;
+  Provider.displayName = `${rootComponentName}Provider`;
+  return [Provider, useContext];
+}

platform/ui-next/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}