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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { Box, Button, HStack, IconButton, VStack } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Icon } from '../Icon';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  args: {
+    label: 'This is a tooltip',
+  },
+  argTypes: {
+    placement: {
+      control: { type: 'select' },
+      options: ['top', 'bottom', 'left', 'right', 'auto'],
+    },
+    isOpen: {
+      control: { type: 'boolean' },
+    },
+  },
+} as Meta<typeof Tooltip>;
+
+const Template: StoryFn<typeof Tooltip> = (args) => (
+  <Box p={8} display="flex" justifyContent="center">
+    <Tooltip {...args}>
+      <Button>Hover me</Button>
+    </Tooltip>
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'This is a default tooltip',
+};
+
+export const DifferentPlacements: StoryFn<typeof Tooltip> = () => (
+  <VStack spacing={8} p={8}>
+    <HStack spacing={8}>
+      <Tooltip label="Top tooltip" placement="top">
+        <Button>Top</Button>
+      </Tooltip>
+      <Tooltip label="Bottom tooltip" placement="bottom">
+        <Button>Bottom</Button>
+      </Tooltip>
+      <Tooltip label="Left tooltip" placement="left">
+        <Button>Left</Button>
+      </Tooltip>
+      <Tooltip label="Right tooltip" placement="right">
+        <Button>Right</Button>
+      </Tooltip>
+    </HStack>
+  </VStack>
+);
+
+export const LongTooltipContent: StoryFn<typeof Tooltip> = () => (
+  <Box p={8} display="flex" justifyContent="center">
+    <Tooltip
+      label="This is a much longer tooltip content that demonstrates how the tooltip handles wrapping and longer text content. It should display nicely even with multiple lines."
+      placement="top"
+    >
+      <Button>Hover for long tooltip</Button>
+    </Tooltip>
+  </Box>
+);
+
+export const CopyButtonExample: StoryFn<typeof Tooltip> = () => {
+  const [tooltipLabel, setTooltipLabel] = useState('Click to copy');
+  const [isTooltipOpen, setIsTooltipOpen] = useState<boolean | undefined>(
+    undefined
+  );
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText('Hello World!');
+    setTooltipLabel('Copied!');
+    setIsTooltipOpen(true);
+
+    setTimeout(() => {
+      setTooltipLabel('Click to copy');
+      setIsTooltipOpen(undefined);
+    }, 2000);
+  };
+
+  return (
+    <Box p={8} display="flex" justifyContent="center">
+      <Tooltip label={tooltipLabel} isOpen={isTooltipOpen} placement="top">
+        <IconButton
+          aria-label="Copy text"
+          icon={<Icon icon="FaRegCopy" />}
+          onClick={handleCopy}
+          variant="tertiary"
+        />
+      </Tooltip>
+    </Box>
+  );
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,22 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Tooltip as ChakraTooltip, useTheme } from '@chakra-ui/react';
+
+import { TooltipProps } from './Tooltip.types';
+
+export const Tooltip = forwardRef(
+  ({ ...rest }: TooltipProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    const theme = useTheme();
+    return (
+      <ChakraTooltip
+        bgColor="gray.1200"
+        placement="top"
+        fontSize={theme.fontSizes.p}
+        closeOnScroll
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,3 @@
+import { TooltipProps as ChakraTooltipProps } from '@chakra-ui/react';
+
+export interface TooltipProps extends ChakraTooltipProps {}

package/src/components/Tooltip/index.ts

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

package/src/components/Typography/H1.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+
+export const H1 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <Heading
+      ref={ref}
+      as="h1"
+      fontSize={theme.fontSizes.h1}
+      fontWeight="bold"
+      {...props}
+    />
+  );
+});
+
+H1.displayName = 'H1';

package/src/components/Typography/H2.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+
+export const H2 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <Heading
+      ref={ref}
+      as="h2"
+      fontSize={theme.fontSizes.h2}
+      fontWeight="semibold"
+      {...props}
+    />
+  );
+});
+
+H2.displayName = 'H2';

package/src/components/Typography/H3.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+
+export const H3 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <Heading
+      ref={ref}
+      as="h3"
+      fontSize={theme.fontSizes.h3}
+      fontWeight="semibold"
+      {...props}
+    />
+  );
+});
+
+H3.displayName = 'H3';

package/src/components/Typography/H4.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+
+export const H4 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <Heading
+      ref={ref}
+      as="h4"
+      fontSize={theme.fontSizes.h4}
+      fontWeight="semibold"
+      {...props}
+    />
+  );
+});
+
+H4.displayName = 'H4';

package/src/components/Typography/H5.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+
+export const H5 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <Heading
+      ref={ref}
+      as="h5"
+      fontSize={theme.fontSizes.h5}
+      fontWeight="bold"
+      {...props}
+    />
+  );
+});
+
+H5.displayName = 'H5';

