@yak/react 0.0.0-stage → 10.0.0-rc.0

package/runtime/__tests__/typeTest.tsx

@@ -0,0 +1,374 @@
+import { css, styled, keyframes, GenericYakComponentOf } from "@yak/react";
+import React, { ReactElement } from "react";
+import { useRef } from "react";
+
+declare module "@yak/react" {
+  export interface YakTheme {
+    mood: "happy" | "sad";
+  }
+}
+
+const keyframe = keyframes`
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+`;
+
+const mixin = css`
+  animation: ${keyframe} 1s;
+  color: ${({ theme }) => {
+    // verify that theme is typed correctly in styled.tsx
+    const mood: "happy" | "sad" = theme.mood;
+    return mood === "happy" ? "green" : "red";
+  }};
+`;
+
+const Button = styled.button`
+  color: ${({ theme }) => {
+    // verify that theme is typed correctly in styled.tsx
+    const mood: "happy" | "sad" = theme.mood;
+    return mood === "happy" ? "green" : "red";
+  }};
+  ${mixin}
+`;
+
+// Verify that a HTMLButtonElement Ref can be
+// used for a styled.button component
+const RefTest1 = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  return <Button ref={ref}>Hello World</Button>;
+};
+
+// Verify that a HTMLButtonElement Ref function can be
+// used for a styled.button component
+const RefTest2 = () => {
+  return (
+    <Button
+      ref={(element) => {
+        const button: HTMLButtonElement = element!;
+        console.log(button);
+      }}
+    >
+      Hello World
+    </Button>
+  );
+};
+
+// Verify that a ref is inferred correctly
+const Button2 = styled(Button)``;
+const RefTest3 = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  return <Button2 ref={ref}>Hello World</Button2>;
+};
+
+// Verify that a ref function is inferred correctly
+const RefTest4 = () => {
+  return (
+    <Button2
+      ref={(element) => {
+        const button: HTMLButtonElement = element!;
+        console.log(button);
+      }}
+    >
+      Hello World
+    </Button2>
+  );
+};
+
+// Verify that props are merged correctly
+const Button3 = styled.button<{ $primary?: boolean }>`
+  ${({ $primary }) =>
+    $primary &&
+    css`
+      color: green;
+    `}
+`;
+const Button4 = styled(Button3)<{ $secondary?: boolean }>`
+  ${({ $secondary }) =>
+    $secondary &&
+    css`
+      color: blue;
+    `}
+`;
+
+const MergeTest1 = () => {
+  return (
+    <Button4 type="button" $primary $secondary>
+      Click me
+    </Button4>
+  );
+};
+
+const MergeTestErrors = () => {
+  switch (Math.random().toString(64)) {
+    case "$primary":
+      // @ts-expect-error - primary must only allow booleans
+      return <Button4 $primary="true" />;
+    case "$secondary":
+      // @ts-expect-error - secondary must only allow booleans
+      return <Button4 $secondary="true" />;
+    case "html prop":
+      // @ts-expect-error - only valid html attribute values are allowed
+      return <Button4 type="submit submit" />;
+    case "html prop2":
+      return <Button4 type="submit" />;
+    case "ref":
+      // @ts-expect-error - only valid html elements
+      return <Button4 ref={(element: HTMLDivElement | null) => {}} />;
+    case "theme":
+      // @ts-expect-error - theme is not part of the props
+      return <Button4 theme={{ mood: "happy" }} />;
+    default:
+      return null;
+  }
+};
+
+// Verify that a ref is not added if the component does not accept it
+const Button5 = (props: { className: string }) => <button {...props}>Hello World</button>;
+const Button6 = styled(Button5)``;
+<Button6
+  // @ts-expect-error - should not allow ref on a component that does not accept it
+  ref={console.log}
+/>;
+
+const CompositionOverridingAndMergingTest = () => {
+  const case1 = () => {
+    const Child = styled.div<{ $child: boolean }>`
+      ${({ $child }) =>
+        $child &&
+        css`
+          color: red;
+        `}
+    `;
+
+    const Parent = styled.div`
+      ${Child} {
+        color: blue;
+      }
+    `;
+
+    // should not inherit component props of Child
+    const _ = (
+      <Parent>
+        <Child $child />
+      </Parent>
+    );
+  };
+
+  const case2 = () => {
+    const Child = styled.div<{ $child: boolean }>`
+      ${({ $child }) =>
+        $child &&
+        css`
+          color: red;
+        `}
+    `;
+
+    const Mixin = css<{ $mixin: boolean }>`
+      color: ${({ $mixin }) => ($mixin ? `blue` : `red`)};
+    `;
+
+    const Parent = styled.div<{ $mixin: boolean }>`
+      ${Child} {
+        color: blue;
+      }
+
+      ${Mixin};
+    `;
+
+    // Overriding with Child and Mixin should work
+    const _ = (
+      <Parent $mixin>
+        <Child $child />
+      </Parent>
+    );
+  };
+
+  const case3 = () => {
+    const Child = styled.div<{ $child: boolean }>`
+      ${({ $child }) =>
+        $child &&
+        css`
+          color: red;
+        `}
+    `;
+
+    const Parent = styled.div`
+      ${Child} {
+        color: blue;
+      }
+      color: ${
+        // @ts-expect-error - should not allow props which have not been defined (like styled-components)
+        ({ $colorMe }) => ($colorMe ? `blue` : `red`)
+      };
+    `;
+
+    // Overriding with Child and Mixin should work
+    const _ = (
+      // @ts-expect-error - should not allow props which have not been defined (like styled-components)
+      <Parent $colorMe>
+        <Child $child />
+      </Parent>
+    );
+  };
+
+  const case4 = () => {
+    const Wrap = styled.button``;
+    const Icon = styled.svg<{ $active: boolean }>``;
+    const Button = styled(Wrap)`
+      ${Icon} {
+        color: red;
+      }
+    `;
+    const Button2 = styled.button`
+      ${Icon} {
+        color: red;
+      }
+    `;
+
+    // @ts-expect-error $active should not be required
+    <Button $active={true}>Click me</Button>;
+
+    // @ts-expect-error $active should not be required
+    <Button2 $active={true}>Click me</Button2>;
+
+    // should be callable without any properties
+    <Button>Click me</Button>;
+    <Button2>Click me</Button2>;
+
+    // the types should be equal
+    type Equal = typeof Button extends typeof Button2 ? true : false;
+    const _: Equal = true;
+  };
+};
+
+const GenericComponentWorks = () => {
+  interface MyGenericProps<T> {
+    input: T;
+  }
+
+  type MyGenericComponent<T> = React.ElementType<MyGenericProps<T>> & {
+    <TOther>(props: MyGenericProps<TOther>): React.ReactNode;
+  };
+
+  type MyDefaultType = {
+    [x: string]: any;
+  };
+
+  const GenericComponent: MyGenericComponent<MyDefaultType> = () => {
+    return null;
+  };
+
+  const ConcreteStyledComponent = GenericComponent<"test">;
+
+  const MyComponent = styled(ConcreteStyledComponent)``;
+
+  const Test = () => {
+    return (
+      <div>
+        <MyComponent input="test" />
+      </div>
+    );
+  };
+};
+
+const KeyframesWithConstants = () => {
+  const constString = "rotate(360deg)";
+  const constNumber = 360;
+
+  const rotate = keyframes`
+    from {
+      transform: rotate(${constNumber}deg);
+    }
+    to {
+      transform: ${constString};
+    }
+  `;
+};
+
+const SelectorMixinsShouldNotAlterType = () => {
+  const Button = styled.button<{ $primary?: boolean }>``;
+
+  const Mixin = css`
+    ${Button} {
+      color: red;
+    }
+  `;
+
+  const X = styled.div`
+    ${Button} {
+      color: blue;
+    }
+    ${Mixin};
+  `;
+
+  <X />;
+};
+
+const InferenceShouldWorkWithComplexTypes = () => {
+  const Title = styled<React.ComponentPropsWithRef<"strong" | "h1">>({} as any)<{
+    $primary: boolean;
+  }>`
+    ${({ $primary }) => {
+      if ($primary) {
+        return css`
+          color: red;
+        `;
+      }
+    }}
+  `;
+};
+
+const WebComponentsShouldWork = () => {
+  const MyWebComponent = styled("my-web-component")<{ $primary?: boolean }>`
+    color: red;
+  `;
+
+  // @ts-expect-error - web component props should match the defined props
+  <MyWebComponent $primary={42} />;
+
+  // Should allow all valid HTML attributes
+  <MyWebComponent onClick={(e) => console.log("clicked", e.target)} />;
+
+  // Should allow refs
+  <MyWebComponent
+    $primary
+    ref={(el) => {
+      if (el) {
+        console.log(el.classList.toggle("active"));
+      }
+    }}
+  />;
+
+  <MyWebComponent $primary />;
+
+  return <MyWebComponent />;
+};
+
+const GenericYakComponentShouldWork = () => {
+  const Component: <T extends object>(props: T) => ReactElement<T> = (props) => (
+    <div {...props}>hello</div>
+  );
+  <Component<{ TEST: "ME" }> TEST="ME" />;
+
+  const StyledComponent = styled(Component)`` as GenericYakComponentOf<typeof Component>;
+  const StyledComponentWithAdditionalProps = styled(Component)`` as GenericYakComponentOf<
+    typeof Component,
+    {
+      $primary?: boolean;
+    }
+  >;
+  <StyledComponent<{ TEST: "ME" }> TEST="ME" />;
+  <StyledComponentWithAdditionalProps<{ TEST: "ME" }> TEST="ME" $primary />;
+
+  const shouldBeSelectable = styled.div`
+    ${StyledComponent} {
+      &:hover {
+        color: blue;
+      }
+    }
+  `;
+};

