@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/src/index.ts

@@ -0,0 +1,96 @@
+// Core Components
+export * from './components/Accordion';
+export * from './components/Alert';
+export * from './components/AutowidthInput';
+export * from './components/Avatar';
+export * from './components/Badge';
+export * from './components/Banner';
+export * from './components/Breadcrumb';
+export * from './components/Button';
+export * from './components/Card';
+export * from './components/Carousel';
+export * from './components/CarouselModal';
+export * from './components/Checkbox';
+export * from './components/Chip';
+export * from './components/ChipButton';
+export * from './components/Code';
+export * from './components/CodeTabs';
+export * from './components/Container';
+export * from './components/CopyableCode';
+export * from './components/CrossPageToasts';
+export * from './components/DataField';
+export * from './components/DatePicker';
+
+// File Components
+export * from './components/FileInput';
+export * from './components/FileItem';
+export * from './components/FileList';
+
+// Form Components
+export * from './components/FormControl';
+export * from './components/FormLabel';
+export * from './components/GuideCue';
+
+// Icon Components
+export * from './components/Icon';
+export * from './components/IconButton';
+
+// Info Components
+export * from './components/InfoSprinkle';
+export * from './components/InlineCode';
+
+// Input Components
+export * from './components/Input';
+export * from './components/LineGraph';
+export * from './components/Link';
+
+// Loading Components
+export * from './components/Loaders';
+export * from './components/Markdown';
+export * from './components/Masonry';
+export * from './components/MaxLengthIndicator';
+export * from './components/MDXEditor';
+export * from './components/Menu';
+export * from './components/Modal';
+export * from './components/MonthRangePicker';
+
+// Navigation Components
+export * from './components/Pagination';
+
+// Input Variants
+export * from './components/PasswordInput';
+export * from './components/PinInput';
+
+// Progress Components
+export * from './components/ProgressBar';
+export * from './components/RadialProgress';
+
+// Interactive Components
+export * from './components/Radio';
+export * from './components/SeeMoreButton';
+export * from './components/SegmentedControl';
+export * from './components/SegmentedProgressBar';
+export * from './components/Select';
+export * from './components/Slider';
+export * from './components/Spinner';
+export * from './components/Switch';
+
+// Layout Components
+export * from './components/Table';
+export * from './components/Tabs';
+export * from './components/Tag';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/Tooltip';
+// Typography Components (excluding Link to avoid conflict with Link component)
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  Subtext,
+  Subtitle,
+  Text,
+} from './components/Typography';
+export * from './components/UrlInput';

package/src/theme/Palette.stories.tsx

