Skip to content

Commit

Permalink
chore(avatar): 🚚 circular to squared & deps updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@navin-moorthy
navin-moorthy committed Jun 6, 2022
1 parent 5a51c9e commit ba525a2
Show file tree
Hide file tree
Showing 20 changed files with 590 additions and 539 deletions.
36 changes: 18 additions & 18 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/avatar-group/AvatarGroupProps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { AvatarGroupWrapperProps } from "./AvatarGroupWrapper";

export const useAvatarGroupProps = ({
size,
circular,
squared,
showRing,
ringColor,
max,
Expand All @@ -18,7 +18,7 @@ export const useAvatarGroupProps = ({
}: AvatarGroupProps) => {
const uiState = useAvatarGroupUIState({
size,
circular,
squared,
showRing,
ringColor,
max,
Expand Down
8 changes: 4 additions & 4 deletions src/avatar-group/AvatarGroupUIState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function useAvatarGroupUIState(
props: AvatarGroupUIStateProps,
): AvatarGroupUIState {
const {
circular = true,
squared = false,
size = "xl",
showRing = true,
ringColor = "ring-white",
Expand All @@ -13,7 +13,7 @@ export function useAvatarGroupUIState(

return {
size,
circular,
squared,
showRing,
ringColor,
max,
Expand All @@ -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"
>
>;
2 changes: 1 addition & 1 deletion src/avatar-group/AvatarGroupWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
8 changes: 6 additions & 2 deletions src/avatar-group/stories/AvatarGroupBasic.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
4 changes: 2 additions & 2 deletions src/avatar-group/stories/AvatarGroupBasic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 2 additions & 2 deletions src/avatar-group/stories/AvatarGroupIcon.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 2 additions & 2 deletions src/avatar-group/stories/AvatarGroupName.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 2 additions & 2 deletions src/avatar-group/stories/AvatarGroupStack.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion src/avatar/AvatarIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";

export const useAvatarIcon = createHook<AvatarIconOptions>(
({
circular,
squared,
size,
icon,
name,
Expand Down
4 changes: 2 additions & 2 deletions src/avatar/AvatarImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";

export const useAvatarImage = createHook<AvatarImageOptions>(
({
circular,
squared,
size,
icon,
name,
Expand All @@ -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,
);

Expand Down
2 changes: 1 addition & 1 deletion src/avatar/AvatarInitials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";

export const useAvatarInitials = createHook<AvatarInitialsOptions>(
({
circular,
squared,
size,
icon,
name,
Expand Down
4 changes: 2 additions & 2 deletions src/avatar/AvatarProps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const componentMap = {
};

export const useAvatarProps = ({
circular,
squared,
size,
icon,
statusIndicators,
Expand All @@ -44,7 +44,7 @@ export const useAvatarProps = ({
...restProps
}: AvatarProps) => {
const uiState = useAvatarUIState({
circular,
squared,
size,
icon,
statusIndicators,
Expand Down
2 changes: 1 addition & 1 deletion src/avatar/AvatarStatusIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { AvatarUIProps } from "./AvatarProps";
export const useAvatarStatusIndicator =
createHook<AvatarStatusIndicatorOptions>(
({
circular,
squared,
size,
icon,
name,
Expand Down
8 changes: 4 additions & 4 deletions src/avatar/AvatarUIState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -57,7 +57,7 @@ export type AvatarUIStateProps = UseImageProps &
| "size"
| "icon"
| "name"
| "circular"
| "squared"
| "status"
| "statusIndicators"
| "showRing"
Expand All @@ -77,7 +77,7 @@ export type AvatarUIState = {
*
* @default true
*/
circular: boolean;
squared: boolean;

/**
* How large should avatar be?
Expand Down
4 changes: 2 additions & 2 deletions src/avatar/AvatarWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { AvatarUIProps } from "./AvatarProps";

export const useAvatarWrapper = createHook<AvatarWrapperOptions>(
({
circular,
squared,
size,
icon,
name,
Expand All @@ -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 : "",
Expand Down
12 changes: 6 additions & 6 deletions src/avatar/stories/AvatarBasic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -69,7 +69,7 @@ export const ActiveSquaredStatus: Story = {
size: "xl",
src: "https://i.pravatar.cc/300??img=61",
status: "active",
circular: false,
squared: true,
},
};

Expand All @@ -86,7 +86,7 @@ export const SleepSquaredStatus: Story = {
size: "xl",
src: "https://i.pravatar.cc/300??img=61",
status: "sleep",
circular: false,
squared: true,
},
};

Expand All @@ -103,7 +103,7 @@ export const AwaySquaredStatus: Story = {
size: "xl",
src: "https://i.pravatar.cc/300??img=61",
status: "away",
circular: false,
squared: true,
},
};

Expand All @@ -120,7 +120,7 @@ export const TypingSquaredStatus: Story = {
size: "xl",
src: "https://i.pravatar.cc/300??img=61",
status: "typing",
circular: false,
squared: true,
},
};

Expand All @@ -137,7 +137,7 @@ export const OrgSquaredStatus: Story = {
size: "xl",
src: "https://i.pravatar.cc/300??img=61",
status: "org",
circular: false,
squared: true,
},
};

Expand Down
Loading

1 comment on commit ba525a2

@vercel
Copy link

@vercel vercel bot commented on ba525a2 Jun 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-tailwind – ./

react-tailwind-git-main-timelessco.vercel.app
adaptui-react-tailwind.vercel.app
react-tailwind-timelessco.vercel.app

Please sign in to comment.