Skip to content

Commit

Permalink
chore(deps): ⬆️ update dev dependencies (minor) (#277)
Browse files Browse the repository at this point in the history 
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Navin Moorthy <navin007.a@gmail.com>
  • Loading branch information
@renovate @renovate-bot @navin-moorthy
3 people committed Nov 26, 2021
1 parent a12c676 commit 2526b72
Show file tree
Hide file tree
Showing 12 changed files with 361 additions and 342 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
"@types/mockdate": "3.0.0",
"@types/node": "16.11.10",
"@types/raf": "3.4.0",
"@types/react": "17.0.36",
"@types/react": "17.0.37",
"@types/react-dom": "17.0.11",
"@types/react-transition-group": "4.4.4",
"@types/testing-library__jest-dom": "5.14.1",
Expand Down Expand Up @@ -189,14 +189,14 @@
"outdent": "0.8.0",
"patch-package": "6.4.7",
"pinst": "2.1.6",
"postcss": "8.3.11",
"postcss": "8.4.1",
"postcss-import": "14.0.2",
"postcss-scopify": "0.1.9",
"prettier": "2.4.1",
"prettier": "2.5.0",
"raw-loader": "4.0.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "7.20.2",
"react-hook-form": "7.20.3",
"react-test-renderer": "17.0.2",
"react-transition-group": "4.4.2",
"react-virtual": "2.8.2",
Expand All @@ -213,7 +213,7 @@
"ts-morph": "12.2.0",
"ts-node": "10.4.0",
"typescript": "4.5.2",
"webpack": "5.64.3",
"webpack": "5.64.4",
"yaml": "1.10.2"
},
"peerDependencies": {
Expand Down
49 changes: 25 additions & 24 deletions src/disclosure/stories/DisclosureCollapseHorizontal.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,31 @@ import {

export type DisclosureCollapseHorizontalProps = DisclosureInitialState & {};

export const DisclosureCollapseHorizontal: React.FC<DisclosureCollapseHorizontalProps> =
props => {
const state = useDisclosureState(props);
export const DisclosureCollapseHorizontal: React.FC<
DisclosureCollapseHorizontalProps
> = props => {
const state = useDisclosureState(props);

return (
<div style={{ display: "flex", height: "100%" }}>
<Disclosure {...state}>Show More</Disclosure>
<DisclosureCollapseContent
style={{
display: "flex",
flexDirection: "row",
}}
direction="horizontal"
{...state}
>
<span style={{ flexShrink: 0 }}>Item 1</span>
<span style={{ flexShrink: 0 }}>Item 2</span>
<span style={{ flexShrink: 0 }}>Item 3</span>
<span style={{ flexShrink: 0 }}>Item 4</span>
<span style={{ flexShrink: 0 }}>Item 5</span>
<span style={{ flexShrink: 0 }}>Item 6</span>
</DisclosureCollapseContent>
</div>
);
};
return (
<div style={{ display: "flex", height: "100%" }}>
<Disclosure {...state}>Show More</Disclosure>
<DisclosureCollapseContent
style={{
display: "flex",
flexDirection: "row",
}}
direction="horizontal"
{...state}
>
<span style={{ flexShrink: 0 }}>Item 1</span>
<span style={{ flexShrink: 0 }}>Item 2</span>
<span style={{ flexShrink: 0 }}>Item 3</span>
<span style={{ flexShrink: 0 }}>Item 4</span>
<span style={{ flexShrink: 0 }}>Item 5</span>
<span style={{ flexShrink: 0 }}>Item 6</span>
</DisclosureCollapseContent>
</div>
);
};

export default DisclosureCollapseHorizontal;
47 changes: 24 additions & 23 deletions src/disclosure/stories/DisclosureCollapseVertical.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,30 @@ import {

export type DisclosureCollapseVerticalProps = DisclosureInitialState & {};

export const DisclosureCollapseVertical: React.FC<DisclosureCollapseVerticalProps> =
props => {
const state = useDisclosureState(props);
export const DisclosureCollapseVertical: React.FC<
DisclosureCollapseVerticalProps
> = props => {
const state = useDisclosureState(props);

return (
<div>
<Disclosure {...state}>Show More</Disclosure>
<DisclosureCollapseContent
style={{
display: "flex",
flexDirection: "column",
}}
{...state}
>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</DisclosureCollapseContent>
</div>
);
};
return (
<div>
<Disclosure {...state}>Show More</Disclosure>
<DisclosureCollapseContent
style={{
display: "flex",
flexDirection: "column",
}}
{...state}
>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</DisclosureCollapseContent>
</div>
);
};

export default DisclosureCollapseVertical;
35 changes: 18 additions & 17 deletions src/disclosure/stories/DisclosureHorizontal.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,24 @@ import {

export type DisclosureHorizontalProps = DisclosureInitialState & {};

export const DisclosureHorizontal: React.FC<DisclosureHorizontalProps> =
props => {
const state = useDisclosureState(props);
export const DisclosureHorizontal: React.FC<
DisclosureHorizontalProps
> = props => {
const state = useDisclosureState(props);

return (
<div className="root">
<Disclosure {...state}>Show More</Disclosure>
<DisclosureContent className="content" animationPresent {...state}>
<div className="item">Item 1</div>
<div className="item">Item 2</div>
<div className="item">Item 3</div>
<div className="item">Item 4</div>
<div className="item">Item 5</div>
<div className="item">Item 6</div>
</DisclosureContent>
</div>
);
};
return (
<div className="root">
<Disclosure {...state}>Show More</Disclosure>
<DisclosureContent className="content" animationPresent {...state}>
<div className="item">Item 1</div>
<div className="item">Item 2</div>
<div className="item">Item 3</div>
<div className="item">Item 4</div>
<div className="item">Item 5</div>
<div className="item">Item 6</div>
</DisclosureContent>
</div>
);
};

export default DisclosureHorizontal;
17 changes: 9 additions & 8 deletions src/slider/stories/SliderSingleReversed.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,15 @@ export type SliderSingleReversedProps = SliderInitialState & {
showTip?: boolean;
};

export const SliderSingleReversed: React.FC<SliderSingleReversedProps> =
args => {
return (
<I18nProvider locale="ar-ae">
<Slider {...args} />
</I18nProvider>
);
};
export const SliderSingleReversed: React.FC<
SliderSingleReversedProps
> = args => {
return (
<I18nProvider locale="ar-ae">
<Slider {...args} />
</I18nProvider>
);
};

export default SliderSingleReversed;

Expand Down
69 changes: 35 additions & 34 deletions src/slider/stories/SliderSingleVertical.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,43 +28,44 @@ export type SliderSingleVerticalProps = SliderInitialState & {
showTip?: boolean;
};

export const SliderSingleVertical: React.FC<SliderSingleVerticalProps> =
args => {
const { label, showTip, ...rest } = args;
const sliderLabel = `${label ? label : "Styled"} Slider`;
const slider = useSliderState({ ...rest, label: sliderLabel });
const { getThumbValueLabel, getValuePercent, values } = slider.baseState;
export const SliderSingleVertical: React.FC<
SliderSingleVerticalProps
> = args => {
const { label, showTip, ...rest } = args;
const sliderLabel = `${label ? label : "Styled"} Slider`;
const slider = useSliderState({ ...rest, label: sliderLabel });
const { getThumbValueLabel, getValuePercent, values } = slider.baseState;

return (
<SliderGroup className="chakra-slider-group" {...slider}>
<div className="slider-label">
<SliderLabel className="label" {...slider}>
{sliderLabel}
</SliderLabel>
<SliderOutput className="value" {...slider}>
{getThumbValueLabel(0)}
</SliderOutput>
</div>

<div className="slider vertical">
<SliderTrack {...slider} className="slider-track-container">
<div className="slider-track" />
<div
className="slider-filled-track"
style={{ height: `${getValuePercent(values[0]) * 100}%` }}
/>
</SliderTrack>
return (
<SliderGroup className="chakra-slider-group" {...slider}>
<div className="slider-label">
<SliderLabel className="label" {...slider}>
{sliderLabel}
</SliderLabel>
<SliderOutput className="value" {...slider}>
{getThumbValueLabel(0)}
</SliderOutput>
</div>

<Thumb
index={0}
sliderState={slider}
aria-label="Thumb"
showTip={showTip}
<div className="slider vertical">
<SliderTrack {...slider} className="slider-track-container">
<div className="slider-track" />
<div
className="slider-filled-track"
style={{ height: `${getValuePercent(values[0]) * 100}%` }}
/>
</div>
</SliderGroup>
);
};
</SliderTrack>

<Thumb
index={0}
sliderState={slider}
aria-label="Thumb"
showTip={showTip}
/>
</div>
</SliderGroup>
);
};

export default SliderSingleVertical;

Expand Down
51 changes: 26 additions & 25 deletions src/toast/stories/ToastReactSpring.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,32 +115,33 @@ export function ToastTriggers() {
);
}

const SpringAnimationWrapper: React.FC<{ toast: RenderlesskitToast }> =
props => {
const {
toast: { placement = "bottom-right", visible },
children,
} = props;
const translate = getTransform(placement, 50);
const transition = useTransition(visible, {
from: { opacity: 0, maxHeight: 0, transform: translate.from },
enter: {
opacity: 1,
maxHeight: 200,
transform: translate.enter,
},
leave: { opacity: 0, maxHeight: 0, transform: translate.leave },
});
const SpringAnimationWrapper: React.FC<{
toast: RenderlesskitToast;
}> = props => {
const {
toast: { placement = "bottom-right", visible },
children,
} = props;
const translate = getTransform(placement, 50);
const transition = useTransition(visible, {
from: { opacity: 0, maxHeight: 0, transform: translate.from },
enter: {
opacity: 1,
maxHeight: 200,
transform: translate.enter,
},
leave: { opacity: 0, maxHeight: 0, transform: translate.leave },
});

return (
<>
{transition((style, item) => {
if (!item) return null;
return <a.div style={style}>{children}</a.div>;
})}
</>
);
};
return (
<>
{transition((style, item) => {
if (!item) return null;
return <a.div style={style}>{children}</a.div>;
})}
</>
);
};

// Animation util
export const getTransform = (placement: string, pixels: number) => {
Expand Down
Loading

1 comment on commit 2526b72

@vercel
Copy link

@vercel vercel bot commented on 2526b72 Nov 26, 2021

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:

Please sign in to comment.