wip(DateInput): Add component and its stories

src/stories/DateInput/DateInput.spec.tsx

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/experimental-ct-react17";
+import DateInput from ".";
+
+test.describe("DateInput", () => {
+  test("should render an input tag and a button to open a datepicker", async ({
+    page,
+    mount,
+  }) => {
+    const component = await mount(<DateInput id="datepicker" />);
+    component.locator("input").click();
+    expect(component).toBeTruthy();
+  });
+  test("should print a placeholder if any", async ({ page, mount }) => {});
+  test("should accept a date in a specific format", async ({
+    page,
+    mount,
+  }) => {});
+});

src/stories/DateInput/DateInput.stories.tsx

@@ -0,0 +1,29 @@
+import DateInput from ".";
+import { Story, Meta } from "@storybook/react";
+import { DatepickerGlobalStyle } from "./_style";
+
+export default {
+  title: "Datepicker",
+  component: DateInput,
+} as Meta;
+
+const DatepickerTemplate: Story = (args) => (
+  <>
+    <DatepickerGlobalStyle />
+    <h2>Seleziona una data</h2>
+    <DateInput {...args} id="test1" placeholder="Select a date... " />
+  </>
+);
+export const DatepickerInput = DatepickerTemplate.bind({});
+DatepickerInput.args = {
+  onChange: ({ value }: { value: Date }) => {
+    console.log(value);
+  },
+};
+export const DatepickerInputWithIcon = DatepickerTemplate.bind({});
+DatepickerInput.args = {
+  onChange: ({ value }: { value: Date }) => {
+    console.log(value);
+  },
+  enableManualInput: true,
+};