@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/src/components/CountUp/CountUp.stories.tsx

@@ -0,0 +1,127 @@
+import { Grid, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { MOTION_DURATION_MS } from '../../theme/motion';
+import { Button } from '../Button';
+import { Subtext, Text } from '../Typography';
+import { CountUp } from '.';
+
+/**
+ * The only thing in the motion layer CSS cannot animate at all: a number is
+ * text, and text content is not an animatable property. So it interpolates in
+ * JavaScript — and reads the same curve CSS would have, through `cubicBezier`.
+ */
+const meta = {
+  title: 'Components/Motion/CountUp',
+  component: CountUp,
+  args: { to: 1250 },
+} satisfies Meta<typeof CountUp>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Omit `from` and it renders `to` immediately, counting only on later changes. */
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(1250);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button size="sm" onClick={() => setValue((v) => v + 500)}>
+          +500
+        </Button>
+        <Text fontSize="3xl" fontWeight="700" mb={0}>
+          <CountUp to={value} /> 크레딧
+        </Text>
+        <Subtext color="fg.muted" mb={0}>
+          다음 카운트는 앞선 카운트가 끝난 자리에서 이어집니다 — 두 번째 보상이
+          첫 번째에 더해지는 것으로 읽히도록.
+        </Subtext>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Which band a count-up belongs to is the judgement, not how many milliseconds.
+ * A KPI refreshing is a response; a balance rising under confetti is a
+ * celebration.
+ */
+export const Bands: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={5} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          둘 동시 재생
+        </Button>
+        {[
+          {
+            label: '응답 — 기본값',
+            note: 'motion.slower (700ms), 지연 없음. 관리자 KPI 카드처럼 갱신을 알리는 자리.',
+            duration: MOTION_DURATION_MS.slower,
+            delay: 0,
+          },
+          {
+            label: '축하 — 호출부가 올림',
+            note: 'celebrate.fall (1800ms) + celebrate.burst 지연. 컨페티가 터지는 동안 올라가는 잔액.',
+            duration: MOTION_DURATION_MS.celebrateFall,
+            delay: MOTION_DURATION_MS.celebrateBurst,
+          },
+        ].map((b) => (
+          <Grid
+            key={b.label}
+            templateColumns={{ base: '1fr', md: '190px 190px 1fr' }}
+            gap={4}
+            alignItems="baseline"
+          >
+            <Text fontSize="sm" fontWeight="600" mb={0}>
+              {b.label}
+            </Text>
+            <Text fontSize="2xl" fontWeight="700" mb={0}>
+              <CountUp
+                key={`${b.label}-${run}`}
+                from={1250}
+                to={1750}
+                durationMs={b.duration}
+                delayMs={b.delay}
+              />
+            </Text>
+            <Subtext color="fg.muted" fontSize="2xs" mb={0}>
+              {b.note}
+            </Subtext>
+          </Grid>
+        ))}
+      </Stack>
+    );
+  },
+};
+
+/** `format` owns the whole string, so a unit or a currency rides along. */
+export const Format: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          재생
+        </Button>
+        <Text fontSize="2xl" fontWeight="700" mb={0}>
+          <CountUp
+            key={run}
+            from={0}
+            to={87.4}
+            format={(n) => `${n.toFixed(1)}%`}
+          />
+        </Text>
+        <Subtext color="fg.muted" mb={0}>
+          기본값은 천 단위 구분입니다. 소수점·통화·단위가 필요하면 넘기세요.
+        </Subtext>
+      </Stack>
+    );
+  },
+};

package/src/components/CountUp/CountUp.tsx

