Skip to content

Commit

Permalink
chore: 🔨 improve code structure and add documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@xun082
xun082 committed Jul 21, 2024
1 parent 5b5768f commit 7797d10
Show file tree
Hide file tree
Showing 5 changed files with 447 additions and 207 deletions.
164 changes: 69 additions & 95 deletions src/app/edit/(main)/(router)/settings/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,59 @@
'use client';

import { FC, ReactNode } from 'react';
import { PiWarningCircleBold, PiCodeThin } from 'react-icons/pi';
import { VscPreview } from 'react-icons/vsc';

import {
Select,
SelectContent,
SelectItem,
SelectRoot,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from '@/components/ui/select';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/ui/tooltip';
import { Menu, MenuItem } from '@/components/menu';

const Settings: FC = () => {
const titleStyle = 'my-2 font-bold';
const titleStyle = 'my-2 font-bold';
const textStyle = 'flex items-center text-sm text-gray-400 my-1';

const selectOptions = [
{ text: 'Edit(auto)', id: 0 },
{ text: 'Save', id: 1 },
{ text: 'KeyStroke', id: 2 },
];

return (
interface SettingOption {
text: string;
id: number;
icon: ReactNode;
}

const editorSettingOptions: SettingOption[] = [
{ text: 'User settings', id: 0, icon: <VscPreview /> },
{ text: 'Workspace settings', id: 1, icon: <VscPreview /> },
{ text: 'User snippets', id: 2, icon: <PiCodeThin /> },
{ text: 'Workspace snippets', id: 3, icon: <PiCodeThin /> },
];

const Settings: FC = () => (
<TooltipProvider delayDuration={{ enter: 500, exit: 100 }}>
<div className="p-4 h-full">
<div>Settings</div>
<div>
<div className={titleStyle}>WEBCONTAINERS</div>
<div className="flex items-center text-sm text-gray-400 my-1">
<div className={textStyle}>
<span className="mr-2">Compile trigger</span>
<TooltipProvider delayDuration={500}>
<Tooltip>
<TooltipTrigger>
<Tooltip>
<TooltipTrigger asChild>
<span>
<PiWarningCircleBold />
</TooltipTrigger>
<TooltipContent className="bg-gray-800 text-white" side={'right'}>
<p>Controls when edited files are synced tothe WebContainers filesystem.</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</span>
</TooltipTrigger>
<TooltipContent className="bg-gray-800 text-white" side={'right'}>
<p>Controls when edited files are synced to the WebContainers filesystem.</p>
</TooltipContent>
</Tooltip>
</div>
<CompileSelector />
</div>
Expand All @@ -40,85 +62,37 @@ const Settings: FC = () => {
<EditorSettings />
</div>
</div>
);
};

const CompileSelector: FC = () => {
const selectOptions = [
{
text: 'Edit(auto)',
id: 0,
},
{
text: 'Save',
id: 1,
},
{
text: 'KeyStroke',
id: 2,
},
];
</TooltipProvider>
);

return (
<Select defaultValue="Edit(auto)">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
{selectOptions.map((option) => (
<SelectItem value={option.text} key={option.id}>
{option.text}
</SelectItem>
))}
</SelectContent>
</Select>
);
};
const CompileSelector: FC = () => (
<SelectRoot defaultValue="Edit(auto)">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
{selectOptions.map((option) => (
<SelectItem value={option.text} key={option.id}>
{option.text}
</SelectItem>
))}
</SelectContent>
</SelectRoot>
);

const EditorSettings: FC = () => {
interface settingOption {
text: string;
id: number;
icon: ReactNode;
}

const editorSettingOptions: Array<settingOption> = [
{
text: 'User settings',
id: 0,
icon: <VscPreview />,
},
{
text: 'Workspace settings',
id: 1,
icon: <VscPreview />,
},
{
text: 'User snippets',
id: 2,
icon: <PiCodeThin />,
},
{
text: 'Workspace snippets',
id: 3,
icon: <PiCodeThin />,
},
];

return (
<div>
<Menu>
{editorSettingOptions.map((option) => (
<MenuItem>
<div className="flex items-center">
<span className="mx-2">{option.icon}</span>
<span> {option.text}</span>
</div>
</MenuItem>
))}
</Menu>
</div>
);
};
const EditorSettings: FC = () => (
<div>
<Menu>
{editorSettingOptions.map((option) => (
<MenuItem key={option.id}>
<div className="flex items-center">
<span className="mx-2">{option.icon}</span>
<span>{option.text}</span>
</div>
</MenuItem>
))}
</Menu>
</div>
);

export default Settings;
136 changes: 136 additions & 0 deletions src/components/ui/select/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import * as React from 'react';
import { Meta, StoryFn } from '@storybook/react';

import {
SelectRoot,
SelectTrigger,
SelectValue,
SelectContent,
SelectScrollUpButton,
SelectScrollDownButton,
SelectItem,
SelectSeparator,
SelectGroup,
SelectLabel,
} from './index';

export default {
title: 'Components/Select',
component: SelectRoot,
} as Meta;

const Template: StoryFn<typeof SelectRoot> = (args) => (
<SelectRoot {...args}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectScrollUpButton />
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
<SelectScrollDownButton />
</SelectContent>
</SelectRoot>
);

export const Default = Template.bind({});
Default.args = {
defaultValue: 'option1',
};

export const WithSeparator: StoryFn = () => (
<SelectRoot defaultValue="option1">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectScrollUpButton />
<SelectItem value="option1">Option 1</SelectItem>
<SelectSeparator />
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
<SelectScrollDownButton />
</SelectContent>
</SelectRoot>
);

export const WithLabel: StoryFn = () => (
<SelectRoot defaultValue="option1">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Options</SelectLabel>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
</SelectGroup>
</SelectContent>
</SelectRoot>
);

export const ScrollButtons: StoryFn = () => (
<SelectRoot defaultValue="option1">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectScrollUpButton />
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
<SelectScrollDownButton />
</SelectContent>
</SelectRoot>
);

export const DisabledOptions: StoryFn = () => (
<SelectRoot defaultValue="option1">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2" disabled>
Option 2 (Disabled)
</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
</SelectContent>
</SelectRoot>
);

export const CustomStyles: StoryFn = () => (
<SelectRoot defaultValue="option1">
<SelectTrigger className="w-[180px] bg-blue-500 text-white">
<SelectValue placeholder="Custom Style" />
</SelectTrigger>
<SelectContent className="bg-blue-500 text-white">
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
</SelectContent>
</SelectRoot>
);

export const GroupedOptions: StoryFn = () => (
<SelectRoot defaultValue="group1-option1">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Group 1</SelectLabel>
<SelectItem value="group1-option1">Option 1</SelectItem>
<SelectItem value="group1-option2">Option 2</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Group 2</SelectLabel>
<SelectItem value="group2-option1">Option 1</SelectItem>
<SelectItem value="group2-option2">Option 2</SelectItem>
</SelectGroup>
</SelectContent>
</SelectRoot>
);
Loading

0 comments on commit 7797d10

Please sign in to comment.