se-design 0.0.7

package/src/components/Modal/Modal.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './Modal';
+
+const meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['!!autodocs']
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Discard changes?',
+    content: 'Are you sure you want to discard the changes?',
+    cancelButtonText: 'Cancel',
+    successButtonText: 'Discard',
+    cancelButtonType: 'secondary',
+    successButtonType: 'negative'
+  }
+};
+
+export const modalWithPrimaryButton: Story = {
+  args: {
+    title: 'Sign document?',
+    content: 'You are one of the signers for NDA-file.',
+    cancelButtonText: 'Cancel',
+    successButtonText: 'Sign Now',
+    cancelButtonType: 'secondary',
+    successButtonType: 'primary'
+  }
+};
+
+export const modalWithoutHeader: Story = {
+  args: {
+    content: 'This is a modal without a header.',
+    cancelButtonText: 'Cancel',
+    successButtonText: 'Ok',
+    cancelButtonType: 'secondary',
+    successButtonType: 'primary'
+  }
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { Button } from '../Button';
+
+interface ModalProps {
+  title?: string;
+  content: string;
+  successButtonText: string;
+  cancelButtonText: string;
+  successButtonType: 'primary' | 'secondary' | 'negative' | 'negative-secondary';
+  cancelButtonType: 'primary' | 'secondary' | 'negative' | 'negative-secondary';
+  cancelAction?: () => void;
+  successAction?: () => void;
+}
+
+export const Modal: FC<ModalProps> = (props) => {
+  const {
+    title,
+    content,
+    successButtonType,
+    cancelButtonType,
+    successButtonText,
+    cancelButtonText,
+    cancelAction,
+    successAction
+  } = props;
+
+  return (
+    <div className="fixed inset-0 flex items-start justify-center z-50 backdrop-brightness-50">
+      <div className="flex flex-col gap-3 bg-white rounded shadow-lg p-8 mt-14 w-[500px]">
+        {title && <div className="text-lg font-semibold">{title}</div>}
+        <p className="leading-normal">{content}</p>
+        <div className="flex items-center justify-end gap-4 pt-2">
+          <Button type={cancelButtonType} onClick={cancelAction} label={cancelButtonText} />
+          <Button type={successButtonType} onClick={successAction} label={successButtonText} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/SplitButton/SplitButton.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SplitButton } from './SplitButton';
+
+const meta = {
+  title: 'Components/SplitButton',
+  component: SplitButton,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof SplitButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Button',
+    menuItems: [{ label: 'Email' }, { label: 'Rename' }, { label: 'Shedule Reminder Event', tag: 'NEW' }]
+  }
+};

package/src/components/SplitButton/SplitButton.tsx

@@ -0,0 +1,59 @@
+import { FC, useState } from 'react';
+import { MenuItemProps } from 'src/components/MenuItem';
+import { MenuList } from 'src/components/MenuList';
+
+interface SplitButtonProps {
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+  /**
+   * Optional click handler for dropdown
+   */
+  onDropdownClick?: () => void;
+  menuItems?: MenuItemProps[];
+}
+
+export const SplitButton: FC<SplitButtonProps> = (props) => {
+  const { label, onDropdownClick = () => {}, menuItems = [], ...remainingProps } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDropdownClick = () => {
+    setIsOpen(!isOpen);
+    onDropdownClick();
+  };
+
+  return (
+    <div className={'flex items-center relative'}>
+      <button
+        type="button"
+        className="px-8 py-2.5 rounded-l text-sm bg-blue-500 text-white border-r border-white"
+        {...remainingProps}
+      >
+        {label}
+      </button>
+      <button type="button" className="bg-blue-500 rounded-r" onClick={handleDropdownClick}>
+        <svg
+          className={`${isOpen ? 'rotate-180' : ''} transition-all`}
+          width="35"
+          height="40"
+          viewBox="0 0 35 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z" fill="transparent" />
+          <path d="M18 23.5L14 19.5L22 19.5L18 23.5Z" fill="white" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="absolute top-full mt-1 w-max">
+          <MenuList items={menuItems} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "./Tag";
+
+const meta = {
+  title: "Components/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} as Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Tag",
+  },
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+type TagProps = {
+  label: string;
+};
+
+export const Tag: FC<TagProps> = ({ label }) => {
+  return (
+    <span className="inline-block px-1.5 py-1 text-xs font-bold rounded-sm bg-yellow-400 uppercase leading-4">
+      {label}
+    </span>
+  );
+};

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toggle } from "./Toggle";
+
+const meta = {
+  title: "Components/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Off: Story = {
+  args: {},
+};
+
+export const On: Story = {
+  args: {
+    initialState: true,
+  },
+};
+
+export const disabledOff: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const disabledOn: Story = {
+  args: {
+    initialState: true,
+    disabled: true,
+  },
+};

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { ToggleProps } from "./Toggle.types";
+
+export const Toggle: React.FC<ToggleProps> = ({
+  initialState,
+  onToggle,
+  disabled,
+}) => {
+  const [checked, setChecked] = useState(initialState || false);
+
+  const handleToggle = () => {
+    const newChecked = !checked;
+    setChecked(newChecked);
+    if (onToggle) {
+      onToggle(newChecked);
+    }
+  };
+
+  return (
+    <label
+      className={`block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-gray-500
+        ${checked ? " bg-green-600" : ""}
+        ${disabled ? " opacity-50 cursor-not-allowed" : ""}
+      `}
+    >
+      <input
+        className="opacity-0 hidden"
+        type="checkbox"
+        checked={checked}
+        onChange={handleToggle}
+        disabled={disabled}
+      />
+      <span
+        className={`block w-3 h-3 rounded-full bg-white transform transition-transform ${
+          checked ? "translate-x-4" : ""
+        }`}
+      ></span>
+    </label>
+  );
+};

package/src/components/Toggle/Toggle.types.ts

@@ -0,0 +1,14 @@
+export interface ToggleProps {
+  /**
+   * Callback when the toggle is toggled
+   */
+  onToggle?: (checked: boolean) => void;
+  /**
+   * Initial state of the toggle
+   */
+  initialState?: boolean;
+  /**
+   * Optional disabled state
+   */
+  disabled?: boolean;
+}

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "./Tooltip";
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// const Template: Story = (args: TooltipProps) => <Tooltip {...args} />;
+
+export const Default: Story = {
+  args: {
+    content: "This is a tooltip.",
+    tooltipSrc: <span className="underline">{`Hover me(Default)`}</span>,
+  },
+};
+
+export const BottomLeftAligned: Story = {
+  args: {
+    content: "This is a tooltip with a long content and has a double line.",
+    tooltipSrc: <span className="underline">{`Hover me(Bottom Left aligned)`}</span>,
+    position: 'bottom-left',
+    displayOn: 'hover'
+  },
+};
+
+export const BottomRightAligned: Story = {
+  args: {
+    content: "This is a tooltip.",
+    tooltipSrc: <span className="underline">{`Hover me(Bottom Right aligned)`}</span>,
+    position: 'bottom-right',
+    displayOn: 'hover'
+  },
+};
+
+export const LeftAligned: Story = {
+  args: {
+    content: "This is a tooltip.",
+    tooltipSrc: <span className="underline">{`Tooltip always on(Left aligned)`}</span>,
+    position: 'left',
+    displayOn: 'always-on'
+  },
+};
+
+export const RightAligned: Story = {
+  args: {
+    content: "This is a tooltip.",
+    tooltipSrc: <span className="underline">{`Click me(Right aligned)`}</span>,
+    position: 'right',
+    displayOn: 'click'
+  },
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState, useRef } from "react";
+
+export interface TooltipProps {
+  /**
+   * Tooltip contents
+   */
+  content: string;
+  /**
+   * Tooltip position
+   */
+  position?: "bottom-center" | "bottom-left" | "bottom-right" | "left" | "right";
+  /**
+   * Display tooltip on Hover, Click or Always
+   */
+  displayOn?: 'hover' | 'click' | 'always-on';
+  /**
+   * Tooltip trigger contents
+   */
+  tooltipSrc?: React.ReactNode;
+}
+
+export const Tooltip = ({ content, tooltipSrc, position = 'bottom-center', displayOn = 'hover' }: TooltipProps) => {
+  const [displayTooltip, setDisplayTooltip] = useState(displayOn === 'always-on');
+  const tooltipContentRef = useRef<HTMLDivElement>(null);;
+
+  useEffect(() => {
+    const tooltipContent = tooltipContentRef.current;
+
+    if(!tooltipContent) {
+      return
+    }
+    
+    if(position == 'bottom-center') {
+      tooltipContent.setAttribute("style", `left: 50%;transform: translateX(-50%);`);
+      tooltipContent.classList.add(`before:left-[calc(50%-7px)]`);
+      tooltipContent.classList.add(`before:top-[-7px]`);
+    } else if(position == 'bottom-left') {
+      tooltipContent.classList.add(`before:left-[calc(10%-7px)]`);
+      tooltipContent.classList.add(`before:top-[-7px]`);
+    } else if(position == 'bottom-right') {
+      tooltipContent.setAttribute("style", `right: 0;`);
+      tooltipContent.classList.add(`before:right-[calc(10%+7px)]`);
+      tooltipContent.classList.add(`before:top-[-7px]`);
+    } else if(position == 'left') {
+      tooltipContent.setAttribute("style", `right: calc(100% + 10px);top:0;`);
+      tooltipContent.classList.add(`before:right-[-6px]`);
+      tooltipContent.classList.add(`before:top-0px`);
+    } else if(position == 'right') {
+      tooltipContent.setAttribute("style", `left: calc(100% + 10px);top:0;`);
+      tooltipContent.classList.add(`before:left-[-6px]`);
+      tooltipContent.classList.add(`before:top-0px`);
+    }
+
+    if(displayOn == 'hover') {
+      tooltipContent.classList.add(`group-hover:visible`);
+    }
+  }, [content]);
+
+  useEffect(() => {
+    const tooltipContent = tooltipContentRef.current;
+
+    if(!tooltipContent) {
+      return;
+    }
+    if(displayTooltip) {
+      tooltipContent.classList.remove(`invisible`);
+    } else {
+      tooltipContent.classList.add(`invisible`);
+    }
+  }, [displayTooltip])
+
+  const onTooltipSrcClick = () => {
+    if(displayOn == 'click') {
+      setDisplayTooltip((displayTooltip) => !displayTooltip)
+    }
+  }
+
+  return (
+    <div className="group relative" onClick={onTooltipSrcClick}>
+      <div className="cursor-pointer" id="tooltip-trigger">
+        {tooltipSrc}
+      </div>
+      <div
+        ref={tooltipContentRef}
+        id="tooltip-content"
+        className="flex justify-center px-3 py-2 min-w-24 max-w-60
+          absolute top-[calc(100%+8px)] w-max bg-gray-800 text-white text-xs rounded-[3px]
+          before:content-[' '] before:w-3.5 before:h-3.5 before:bg-gray-800 before:inline-block
+          before:absolute before:rounded-tl-sm before:rotate-45"
+      >
+        {content}
+      </div>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export { Button } from './Button';
+export { Icon } from './Icon/Icon';
+export { SplitButton } from './SplitButton/SplitButton';
+export { Toggle } from './Toggle/Toggle';
+export { Tag } from './Tag/Tag';
+export { Modal } from './Modal/Modal';
+export { Tooltip } from './Tooltip/Tooltip';
+export { MenuItem } from './MenuItem';
+export { MenuList } from './MenuList';

package/src/index.css

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
+  /* font-family: "lato", sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; */
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+img {
+  display: inline-block;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import './index.css';
+
+export * from './components';

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/stories/Colors.mdx

@@ -0,0 +1,24 @@
+{/* Colors.mdx */}
+
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import colors from 'src/utils/colors'
+
+<Meta title="Colors" />
+
+# Colors
+
+This file is used to display the color palette used in the Easy Design System.
+The colors are imported from `src/utils/colors.ts` file.
+## Add a new color
+- Add the new color to the `src/utils/colors.ts` file.
+- After adding the new color, it will automatically appear in the color palette here.
+- Each color is displayed with its name **(the key from the colors object)** and the color value.
+
+## Color Palette
+<br />
+
+<ColorPalette>
+  {Object.entries(colors).map(([title, colors]) => (
+    <ColorItem key={title} title={title} colors={colors} />
+  ))}
+</ColorPalette>