style: format code with Prettier and StandardJS

src/components/stateless/ScratchToReveal/index.jsx

@@ -1,4 +1,4 @@
 import React, { useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import { motion, useAnimation } from 'motion/react'
 
@@ -118,7 +118,7 @@
   }
 
   return (
     <motion.div
       className={clsx('relative select-none', className)}
       style={{
         width,
@@ -135,7 +135,7 @@
         className="absolute top-0 left-0"
         onMouseDown={handleMouseDown}
         onTouchStart={handleTouchStart}
-      ></canvas>
+      />
       {children}
     </motion.div>
   )

src/pages/home/index.jsx

@@ -1,4 +1,4 @@
 import React, { version, useState, useRef } from 'react'
 import { Input, Flex, Button } from 'antd'
 import { SendOutlined } from '@ant-design/icons'
 import { Atom, Merge, GitMerge, GitPullRequestArrow } from 'lucide-react'
@@ -8,7 +8,7 @@
 import Typewriter from 'typewriter-effect'
 import Marquee from 'react-fast-marquee'
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 import useDetectScroll, { Direction } from '@smakss/react-scroll-direction'
 import FixTabPanel from '@stateless/FixTabPanel'
 import TypedText from '@stateless/TypedText'
 import ReMarkdown from '@stateless/ReMarkdown'
@@ -49,13 +49,13 @@
 import firstImage from '@assets/images/88-300x160.jpg'
 import secondImage from '@assets/images/2-300x160.jpg'
 
 import { oneApiChat, prettyObject, randomNum } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
 import styles from './index.module.less'
 
 const boxCount = Array.apply(null, Array(10))
 
 const code = {
   fileName: './explanations.ts',
   code: `export const = explanations = {
 main : "This component needs more than the default code block to be displayed"
@@ -284,7 +284,7 @@
           hoverFillColor="#222"
         />
       </section>
-      <section className={styles.line}></section>
+      <section className={styles.line} />
       <section>
         <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
       </section>
@@ -365,14 +365,14 @@
         <AnimateOnScreen.DiyAnimation
           from={{ opacity: 0, transform: 'translate(-100%, 0)' }}
           to={{ opacity: 1, transform: 'translate(0, 0)' }}
-          triggerOnce={true}
+          triggerOnce
         >
           <img src="https://picsum.photos/360/200.jpg" alt="" />
         </AnimateOnScreen.DiyAnimation>
       </section>
       <section style={{ marginBottom: 40, display: 'flex' }}>
         <SpotlightCard className="my-spot" style={{ width: 360, height: 200, color: '#fff' }}>
-          <section></section>
+          <section />
         </SpotlightCard>
       </section>
       <section style={{ margin: '20px 0' }}>
@@ -427,16 +427,16 @@
         mask
       </section>
       <section style={{ marginBottom: 40 }}>
-        <button className={styles['button']} onClick={fireConfetti}>
+        <button className={styles.button} onClick={fireConfetti}>
           <span className={styles['button-label']}>Click Me</span>
         </button>
       </section>
 
       <section style={{ position: 'relative', margin: '80px 0 160px 100px' }}>
-        <div className={styles['circle-1']}></div>
-        <div className={styles['circle-2']}></div>
-        <div className={styles['circle-3']}></div>
-        <div className={styles['circle-4']}></div>
+        <div className={styles['circle-1']} />
+        <div className={styles['circle-2']} />
+        <div className={styles['circle-3']} />
+        <div className={styles['circle-4']} />
       </section>
 
       <section style={{ margin: 20 }} className={styles.eHElAY}>
@@ -461,7 +461,7 @@
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">
           <Input.TextArea
             ref={textareaRef}
             defaultValue={chatText}
             placeholder="来，说点什么呗...Meta + Enter发送"
@@ -516,20 +516,20 @@
       <section style={{ margin: 20 }}>
         <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 6 }}>
           <Masonry gutter="10px">
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
           </Masonry>
         </ResponsiveMasonry>
       </section>

src/pages/motion/index.jsx

@@ -1,4 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react'
 import {
   motion,
   useAnimationControls,
@@ -72,7 +72,7 @@
 ]
 
 const randomSort = (arr) => {
-  let newArr = []
+  const newArr = []
   const len = arr.length
   for (let i = 0; i < len; i++) {
     const random = Math.floor(Math.random() * arr.length)
@@ -102,14 +102,14 @@
 
   const [listLabel, setListLabel] = useState(['JavaScript', 'html', 'css', 'webAssembly'])
   const [isBig, setBigState] = useState(false)
   const [leftState, setLeftState] = useState(false)
 
   const scrollRef = useRef(null)
 
   const { scrollYProgress, scrollY } = useScroll({
     container: scrollRef,
   })
   const { scrollYProgress: scrYPro, scrollY: scrY } = useScroll({
     target: constraintsRef,
     container: scrollRef,
     offset: ['start end', 'end start'],
@@ -124,7 +124,7 @@
   const scrYProCardX = useTransform(scrYProCard, [0, 1], ['1%', '-50%'])
 
   const scaleSec = useTransform(scrYPro, (value) => value * 3)
   useMotionValueEvent(scrYPro, 'change', (current) => {})
 
   const x = useTransform(scrollY, (value) => {
     return (value * 1) / 5
@@ -215,8 +215,8 @@
   return (
     <FixTabPanel ref={scrollRef}>
       <h2>Hi, Motion</h2>
       <motion.h2>{rounded}</motion.h2>
       <motion.div
         style={{
           position: 'fixed',
           top: 0,
@@ -226,10 +226,10 @@
           backgroundImage: 'linear-gradient(108deg,#0894ff,#ff2e54 70%,#ff9004)',
           borderRadius: '3px',
           transformOrigin: 'left',
-          scaleX: scaleX,
+          scaleX,
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 100,
           height: 100,
@@ -252,8 +252,8 @@
           rotate: 45, // 旋转45度
           opacity: 0.5, // 不透明度设置为0.5
         }}
-      ></motion.div>
+      />
       <motion.nav
         layout
         className={styles.nav}
         style={{ position: activeScrollY > sectionPositions[sectionPositions.length - 1] ? 'relative' : 'sticky' }}
@@ -289,7 +289,7 @@
           </div>
         ))}
       </div>
       <motion.div
         transformTemplate={template}
         animate={{ rotate: 360 }}
         style={{
@@ -300,9 +300,9 @@
           rotate: 0,
           x: '200px',
         }}
-      ></motion.div>
+      />
 
       <motion.div
         style={{
           width: 100,
           height: 100,
@@ -313,10 +313,10 @@
           duration: 2,
         }}
         variants={animations}
-        initial={'hidden'}
-        animate={'show'}
-      ></motion.div>
+        initial="hidden"
+        animate="show"
+      />
       <motion.ul
         initial="hidden"
         animate="visible"
         variants={list}
@@ -327,12 +327,12 @@
         }}
         style={{ fontSize: 20 }}
       >
         <motion.li variants={item}>item1</motion.li>
         <motion.li variants={item}>item2</motion.li>
         <motion.li variants={item}>item3</motion.li>
       </motion.ul>
       {['vue', 'react', 'angular'].map((item, i) => (
         <motion.p style={{ fontSize: 20 }} key={i} custom={i + 0.3} animate="visible" variants={variantsText}>
           {item}
         </motion.p>
       ))}
@@ -344,7 +344,7 @@
           gap: 30,
         }}
       >
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -366,7 +366,7 @@
           onClick={() => {
             setRotate(!isRotated)
           }}
-        ></motion.div>
+        />
       </div>
 
       {/* <div
@@ -396,7 +396,7 @@
           margin: '200px 0 0 150px',
         }}
       >
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -422,14 +422,14 @@
             setIsAnimation(false)
             console.log('Completed animating', definition)
           }}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
             gap: 20,
           }}
         >
           <motion.div
             style={{
               ...btnStyle,
               pointerEvents: isAnimation ? 'none' : 'auto',
@@ -445,7 +445,7 @@
           </motion.div>
         </div>
       </div>
       <motion.div
         style={{
           display: 'flex',
           flexDirection: 'column',
@@ -459,7 +459,7 @@
         }}
         ref={constraintsRef}
       >
         <motion.section
           style={{
             width: 100,
             height: 50,
@@ -477,7 +477,7 @@
         >
           拖动元素
         </motion.section>
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -494,20 +494,17 @@
           onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
           onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
           onDirectionLock={(axis) => console.log('axis', axis)}
-          dragSnapToOrigin={true}
+          dragSnapToOrigin
           // dragConstraints={{ left: 0, right: 300 }}
           dragConstraints={constraintsRef}
-          // dragElastic={false}
-          // dragElastic={0.8}
-          // dragPropagation={false}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
             gap: 20,
           }}
         >
           <motion.div
             style={btnStyle}
             onTap={() => {
               controller.start({ scale: 1.2 })
@@ -515,7 +512,7 @@
           >
             大
           </motion.div>
           <motion.div
             style={btnStyle}
             onTap={() => {
               controller.start({ rotate: 45 })
@@ -523,7 +520,7 @@
           >
             旋转
           </motion.div>
           <motion.div
             style={btnStyle}
             onClick={() => {
               controller.start({ opacity: 0.2 })
@@ -531,7 +528,7 @@
           >
             透明度
           </motion.div>
           <motion.div
             style={btnStyle}
             onTap={() => {
               controller.start({ opacity: 1, rotate: 0, scale: 1.0 })
@@ -544,7 +541,7 @@
 
       <section ref={targetRef} className="relative h-[300vh] pt-4 bg-neutral-300">
         <div className="sticky top-0 flex items-center overflow-hidden">
           <motion.div style={{ x: scrYProCardX }} className="flex gap-4">
             <HorizontalScrollParallax />
           </motion.div>
         </div>
@@ -584,7 +581,7 @@
                 }}
                 key={i}
               >
                 <motion.div
                   style={{
                     width: 100,
                     height: 100,
@@ -633,7 +630,7 @@
         </div>
       </div>
 
       <motion.div
         style={{
           width: 180,
           backgroundColor: '#333',
@@ -647,7 +644,7 @@
           setButtonState(!buttonRight)
         }}
       >
         <motion.div
           layout // 设置在白色圆球元素上，即子元素上 <-
           style={{
             width: 60,
@@ -655,11 +652,11 @@
             backgroundColor: 'white',
             borderRadius: 60,
           }}
-        ></motion.div>
+        />
       </motion.div>
 
       <section style={{ fontSize: 30 }}>scrollDirection: {scrollDirection}</section>
       <motion.div
         style={{
           width: 200,
           height: 100,
@@ -669,8 +666,8 @@
           x,
           rotate,
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 200,
           height: 100,
@@ -678,7 +675,7 @@
           borderRadius: '20px',
           scaleX,
         }}
-      ></motion.div>
+      />
 
       <div
         style={{
@@ -692,7 +689,7 @@
           marginBottom: 20,
         }}
       >
         <motion.div
           style={{
             display: 'flex',
             flexDirection: 'column',
@@ -702,7 +699,7 @@
         >
           {listLabel.map((item) => {
             return (
               <motion.div
                 layout
                 style={{
                   width: 200,
@@ -719,7 +716,7 @@
               </motion.div>
             )
           })}
           <motion.div
             style={{
               width: 160,
               height: 30,
@@ -750,7 +747,7 @@
           alignItems: 'center',
         }}
       >
         <motion.div
           style={{
             backgroundColor: '#333',
             borderRadius: '10px',
@@ -763,7 +760,7 @@
           layout
         >
           <LayoutGroup>
             <motion.div
               layout
               style={{
                 width: isBig ? 200 : 60,
@@ -781,9 +778,9 @@
                 setBigState(!isBig)
               }}
             >
               <motion.span layout>click</motion.span>
             </motion.div>
             <motion.div
               layout
               style={{
                 width: 60,
@@ -791,8 +788,8 @@
                 backgroundColor: '#fff',
                 borderRadius: 10,
               }}
-            ></motion.div>
+            />
             <motion.div
               layout
               style={{
                 width: 60,
@@ -800,7 +797,7 @@
                 backgroundColor: '#fff',
                 borderRadius: 10,
               }}
-            ></motion.div>
+            />
           </LayoutGroup>
         </motion.div>
       </div>