fix(TextLink): better outline

fix(MenuList): default to anchor list fix: better polymorphism (still sucks) fix(Tooltip): improve styles and docs fix: Tailwind to use font size CSS variables
LexSwed · Dec 20, 2022 · bbec7bf · bbec7bf
1 parent 8189ed3
commit bbec7bf
Show file tree

Hide file tree

Showing 26 changed files with 543 additions and 450 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,14 +70,14 @@
     "@stitches/react": "^1.2.8",
     "@types/glob": "^8.0.0",
     "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.15",
+    "@types/node": "^18.11.17",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.29.0",
+    "eslint": "^8.30.0",
     "eslint-config-next": "^13.0.7",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
@@ -112,7 +112,7 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
     "typescript-plugin-css-modules": "^4.1.1",
-    "vite": "^4.0.1",
+    "vite": "^4.0.2",
     "vite-plugin-static-copy": "^0.13.0"
   },
   "peerDependencies": {

diff --git a/src/lib/collapsible/collapsible.module.css b/src/lib/collapsible/collapsible.module.css
@@ -6,16 +6,20 @@
     will-change: transform, height, opacity;
     &:where([data-state='open']) {
       animation: 300ms open ease-in forwards;
-      & > .trigger-icon {
-        rotate: 180deg;
-      }
     }
     &:where([data-state='closed']) {
       animation: 240ms close ease-out forwards;
     }
   }
