Skip to content

Commit 48a3f80

Browse files
authored
refactor: bars (#279)
- ProgressBar2 -> AnimatedProgress - bars/freshnses -> FreshnessBar - removed: bar, progressbar - BREAKING: revamp FreshnessBar props - BREAKING: revamp AnimatedProgress props BREAKING: revamp AnimatedProgress and FreshnessBar
1 parent 66049d1 commit 48a3f80

19 files changed

+162
-288
lines changed

src/components/bar/progress-bar-2/index.tsx src/components/animated-progress/AnimatedProgress.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { FC } from 'react';
1+
import React from 'react';
22
import { useNProgress } from '@tanem/react-nprogress';
33
import { Options } from '@tanem/react-nprogress/dist/types';
44

55
import Bar from './Bar';
66
import Container from './Container';
77

8-
export interface ProgressBar2Props extends Options {
8+
export interface Props extends Options {
99
variant?: 'perf.black' | 'perf.green' | 'perf.orange';
1010
}
1111
/**
@@ -15,13 +15,13 @@ export interface ProgressBar2Props extends Options {
1515
* @param minimum - Optional Number between 0 and 1 indicating the minimum value of the progress bar. Defaults to 0.08.
1616
* @param variant - Optional string indicating the color of progressing bar. Defaults to 'perf.green'
1717
*/
18-
const ProgressBar2: FC<ProgressBar2Props> = ({
18+
export const AnimatedProgress = ({
1919
variant = 'perf.green',
2020
animationDuration = 200,
2121
incrementDuration = 800,
2222
isAnimating = false,
2323
minimum = 0.08,
24-
}) => {
24+
}: Props) => {
2525
const { animationDuration: animDuration, progress } = useNProgress({
2626
animationDuration,
2727
incrementDuration,
@@ -44,5 +44,3 @@ const ProgressBar2: FC<ProgressBar2Props> = ({
4444
</Container>
4545
);
4646
};
47-
48-
export default ProgressBar2;

src/components/bar/progress-bar-2/Bar.tsx src/components/animated-progress/Bar.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@ const Bar: React.FC<{
2626
/>
2727
</Flex>
2828
);
29+
2930
export default Bar;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { AnimatedProgress } from './AnimatedProgress';
2+
export type { Props as AnimatedProgressProps } from './AnimatedProgress';

src/components/bar/progress-bar-2/progress-bar-2.stories.tsx src/components/animated-progress/stories.tsx

+16-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { Box, Button, Flex } from 'rebass';
2-
import { Meta, Story } from '@storybook/react/types-6-0';
3-
import { useState } from 'react';
4-
import ProgressBar2C, { ProgressBar2Props } from '.';
1+
import { Story } from '@storybook/react/types-6-0';
2+
import React, { useState } from 'react';
3+
import { Box } from '../box';
4+
import Button from '../button';
5+
import { Flex } from '../flex';
6+
import { AnimatedProgress, Props } from './AnimatedProgress';
57

68
export default {
7-
title: 'Quartz/ProgressBar2',
8-
component: ProgressBar2C,
9-
decorators: [
10-
(Story) => (
11-
<Box width="700px">
12-
<Story />
13-
</Box>
14-
),
15-
],
16-
} as Meta;
9+
title: 'Quartz/AnimatedProgress',
10+
component: AnimatedProgress,
11+
args: {
12+
variant: 'perf.green',
13+
},
14+
};
1715

18-
export const Default: Story<ProgressBar2Props> = (args) => {
16+
export const Default: Story<Props> = (args) => {
1917
const [isAnimating, setIsAnimating] = useState<boolean>();
2018
return (
21-
<>
19+
<Box width="700px">
2220
<Flex my="20px" justifyContent="center" sx={{ gap: '20px' }}>
2321
<Button disabled={isAnimating} onClick={() => setIsAnimating(true)}>
2422
{isAnimating === false ? 'restart' : 'start'}
@@ -27,8 +25,8 @@ export const Default: Story<ProgressBar2Props> = (args) => {
2725
done
2826
</Button>
2927
</Flex>
30-
<ProgressBar2C {...args} isAnimating={isAnimating} />
31-
</>
28+
<AnimatedProgress {...args} isAnimating={isAnimating} />
29+
</Box>
3230
);
3331
};
3432

@@ -102,7 +100,3 @@ Default.argTypes = {
102100
},
103101
},
104102
};
105-
106-
Default.args = {
107-
variant: 'perf.green',
108-
};

src/components/bar/bar.stories.tsx

-114
This file was deleted.

src/components/bar/bar.styles.ts

-20
This file was deleted.

src/components/bar/freshness/index.tsx

-36
This file was deleted.

src/components/bar/freshness/utils.ts

-22
This file was deleted.

src/components/bar/getSize.ts

-5
This file was deleted.

src/components/bar/index.tsx

-23
This file was deleted.

src/components/bar/progress/index.tsx

-28
This file was deleted.

src/components/bar/types.ts

-1
This file was deleted.

src/components/freshness-bar/Bar.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { Box, BoxProps, SxStyleProp } from 'rebass';
3+
4+
interface Props extends Omit<BoxProps, 'css'> {
5+
variant?: 'progress' | 'freshness';
6+
width?: string;
7+
value: number;
8+
}
9+
10+
export const Bar = ({
11+
variant = 'progress',
12+
value,
13+
width = '100px',
14+
...props
15+
}: Props) => (
16+
<Box {...props} tx="variants.bar" variant={variant} sx={styles} width={width}>
17+
<Box as="span" sx={overflowStyles(value)} />
18+
</Box>
19+
);
20+
21+
const styles = {
22+
overflow: 'hidden',
23+
24+
height: '7px',
25+
borderRadius: '3.5px',
26+
};
27+
28+
export const overflowStyles = (translate: number): SxStyleProp => ({
29+
width: '101%',
30+
height: '100%',
31+
32+
display: 'block',
33+
pointerEvents: 'none',
34+
35+
background: '#EBEBEB',
36+
transform: `translateX(${100 * translate}%)`,
37+
});

0 commit comments

Comments
 (0)