@@ -0,0 +1,122 @@
+import { ForwardedRef, forwardRef, useEffect, useReducer, useRef } from 'react';
+import { chakra, useBreakpointValue } from '@chakra-ui/react';
+
+import { cubicBezier } from '@/utils/cubicBezier';
+
+import { MOTION_DURATION_MS } from '../../theme/motion';
+import { CountUpProps } from './CountUp.types';
+
+/** Comma-grouped, which is what a balance is read as. */
+const groupDigits = (n: number) => Math.round(n).toLocaleString('en-US');
+
+const ease = cubicBezier('emphasized');
+
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+export const CountUp = forwardRef(
+  (
+    {
+      to,
+      from,
+      durationMs = MOTION_DURATION_MS.slower,
+      delayMs = 0,
+      format = groupDigits,
+      onEnd,
+      ...rest
+    }: CountUpProps,
+    ref?: ForwardedRef<HTMLSpanElement>
+  ) => {
+    // Chakra resolves this from the same media query the `_motionReduce`
+    // condition compiles to, so the JS branch and the CSS branch cannot drift.
+    const reduced = useBreakpointValue(
+      { base: false, _motionReduce: true },
+      { ssr: false }
+    );
+
+    // The displayed value lives in a ref and paints through a forced render, so
+    // the ~60 frames of a count do not each rebuild the subtree. Only this node
+    // re-renders, and only its text changes.
+    const shown = useRef(from ?? to);
+    const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+    // Read inside the effect rather than listed as dependencies: a caller that
+    // rebuilds `format` inline every render would otherwise restart the count
+    // on every parent render.
+    const latest = useRef({ format, onEnd, durationMs, delayMs });
+    latest.current = { format, onEnd, durationMs, delayMs };
+
+    useEffect(() => {
+      const start = shown.current;
+      if (reduced || start === to) {
+        shown.current = to;
+        repaint();
+        latest.current.onEnd?.();
+        return;
+      }
+
+      const { durationMs: ms, delayMs: delay } = latest.current;
+      let frame = 0;
+      let began = 0;
+
+      const step = (now: number) => {
+        if (!began) began = now;
+        const elapsed = now - began - delay;
+
+        if (elapsed < 0) {
+          frame = requestAnimationFrame(step);
+          return;
+        }
+        if (elapsed >= ms) {
+          shown.current = to;
+          repaint();
+          latest.current.onEnd?.();
+          return;
+        }
+
+        shown.current = start + (to - start) * ease(elapsed / ms);
+        repaint();
+        frame = requestAnimationFrame(step);
+      };
+
+      frame = requestAnimationFrame(step);
+      return () => cancelAnimationFrame(frame);
+      // `from` is a starting value, not a target: changing it mid-count would
+      // restart from a number the reader never saw. Later counts pick up from
+      // wherever the last one landed, which is what makes a second reward read
+      // as adding to the first.
+    }, [to, reduced]);
+
+    return (
+      <chakra.span ref={ref} fontVariantNumeric="tabular-nums" {...rest}>
+        {format(shown.current)}
+      </chakra.span>
+    );
+  }
+);
+
+CountUp.displayName = 'CountUp';

package/src/components/CountUp/CountUp.types.ts

@@ -0,0 +1,19 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+
+export interface CountUpProps extends HTMLChakraProps<'span'> {
+  /** The value to land on. */
+  to: number;
+  /**
+   * Where the first count starts. Omit to render `to` immediately and count
+   * only when it changes later.
+   */
+  from?: number;
+  /** Count duration. Defaults to `motion.slower` (700ms). */
+  durationMs?: number;
+  /** Delay before counting — e.g. to let a modal finish arriving. */
+  delayMs?: number;
+  /** Formats each intermediate value. Defaults to comma-grouped digits. */
+  format?: (n: number) => string;
+  /** Fires once a count settles, including under reduced motion. */
+  onEnd?: () => void;
+}

package/src/components/CountUp/index.ts

@@ -0,0 +1,2 @@
+export { CountUp } from './CountUp';
+export type { CountUpProps } from './CountUp.types';

package/src/components/DatePicker/RangeDatePicker.tsx

