Merge pull request #322 from adaptui/refactoring

Author: navin-moorthy

.storybook/utils.tsx

@@ -150,7 +150,7 @@ const NEXT_JS_CODESANDBOX: CodeSandboxTemplate = (
       "README.md":
         "# next-tailwind-jit\n\n[View on Vercel](https://next-tailwind-jit.vercel.app/)\n\n[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/next-tailwind-jit-evzkdg)\n",
       "adaptui.config.js":
-        'import { extendTheme } from "@adaptui/react-tailwind";\n\nexport const theme = extendTheme({\n  // This only affected the Storybook, doesn\'t go or merge when used this config as preset\n  extend: {\n    button: {\n      variant: {\n        default: {\n          tertiary: "bg-purple-600 text-white",\n        },\n      },\n      size: {\n        default: {\n          xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",\n        },\n      },\n    },\n  },\n});\n\nexport default theme;\n',
+        'import { extendTheme } from "@adaptui/react-tailwind";\n\nexport const theme = extendTheme({\n  // This only affected the Storybook, doesn\'t go or merge when used this config as preset\n  extend: {\n    button: {\n      variant: {\n        default: {\n          tertiary: "bg-purple-600 text-white-900",\n        },\n      },\n      size: {\n        default: {\n          xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",\n        },\n      },\n    },\n  },\n});\n\nexport default theme;\n',
       "tailwind.config.js":
         'module.exports = {\n  presets: [require("@adaptui/react-tailwind/preset")],\n  content: [\n    "./components/**/*",\n    "./pages/**/*",\n    "./adaptui.config.ts",\n    "node_modules/@adaptui/react-tailwind/**/*",\n  ],\n  theme: {},\n  variants: {},\n  plugins: [],\n};\n',
       ...files,
@@ -207,7 +207,7 @@ const NEXT_TS_CODESANDBOX: CodeSandboxTemplate = (
       "README.md":
         "# next-tailwind-jit-ts\n\n[View on Vercel](https://next-tailwind-jit-ts.vercel.app/)\n\n[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/github-jntzof)\n",
       "adaptui.config.js":
-        'import { extendTheme } from "@adaptui/react-tailwind";\n\nexport const theme = extendTheme({\n  // This only affected the Storybook, doesn\'t go or merge when used this config as preset\n  extend: {\n    button: {\n      variant: {\n        default: {\n          tertiary: "bg-purple-600 text-white",\n        },\n      },\n      size: {\n        default: {\n          xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",\n        },\n      },\n    },\n  },\n});\n\nexport default theme;\n',
+        'import { extendTheme } from "@adaptui/react-tailwind";\n\nexport const theme = extendTheme({\n  // This only affected the Storybook, doesn\'t go or merge when used this config as preset\n  extend: {\n    button: {\n      variant: {\n        default: {\n          tertiary: "bg-purple-600 text-white-900",\n        },\n      },\n      size: {\n        default: {\n          xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",\n        },\n      },\n    },\n  },\n});\n\nexport default theme;\n',
       "tailwind.config.js":
         'module.exports = {\n  presets: [require("@adaptui/react-tailwind/preset")],\n  content: [\n    "./components/**/*",\n    "./pages/**/*",\n    "./adaptui.config.ts",\n    "node_modules/@adaptui/react-tailwind/**/*",\n  ],\n  theme: {},\n  variants: {},\n  plugins: [],\n};\n',
       "tsconfig.json":

adaptui.config.ts

@@ -6,7 +6,7 @@ export const theme = extendTheme({
     button: {
       themeColor: {
         base: {
-          tertiary: { default: "bg-purple-600 text-white" },
+          tertiary: { default: "bg-purple-600 text-white-900" },
         },
       },
       size: {

package.json

@@ -98,8 +98,8 @@
   "dependencies": {
     "@adaptui/react": "^1.0.0-alpha.7",
     "@react-aria/live-announcer": "^3.1.0",
-    "ariakit": "2.0.0-next.30",
-    "ariakit-utils": "0.17.0-next.21",
+    "ariakit": "2.0.0-next.31",
+    "ariakit-utils": "0.17.0-next.22",
     "tailwind-merge": "^1.3.0"
   },
   "devDependencies": {
@@ -111,8 +111,8 @@
     "@babel/preset-env": "7.18.2",
     "@babel/preset-react": "7.17.12",
     "@babel/preset-typescript": "7.17.12",
-    "@commitlint/cli": "17.0.2",
-    "@commitlint/config-conventional": "17.0.2",
+    "@commitlint/cli": "17.0.3",
+    "@commitlint/config-conventional": "17.0.3",
     "@release-it/conventional-changelog": "5.0.0",
     "@size-limit/preset-big-lib": "5.0.5",
     "@storybook/addon-a11y": "6.5.9",
@@ -123,19 +123,19 @@
     "@storybook/manager-webpack5": "6.5.9",
     "@storybook/react": "6.5.9",
     "@swc/cli": "0.1.57",
-    "@swc/core": "1.2.204",
+    "@swc/core": "1.2.205",
     "@tailwindcss/forms": "0.5.2",
     "@testing-library/dom": "8.14.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.2.1",
-    "@types/jest": "28.1.2",
+    "@types/jest": "28.1.3",
     "@types/jest-axe": "3.5.4",
     "@types/node": "18.0.0",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
-    "@types/testing-library__jest-dom": "5.14.4",
+    "@types/testing-library__jest-dom": "5.14.5",
     "all-contributors-cli": "6.20.0",
     "autoprefixer": "10.4.7",
     "axe-core": "4.4.2",
@@ -151,15 +151,15 @@
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-storybook": "0.5.12",
+    "eslint-plugin-storybook": "0.5.13",
     "focus-visible": "5.2.0",
     "gacp": "3.0.2",
     "glob-fs": "0.1.7",
     "husky": "8.0.1",
     "jest": "28.1.1",
     "jest-axe": "6.0.0",
     "jest-environment-jsdom": "28.1.1",
-    "lint-staged": "13.0.2",
+    "lint-staged": "13.0.3",
     "node-fetch": "2.6.7",
     "outdent": "0.8.0",
     "patch-package": "6.4.7",
@@ -172,14 +172,14 @@
     "prettier-plugin-tailwindcss": "0.1.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.32.2",
+    "react-hook-form": "7.33.0",
     "react-icons": "4.4.0",
-    "release-it": "15.0.0",
+    "release-it": "15.1.0",
     "rimraf": "3.0.2",
     "size-limit": "5.0.5",
     "sort-package-json": "1.57.0",
     "storybook-addon-preview": "2.2.0",
-    "tailwindcss": "3.1.3",
+    "tailwindcss": "3.1.4",
     "ts-node": "10.8.1",
     "tslib": "2.4.0",
     "typescript": "4.7.4",

preset.js

@@ -72,6 +72,8 @@ module.exports = {
         ...defaultTheme.spacing,
       },
       boxShadow: {
+        DEFAULT:
+          "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1)",
         sm: "0px 1px 2px rgba(0, 0, 0, 0.05)",
         csm: "0px 0px 1px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.15)",
         lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)",

scripts/generateCsb.js

@@ -106,7 +106,7 @@ const getSandboxContents = (files, extraDeps) => {
               button: {
                 variant: {
                   default: {
-                    tertiary: "bg-purple-600 text-white",
+                    tertiary: "bg-purple-600 text-white-900",
                   },
                 },
                 size: {

src/avatar-group/AvatarGroupWrapper.tsx

@@ -6,23 +6,22 @@ import {
 } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
-import { BoxOptions, useBox } from "../box";
+import { BoxOptions } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { tcm } from "../utils";
 
 import { AvatarGroupUIProps } from "./AvatarGroupProps";
 
 export const useAvatarGroupWrapper = createHook<AvatarGroupWrapperOptions>(
   ({ size, squared, showRing, ringColor, max, ...props }) => {
     const theme = useTheme("avatar");
-    const className = cx(
+    const className = tcm(
       theme.group.base,
       size ? theme.group.size[size] : "",
       props.className,
     );
 
     props = { "aria-label": "avatar group", ...props, className };
-    props = useBox(props);
     props = useGroup(props);
 
     return props;

src/avatar/AvatarDefaultStatusIndicators.tsx

@@ -1,5 +1,3 @@
-import { runIfFn } from "@chakra-ui/utils";
-
 import {
   ActiveStatusIcon,
   AwayStatusIcon,
@@ -13,18 +11,19 @@ import { passProps, tcm } from "../utils";
 
 import { AvatarUIProps } from "./AvatarProps";
 
-export const AvatarDefaultStatusIndicators = (props: AvatarUIProps) => {
-  const { size, status, parentsBackground } = props;
+export const AvatarDefaultStatusIndicators: AvatarUIProps["statusIndicators"] =
+  props => {
+    const { size, status, parentsBackground } = props;
 
-  const theme = useTheme("avatar");
-  const className = tcm(
-    theme.statusIndicators[status].base,
-    theme.statusIndicators[status].size[size],
-    ...parentsBackground,
-  );
+    const theme = useTheme("avatar");
+    const className = tcm(
+      theme.statusIndicators[status].base,
+      theme.statusIndicators[status].size[size],
+      ...parentsBackground,
+    );
 
-  return passProps(runIfFn(<StatusIndicators {...props} />), { className });
-};
+    return passProps(<StatusIndicators {...props} />, props, { className });
+  };
 
 export type StatusIndicatorsProps = AvatarUIProps & {
   className?: string;

src/avatar/AvatarProps.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import { getComponentProps, RenderProp, runIfFn, withIconA11y } from "../utils";
+import { getComponentProps, RenderProp, withIconA11y } from "../utils";
 
 import { AvatarIconProps } from "./AvatarIcon";
 import { AvatarImageProps } from "./AvatarImage";
@@ -77,41 +77,66 @@ export const useAvatarProps = ({
     statusIndicators: _statusIndicators,
   };
 
-  const wrapperProps: AvatarWrapperProps = {
-    ...uiProps,
-    ...restProps,
-    ...componentProps.wrapperProps,
-  };
+  const wrapperProps: AvatarWrapperProps = useMemo(
+    () => ({
+      ...uiProps,
+      ...restProps,
+      ...componentProps.wrapperProps,
+    }),
+    [componentProps.wrapperProps, restProps, uiProps],
+  );
 
-  const iconProps: AvatarIconProps = {
-    ...uiProps,
-    ...componentProps.iconProps,
-    children: withIconA11y(runIfFn(uiProps.icon, uiProps)),
-  };
+  const iconProps: AvatarIconProps = useMemo(
+    () => ({
+      ...uiProps,
+      ...componentProps.iconProps,
+      children: withIconA11y(uiProps.icon, uiProps),
+    }),
+    [componentProps.iconProps, uiProps],
+  );
 
-  const initialsProps: AvatarInitialsProps = {
-    ...uiProps,
-    ...componentProps.initialsProps,
-    children: uiProps.initials,
-  };
+  const initialsProps: AvatarInitialsProps = useMemo(
+    () => ({
+      ...uiProps,
+      ...componentProps.initialsProps,
+      children: uiProps.initials,
+    }),
+    [componentProps.initialsProps, uiProps],
+  );
 
-  const imageProps: AvatarImageProps = {
-    ...uiProps,
-    src,
-    srcSet,
-    sizes,
-    loading,
-    crossOrigin,
-    onLoad,
-    onError,
-    ...componentProps.imageProps,
-  };
+  const imageProps: AvatarImageProps = useMemo(
+    () => ({
+      ...uiProps,
+      src,
+      srcSet,
+      sizes,
+      loading,
+      crossOrigin,
+      onLoad,
+      onError,
+      ...componentProps.imageProps,
+    }),
+    [
+      componentProps.imageProps,
+      crossOrigin,
+      loading,
+      onError,
+      onLoad,
+      sizes,
+      src,
+      srcSet,
+      uiProps,
+    ],
+  );
 
-  const statusIndicatorProps: AvatarStatusIndicatorProps = {
-    ...uiProps,
-    ...componentProps.statusIndicatorProps,
-    children: withIconA11y(runIfFn(uiProps.statusIndicators, uiProps)),
-  };
+  const statusIndicatorProps: AvatarStatusIndicatorProps = useMemo(
+    () => ({
+      ...uiProps,
+      ...componentProps.statusIndicatorProps,
+      children: withIconA11y(uiProps.statusIndicators, uiProps),
+    }),
+    [componentProps.statusIndicatorProps, uiProps],
+  );
 
   return {
     uiProps,

src/avatar/AvatarUIState.tsx

@@ -18,7 +18,7 @@ export function useAvatarUIState(props: AvatarUIStateProps): AvatarUIState {
     parentsBackground = ["bg-white-900", "ring-white-900"],
     getInitialsFromName = getInitialsFromNameDefault,
     showRing = false,
-    ringColor = "ring-white",
+    ringColor = "ring-white-900",
   } = props;
 
   const initials = getInitialsFromName(name, size);
@@ -73,7 +73,7 @@ export type AvatarUIStateProps = UseImageProps &
 
 export type AvatarUIState = {
   /**
-   * If `true`, Avatar looks like a round.
+   * If `true`, Avatar looks like a squared.
    *
    * @default true
    */
@@ -127,7 +127,7 @@ export type AvatarUIState = {
   /**
    * StatusIndicator's Background Color & StatusIndicator Ring Color.
    *
-   * @default ["bg-white", "ring-white"]"
+   * @default ["bg-white-900", "ring-white-900"]"
    */
   parentsBackground: string[];
 
@@ -143,7 +143,7 @@ export type AvatarUIState = {
   /**
    * Color of the `border` to match it's parent background.
    *
-   * @default ring-white
+   * @default ring-white-900
    */
   ringColor: string;
 

src/avatar/stories/AvatarBasic.stories.tsx

@@ -68,7 +68,7 @@ export const FallbackIcon: Story = {
     size: "xl",
     src: "https://i.pravatar.c/300??img=61",
     icon: <CircledCheckIcon />,
-    onError: () => console.log("Provide a valid src url"),
+    onError: () => console.warn("Provide a valid src url"),
   },
 };