feat: added Loading and Progressbar commponents (#23)

* feat: added Loading and Progressbar commponents

* fix: remove react imports, rename component, fix lint

Co-authored-by: honarpour <amir@honarpour.com>

src/components/Box/Box.tsx

@@ -17,6 +17,7 @@ export type BoxProps = {
   bg?: string;
   border?: string;
   width?: number | string;
+  height?: number | string;
   maxWidth?: number;
 };
 
@@ -32,6 +33,7 @@ const Component = styled.div<BoxProps>(
     bg,
     border,
     width,
+    height,
     maxWidth,
   }) => ({
     ...(theme.BOX[variant] || {}),
@@ -43,6 +45,7 @@ const Component = styled.div<BoxProps>(
     ...(bg ? { backgroundColor: theme.COLOR[bg] } : {}),
     ...(border ? { border: getBorder({ theme, border }) } : {}),
     ...(width ? { width } : {}),
+    ...(height ? { height } : {}),
     ...(maxWidth ? { maxWidth } : {}),
   }),
 );

src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { Loader, LoaderProps } from '.';
+
+export default {
+  title: 'Polyblocks/Loader',
+  component: Loader,
+} as Meta;
+
+const Template: Story<LoaderProps> = (args) => <Loader {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'default',
+} as LoaderProps;
+
+export const Screen = Template.bind({});
+Screen.args = {
+  variant: 'screen',
+} as LoaderProps;
+
+export const Dots = Template.bind({});
+Dots.args = {
+  variant: 'dots',
+} as LoaderProps;
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  variant: 'outlined',
+} as LoaderProps;

src/components/Loader/Loader.tsx

@@ -0,0 +1,52 @@
+import * as sc from './styles';
+import { LoaderProps } from './types';
+import { Box } from '../Box';
+
+const LoadingDefault = (props: LoaderProps) => (
+  <sc.Loader {...props}>
+    <span />
+    <span />
+    <span />
+  </sc.Loader>
+);
+
+const LoadingScreen = ({ details, ...props }: LoaderProps) => (
+  <sc.Backdrop>
+    <sc.Wrapper variant="raw" padding="l 0 0 0">
+      <sc.Loader {...props}>
+        <span />
+        <span />
+      </sc.Loader>
+      {details && (
+        <Box variant="raw" bg="gray.1" margin="l 0 0 0">
+          {details}
+        </Box>
+      )}
+    </sc.Wrapper>
+  </sc.Backdrop>
+);
+
+const LoadingDots = (props: LoaderProps) => (
+  <sc.LoadingDots {...props}>
+    <span />
+    <span />
+    <span />
+  </sc.LoadingDots>
+);
+
+const LoadingDotsOutlined = (props: LoaderProps) => (
+  <sc.LoadingDotsOutlined {...props}>
+    <span />
+    <span />
+    <span />
+  </sc.LoadingDotsOutlined>
+);
+
+export const Loader = (props: LoaderProps) => {
+  const { variant } = props;
+  if (variant === 'default') return <LoadingDefault {...props} />;
+  else if (variant === 'dots') return <LoadingDots {...props} />;
+  else if (variant === 'outlined') return <LoadingDotsOutlined {...props} />;
+  else if (variant === 'screen') return <LoadingScreen {...props} />;
+  else return <></>;
+};

src/components/Loader/index.ts

@@ -0,0 +1,2 @@
+export * from './Loader';
+export * from './types';

src/components/Loader/styles.ts