@@ -44,7 +44,7 @@ export const RangeDatePicker = ({
           ...propsConfigs?.triggerBtnProps,
         },
         inputProps: {
-          color: 'primary.dark',
+          color: 'fg.default',
           ...propsConfigs?.inputProps,
         },
         popoverCompProps: {
@@ -80,7 +80,7 @@ export const RangeDatePicker = ({
             px: 6,
             py: 4,
             borderWidth: '1px',
-            borderColor: 'primary.extralight',
+            borderColor: 'border.default',
             borderRadius: 16,
             bg: 'bg.surface',
             ...propsConfigs?.calendarPanelProps?.contentProps,
@@ -110,17 +110,18 @@ export const RangeDatePicker = ({
             color: 'fg.default',
             fontWeight: 'regular',
             _hover: {
-              background: 'primary.extralight',
+              background: 'primary.wash',
               ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
             },
             ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
           },
           todayBtnProps: {
             fontWeight: 'semibold',
+            boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-strong)',
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
           },
           selectedBtnProps: {
-            color: 'white',
+            color: 'fg.onPrimary',
             background: 'primary.main',
             fontWeight: 'semibold',
             position: 'relative',
@@ -129,8 +130,8 @@ export const RangeDatePicker = ({
             ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps,
           },
           isInRangeBtnProps: {
-            color: 'primary.main',
-            background: 'primary.extralight',
+            color: 'fg.default',
+            background: 'primary.selected',
             borderRadius: 'none',
             css: {
               // pressed="true" 직전의 pressed="false" 요소에 borderRight
@@ -161,8 +162,7 @@ export const RangeDatePicker = ({
         <Popover.Trigger asChild>
           <Button
             pl={2}
-            colorPalette="neutral"
-            variant="outline"
+            variant="secondary"
             {...(propsConfigs?.triggerBtnProps as ButtonProps)}
           >
             <MdOutlineCalendarToday

package/src/components/DatePicker/SingleDatePicker.tsx

@@ -45,7 +45,7 @@ export const SingleDatePicker = ({
           ...propsConfigs?.triggerBtnProps,
         },
         inputProps: {
-          color: 'primary.dark',
+          color: 'fg.default',
           ...propsConfigs?.inputProps,
         },
         popoverCompProps: {
@@ -94,17 +94,18 @@ export const SingleDatePicker = ({
             fontSize: 'sm',
             fontWeight: 'regular',
             _hover: {
-              background: 'primary.extralight',
+              background: 'primary.wash',
               ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
             },
             ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
           },
           todayBtnProps: {
             fontWeight: 'semibold',
+            boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-strong)',
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
           },
           selectedBtnProps: {
-            color: 'white',
+            color: 'fg.onPrimary',
             border: 'none',
             background: 'primary.main',
             borderRadius: 'full',
@@ -119,8 +120,7 @@ export const SingleDatePicker = ({
         <Popover.Trigger asChild>
           <Button
             pl={2}
-            colorPalette="neutral"
-            variant="outline"
+            variant="secondary"
             {...(propsConfigs?.triggerBtnProps as ButtonProps)}
           >
             <MdOutlineCalendarToday

package/src/components/ErrorFallback/ErrorFallback.lift.test.tsx

@@ -0,0 +1,45 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { ErrorFallback } from './ErrorFallback';
+
+/**
+ * The "try again" button used a hand-rolled `_hover` with `boxShadow: 'lg'`.
+ * The focus ring is a box-shadow and Chakra emits `:hover` after
+ * `:focus-visible`, so a focused-and-hovered button lost its ring. It now uses
+ * Button's `lift`, whose shadow is a `filter`.
+ */
+const emittedCss = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('');
+
+const hoverDeclarations = (el: Element) => {
+  const cls =
+    (el.getAttribute('class') ?? '')
+      .split(' ')
+      .find((c) => c.startsWith('css-')) ?? '';
+  return [
+    ...emittedCss().matchAll(new RegExp(`\\.${cls}([^{]*)\\{([^{}]*)\\}`, 'g')),
+  ]
+    .filter(([, selector]) => selector.includes(':hover'))
+    .map(([, , declarations]) => declarations)
+    .join(' ');
+};
+
+describe('ErrorFallback primary action', () => {
+  it('lifts without a hover box-shadow that would hide the focus ring', () => {
+    const { container } = render(
+      <ChakraProvider value={system}>
+        <ErrorFallback error={new Error('boom')} onErrorReset={() => {}} />
+      </ChakraProvider>
+    );
+    const primary = container.querySelector('button[data-variant="primary"]');
+    expect(primary).not.toBeNull();
+    const hover = hoverDeclarations(primary!);
+    expect(hover).toContain('drop-shadow');
+    expect(hover).not.toMatch(/box-shadow/);
+  });
+});

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Box, Flex, VStack } from '@chakra-ui/react';
 
 import { useTranslate } from '@/hooks/useTranslate';
@@ -20,6 +21,8 @@ export function ErrorFallback({
 }: ErrorFallbackProps) {
   const translate = useTranslate();
   const showToast = useToast();
+  // Names the landmark below with the same words the card shows as its title.
+  const titleId = useId();
 
   const errorInfo = {
     errorId:
@@ -61,7 +64,24 @@ User Agent: ${errorInfo.userAgent}`;
   };
 
   return (
-    <Flex minH="100vh" align="center" justify="center" p={8}>
+    // A landmark, and a named one. This card replaces whatever failed — often
+    // the whole page, so the host's `<main>` goes with it — and a screen-reader
+    // user then has nothing to navigate by: axe reports every node under
+    // `region`, and there is no landmark to jump to (KWCAG 2.1 5.2.4.1 반복
+    // 영역 건너뛰기). A `<section>` labelled by the error title is a region
+    // landmark wherever it renders, which `<main>` would not be — a segment-level
+    // boundary leaves the host's `<main>` in place, and two of those is its own
+    // failure.
+    <Flex
+      as="section"
+      aria-labelledby={titleId}
+      // `svh`: `100vh` is the largest mobile viewport and overflows under
+      // the URL bar.
+      minH="100svh"
+      align="center"
+      justify="center"
+      p={8}
+    >
       <Container disableResponsive maxW="container.sm">
         <Card
           p={12}
@@ -72,18 +92,18 @@ User Agent: ${errorInfo.userAgent}`;
         >
           <VStack gap={6} align="center" w="full" mx="auto">
             {/* Error Icon */}
-            <Box
-              position="relative"
-              p={4}
-              bg="danger.extralight"
-              borderRadius="full"
-            >
-              <MdError boxSize="xl" color="danger.main" />
+            <Box position="relative" p={4} bg="danger.bg" borderRadius="full">
+              <MdError boxSize="xl" color="danger.fg" />
             </Box>
 
             {/* Error Title */}
             <VStack gap={3} align="center" w="full">
-              <H1 color="fg.default" textStyle="h2" fontWeight="bold">
+              <H1
+                id={titleId}
+                color="fg.default"
+                textStyle="h2"
+                fontWeight="bold"
+              >
                 {translate('error_boundary_title')}
               </H1>
               <Subtitle color="fg.muted" textStyle="h5" maxW="md">
@@ -93,40 +113,35 @@ User Agent: ${errorInfo.userAgent}`;
 
             {/* Error Message */}
             <Card
-              bg="danger.extralight"
+              bg="danger.bg"
               border="1px solid"
-              borderColor="danger.lighter"
+              borderColor="danger.border"
               p={4}
               w="full"
             >
-              <Text
-                color="danger.dark"
-                fontFamily="mono"
-                wordBreak="break-word"
-              >
+              <Text color="danger.fg" fontFamily="mono" wordBreak="break-word">
                 {error?.message || translate('error_boundary_default_message')}
               </Text>
             </Card>
 
             {/* Support Information */}
-            <Card
-              bg="primary.extralight"
-              borderColor="primary.lighter"
-              p={6}
-              w="full"
-            >
-              <H4 color="primary.dark" mb={4} textAlign="center">
+            <Card bg="bg.muted" borderColor="secondary.border" p={6} w="full">
+              {/* `as="h2"`: `H4` is the type size wanted here, but this block
+                  sits directly under the card's `<h1>` — an `<h4>` there skips
+                  two levels and tells a screen-reader user there are sections
+                  they missed (KWCAG 5.2.4.2 제목 제공). */}
+              <H4 as="h2" color="fg.default" mb={4} textAlign="center">
                 {translate('support_information')}
               </H4>
               <VStack gap={2} align="stretch" mb={4}>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('error_id')}:
                   </Text>
                   <Text fontFamily="mono">{errorInfo.errorId}</Text>
                 </Flex>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('time')}:
                   </Text>
                   <Subtext fontFamily="mono">
@@ -134,7 +149,7 @@ User Agent: ${errorInfo.userAgent}`;
                   </Subtext>
                 </Flex>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('component')}:
                   </Text>
                   <Text fontFamily="mono">
@@ -142,7 +157,7 @@ User Agent: ${errorInfo.userAgent}`;
                   </Text>
                 </Flex>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('user_id')}:
                   </Text>
                   <Text fontFamily="mono">
@@ -151,7 +166,7 @@ User Agent: ${errorInfo.userAgent}`;
                 </Flex>
                 {typeof window !== 'undefined' && (
                   <Flex justify="space-between">
-                    <Text color="primary.main" fontWeight="semibold">
+                    <Text color="fg.muted" fontWeight="semibold">
                       {translate('page')}:
                     </Text>
                     <Subtext fontFamily="mono">
@@ -182,11 +197,10 @@ User Agent: ${errorInfo.userAgent}`;
               <Button
                 onClick={onErrorReset}
                 size="lg"
-                variant="solid"
-                _hover={{
-                  transform: 'translateY(-1px)',
-                  boxShadow: 'lg',
-                }}
+                variant="primary"
+                // `lift`, not a hand-rolled `_hover` box-shadow: the focus
+                // ring is a box-shadow too, and a hover one replaced it.
+                lift
                 w="full"
                 maxW="300px"
               >

package/src/components/ExpandableText/ExpandableText.stories.tsx

@@ -6,11 +6,11 @@ const meta = {
   title: 'Components/ExpandableText',
   component: ExpandableText,
   args: {
-    charLimit: 100,
+    lineClamp: 3,
     component: 'Text',
   },
   argTypes: {
-    charLimit: { control: 'number' },
+    lineClamp: { control: 'number' },
     component: {
       control: 'select',
       options: ['Text', 'Subtitle', 'Subtext', 'H1', 'H2', 'H3', 'H4', 'H5'],
@@ -121,7 +121,7 @@ export const AsHeading: Story = {
     component: 'H3',
     children: `This is a heading (H3) with expandable text that demonstrates how headings
       can also use this functionality`,
-    charLimit: 50,
+    lineClamp: 2,
   },
 };
 
@@ -134,28 +134,28 @@ export const ComponentComparison: Story = {
       <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
         <div>
           <strong>Text Component:</strong>
-          <ExpandableText {...args} component="Text" charLimit={80}>
+          <ExpandableText {...args} component="Text" lineClamp={2}>
             {longText}
           </ExpandableText>
         </div>
 
         <div>
           <strong>Subtitle Component:</strong>
-          <ExpandableText {...args} component="Subtitle" charLimit={80}>
+          <ExpandableText {...args} component="Subtitle" lineClamp={2}>
             {longText}
           </ExpandableText>
         </div>
 
         <div>
           <strong>Subtext Component:</strong>
-          <ExpandableText {...args} component="Subtext" charLimit={80}>
+          <ExpandableText {...args} component="Subtext" lineClamp={2}>
             {longText}
           </ExpandableText>
         </div>
 
         <div>
           <strong>H4 Component:</strong>
-          <ExpandableText {...args} component="H4" charLimit={80}>
+          <ExpandableText {...args} component="H4" lineClamp={2}>
             {longText}
           </ExpandableText>
         </div>