Skip to content

Commit

Permalink
refactor(comps): ♻️ update syntax for v2 ariakit (#297)
Browse files Browse the repository at this point in the history
  • Loading branch information
@navin-moorthy
navin-moorthy authored May 25, 2022
1 parent 8515ad4 commit bfabf13
Show file tree
Hide file tree
Showing 284 changed files with 7,594 additions and 8,926 deletions.
68 changes: 35 additions & 33 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"boot": "concurrently \"yarn keys\" \"yarn previews\"",
"keys": "node scripts/generateKeys",
"previews": "node scripts/create-previews.js",
"storybook": "start-storybook -p 6006",
"storybook": "yarn previews && start-storybook -p 6006",
"test": "jest --config ./jest.config.ts --no-cache",
"lint": "eslint --color --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "eslint --color --ext .js,.jsx,.ts,.tsx . --fix",
Expand Down Expand Up @@ -98,25 +98,27 @@
]
},
"dependencies": {
"@react-aria/live-announcer": "^3.0.2",
"@renderlesskit/react": "^0.11.0",
"@react-aria/live-announcer": "^3.0.6",
"@renderlesskit/react": "^1.0.0-2",
"ariakit": "^2.0.0-next.28",
"ariakit-utils": "^0.17.0-next.19",
"reakit": "^1.3.11",
"reakit-system": "^0.15.2",
"reakit-utils": "^0.15.2",
"reakit-warning": "^0.6.2",
"tailwind-merge": "^1.2.0"
"tailwind-merge": "^1.2.1"
},
"devDependencies": {
"@babel/cli": "7.17.10",
"@babel/core": "7.17.10",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-private-methods": "7.16.11",
"@babel/plugin-proposal-private-property-in-object": "7.16.7",
"@babel/preset-env": "7.17.10",
"@babel/preset-react": "7.16.7",
"@babel/preset-typescript": "7.16.7",
"@commitlint/cli": "16.2.4",
"@commitlint/config-conventional": "16.2.4",
"@babel/core": "7.18.0",
"@babel/plugin-proposal-class-properties": "7.17.12",
"@babel/plugin-proposal-private-methods": "7.17.12",
"@babel/plugin-proposal-private-property-in-object": "7.17.12",
"@babel/preset-env": "7.18.0",
"@babel/preset-react": "7.17.12",
"@babel/preset-typescript": "7.17.12",
"@commitlint/cli": "17.0.1",
"@commitlint/config-conventional": "17.0.0",
"@release-it/conventional-changelog": "5.0.0",
"@size-limit/preset-big-lib": "5.0.5",
"@storybook/addon-a11y": "6.4.22",
Expand All @@ -127,59 +129,59 @@
"@storybook/manager-webpack5": "6.4.22",
"@storybook/react": "6.4.22",
"@swc/cli": "0.1.57",
"@swc/core": "1.2.181",
"@tailwindcss/forms": "0.5.1",
"@swc/core": "1.2.192",
"@tailwindcss/forms": "0.5.2",
"@testing-library/dom": "8.13.0",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "13.2.0",
"@testing-library/react-hooks": "8.0.0",
"@testing-library/user-event": "14.1.1",
"@types/jest": "27.5.0",
"@testing-library/user-event": "14.2.0",
"@types/jest": "27.5.1",
"@types/jest-axe": "3.5.3",
"@types/node": "17.0.18",
"@types/node": "17.0.35",
"@types/react": "18.0.9",
"@types/react-dom": "18.0.3",
"@types/react-dom": "18.0.5",
"@types/tailwindcss": "3.0.10",
"@types/testing-library__jest-dom": "5.14.3",
"all-contributors-cli": "6.20.0",
"autoprefixer": "10.4.7",
"axe-core": "4.4.1",
"axe-core": "4.4.2",
"babel-jest": "28.1.0",
"babel-loader": "8.2.5",
"babel-plugin-jsx-remove-data-test-id": "3.0.0",
"browserlist": "1.0.1",
"chalk": "4.1.2",
"concurrently": "7.1.0",
"concurrently": "7.2.1",
"cross-env": "7.0.3",
"eslint": "8.15.0",
"eslint": "8.16.0",
"eslint-config-prettier": "8.5.0",
"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.11",
"eslint-plugin-storybook": "0.5.12",
"focus-visible": "5.2.0",
"fs-extra": "10.1.0",
"gacp": "3.0.1",
"gacp": "3.0.2",
"glob-fs": "0.1.7",
"husky": "8.0.1",
"jest": "28.1.0",
"jest-axe": "6.0.0",
"jest-environment-jsdom": "^28.1.0",
"lint-staged": "12.4.1",
"jest-environment-jsdom": "28.1.0",
"lint-staged": "12.4.2",
"lodash": "4.17.21",
"node-fetch": "2.6.1",
"outdent": "0.8.0",
"patch-package": "6.4.7",
"pinst": "3.0.0",
"postcss": "8.4.13",
"postcss": "8.4.14",
"postcss-cli": "9.1.0",
"postcss-focus-visible": "6.0.4",
"postcss-selector-parser": "6.0.10",
"prettier": "2.6.2",
"prettier-plugin-tailwindcss": "0.1.10",
"prettier-plugin-tailwindcss": "0.1.11",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-hook-form": "7.30.0",
"react-hook-form": "7.31.2",
"react-icons": "4.3.1",
"reakit-test-utils": "0.15.2",
"release-it": "15.0.0",
Expand All @@ -188,12 +190,12 @@
"sort-package-json": "1.57.0",
"storybook-addon-preview": "2.2.0",
"tailwindcss": "3.0.24",
"ts-morph": "14.0.0",
"ts-node": "10.7.0",
"ts-morph": "15.0.0",
"ts-node": "10.8.0",
"tsd": "0.20.0",
"tslib": "2.4.0",
"typescript": "4.6.4",
"webpack": "5.72.0"
"typescript": "4.7.2",
"webpack": "5.72.1"
},
"peerDependencies": {
"react": "16.x || 17.x || 18.x",
Expand Down
22 changes: 6 additions & 16 deletions src/avatar-group/AvatarGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
import { Avatar } from "../avatar";
import { forwardRefWithAs } from "../utils";

import { useAvatarGroupProps } from "./AvatarGroupProps";
import {
AvatarGroupContextProvider,
AvatarGroupInitialState,
} from "./AvatarGroupState";
import {
AvatarGroupWrapper,
AvatarGroupWrapperHTMLProps,
} from "./AvatarGroupWrapper";

export type AvatarGroupOwnProps = AvatarGroupWrapperHTMLProps;

export type AvatarGroupProps = AvatarGroupInitialState & AvatarGroupOwnProps;
import { AvatarGroupContextProvider } from "./__utils";
import { AvatarGroupProps, useAvatarGroupProps } from "./AvatarGroupProps";
import { AvatarGroupWrapper } from "./AvatarGroupWrapper";

export const AvatarGroup = forwardRefWithAs<
AvatarGroupProps,
HTMLDivElement,
"div"
>((props, ref) => {
const { childrenWithinMax, excessChildrenCount, state, context, ...rest } =
const { childrenWithinMax, excessChildrenCount, uiProps, wrapperProps } =
useAvatarGroupProps(props);

return (
<AvatarGroupWrapper ref={ref} {...state} {...rest}>
<AvatarGroupContextProvider {...context}>
<AvatarGroupWrapper ref={ref} {...uiProps} {...wrapperProps}>
<AvatarGroupContextProvider {...uiProps}>
{childrenWithinMax}
{excessChildrenCount > 0 ? (
<Avatar
Expand Down
72 changes: 42 additions & 30 deletions src/avatar-group/AvatarGroupProps.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import { getValidChildren, isUndefined, splitProps } from "../utils";
import { getValidChildren, RenderProp } from "../utils";

import { USE_AVATAR_GROUP_STATE_KEYS } from "./__keys";
import { AvatarGroupOwnProps, AvatarGroupProps } from "./AvatarGroup";
import {
AvatarGroupInitialState,
useAvatarGroupState,
} from "./AvatarGroupState";

export const useAvatarGroupStateSplit = (props: AvatarGroupProps) => {
const [stateProps, GroupProps] = splitProps(
props,
USE_AVATAR_GROUP_STATE_KEYS,
) as [AvatarGroupInitialState, AvatarGroupOwnProps];
const state = useAvatarGroupState(stateProps);

return [state, GroupProps, stateProps] as const;
};

export const useAvatarGroupProps = (
props: React.PropsWithChildren<AvatarGroupProps>,
) => {
const [state, groupProps] = useAvatarGroupStateSplit(props);
const { children, ...restProps } = groupProps;
const { max, ...restState } = state;
AvatarGroupUIState,
AvatarGroupUIStateProps,
useAvatarGroupUIState,
} from "./AvatarGroupUIState";
import { AvatarGroupWrapperProps } from "./AvatarGroupWrapper";

export const useAvatarGroupProps = ({
size,
circular,
showRing,
ringColor,
max,
children,
...restProps
}: AvatarGroupProps) => {
const uiState = useAvatarGroupUIState({
size,
circular,
showRing,
ringColor,
max,
});

/**
* Check if all the children are valid React components.
Expand All @@ -32,20 +32,32 @@ export const useAvatarGroupProps = (
/**
* Get the avatars within the max
*/
const childrenWithinMax = isUndefined(max)
? validChildren
: validChildren.slice(0, max);
const childrenWithinMax =
max == null ? validChildren : validChildren.slice(0, max);

/**
* Get the remaining avatar count
*/
const excessChildrenCount = isUndefined(max) ? 0 : validChildren.length - max;
const excessChildrenCount = max == null ? 0 : validChildren.length - max;

return {
state,
uiProps: uiState,
childrenWithinMax,
excessChildrenCount,
context: restState,
...restProps,
wrapperProps: { ...restProps },
};
};

export type AvatarGroupUIProps = AvatarGroupUIState;

export type AvatarGroupProps = Omit<AvatarGroupWrapperProps, "children"> &
AvatarGroupUIStateProps & {
children?: RenderProp<AvatarGroupUIProps>;
};

export type AvatarGroupPropsReturn = {
uiProps: AvatarGroupUIProps;
childrenWithinMax: React.ReactNode[];
excessChildrenCount: number;
wrapperProps: Omit<AvatarGroupWrapperProps, "children">;
};
51 changes: 0 additions & 51 deletions src/avatar-group/AvatarGroupState.tsx
View file

This file was deleted.

33 changes: 33 additions & 0 deletions src/avatar-group/AvatarGroupUIState.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { AvatarUIState } from "../avatar";

export function useAvatarGroupUIState(
props: AvatarGroupUIStateProps,
): AvatarGroupUIState {
const {
circular = true,
size = "xl",
showRing = true,
ringColor = "ring-white",
max,
} = props;

return {
size,
circular,
showRing,
ringColor,
max,
};
}

export type AvatarGroupUIState = Pick<
AvatarUIState,
"size" | "circular" | "showRing" | "ringColor" | "max"
>;

export type AvatarGroupUIStateProps = Partial<
Pick<
AvatarGroupUIState,
"size" | "circular" | "showRing" | "ringColor" | "max"
>
>;
Loading

1 comment on commit bfabf13

@vercel
Copy link

@vercel vercel bot commented on bfabf13 May 25, 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:

renderlesskit-react-tailwind – ./

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

Please sign in to comment.