@@ -0,0 +1,171 @@
+import React, { MouseEventHandler, useState } from 'react';
+import { Box, Flex, useTheme, useToken, VStack } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+import { lighten, readableColor } from 'polished';
+
+import { Tooltip } from '../components/Tooltip';
+import { H4, Text } from '../components/Typography';
+
+const meta: Meta = {
+  title: 'Setup/Theme',
+};
+
+export default meta;
+type Story = StoryFn<typeof meta>;
+
+const ColorCard = ({
+  color,
+  shade,
+  shadeValue,
+}: {
+  color: string;
+  shade: string;
+  shadeValue: string;
+}) => {
+  const [wasCopied, setWasCopied] = useState<boolean>();
+  const theme = useTheme();
+
+  // Function to resolve nested color tokens to final hex values
+  const resolveColorToken = (tokenValue: string): string => {
+    // If it's already a hex color, return it
+    if (tokenValue.startsWith('#')) {
+      return tokenValue;
+    }
+
+    // If it's a token reference like "blue.900", resolve it
+    if (tokenValue.includes('.')) {
+      const [colorName, shade] = tokenValue.split('.');
+      const resolvedColor = theme.colors?.[colorName]?.[shade];
+
+      // If the resolved color is still a token reference, resolve it recursively
+      if (resolvedColor && typeof resolvedColor === 'string') {
+        return resolveColorToken(resolvedColor);
+      }
+
+      return resolvedColor || tokenValue;
+    }
+
+    // Try to get it from useToken as fallback
+    return useToken('colors', tokenValue) || tokenValue;
+  };
+
+  const hexCode = resolveColorToken(shadeValue);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
+    navigator.clipboard.writeText(hexCode);
+    setWasCopied(true);
+    setTimeout(() => {
+      setWasCopied(false);
+    }, 2000);
+  };
+
+  // Helper function to safely use polished functions
+  const getReadableColor = (bgColor: string) => {
+    try {
+      return readableColor(bgColor);
+    } catch {
+      return 'white'; // fallback
+    }
+  };
+
+  const getLightenedColor = (bgColor: string) => {
+    try {
+      return lighten(0.2, bgColor);
+    } catch {
+      return bgColor; // fallback to original color
+    }
+  };
+
+  return (
+    <Flex flexDir="column" align="center" key={shade} p={2}>
+      <Tooltip label="Copy hex code" placement="top">
+        {/* Color block */}
+        <Flex
+          w="100px"
+          h="100px"
+          align="flex-end"
+          bg={shadeValue}
+          borderRadius="md"
+          boxShadow="md"
+          as="button"
+          transition="transform 0.1s ease-in-out"
+          // @ts-expect-error as prop
+          onClick={handleClick}
+          _hover={{
+            transform: 'scale(1.05)',
+          }}
+        >
+          {wasCopied ? (
+            <Flex
+              color={getReadableColor(hexCode)}
+              w="100%"
+              h="100%"
+              justify="center"
+              align="center"
+            >
+              Copied!
+            </Flex>
+          ) : (
+            <Box
+              // Label
+              textAlign="center"
+              mt={4}
+              color={getReadableColor(getLightenedColor(hexCode))}
+              bgColor={getLightenedColor(hexCode)}
+              m={2}
+              p={1}
+              w="100%"
+              borderRadius="md"
+            >
+              <Text color="inherit">{hexCode}</Text>
+            </Box>
+          )}
+        </Flex>
+      </Tooltip>
+      <Text color="gray.1200" mt={2}>
+        {shade ? `${color}.${shade}` : color}
+      </Text>
+      <Text color="gray.800">{shadeValue !== hexCode && shadeValue}</Text>
+    </Flex>
+  );
+};
+
+export const Default: Story = (args) => {
+  const theme = useTheme();
+  return (
+    <VStack gap={4} align="flex-start">
+      {Object.entries(theme.semanticTokens?.colors || {})
+        .filter(([color]) => !color.startsWith('chakra'))
+        .map(([color, shades]) => (
+          <Flex key={color} gap={4} align="center">
+            <H4 mb={2} w="100px" textTransform="capitalize" color="gray.1200">
+              {color}
+            </H4>
+            <Flex gap={2}>
+              {typeof shades === 'string' ? (
+                // Handle simple string values (e.g., "white", "black")
+                <ColorCard
+                  key={color}
+                  color={color}
+                  shade=""
+                  shadeValue={shades}
+                />
+              ) : (
+                // Handle object values with multiple shades
+                Object.entries(shades as Record<string, string>).map(
+                  ([shade, shadeValue]) => (
+                    <ColorCard
+                      key={shade}
+                      color={color}
+                      shade={shade}
+                      shadeValue={shadeValue}
+                    />
+                  )
+                )
+              )}
+            </Flex>
+          </Flex>
+        ))}
+    </VStack>
+  );
+};

package/src/theme/colors.ts

@@ -0,0 +1,64 @@
+export const colors = {
+  primary: {
+    lighter: 'blue.50',
+    light: 'blue.300',
+    main: 'blue.900',
+    dark: 'blue.1000',
+  },
+  secondary: {
+    lighter: 'purple.50',
+    light: 'purple.300',
+    main: 'purple.500',
+    dark: 'purple.700',
+  },
+  danger: {
+    lighter: 'red.50',
+    light: '#FFC9C9',
+    main: 'red.500',
+    dark: '#961616',
+  },
+  success: {
+    lighter: '#EBFBF1',
+    light: '#C1F4D4',
+    main: '#019939',
+    dark: '#016626',
+  },
+  warning: {
+    lighter: '#FFF6E7',
+    light: '#FFE9BA',
+    main: 'yellow.400',
+    dark: '#9D6508',
+  },
+  gray: {
+    50: '#F4F5F6',
+    100: '#EAECEF',
+    200: '#E5E7EB',
+    300: '#EBF0FB',
+    400: '#D1D4DA',
+    500: '#C7CAD1',
+    600: '#BDC1C9',
+    700: '#AEB2BC',
+    800: '#9499A5',
+    900: '#7F8493',
+    1000: '#6B7180',
+    1100: '#595E6A',
+    1200: '#474B55',
+    1300: '#363840',
+    1400: '#24262B',
+    1500: '#121315',
+  },
+  blue: {
+    100: '#FDFDFF',
+    200: '#FAFBFE',
+    300: '#EFF4FF',
+    400: '#D6E0F7',
+    500: '#94b0ec',
+    600: '#3182ce',
+    700: '#6c92e4',
+    800: '#4272dd',
+    900: '#1751D0',
+    1000: '#113B98',
+  },
+  white: '#FFFFFF',
+  black: '#121212',
+};

package/src/theme/font.ts

