Add Select dropdown

README.md

@@ -53,6 +53,13 @@ function App() {
 createRoot.render(<App />, document.querySelector('#app'));
 ```
 
+## Component List
+| Component | Source Code |
+| -------- | ------- |
+| Highlighter | [lib/components/highlighter.tsx](lib/components/highlighter.tsx) |
+| Select | [lib/components/select.tsx](lib/components/select.tsx) |
+
+
 ## How to use
 
 1. Clone this repository

lib/components/Highlighter.tsx → lib/components/highlighter.tsx

@@ -97,4 +97,4 @@ export const Highlight = ({ id, children: child }: HighlightProps) => {
       </div>
     </div>
   );
-};
+};

lib/components/select.tsx

@@ -0,0 +1,47 @@
+import { Option, Select as MTSelect } from '@material-tailwind/react';
+
+export interface OptionType {
+  label: string;
+  value: string;
+}
+
+interface SelectProps {
+  options: OptionType[];
+  id: string;  
+  value: string;
+  onChange: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const Select = ({ options, id, value, onChange }: SelectProps) => {
+  const handleChange = (val: string | undefined) => {
+    if (val) {
+      onChange(val);
+    }
+  };
+
+  return (
+    <MTSelect
+      id={id}
+      data-testid={`select-dropdown-${id}`}
+      value={value}
+      onChange={handleChange}
+      className="!border border-t-1 !border-gray-300 bg-white text-gray-900 placeholder:text-gray-500 placeholder:opacity-100 focus:!border-gray-900 focus:ring-gray-900/10"
+      labelProps={{
+        className: 'hidden',
+      }}
+    >
+      {options.map((option, index) => {
+        return (
+          <Option
+            key={`${id}-dropdown-${index}`}
+            value={option.value}
+          >
+            {option.label}
+          </Option>
+        );
+      })}
+    </MTSelect>
+  );
+};
+
+export default Select;

lib/index.ts

@@ -2,5 +2,6 @@ import './global.css';
 
 export { default as tailwindConfig } from './tailwind.config';
 export { default as TRIApp, type TRIAppConfig, useTRIAppContext } from './tri-app';
-export { Highlight, Highlighter } from './components/Highlighter';
+export { Highlight, Highlighter } from './components/highlighter';
 export { useUserAuth } from './amplify/use-user-auth';
+export { Select } from './components/select';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toyota-research-institute/rse-react-library",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "RSE React component libraries with Vite, Tailwind, Material Tailwind and Storybook.",
   "author": "TRI",
   "license": "MIT",