Styled -> Apply

package.json

@@ -28,31 +28,31 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@headlessui/react": "^0.2.0",
+    "@headlessui/react": "^0.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-logs": "^0.1.9",
-    "twind": "0.10.3-1"
+    "twind": "0.15.1"
   },
   "devDependencies": {
     "@snowpack/plugin-dotenv": "^2.0.5",
     "@snowpack/plugin-react-refresh": "^2.4.0",
     "@snowpack/plugin-typescript": "^1.2.1",
     "@snowpack/web-test-runner-plugin": "^0.2.1",
-    "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-essentials": "^6.1.14",
-    "@storybook/addon-links": "^6.1.14",
-    "@storybook/react": "^6.1.14",
-    "@testing-library/react": "^11.2.3",
-    "@types/chai": "^4.2.14",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@storybook/addon-actions": "^6.1.18",
+    "@storybook/addon-essentials": "^6.1.18",
+    "@storybook/addon-links": "^6.1.18",
+    "@storybook/react": "^6.1.18",
+    "@testing-library/react": "^11.2.5",
+    "@types/chai": "^4.2.15",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "@types/snowpack-env": "^2.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
-    "@web/test-runner": "^0.12.5",
-    "chai": "^4.2.0",
-    "eslint": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
+    "@web/test-runner": "^0.12.15",
+    "chai": "^4.3.0",
+    "eslint": "^7.20.0",
     "eslint-config-gojutin": "^0.1.5",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-react-app": "^6.0.0",
@@ -68,6 +68,6 @@
     "eslint-plugin-standard": "^5.0.0",
     "prettier": "^2.2.1",
     "snowpack": "^3.0.11",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.5"
   }
 }

src/App.tsx

@@ -8,11 +8,11 @@ import { ReactLogo } from './components/ReactLogo';
 import { Tips } from './components/Tips';
 
 // Styled components
-import { Avatar } from './components/Avatar.styled';
-import { Pill } from './components/Pill.styled';
-import { Header } from './components/Header.styled';
-import { Input } from './components/Input.styled';
-import { SkipLink } from './components/SkipLink.styled';
+import { Avatar } from './components/Avatar';
+import { Pill } from './components/Pill';
+import { Header } from './components/Header';
+import { Input } from './components/Input';
+import { SkipLink } from './components/SkipLink';
 
 import type { InlineDirectiveMap } from './types';
 

src/components/Alert.tsx

@@ -1,16 +1,9 @@
 import * as React from 'react';
-import { tw } from 'twind';
+import { tw, apply } from 'twind';
 import { Transition } from '@headlessui/react';
+import type { BaseComponent } from '../types';
 
