@shipfox/react-ui 0.6.0 → 0.8.0

package/src/components/icon/custom/spinner.tsx

@@ -1,12 +1,56 @@
 import type {RemixiconComponentType} from '@remixicon/react';
+import {motion, type SVGMotionProps, type Variants} from 'framer-motion';
 import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
 
-export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
+const SEGMENT_COUNT = 8;
+const DURATION = 1.2;
+const BASE_OPACITY = 0;
+
+const CLOCKWISE_ORDER = [1, 8, 4, 6, 2, 7, 3, 5];
+
+const segmentVariants: Record<string, Variants> = {};
+
+for (let i = 0; i < SEGMENT_COUNT; i++) {
+  const segmentIndex = CLOCKWISE_ORDER[i];
+  const delay = (i * DURATION) / SEGMENT_COUNT;
+
+  segmentVariants[`segment${segmentIndex}`] = {
+    initial: {opacity: BASE_OPACITY},
+    animate: {
+      opacity: [BASE_OPACITY, 1, BASE_OPACITY],
+      transition: {
+        duration: DURATION,
+        ease: 'easeInOut',
+        repeat: Infinity,
+        repeatType: 'loop',
+        delay,
+        times: [0, 0.5, 1],
+      },
+    },
+  };
+}
+
+export function SpinnerIcon(props: ComponentProps<RemixiconComponentType>) {
+  const {className, size, ...restProps} = props;
+
+  const iconSize = size ?? 24;
+
+  const svgProps: SVGMotionProps<SVGSVGElement> = {
+    width: typeof iconSize === 'number' ? String(iconSize) : iconSize,
+    height: typeof iconSize === 'number' ? String(iconSize) : iconSize,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: cn(className),
+    initial: 'initial',
+    animate: 'animate',
+    ...(restProps as SVGMotionProps<SVGSVGElement>),
+  };
   return (
-    <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <motion.svg {...svgProps}>
       <title>Spinner</title>
-      <path
-        opacity="0.55"
+      <motion.path
         d="M10.583 1.91667C10.583 1.41041 10.9934 1 11.4997 1C12.0059 1 12.4163 1.41041 12.4163 1.91667V5.58333C12.4163 6.08959 12.0059 6.5 11.4997 6.5C10.9934 6.5 10.583 6.08959 10.583 5.58333V1.91667Z"
         fill="currentColor"
         stroke="currentColor"
@@ -14,8 +58,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment1}
       />
-      <rect
+      <motion.rect
         x="10.583"
         y="17.5"
         width="1.83333"
@@ -27,9 +72,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment2}
       />
-      <path
-        opacity="0.25"
+      <motion.path
         d="M1.41667 12.918C0.910406 12.918 0.5 12.5076 0.5 12.0013C0.5 11.495 0.910405 11.0846 1.41667 11.0846L5.08333 11.0846C5.58959 11.0846 6 11.495 6 12.0013C6 12.5076 5.58959 12.918 5.08333 12.918L1.41667 12.918Z"
         fill="currentColor"
         stroke="currentColor"
@@ -37,9 +82,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment3}
       />
-      <path
-        opacity="0.75"
+      <motion.path
         d="M17.9167 12.918C17.4104 12.918 17 12.5076 17 12.0013C17 11.495 17.4104 11.0846 17.9167 11.0846L21.5833 11.0846C22.0896 11.0846 22.5 11.495 22.5 12.0013C22.5 12.5076 22.0896 12.918 21.5833 12.918L17.9167 12.918Z"
         fill="currentColor"
         stroke="currentColor"
@@ -47,9 +92,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment4}
       />
-      <path
-        opacity="0.38"
+      <motion.path
         d="M3.7224 5.52123C3.36442 5.16325 3.36442 4.58285 3.7224 4.22487C4.08038 3.86689 4.66078 3.86688 5.01876 4.22487L7.61149 6.81759C7.96947 7.17557 7.96947 7.75597 7.61149 8.11395C7.25351 8.47193 6.67311 8.47193 6.31512 8.11395L3.7224 5.52123Z"
         fill="currentColor"
         stroke="currentColor"
@@ -57,9 +102,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment5}
       />
-      <rect
-        opacity="0.88"
+      <motion.rect
         x="14.7412"
         y="16.5391"
         width="1.83333"
@@ -72,9 +117,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment6}
       />
-      <path
-        opacity="0.13"
+      <motion.path
         d="M5.0183 19.7796C4.66032 20.1375 4.07992 20.1375 3.72194 19.7796C3.36396 19.4216 3.36396 18.8412 3.72194 18.4832L6.31466 15.8905C6.67264 15.5325 7.25304 15.5325 7.61102 15.8905C7.969 16.2484 7.969 16.8288 7.61102 17.1868L5.0183 19.7796Z"
         fill="currentColor"
         stroke="currentColor"
@@ -82,9 +127,9 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment7}
       />
