Merge pull request #61 from pknu-wap/feature/#59/Loader-Component

Feature/#59/loader component

README.md

@@ -1,7 +1,24 @@
 <div align="center"><img src="https://user-images.githubusercontent.com/75781414/192261497-b3e4b288-d1c5-4d27-a062-da65a876ecfb.png" width="220" height="240">
 </div>
 
-# <div align="center">🌊 Awesome React Component Library 💦</div>
+# <div align="center">🐳 Awesome React Component Library 🐳</div>
+
+<p align="center">
+  <a href="https://github.com/jrgarciadev/nextui/blob/main/LICENSE">
+    <img src="https://img.shields.io/apm/l/atomic-design-ui.svg?style=flat" alt="License">
+  </a>
+  <a href="https://www.npmjs.com/package/wap-ui">
+    <img src="https://img.shields.io/npm/dm/wap-ui.svg?style=flat-round" alt="npm downloads">
+  </a>
+   <img alt="Github Stars" src="https://badgen.net/github/stars/pknu-wap/2022_2_WAP_WEB_TEAM1" />
+  <img src="https://badgen.net/github/release/pknu-wap/2022_2_WAP_WEB_TEAM1">
+
+</p>
+<p align="center">
+  <img src="https://badgen.net/github/issues/pknu-wap/2022_2_WAP_WEB_TEAM1">
+  <img src="https://badgen.net/github/prs/pknu-wap/2022_2_WAP_WEB_TEAM1">
+  <img src="https://badgen.net/github/contributors/pknu-wap/2022_2_WAP_WEB_TEAM1">
+</p>
 
 ## `Installing WAP-UI`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wap-ui",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "repository": "https://github.com/pknu-wap/2022_2_WAP_WEB_TEAM1.git",
   "author": "neko113 <alstn113@gmail.com>",
   "license": "MIT",

packages/components/Loader/Loader.stories.tsx

