gbs-add-block 1.2.10 → 1.2.11

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.10)
+# GBS Building Blocks 2.0 (v1.2.11)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -13,9 +13,10 @@ DataGrid and Combobox use the redesigned core API and design system. Install the
 ```bash
 npx gbs-add-block -a DataGrid -beta
 npx gbs-add-block -a Combobox -beta
+npx gbs-add-block -a DatePicker -beta
 ```
 
-## What's New 🎉 (Ver 1.2.10)
+## What's New 🎉 (Ver 1.2.11)
 
 - Update Candidate for next major change 2.0.0
 

package/index.cjs

@@ -32,13 +32,10 @@ const CONFIG = {
     "DataGrid",
     "BreadCrumb",
     "Bargraph",
-    "UsePaginatedData",
-    "UseUploader",
-  ],
-  betaComponents: [
-    "DataGrid",
-    "Combobox",
-  ],
+    "UsePaginatedData",
+    "UseUploader",
+  ],
+  betaComponents: ["DataGrid", "Combobox", "DatePicker"],
   // Define component dependencies
   dependencies: {
     FormRenderer: ["Select", "MultiSelect", "Input", "DatePicker"],
@@ -46,19 +43,19 @@ const CONFIG = {
   docs: "https://gramprokit.vercel.app/",
 };
 
-const SOURCE_PATH = path.join(__dirname, "source", "components");
-const BETA_SOURCE_PATH = path.join(__dirname, "source", "beta-components");
-const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
-
-const normalizeComponent = (component, availableComponents) =>
-  availableComponents.find(
-    (available) => available.toLowerCase() === component.toLowerCase(),
-  );
-
-const getAvailableComponents = (beta = false) =>
-  beta ? CONFIG.betaComponents : CONFIG.components;
-
-const getSourcePath = (beta = false) => (beta ? BETA_SOURCE_PATH : SOURCE_PATH);
+const SOURCE_PATH = path.join(__dirname, "source", "components");
+const BETA_SOURCE_PATH = path.join(__dirname, "source", "beta-components");
+const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
+
+const normalizeComponent = (component, availableComponents) =>
+  availableComponents.find(
+    (available) => available.toLowerCase() === component.toLowerCase(),
+  );
+
+const getAvailableComponents = (beta = false) =>
+  beta ? CONFIG.betaComponents : CONFIG.components;
+
+const getSourcePath = (beta = false) => (beta ? BETA_SOURCE_PATH : SOURCE_PATH);
 
 const copyCommonFiles = async (destPath) => {
   const commonFiles = [
@@ -81,16 +78,19 @@ const checkComponentExists = (component, destPath) => {
   return fs.existsSync(componentPath);
 };
 
-const copyComponent = async (component, destPath, beta = false) => {
-  try {
-    const componentSrc = path.join(getSourcePath(beta), component.toLowerCase());
+const copyComponent = async (component, destPath, beta = false) => {
+  try {
+    const componentSrc = path.join(
+      getSourcePath(beta),
+      component.toLowerCase(),
+    );
     const componentDest = path.join(destPath, component.toLowerCase());
 
-    if (!fs.existsSync(componentSrc)) {
-      throw new Error(
-        `Component ${component} not found in ${beta ? "beta " : ""}source directory.`,
-      );
-    }
+    if (!fs.existsSync(componentSrc)) {
+      throw new Error(
+        `Component ${component} not found in ${beta ? "beta " : ""}source directory.`,
+      );
+    }
 
     await fs.copy(componentSrc, componentDest, { overwrite: true });
     console.log(
@@ -106,17 +106,21 @@ const copyComponent = async (component, destPath, beta = false) => {
   }
 };
 
-const installComponentWithDependencies = async (component, destPath, beta = false) => {
+const installComponentWithDependencies = async (
+  component,
+  destPath,
+  beta = false,
+) => {
   // Get dependencies for the component
   const dependencies = CONFIG.dependencies[component] || [];
   const componentsToInstall = new Set([component, ...dependencies]);
 
   // Check which components need to be installed
-  const pendingInstalls = beta
-    ? Array.from(componentsToInstall)
-    : Array.from(componentsToInstall).filter(
-        (comp) => !checkComponentExists(comp, destPath),
-      );
+  const pendingInstalls = beta
+    ? Array.from(componentsToInstall)
+    : Array.from(componentsToInstall).filter(
+        (comp) => !checkComponentExists(comp, destPath),
+      );
 
   if (pendingInstalls.length === 0) {
     console.log(
@@ -127,7 +131,7 @@ const installComponentWithDependencies = async (component, destPath, beta = fals
 
   // Install all pending components
   for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath, beta);
+    await copyComponent(comp, destPath, beta);
   }
 
   if (dependencies.length > 0) {
@@ -140,7 +144,11 @@ const installComponentWithDependencies = async (component, destPath, beta = fals
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const installMultipleComponents = async (components, destPath, beta = false) => {
+const installMultipleComponents = async (
+  components,
+  destPath,
+  beta = false,
+) => {
   const allComponentsToInstall = new Set();
 
   // Collect all components and their dependencies
@@ -151,11 +159,11 @@ const installMultipleComponents = async (components, destPath, beta = false) =>
   });
 
   // Filter out already installed components
-  const pendingInstalls = beta
-    ? Array.from(allComponentsToInstall)
-    : Array.from(allComponentsToInstall).filter(
-        (comp) => !checkComponentExists(comp, destPath),
-      );
+  const pendingInstalls = beta
+    ? Array.from(allComponentsToInstall)
+    : Array.from(allComponentsToInstall).filter(
+        (comp) => !checkComponentExists(comp, destPath),
+      );
 
   if (pendingInstalls.length === 0) {
     console.log(
@@ -168,7 +176,7 @@ const installMultipleComponents = async (components, destPath, beta = false) =>
 
   // Install all pending components
   for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath, beta);
+    await copyComponent(comp, destPath, beta);
   }
 
   // Show dependency information
@@ -188,7 +196,7 @@ const installMultipleComponents = async (components, destPath, beta = false) =>
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const interactiveComponentSelector = async (beta = false) => {
+const interactiveComponentSelector = async (beta = false) => {
   return new Promise((resolve) => {
     const rl = readline.createInterface({
       input: process.stdin,
@@ -205,9 +213,9 @@ const interactiveComponentSelector = async (beta = false) => {
         "Use ↑/↓ arrow keys to navigate, SPACE to select/deselect, ENTER to install\n",
       );
 
-      const availableComponents = getAvailableComponents(beta);
-
-      availableComponents.forEach((component, index) => {
+      const availableComponents = getAvailableComponents(beta);
+
+      availableComponents.forEach((component, index) => {
         const isSelected = selectedComponents.has(component);
         const isCurrentIndex = index === currentIndex;
         const deps = CONFIG.dependencies[component]
@@ -237,13 +245,13 @@ const interactiveComponentSelector = async (beta = false) => {
           break;
         case "\u001b[B": // Down arrow
           currentIndex = Math.min(
-            getAvailableComponents(beta).length - 1,
+            getAvailableComponents(beta).length - 1,
             currentIndex + 1,
           );
           renderMenu();
           break;
         case " ": // Space bar
-          const component = getAvailableComponents(beta)[currentIndex];
+          const component = getAvailableComponents(beta)[currentIndex];
           if (selectedComponents.has(component)) {
             selectedComponents.delete(component);
           } else {
@@ -286,29 +294,29 @@ const parseMultipleComponents = (componentString) => {
     .filter((comp) => comp.length > 0);
 };
 
-const validateComponents = (components, beta = false) => {
-  const availableComponents = getAvailableComponents(beta);
-  const invalidComponents = components.filter(
-    (comp) => !availableComponents.includes(comp),
-  );
-  if (invalidComponents.length > 0) {
-    console.error(`Invalid components: ${invalidComponents.join(", ")}`);
-    console.log(`\nAvailable ${beta ? "beta " : ""}components:`);
-    availableComponents.forEach((comp) => console.log(`- ${comp}`));
-    if (!beta) {
-      console.log("\nRedesigned beta components (install with -beta):");
-      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
-    }
-    return false;
-  }
-  return true;
-};
-
-const main = async () => {
-  const args = hideBin(process.argv).map((arg) =>
-    arg === "-beta" ? "--beta" : arg,
-  );
-  const argv = yargs(args)
+const validateComponents = (components, beta = false) => {
+  const availableComponents = getAvailableComponents(beta);
+  const invalidComponents = components.filter(
+    (comp) => !availableComponents.includes(comp),
+  );
+  if (invalidComponents.length > 0) {
+    console.error(`Invalid components: ${invalidComponents.join(", ")}`);
+    console.log(`\nAvailable ${beta ? "beta " : ""}components:`);
+    availableComponents.forEach((comp) => console.log(`- ${comp}`));
+    if (!beta) {
+      console.log("\nRedesigned beta components (install with -beta):");
+      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
+    }
+    return false;
+  }
+  return true;
+};
+
+const main = async () => {
+  const args = hideBin(process.argv).map((arg) =>
+    arg === "-beta" ? "--beta" : arg,
+  );
+  const argv = yargs(args)
     .option("add", {
       alias: "a",
       describe:
@@ -320,44 +328,44 @@ const main = async () => {
       describe: "Interactive component selection mode",
       type: "boolean",
     })
-    .option("list", {
-      alias: "l",
-      describe: "List available components",
-      type: "boolean",
-    })
-    .option("beta", {
-      describe: "Install redesigned beta components",
-      type: "boolean",
-      default: false,
-    })
-    .example("$0 -a Button", "Install a single component")
-    .example("$0 -a Button,Card,Modal", "Install multiple components")
-    .example("$0 -a DataGrid -beta", "Install the redesigned beta DataGrid")
-    .example("$0 -a Combobox -beta", "Install the redesigned beta Combobox")
-    .example("$0 -i", "Interactive selection mode")
+    .option("list", {
+      alias: "l",
+      describe: "List available components",
+      type: "boolean",
+    })
+    .option("beta", {
+      describe: "Install redesigned beta components",
+      type: "boolean",
+      default: false,
+    })
+    .example("$0 -a Button", "Install a single component")
+    .example("$0 -a Button,Card,Modal", "Install multiple components")
+    .example("$0 -a DataGrid -beta", "Install the redesigned beta DataGrid")
+    .example("$0 -a Combobox -beta", "Install the redesigned beta Combobox")
+    .example("$0 -i", "Interactive selection mode")
     .help().argv;
 
-  // List components if requested
-  if (argv.list) {
-    const availableComponents = getAvailableComponents(argv.beta);
-    console.log(`\nAvailable ${argv.beta ? "beta " : ""}components:`);
-    availableComponents.forEach((comp) => {
-      const deps = CONFIG.dependencies[comp]
-        ? ` (requires: ${CONFIG.dependencies[comp].join(", ")})`
-        : "";
-      console.log(`- ${comp}${deps}`);
-    });
-    if (!argv.beta) {
-      console.log("\nRedesigned beta components (install with -beta):");
-      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
-    }
-    return;
-  }
+  // List components if requested
+  if (argv.list) {
+    const availableComponents = getAvailableComponents(argv.beta);
+    console.log(`\nAvailable ${argv.beta ? "beta " : ""}components:`);
+    availableComponents.forEach((comp) => {
+      const deps = CONFIG.dependencies[comp]
+        ? ` (requires: ${CONFIG.dependencies[comp].join(", ")})`
+        : "";
+      console.log(`- ${comp}${deps}`);
+    });
+    if (!argv.beta) {
+      console.log("\nRedesigned beta components (install with -beta):");
+      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
+    }
+    return;
+  }
 
   // Interactive mode
-  if (argv.interactive) {
-    console.log("Starting interactive component selector...\n");
-    const selectedComponents = await interactiveComponentSelector(argv.beta);
+  if (argv.interactive) {
+    console.log("Starting interactive component selector...\n");
+    const selectedComponents = await interactiveComponentSelector(argv.beta);
 
     if (selectedComponents.length === 0) {
       console.log("No components selected. Exiting...");
@@ -373,8 +381,8 @@ const main = async () => {
       await copyCommonFiles(destPath);
     }
 
-    // Install selected components
-    await installMultipleComponents(selectedComponents, destPath, argv.beta);
+    // Install selected components
+    await installMultipleComponents(selectedComponents, destPath, argv.beta);
     return;
   }
 
@@ -385,14 +393,16 @@ const main = async () => {
     process.exit(1);
   }
 
-  // Parse components (single or multiple)
-  const componentInput = argv.add;
-  const components = parseMultipleComponents(componentInput).map((component) =>
-    normalizeComponent(component, getAvailableComponents(argv.beta)) || component,
-  );
-
-  // Validate all components
-  if (!validateComponents(components, argv.beta)) {
+  // Parse components (single or multiple)
+  const componentInput = argv.add;
+  const components = parseMultipleComponents(componentInput).map(
+    (component) =>
+      normalizeComponent(component, getAvailableComponents(argv.beta)) ||
+      component,
+  );
+
+  // Validate all components
+  if (!validateComponents(components, argv.beta)) {
     process.exit(1);
   }
 
@@ -406,14 +416,14 @@ const main = async () => {
   }
 
   // Install components
-  if (components.length === 1) {
-    // Single component installation (existing behavior)
-    await installComponentWithDependencies(components[0], destPath, argv.beta);
-  } else {
-    // Multiple components installation
-    await installMultipleComponents(components, destPath, argv.beta);
-  }
-};
+  if (components.length === 1) {
+    // Single component installation (existing behavior)
+    await installComponentWithDependencies(components[0], destPath, argv.beta);
+  } else {
+    // Multiple components installation
+    await installMultipleComponents(components, destPath, argv.beta);
+  }
+};
 
 main().catch((error) => {
   console.error("Error:", error.message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/beta-components/datepicker/README.md

@@ -0,0 +1,141 @@
+# DatePicker and DateRangePicker
+
+Two date fields built on one engine and styled to match the DataGrid and the
+Combobox. No runtime dependencies besides React 19.
+
+- **`<DatePicker>`** — one date.
+- **`<DateRangePicker>`** — a start and an end, with a live preview between them.
+
+Both support typed entry in the user's own date order, min/max limits, blocked
+days, month and year panels, week numbers, forms, full keyboard control, dark
+mode and right-to-left layouts.
+
+## Setup
+
+```ts
+import { DatePicker, DateRangePicker } from "@/components/date-picker";
+import "@/components/date-picker/styles.css";
+```
+
+The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
+loaded, so every component shares a theme, and falls back to the same palette
+when used on its own.
+
+## Basic usage
+
+```tsx
+const [date, setDate] = useState<Date | null>(null);
+
+<DatePicker label="Start date" value={date} onChange={setDate} />;
+
+const [range, setRange] = useState<DateRange>({ start: null, end: null });
+
+<DateRangePicker label="Period" value={range} onChange={setRange} />;
+```
+
+Both are controlled with `value` + `onChange`, or uncontrolled with
+`defaultValue`. `value`, `defaultValue`, `min` and `max` accept a `Date`, an ISO
+`yyyy-mm-dd` string or a timestamp; `onChange` always gives you `Date` objects at
+local midnight. The range picker's `onChange` also receives a `complete` flag,
+which is `false` after the first of the two clicks.
+
+## Props
+
+Shared by both components:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `min` / `max` | `Date \| string \| number` | — | Earliest and latest selectable day. |
+| `isDateDisabled` | `(date: Date) => boolean` | — | Called per rendered day; return true to block it. |
+| `locale` | `string` | runtime locale | Decides month names, field order and the first day of the week. |
+| `weekStartsOn` | `0`–`6` | locale's first day | 0 is Sunday. |
+| `format` | `Intl.DateTimeFormatOptions \| (date, locale) => string` | `{ year, month: "short", day }` | How the chosen date is written in the field. |
+| `numberOfMonths` | `number` | `1` (range: `2`) | Months shown side by side. |
+| `showWeekNumbers` | `boolean` | `false` | Adds an ISO week column. |
+| `showToday` | `boolean` | `true` (range: `false`) | The "Today" shortcut in the footer. |
+| `allowInput` | `boolean` | `true` | Let people type a date. When false the field is read-only and opens on click. |
+| `fixedWeeks` | `boolean` | `true` | Always six week rows, so the popover never changes height. |
+| `label`, `description`, `error` | `ReactNode` | — | Field label, hint and error message. `error` also marks the control invalid. |
+| `placeholder` | `string` | the locale's pattern | e.g. `dd/mm/yyyy`. |
+| `required`, `disabled`, `readOnly` | `boolean` | `false` | Field states. |
+| `clearable` | `boolean` | `true` | Show the clear button. |
+| `size` | `"sm"` \| `"md"` \| `"lg"` | `"md"` | Control height and font size. |
+| `name` | `string` | — | Posts `yyyy-mm-dd` in a hidden input. The range picker posts `name-start` and `name-end`. |
+| `className`, `classNames`, `style` | — | — | Styling hooks. Slots: `root`, `label`, `control`, `input`, `popover`, `calendar`, `day`, `footer`, `presets`. |
+| `localeText` | `Partial<DatePickerLocaleText>` | English | Overrides UI text. |
+| `onOpenChange` | `(open: boolean) => void` | — | Fires when the calendar opens or closes. |
+| `ref` | `Ref<DatePickerHandle<T>>` | — | `open()`, `close()`, `toggle()`, `focus()`, `clear()`, `getValue()`. |
+
+`DatePicker` adds `value` / `defaultValue` (`Date \| null`) and `closeOnSelect`
+(default `true`). `DateRangePicker` adds `value` / `defaultValue`
+(`{ start, end }`), `presets` and `closeOnSelect` (closes once both ends are set).
+
+## Typed entry
+
+People can type instead of picking. Input is read in the locale's own field
+order, so `03/04/2026` is 3 April in `en-GB` and 4 March in `en-US`. ISO
+(`2026-03-12`) is accepted in every locale, month names work (`12 Mar 2026`), and
+a missing year or month falls back to the month on screen. The calendar follows
+along as you type. Text that isn't a date, or a date outside the limits, shows a
+message when the field loses focus and leaves the value untouched.
+
+## Range presets
+
+```tsx
+<DateRangePicker
+  value={range}
+  onChange={setRange}
+  presets={[
+    { label: "Last 7 days", range: { start: addDays(new Date(), -6), end: new Date() } },
+    { label: "This month", range: { start: startOfMonth(new Date()), end: new Date() } },
+  ]}
+/>
+```
+
+## Keyboard
+
+| Keys | Action |
+| --- | --- |
+| **Enter**, **↓** | Open the calendar (from the field). |
+| **←** / **→** | Previous / next day (swapped in right-to-left layouts). |
+| **↑** / **↓** | Same weekday, previous / next week. |
+| **Home** / **End** | First / last day of the week. |
+| **Page Up** / **Page Down** | Previous / next month. |
+| **Shift + Page Up/Down** | Previous / next year. |
+| **Enter**, **Space** | Choose the focused day. |
+| **Escape** | Close and return focus to the calendar button. |
+
+Each month is a `role="grid"` where only the focused day is tabbable, which is
+the WAI-ARIA pattern for a date picker. The calendar renders in the top layer
+through the native Popover API, so it is never clipped by a scrolling parent
+(including inside a DataGrid cell).
+
+## Theming
+
+Override `--dp-*` variables (they default to the grid's `--dg-*`):
+
+```css
+.dp-root { --dp-accent: #7c3aed; --dp-radius: 12px; --dp-day-size: 38px; }
+```
+
+State attributes for styling: `data-state="open"`, `data-size`, `data-invalid`,
+`data-disabled` on the root and control; `data-today`, `data-selected`,
+`data-outside`, `data-weekend` on days; `data-in-range`, `data-range-start`,
+`data-range-end` on day cells.
+
+## Headless use
+
+`useDatePicker()` holds the whole engine (selection, visible months, typed
+input, keyboard movement, popover state) and is exported if you want a different
+UI on top. The framework-free helpers — `buildMonth`, `buildMonths`, `parseDate`,
+`formatDate`, `moveByKey`, `normalizeRange`, `isInRange`, `toISODate` — are
+exported from `@/components/date-picker/core` and also run on a server.
+
+## Known limits
+
+- Dates only: no time-of-day or time zone selection. Values are local midnight.
+- One range per field; multiple disjoint ranges aren't supported.
+- Only the Gregorian calendar is handled, though month and weekday names,
+  field order and the first day of the week all follow the locale.
+- When rendering on a server, pass `locale` explicitly so the server and the
+  browser format the field identically.