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

package/src/components/Link/Link.tsx

@@ -0,0 +1,93 @@
+import {
+  Link as ChakraLink,
+  LinkProps as ChakraLinkProps,
+} from '@chakra-ui/react';
+
+import { linkTextStyles } from '@/components/Link/Link.styles';
+// Optional Next.js Link import
+let NextLink: any;
+try {
+  NextLink = require('next/link').default;
+} catch {
+  NextLink = null;
+}
+
+/**
+ * Link component that combines Chakra UI Link with Next.js Link functionality.
+ *
+ * This component provides:
+ * - Next.js client-side navigation for internal routes
+ * - Chakra UI styling and theming
+ * - All Chakra UI Link props support
+ * - Automatic styling from linkTextStyles
+ *
+ * @example
+ * ```tsx
+ * // Internal navigation
+ * <Link href="/dashboard">
+ *   <Text>Go to Dashboard</Text>
+ * </Link>
+ *
+ * // External link with target="_blank"
+ * <Link
+ *   href="https://example.com"
+ *   target="_blank"
+ *   rel="noopener noreferrer"
+ * >
+ *   <Text>External Link</Text>
+ * </Link>
+ *
+ * // With Chakra UI props
+ * <Link
+ *   href="/profile"
+ *   color="blue.500"
+ *   fontSize="lg"
+ *   _hover={{ textDecoration: 'underline' }}
+ * >
+ *   <Text>Profile</Text>
+ * </Link>
+ * ```
+ */
+interface LinkProps extends ChakraLinkProps {
+  /** The URL to navigate to. Can be internal route or external URL */
+  href: string;
+  /** The content to render inside the link */
+  children: React.ReactNode;
+}
+
+/**
+ * Enhanced Link component that combines Next.js routing with Chakra UI styling.
+ *
+ * Features:
+ * - Uses Next.js Link for client-side navigation
+ * - Applies Chakra UI styling and theme support
+ * - Supports all Chakra UI Link props (color, fontSize, _hover, etc.)
+ * - Automatically applies linkTextStyles
+ * - Handles both internal and external links seamlessly
+ *
+ * @param props - LinkProps object containing href, children, and optional Chakra UI props
+ * @returns A styled link component with Next.js routing capabilities
+ */
+export const Link = ({ href, children, ...rest }: LinkProps) => {
+  // Use Next.js Link if available, otherwise fall back to regular anchor
+  if (NextLink && href.startsWith('/')) {
+    return (
+      <ChakraLink
+        as={NextLink}
+        href={href}
+        passHref
+        {...linkTextStyles}
+        {...rest}
+      >
+        {children}
+      </ChakraLink>
+    );
+  }
+
+  // Regular link for external URLs or when Next.js is not available
+  return (
+    <ChakraLink href={href} {...linkTextStyles} {...rest}>
+      {children}
+    </ChakraLink>
+  );
+};

package/src/components/Link/index.ts

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