@@ -0,0 +1,23 @@
+// Placeholder font objects that can be overridden by the consuming application
+// The consuming app should define these fonts and pass them via theme customization
+
+export const inter = {
+  style: {
+    fontFamily: '"Inter", sans-serif',
+  },
+  variable: '--es-font',
+};
+
+export const noto = {
+  style: {
+    fontFamily: '"Noto Sans", sans-serif',
+  },
+  variable: '--font-noto',
+};
+
+export const pretendard = {
+  style: {
+    fontFamily: '"Pretendard Variable", sans-serif',
+  },
+  variable: '--font-pretendard',
+};

package/src/theme/global.ts

@@ -0,0 +1,30 @@
+import { inter, noto, pretendard } from './font';
+
+export const global = {
+  ':root': {
+    '--chakra-colors-chakra-body-text': '#121315', // gray.1500 hex value
+    '--chakra-colors-chakra-body-bg': '#FFFFFF',
+  },
+
+  html: {
+    height: 'var(--chakra-vh)',
+    fontSize: 14,
+    fontFamily: [
+      pretendard.style.fontFamily,
+      inter.style.fontFamily,
+      noto.style.fontFamily,
+    ].join(','),
+    overflow: 'auto',
+  },
+
+  'html, body': {
+    color: 'gray.1500', // Set the default body color
+  },
+
+  '#__next': {
+    height: 'var(--chakra-vh)',
+  },
+  "body[data-lang='es']": {
+    fontFamily: inter.style.fontFamily,
+  },
+} as const;

package/src/theme/index.ts

@@ -0,0 +1,49 @@
+import { extendTheme } from '@chakra-ui/react';
+
+import { colors } from './colors';
+import { global } from './global';
+
+const theme = extendTheme({
+  colors,
+  semanticTokens: {
+    colors: {
+      ...colors,
+      'chakra-body-text': 'gray.1500',
+      'chakra-body-bg': 'white',
+      'chakra-body-text-secondary': 'gray.1200',
+    },
+  },
+  styles: {
+    global,
+  },
+
+  fonts: {
+    body: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
+    heading: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
+  },
+
+  // 반응형 폰트 사이즈 - 모바일에서는 더 작은 폰트 크기, 데스크톱에서는 기존 크기 유지
+  fontSizes: {
+    // 커스텀 폰트 크기 토큰 (em 단위 사용)
+    // xs: { base: '0.7em', md: '0.7em' },
+    subtitle: { base: '0.8em', md: '0.92em' },
+    subtext: { base: '0.8em', md: '0.92em' },
+    p: { base: '0.9em', md: '1em' },
+    h5: { base: '1.1em', md: '1.2em' },
+    h4: { base: '1.25em', md: '1.44em' },
+    h3: { base: '1.5em', md: '1.75em' },
+    h2: { base: '2em', md: '2.5em' },
+    h1: { base: '2.4em', md: '3em' },
+  },
+
+  radii: {
+    none: '0',
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    xl: '32px',
+    full: '9999px',
+  },
+});
+
+export default theme;

package/src/translations/Defaults.translations.json

@@ -0,0 +1,100 @@
+{
+  "get_started": {
+    "ko": "시작하기",
+    "en": "Get Started",
+    "zh": "开始",
+    "ja": "始める",
+    "es": "Comenzar"
+  },
+  "next": {
+    "ko": "다음",
+    "en": "Next",
+    "zh": "下一个",
+    "ja": "次",
+    "es": "Siguiente"
+  },
+  "copy": {
+    "ko": "복사",
+    "en": "Copy",
+    "zh": "复制",
+    "ja": "コピー",
+    "es": "Copiar"
+  },
+  "copied": {
+    "ko": "복사 완료",
+    "en": "Copy completed",
+    "zh": "复制完成",
+    "ja": "コピー完了",
+    "es": "Copia completada"
+  },
+  "see_more": {
+    "ko": "더보기",
+    "en": "See more",
+    "zh": "查看更多",
+    "ja": "もっと見る",
+    "es": "Ver más"
+  },
+  "previous": {
+    "ko": "이전",
+    "en": "Previous",
+    "zh": "以前",
+    "ja": "前",
+    "es": "Anterior"
+  },
+  "go_next_page_button": {
+    "ko": "다음",
+    "en": "Next",
+    "zh": "下一个",
+    "ja": "次",
+    "es": "Siguiente"
+  },
+  "pagination_range_text": {
+    "ko": "{num_total_items}개 중 {range_start} - {range_end} 표시 중",
+    "en": "Displaying {range_start} - {range_end} of {num_total_items}",
+    "zh": "显示第 {range_start} - {range_end} 项，共 {num_total_items} 项",
+    "ja": "{num_total_items} 件中 {range_start} - {range_end} を表示中",
+    "es": "Mostrando {range_start} - {range_end} de {num_total_items}"
+  },
+  "pagination_items_per_page": {
+    "ko": "항목 수",
+    "en": "items per page",
+    "zh": "每页项目数",
+    "ja": "ページごとの項目数",
+    "es": "elementos por página"
+  },
+  "code_markdown_raw": {
+    "ko": "원문",
+    "en": "Raw",
+    "zh": "原文",
+    "ja": "原文",
+    "es": "Crudo"
+  },
+  "code_markdown_preview": {
+    "ko": "미리보기",
+    "en": "Preview",
+    "zh": "预览",
+    "ja": "プレビュー",
+    "es": "Vista previa"
+  },
+  "month_range_placeholder": {
+    "ko": "월 범위 선택",
+    "en": "Select month range",
+    "zh": "选择月份范围",
+    "ja": "月範囲を選択",
+    "es": "Seleccionar rango de meses"
+  },
+  "clear": {
+    "ko": "지우기",
+    "en": "Clear",
+    "zh": "清除",
+    "ja": "クリア",
+    "es": "Borrar"
+  },
+  "upload_your_file": {
+    "ko": "파일 업로드",
+    "en": "Upload file",
+    "zh": "文件上传",
+    "ja": "ファイルをアップロード",
+    "es": "Subir archivo"
+  }
+}

