From c94b5c96ee334a9f74ada809aae0a1ff91b12078 Mon Sep 17 00:00:00 2001
From: joe-bell <joe-bell@users.noreply.github.com>
Date: Sat, 18 Jun 2022 11:01:43 -0700
Subject: [PATCH] docs: use class-variance-authority in examples

---
 examples/next/package.json                    |  2 +-
 examples/next/src/components/icons.tsx        |  8 +--
 examples/next/src/components/image-grid.tsx   | 63 ++++++++++---------
 examples/next/src/components/layout.tsx       |  2 +-
 examples/next/src/pages/blurhash/multiple.tsx |  2 +-
 examples/next/src/pages/blurhash/single.tsx   |  2 +-
 examples/next/src/pages/css/multiple.tsx      |  2 +-
 examples/next/src/pages/css/single.tsx        |  2 +-
 examples/next/src/pages/index.tsx             |  2 +-
 examples/next/src/pages/tailwind/multiple.tsx |  2 +-
 examples/next/src/pages/tailwind/single.tsx   |  2 +-
 examples/next/src/styles/index.ts             |  3 -
 pnpm-lock.yaml                                | 20 +++---
 13 files changed, 59 insertions(+), 53 deletions(-)
 delete mode 100644 examples/next/src/styles/index.ts

