#SHA-26 - feat: add-smart-datetime-input

content/docs/smart-datetime-input.mdx

@@ -0,0 +1,99 @@
+---
+title: Smart DateTime Input
+description: A natural language date and time input component.
+links:
+  - title: shadcn-ui
+    url: https://ui.shadcn.com/docs/components/input
+  - title: chrono-node
+    url: https://www.npmjs.com/package/chrono-node
+---
+
+
+<ComponentPreview name="smart-datetime-input-demo" />
+
+## Installation
+
+<Tabs defaultValue="manual">
+
+  <TabsList>
+    <TabsTrigger value="manual">Manual</TabsTrigger>
+    <TabsTrigger value="cli">CLI</TabsTrigger>
+  </TabsList>
+
+  <TabsContent value="manual">
+    <Steps>
+      <Step>Run the following command:</Step>
+
+        ```bash
+        npx shadcn@latest add input
+        npm i chrono-node
+        ```
+
+      <Step>Copy and paste the following code into your project.</Step>
+
+      <ComponentSource name="smart-datetime-input"/>
+
+    </Steps>
+
+  </TabsContent>
+  <TabsContent value="cli">
+
+    <Callout className="mt-6">
+      Currently there is no CLI command for this component. since we haven't created
+      it yet.
+    </Callout>
+
+  </TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { SmartDateTimeInput } from "@/components/extension/smart-date-time-input";
+```
+
+```tsx
+  <SmartDateTimeInput
+    name="datetime"
+    value={Date.now()}
+    onChange={(e) => setValue(e.target.value)}
+    placeholder="e.g. tomorrow at 3pm"
+  />
+```
+
+## Example
+
+## Form
+```tsx showLineNumbers {1 , 3 , 16-23  }
+"use client";
+
+import { SmartDateTimeInput } from "@/components/extension/smart-datetime-input";
+
+{...}
+
+const SmartDateTimeInput = ()=>{
+  return (
+     <Form {...form}>
+       {...}
+       <FormField
+          control={form.control}
+          name="otp"
+          render={({ field }) => (
+            {...}
+            <SmartDateTimeInput
+              name="datetime"
+              value={field.value}
+              onChange={field.onChange}
+              placeholder="e.g. tomorrow at 3pm"
+            />
+            {...}
+          )} />
+        {...}
+     </Form>
+  )
+}
+
+```
+
+<ComponentPreview name="smart-datetime-input-zod" />

package.json

@@ -32,6 +32,7 @@
     "@t3-oss/env-nextjs": "^0.9.2",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-virtual": "^3.0.2",
+    "chrono-node": "^2.7.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",

src/__registry__/index.tsx

@@ -61,6 +61,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/extension/image-carousel-upload.tsx")),
       files: ["src/registry/default/extension/image-carousel-upload.tsx"],
     },
+    "smart-datetime-input": {
+      name: "smart-datetime-input",
+      type: "components:extension",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/extension/smart-datetime-input.tsx")),
+      files: ["src/registry/default/extension/smart-datetime-input.tsx"],
+    },
     "tree-view-demo": {
       name: "tree-view-demo",
       type: "components:demo",
@@ -103,6 +110,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-demo.tsx")),
       files: ["src/registry/default/example/breadcrumb-demo.tsx"],
     },
+    "smart-datetime-input-demo": {
+      name: "smart-datetime-input-demo",
+      type: "components:demo",
+      registryDependencies: ["smart-datetime-input"],
+      component: React.lazy(() => import("@/registry/default/example/smart-datetime-input-demo.tsx")),
+      files: ["src/registry/default/example/smart-datetime-input-demo.tsx"],
+    },
     "tree-view-builtin-indicator": {
       name: "tree-view-builtin-indicator",
       type: "components:example",
@@ -236,5 +250,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/image-carousel-upload-example.tsx")),
       files: ["src/registry/default/example/image-carousel-upload-example.tsx"],
     },
+    "smart-datetime-input-zod": {
+      name: "smart-datetime-input-zod",
+      type: "components:example",
+      registryDependencies: ["smart-datetime-input"],
+      component: React.lazy(() => import("@/registry/default/example/smart-datetime-input/smart-datetime-input-zod.tsx")),
+      files: ["src/registry/default/example/smart-datetime-input/smart-datetime-input-zod.tsx"],
+    },
   },
 }

src/app/example/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SmartDatetimeInput } from "@/registry/default/extension/smart-datetime-input";
 import { TagsInput } from "@/registry/default/extension/tags-input";
 import { useState } from "react";
 
@@ -12,6 +13,8 @@ export default function ExamplePage() {
         onValueChange={setValues}
         placeholder="enter your used tech"
       />
+
+        <SmartDatetimeInput onChange={console.log} />
     </main>
   );
 }

src/components/icons.tsx

@@ -1,8 +1,10 @@
 import {
   AlertTriangle,
   Bell,
+  Clock,
   Info,
   LucideProps,
+  Hexagon,
   TextCursorInput,
 } from "lucide-react";
 
@@ -167,6 +169,7 @@ export const Icons = {
   ),
   Sonner: (props: LucideProps) => <Bell {...props} />,
   Devfolioco: (props: LucideProps) => <TextCursorInput {...props} />,
+  Npmjs: (props: LucideProps) => <Hexagon {...props} />,
 };
 
 export const MdxIcons = {

src/config/docs-config.ts

@@ -56,6 +56,10 @@ export const docsConfig: DocsConfig[] = [
         title: "Otp input",
         path: "/docs/otp-input",
       },
+      {
+        title: "Smart DateTime input",
+        path: "/docs/smart-datetime-input",
+      },
       {
         title: "File upload",
         path: "/docs/file-upload",

src/registry/components.ts

@@ -49,6 +49,12 @@ const extension: Registry = [
     dependencies: ["react-dropzone", "embla-carousel-react", "embla-carousel"],
     files: ["extension/image-carousel-upload.tsx"],
   },
+  {
+    name: "smart-datetime-input",
+    type: "components:extension",
+    dependencies: ["chrono-node"],
+    files: ["extension/smart-datetime-input.tsx"],
+  },
 ];
 
 const demos: Registry = [
@@ -88,6 +94,12 @@ const demos: Registry = [
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-demo.tsx"],
   },
+  {
+    name: "smart-datetime-input-demo",
+    type: "components:demo",
+    registryDependencies: ["smart-datetime-input"],
+    files: ["example/smart-datetime-input-demo.tsx"],
+  },
 ];
 
 const examples: Registry = [
@@ -207,6 +219,12 @@ const examples: Registry = [
     registryDependencies: ["image-carousel-upload"],
     files: ["example/image-carousel-upload-example.tsx"],
   },
+  {
+    name: "smart-datetime-input-zod",
+    type: "components:example",
+    registryDependencies: ["smart-datetime-input"],
+    files: ["example/smart-datetime-input/smart-datetime-input-zod.tsx"],
+  },
 ];
 
 export const registry: Registry = [...extension, ...demos, ...examples];

src/registry/default/example/smart-datetime-input-demo.tsx

@@ -0,0 +1,7 @@
+import { SmartDatetimeInput } from "@/registry/default/extension/smart-datetime-input";
+
+const SmartDateTimeInputDemo = () => {
+  return <SmartDatetimeInput onChange={console.log} />;
+};
+
+export default SmartDateTimeInputDemo;