From 32622470db8fdc5dc43c4d379f21f2f8e875b31f Mon Sep 17 00:00:00 2001 From: Ashish Date: Wed, 6 Oct 2021 03:16:00 -0400 Subject: [PATCH 1/2] feat: added Loading and Progressbar commponents --- src/components/Box/Box.tsx | 3 + src/components/Loading/Loading.stories.tsx | 15 ++ src/components/Loading/Loading.tsx | 53 ++++++ src/components/Loading/index.ts | 2 + src/components/Loading/styles.ts | 153 ++++++++++++++++++ src/components/Loading/types.ts | 5 + .../ProgressBar/ProgressBar.stories.tsx | 10 ++ src/components/ProgressBar/ProgressBar.tsx | 41 +++++ src/components/ProgressBar/index.tsx | 1 + 9 files changed, 283 insertions(+) create mode 100644 src/components/Loading/Loading.stories.tsx create mode 100644 src/components/Loading/Loading.tsx create mode 100644 src/components/Loading/index.ts create mode 100644 src/components/Loading/styles.ts create mode 100644 src/components/Loading/types.ts create mode 100644 src/components/ProgressBar/ProgressBar.stories.tsx create mode 100644 src/components/ProgressBar/ProgressBar.tsx create mode 100644 src/components/ProgressBar/index.tsx diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx index 72abb1a..6549528 100644 --- a/src/components/Box/Box.tsx +++ b/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( bg, border, width, + height, maxWidth, }) => ({ ...(theme.BOX[variant] || {}), @@ -43,6 +45,7 @@ const Component = styled.div( ...(bg ? { backgroundColor: theme.COLOR[bg] } : {}), ...(border ? { border: getBorder({ theme, border }) } : {}), ...(width ? { width } : {}), + ...(height ? { height } : {}), ...(maxWidth ? { maxWidth } : {}), }), ); diff --git a/src/components/Loading/Loading.stories.tsx b/src/components/Loading/Loading.stories.tsx new file mode 100644 index 0000000..1da7d10 --- /dev/null +++ b/src/components/Loading/Loading.stories.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react/types-6-0'; +import { Loading, LoadingProps } from '.'; + +export default { + title: 'Polyblocks/Loading', + component: Loading, +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + variant: 'dots' +} as LoadingProps; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 0000000..6b346c0 --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import * as sc from './styles'; +import { LoadingProps } from './types'; +import { Box } from '../Box'; + +const LoadingDefault = (props: LoadingProps) => ( + + + + + +); + +const LoadingScreen = (props: LoadingProps) => ( + + + + + + + {props.details && ( + + {props.details} + + )} + + +); + +const LoadingDots = (props: LoadingProps) => ( + + + + + +); + +const LoadingDotsOutlined = (props: LoadingProps) => ( + + + + + +); + +export const Loading = (props: LoadingProps) => { + const { variant } = props; + if (variant === 'default') return + else if (variant === 'dots') return + else if (variant === 'outlined') return + else if (variant === 'screen') return + else return <> +}; diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts new file mode 100644 index 0000000..0f37dc1 --- /dev/null +++ b/src/components/Loading/index.ts @@ -0,0 +1,2 @@ +export * from './Loading'; +export * from './types'; diff --git a/src/components/Loading/styles.ts b/src/components/Loading/styles.ts new file mode 100644 index 0000000..e4c6ec6 --- /dev/null +++ b/src/components/Loading/styles.ts @@ -0,0 +1,153 @@ +import styled, { keyframes } from 'styled-components'; +import { LoadingProps } from './types'; +import { Box } from '../Box'; + +const wave = keyframes` + 0%, 60%, 100% { + transform: initial; + } + + 30% { + transform: translateY(-15px); + } +`; + +export const LoadingDots = styled.div` + 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` + 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 Loading = styled.div` + 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; + } + } +`; diff --git a/src/components/Loading/types.ts b/src/components/Loading/types.ts new file mode 100644 index 0000000..181efd7 --- /dev/null +++ b/src/components/Loading/types.ts @@ -0,0 +1,5 @@ +export interface LoadingProps { + variant: 'default' | 'dots' | 'outlined' | 'screen' + small?: boolean + details?: string; +} diff --git a/src/components/ProgressBar/ProgressBar.stories.tsx b/src/components/ProgressBar/ProgressBar.stories.tsx new file mode 100644 index 0000000..562f6a6 --- /dev/null +++ b/src/components/ProgressBar/ProgressBar.stories.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +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 = (args) => ; + +export const Default = Template.bind({}); +Default.args = { percent: 75 } as ProgressBarProps; diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..3795661 --- /dev/null +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -0,0 +1,41 @@ +import React, { FC } from 'react'; +import { Box, BoxProps } from '../Box'; + +export type ProgressBarProps = { + percent: number; + height?: string; + width?: number | string; + borderRadius?: number; + bg?: string; + bar?: string; +}; + +export const ProgressBar: FC = ({ + percent = 0, + height = '8px', + width = '100%', + borderRadius = 100, + bg = 'brandLightest', + bar = 'brandMain', + ...restProps +}) => { + return ( + + + + ); +}; diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx new file mode 100644 index 0000000..51a1fa9 --- /dev/null +++ b/src/components/ProgressBar/index.tsx @@ -0,0 +1 @@ +export * from './ProgressBar'; From 5c6ecd5ae519a32b4227045f90865f7bbbbb6515 Mon Sep 17 00:00:00 2001 From: honarpour Date: Tue, 21 Dec 2021 09:02:43 -0500 Subject: [PATCH 2/2] fix: remove react imports, rename component, fix lint --- package-lock.json | 145 ++++++++++-------- src/components/Loader/Loader.stories.tsx | 29 ++++ .../Loading.tsx => Loader/Loader.tsx} | 35 ++--- src/components/Loader/index.ts | 2 + src/components/{Loading => Loader}/styles.ts | 10 +- src/components/Loader/types.ts | 5 + src/components/Loading/Loading.stories.tsx | 15 -- src/components/Loading/index.ts | 2 - src/components/Loading/types.ts | 5 - .../ProgressBar/ProgressBar.stories.tsx | 6 +- src/components/ProgressBar/ProgressBar.tsx | 8 +- src/components/Radio/Context.ts | 6 +- src/components/Table/TableBasic.tsx | 4 +- src/index.ts | 5 +- 14 files changed, 152 insertions(+), 125 deletions(-) create mode 100644 src/components/Loader/Loader.stories.tsx rename src/components/{Loading/Loading.tsx => Loader/Loader.tsx} (61%) create mode 100644 src/components/Loader/index.ts rename src/components/{Loading => Loader}/styles.ts (92%) create mode 100644 src/components/Loader/types.ts delete mode 100644 src/components/Loading/Loading.stories.tsx delete mode 100644 src/components/Loading/index.ts delete mode 100644 src/components/Loading/types.ts diff --git a/package-lock.json b/package-lock.json index e3fcd6b..64a2804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "version": "7.15.0", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6.9.0" } @@ -84,7 +84,7 @@ "version": "7.15.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz", "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/code-frame": "^7.14.5", "@babel/generator": "^7.15.4", @@ -151,7 +151,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/compat-data": "^7.15.0", "@babel/helper-validator-option": "^7.14.5", @@ -271,7 +271,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz", "integrity": "sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/types": "^7.15.4" }, @@ -294,7 +294,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz", "integrity": "sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/helper-module-imports": "^7.15.4", "@babel/helper-replace-supers": "^7.15.4", @@ -313,7 +313,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz", "integrity": "sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/types": "^7.15.4" }, @@ -348,7 +348,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz", "integrity": "sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/helper-member-expression-to-functions": "^7.15.4", "@babel/helper-optimise-call-expression": "^7.15.4", @@ -363,7 +363,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/types": "^7.15.4" }, @@ -406,7 +406,7 @@ "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz", "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6.9.0" } @@ -430,7 +430,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.4.tgz", "integrity": "sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/template": "^7.15.4", "@babel/traverse": "^7.15.4", @@ -7504,7 +7504,7 @@ "version": "4.17.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.0.tgz", "integrity": "sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==", - "dev": true, + "devOptional": true, "dependencies": { "caniuse-lite": "^1.0.30001254", "colorette": "^1.3.0", @@ -7864,7 +7864,7 @@ "version": "1.0.30001255", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001255.tgz", "integrity": "sha512-F+A3N9jTZL882f/fg/WWVnKSu6IOo3ueLz4zwaOPbPYHNmM/ZaDUyzyJwS1mZhX7Ex5jqTyW599Gdelh5PDYLQ==", - "dev": true, + "devOptional": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/browserslist" @@ -8272,7 +8272,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", - "dev": true + "devOptional": true }, "node_modules/colors": { "version": "1.4.0", @@ -8518,7 +8518,7 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", - "dev": true, + "devOptional": true, "dependencies": { "safe-buffer": "~5.1.1" } @@ -9909,7 +9909,7 @@ "version": "1.3.833", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.833.tgz", "integrity": "sha512-h+9aVaUHjyunLqtCjJF2jrJ73tYcJqo2cCGKtVAXH9WmnBsb8hiChRQ0P1uXjdxR6Wcfxibephy41c1YlZA/pA==", - "dev": true + "devOptional": true }, "node_modules/element-resize-detector": { "version": "1.2.3", @@ -10213,7 +10213,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6" } @@ -12504,7 +12504,7 @@ "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6.9.0" } @@ -14920,7 +14920,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, + "devOptional": true, "dependencies": { "minimist": "^1.2.5" }, @@ -15743,7 +15743,7 @@ "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "devOptional": true }, "node_modules/minipass": { "version": "3.1.3", @@ -16120,7 +16120,7 @@ "version": "1.1.75", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz", "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==", - "dev": true + "devOptional": true }, "node_modules/noms": { "version": "0.0.0", @@ -18505,8 +18505,7 @@ "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "dev": true + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "node_modules/react-lifecycles-compat": { "version": "3.0.4", @@ -19411,7 +19410,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "devOptional": true }, "node_modules/safe-regex": { "version": "1.1.0", @@ -19765,7 +19764,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, + "devOptional": true, "bin": { "semver": "bin/semver.js" } @@ -23900,13 +23899,13 @@ "version": "7.15.0", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", - "dev": true + "devOptional": true }, "@babel/core": { "version": "7.15.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz", "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==", - "dev": true, + "devOptional": true, "requires": { "@babel/code-frame": "^7.14.5", "@babel/generator": "^7.15.4", @@ -23957,7 +23956,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", - "dev": true, + "devOptional": true, "requires": { "@babel/compat-data": "^7.15.0", "@babel/helper-validator-option": "^7.14.5", @@ -24044,7 +24043,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz", "integrity": "sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==", - "dev": true, + "devOptional": true, "requires": { "@babel/types": "^7.15.4" } @@ -24061,7 +24060,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz", "integrity": "sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==", - "dev": true, + "devOptional": true, "requires": { "@babel/helper-module-imports": "^7.15.4", "@babel/helper-replace-supers": "^7.15.4", @@ -24077,7 +24076,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz", "integrity": "sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==", - "dev": true, + "devOptional": true, "requires": { "@babel/types": "^7.15.4" } @@ -24103,7 +24102,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz", "integrity": "sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==", - "dev": true, + "devOptional": true, "requires": { "@babel/helper-member-expression-to-functions": "^7.15.4", "@babel/helper-optimise-call-expression": "^7.15.4", @@ -24115,7 +24114,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", - "dev": true, + "devOptional": true, "requires": { "@babel/types": "^7.15.4" } @@ -24146,7 +24145,7 @@ "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz", "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==", - "dev": true + "devOptional": true }, "@babel/helper-wrap-function": { "version": "7.15.4", @@ -24164,7 +24163,7 @@ "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.4.tgz", "integrity": "sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==", - "dev": true, + "devOptional": true, "requires": { "@babel/template": "^7.15.4", "@babel/traverse": "^7.15.4", @@ -25644,7 +25643,8 @@ "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "dev": true + "dev": true, + "requires": {} }, "@mdx-js/util": { "version": "1.6.22", @@ -25953,7 +25953,8 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-2.0.0.tgz", "integrity": "sha512-ZhdT++cX+L9LwjhGYggvYUUVQH/MGn2rwbrAwCMzA/f2QTFvkjxzX8nDgMxIhaLCDC+gHIxfJG2wrWN0jkBr3g==", - "dev": true + "dev": true, + "requires": {} }, "@storybook/addon-toolbars": { "version": "6.3.8", @@ -28303,7 +28304,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "7.2.0", @@ -28374,13 +28376,15 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true + "dev": true, + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "ansi-align": { "version": "3.0.0", @@ -28797,7 +28801,8 @@ "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==", - "dev": true + "dev": true, + "requires": {} }, "babel-loader": { "version": "8.2.2", @@ -29010,7 +29015,8 @@ "version": "0.3.7", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz", "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==", - "dev": true + "dev": true, + "requires": {} }, "babel-plugin-polyfill-corejs2": { "version": "0.2.2", @@ -29403,7 +29409,7 @@ "version": "4.17.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.0.tgz", "integrity": "sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==", - "dev": true, + "devOptional": true, "requires": { "caniuse-lite": "^1.0.30001254", "colorette": "^1.3.0", @@ -29689,7 +29695,7 @@ "version": "1.0.30001255", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001255.tgz", "integrity": "sha512-F+A3N9jTZL882f/fg/WWVnKSu6IOo3ueLz4zwaOPbPYHNmM/ZaDUyzyJwS1mZhX7Ex5jqTyW599Gdelh5PDYLQ==", - "dev": true + "devOptional": true }, "capture-exit": { "version": "2.0.0", @@ -29999,7 +30005,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", - "dev": true + "devOptional": true }, "colors": { "version": "1.4.0", @@ -30211,7 +30217,7 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", - "dev": true, + "devOptional": true, "requires": { "safe-buffer": "~5.1.1" } @@ -31353,7 +31359,7 @@ "version": "1.3.833", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.833.tgz", "integrity": "sha512-h+9aVaUHjyunLqtCjJF2jrJ73tYcJqo2cCGKtVAXH9WmnBsb8hiChRQ0P1uXjdxR6Wcfxibephy41c1YlZA/pA==", - "dev": true + "devOptional": true }, "element-resize-detector": { "version": "1.2.3", @@ -31612,7 +31618,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true + "devOptional": true }, "escape-goat": { "version": "2.1.1", @@ -31844,7 +31850,8 @@ "version": "8.3.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", - "dev": true + "dev": true, + "requires": {} }, "eslint-import-resolver-node": { "version": "0.3.6", @@ -32185,7 +32192,8 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-5.1.0.tgz", "integrity": "sha512-NGmI6BH5L12pl7ScQHbg7tvtk4wPxxj8yPHH47NvSmMtFneC077PSeY3huFj06ZWZvtbfxSPt3RuOQD5XcR4ng==", - "dev": true + "dev": true, + "requires": {} }, "eslint-plugin-react": { "version": "7.25.1", @@ -32233,13 +32241,15 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "dev": true + "dev": true, + "requires": {} }, "eslint-plugin-simple-import-sort": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz", "integrity": "sha512-U3vEDB5zhYPNfxT5TYR7u01dboFZp+HNpnGhkDB2g/2E4wZ/g1Q9Ton8UwCLfRV9yAKyYqDh62oHOamvkFxsvw==", - "dev": true + "dev": true, + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -33411,7 +33421,7 @@ "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true + "devOptional": true }, "get-caller-file": { "version": "2.0.5", @@ -35224,7 +35234,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, + "devOptional": true, "requires": { "minimist": "^1.2.5" } @@ -35613,7 +35623,8 @@ "version": "7.1.3", "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.3.tgz", "integrity": "sha512-jtQ6VyT7rMT5tPV0g2EJakEnXLiPksnvlYtwQsVVZ611JsWGN8bQ1tVSDX4s6JllfEH6wmsYxNjTUAMrPmNA8w==", - "dev": true + "dev": true, + "requires": {} }, "md5.js": { "version": "1.3.5", @@ -35880,7 +35891,7 @@ "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "devOptional": true }, "minipass": { "version": "3.1.3", @@ -36200,7 +36211,7 @@ "version": "1.1.75", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz", "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==", - "dev": true + "devOptional": true }, "noms": { "version": "0.0.0", @@ -37716,7 +37727,8 @@ "version": "5.4.0", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.4.0.tgz", "integrity": "sha512-k7QJXuQGWevr/V8hoMJ1wBW9i2CVhBdDXpBf3jy/AAtzVyYtsFqEAT+y+NOGiSG1cmnGTreqm5EFLXlVaKbPLQ==", - "dev": true + "dev": true, + "requires": {} }, "react-day-picker": { "version": "7.4.10", @@ -37929,7 +37941,8 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.1.0.tgz", "integrity": "sha512-7kpzLsYzVxff//HUVz1sPWLCdoSNvHD3M8b/iQLdF8fgf7zp26eVysRrAUSxiAT4yQv2zl09zHjJEYSYNxQ8Jw==", - "dev": true + "dev": true, + "requires": {} }, "react-dom": { "version": "17.0.2", @@ -38016,8 +38029,7 @@ "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "dev": true + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "react-lifecycles-compat": { "version": "3.0.4", @@ -38126,7 +38138,8 @@ "react-table": { "version": "7.7.0", "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz", - "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==" + "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==", + "requires": {} }, "react-textarea-autosize": { "version": "8.3.3", @@ -38719,7 +38732,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "devOptional": true }, "safe-regex": { "version": "1.1.0", @@ -39007,7 +39020,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true + "devOptional": true }, "semver-diff": { "version": "3.1.1", @@ -41114,7 +41127,8 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz", "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==", - "dev": true + "dev": true, + "requires": {} }, "use-latest": { "version": "1.2.0", @@ -41941,7 +41955,8 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz", "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==", - "dev": true + "dev": true, + "requires": {} }, "webpack-hot-middleware": { "version": "2.25.0", diff --git a/src/components/Loader/Loader.stories.tsx b/src/components/Loader/Loader.stories.tsx new file mode 100644 index 0000000..e89a71a --- /dev/null +++ b/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 = (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; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loader/Loader.tsx similarity index 61% rename from src/components/Loading/Loading.tsx rename to src/components/Loader/Loader.tsx index 6b346c0..601657a 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loader/Loader.tsx @@ -1,33 +1,32 @@ -import React from 'react'; import * as sc from './styles'; -import { LoadingProps } from './types'; +import { LoaderProps } from './types'; import { Box } from '../Box'; -const LoadingDefault = (props: LoadingProps) => ( - +const LoadingDefault = (props: LoaderProps) => ( + - + ); -const LoadingScreen = (props: LoadingProps) => ( +const LoadingScreen = ({ details, ...props }: LoaderProps) => ( - + - - {props.details && ( + + {details && ( - {props.details} + {details} )} ); -const LoadingDots = (props: LoadingProps) => ( +const LoadingDots = (props: LoaderProps) => ( @@ -35,7 +34,7 @@ const LoadingDots = (props: LoadingProps) => ( ); -const LoadingDotsOutlined = (props: LoadingProps) => ( +const LoadingDotsOutlined = (props: LoaderProps) => ( @@ -43,11 +42,11 @@ const LoadingDotsOutlined = (props: LoadingProps) => ( ); -export const Loading = (props: LoadingProps) => { +export const Loader = (props: LoaderProps) => { const { variant } = props; - if (variant === 'default') return - else if (variant === 'dots') return - else if (variant === 'outlined') return - else if (variant === 'screen') return - else return <> + if (variant === 'default') return ; + else if (variant === 'dots') return ; + else if (variant === 'outlined') return ; + else if (variant === 'screen') return ; + else return <>; }; diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts new file mode 100644 index 0000000..4be3756 --- /dev/null +++ b/src/components/Loader/index.ts @@ -0,0 +1,2 @@ +export * from './Loader'; +export * from './types'; diff --git a/src/components/Loading/styles.ts b/src/components/Loader/styles.ts similarity index 92% rename from src/components/Loading/styles.ts rename to src/components/Loader/styles.ts index e4c6ec6..4901e6c 100644 --- a/src/components/Loading/styles.ts +++ b/src/components/Loader/styles.ts @@ -1,5 +1,5 @@ import styled, { keyframes } from 'styled-components'; -import { LoadingProps } from './types'; +import { LoaderProps } from './types'; import { Box } from '../Box'; const wave = keyframes` @@ -12,7 +12,7 @@ const wave = keyframes` } `; -export const LoadingDots = styled.div` +export const LoadingDots = styled.div` position: relative; text-align: center; width: 48px; @@ -39,7 +39,7 @@ export const LoadingDots = styled.div` } `; -export const LoadingDotsOutlined = styled.div` +export const LoadingDotsOutlined = styled.div` position: relative; text-align: center; width: 48px; @@ -110,12 +110,12 @@ export const Wrapper = styled(Box)` text-align: center; z-index: 9999; background-color: ${({ theme }) => theme.COLOR.light}; - border-radius: ${({ theme }) => theme.RADIUS.m}; + border-radius: ${({ theme }) => theme.RADIUS.m}; box-shadow: ${({ theme }) => theme.SHADOW.s}; padding: 40px 40px; `; -export const Loading = styled.div` +export const Loader = styled.div` margin: 0 auto; width: ${(props: any) => (props.small ? '32px' : '64px')}; height: ${(props: any) => (props.small ? '32px' : '64px')}; diff --git a/src/components/Loader/types.ts b/src/components/Loader/types.ts new file mode 100644 index 0000000..c8f519e --- /dev/null +++ b/src/components/Loader/types.ts @@ -0,0 +1,5 @@ +export interface LoaderProps { + variant: 'default' | 'dots' | 'outlined' | 'screen'; + small?: boolean; + details?: string; +} diff --git a/src/components/Loading/Loading.stories.tsx b/src/components/Loading/Loading.stories.tsx deleted file mode 100644 index 1da7d10..0000000 --- a/src/components/Loading/Loading.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Meta, Story } from '@storybook/react/types-6-0'; -import { Loading, LoadingProps } from '.'; - -export default { - title: 'Polyblocks/Loading', - component: Loading, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - variant: 'dots' -} as LoadingProps; diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts deleted file mode 100644 index 0f37dc1..0000000 --- a/src/components/Loading/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Loading'; -export * from './types'; diff --git a/src/components/Loading/types.ts b/src/components/Loading/types.ts deleted file mode 100644 index 181efd7..0000000 --- a/src/components/Loading/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface LoadingProps { - variant: 'default' | 'dots' | 'outlined' | 'screen' - small?: boolean - details?: string; -} diff --git a/src/components/ProgressBar/ProgressBar.stories.tsx b/src/components/ProgressBar/ProgressBar.stories.tsx index 562f6a6..4aed7f9 100644 --- a/src/components/ProgressBar/ProgressBar.stories.tsx +++ b/src/components/ProgressBar/ProgressBar.stories.tsx @@ -1,8 +1,10 @@ -import React from 'react'; import { Meta, Story } from '@storybook/react/types-6-0'; import { ProgressBar, ProgressBarProps } from '.'; -export default { title: 'Polyblocks/ProgressBar', component: ProgressBar } as Meta; +export default { + title: 'Polyblocks/ProgressBar', + component: ProgressBar, +} as Meta; const Template: Story = (args) => ; diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 3795661..93c8fd1 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -1,11 +1,10 @@ -import React, { FC } from 'react'; -import { Box, BoxProps } from '../Box'; +import { FC } from 'react'; +import { Box } from '../Box'; export type ProgressBarProps = { percent: number; height?: string; width?: number | string; - borderRadius?: number; bg?: string; bar?: string; }; @@ -14,7 +13,6 @@ export const ProgressBar: FC = ({ percent = 0, height = '8px', width = '100%', - borderRadius = 100, bg = 'brandLightest', bar = 'brandMain', ...restProps @@ -26,7 +24,7 @@ export const ProgressBar: FC = ({ radius="m" height={height} width={width} - padding='0px' + padding="0px" {...restProps} > ) => void; + onChange: (e: ChangeEvent) => void; } | null>(null); diff --git a/src/components/Table/TableBasic.tsx b/src/components/Table/TableBasic.tsx index f9ca814..9b70bfa 100644 --- a/src/components/Table/TableBasic.tsx +++ b/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 ? ( - {/* */} + {/* */} Loading... ) : hasData ? ( diff --git a/src/index.ts b/src/index.ts index 2f6381c..c6da99a 100644 --- a/src/index.ts +++ b/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';