@@ -0,0 +1,76 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Loader, LoaderProps } from './Loader';
+import React from 'react';
+import styled from '@emotion/styled';
+import { BarsProps } from './Loaders/Bars/Bars';
+import { DotsProps } from './Loaders/Dots/Dots';
+
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+} as ComponentMeta<typeof Loader>;
+
+const Template: ComponentStory<typeof Loader> = (args: LoaderProps) => {
+  return (
+    <Container>
+      <Loader {...args} />
+    </Container>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const Spinner = ({ size }: Pick<LoaderProps, 'size'>) => {
+  return (
+    <Container>
+      <FlexRow>
+        <Loader type="spinner" size={size} />
+        <Loader type="spinner" color="error" size={size} />
+        <Loader type="spinner" color="secondary" size={size} />
+        <Loader type="spinner" color="success" size={size} />
+        <Loader type="spinner" color="warning" size={size} />
+      </FlexRow>
+    </Container>
+  );
+};
+
+export const Bars = ({ size }: Pick<BarsProps, 'size'>) => {
+  return (
+    <Container>
+      <FlexRow>
+        <Loader type="bars" size={size} />
+        <Loader type="bars" color="error" size={size} />
+        <Loader type="bars" color="secondary" size={size} />
+        <Loader type="bars" color="success" size={size} />
+        <Loader type="bars" color="warning" size={size} />
+      </FlexRow>
+    </Container>
+  );
+};
+
+export const Dots = ({ size }: Pick<DotsProps, 'size'>) => {
+  return (
+    <Container>
+      <FlexRow>
+        <Loader type="dots" size={size} />
+        <Loader type="dots" color="error" size={size} />
+        <Loader type="dots" color="secondary" size={size} />
+        <Loader type="dots" color="success" size={size} />
+        <Loader type="dots" color="warning" size={size} />
+      </FlexRow>
+    </Container>
+  );
+};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  height: 100vh;
+  padding: 3rem;
+`;
+
+const FlexRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+`;

packages/components/Loader/Loader.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { NormalColorType } from '../../theme/types';
+import { Bars } from './Loaders/Bars/Bars';
+import { Dots } from './Loaders/Dots/Dots';
+import { Spinner } from './Loaders/Spinner/Spinner';
+
+export interface LoaderProps {
+  /**
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * @default 'primary'
+   */
+  color?: NormalColorType;
+  /**
+   * @default 'spinner'
+   */
+  type?: 'spinner' | 'bars' | 'dots';
+}
+
+/**
+ * @example
+ * ```jsx
+ * const App = () => {
+ *  return (
+ * <>
+ *   <Loader />
+ *   <Loader type="spinner" size='sm' />
+ *   <Loader type="bars" color='secondary' />
+ *   <Loader type="dots" />
+ * </>
+ * )
+ * }
+ * ```
+ */
+
+export const Loader = ({
+  color = 'primary',
+  size = 'md',
+  type = 'spinner',
+}: LoaderProps) => {
+  return (
+    <>
+      {type === 'spinner' ? (
+        <Spinner size={size} color={color} />
+      ) : type === 'bars' ? (
+        <Bars size={size} color={color} />
+      ) : type === 'dots' ? (
+        <Dots size={size} color={color} />
+      ) : null}
+    </>
+  );
+};

packages/components/Loader/Loaders/Bars/Bars.styles.ts

@@ -0,0 +1,58 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { palette } from '../../../../theme/palette';
+import { NormalColorType } from '../../../../theme/types';
+
+const BarKeyframes = keyframes`
+  0% {
+    transform: none;
+  }
+  25% {
+    transform: scaleY(2);
+  }
+  50%,
+  100% {
+    transform: none;
+  }
+`;
+
+export const Container = styled.div<{ size: 'sm' | 'md' | 'lg' }>`
+  display: flex;
+  justify-content: space-around;
+  ${({ size }) =>
+    size === 'sm'
+      ? css`
+          width: 1.75rem;
+          height: 0.875rem;
+          div {
+            width: 0.25rem;
+            height: 100%;
+          }
+        `
+      : size === 'md'
+      ? css`
+          width: 2.7rem;
+          height: 1.375rem;
+          div {
+            width: 0.375rem;
+            height: 100%;
+          }
+        `
+      : css`
+          width: 4.5rem;
+          height: 2.25rem;
+          div {
+            width: 0.6rem;
+            height: 100%;
+          }
+        `};
+`;
+
+export const Bar = styled.div<{
+  color: NormalColorType;
+  delay: number;
+}>`
+  animation: ${BarKeyframes} 1s infinite ease-in-out;
+  animation-delay: ${({ delay }) => delay + 's'};
+  background-color: ${({ color }) => palette[color]};
+`;

packages/components/Loader/Loaders/Bars/Bars.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { NormalColorType } from '../../../../theme/types';
+import * as S from './Bars.styles';
+
+export interface BarsProps {
+  size: 'sm' | 'md' | 'lg';
+  color: NormalColorType;
+}
+
+export const Bars = ({ size, color }: BarsProps) => {
+  return (
+    <S.Container size={size}>
+      {[0, 0.1, 0.2, 0.3, 0.4].map((number) => (
+        <S.Bar key={number} color={color} delay={number} />
+      ))}
+    </S.Container>
+  );
+};

packages/components/Loader/Loaders/Dots/Dots.styles.ts

@@ -0,0 +1,56 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { palette } from '../../../../theme/palette';
+import { NormalColorType } from '../../../../theme/types';
+
+const DotsKeyframes = keyframes`
+ 0%{
+  opacity: 1;
+ }
+ 50%,100%{
+  opacity: 0.3;
+ }
+`;
+
+export const Container = styled.div<{ size: 'sm' | 'md' | 'lg' }>`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  ${({ size }) =>
+    size === 'sm' &&
+    css`
+      width: 2.5rem;
+      div {
+        width: 0.5rem;
+        height: 0.5rem;
+      }
+    `}
+  ${({ size }) =>
+    size === 'md' &&
+    css`
+      width: 3.5rem;
+      div {
+        width: 0.7rem;
+        height: 0.7rem;
+      }
+    `}
+  ${({ size }) =>
+    size === 'lg' &&
+    css`
+      width: 5rem;
+      div {
+        width: 1rem;
+        height: 1rem;
+      }
+    `}
+`;
+
+export const Dot = styled.div<{
+  delay: number;
+  color: NormalColorType;
+}>`
+  border-radius: 50%;
+  background-color: ${({ color }) => palette[color]};
+  animation: ${DotsKeyframes} 1s infinite linear alternate;
+  animation-delay: ${({ delay }) => delay + 's'};
+`;

packages/components/Loader/Loaders/Dots/Dots.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { NormalColorType } from '../../../../theme/types';
+import * as S from './Dots.styles';
+
+export interface DotsProps {
+  size: 'sm' | 'md' | 'lg';
+  color: NormalColorType;
+}
+
+export const Dots = ({ size, color }: DotsProps) => {
+  return (
+    <S.Container size={size}>
+      {[0, 0.5, 1].map((number) => (
+        <S.Dot key={number} delay={number} color={color} />
+      ))}
+    </S.Container>
+  );
+};

packages/components/Loader/Loaders/Spinner/Spinner.styles.ts

@@ -0,0 +1,66 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { palette } from '../../../../theme/palette';
+import { NormalColorType } from '../../../../theme/types';
+
+const containerKeyframes = keyframes`
+  100% {
+    transform: rotate(360deg)
+  }
+`;
+
+const spinningDotKeyframes = keyframes`
+    80%, 100% {
+       transform: rotate(360deg); 
+  } 
+`;
+const beforeKeyframes = keyframes`
+ 50% {
+    transform: scale(0.4); 
+  } 100%, 0% {
+    transform: scale(1.0); 
+  } 
+`;
+
+export const Container = styled.div<{ size: 'sm' | 'md' | 'lg' }>`
+  ${({ size }) =>
+    size === 'sm'
+      ? css`
+          width: 1.375rem;
+          height: 1.375rem;
+        `
+      : size === 'md'
+      ? css`
+          width: 2.25rem;
+          height: 2.25rem;
+        `
+      : css`
+          width: 2.75rem;
+          height: 2.75rem;
+        `}
+  position: relative;
+  animation: ${containerKeyframes} 2.5s infinite linear both;
+`;
+
+export const SpinningDot = styled.div<{
+  delay: number;
+  color: NormalColorType;
+}>`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: ${spinningDotKeyframes} 2s infinite ease-in-out both;
+  animation-delay: ${({ delay }) => -1.2 + delay + 's'};
+  ::before {
+    content: ' ';
+    display: block;
+    width: 25%;
+    height: 25%;
+    background-color: ${({ color }) => palette[color]};
+    border-radius: 50%;
+    animation: ${beforeKeyframes} 2s infinite ease-in-out both;
+    animation-delay: ${({ delay }) => -1.2 + delay + 's'};
+  }
+`;