diff --git a/examples/next/package.json b/examples/next/package.json
index 16cf99b..c705e2a 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -12,11 +12,11 @@
     "vercel": "pnpm build"
   },
   "dependencies": {
-    "@joebell/cx": "0.1.0",
     "@plaiceholder/next": "workspace:*",
     "@plaiceholder/tailwindcss": "workspace:*",
     "@tailwindcss/aspect-ratio": "0.2.0",
     "blurhash": "1.1.4",
+    "class-variance-authority": "0.2.2",
     "glob": "8.0.3",
     "next": "12.1.6",
     "plaiceholder": "workspace:*",
diff --git a/examples/next/src/components/icons.tsx b/examples/next/src/components/icons.tsx
index f6cdf29..d2cd1d9 100644
--- a/examples/next/src/components/icons.tsx
+++ b/examples/next/src/components/icons.tsx
@@ -1,11 +1,11 @@
-import { cx } from "@/styles";
+import { cva } from "class-variance-authority";
 
-const iconClassName = (className) => cx("w-6", "h-6", className);
+const icon = cva(["w-6", "h-6"]);
 
 export interface IconProps extends React.FC<JSX.IntrinsicElements["svg"]> {}
 
 export const IconTwitter: IconProps = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" className={iconClassName(className)} {...props}>
+  <svg viewBox="0 0 24 24" className={icon({ class: className })} {...props}>
     <g>
       <path
         fill="currentColor"
@@ -17,7 +17,7 @@ export const IconTwitter: IconProps = ({ className, ...props }) => (
 
 export const IconGitHub: IconProps = ({ className, ...props }) => (
   <svg
-    className={iconClassName(className)}
+    className={icon({ class: className })}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 17 16"
     fill="none"
diff --git a/examples/next/src/components/image-grid.tsx b/examples/next/src/components/image-grid.tsx
index 4651c76..4334fe7 100644
--- a/examples/next/src/components/image-grid.tsx
+++ b/examples/next/src/components/image-grid.tsx
@@ -1,35 +1,38 @@
-import { cx } from "@/styles";
+import type * as CVA from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import React from "react";
 
-export interface IImageGridProps {
-  columns?: 2 | 3;
-}
+const imageGrid = cva(
+  ["grid", "grid-cols-1", "sm:grid-cols-2", "gap-4", "mt-8"],
+  {
+    variants: { columns: { 2: null, 3: "md:grid-cols-3" } },
+    defaultVariants: { columns: 3 },
+  }
+);
+
+export interface ImageGridProps
+  extends React.HTMLAttributes<HTMLUListElement>,
+    CVA.VariantProps<typeof imageGrid> {}
 
-export const ImageGrid: React.FC<IImageGridProps> = ({
+export const ImageGrid: React.FC<ImageGridProps> = ({
+  className,
   columns = 3,
   ...props
-}) => (
-  <ul
-    className={cx(
-      "grid",
-      "grid-cols-1",
-      [2, 3].includes(columns) && "sm:grid-cols-2",
-      [3].includes(columns) && "md:grid-cols-3",
-      "gap-4",
-      "mt-8"
-    )}
-    {...props}
-  />
-);
+}) => <ul className={imageGrid({ class: className, columns })} {...props} />;
 
-export const ImageGridItem = (props) => (
-  <li
-    className={cx(
-      "relative",
-      "block",
-      "overflow-hidden",
-      // See src/styles/index.css
-      "next-image"
-    )}
-    {...props}
-  />
-);
+const imageGridItem = cva([
+  "relative",
+  "block",
+  "overflow-hidden",
+  // See src/styles/index.css
+  "next-image",
+]);
+
+export interface ImageGridItemProps
+  extends React.HTMLAttributes<HTMLLIElement>,
+    CVA.VariantProps<typeof imageGridItem> {}
+
+export const ImageGridItem: React.FC<ImageGridItemProps> = ({
+  className,
+  ...props
+}) => <li className={imageGridItem({ class: className })} {...props} />;
diff --git a/examples/next/src/components/layout.tsx b/examples/next/src/components/layout.tsx
index 12ab7ff..c8e75d1 100644
--- a/examples/next/src/components/layout.tsx
+++ b/examples/next/src/components/layout.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import NextLink from "next/link";
 import { IconGitHub, IconTwitter } from "@/components/icons";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { config } from "@/config";
 import { Head } from "./head";
 
diff --git a/examples/next/src/pages/blurhash/multiple.tsx b/examples/next/src/pages/blurhash/multiple.tsx
index 033f543..5434ee2 100644
--- a/examples/next/src/pages/blurhash/multiple.tsx
+++ b/examples/next/src/pages/blurhash/multiple.tsx
@@ -5,7 +5,7 @@ import { getPlaiceholder } from "plaiceholder";
 import { BlurhashCanvas } from "react-blurhash";
 import { Layout } from "@/components/layout";
 import { config } from "@/config";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { getAllUnsplashImagePaths } from "@/lib/images";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 
diff --git a/examples/next/src/pages/blurhash/single.tsx b/examples/next/src/pages/blurhash/single.tsx
index c75a5d3..e4f619c 100644
--- a/examples/next/src/pages/blurhash/single.tsx
+++ b/examples/next/src/pages/blurhash/single.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { getPlaiceholder } from "plaiceholder";
 import { BlurhashCanvas } from "react-blurhash";
 import { config } from "@/config";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
 
diff --git a/examples/next/src/pages/css/multiple.tsx b/examples/next/src/pages/css/multiple.tsx
index 4d90b81..3e3bad9 100644
--- a/examples/next/src/pages/css/multiple.tsx
+++ b/examples/next/src/pages/css/multiple.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { getPlaiceholder } from "plaiceholder";
 import { config } from "@/config";
 import { getAllUnsplashImagePaths } from "@/lib/images";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { Layout } from "@/components/layout";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 
diff --git a/examples/next/src/pages/css/single.tsx b/examples/next/src/pages/css/single.tsx
index 5d56845..a91839f 100644
--- a/examples/next/src/pages/css/single.tsx
+++ b/examples/next/src/pages/css/single.tsx
@@ -3,7 +3,7 @@ import { InferGetStaticPropsType } from "next";
 import Image from "next/image";
 import { getPlaiceholder } from "plaiceholder";
 import { config } from "@/config";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
 
diff --git a/examples/next/src/pages/index.tsx b/examples/next/src/pages/index.tsx
index 068f819..841b960 100644
--- a/examples/next/src/pages/index.tsx
+++ b/examples/next/src/pages/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { InferGetStaticPropsType } from "next";
 import Link from "next/link";
 import { getPlaiceholder } from "plaiceholder";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { Layout } from "@/components/layout";
 import { config } from "@/config";
 import { getAllUnsplashImagePaths } from "@/lib/images";
diff --git a/examples/next/src/pages/tailwind/multiple.tsx b/examples/next/src/pages/tailwind/multiple.tsx
index 57a4096..d3fb0fa 100644
--- a/examples/next/src/pages/tailwind/multiple.tsx
+++ b/examples/next/src/pages/tailwind/multiple.tsx
@@ -6,7 +6,7 @@ import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";
 import { config } from "@/config";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 
 const getImagesFromPlaiceholders = (...classNames) =>
   Promise.all(
diff --git a/examples/next/src/pages/tailwind/single.tsx b/examples/next/src/pages/tailwind/single.tsx
index c57c20e..fdcb624 100644
--- a/examples/next/src/pages/tailwind/single.tsx
+++ b/examples/next/src/pages/tailwind/single.tsx
@@ -6,7 +6,7 @@ import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";
 import { config } from "@/config";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 
 export const getStaticProps = async () => {
   const plaiceholder = "plaiceholder-[/assets/keila-joa@578.jpg]";
diff --git a/examples/next/src/styles/index.ts b/examples/next/src/styles/index.ts
deleted file mode 100644
index c6b1b0b..0000000
--- a/examples/next/src/styles/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createCx } from "@joebell/cx";
-
-export const cx = createCx({});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25bcdbb..f5ba681 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,7 +111,6 @@ importers:
 
   examples/next:
     specifiers:
-      '@joebell/cx': 0.1.0
       '@plaiceholder/next': workspace:*
       '@plaiceholder/tailwindcss': workspace:*
       '@tailwindcss/aspect-ratio': 0.2.0
@@ -119,6 +118,7 @@ importers:
       '@types/react': 17.0.45
       autoprefixer: 10.4.7
       blurhash: 1.1.4
+      class-variance-authority: 0.2.2
       concurrently: 7.2.1
       glob: 8.0.3
       next: 12.1.6
@@ -131,11 +131,11 @@ importers:
       tailwindcss: 2.2.15
       typescript: 4.7.3
     dependencies:
-      '@joebell/cx': 0.1.0
       '@plaiceholder/next': link:../../packages/next
       '@plaiceholder/tailwindcss': link:../../packages/tailwindcss
       '@tailwindcss/aspect-ratio': 0.2.0_tailwindcss@2.2.15
       blurhash: 1.1.4
+      class-variance-authority: 0.2.2_typescript@4.7.3
       glob: 8.0.3
       next: 12.1.6_react-dom@17.0.2+react@17.0.2
       plaiceholder: link:../../packages/plaiceholder
@@ -2784,11 +2784,6 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
 
-  /@joebell/cx/0.1.0:
-    resolution: {integrity: sha512-jEnMWRw0sHhB7KB0+jb1sIJyfk+t54DPxojesWiiV6rf8ynNfBPr+k3lPgLkxZCv0w2tUPOEWloscm1pqILh6A==}
-    engines: {node: '>=10'}
-    dev: false
-
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -4597,6 +4592,17 @@ packages:
     resolution: {integrity: sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==}
     dev: true
 
+  /class-variance-authority/0.2.2_typescript@4.7.3:
+    resolution: {integrity: sha512-SPMcf+Jd/QYTfq+cO5/6sS6q9N+DZNeKOSscWOQgE0i6wl0IN6PcRCakyve/08ARrc/Pj5XOluonDFIFA4ASnQ==}
+    peerDependencies:
+      typescript: '>= 4.5.5 < 5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 4.7.3
+    dev: false
+
   /clean-css/5.3.0:
     resolution: {integrity: sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==}
     engines: {node: '>= 10.0'}