-export interface AlertProps {
-  /**
-   * The contents of the alert box
-   */
-  children?: React.ReactNode;
-  /**
-   * Instance-level classNames will override local classNames
-   */
-  className?: string;
+export interface AlertProps extends BaseComponent {
   /**
    * Determines rather the user can close the alert box
    */
@@ -44,21 +37,18 @@ export const Alert = ({
   className = '',
   closable = false,
   variant = 'default',
+  style = {},
 }: AlertProps) => {
   const [show, setShow] = React.useState(true);
   const color = colorMap[variant];
-  const classNames = tw`
+  const appliedCclassNames = apply`
     border-l-4 
     p-4 
     flex 
     flex-wrap
     items-center 
     justify-between 
-    ${[
-      `bg-${color}-100`,
-      `border-${color}-500`,
-      `text-${color}-800`,
-    ]} override:(${className})`;
+    ${[`bg-${color}-100`, `border-${color}-500`, `text-${color}-800`]}`;
   return (
     <Transition
       show={show}
@@ -69,7 +59,11 @@ export const Alert = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className={classNames} role="alert">
+      <div
+        className={tw(appliedCclassNames, className)}
+        role="alert"
+        style={style}
+      >
         <div>
           {title && <p className={tw`font-semibold`}>{title}</p>}
           {children}

src/components/Avatar.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { tw, apply } from 'twind';
+import type { InlineDirectiveMap } from '../types';
+import { lazy } from '../utils';
+
+export interface AvatarProps
+  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size'> {
+  /**
+   * Instance-level classNames will override local classNames
+   */
+  className?: string;
+  /**
+   * Determines if the avatar will be round
+   */
+  round?: boolean;
+  /**
+   * The size of the avatar.
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * The URL of the avatar image
+   */
+  src?: string;
+}
+
+type Size = 'sm' | 'md' | 'lg';
+
+const sizeMap: InlineDirectiveMap<Size> = {
+  sm: lazy`h-12 w-12`,
+  md: lazy`h-16 w-16`,
+  lg: lazy`h-20 w-20`,
+};
+
+export const Avatar = (props: AvatarProps) => {
+  const { size = 'md', alt, round, className, ...rest } = props;
+  const appliedClassNames = apply([
+    sizeMap[size],
+    `rounded-${round ? 'full' : 'md'}`,
+  ]);
+  return (
+    <img alt={alt} className={tw(appliedClassNames, className)} {...rest} />
+  );
+};

src/components/Button.tsx

@@ -11,18 +11,15 @@ This is an example of a reusable button component:
 */
 
 import * as React from 'react';
-import { tw } from 'twind';
+import { tw, apply } from 'twind';
 import { Spinner } from './Spinner';
-import { __DEV__, logClassNames } from '../utils';
+import { __DEV__, logClassNames, lazy } from '../utils';
 import { slowspin } from '../animations';
-import type { InlineDirectiveMap } from '../types';
+import type { InlineDirectiveMap, BaseComponent } from '../types';
 
 export interface ButtonProps
-  extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'size'> {
-  /**
-   * Instance-level classNames will override local classNames
-   */
-  className?: string;
+  extends BaseComponent,
+    Omit<React.HTMLAttributes<HTMLButtonElement>, 'size'> {
   /**
    * Determines if the button is clickable
    */
@@ -39,10 +36,6 @@ export interface ButtonProps
    * Controls the text size and padding of the button
    */
   size?: 'sm' | 'md' | 'lg' | 'xl';
-  /**
-   * Optionally provide a style object
-   */
-  style?: React.CSSProperties;
   /**
    * Determines the color of the button
    */
@@ -61,18 +54,18 @@ type sizes = 'sm' | 'md' | 'lg' | 'xl';
 
 // The inline functions allow Twind to cache the derived classNames
 const sizeMap: InlineDirectiveMap<sizes> = {
-  sm: ({ tw }) => tw`text-xs py(2 md:1) px-2`,
-  md: ({ tw }) => tw`text-sm py(3 md:2) px-2`,
-  lg: ({ tw }) => tw`text-lg py-2 px-4`,
-  xl: ({ tw }) => tw`text-xl py-3 px-6`,
+  sm: lazy`text-xs py(2 md:1) px-2`,
+  md: lazy`text-sm py(3 md:2) px-2`,
+  lg: lazy`text-lg py-2 px-4`,
+  xl: lazy`text-xl py-3 px-6`,
 };
 
 // The inline functions allow Twind to cache the derived classNames
 const spinnerSizeMap: InlineDirectiveMap<sizes> = {
-  sm: ({ tw }) => tw`w-3 h-3 mr-1`,
-  md: ({ tw }) => tw`w-4 h-4 mr-1`,
-  lg: ({ tw }) => tw`w-5 h-5 mr-2`,
-  xl: ({ tw }) => tw`w-6 h-6 mr-2`,
+  sm: lazy`w-3 h-3 mr-1`,
+  md: lazy`w-4 h-4 mr-1`,
+  lg: lazy`w-5 h-5 mr-2`,
+  xl: lazy`w-6 h-6 mr-2`,
 };
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -90,27 +83,19 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant = 'primary',
       ...rest
     } = props;
-    // Get the background color
-    const variantColor = variantMap[variant];
-    // Create the background color classNames with pseudo variants
-    const bgClassNames = `bg(${variantColor}(500 600(hover:& focus:&)))`;
-    // Get the text size based on the "size" prop
-    const sizeClassNames = sizeMap[size];
-    // Create the full className, passing the instance-level classNames to the "override" variant
-    const classNames = tw`
+
+    const appliedClassNames = apply`
+    ${sizeMap[size]}
+    bg(${variantMap[variant]}(500 600(hover:& focus:&)))
     w(full sm:auto)
-    ${bgClassNames}
-    ${sizeClassNames}
     text(sm white uppercase) 
     rounded-${round ? 'full' : 'md'} 
     border-none 
     transition-colors 
     duration-300
-    override:(${disabled && 'bg-gray-400 text-gray-100 cursor-not-allowed'})
-    override:(${className})
   `;
 
-    const spinnerSizeClassName = spinnerSizeMap[size];
+    const classNames = tw(appliedClassNames, className);
 
     function handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
       logClassNames(classNames, children);
@@ -132,7 +117,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           <Spinner
             className={tw`
               text-current 
-              ${[slowspin, spinnerSizeClassName, !loading && 'hidden']}
+              ${[slowspin, spinnerSizeMap[size], !loading && 'hidden']}
             `}
           />
 
@@ -142,3 +127,13 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+
+// eslint-disable-next-line functional/immutable-data
+Button.defaultProps = {
+  className: '',
+  disabled: false,
+  loading: false,
+  round: false,
+  size: 'md',
+  variant: 'primary',
+};