feat: add DatePicker component to UIKit and CLI scaffold

src/cli/index.ts

@@ -565,16 +565,18 @@ export default defineConfig({
     },
     {
       relativePath: 'frontend/src/App.tsx',
-      content: `import React from 'react';
-import { Puzzle } from 'lucide-react';
+      content: `import React, { useState } from 'react';
+import { Puzzle, Calendar } from 'lucide-react';
 // @ts-ignore
-import { Card, Typography } from 'host/UIKit';
+import { Card, Typography, DatePicker } from 'host/UIKit';
 
 interface AppProps {
   language?: string;
 }
 
 const App: React.FC<AppProps> = ({ language = 'en' }) => {
+  const [dateValue, setDateValue] = useState<any>(undefined);
+
   return (
     <Card className="plugin-card" title={language === 'uk' ? '${label}' : '${label}'}>
       <div style={{ textAlign: 'center', padding: '40px 0' }}>
@@ -585,6 +587,16 @@ const App: React.FC<AppProps> = ({ language = 'en' }) => {
             ? 'Плагін успішно створено та підключено до CRM.'
             : 'Plugin successfully created and connected to CRM.'}
         </Typography.P>
+        <div style={{ maxWidth: '400px', margin: '30px auto' }}>
+          <DatePicker
+            label={language === 'uk' ? 'Діапазон дат' : 'Date Range'}
+            mode="range"
+            value={dateValue}
+            onChange={setDateValue}
+            language={language}
+            icon={<Calendar size={18} />}
+          />
+        </div>
       </div>
     </Card>
   );

src/frontend/uikit.d.ts

@@ -68,4 +68,16 @@ declare module 'host/UIKit' {
     style?: React.CSSProperties;
     language?: string;
   }>;
+
+  export interface DatePickerProps {
+    label?: string;
+    mode?: 'single' | 'range';
+    value?: string | { from?: string; to?: string };
+    onChange?: (value: any) => void;
+    placeholder?: string;
+    language?: string;
+    error?: string;
+    icon?: React.ReactNode;
+  }
+  export const DatePicker: React.FC<DatePickerProps>;
 }