feat/dropdown (#33)

feat: implemented the dropdown component

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## 1.2.0 (2024-05-24)
+
+### Added
+- Implemented the dropdown component
+
 ## 1.1.0 (2023-03-30)
 
 ### Added

apps/storybook/src/stories/main/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Dropdown, type DropdownProps } from '@csesoc/ui-components/src/dropdown';
+
+const meta: Meta<typeof Dropdown> = {
+  component: Dropdown,
+  title: 'Main/Dropdown',
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+const tempChildren = ['Option 1', 'Option 2', 'Option 3', 'Option 4'].map((str: string) => ({
+  label: str,
+  value: str,
+}));
+
+export const Default: Story = (args: DropdownProps) => <Dropdown {...args} />;
+Default.args = {
+  placeholder: 'Select...',
+  theme: 'light',
+  expand: false,
+  disabled: false,
+  error: false,
+  options: tempChildren,
+  onSelect: (option: string) => console.log(`Dropdown select: ${option}`),
+};
+
+export const DefaultDark: Story = (args: DropdownProps) => <Dropdown {...args} />;
+DefaultDark.args = {
+  placeholder: 'Select...',
+  theme: 'dark',
+  expand: false,
+  disabled: false,
+  error: false,
+  options: tempChildren,
+  onSelect: (option: string) => console.log(`Dropdown select: ${option}`),
+};
+
+export const Disabled: Story = (args: DropdownProps) => <Dropdown {...args} />;
+Disabled.args = {
+  placeholder: 'Disabled...',
+  theme: 'light',
+  expand: false,
+  disabled: true,
+  error: false,
+  options: tempChildren,
+  onSelect: (option: string) => console.log(`Dropdown select: ${option}`),
+};
+
+export const ErrorDropdown: Story = (args: DropdownProps) => <Dropdown {...args} />;
+ErrorDropdown.args = {
+  placeholder: 'Select...',
+  theme: 'light',
+  expand: false,
+  disabled: false,
+  error: true,
+  options: tempChildren,
+  onSelect: (option: string) => console.log(`Dropdown select: ${option}`),
+};

package.json

@@ -6,5 +6,9 @@
   },
   "devDependencies": {
     "turbo": "1.6.3"
+  },
+  "dependencies": {
+    "lucide-react": "^0.395.0",
+    "pnpm": "^9.3.0"
   }
 }

packages/components/package.json

@@ -29,5 +29,9 @@
     "vite-plugin-dts": "3.9.1",
     "vite-plugin-linter": "2.1.1",
     "vite-tsconfig-paths": "4.3.2"
+  },
+  "dependencies": {
+    "@stitches/react": "^1.2.8",
+    "lucide-react": "^0.396.0"
   }
-}
+}

packages/components/src/App.tsx

@@ -2,21 +2,11 @@ import './App.css';
 
 import { useState } from 'react';
 
-import reactLogo from './assets/react.svg';
-
 function App() {
   const [count, setCount] = useState(0);
 
   return (
     <div className='App'>
-      <div>
-        <a href='https://vitejs.dev' target='_blank' rel='noopener noreferrer'>
-          <img src='/vite.svg' className='logo' alt='Vite logo' />
-        </a>
-        <a href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
-          <img src={reactLogo} className='logo react' alt='React logo' />
-        </a>
-      </div>
       <h1>Vite + React</h1>
       <div className='card'>
         <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>