package/src/components/Typography/Link.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import {
+  Link as ChakraLink,
+  LinkProps,
+  useTheme,
+  useToken,
+} from '@chakra-ui/react';
+import { darken } from 'polished';
+
+export interface LinkCustomProps extends LinkProps {
+  variant?: 'error';
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkCustomProps>(
+  ({ color, variant, ...rest }, ref) => {
+    const theme = useTheme();
+    const defaultColor = theme.semanticTokens.colors.primary.main;
+    const errorColor = theme.semanticTokens.colors.danger.main;
+    const linkColor =
+      useToken(
+        'colors',
+        variant === 'error' ? errorColor : color || defaultColor
+      ) ?? color;
+
+    const getHoverColor = () => {
+      let hoverColor;
+      try {
+        hoverColor = darken(0.1, linkColor);
+      } catch (e) {
+        hoverColor = 'inherit';
+      }
+      return hoverColor;
+    };
+
+    return (
+      <ChakraLink
+        ref={ref}
+        fontWeight="semibold"
+        color={linkColor}
+        _hover={{
+          color: getHoverColor(),
+        }} // Darken by 10% on hover
+        {...rest}
+      />
+    );
+  }
+);
+
+Link.displayName = 'Link';

package/src/components/Typography/Subtext.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { Text, TextProps, useTheme } from '@chakra-ui/react';
+
+export const Subtext = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
+  const theme = useTheme();
+
+  return (
+    <Text
+      ref={ref}
+      fontSize={theme.fontSizes.subtext}
+      fontWeight="regular"
+      {...props}
+    />
+  );
+});
+
+Subtext.displayName = 'Subtext';

package/src/components/Typography/Subtitle.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import { Text, TextProps, useTheme } from '@chakra-ui/react';
+
+export const Subtitle = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <Text
+      ref={ref}
+      as="h6"
+      fontSize={theme.fontSizes.p}
+      fontWeight="medium"
+      color="gray.1000"
+      {...props}
+    />
+  );
+});
+
+Subtitle.displayName = 'Subtitle';

