feat(datepicker): developing datepicker component (#907)

Co-authored-by: Erbil <[email protected]>
Trendyol · Dec 4, 2024 · 7b0ddd5 · 7b0ddd5
1 parent 7831765
commit 7b0ddd5
Show file tree

Hide file tree

Showing 18 changed files with 2,130 additions and 440 deletions.
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
@@ -36,6 +36,7 @@ module.exports = {
         "calendar",
         "table",
         "split-button",
+        "datepicker",
       ],
     ],
   },

diff --git a/playground/template.html b/playground/template.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Baklava Playground</title>
-    <link rel="stylesheet" href="./dist/themes/default.css" />
-    <script type="module" src="./dist/baklava.js"></script>
-    <script>
-      // Live reload
-      new EventSource("/esbuild").addEventListener("change", () => location.reload());
-    </script>
-    <style>
-      *:not(:defined) {
-        display: none;
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Baklava Playground</title>
+  <link href="./dist/themes/default.css" rel="stylesheet" />
+  <script src="./dist/baklava.js" type="module"></script>
+  <script>
+    // Live reload
+    new EventSource("/esbuild").addEventListener("change", () => location.reload());
+  </script>
+  <style>
+    *:not(:defined) {
+      display: none;
+    }
 
-      body {
-        font-family: var(--bl-font-family);
-      }
+    body {
+      font-family: var(--bl-font-family);
+    }
 
-      h1 {
-        font: var(--bl-font-display-1);
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Baklava Playground</h1>
+    h1 {
+      font: var(--bl-font-display-1);
+    }
+  </style>
+</head>
+<body>
+<h1>Baklava Playground</h1>
 
-    <p>
-      Copy this file as playground/index.html and try your work here by running
-      <code>npm run serve</code>.
-    </p>
+<p>
+  Copy this file as playground/index.html and try your work here by running
+  <code>npm run serve</code>.
+</p>
 
-    <bl-button>Baklava is ready</bl-button>
-  </body>
-</html>
+<bl-button>Baklava is ready</bl-button>
+</body>
+</html>
diff --git a/src/baklava.ts b/src/baklava.ts
@@ -36,4 +36,5 @@ export { default as BlTableHeaderCell } from "./components/table/table-header-ce
 export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
 export { default as BlSplitButton } from "./components/split-button/bl-split-button";
 export { default as BlCalendar } from "./components/calendar/bl-calendar";
+export { default as BlDatePicker } from "./components/datepicker/bl-datepicker";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";
diff --git a/src/components/calendar/bl-calendar.css b/src/components/calendar/bl-calendar.css
@@ -5,10 +5,10 @@
 
 .calendar-content {
   display: flex;
-  padding: 16px;
+  padding: var(--bl-size-m);
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  gap: var(--bl-size-m);
   border-radius: var(--bl-border-radius-s);
   width: fit-content;
   background: var(--bl-color-neutral-full);
@@ -19,7 +19,7 @@
   justify-content: space-between;
   width: 100%;
   align-items: center;
-  gap: 2px;
+  padding-bottom: var(--bl-size-s);
 }
 
 .arrow {
@@ -50,7 +50,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  padding-bottom: 8px;
+  padding-bottom: var(--bl-size-2xs);
 }
 
 .day {
@@ -115,7 +115,7 @@
 .weekday-text {
   color: var(--bl-color-neutral-dark);
   text-align: center;
-  padding: 8px 0;
+  padding: var(--bl-size-2xs) 0;
   width: 40px;
 }
 
@@ -132,7 +132,7 @@
 }
 
 .grid-item:not(:nth-last-child(-n + 3)) {
-  padding-bottom: 8px;
+  padding-bottom: var(--bl-size-2xs);
 }
 
 .calendar-text {

diff --git a/src/components/calendar/bl-calendar.stories.mdx b/src/components/calendar/bl-calendar.stories.mdx
@@ -1,7 +1,7 @@
-import { html } from 'lit';
-import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { html } from "lit";
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 <Meta
   title="Components/Calendar"
@@ -16,23 +16,26 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
   }}
 />
 
-export const CalendarTemplate = (args) => html`<bl-calendar
+export const CalendarTemplate = (args) => html`
+  <bl-calendar
     type=${ifDefined(args.type)}
     min-date=${ifDefined(args.minDate)}
     max-date=${ifDefined(args.maxDate)}
     start-of-week=${ifDefined(args.startOfWeek)}
     locale=${ifDefined(args.locale)}
-    default-value=${ifDefined(args.defaultValue)}
-    disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}</bl-calendar>`
+    value=${ifDefined(args.value)}
+    disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}
+  </bl-calendar>`
 
 
-export const Template = (args) => html`${CalendarTemplate({...args})}`;
+export const Template = (args) => html`${CalendarTemplate({ ...args })}`;
 
 
 # Calendar
 
 <bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/795)</bl-badge>
-<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=1412-8914&mode=design&t=b0kU7tBfJQFvz2at-0)</bl-badge>
+<bl-badge
+  icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=1412-8914&mode=design&t=b0kU7tBfJQFvz2at-0)</bl-badge>
 
 Calendar component is an **internal** component for using inside Datepicker component.
 
@@ -77,12 +80,28 @@ You can select date range from calendar.
   </Story>
 </Canvas>
 
+### Set Value
+
+You can set default value to calendar.
+
+<Canvas>
+  <Story name="Default Value" args={{
+    type: 'single',
+    value: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ### Disabled Dates
 
 You can set dates which you want to disable from calendar.
 
 <Canvas>
-  <Story name="Disabled Dates" args={{ type: 'single',disabledDates:`["${new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+2)}"]` }}>
+  <Story name="Disabled Dates" args={{
+    type: 'single',
+    disabledDates: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
+  }}>
     {Template.bind({})}
   </Story>
 </Canvas>