Default Variants (#10)

* Default Variants

* version bump

* misc

* slip in another test

Author: John Richard Chipps-Harding

README.md

@@ -16,9 +16,12 @@ Here is a minimal example of a button component with an optional variant:
 import { styled } from "@phntms/css-components";
 import css from "./styles.module.css";
 
-export const Button = styled("button", css.root, {
-  primary: {
-    true: css.primary,
+export const Button = styled("button", {
+  css: css.root,
+  variants: {
+    primary: {
+      true: css.primary,
+    },
   },
 });
 ```
@@ -67,9 +70,12 @@ components/Button/styles.ts
 import { styled } from "@phntms/css-components";
 import css from "./styles.module.css";
 
-export const StyledButton = styled("button", css.root, {
-  primary: {
-    true: css.primary,
+export const StyledButton = styled("button", {
+  css: css.root,
+  variants: {
+    primary: {
+      true: css.primary,
+    },
   },
 });
 ```
@@ -97,20 +103,42 @@ export const Button = ({ title, onClick, primary }: Props) => (
 The variants config object is a simple object that allows you to define the variants that your component supports. Each variant is a key in the object and the value is an object that defines the possible values(css classes) for that variant.
 
 ```tsx
-const StyledButton = styled("button", css.root, {
-  big: {
-    // Boolean values are supported
-    true: css.big,
+const StyledButton = styled("button", {
+  css: css.root,
+  variants: {
+    big: {
+      // Boolean values are supported
+      true: css.big,
+    },
+    color: {
+      // String values are supported
+      primary: css.primary,
+      secondary: css.secondary,
+    },
+    size: {
+      // Number values are supported
+      1: css.size1,
+      2: css.size2,
+    },
   },
-  color: {
-    // String values are supported
-    primary: css.primary,
-    secondary: css.secondary,
+});
+```
+
+## Default Variants
+
+You can use the `defaultVariants` feature to set a variant by default:
+
+```tsx
+const StyledButton = styled("button", {
+  css: css.root,
+  variants: {
+    big: {
+      // Boolean values are supported
+      true: css.big,
+    },
   },
-  size: {
-    // Number values are supported
-    1: css.size1,
-    2: css.size2,
+  defaultVariants: {
+    big: true,
   },
 });
 ```
@@ -120,10 +148,9 @@ const StyledButton = styled("button", css.root, {
 For more complex variant setups you can use the compound variants argument to define what styles should be applied when multiple variants are used.
 
 ```tsx
-const StyledButton = styled(
-  "button",
-  css.root,
-  {
+const StyledButton = styled("button", {
+  css: css.root,
+  variants: {
     border: {
       true: css.bordered,
     },
@@ -132,7 +159,7 @@ const StyledButton = styled(
       secondary: css.secondary,
     },
   },
-  [
+  compoundVariants: [
     {
       border: true,
       color: "primary",
@@ -143,8 +170,8 @@ const StyledButton = styled(
       color: "secondary",
       css: css.greyBorder,
     },
-  ]
-);
+  ],
+});
 ```
 
 ## Other
@@ -158,9 +185,12 @@ import { styled } from "@phntms/css-components";
 import shared from "../sharedstyles.module.css";
 import css from "./styles.module.css";
 
-const Link = styled("a", [shared.link, shared.fontNormal, css.root], {
-  big: {
-    true: [css.big, shared.fontBold],
+const Link = styled("a", {
+  css: [shared.link, shared.fontNormal, css.root],
+  variants: {
+    big: {
+      true: [css.big, shared.fontBold],
+    },
   },
 });
 ```
@@ -173,8 +203,11 @@ We have included a helper that allows you to access the types of the variants yo
 import { CSSComponentPropType } from "@phntms/css-components";
 import css from "./styles.module.css";
 
-const Button = styled("button", css.baseButton, {
-  primary: { true: css.primary },
+const Button = styled("button", {
+  css: css.baseButton,
+  variants: {
+    primary: { true: css.primary },
+  },
 });
 
 type ButtonTypes = CSSComponentPropType<typeof Button, "primary">;

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.5",
+  "version": "0.0.6",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/css-components#readme",

package.json

@@ -43,17 +43,27 @@ export type PropsOf<
   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 const styled = <
   V extends variantsType | object,
   E extends React.ElementType
 >(
   element: E,
-  baseClassName?: string | string[],
-  variants?: V,
-  compoundVariants?: compoundVariantType[]
+  config?: Config<V>
 ) => {
   const styledComponent = forwardRef<E, { [key: string]: string }>(
     (props, ref) => {
+      const mergedProps = { ...config?.defaultVariants, ...props } as {
+        [key: string]: string;
+      };
       // Initialize variables to store the new props and styles
       const componentProps: { [key: string]: unknown } = {};
       const componentStyles: string[] = [];
@@ -65,19 +75,19 @@ export const styled = <
       if (ref) componentProps.ref = ref;
 
       // Add the base style(s)
-      if (baseClassName)
+      if (config?.css)
         componentStyles.push(
-          Array.isArray(baseClassName) ? baseClassName.join(" ") : baseClassName
+          Array.isArray(config.css) ? config.css.join(" ") : config.css
         );
 
       // Apply any variant styles
-      Object.keys(props).forEach((key) => {
-        if (variants && variants.hasOwnProperty(key)) {
-          const variant = variants[key as keyof typeof variants];
-          if (variant && variant.hasOwnProperty(props[key])) {
-            const selector = variant[props[key] as keyof typeof variant] as
-              | string
-              | string[];
+      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
             );
@@ -88,8 +98,11 @@ export const styled = <
       });
 
       // Apply any compound variant styles
-      if (compoundVariants) {
-        const matches = findMatchingCompoundVariants(compoundVariants, props);
+      if (config?.compoundVariants) {
+        const matches = findMatchingCompoundVariants(
+          config.compoundVariants,
+          props
+        );
 
         matches.forEach((match) => {
           if (Array.isArray(match.css)) {