package/runtime/atoms.tsx

@@ -0,0 +1,36 @@
+import { ClassNames, ComponentStyles, css } from "./cssLiteral.js";
+import { RuntimeStyleProcessor } from "./publicStyledApi.js";
+
+/**
+ * Allows to use atomic CSS classes in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, atoms } from "@yak/react";
+ *
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *  ${atoms("text-teal-600", "text-base", "rounded-md")}
+ *  ${props => props.$primary && atoms("shadow-md")}
+ * `;
+ * ```
+ */
+export const atoms = <T,>(
+  ...atoms: (string | RuntimeStyleProcessor<T> | false)[]
+): ComponentStyles<T> => {
+  const staticClasses = new ClassNames();
+  const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];
+
+  for (const atom of atoms) {
+    if (typeof atom === "string") {
+      staticClasses.add(atom);
+    } else if (typeof atom === "function") {
+      dynamicFunctions.push(atom);
+    }
+  }
+
+  // the collected classes are passed as css()'s static class name,
+  // only the dynamic atoms stay functions
+  // @ts-expect-error the internal implementation of css is not typed
+  return css(staticClasses.value, ...dynamicFunctions);
+};

package/runtime/context/README.md

@@ -0,0 +1,84 @@
+# Yak Theme Context
+
+The yak theme context allows users to configure the theme of their yak application.
+
+It works for react-server components and for normal react components.
+
+## Usage
+
+The context will be available in every `styled` and `css` literal:
+
+```tsx
+const Headline = styled.h1`
+  color: ${(props) => props.theme.colors.primary};
+`;
+```
+
+## React Server Components
+
+To use the yak theme context in a react server component, you need to place a `yak.context.tsx` in
+the same directory as your Next.js config.
+
+```tsx
+// yak.context.tsx
+export async function getYakThemeContext() {
+  return {
+    colors: {
+      primary: "red",
+      secondary: "blue",
+    },
+  };
+}
+
+declare module "@yak/react/context" {
+  export interface YakTheme extends Awaited<ReturnType<typeof getYakThemeContext>> {}
+}
+```
+
+> **Note:** The `getYakThemeContext` function can be async, which is useful when you need to access
+> server-side APIs like `cookies()` or `headers()` from Next.js 15+. @yak/react automatically handles
+> the promise resolution using React's `use()` hook internally.
+
+In your root layout component you have to forward the entire response of `getYakThemeContext`
+context to the client:
+
+```tsx
+// layout.tsx
+import { YakThemeProvider } from "@yak/react";
+
+export function Layout({ children }) {
+  return <YakThemeProvider>{children}</YakThemeProvider>;
+}
+```
+
+Internally this works because of an alias set by `withYak` inside the NextJs config.
+
+## React Components
+
+If you are using server components you can **skip this section**.
+
+To use the yak theme context in a normal react component, you can just use the `YakThemeProvider`:
+
+```tsx
+// _app.tsx
+import { YakThemeProvider } from "@yak/react/context";
+
+const theme = {
+    colors: {
+        primary: "red",
+        secondary: "blue",
+    },
+};
+
+declare module "@yak/react/context" {
+    export interface YakTheme extends typeof theme { }
+}
+
+export function App({ children }) {
+    return (
+        <YakThemeProvider value={theme}>
+            {children}
+        </YakThemeProvider>
+    );
+}
+```

