refactor: bars (#279)

- ProgressBar2 -> AnimatedProgress
- bars/freshnses -> FreshnessBar
- removed: bar, progressbar
- BREAKING: revamp  FreshnessBar props
- BREAKING: revamp AnimatedProgress props

BREAKING: revamp AnimatedProgress and FreshnessBar

Author: snqb

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

@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useNProgress } from '@tanem/react-nprogress';
 import { Options } from '@tanem/react-nprogress/dist/types';
 
 import Bar from './Bar';
 import Container from './Container';
 
-export interface ProgressBar2Props extends Options {
+export interface Props extends Options {
   variant?: 'perf.black' | 'perf.green' | 'perf.orange';
 }
 /**
@@ -15,13 +15,13 @@ export interface ProgressBar2Props extends Options {
  * @param minimum - Optional Number between 0 and 1 indicating the minimum value of the progress bar. Defaults to 0.08.
  * @param variant - Optional string indicating the color of progressing bar. Defaults to 'perf.green'
  */
-const ProgressBar2: FC<ProgressBar2Props> = ({
+export const AnimatedProgress = ({
   variant = 'perf.green',
   animationDuration = 200,
   incrementDuration = 800,
   isAnimating = false,
   minimum = 0.08,
-}) => {
+}: Props) => {
   const { animationDuration: animDuration, progress } = useNProgress({
     animationDuration,
     incrementDuration,
@@ -44,5 +44,3 @@ const ProgressBar2: FC<ProgressBar2Props> = ({
     </Container>
   );
 };
-
-export default ProgressBar2;

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

@@ -26,4 +26,5 @@ const Bar: React.FC<{
     />
   </Flex>
 );
+
 export default Bar;

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

@@ -0,0 +1,2 @@
+export { AnimatedProgress } from './AnimatedProgress';
+export type { Props as AnimatedProgressProps } from './AnimatedProgress';

src/components/animated-progress/index.tsx

@@ -1,24 +1,22 @@
-import { Box, Button, Flex } from 'rebass';
-import { Meta, Story } from '@storybook/react/types-6-0';
-import { useState } from 'react';
-import ProgressBar2C, { ProgressBar2Props } from '.';
+import { Story } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { Box } from '../box';
+import Button from '../button';
+import { Flex } from '../flex';
+import { AnimatedProgress, Props } from './AnimatedProgress';
 
 export default {
-  title: 'Quartz/ProgressBar2',
-  component: ProgressBar2C,
-  decorators: [
-    (Story) => (
-      <Box width="700px">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta;
+  title: 'Quartz/AnimatedProgress',
+  component: AnimatedProgress,
+  args: {
+    variant: 'perf.green',
+  },
+};
 
-export const Default: Story<ProgressBar2Props> = (args) => {
+export const Default: Story<Props> = (args) => {
   const [isAnimating, setIsAnimating] = useState<boolean>();
   return (
-    <>
+    <Box width="700px">
       <Flex my="20px" justifyContent="center" sx={{ gap: '20px' }}>
         <Button disabled={isAnimating} onClick={() => setIsAnimating(true)}>
           {isAnimating === false ? 'restart' : 'start'}
@@ -27,8 +25,8 @@ export const Default: Story<ProgressBar2Props> = (args) => {
           done
         </Button>
       </Flex>
-      <ProgressBar2C {...args} isAnimating={isAnimating} />
-    </>
+      <AnimatedProgress {...args} isAnimating={isAnimating} />
+    </Box>
   );
 };
 
@@ -102,7 +100,3 @@ Default.argTypes = {
     },
   },
 };
-
-Default.args = {
-  variant: 'perf.green',
-};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box, BoxProps, SxStyleProp } from 'rebass';
+
+interface Props extends Omit<BoxProps, 'css'> {
+  variant?: 'progress' | 'freshness';
+  width?: string;
+  value: number;
+}
+
+export const Bar = ({
+  variant = 'progress',
+  value,
+  width = '100px',
+  ...props
+}: Props) => (
+  <Box {...props} tx="variants.bar" variant={variant} sx={styles} width={width}>
+    <Box as="span" sx={overflowStyles(value)} />
+  </Box>
+);
+
+const styles = {
+  overflow: 'hidden',
+
+  height: '7px',
+  borderRadius: '3.5px',
+};
+
+export const overflowStyles = (translate: number): SxStyleProp => ({
+  width: '101%',
+  height: '100%',
+
+  display: 'block',
+  pointerEvents: 'none',
+
+  background: '#EBEBEB',
+  transform: `translateX(${100 * translate}%)`,
+});