refactor(crv): rename splitCrv to be more verbose (#10)

* refactor(crv): rename splitCrv to be more verbose * refactor(crv): add tests for the func alias
jonambas · Apr 21, 2024 · 2e00499 · 2e00499
1 parent d0da42a
commit 2e00499
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -51,18 +51,21 @@ const styles = cva({
 This plugins ships two helpers to parse responsive variants in your components.
 
 - `ResponsiveVariant` – creates appropriate types, with your theme's breakpoints
-- `splitCrv` – translates the incoming responsive object into variants generated by `crv`
+- `splitResponsiveVariant` – translates the incoming responsive object into variants generated by `crv`
 
 ```tsx
-import { splitCrv, type ResponsiveVariant } from '@/styled-system/css';
+import {
+  splitResponsiveVariant,
+  type ResponsiveVariant,
+} from '@/styled-system/css';
 
 type ComponentProps = PropsWithChildren<{
   variant?: ResponsiveVariant<'primary' | 'secondary' | 'destructive'>;
 }>;
 
 const Component: FC<ComponentProps> = (props) => {
   const { children, variant = 'secondary' } = props;
-  const variants = splitCrv('variant', variant);
+  const variants = splitResponsiveVariant('variant', variant);
 
   return <div className={styles({ ...variants })}>{children}</div>;
 };

diff --git a/apps/vite-react/src/app.tsx b/apps/vite-react/src/app.tsx
@@ -5,6 +5,7 @@ import {
   css,
   cva,
   cx,
+  splitResponsiveVariant,
   ResponsiveVariant,
   splitCrv,
 } from '@/styled-system/css';
@@ -44,7 +45,7 @@ const Component: FC<
 > = (props) => {
   const { children, tone = 'negative', visible } = props;
   const splitTone = splitCrv('tone', tone);
-  const splitVisible = splitCrv('visible', visible);
+  const splitVisible = splitResponsiveVariant('visible', visible);
 
   return (
     <div className={cx(componentRecipe({ ...splitTone, ...splitVisible }))}>

diff --git a/src/__tests__/codegen.test.ts b/src/__tests__/codegen.test.ts
@@ -51,7 +51,7 @@ describe('codegen', () => {
         return variants;
       };
 
-      export const splitCrv = (name, value) => {
+      export const splitResponsiveVariant = (name, value) => {
         if (typeof value !== 'object') {
           return { [name]: value };
         }
@@ -65,7 +65,10 @@ describe('codegen', () => {
         }
 
         return variants;
-      };",
+      };
+
+      export const splitCrv = splitResponsiveVariant;
+      ",
               "file": "crv.mjs",
             },
             {
@@ -94,11 +97,14 @@ describe('codegen', () => {
       /**
        * Splits responsive objects into \`crv\` variants
        */
-      export declare const splitCrv: <T extends string>(
+      type SplitResponsiveVariant = <T extends string>(
         name: T,
         value: any
       ) => Record<\`\${T}_\${CrvBreakpoints}\` | T, any>;
 
+      export declare const splitCrv: SplitResponsiveVariant;
+      export declare const splitResponsiveVariant: SplitResponsiveVariant;
+
       export type ResponsiveVariant<T> = Partial<Record<'base' | CrvBreakpoints, T>> | T;",
               "file": "crv.d.ts",
             },

diff --git a/src/__tests__/crv.test.ts b/src/__tests__/crv.test.ts
@@ -1,9 +1,11 @@
 import { crv, crvFunc } from '../crv';
 import { breakpoints } from './fixtures';
 
-const { splitCrv, crv: crvCodegen } = await import(
-  `data:text/javascript,${crvFunc(Object.keys(breakpoints))}`
-);
+const {
+  splitCrv,
+  crv: crvCodegen,
+  splitResponsiveVariant,
+} = await import(`data:text/javascript,${crvFunc(Object.keys(breakpoints))}`);
 
 describe('crv', () => {
   it('returns the expected variants', () => {
@@ -232,6 +234,10 @@ describe('crv codegen', () => {
 });
 
 describe('splitCrv codegen', () => {
+  it('is an alias for splitResponsiveVariant', () => {
+    expect(splitResponsiveVariant).toBe(splitCrv);
+  });
+
   it('handles non-reponsive values', async () => {
     expect(splitCrv('prop', 'variant')).toEqual({ prop: 'variant' });
     expect(splitCrv('prop', false)).toEqual({ prop: false });

diff --git a/src/crv.ts b/src/crv.ts
@@ -48,7 +48,7 @@ export const crv = (name, styles) => {
   return variants;
 };
 
-export const splitCrv = (name, value) => {
+export const splitResponsiveVariant = (name, value) => {
   if (typeof value !== 'object') {
     return { [name]: value };
   }
@@ -62,7 +62,10 @@ export const splitCrv = (name, value) => {
   }
 
   return variants;
-};`;
+};
+
+export const splitCrv = splitResponsiveVariant;
+`;
 
 export const crvFuncDts = (breakpoints: string[]) => `/* eslint-disable */
 import type { SystemStyleObject } from '../types/system-types';
@@ -89,9 +92,12 @@ export declare const crv: <T extends string, P extends Record<any, SystemStyleOb
 /**
  * Splits responsive objects into \`crv\` variants
  */
-export declare const splitCrv: <T extends string>(
+type SplitResponsiveVariant = <T extends string>(
   name: T,
   value: any
 ) => Record<\`\${T}_\${CrvBreakpoints}\` | T, any>;
 
+export declare const splitCrv: SplitResponsiveVariant;
+export declare const splitResponsiveVariant: SplitResponsiveVariant;
+
 export type ResponsiveVariant<T> = Partial<Record<'base' | CrvBreakpoints, T>> | T;`;