+  .trigger {
+    &:where([data-state='open']) {
+      & > .trigger-icon {
+        rotate: 180deg;
+      }
+    }
+  }
   .trigger-icon {
-    transition: transform 150ms ease-in-out;
+    transition: rotate 150ms ease-in-out;
   }
 
   @keyframes open {

diff --git a/src/lib/collapsible/collapsible.tsx b/src/lib/collapsible/collapsible.tsx
@@ -16,7 +16,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
   ({ children, flow = 'row', cross = 'center', main = 'space-between', className, ...props }, ref) => {
     return (
       <Rdx.Trigger asChild>
-        <Button flow={flow} cross={cross} main={main} className={clsx('group/trigger', className)} {...props} ref={ref}>
+        <Button flow={flow} cross={cross} main={main} className={clsx(styles.trigger, className)} {...props} ref={ref}>
           {children}
           <Icon className={styles['trigger-icon']} size={props.size} as={ChevronDownIcon} />
         </Button>

diff --git a/src/lib/flex/flex.tsx b/src/lib/flex/flex.tsx
@@ -1,6 +1,6 @@
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { clsx } from 'clsx';
-import { forwardRef, ElementType } from 'react';
+import { forwardRef, ElementType, ReactElement } from 'react';
 import type { PolyProps, PolyRef } from '../utils/polymorphic';
 
 import styles from './flex.module.css';
@@ -58,42 +58,46 @@ export const flexCss = css({
 
 export type FlexVariants = VariantProps<typeof flexCss>;
 
-interface FlexProps extends FlexVariants {}
+type FlexProps<C extends ElementType> = PolyProps<C, FlexVariants>;
 
-export const Flex = forwardRef(function Flex<C extends ElementType = 'div'>(
-  { as, display = 'flex', gap, main, cross, flow, wrap, flex, className, ...props }: PolyProps<C, FlexProps>,
-  ref: PolyRef<C>
-) {
-  const Component = as || 'div';
-  return (
-    <Component
-      className={clsx(flexCss({ display, gap, main, cross, flow, wrap, flex }), className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
+type FlexComponent = <C extends ElementType = 'div'>(props: FlexProps<C>) => ReactElement | null;
 
-interface RowProps extends FlexVariants {
-  flow?: Extract<FlexVariants['flow'], 'row' | 'row-reverse'>;
-}
-export const Row = forwardRef(function Row<C extends ElementType = 'div'>(
-  { flow = 'row', ...props }: PolyProps<C, RowProps>,
-  ref: PolyRef<C>
-) {
-  return <Flex flow={flow} {...props} ref={ref} />;
-});
+export const Flex: FlexComponent = forwardRef(
+  <C extends ElementType = 'div'>(
+    { as, display = 'flex', gap, main, cross, flow, wrap, flex, className, ...props }: FlexProps<C>,
+    ref: PolyRef<C>
+  ) => {
+    const Component = as || 'div';
 
-interface ColumnProps extends FlexVariants {
-  flow?: Extract<FlexVariants['flow'], 'column' | 'column-reverse'>;
-}
-export const Column = forwardRef(function Column<C extends ElementType = 'div'>(
-  { flow = 'column', ...props }: PolyProps<C, ColumnProps>,
-  ref: PolyRef<C>
-) {
-  return <Flex flow={flow} {...props} ref={ref} />;
+    return (
+      <Component
+        className={clsx(flexCss({ display, gap, main, cross, flow, wrap, flex }), className)}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+type RowProps<C extends ElementType> = PolyProps<
+  C,
+  FlexVariants & { flow?: Extract<FlexVariants['flow'], 'row' | 'row-reverse'> }
+>;
+type RowComponent = <C extends ElementType = 'div'>(props: RowProps<C>) => ReactElement | null;
+
+export const Row: RowComponent = forwardRef(<C extends ElementType = 'div'>(props: RowProps<C>, ref: PolyRef<C>) => {
+  return <Flex {...props} flow={props.flow || 'row'} ref={ref} />;
 });
 
+type ColumnProps<C extends ElementType> = PolyProps<C, FlexVariants & { flow?: 'column' | 'column-reverse' }>;
+type ColumnComponent = <C extends ElementType = 'div'>(props: ColumnProps<C>) => ReactElement | null;
+
+export const Column: ColumnComponent = forwardRef(
+  <C extends ElementType = 'div'>(props: ColumnProps<C>, ref: PolyRef<C>) => {
+    return <Flex {...props} flow={props.flow || 'column'} ref={ref} />;
+  }
+);
+
 const grid = css({
   variants: {
     display: {

diff --git a/src/lib/form-field/form-field.tsx b/src/lib/form-field/form-field.tsx
@@ -9,29 +9,36 @@ import { Flex, FlexVariants } from '../flex/flex';
 
 import styles from './form-field.module.css';
 
-export const FormFieldWrapper = forwardRef(function FormField<C extends ElementType = 'div'>(
-  {
-    cross = 'stretch',
-    flow = 'column',
-    display = 'inline',
-    gap = 'xs',
-    className,
-    ...props
-  }: PolyProps<C, FlexVariants>,
-  ref: PolyRef<C>
-) {
-  return (
-    <Flex
-      cross={cross}
-      flow={flow}
-      display={display}
-      gap={gap}
-      className={clsx(styles['form-field'], className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
+type FormFieldWrapperProps<C extends ElementType> = PolyProps<C, FlexVariants>;
+type FormFieldWrapperComponent = <C extends ElementType = 'div'>(
+  props: FormFieldWrapperProps<C>
+) => React.ReactElement | null;
+
+export const FormFieldWrapper: FormFieldWrapperComponent = forwardRef(
+  <C extends ElementType = 'div'>(
+    {
+      cross = 'stretch',
+      flow = 'column',
+      display = 'inline',
+      gap = 'xs',
+      className,
+      ...props
+    }: FormFieldWrapperProps<C>,
+    ref: PolyRef<C>
+  ) => {
+    return (
+      <Flex
+        cross={cross}
+        flow={flow}
+        display={display}
+        gap={gap}
+        className={clsx(styles['form-field'], className)}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
 
 export type FormFieldValidity = {
   validity?: keyof typeof tonesMap;

diff --git a/src/lib/form-field/label.tsx b/src/lib/form-field/label.tsx
@@ -1,4 +1,4 @@
-import { ElementType, forwardRef, ReactNode } from 'react';
+import { ElementType, forwardRef, ReactElement, ReactNode } from 'react';
 import { classed as css } from '@tw-classed/core';
 import { clsx } from 'clsx';
 import { Text } from '../text';
@@ -7,49 +7,53 @@ import { flexCss, FlexVariants } from '../flex/flex';
 
 import styles from './form-field.module.css';
 
-export interface Props extends FlexVariants {
-  label: ReactNode;
-  secondary?: ReactNode;
-  disabled?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-}
+type LabelProps<C extends ElementType> = PolyProps<
+  C,
+  FlexVariants & {
+    label: ReactNode;
+    secondary?: ReactNode;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+  }
+>;
+type LabelComponent = <C extends ElementType = 'label'>(props: LabelProps<C>) => ReactElement | null;
 
-export const Label = forwardRef(function Label<C extends ElementType = 'label'>(
-  {
-    as,
-    label,
-    secondary,
-    disabled,
-    display = 'inline',
-    gap = 'xs',
-    size = 'sm',
-    main,
-    cross,
-    flow,
-    wrap,
-    ...props
-  }: PolyProps<C, Props>,
-  ref: PolyRef<C>
-) {
-  const Component = as || 'label';
-  const textStyle = `label-${size}` as `label-${typeof size}`;
-  return (
-    <Component
-      aria-disabled={disabled}
-      className={clsx(labelCss({ gap, display, main, cross, flow, wrap }), styles.label, props.className)}
-      {...props}
-      ref={ref}
-    >
-      <Text textStyle={textStyle}>{label}</Text>
-      {secondary && (
-        <Text textStyle={textStyle} tone="light">
-          {secondary}
-        </Text>
-      )}
-    </Component>
-  );
-});
+export const Label: LabelComponent = forwardRef(
+  <C extends ElementType = 'label'>(
+    {
+      as,
+      label,
+      secondary,
+      disabled,
+      display = 'inline',
+      gap = 'xs',
+      size = 'sm',
+      main,
+      cross,
+      flow,
+      wrap,
+      ...props
+    }: LabelProps<C>,
+    ref: PolyRef<C>
+  ) => {
+    const Component = as || 'label';
+    const textStyle = `label-${size}` as `label-${typeof size}`;
+    return (
+      <Component
+        aria-disabled={disabled}
+        className={clsx(labelCss({ gap, display, main, cross, flow, wrap }), styles.label, props.className)}
+        {...props}
+        ref={ref}
+      >
+        <Text textStyle={textStyle}>{label}</Text>
+        {secondary && (
+          <Text textStyle={textStyle} tone="light">
+            {secondary}
+          </Text>
+        )}
+      </Component>
+    );
+  }
+);
 
 const labelCss = css(styles.label, flexCss);
-
-Label.displayName = 'Label';
diff --git a/src/lib/heading/heading.tsx b/src/lib/heading/heading.tsx
@@ -1,25 +1,25 @@
-import { forwardRef } from 'react';
+import { ElementType, forwardRef } from 'react';
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { clsx } from 'clsx';
 
 import type { PolyProps, PolyRef } from '../utils/polymorphic';
 
 import styles from './heading.module.css';
 
-export type HeadingVariants = VariantProps<typeof headingCss>;
+type HeadingProps<C extends ElementType = 'h1'> = PolyProps<C, HeadingVariants & { disabled?: boolean }>;
+type HeadingComponent = <C extends ElementType = 'h1'>(props: HeadingProps<C>) => React.ReactElement | null;
 
-interface HeadingProps extends HeadingVariants {}
-
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-export const Heading = forwardRef(function Heading<C extends HeadingElement = 'h1'>(
-  { as, variant = 'default', level = '1', dense = true, className, ...props }: PolyProps<C, HeadingProps>,
-  ref: PolyRef<C>
-) {
-  const Component = as || 'h1';
-  return <Component className={clsx(headingCss({ variant, level, dense }), className)} {...props} ref={ref} />;
-});
+export const Heading: HeadingComponent = forwardRef(
+  <C extends ElementType = 'h1'>(
+    { as, variant = 'default', level = '1', dense = true, className, ...props }: HeadingProps<C>,
+    ref: PolyRef<C>
+  ) => {
+    const Component = as || 'h1';
+    return <Component className={clsx(headingCss({ variant, level, dense }), className)} {...props} ref={ref} />;
+  }
+);
 
+type HeadingVariants = VariantProps<typeof headingCss>;
 const headingCss = css(styles.heading, {
   variants: {
     level: {

diff --git a/src/lib/menu-list/menu-list.module.css b/src/lib/menu-list/menu-list.module.css
@@ -25,7 +25,7 @@
       transition: all 150ms ease-in;
       content: '';
     }
-    &[aria-selected='true'] {
+    &[aria-current='true'] {
       color: theme('colors.primary');
       &:after {
         background-color: currentColor;
@@ -34,7 +34,7 @@
         transform: none;
       }
     }
-    &[aria-selected='false']:after {
+    &[aria-current='false']:after {
       background: transparent;
     }
   }