Merge branch 'main' into feature/ele-368-add-switch-to-elephant-ui

.github/dependabot.yml

@@ -0,0 +1,17 @@
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  target-branch: "main"
+  open-pull-requests-limit: 10
+- package-ecosystem: docker
+  directory: "/"
+  schedule:
+    interval: daily
+  target-branch: "main"
+  open-pull-requests-limit: 10

package.json

@@ -39,7 +39,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.15",
+    "@fontsource/inter": "^5.0.16",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -55,38 +55,37 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
-    "date-fns": "^2.30.0",
-    "lucide-react": "^0.284.0",
+    "date-fns": "^3.3.1",
+    "lucide-react": "^0.314.0",
     "react": "^18.2.0",
-    "react-day-picker": "^8.9.1",
+    "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^0.8.0"
+    "vaul": "^0.8.9"
   },
   "devDependencies": {
-    "@types/node": "^20.8.4",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-syntax-highlighter": "^15.5.8",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.45.0",
-    "eslint-config-standard-with-typescript": "^39.1.1",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
-    "prettier": "^3.0.3",
+    "postcss-cli": "^11.0.0",
     "react-syntax-highlighter": "^15.5.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.6.0",
-    "vite-plugin-static-copy": "^0.17.0"
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.1",
+    "vite-plugin-static-copy": "^1.0.0"
   }
 }

src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

src/index.ts

@@ -107,3 +107,4 @@ export {
   DialogDescription
 } from '@/components/ui/dialog'
 export { Switch } from '@/components/ui/switch'
+export { Textarea } from '@/components/ui/textarea'

src/showroom/app.tsx

@@ -17,6 +17,7 @@ import { ScrollAreaExample } from './components/scroll-area'
 import { DrawerExample } from './components/drawer'
 import { DialogExample } from './components/dialog'
 import { SwitchExample } from './components/switch'
+import { TextareaExample } from './components/textarea'
 
 export function App(): JSX.Element {
   return <div className="grid grid-cols-2 gap-4 gap-y-8 max-w-[900px] m-10">
@@ -39,5 +40,6 @@ export function App(): JSX.Element {
     <CalendarExample />
     <ScrollAreaExample />
     <SwitchExample />
+    <TextareaExample />
   </div >
 }

src/showroom/components/textarea.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from '@/components/ui/textarea'
+import { Code } from '../code'
+import { Header } from '../header'
+
+export function TextareaExample(): JSX.Element {
+  return <>
+    <Header>Textarea</Header>
+
+    <div>
+<Textarea placeholder="Type your message here." />
+    </div>
+
+    <Code code={'<Textarea placeholder="Type your message here." />'} />
+  </>
+}

src/showroom/index.tsx

@@ -4,7 +4,13 @@ import * as ReactDOM from 'react-dom/client'
 import { App } from './app'
 import '../styles/index.css'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+const root = document.getElementById('root')
+
+if (!root) {
+  throw new Error('Can not getElementById("root")')
+}
+
+ReactDOM.createRoot(root).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>