chore(avatar): 🚚 circular to squared & deps updates

adaptui · Jun 6, 2022 · ba525a2 · ba525a2 · vercel · Jun 6, 2022
1 parent 5a51c9e
commit ba525a2
Show file tree

Hide file tree

Showing 20 changed files with 590 additions and 539 deletions.
diff --git a/package.json b/package.json
@@ -96,8 +96,8 @@
     ]
   },
   "dependencies": {
-    "@react-aria/live-announcer": "^3.0.6",
     "@adaptui/react": "^1.0.0-4",
+    "@react-aria/live-announcer": "^3.1.0",
     "ariakit": "2.0.0-next.29",
     "ariakit-utils": "0.17.0-next.20",
     "tailwind-merge": "^1.2.1"
@@ -111,29 +111,29 @@
     "@babel/preset-env": "7.18.2",
     "@babel/preset-react": "7.17.12",
     "@babel/preset-typescript": "7.17.12",
-    "@commitlint/cli": "17.0.1",
-    "@commitlint/config-conventional": "17.0.0",
+    "@commitlint/cli": "17.0.2",
+    "@commitlint/config-conventional": "17.0.2",
     "@release-it/conventional-changelog": "5.0.0",
     "@size-limit/preset-big-lib": "5.0.5",
-    "@storybook/addon-a11y": "6.5.6",
-    "@storybook/addon-actions": "6.5.6",
-    "@storybook/addon-essentials": "6.5.6",
+    "@storybook/addon-a11y": "6.5.7",
+    "@storybook/addon-actions": "6.5.7",
+    "@storybook/addon-essentials": "6.5.7",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.6",
-    "@storybook/manager-webpack5": "6.5.6",
-    "@storybook/react": "6.5.6",
+    "@storybook/builder-webpack5": "6.5.7",
+    "@storybook/manager-webpack5": "6.5.7",
+    "@storybook/react": "6.5.7",
     "@swc/cli": "0.1.57",
-    "@swc/core": "1.2.196",
+    "@swc/core": "1.2.197",
     "@tailwindcss/forms": "0.5.2",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/react-hooks": "8.0.0",
     "@testing-library/user-event": "14.2.0",
-    "@types/jest": "27.5.1",
+    "@types/jest": "28.1.1",
     "@types/jest-axe": "3.5.3",
-    "@types/node": "17.0.36",
-    "@types/react": "18.0.9",
+    "@types/node": "17.0.40",
+    "@types/react": "18.0.12",
     "@types/react-dom": "18.0.5",
     "@types/tailwindcss": "3.0.10",
     "@types/testing-library__jest-dom": "5.14.3",
@@ -147,7 +147,7 @@
     "chalk": "4.1.2",
     "concurrently": "7.2.1",
     "cross-env": "7.0.3",
-    "eslint": "8.16.0",
+    "eslint": "8.17.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-prettier": "4.0.0",
@@ -160,7 +160,7 @@
     "jest": "28.1.0",
     "jest-axe": "6.0.0",
     "jest-environment-jsdom": "28.1.0",
-    "lint-staged": "12.4.3",
+    "lint-staged": "13.0.0",
     "node-fetch": "2.6.1",
     "outdent": "0.8.0",
     "patch-package": "6.4.7",
@@ -181,11 +181,11 @@
     "sort-package-json": "1.57.0",
     "storybook-addon-preview": "2.2.0",
     "tailwindcss": "3.0.24",
-    "ts-node": "10.8.0",
+    "ts-node": "10.8.1",
     "tsd": "0.20.0",
     "tslib": "2.4.0",
-    "typescript": "4.7.2",
-    "webpack": "5.72.1"
+    "typescript": "4.7.3",
+    "webpack": "5.73.0"
   },
   "peerDependencies": {
     "react": "16.x || 17.x || 18.x",

diff --git a/src/avatar-group/AvatarGroupProps.tsx b/src/avatar-group/AvatarGroupProps.tsx
@@ -9,7 +9,7 @@ import { AvatarGroupWrapperProps } from "./AvatarGroupWrapper";
 
 export const useAvatarGroupProps = ({
   size,
-  circular,
+  squared,
   showRing,
   ringColor,
   max,
@@ -18,7 +18,7 @@ export const useAvatarGroupProps = ({
 }: AvatarGroupProps) => {
   const uiState = useAvatarGroupUIState({
     size,
-    circular,
+    squared,
     showRing,
     ringColor,
     max,

diff --git a/src/avatar-group/AvatarGroupUIState.tsx b/src/avatar-group/AvatarGroupUIState.tsx
@@ -4,7 +4,7 @@ export function useAvatarGroupUIState(
   props: AvatarGroupUIStateProps,
 ): AvatarGroupUIState {
   const {
-    circular = true,
+    squared = false,
     size = "xl",
     showRing = true,
     ringColor = "ring-white",
@@ -13,7 +13,7 @@ export function useAvatarGroupUIState(
 
   return {
     size,
-    circular,
+    squared,
     showRing,
     ringColor,
     max,
@@ -22,12 +22,12 @@ export function useAvatarGroupUIState(
 
 export type AvatarGroupUIState = Pick<
   AvatarUIState,
-  "size" | "circular" | "showRing" | "ringColor" | "max"
+  "size" | "squared" | "showRing" | "ringColor" | "max"
 >;
 
 export type AvatarGroupUIStateProps = Partial<
   Pick<
     AvatarGroupUIState,
-    "size" | "circular" | "showRing" | "ringColor" | "max"
+    "size" | "squared" | "showRing" | "ringColor" | "max"
   >
 >;
diff --git a/src/avatar-group/AvatarGroupWrapper.tsx b/src/avatar-group/AvatarGroupWrapper.tsx
@@ -13,7 +13,7 @@ import { cx } from "../utils";
 import { AvatarGroupUIProps } from "./AvatarGroupProps";
 
 export const useAvatarGroupWrapper = createHook<AvatarGroupWrapperOptions>(
-  ({ size, circular, showRing, ringColor, max, ...props }) => {
+  ({ size, squared, showRing, ringColor, max, ...props }) => {
     const theme = useTheme("avatar");
     const className = cx(
       theme.group.common,

diff --git a/src/avatar-group/stories/AvatarGroupBasic.component.tsx b/src/avatar-group/stories/AvatarGroupBasic.component.tsx
@@ -6,8 +6,12 @@ export type AvatarGroupBasicProps = AvatarGroupProps & {};
 
 export const AvatarGroupBasic: React.FC<AvatarGroupBasicProps> = props => {
   return (
-    <AvatarGroup {...props}>
-      <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
+    <AvatarGroup {...props} squared={true}>
+      <Avatar
+        squared={false}
+        name="Leanne Graham"
+        src="https://i.pravatar.cc/300?img=1"
+      />
       <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
       <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
       <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />

diff --git a/src/avatar-group/stories/AvatarGroupBasic.stories.tsx b/src/avatar-group/stories/AvatarGroupBasic.stories.tsx
@@ -31,11 +31,11 @@ export const MaxCount: Story = {
 };
 
 export const Squared: Story = {
-  args: { size: "xl", circular: false },
+  args: { size: "xl", squared: true },
 };
 
 export const SquaredMaxCount: Story = {
-  args: { size: "xl", circular: false, max: 4 },
+  args: { size: "xl", squared: true, max: 4 },
 };
 
 export const ParentBackgroundMatch: Story = {

diff --git a/src/avatar-group/stories/AvatarGroupIcon.stories.tsx b/src/avatar-group/stories/AvatarGroupIcon.stories.tsx
@@ -31,11 +31,11 @@ export const MaxCount: Story = {
 };
 
 export const Squared: Story = {
-  args: { size: "xl", circular: false },
+  args: { size: "xl", squared: true },
 };
 
 export const SquaredMaxCount: Story = {
-  args: { size: "xl", circular: false, max: 4 },
+  args: { size: "xl", squared: true, max: 4 },
 };
 
 export const ParentBackgroundMatch: Story = {

diff --git a/src/avatar-group/stories/AvatarGroupName.stories.tsx b/src/avatar-group/stories/AvatarGroupName.stories.tsx
@@ -31,11 +31,11 @@ export const MaxCount: Story = {
 };
 
 export const Squared: Story = {
-  args: { size: "xl", circular: false },
+  args: { size: "xl", squared: true },
 };
 
 export const SquaredMaxCount: Story = {
-  args: { size: "xl", circular: false, max: 4 },
+  args: { size: "xl", squared: true, max: 4 },
 };
 
 export const ParentBackgroundMatch: Story = {

diff --git a/src/avatar-group/stories/AvatarGroupStack.stories.tsx b/src/avatar-group/stories/AvatarGroupStack.stories.tsx
@@ -29,11 +29,11 @@ export const MaxCount: Story = {
 };
 
 export const Squared: Story = {
-  args: { circular: false },
+  args: { squared: true },
 };
 
 export const SquaredMaxCount: Story = {
-  args: { circular: false, max: 4 },
+  args: { squared: true, max: 4 },
 };
 
 export const ParentBackgroundMatch: Story = {

diff --git a/src/avatar/AvatarIcon.tsx b/src/avatar/AvatarIcon.tsx
@@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";
 
 export const useAvatarIcon = createHook<AvatarIconOptions>(
   ({
-    circular,
+    squared,
     size,
     icon,
     name,

diff --git a/src/avatar/AvatarImage.tsx b/src/avatar/AvatarImage.tsx
@@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";
 
 export const useAvatarImage = createHook<AvatarImageOptions>(
   ({
-    circular,
+    squared,
     size,
     icon,
     name,
@@ -32,7 +32,7 @@ export const useAvatarImage = createHook<AvatarImageOptions>(
     const theme = useTheme("avatar");
     const className = cx(
       theme.image.common,
-      circular ? theme.image.circular : "",
+      !squared ? theme.image.circular : "",
       props.className,
     );
 

diff --git a/src/avatar/AvatarInitials.tsx b/src/avatar/AvatarInitials.tsx
@@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";
 
 export const useAvatarInitials = createHook<AvatarInitialsOptions>(
   ({
-    circular,
+    squared,
     size,
     icon,
     name,

diff --git a/src/avatar/AvatarProps.tsx b/src/avatar/AvatarProps.tsx
@@ -22,7 +22,7 @@ const componentMap = {
 };
 
 export const useAvatarProps = ({
-  circular,
+  squared,
   size,
   icon,
   statusIndicators,
@@ -44,7 +44,7 @@ export const useAvatarProps = ({
   ...restProps
 }: AvatarProps) => {
   const uiState = useAvatarUIState({
-    circular,
+    squared,
     size,
     icon,
     statusIndicators,

diff --git a/src/avatar/AvatarStatusIndicator.tsx b/src/avatar/AvatarStatusIndicator.tsx
@@ -14,7 +14,7 @@ import { AvatarUIProps } from "./AvatarProps";
 export const useAvatarStatusIndicator =
   createHook<AvatarStatusIndicatorOptions>(
     ({
-      circular,
+      squared,
       size,
       icon,
       name,

diff --git a/src/avatar/AvatarUIState.tsx b/src/avatar/AvatarUIState.tsx
@@ -9,7 +9,7 @@ import { AvatarUIProps } from "./AvatarProps";
 
 export function useAvatarUIState(props: AvatarUIStateProps): AvatarUIState {
   const {
-    circular = true,
+    squared = false,
     size = "xl",
     icon = <UserIcon />,
     statusIndicators = AvatarDefaultStatusIndicators,
@@ -33,7 +33,7 @@ export function useAvatarUIState(props: AvatarUIStateProps): AvatarUIState {
   const { status: imageStatus, showFallback } = useImage(props);
 
   return {
-    circular: contextState?.circular || circular,
+    squared: contextState?.squared || squared,
     size: contextState?.size || size,
     icon,
     name,
@@ -57,7 +57,7 @@ export type AvatarUIStateProps = UseImageProps &
       | "size"
       | "icon"
       | "name"
-      | "circular"
+      | "squared"
       | "status"
       | "statusIndicators"
       | "showRing"
@@ -77,7 +77,7 @@ export type AvatarUIState = {
    *
    * @default true
    */
-  circular: boolean;
+  squared: boolean;
 
   /**
    * How large should avatar be?

diff --git a/src/avatar/AvatarWrapper.tsx b/src/avatar/AvatarWrapper.tsx
@@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";
 
 export const useAvatarWrapper = createHook<AvatarWrapperOptions>(
   ({
-    circular,
+    squared,
     size,
     icon,
     name,
@@ -32,7 +32,7 @@ export const useAvatarWrapper = createHook<AvatarWrapperOptions>(
     const theme = useTheme("avatar");
     const className = cx(
       theme.wrapper.common,
-      circular ? theme.wrapper.circular : "",
+      !squared ? theme.wrapper.circular : "",
       size ? theme.wrapper.size[size] : "",
       size && showRing ? theme.wrapper.border.size[size] : "",
       showRing && ringColor ? ringColor : "",

diff --git a/src/avatar/stories/AvatarBasic.stories.tsx b/src/avatar/stories/AvatarBasic.stories.tsx
@@ -28,7 +28,7 @@ export const Default: Story = {
 };
 
 export const Squared: Story = {
-  args: { size: "xl", circular: false },
+  args: { size: "xl", squared: true },
 };
 
 export const Name: Story = {
@@ -69,7 +69,7 @@ export const ActiveSquaredStatus: Story = {
     size: "xl",
     src: "https://i.pravatar.cc/300??img=61",
     status: "active",
-    circular: false,
+    squared: true,
   },
 };
 
@@ -86,7 +86,7 @@ export const SleepSquaredStatus: Story = {
     size: "xl",
     src: "https://i.pravatar.cc/300??img=61",
     status: "sleep",
-    circular: false,
+    squared: true,
   },
 };
 
@@ -103,7 +103,7 @@ export const AwaySquaredStatus: Story = {
     size: "xl",
     src: "https://i.pravatar.cc/300??img=61",
     status: "away",
-    circular: false,
+    squared: true,
   },
 };
 
@@ -120,7 +120,7 @@ export const TypingSquaredStatus: Story = {
     size: "xl",
     src: "https://i.pravatar.cc/300??img=61",
     status: "typing",
-    circular: false,
+    squared: true,
   },
 };
 
@@ -137,7 +137,7 @@ export const OrgSquaredStatus: Story = {
     size: "xl",
     src: "https://i.pravatar.cc/300??img=61",
     status: "org",
-    circular: false,
+    squared: true,
   },
 };