🤸‍♂️ Implement AnimatedLineProgressBar component for @frogress/line

packages/docs/package.json

@@ -8,9 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "@frogress/line": "1.0.1",
+    "@frogress/line": "workspace:packages/line",
     "amplitude-js": "^8.3.1",
     "dedent": "^0.7.0",
+    "framer-motion": "^5.3.1",
     "next": "11.0.1",
     "prism-react-renderer": "^1.2.1",
     "react": "17.0.2",

packages/docs/src/Home/Header.tsx

@@ -1,3 +1,4 @@
+import { AnimatePresence, motion } from 'framer-motion'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
@@ -14,6 +15,7 @@ export const Header: React.FC<HeaderProps> = ({ onEvent }) => {
     const installCommand = 'yarn add @frogress/line'
     copyToClipboard(installCommand)
     setCopied(true)
+    setTimeout(() => setCopied((prev) => !prev), 1000)
   }
 
   return (
@@ -28,11 +30,14 @@ export const Header: React.FC<HeaderProps> = ({ onEvent }) => {
       <InstallCommandContainer onClick={onClickCopyInstallCommand}>
         <InstallCommand>$ yarn add @frogress/line</InstallCommand>
       </InstallCommandContainer>
-      <TypographyImage
-        src={`/images/typography-${
-          !isCopied ? 'copy-to-clipboard' : 'copied'
-        }.png`}
-      />
+      <AnimatePresence exitBeforeEnter>
+        <TypographyImage
+          key={isCopied.toString()}
+          src={`/images/typography-${
+            !isCopied ? 'copy-to-clipboard' : 'copied'
+          }.png`}
+        />
+      </AnimatePresence>
       <Button
         onClick={async () => {
           await onEvent()
@@ -124,7 +129,20 @@ const InstallCommand = styled.span`
   font-family: Consolas, Monaco, andale mono, monospace;
 `
 
-const TypographyImage = styled.img`
+const TypographyImage = styled(motion.img).attrs({
+  transition: {
+    type: 'spring',
+    duration: 0.9,
+  },
+  initial: {
+    opacity: 0,
+    transform: 'translate3d(0, 15px, 0)',
+  },
+  animate: {
+    opacity: 1,
+    transform: 'translate3d(0, 0px, 0)',
+  },
+})`
   height: 18px;
   margin-top: 8px;
 `

packages/docs/src/Home/HomePage.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import { Footer } from './Footer'
 import { Header } from './Header'
+import { AnimationSection } from './sections/AnimationSection'
 import { ColorSection } from './sections/ColorSection'
 import { DirectionSection } from './sections/DirectionSection'
 import { LabelSection } from './sections/LabelSection'
@@ -52,6 +53,7 @@ export const HomePage = () => {
       <SizingSection />
       <DirectionSection />
       <LabelSection />
+      <AnimationSection />
       <Footer
         onEvent={() =>
           amplitudeRef.current?.logEvent('click_author_link', {

packages/docs/src/Home/sections/AnimationSection.tsx

@@ -0,0 +1,175 @@
+import dedent from 'dedent'
+import { motion } from 'framer-motion'
+import React, { useState } from 'react'
+import styled, { css } from 'styled-components'
+
+import { AnimatedLineProgressBar } from '@frogress/line'
+
+import { HighlightedCode } from '../../components/HighlightedCode'
+import { Heading } from '../Heading'
+import { ProgressBarList } from '../ProgressBarList'
+import { Section } from '../Section'
+
+enum EasingFunction {
+  'linear (default)' = 'linear',
+  easeIn = 'easeIn',
+  easeOut = 'easeOut',
+  easeInOut = 'easeInOut',
+  circIn = 'circIn',
+  circOut = 'circOut',
+  circInOut = 'circInOut',
+  backIn = 'backIn',
+  backOut = 'backOut',
+  backInOut = 'backInOut',
+  anticipate = 'anticipate',
+}
+
+const getRandomArbitrary = (min: number, max: number): number => {
+  return Math.round(Math.random() * (max - min) + min)
+}
+
+export const AnimationSection = () => {
+  const [random, setRandom] = useState<number>(48)
+  const [easing, setEasing] = useState<EasingFunction>(
+    EasingFunction['linear (default)'],
+  )
+
+  return (
+    <Section>
+      <Heading>Animation</Heading>
+      <ProgressBarList>
+        <AnimatedLineProgressBar percent={random} transition={{ easing }} />
+      </ProgressBarList>
+      <OptionList>
+        {Object.entries(EasingFunction).map(([key, value]) => {
+          const checked = easing === value
+          return (
+            <Option
+              onClick={() => {
+                setEasing(value)
+                const tmp = random
+                setRandom(0)
+                setTimeout(() => {
+                  setRandom(tmp || getRandomArbitrary(0, 100))
+                }, 500)
+              }}
+            >
+              <Radio
+                checked={checked}
+                animate={{
+                  border: !checked ? '1px solid #9ba3a8' : '1px solid #1fd6ff',
+                  background: !checked ? 'rgba(255, 255, 255, 0)' : '#1fd6ff',
+                }}
+              >
+                {checked && <RadioInnerCircle />}
+              </Radio>
+              <motion.span
+                animate={{ color: !checked ? '#9ba3a8' : '#1fa2ff' }}
+              >
+                {key}
+              </motion.span>
+            </Option>
+          )
+        })}
+      </OptionList>
+      <HighlightedCode highlightLines={[2]}>
+        {dedent`
+          import { AnimatedLineProgressBar } from '@frogress/line'
+
+          <AnimatedLineProgressBar
+            percent={${random}}
+            transition={{ easing: '${easing}' }}
+          />
+        `}
+      </HighlightedCode>
+      <BumpButton onClick={() => setRandom(getRandomArbitrary(0, 100))}>
+        <span role="img" aria-label="man-cartwheeling">
+          🤸‍♂️
+        </span>{' '}
+        <BumpButtonText>Bump</BumpButtonText>
+      </BumpButton>
+    </Section>
+  )
+}
+
+const OptionList = styled.ul`
+  margin: 0;
+  margin-top: 24px;
+  padding: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+`
+const Option = styled.li`
+  margin-right: 16px;
+  margin-bottom: 12px;
+
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+
+  & > span {
+    margin-left: 6px;
+  }
+`
+type RadioProps = {
+  checked?: boolean
+}
+const Radio = styled(motion.div)<RadioProps>`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+const RadioInnerCircle = styled(motion.div).attrs({
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+})`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: white;
+  box-shadow: 0 2px 12px rgba(20, 31, 181, 0.85);
+`
+
+const BumpButton = styled.button`
+  margin-top: 16px;
+  margin-right: auto;
+  padding: 16px 22px;
+  position: relative;
+
+  border-radius: 8px;
+  background-color: transparent;
+  overflow: hidden;
+
+  font-size: 1.05rem;
+  font-weight: bold;
+  text-shadow: 0 2px 4px rgba(18, 216, 250, 0.25);
+  box-shadow: 0px 8px 32px rgba(0, 52, 89, 0.2);
+
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0px 6px 24px rgba(0, 52, 89, 0.2);
+
+    & > span {
+      text-shadow: 0 2px 24px rgba(20, 156, 181, 0.65);
+    }
+  }
+
+  &:active {
+    opacity: 0.65;
+  }
+`
+const BumpButtonText = styled.span`
+  color: #1fa2ff;
+  background-image: linear-gradient(to right, #1fa2ff, #12d8fa, #5ae293);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`

packages/docs/src/components/GlobalStyle.tsx

@@ -29,4 +29,9 @@ export const GlobalStyle = createGlobalStyle`
     background-color: transparent;
     cursor: pointer;
   }
+
+  &::selection {
+    color: rgba(255, 255, 255, 0.65);
+    background-color: rgba(29, 37, 92, 0.95);
+  }
 `

packages/line/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frogress/line",
   "description": "The ultimate Line Progress Bar UI for React",
-  "version": "1.0.1",
+  "version": "1.1.0-canary.0",
   "author": "Junho Yeo <hanaro0704@gmail.com>",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,6 +16,7 @@
     "directory": "packages/line"
   },
   "peerDependencies": {
+    "framer-motion": "^5.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.0"