Feat progress ring

package.json

@@ -13,13 +13,15 @@
     "@floating-ui/react-dom": "^2.1.1",
     "classnames": "^2.5.1",
     "compressorjs": "^1.2.1",
+    "moment": "^2.30.1",
     "next": "15.3.1",
     "postcss": "^8.4.39",
     "postcss-preset-env": "^9.5.15",
     "prismjs": "^1.30.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-icons": "^5.2.1",
+    "recharts": "^2.15.1",
     "sass": "^1.77.6",
     "sharp": "^0.33.4"
   },

src/once-ui/components/Badge.tsx

@@ -7,7 +7,7 @@ import styles from "./Badge.module.scss";
 import { IconName } from "../icons";
 import classNames from "classnames";
 
-interface BadgeProps extends React.ComponentProps<typeof Flex> {
+export interface BadgeProps extends React.ComponentProps<typeof Flex> {
   title?: string;
   icon?: IconName;
   arrow?: boolean;

src/once-ui/components/ProgressRing.module.scss

@@ -0,0 +1,43 @@
+.container {
+  --progress-color: var(--accent-alpha-strong);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.size-s { width: 6rem; height: 6rem; }
+  &.size-m { width: 8rem; height: 8rem; }
+  &.size-l { width: 10rem; height: 10rem; }
+
+  &.tone-warning { --progress-color: var(--warning-alpha-strong); }
+  &.tone-success { --progress-color: var(--success-alpha-strong); }
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.background {
+  fill: none;
+  stroke: var(--progress-color);
+  opacity: 0.4;
+}
+
+.progress {
+  fill: none;
+  stroke: var(--progress-color);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--foreground-strong);
+  font-weight: 600;
+}

src/once-ui/components/ProgressRing.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import styles from "./ProgressRing.module.scss";
+import { Column, Text } from "@/once-ui/components";
+import classNames from "classnames";
+import { SVG } from "./SVG";
+
+interface ProgressRingProps {
+    value: number;
+    size?: "s" | "m" | "l";
+    tone?: "primary" | "warning" | "success";
+    label?: string;
+}
+
+const ProgressRing = ({
+                          value,
+                          size = "s",
+                          tone = "primary",
+                          label
+                      }: ProgressRingProps) => {
+    const strokeWidth = 4;
+    const radiusMap = { s: 30, m: 45, l: 60 };
+    const radius = radiusMap[size];
+
+    const normalizedRadius = radius - strokeWidth;
+    const circumference = normalizedRadius * 2 * Math.PI;
+    const strokeDashoffset = circumference * (1 - value / 100);
+
+    return (
+        <Column className={classNames(styles.container, styles[`size-${size}`], styles[`tone-${tone}`])}>
+            <SVG className={styles.svg} viewBox={`0 0 ${radius * 2} ${radius * 2}`}>
+                <circle
+                    className={styles.background}
+                    cx={radius}
+                    cy={radius}
+                    r={normalizedRadius}
+                    strokeWidth={strokeWidth}
+                />
+                <circle
+                    className={styles.progress}
+                    cx={radius}
+                    cy={radius}
+                    r={normalizedRadius}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={`${circumference} ${circumference}`}
+                    style={{ strokeDashoffset }}
+                />
+            </SVG>
+
+            {label && (
+                <Text variant="body-strong-m" className={styles.label}>
+                    {label}
+                </Text>
+            )}
+        </Column>
+    );
+};
+
+ProgressRing.displayName = "ProgressRing";
+
+export { ProgressRing };

src/once-ui/components/SVG.tsx

@@ -0,0 +1,77 @@
+
+"use client";
+
+import React, { ElementType, ComponentPropsWithoutRef, ReactNode, forwardRef } from "react";
+import classNames from "classnames";
+import { CommonProps, SpacingProps } from "@/once-ui/interfaces";
+import { ColorScheme, ColorWeight, SpacingToken } from "@/once-ui/types";
+
+type SVGProps<T extends ElementType> =
+    ComponentPropsWithoutRef<"svg"> &
+    CommonProps &
+    SpacingProps & {
+    as?: T;
+    colorScheme?: ColorScheme;
+    colorWeight?: ColorWeight;
+    strokeScheme?: ColorScheme;
+    strokeWeight?: ColorWeight;
+    interactive?: boolean;
+    size?: "x" | "s" | "m" | "l" | "xl";
+    children?: ReactNode;
+};
+
+function getColorClass(type: "fill" | "stroke", scheme?: ColorScheme, weight?: ColorWeight) {
+    return scheme ? `${type}-${scheme}-${weight}` : "";
+}
+
+function getSpacingClass(prefix: string, token?: SpacingToken) {
+    return token ? `${prefix}-${token}` : "";
+}
+
+const SVG = forwardRef<SVGSVGElement, SVGProps<ElementType>>(function SVG(
+    {
+        as,
+        colorScheme = "neutral",
+        colorWeight = "weak",
+        strokeScheme,
+        strokeWeight = "weak",
+        interactive = false,
+        size = "m",
+        padding,
+        margin,
+        className,
+        style,
+        children,
+        ...rest
+    },
+    ref
+) {
+    const Component = as || "svg";
+    const classes = classNames(
+        "transition-colors",
+        getColorClass("fill", colorScheme, colorWeight),
+        getColorClass("stroke", strokeScheme, strokeWeight),
+        getSpacingClass("p", padding),
+        getSpacingClass("m", margin),
+        {
+            "cursor-pointer hover:scale-105": interactive,
+            "opacity-hoverable": interactive,
+        },
+        className
+    );
+
+    return (
+        <Component
+            ref={ref}
+            className={classes}
+            style={{ width: size, height: size, ...style }}
+            {...rest}
+        >
+            {children}
+        </Component>
+    );
+});
+
+SVG.displayName = "SVG";
+
+export { SVG };

src/once-ui/components/TechCarousel.module.scss

@@ -0,0 +1,8 @@
+.marqueeContent {
+  animation: marquee 20s linear infinite;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-50%); }
+}