package/src/types/svg.d.ts

@@ -0,0 +1,15 @@
+declare module '*.svg' {
+  import React from 'react';
+  const SVGComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  export default SVGComponent;
+}
+
+declare module '*.svg?react' {
+  import React from 'react';
+  const SVGComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  export default SVGComponent;
+}

package/src/utils/findKeyByValue.ts

@@ -0,0 +1,17 @@
+/**
+ * Find the key in an object that corresponds to a given value
+ * @param obj - The object to search in
+ * @param value - The value to find the key for
+ * @returns The key that matches the value, or undefined if not found
+ */
+export const findKeyByValue = <T extends Record<string, unknown>>(
+  obj: T,
+  value: unknown
+): keyof T | undefined => {
+  for (const [key, val] of Object.entries(obj)) {
+    if (val === value) {
+      return key as keyof T;
+    }
+  }
+  return undefined;
+};

package/src/utils/formatDateByLocale.ts

@@ -0,0 +1,36 @@
+/**
+ * Formats a date based on the user's locale.
+ * @param {string | Date | undefined} date - The date to format (can be a string, Date object, or undefined).
+ * @param {string} locale - The locale to format the date in (e.g., 'en-US', 'ko-KR').
+ * @returns {string} - The formatted date string, or an empty string if the date is invalid or undefined.
+ */
+export function formatDateByLocale(
+  date?: string | Date,
+  locale: string = 'en'
+): string {
+  if (!date) {
+    // Return an empty string if date is undefined or null
+    return '';
+  }
+
+  const dateObj = typeof date === 'string' ? new Date(date) : date;
+
+  if (isNaN(dateObj?.getTime())) {
+    // Return an empty string if the date is invalid
+    return '';
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  };
+
+  // Adjust options for Korean locale
+  if (locale === 'ko') {
+    options.month = 'numeric'; // Avoid abbreviations in Korean
+    options.day = 'numeric'; // No leading zero
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(dateObj);
+}

package/src/utils/formatFileSize.ts

@@ -0,0 +1,14 @@
+export function formatFileSize(sizeInBytes: number): string {
+  if (sizeInBytes === 0) return '0 Bytes';
+
+  const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(sizeInBytes) / Math.log(1024));
+  const size = sizeInBytes / Math.pow(1024, i);
+
+  // Format with or without decimal places depending on whether the size is an integer
+  const formattedSize = Number.isInteger(size)
+    ? size.toString()
+    : size.toFixed(2);
+
+  return `${formattedSize}${units[i]}`;
+}

package/src/utils/formatNumber.ts

@@ -0,0 +1,29 @@
+/**
+ * Format a number with thousands separators
+ * @param value - The number to format
+ * @param locale - The locale to use for formatting (default: 'en-US')
+ * @returns Formatted number string
+ */
+export const formatNumber = (
+  value: number | string,
+  locale: string = 'en-US'
+): string => {
+  const numericValue = typeof value === 'string' ? parseFloat(value) : value;
+
+  if (isNaN(numericValue)) {
+    return '';
+  }
+
+  return new Intl.NumberFormat(locale).format(numericValue);
+};
+
+/**
+ * Parse a formatted number string back to a number
+ * @param formattedValue - The formatted number string
+ * @returns Parsed number or NaN if invalid
+ */
+export const parseFormattedNumber = (formattedValue: string): number => {
+  // Remove all non-digit characters except decimal point and negative sign
+  const cleanedValue = formattedValue.replace(/[^\d.-]/g, '');
+  return parseFloat(cleanedValue);
+};

package/src/utils/formatTextForMarkdown.ts

@@ -0,0 +1,3 @@
+export const formatForMarkdown = (text: string): string => {
+  return text?.replace(/\\n/g, '  \n'); // Convert single `\n` to a Markdown-compatible line break
+};