Merge branch 'main' into feature/2024-07-13-sparkle

src/app/edit/layout.tsx

@@ -97,8 +97,7 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     const mathModel = models.filter((model) => model.id === file.id);
 
     if (mathModel.length > 0) {
-      mathModel[0].model &&
-        setActiveModel(mathModel[0].filename, mathModel[0].model, willChangeEditorId);
+      mathModel[0].model && setActiveModel(mathModel[0].id, mathModel[0], willChangeEditorId);
       mathModel[0].model &&
         setModels(
           { filename: mathModel[0].filename, value: '', language: 'typescript', id: file.id },

src/components/edit/tabItem/index.tsx

@@ -11,7 +11,7 @@ interface TabProps {
   filename: string;
   active: boolean;
   editorId: number;
-  setActiveModel: (filename: string, model: any, editorId: number) => void;
+  setActiveModel: (id: string, model: any, editorId: number) => void;
   editor: any;
   model: editor.ITextModel;
   removeModel: (filename: string, editorId: number) => any;

src/components/editor/index.tsx

@@ -3,13 +3,15 @@
 import { useCallback } from 'react';
 import Editor, { Monaco, loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
+import { editor } from 'monaco-editor';
 import { useDroppable } from '@dnd-kit/core';
 
 import {
   useEditorStore,
   useMonacoStore,
   useActiveModelStore,
   useActiveEditorStore,
+  useModelsStore,
 } from '@/store/editorStore';
 import { TabBar } from '@/components/edit/tabbar';
 
@@ -20,8 +22,9 @@ interface CodeEditorProps {
 export default function CodeEditor({ editorId }: CodeEditorProps) {
   const { getEditor, setEditor } = useEditorStore();
   const { setMonaco } = useMonacoStore();
-  const { activeMap } = useActiveModelStore();
-  const { setActiveEditor } = useActiveEditorStore();
+  const { setModels } = useModelsStore();
+  const { activeMap, setActiveModel } = useActiveModelStore();
+  const { activeEditorId, setActiveEditor } = useActiveEditorStore();
   const thisEditor = getEditor(editorId);
   const currentModel = activeMap[editorId];
   // console.log(thisEditor);
@@ -55,6 +58,19 @@ export default function CodeEditor({ editorId }: CodeEditorProps) {
       setEditor(editorId, editor);
       setMonaco(editorId, monaco);
 
+      if (editorId !== 0) {
+        const newModel = activeEditorId < 1 ? activeMap[0] : activeMap[1];
+        newModel.model && setActiveModel(newModel.modelId, newModel.model, editorId);
+        newModel.model &&
+          setModels(
+            { filename: newModel.modelId, value: '', language: 'typescript', id: newModel.modelId },
+            newModel.model.model,
+            editorId,
+            newModel.modelId,
+          );
+        editor.setModel(newModel.model?.model as editor.ITextModel);
+      }
+
       monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
         noSemanticValidation: false,
         noSyntaxValidation: false,

src/components/file/fileItem/index.tsx

@@ -74,7 +74,7 @@ export const FileItem: React.FC<FileItemProps> = ({ file, onMouseupFn }: FileIte
     // console.log(splitState, mathModel[0], willChangeEditor, willChangeEditorId);
 
     if (mathModel.length > 0) {
-      mathModel[0].model && setActiveModel(mathModel[0].id, mathModel[0].model, willChangeEditorId);
+      mathModel[0].model && setActiveModel(mathModel[0].id, mathModel[0], willChangeEditorId);
       mathModel[0].model &&
         setModels(
           { filename: mathModel[0].filename, value: '', language: 'typescript', id: file.id },
@@ -126,7 +126,7 @@ export const FileItem: React.FC<FileItemProps> = ({ file, onMouseupFn }: FileIte
             const newModels = removeModel(file.id, editorId);
 
             if (newModels && newModels.filename) {
-              setActiveModel(newModels.filename, newModels.model, editorId);
+              setActiveModel(newModels.id, newModels.model, editorId);
               editor && editor.setModel(newModels.model);
             } else {
               removeAllModel(editorId);

src/components/ui/avatar/index.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Avatar, AvatarImage, AvatarFallback } from './index';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  subcomponents: { AvatarImage, AvatarFallback },
+} as Meta;
+
+type AvatarProps = {
+  src: string;
+  alt: string;
+  fallback: string;
+};
+
+const Template: StoryFn<AvatarProps> = (args) => (
+  <Avatar>
+    <AvatarImage src={args.src} alt={args.alt} />
+    <AvatarFallback>{args.fallback}</AvatarFallback>
+  </Avatar>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  src: 'https://via.placeholder.com/150',
+  alt: 'Avatar Image',
+  fallback: 'AB',
+};
+
+export const WithFallback = Template.bind({});
+WithFallback.args = {
+  src: '',
+  alt: 'Avatar Image',
+  fallback: 'AB',
+};

src/components/ui/badge/index.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Badge, BadgeProps } from './index';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+} as Meta;
+
+const Template: StoryFn<BadgeProps> = (args) => <Badge {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Default Badge',
+  variant: 'default',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Badge',
+  variant: 'secondary',
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  children: 'Destructive Badge',
+  variant: 'destructive',
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  children: 'Outline Badge',
+  variant: 'outline',
+};

src/components/ui/button/index.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Button, ButtonProps } from './index';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+} as Meta;
+
+const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Default Button',
+  variant: 'default',
+  size: 'default',
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  children: 'Destructive Button',
+  variant: 'destructive',
+  size: 'default',
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  children: 'Outline Button',
+  variant: 'outline',
+  size: 'default',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Button',
+  variant: 'secondary',
+  size: 'default',
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+  children: 'Ghost Button',
+  variant: 'ghost',
+  size: 'default',
+};
+
+export const Link = Template.bind({});
+Link.args = {
+  children: 'Link Button',
+  variant: 'link',
+  size: 'default',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  children: 'Small Button',
+  variant: 'default',
+  size: 'sm',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  children: 'Large Button',
+  variant: 'default',
+  size: 'lg',
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  children: 'Icon Button',
+  variant: 'default',
+  size: 'icon',
+};

src/components/ui/dialog/index.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from './index';
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+  subcomponents: {
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  },
+} as Meta;
+
+const Template: StoryFn = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <button className="p-2 bg-blue-500 text-white rounded">Open Dialog</button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>This is the dialog description</DialogDescription>
+      </DialogHeader>
+      <div className="mt-4">Dialog Content</div>
+      <DialogFooter>
+        <button className="p-2 bg-gray-200 rounded">Cancel</button>
+        <button className="p-2 bg-blue-500 text-white rounded">Confirm</button>
+      </DialogFooter>
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </Dialog>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/ui/dropdown-menu/index.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './index';
+
+export default {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  subcomponents: {
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuRadioGroup,
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => (
+  <DropdownMenu {...args}>
+    <DropdownMenuTrigger asChild>
+      <button className="p-2 bg-blue-500 text-white rounded">Open Menu</button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>Menu</DropdownMenuLabel>
+      <DropdownMenuItem>Item 1</DropdownMenuItem>
+      <DropdownMenuItem>Item 2</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuCheckboxItem checked>Checkbox Item</DropdownMenuCheckboxItem>
+      <DropdownMenuRadioGroup value="radio1">
+        <DropdownMenuRadioItem value="radio1">Radio Item 1</DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="radio2">Radio Item 2</DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Sub Menu</DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
+          <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        Item with Shortcut
+        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/ui/input/index.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Input, InputProps } from './index';
+
+export default {
+  title: 'Components/Input',
+  component: Input,
+} as Meta;
+
+const Template: StoryFn<InputProps> = (args) => <Input {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  type: 'text',
+  placeholder: 'Enter text...',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  type: 'text',
+  placeholder: 'Disabled input...',
+  disabled: true,
+};
+
+export const WithDefaultValue = Template.bind({});
+WithDefaultValue.args = {
+  type: 'text',
+  defaultValue: 'Default value',
+};