src/once-ui/components/TechCarousel.tsx

@@ -0,0 +1,89 @@
+import { Row, RevealFx, Flex, Badge, BadgeProps } from "@/once-ui/components";
+import styles from "./TechCarousel.module.scss";
+import { IconName } from "@/once-ui/icons";
+import React from "react";
+import {SpacingToken} from "@/once-ui/types";
+
+const defaultIconMap: Record<string, IconName> = {
+	java: 'java',
+	typescript: 'typescript',
+	javascript: 'js',
+
+	spring: 'spring',
+	hibernate: 'hibernate',
+	react: 'react',
+	angular: 'angular',
+	vue: 'vue',
+	nodejs: 'node',
+
+	postgresql: 'postgres',
+	mysql: 'mysql',
+	mongodb: 'mongo',
+
+	docker: 'docker',
+	kubernetes: 'kubernetes',
+	aws: 'aws',
+	gcp: 'gcp',
+	git: 'git',
+
+	graphql: 'graphql',
+	redis: 'redis',
+	nginx: 'nginx'
+};
+
+type TechItem = string | {
+	name: string;
+	icon?: IconName;
+};
+
+type TechCarouselProps = {
+	items: TechItem[];
+	textVariant?: BadgeProps["textVariant"];
+	spacing?: SpacingToken | "-1" | undefined;
+	iconMap?: Record<string, IconName>;
+} & Partial<BadgeProps>;
+
+const TechCarousel = ({
+	                      items,
+	                      textVariant = "body-default-s",
+	                      spacing = "s",
+	                      iconMap = {},
+	                      ...badgeProps
+                      }: TechCarouselProps) => {
+
+	const mergedIconMap = { ...defaultIconMap, ...iconMap };
+
+	const normalizedItems = items.map(item =>
+		typeof item === 'string' ? { name: item } : item
+	);
+
+	return (
+		<Row position="relative" overflow="hidden" fillWidth padding="l">
+			<Flex gap={spacing} className={styles.marqueeContent}>
+				{[...normalizedItems, ...normalizedItems].map((item, i) => {
+					const iconName = item.icon || mergedIconMap[item.name.toLowerCase()];
+
+					return (
+						<RevealFx
+							key={`${item.name}-${i}`}
+							delay={0.7 + (i % items.length) * 0.1}
+							translateY={5}
+						>
+							<Badge
+								background="transparent"
+								border="transparent"
+								shadow="xs"
+								textVariant={textVariant}
+								icon={iconName}
+								title={item.name}
+								{...badgeProps}
+							/>
+						</RevealFx>
+					);
+				})}
+			</Flex>
+		</Row>
+	);
+};
+
+export { TechCarousel, defaultIconMap };

src/once-ui/icons.ts

@@ -32,6 +32,37 @@ import {
   HiOutlineDocumentDuplicate,
 } from "react-icons/hi2";
 
+import { RiVisaLine } from "react-icons/ri";
+
+import { 
+  FaAmazon, 
+  FaDiscord, 
+  FaGitAlt, 
+  FaGithub,
+  FaGoogle 
+} from "react-icons/fa6";
+
+import { LuChevronsLeftRight } from "react-icons/lu";
+import { FaJava } from "react-icons/fa";
+import { 
+  SiAngular, 
+  SiDocker, 
+  SiGooglecloud, 
+  SiGraphql, 
+  SiHibernate,
+  SiKubernetes,
+  SiMongodb,
+  SiMysql, 
+  SiNginx,
+  SiNodedotjs, 
+  SiPostgresql, 
+  SiReact, 
+  SiRedis, 
+  SiSpring, 
+  SiTypescript, 
+  SiVuedotjs 
+} from "react-icons/si";
+
 export const iconLibrary: Record<string, IconType> = {
   chevronUp: HiChevronUp,
   chevronDown: HiChevronDown,
@@ -61,7 +92,26 @@ export const iconLibrary: Record<string, IconType> = {
   search: HiOutlineMagnifyingGlass,
   security: HiOutlineShieldCheck,
   sparkle: HiOutlineSparkles,
-  computer: HiOutlineComputerDesktop
+  computer: HiOutlineComputerDesktop,
+  java: FaJava,
+  spring: SiSpring,
+  hibernate: SiHibernate,
+  typescript: SiTypescript,
+  postgres: SiPostgresql,
+  mysql: SiMysql,
+  mongo: SiMongodb,
+  docker: SiDocker,
+  kubernetes: SiKubernetes,
+  aws: FaAmazon,
+  gcp: SiGooglecloud,
+  react: SiReact,
+  angular: SiAngular,
+  vue: SiVuedotjs,
+  node: SiNodedotjs,
+  graphql: SiGraphql,
+  redis: SiRedis,
+  nginx: SiNginx,
+  git: FaGitAlt
 };
 
 export type IconLibrary = typeof iconLibrary;