chore: add DpDatepicker to Storybook.

src/components/DpDatepicker/DpDatepicker.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/addon-docs'
+import DpDatepicker from './'
+
+<Meta
+    title="Components/Datepicker"
+    component={DpDatepicker}
+/>
+
+# Datepicker
+
+The Datepicker component allows users to enter a date either by typing or by selecting a date from the calendar.
+
+Use a date picker when you want to provide a view that allows the user to select a calendar date.
+
+## Default usage
+
+```html
+<dp-datepicker
+  id="datepicker_id"
+  v-model="planDate" />
+```

src/components/DpDatepicker/DpDatepicker.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue'
+import DpDatepicker from './'
+
+const meta: Meta<typeof DpDatepicker> = {
+    component: DpDatepicker,
+    title: "Components/Datepicker",
+
+}
+
+interface IDpDatepicker {
+    id: string
+    input: object
+}
+
+type Story = StoryObj<IDpDatepicker>
+
+export default meta
+
+export const Default: Story = {
+    args: {
+        id: 'id'
+    },
+    argTypes: {
+        input: { action: 'input' },
+    }
+}

src/components/DpDatepicker/DpDatepicker.vue

@@ -37,17 +37,26 @@ export default {
       default: false
     },
 
+    /**
+     * The ID of the Datepicker component is derived from this prop.
+     */
     id: {
       type: String,
       required: true
     },
 
+    /**
+     * Upper date limit.
+     */
     maxDate: {
       type: String,
       required: false,
       default: ''
     },
 
+    /**
+     * Lower date limit.
+     */
     minDate: {
       type: String,
       required: false,
@@ -72,6 +81,9 @@ export default {
       default: false
     },
 
+    /**
+     * Expects ISO date
+     */
     value: {
       type: String,
       required: false,