package/runtime/context/baseContext.tsx

@@ -0,0 +1,5 @@
+import type { YakTheme } from "@yak/react";
+
+export function getYakThemeContext() {
+  return {} as YakTheme | undefined;
+}

package/runtime/context/index.server.tsx

@@ -0,0 +1,22 @@
+//
+// This file is the react-server component version of index.tsx
+//
+
+// @ts-ignore - in the current @types/react "cache" is not typed
+import React, { ReactNode, cache, use } from "react";
+import { YakTheme, YakThemeProvider as YakThemeClientProvider } from "./index.js";
+
+// the following import might be changed by
+// the user config in withYak to point to their own
+// context
+import { getYakThemeContext } from "@yak/react/context/baseContext";
+
+/** Request based RSC YAK Context */
+const getYakContext = cache(() => getYakThemeContext());
+export const useTheme = (): YakTheme | undefined => {
+  const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();
+  return theme instanceof Promise ? use(theme) : theme;
+};
+export const YakThemeProvider = ({ children }: { children: ReactNode }) => {
+  return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;
+};

package/runtime/context/index.tsx

@@ -0,0 +1,36 @@
+"use client";
+//
+// This file is the client component (browser & ssr) version of index.server.tsx
+//
+import React, { ReactNode, createContext, use } from "react";
+
+export interface YakTheme {}
+
+/**
+ * The yak theme context
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md
+ */
+const YakContext = createContext<YakTheme>({});
+
+/**
+ * Returns the current yak theme context
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md
+ */
+export const useTheme = (): YakTheme => {
+  const context = use(YakContext);
+  return context instanceof Promise ? use(context) : context;
+};
+
+/**
+ * Yak theme context provider
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md
+ */
+export const YakThemeProvider = ({
+  children,
+  theme = {},
+}: {
+  children: ReactNode;
+  theme?: YakTheme;
+}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;