package/src/components/Typography/Text.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { Text as ChakraText, TextProps, useTheme } from '@chakra-ui/react';
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+  (props, ref) => {
+    const theme = useTheme();
+
+    return (
+      <ChakraText
+        ref={ref}
+        as="p"
+        fontSize={theme.fontSizes.p}
+        lineHeight="1.5"
+        fontWeight="medium"
+        color="gray.1200"
+        {...props}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';

package/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TextProps } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { H1, H2, H3, H4, H5, Link, Subtext, Subtitle, Text } from '.';
+
+const meta: Meta<typeof Text> = {
+  title: 'Components/Typography',
+  component: Text,
+};
+
+export default meta;
+type Story = StoryFn<typeof Text>;
+
+export const AllTextStyles: Story = (props: TextProps) => {
+  return (
+    <>
+      <H1 {...props}>
+        H1 - Lorem ipsum dolor sit amet,{' '}
+        <Link variant="error" href="https://example.com">
+          consectetur adipiscing elit
+        </Link>
+      </H1>
+      <H2 {...props}>
+        H2 - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </H2>
+      <H3 {...props}>
+        H3 - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </H3>
+      <H4 {...props}>
+        H4 - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </H4>
+      <H5 {...props}>
+        H5 - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </H5>
+      <Text {...props}>
+        Paragraph - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </Text>
+      <Subtitle {...props}>
+        Subtitle - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </Subtitle>
+      <Subtext {...props}>
+        Subtext - Lorem ipsum dolor sit amet,{' '}
+        <Link href="https://example.com">consectetur adipiscing elit</Link>
+      </Subtext>
+    </>
+  );
+};

package/src/components/Typography/Typography.types.ts

@@ -0,0 +1,3 @@
+import { TextProps } from '@chakra-ui/react';
+
+export type TypographyProps = TextProps;

package/src/components/Typography/index.ts

@@ -0,0 +1,26 @@
+// Component exports
+export { H1 } from './H1';
+export { H2 } from './H2';
+export { H3 } from './H3';
+export { H4 } from './H4';
+export { H5 } from './H5';
+export { Link } from './Link';
+export { Subtext } from './Subtext';
+export { Subtitle } from './Subtitle';
+export { Text } from './Text';
+
+// Type exports
+export type { LinkCustomProps as LinkProps } from './Link';
+export type {
+  TypographyProps as SubtextProps,
+  TypographyProps as SubtitleProps,
+  TypographyProps as TextProps,
+  TypographyProps,
+} from './Typography.types';
+export type {
+  HeadingProps as H1Props,
+  HeadingProps as H2Props,
+  HeadingProps as H3Props,
+  HeadingProps as H4Props,
+  HeadingProps as H5Props,
+} from '@chakra-ui/react';

package/src/components/UrlInput/UrlInput.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { UrlInput, UrlInputProps } from './UrlInput';
+
+const meta: Meta<typeof UrlInput> = {
+  title: 'Components/UrlInput',
+  component: UrlInput,
+  argTypes: {
+    placeholder: { control: 'text' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg'],
+      },
+    },
+    isDisabled: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    leftAddon: { control: 'text' },
+    rightAddon: { control: 'text' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<UrlInputProps> = (args) => <UrlInput {...args} />;
+
+export const Basic: StoryFn<UrlInputProps> = Template.bind({});
+Basic.args = {
+  placeholder: 'mysite',
+  size: 'md',
+  isDisabled: false,
+  isInvalid: false,
+  leftAddon: 'https://',
+  rightAddon: '.com',
+};
+
+export const Disabled: StoryFn<UrlInputProps> = Template.bind({});
+Disabled.args = {
+  placeholder: 'mysite',
+  size: 'md',
+  isDisabled: true,
+  isInvalid: false,
+  leftAddon: 'https://',
+  rightAddon: '.com',
+};
+
+export const Invalid: StoryFn<UrlInputProps> = Template.bind({});
+Invalid.args = {
+  placeholder: 'mysite',
+  size: 'md',
+  isDisabled: false,
+  isInvalid: true,
+  leftAddon: 'https://',
+  rightAddon: '.com',
+};
+
+export const CustomAddons: StoryFn<UrlInputProps> = Template.bind({});
+CustomAddons.args = {
+  placeholder: 'mysite',
+  size: 'md',
+  isDisabled: false,
+  isInvalid: false,
+  leftAddon: 'ftp://',
+  rightAddon: '/home',
+};

package/src/components/UrlInput/UrlInput.tsx

@@ -0,0 +1,47 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { InputGroup, InputLeftAddon, InputProps } from '@chakra-ui/react';
+
+import { Input } from '@/components/Input';
+
+export interface UrlInputProps extends InputProps {
+  leftAddon?: string;
+  rightAddon?: string;
+}
+
+export const UrlInput = forwardRef(
+  (
+    { leftAddon = 'https://', value, onChange, ...rest }: UrlInputProps,
+    ref?: ForwardedRef<HTMLInputElement>
+  ) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = e.target.value;
+      if (onChange) {
+        onChange({
+          ...e,
+          target: {
+            ...e.target,
+            value: leftAddon + inputValue,
+          },
+        });
+      }
+    };
+
+    const displayValue =
+      typeof value === 'string' ? value.replace(leftAddon, '') : value;
+
+    return (
+      <InputGroup width="100%">
+        {leftAddon && <InputLeftAddon>{leftAddon}</InputLeftAddon>}
+        <Input
+          name="service_url"
+          {...rest}
+          value={displayValue}
+          onChange={handleChange}
+          ref={ref}
+        />
+      </InputGroup>
+    );
+  }
+);
+
+UrlInput.displayName = 'UrlInput';

package/src/components/UrlInput/index.tsx

@@ -0,0 +1 @@
+export { UrlInput } from './UrlInput';

package/src/hooks/useLocale.ts

@@ -0,0 +1,11 @@
+/**
+ * Simple locale hook
+ * This is a stub implementation - replace with your actual locale logic
+ */
+export const useLocale = () => {
+  return {
+    language: 'en', // Default to English
+  };
+};
+
+export default useLocale;

package/src/hooks/useTranslate.ts

@@ -0,0 +1,57 @@
+'use client';
+import { useCallback } from 'react';
+
+import defaultTranslations from '../translations/Defaults.translations.json';
+import { formatForMarkdown } from '../utils/formatTextForMarkdown';
+
+const DEFAULT_LOCALE = 'ko';
+
+// Given a block of text and variables, replaces instances of the provided variables in the text
+const replaceVariables = (text: string, variables?: { [key: string]: any }) => {
+  if (!variables) return formatForMarkdown(text);
+
+  const regex = /({(.*?)})/gi;
+
+  const potentialKeys: string[] = text.match(regex) ?? [];
+  const textParts: Array<string> = [];
+  let lastIndex = 0;
+  potentialKeys.forEach((potentialKey: string) => {
+    const keyIndex = text.indexOf(potentialKey);
+    // Push stuff up to potential key
+    textParts.push(text.slice(lastIndex, keyIndex));
+    // Push potential key
+    textParts.push(text.slice(keyIndex, keyIndex + potentialKey.length));
+    lastIndex = keyIndex + potentialKey.length;
+  });
+  // Push remaining
+  textParts.push(text.slice(lastIndex));
+
+  const parts = textParts.map(
+    (partText: string) =>
+      // Slice to remove { and }
+      variables[partText.slice(1, partText.length - 1)] ??
+      formatForMarkdown(partText)
+  );
+
+  return parts.every((part) => typeof part === 'string')
+    ? parts.join('')
+    : parts;
+};
+
+const getLanguage = () => {
+  return 'ko';
+};
+
+export const useTranslate = (translations = {}) => {
+  const userLanguage = getLanguage();
+  return useCallback(
+    (key: string, variables?: { [key: string]: any }) => {
+      const locale = (userLanguage as string) ?? DEFAULT_LOCALE;
+      const translation: string =
+        { ...defaultTranslations, ...translations }[key]?.[locale] ?? key;
+      const finalRes = replaceVariables(translation, variables);
+      return finalRes;
+    },
+    [userLanguage, translations]
+  );
+};