package/src/components/Loaders/PageLoader.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { PageLoader } from './PageLoader';
+
+const meta: Meta<typeof PageLoader> = {
+  title: 'Components/PageLoader',
+  component: PageLoader,
+  argTypes: {
+    isLoading: {
+      type: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof PageLoader>;
+
+export const Basic: Story = (args) => {
+  return (
+    <Box position="relative" p="128px" bg="red">
+      <PageLoader {...args} />
+    </Box>
+  );
+};
+Basic.args = {
+  isLoading: true,
+};

package/src/components/Loaders/PageLoader.tsx

@@ -0,0 +1,30 @@
+import BounceLoader from 'react-spinners/BounceLoader';
+import { Box, Flex, FlexProps } from '@chakra-ui/react';
+
+import theme from '../../theme';
+
+export const PageLoader = ({
+  isLoading,
+  ...rest
+}: FlexProps & { isLoading: boolean }) => {
+  return (
+    <Flex
+      position="fixed"
+      w="100vw"
+      h="100vh"
+      top={0}
+      left={0}
+      align="center"
+      justify="center"
+      opacity={isLoading ? 0.5 : 0}
+      transition="0.3s opacity ease"
+      bg={theme.colors.white}
+      zIndex={9999}
+      {...rest}
+    >
+      <Box position="relative">
+        <BounceLoader color={theme.colors.blue[500]} style={{ zIndex: 999 }} />
+      </Box>
+    </Flex>
+  );
+};

package/src/components/Loaders/SectionLoader.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { SectionLoader } from './SectionLoader';
+
+const meta: Meta<typeof SectionLoader> = {
+  title: 'Components/SectionLoader',
+  component: SectionLoader,
+  argTypes: {
+    isLoading: {
+      type: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof SectionLoader>;
+
+export const Basic: Story = (args) => {
+  return (
+    <Box position="relative" p="128px" bg="red">
+      <SectionLoader {...args} />
+    </Box>
+  );
+};

package/src/components/Loaders/SectionLoader.tsx

@@ -0,0 +1,30 @@
+import DotLoader from 'react-spinners/DotLoader';
+import { Flex, FlexProps, useToken } from '@chakra-ui/react';
+
+import theme from '../../theme';
+
+export const SectionLoader = ({
+  isLoading,
+  ...rest
+}: FlexProps & { isLoading: boolean }) => {
+  if (!isLoading) return;
+  return (
+    <Flex
+      position="absolute"
+      w="100%"
+      h="100%"
+      top={0}
+      left={0}
+      align="center"
+      justify="center"
+      bg="white"
+      transition="0.3 opacity ease"
+      zIndex={9999}
+      {...rest}
+    >
+      <DotLoader
+        color={useToken('colors', theme.semanticTokens.colors.primary.main)}
+      />
+    </Flex>
+  );
+};

package/src/components/Loaders/index.ts

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

package/src/components/MDXEditor/MDXEditor.css

@@ -0,0 +1,21 @@
+/* MDXEditor popup container overrides */
+[class*='_popupContainer_'] {
+  z-index: 9999 !important;
+}
+
+.mdxeditor-popup-container {
+  z-index: 9999 !important;
+}
+
+/* MDXEditor select content overrides */
+[class*='_selectContent_'] {
+  z-index: 9999 !important;
+}
+
+.mdxeditor-select-content {
+  z-index: 9999 !important;
+}
+
+[data-radix-select-content] {
+  z-index: 9999 !important;
+}

package/src/components/MDXEditor/MDXEditor.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MDXEditor } from './MDXEditor';
+
+const meta = {
+  title: 'Components/MDXEditor',
+  component: MDXEditor,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MDXEditor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleMarkdown = `# Hello World
+This is a sample markdown text. You can:
+- Make lists
+- **Bold text**
+- *Italic text*
+- Create [links](https://example.com)
+## Second Level Heading
+> This is a blockquote
+1. Numbered lists
+2. Work too!
+---
+### Try the editor out!
+`;
+
+export const Default: Story = {
+  args: {
+    markdown: sampleMarkdown,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    markdown: '',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    markdown: '',
+    placeholder: '마크다운을 입력해보세요...',
+  },
+};

package/src/components/MDXEditor/MDXEditor.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { useRef } from 'react';
+import { Box, useTheme } from '@chakra-ui/react';
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  headingsPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  MDXEditor as Editor,
+  quotePlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+  UndoRedo,
+} from '@mdxeditor/editor';
+
+import '@mdxeditor/editor/style.css';
+import './MDXEditor.css';
+
+import { type MDXEditorProps } from './MDXEditor.types';
+
+export function MDXEditor({
+  containerProps,
+  autoFocus = true,
+  ...rest
+}: MDXEditorProps) {
+  const theme = useTheme();
+  const editorRef = useRef<any>(null);
+
+  const handleContainerClick = (e: React.MouseEvent) => {
+    // Only focus if clicking on the container itself, not on toolbar elements
+    const target = e.target as HTMLElement;
+    const isToolbarClick = target.closest('.toolbar');
+
+    if (!isToolbarClick && editorRef.current) {
+      editorRef.current.focus();
+    }
+  };
+
+  return (
+    <Box {...containerProps}>
+      <Box
+        width="100%"
+        borderWidth="1px"
+        borderRadius="lg"
+        overflow="hidden"
+        onClick={handleContainerClick}
+        cursor="text"
+        sx={{
+          ...containerProps?.sx,
+          '.mdxeditor': {
+            width: '100%',
+            minHeight: '300px',
+            bg: theme.colors.white,
+            display: 'flex',
+            flexDirection: 'column',
+          },
+          '.toolbar': {
+            display: 'flex',
+            gap: theme.space[2],
+            p: theme.space[2],
+            borderBottomWidth: '1px',
+            bg: theme.colors.gray[50],
+            flexShrink: 0,
+            cursor: 'default',
+          },
+          // Target the root contenteditable wrapper
+          '[class*="_rootContentEditableWrapper_"]': {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+          },
+          // Target the actual contenteditable element
+          '[contenteditable="true"]': {
+            flex: 1,
+            minHeight: '100%',
+            outline: 'none',
+          },
+          // Target any intermediate wrapper elements
+          '[class*="_contentEditable_"]': {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+          },
+          '.content-editable': {
+            padding: theme.space[4],
+            color: theme.colors.black,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.space[1.5],
+            flex: 1,
+            minHeight: '100%',
+
+            'h1, h2, h3, h4, h5': {
+              marginBottom: theme.space[0.5],
+              fontWeight: 'bold',
+            },
+
+            'h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child)':
+              {
+                marginTop: theme.space[1],
+              },
+
+            h1: {
+              fontSize: theme.fontSizes.h1,
+            },
+            h2: {
+              fontSize: theme.fontSizes.h2,
+            },
+            h3: {
+              fontSize: theme.fontSizes.h3,
+            },
+            h4: {
+              fontSize: theme.fontSizes.h4,
+            },
+            h5: {
+              fontSize: theme.fontSizes.h5,
+            },
+
+            'ol, ul': {
+              marginTop: theme.space[2],
+              paddingInlineStart: theme.space[4],
+            },
+
+            li: {
+              lineHeight: '1.5',
+              marginBottom: theme.space[2],
+            },
+
+            blockquote: {
+              borderLeftWidth: '4px',
+              borderLeftColor: theme.colors.blue[200],
+              bg: theme.colors.blue[50],
+              pl: theme.space[4],
+              py: theme.space[2],
+              my: theme.space[4],
+              color: theme.colors.gray[700],
+            },
+
+            a: {
+              color: theme.colors.blue[500],
+              textDecoration: 'underline',
+            },
+
+            code: {
+              fontFamily: 'mono',
+              bg: theme.colors.gray[100],
+              px: theme.space[1],
+              borderRadius: theme.radii.sm,
+            },
+          },
+        }}
+      >
+        <Editor
+          ref={editorRef}
+          contentEditableClassName="content-editable"
+          // @ts-expect-error - overlayContainer prop may not be available in this version
+          overlayContainer={
+            typeof document !== 'undefined' ? document.body : undefined
+          }
+          autoFocus={autoFocus}
+          plugins={[
+            headingsPlugin({
+              allowedHeadingLevels: [2, 3, 4, 5],
+            }),
+            listsPlugin(),
+            quotePlugin(),
+            thematicBreakPlugin(),
+            markdownShortcutPlugin(),
+            toolbarPlugin({
+              toolbarContents: () => (
+                <>
+                  <UndoRedo />
+                  <BoldItalicUnderlineToggles />
+                  <BlockTypeSelect />
+                  {/* <CreateLink />
+                  <InsertImage /> */}
+                </>
+              ),
+            }),
+          ]}
+          {...rest}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/components/MDXEditor/MDXEditor.types.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '@chakra-ui/react';
+import { MDXEditorProps as BaseEditorProps } from '@mdxeditor/editor';
+
+export interface MDXEditorProps extends BaseEditorProps {
+  containerProps?: BoxProps;
+}

package/src/components/MDXEditor/index.ts

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

package/src/components/Markdown/Markdown.module.css

@@ -0,0 +1,30 @@
+.markdownStyles {
+  color: black;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2em; /* Intended for longer form content like update modals */
+}
+
+.markdownStyles > h1,
+.markdownStyles > h2,
+.markdownStyles > h3,
+.markdownStyles > h4 {
+  margin-bottom: 0.5em !important;
+}
+.markdownStyles > h1:not(:first-child),
+.markdownStyles > h2:not(:first-child),
+.markdownStyles > h3:not(:first-child),
+.markdownStyles > h4:not(:first-child) {
+  margin-top: 1em !important;
+}
+
+.markdownStyles ol,
+.markdownStyles ul {
+  margin-top: 8px;
+  padding-inline-start: 16px;
+}
+.markdownStyles li {
+  /* 1.5x standard line height */
+  line-height: calc(16px * 1.5);
+  margin-bottom: 8px;
+}

package/src/components/Markdown/Markdown.tsx

@@ -0,0 +1,133 @@
+import ReactMarkdown from 'react-markdown';
+import { Box } from '@chakra-ui/react';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import remarkBreaks from 'remark-breaks';
+import remarkFlexibleMarkers from 'remark-flexible-markers';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import { formatForMarkdown } from '@/utils/formatTextForMarkdown';
+
+import 'katex/dist/katex.min.css'; // Import KaTeX CSS
+
+import { Code } from '../Code';
+import { InlineCode } from '../InlineCode';
+import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '../Table';
+import { H1, H2, H3, H4, H5, Link, Subtitle, Text } from '../Typography';
+import MarkdownStyles from './Markdown.module.css';
+import { MarkdownProps } from './Markdown.types';
+
+// Simple wrapper components to avoid type issues
+const H1Wrapper = (props: any) => <H1 {...props} />;
+const H2Wrapper = (props: any) => <H2 {...props} />;
+const H3Wrapper = (props: any) => <H3 {...props} />;
+const H4Wrapper = (props: any) => <H4 {...props} />;
+const H5Wrapper = (props: any) => <H5 {...props} />;
+const SubtitleWrapper = (props: any) => <Subtitle {...props} />;
+const TheadWrapper = (props: any) => <Thead {...props} />;
+const TbodyWrapper = (props: any) => <Tbody {...props} />;
+const TrWrapper = (props: any) => <Tr {...props} />;
+const TdWrapper = (props: any) => <Td {...props} />;
+const ThWrapper = (props: any) => <Th {...props} />;
+
+// Prepare base components
+export const baseMarkdownComponents = {
+  h1: H1Wrapper,
+  h2: H2Wrapper,
+  h3: H3Wrapper,
+  h4: H4Wrapper,
+  h5: H5Wrapper,
+  h6: SubtitleWrapper,
+  // The key fix: instead of trying to unwrap pre/code combinations,
+  // we customize just the code element to detect if it's a code block
+  code: ({ inline, className, children, ...props }: any) => {
+    // If it's inline code (no language class), use InlineCode component
+    if (inline || !className) {
+      return <InlineCode {...props}>{children}</InlineCode>;
+    }
+
+    // For code blocks, use the Code component with language
+    const language = className.match(/language-(.*)/)?.[1];
+    return (
+      <Code
+        language={language}
+        onCopy={(textToCopy: string) => {
+          navigator.clipboard
+            .writeText(textToCopy)
+            .then(() => {
+              console.log('Text copied to clipboard');
+            })
+            .catch((err) => {
+              console.error('Could not copy text to clipboard:', err);
+            });
+        }}
+        containerProps={{ mb: 4, className }}
+        {...props}
+      >
+        {children}
+      </Code>
+    );
+  },
+  // Make the pre tag a no-op that just renders children
+  pre: ({ children }: any) => <Box>{children}</Box>,
+  p: (props: any) => <Text color="inherit" {...props} />,
+  a: ({ style, ...rest }: any) => (
+    //  `children` should be inside ...rest
+    <Link target="_blank" {...rest} />
+  ),
+  ol: ({ style, ...rest }: any) => (
+    <ol
+      style={{ paddingInlineStart: '22px', color: 'inherit', ...style }}
+      {...rest}
+    />
+  ),
+  ul: ({ style, ...rest }: any) => (
+    <ul
+      style={{ paddingInlineStart: '22px', color: 'inherit', ...style }}
+      {...rest}
+    />
+  ),
+  img: ({ style, ...rest }: any) => (
+    <img style={{ maxWidth: '100%', ...style }} alt="chat-image" {...rest} />
+  ),
+  table: (props: any) => (
+    <TableContainer mt={4}>
+      <Table {...props} />
+    </TableContainer>
+  ),
+  thead: TheadWrapper,
+  tbody: TbodyWrapper,
+  tr: TrWrapper,
+  td: TdWrapper,
+  th: ThWrapper,
+};
+
+export const Markdown = ({
+  className,
+  components,
+  children,
+  ...rest
+}: MarkdownProps) => {
+  // Combine with any custom components provided by the user
+  // The user-provided ones will override our defaults if there's a conflict
+  const allComponents = { ...baseMarkdownComponents, ...components };
+
+  return (
+    <div className={[MarkdownStyles.markdownStyles, className].join(' ')}>
+      <ReactMarkdown
+        remarkPlugins={[
+          remarkGfm,
+          remarkFlexibleMarkers,
+          remarkBreaks,
+          remarkMath,
+        ]}
+        rehypePlugins={[rehypeRaw, rehypeKatex]}
+        components={allComponents}
+        {...rest}
+      >
+        {formatForMarkdown(children ?? '')}
+      </ReactMarkdown>
+    </div>
+  );
+};

package/src/components/Markdown/Markdown.types.ts

@@ -0,0 +1,5 @@
+import { Options } from 'react-markdown';
+
+export type MarkdownProps = Options & {
+  className?: string;
+};

package/src/components/Markdown/index.ts

@@ -0,0 +1,2 @@
+export { baseMarkdownComponents, Markdown } from './Markdown';
+export type { MarkdownProps } from './Markdown.types';