@@ -0,0 +1,153 @@
+import styled, { keyframes } from 'styled-components';
+import { LoaderProps } from './types';
+import { Box } from '../Box';
+
+const wave = keyframes`
+  0%, 60%, 100% {
+    transform: initial;
+  }
+
+  30% {
+    transform: translateY(-15px);
+  }
+`;
+
+export const LoadingDots = styled.div<LoaderProps>`
+  position: relative;
+  text-align: center;
+  width: 48px;
+  height: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  background: ${({ theme }) => theme.COLOR.brandLightest};
+  border-radius: 50%;
+  span {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-right: 2px;
+    margin-top: 21px;
+    background-color: ${({ theme }) => theme.COLOR.brandMain};
+    animation: ${wave} 1.3s linear infinite;
+  }
+  span:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+  span:nth-child(3) {
+    animation-delay: -0.9s;
+  }
+`;
+
+export const LoadingDotsOutlined = styled.div<LoaderProps>`
+  position: relative;
+  text-align: center;
+  width: 48px;
+  height: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 50%;
+  span {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-right: 2px;
+    margin-top: 21px;
+    animation: ${wave} 1.3s linear infinite;
+    border: 2px solid ${({ theme }) => theme.COLOR.brandMain};
+  }
+  span:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+  span:nth-child(3) {
+    animation-delay: -0.9s;
+  }
+`;
+
+const spin = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+`;
+
+const mask = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(180deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  75% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(21, 41, 53, 0.3);
+  z-index: 999;
+`;
+
+export const Wrapper = styled(Box)`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 9999;
+  background-color: ${({ theme }) => theme.COLOR.light};
+  border-radius: ${({ theme }) => theme.RADIUS.m};
+  box-shadow: ${({ theme }) => theme.SHADOW.s};
+  padding: 40px 40px;
+`;
+
+export const Loader = styled.div<LoaderProps>`
+  margin: 0 auto;
+  width: ${(props: any) => (props.small ? '32px' : '64px')};
+  height: ${(props: any) => (props.small ? '32px' : '64px')};
+  animation: 1s ${spin} infinite cubic-bezier(0.255, 0.2, 0.315, 0.455);
+  span,
+  span:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${(props: any) => (props.small ? '16px' : '32px')};
+    height: ${(props: any) => (props.small ? '32px' : '64px')};
+    overflow: hidden;
+    box-sizing: border-box;
+    transform-origin: 100% 50%;
+    border-top-left-radius: 32px;
+    border-bottom-left-radius: 32px;
+  }
+  span:before {
+    content: '';
+    border-width: ${(props: any) => (props.small ? '4px' : '5px')};
+    border-color: ${({ theme }) => theme.COLOR.brandMain};
+    border-style: solid;
+    border-right-color: transparent;
+    animation: 4s ${mask} infinite linear;
+  }
+  span:nth-child(1) {
+    transform: rotate(180deg);
+  }
+  span:nth-child(2) {
+    transform: rotate(360deg);
+    &:before {
+      animation-delay: 1s;
+    }
+  }
+`;

src/components/Loader/types.ts

@@ -0,0 +1,5 @@
+export interface LoaderProps {
+  variant: 'default' | 'dots' | 'outlined' | 'screen';
+  small?: boolean;
+  details?: string;
+}

src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { ProgressBar, ProgressBarProps } from '.';
+
+export default {
+  title: 'Polyblocks/ProgressBar',
+  component: ProgressBar,
+} as Meta;
+
+const Template: Story<ProgressBarProps> = (args) => <ProgressBar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = { percent: 75 } as ProgressBarProps;

src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { Box } from '../Box';
+
+export type ProgressBarProps = {
+  percent: number;
+  height?: string;
+  width?: number | string;
+  bg?: string;
+  bar?: string;
+};
+
+export const ProgressBar: FC<ProgressBarProps> = ({
+  percent = 0,
+  height = '8px',
+  width = '100%',
+  bg = 'brandLightest',
+  bar = 'brandMain',
+  ...restProps
+}) => {
+  return (
+    <Box
+      variant="basic"
+      bg={bg}
+      radius="m"
+      height={height}
+      width={width}
+      padding="0px"
+      {...restProps}
+    >
+      <Box
+        variant="raw"
+        bg={bar}
+        radius="m"
+        height={height}
+        width={`${percent}%`}
+      />
+    </Box>
+  );
+};

src/components/ProgressBar/index.tsx

@@ -0,0 +1 @@
+export * from './ProgressBar';

src/components/Radio/Context.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { createContext, ChangeEvent } from 'react';
 
-export const Context = React.createContext<{
+export const Context = createContext<{
   name?: string;
   value?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 } | null>(null);

src/components/Table/TableBasic.tsx

@@ -11,7 +11,7 @@ import { Flex } from '../Flex';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
-// import { Loading } from '../Loading';
+// import { Loader } from '../Loader';
 import { polyIcons } from '../../theme';
 import { TablePagination } from './TablePagination';
 import { TableBatchActions } from './TableBatchActions';
@@ -175,7 +175,7 @@ export function TableBasic({
 
       {isLoading ? (
         <Flex variant="raw" justify="center" margin="l 0">
-          {/* <Loading /> */}
+          {/* <Loader /> */}
           Loading...
         </Flex>
       ) : hasData ? (

src/index.ts

@@ -50,8 +50,7 @@ export * from './components/Icon';
 // export * from './components/Video';
 
 // MISC
-// export * from './components/Loader';
-// export * from './components/LoadingScreen';
-// export * from './components/ProgressBar';
+export * from './components/Loader';
+export * from './components/ProgressBar';
 export * from './components/TabBar';
 export * from './components/Table';