-      <path
-        opacity="0.63"
+      <motion.path
         d="M16.6853 8.11354C16.3273 8.47152 15.7469 8.47152 15.3889 8.11354C15.0309 7.75556 15.0309 7.17516 15.3889 6.81718L17.9817 4.22445C18.3396 3.86647 18.92 3.86647 19.278 4.22445C19.636 4.58243 19.636 5.16283 19.278 5.52081L16.6853 8.11354Z"
         fill="currentColor"
         stroke="currentColor"
@@ -92,7 +137,8 @@ export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
         strokeWidth="0.916667"
         strokeLinecap="round"
         strokeLinejoin="round"
+        variants={segmentVariants.segment8}
       />
-    </svg>
+    </motion.svg>
   );
 }

package/src/components/icon/icon.tsx

@@ -1,5 +1,5 @@
+import type {RemixiconComponentType} from '@remixicon/react';
 import {
-  type RemixiconComponentType,
   RiAddLine,
   RiArrowRightSLine,
   RiBookOpenFill,
@@ -36,32 +36,32 @@ import {
 const iconsMap = {
   google: RiGoogleFill,
   microsoft: RiMicrosoftFill,
+  github: RiGithubFill,
+  shipfox: ShipfoxLogo,
+  slack: SlackLogo,
+  stripe: StripeLogo,
   badge: BadgeIcon,
   checkCircleSolid: CheckCircleSolidIcon,
   circleDottedLine: CircleDottedLineIcon,
   componentFill: ComponentFillIcon,
-  xCircleSolid: XCircleSolidIcon,
-  thunder: ThunderIcon,
-  resize: ResizeIcon,
+  componentLine: ComponentLineIcon,
+  ellipseMiniSolid: EllipseMiniSolidIcon,
   infoTooltipFill: InfoTooltipFillIcon,
+  resize: ResizeIcon,
   spinner: SpinnerIcon,
-  ellipseMiniSolid: EllipseMiniSolidIcon,
-  componentLine: ComponentLineIcon,
-  imageAdd: RiImageAddFill,
-  close: RiCloseLine,
-  shipfox: ShipfoxLogo,
-  slack: SlackLogo,
-  stripe: StripeLogo,
-  github: RiGithubFill,
+  thunder: ThunderIcon,
+  xCircleSolid: XCircleSolidIcon,
+  addLine: RiAddLine,
+  bookOpen: RiBookOpenFill,
   check: RiCheckLine,
-  subtractLine: RiSubtractLine,
+  chevronRight: RiArrowRightSLine,
+  close: RiCloseLine,
+  copy: RiFileCopyLine,
+  homeSmile: RiHomeSmileFill,
+  imageAdd: RiImageAddFill,
   info: RiInformationFill,
   money: RiMoneyDollarCircleLine,
-  homeSmile: RiHomeSmileFill,
-  copy: RiFileCopyLine,
-  addLine: RiAddLine,
-  chevronRight: RiArrowRightSLine,
-  bookOpen: RiBookOpenFill,
+  subtractLine: RiSubtractLine,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

package/src/components/index.ts

@@ -4,7 +4,9 @@ export * from './badge';
 export * from './button';
 export * from './checkbox';
 export * from './code-block';
+export * from './dot-grid';
 export * from './dynamic-item';
+export * from './form';
 export * from './icon';
 export * from './inline-tips';
 export * from './input';
@@ -14,4 +16,5 @@ export * from './modal';
 export * from './textarea';
 export * from './theme';
 export * from './toast';
+export * from './tooltip';
 export * from './typography';

package/src/onboarding/sign-in.stories.tsx

@@ -2,6 +2,7 @@ import {argosScreenshot} from '@argos-ci/storybook/vitest';
 import type {Meta, StoryObj} from '@storybook/react';
 import {Avatar} from 'components/avatar';
 import {Button} from 'components/button';
+import {DotGrid} from 'components/dot-grid';
 import {Header, Text} from 'components/typography';
 
 const meta = {
@@ -22,14 +23,25 @@ export const Default: Story = {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background-subtle-base">
         {/* Background illustration - simplified decorative element */}
-        <div className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]">
-          <div
-            className="h-[332px] w-[800px] opacity-20"
-            style={{
-              backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,
-              backgroundSize: '24px 24px',
-              backgroundPosition: '-80px 31px',
-            }}
+        <div
+          className="absolute w-[800px] max-w-[800px] h-[400px] top-0 left-1/2 -translate-x-1/2 translate-y-[-145px]"
+          style={{
+            maskImage:
+              'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',
+            WebkitMaskImage:
+              'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',
+          }}
+        >
+          <DotGrid
+            dotSize={2}
+            gap={20}
+            baseColor="#e63e00"
+            activeColor="#FF0076"
+            proximity={100}
+            shockRadius={8}
+            shockStrength={100}
+            resistance={500}
+            returnDuration={1.5}
           />
         </div>