Better Typing - Compound Variants (#11)

* Better Typing

* refactor

* tidy

* More tidy

* version bump

* tidy

* linting

* Docs

* Refactor

* doh!

* Update src/type.ts

Co-authored-by: Guy Purssell <[email protected]>

* PR Feedback

* More tidy

Co-authored-by: Guy Purssell <[email protected]>

Author: John Richard Chipps-Harding

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@phntms/css-components",
   "description": "At its core, css-components is a simple wrapper around standard CSS. It allows you to write your CSS how you wish then compose them into a component ready to be used in React.",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/css-components#readme",

package.json

@@ -1,63 +1,21 @@
-import { createElement, forwardRef, JSXElementConstructor } from "react";
+import { createElement, forwardRef } from "react";
 
-export type CSSComponentPropType<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
-  P extends keyof React.ComponentProps<C>
-> = React.ComponentProps<C>[P];
+import {
+  CSSComponentConfig,
+  cssType,
+  PolymorphicComponent,
+  variantsType,
+} from "./type";
+import { findMatchingCompoundVariants, flattenCss } from "./utils";
 
-type variantValue = string | number | boolean | string[];
-
-// An object of variants, and how they map to CSS styles
-type variantsType = Partial<{
-  [key: string]: { [key: string | number]: string | string[] };
-}>;
-
-type compoundVariantType = {
-  [key: string]: variantValue;
-} & {
-  css: string | string[];
-};
-
-// Does the type being passed in look like a boolean? If so, return the boolean.
-type BooleanIfStringBoolean<T> = T extends "true" | "false" ? boolean : T;
-
-const findMatchingCompoundVariants = (
-  compoundVariants: {
-    [key: string]: variantValue;
-  }[],
-  props: {
-    [key: string]: variantValue;
-  }
-) =>
-  compoundVariants.filter((compoundVariant) =>
-    Object.keys(compoundVariant).every(
-      (key) => key === "css" || compoundVariant[key] === props[key]
-    )
-  );
-
-// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts
-// A more precise version of just React.ComponentPropsWithoutRef on its own
-export type PropsOf<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
-> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
-
-interface Config<V> {
-  css?: string | string[];
-  variants?: V;
-  compoundVariants?: compoundVariantType[];
-  defaultVariants?: {
-    [Property in keyof V]?: BooleanIfStringBoolean<keyof V[Property]>;
-  };
-}
+export { CSSComponentConfig, CSSComponentPropType } from "./type";
 
 export const styled = <
   V extends variantsType | object,
   E extends React.ElementType
 >(
   element: E,
-  config?: Config<V>
+  config?: CSSComponentConfig<V>
 ) => {
   const styledComponent = forwardRef<E, { [key: string]: string }>(
     (props, ref) => {
@@ -71,26 +29,21 @@ export const styled = <
       // Pass through an existing className if it exists
       if (props.className) componentStyles.push(props.className);
 
+      // Add the base style(s)
+      if (config?.css) componentStyles.push(flattenCss(config.css));
+
       // Pass through the ref
       if (ref) componentProps.ref = ref;
 
-      // Add the base style(s)
-      if (config?.css)
-        componentStyles.push(
-          Array.isArray(config.css) ? config.css.join(" ") : config.css
-        );
-
       // Apply any variant styles
       Object.keys(mergedProps).forEach((key) => {
         if (config?.variants && config.variants.hasOwnProperty(key)) {
           const variant = config.variants[key as keyof typeof config.variants];
           if (variant && variant.hasOwnProperty(mergedProps[key])) {
             const selector = variant[
               mergedProps[key] as keyof typeof variant
-            ] as string | string[];
-            componentStyles.push(
-              Array.isArray(selector) ? selector.join(" ") : selector
-            );
+            ] as cssType;
+            componentStyles.push(flattenCss(selector));
           }
         } else {
           componentProps[key] = props[key];
@@ -119,9 +72,5 @@ export const styled = <
     }
   );
 
-  return styledComponent as React.FC<
-    React.ComponentProps<E> & {
-      [Property in keyof V]?: BooleanIfStringBoolean<keyof V[Property]>;
-    }
-  >;
+  return styledComponent as PolymorphicComponent<E, V>;
 };

src/index.ts

@@ -0,0 +1,114 @@
+/**
+ * Mostly lifted from here:
+ * https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ *
+ * Much respect
+ */
+
+import { JSXElementConstructor } from "react";
+
+// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts
+// A more precise version of just React.ComponentPropsWithoutRef on its own
+export type PropsOf<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
+
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+export type ExtendableProps<
+  ExtendedProps = Record<string, unknown>,
+  OverrideProps = Record<string, unknown>
+> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+export type InheritableElementProps<
+  C extends React.ElementType,
+  Props = Record<string, unknown>
+> = ExtendableProps<PropsOf<C>, Props>;
+
+export type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>["ref"];
+
+export type PolymorphicComponentProps<
+  C extends React.ElementType,
+  Props = Record<string, unknown>
+> = InheritableElementProps<C, Props>;
+
+export type PolymorphicComponentPropsWithRef<
+  C extends React.ElementType,
+  Props = Record<string, unknown>
+> = PolymorphicComponentProps<C, Props> & { ref?: PolymorphicRef<C> };
+
+/**
+ * Pass in an element type `E` and a variants `V` and get back a
+ * type that can be used to create a component.
+ */
+
+export type PolymorphicComponent<
+  E extends React.ElementType,
+  V extends variantsType | object
+> = React.FC<PolymorphicComponentPropsWithRef<E, VariantOptions<V>>>;
+
+/**
+ * The CSS Component Config type.
+ */
+export interface CSSComponentConfig<V> {
+  css?: cssType;
+  variants?: V;
+  compoundVariants?: CompoundVariantType<V>[];
+  defaultVariants?: {
+    [Property in keyof V]?: BooleanIfStringBoolean<keyof V[Property]>;
+  };
+}
+
+/**
+ * Allows you to extract a type for variant values.
+ */
+export type CSSComponentPropType<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+  P extends keyof React.ComponentProps<C>
+> = React.ComponentProps<C>[P];
+
+/**
+ * CSS can be passed in as either a string or an array of strings.
+ */
+export type cssType = string | string[];
+
+export type variantValue = string | number | boolean | string[];
+
+/**
+ * An object of variants, and how they map to CSS styles
+ */
+export type variantsType = Partial<{
+  [key: string]: { [key: string | number]: cssType };
+}>;
+
+/**
+ * Returns a boolean type if a "true" or "false" string type is passed in.
+ */
+export type BooleanIfStringBoolean<T> = T extends "true" | "false"
+  ? boolean
+  : T;
+
+/**
+ * Returns a type object containing the variants and their possible values.
+ */
+export type VariantOptions<V> = {
+  [Property in keyof V]?: BooleanIfStringBoolean<keyof V[Property]>;
+};
+
+/**
+ * Returns a type object for compound variants.
+ */
+export type CompoundVariantType<V> = VariantOptions<V> & {
+  css: cssType;
+};

src/type.ts

@@ -0,0 +1,18 @@
+import { cssType, variantValue } from "./type";
+
+export const findMatchingCompoundVariants = (
+  compoundVariants: {
+    [key: string]: variantValue;
+  }[],
+  props: {
+    [key: string]: variantValue;
+  }
+) =>
+  compoundVariants.filter((compoundVariant) =>
+    Object.keys(compoundVariant).every(
+      (key) => key === "css" || compoundVariant[key] === props[key]
+    )
+  );
+
+export const flattenCss = (css: cssType) =>
+  Array.isArray(css) ? css.join(" ") : css;

src/utils.ts

@@ -232,7 +232,7 @@ describe("supports more exotic setups", () => {
     expect(ref).toBeCalled();
   });
 
-  it("Should be able to inspect the variants", async () => {
+  it("should be able to inspect the variants", async () => {
     const Button = styled("button", {
       css: "test",
       variants: { primary: { true: "primary" } },
@@ -242,4 +242,14 @@ describe("supports more exotic setups", () => {
 
     expectTypeOf<primaryType>().toMatchTypeOf<boolean | undefined>();
   });
+
+  it("should be able to use existing props as variants", async () => {
+    const Option = styled("option", {
+      css: "test",
+      variants: { selected: { true: "primary" } },
+    });
+    const { container } = render(<Option selected>Option 1</Option>);
+
+    expect(container.firstChild).toHaveClass("primary");
+  });
 });