feat: init @affine/copilot (#2511)

packages/component/src/components/provider-composer/__tests__/__snapshots__/provider-composer.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProviderComposer 1`] = `
+<DocumentFragment>
+  test1
+</DocumentFragment>
+`;

packages/component/src/components/provider-composer/__tests__/provider-composer.spec.tsx

@@ -0,0 +1,31 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { render } from '@testing-library/react';
+import type React from 'react';
+import { createContext, useContext } from 'react';
+import { expect, test } from 'vitest';
+
+import { ProviderComposer } from '..';
+
+test('ProviderComposer', async () => {
+  const Context = createContext('null');
+  const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
+    return <Context.Provider value="test1">{children}</Context.Provider>;
+  };
+  const ConsumerComponent = () => {
+    const value = useContext(Context);
+    return <>{value}</>;
+  };
+  const Component = () => {
+    return (
+      <ProviderComposer contexts={[<Provider key={1} />]}>
+        <ConsumerComponent />
+      </ProviderComposer>
+    );
+  };
+
+  const result = render(<Component />);
+  await result.findByText('test1');
+  expect(result.asFragment()).toMatchSnapshot();
+});

packages/component/src/components/provider-composer/index.tsx

@@ -0,0 +1,15 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { cloneElement } from 'react';
+
+export const ProviderComposer: FC<
+  PropsWithChildren<{
+    contexts: any;
+  }>
+> = ({ contexts, children }) =>
+  contexts.reduceRight(
+    (kids: ReactNode, parent: any) =>
+      cloneElement(parent, {
+        children: kids,
+      }),
+    children
+  );

packages/component/src/components/theme-provider/index.tsx

@@ -0,0 +1,28 @@
+import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
+import type { PropsWithChildren } from 'react';
+import { memo, useRef } from 'react';
+
+const themes = ['dark', 'light'];
+
+const DesktopThemeSync = memo(function DesktopThemeSync() {
+  const { theme } = useTheme();
+  const lastThemeRef = useRef(theme);
+  const onceRef = useRef(false);
+  if (lastThemeRef.current !== theme || !onceRef.current) {
+    if (environment.isDesktop && theme) {
+      window.apis?.ui.handleThemeChange(theme as 'dark' | 'light' | 'system');
+    }
+    lastThemeRef.current = theme;
+    onceRef.current = true;
+  }
+  return null;
+});
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <NextThemeProvider themes={themes} enableSystem={true}>
+      {children}
+      <DesktopThemeSync />
+    </NextThemeProvider>
+  );
+};