@purpurds/date-field 0.0.1

package/dist/metadata.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "moduleName": "date-field",
+  "exports": [
+    "DateFieldProps",
+    "DateField"
+  ]
+};

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-text-field_3gl1k_1{position:relative;display:flex;flex-direction:column;gap:var(--purpur-spacing-50)}._purpur-text-field__label_3gl1k_7{display:flex;gap:var(--purpur-spacing-25);width:fit-content}._purpur-text-field__label-text_3gl1k_12{width:fit-content}._purpur-text-field__field-row_3gl1k_15{display:flex;width:100%}._purpur-text-field__frame_3gl1k_19{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--purpur-border-radius-sm);border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);pointer-events:none}._purpur-text-field__input-container_3gl1k_26{position:relative;display:flex;align-items:center;width:100%;border-radius:var(--purpur-border-radius-sm);background:var(--purpur-color-background-primary)}._purpur-text-field__input-container_3gl1k_26:has(:-internal-autofill-previewed),._purpur-text-field__input-container_3gl1k_26:has(:-internal-autofill-selected){background-color:var(--purpur-color-background-interactive-auto-fill)!important}._purpur-text-field__input-container--disabled_3gl1k_37{background:var(--purpur-color-background-interactive-disabled)}._purpur-text-field__input-container--readonly_3gl1k_40{background:var(--purpur-color-background-interactive-read-only)}._purpur-text-field__input-container--has-clear-button_3gl1k_43{padding-right:var(--purpur-spacing-25)}._purpur-text-field__input-container--end-adornment_3gl1k_46{padding-right:var(--purpur-spacing-150)}._purpur-text-field__input-container--end-adornment_3gl1k_46 ._purpur-text-field__input_3gl1k_26{padding-right:var(--purpur-spacing-100)}._purpur-text-field__input-container--start-adornment_3gl1k_52{padding-left:var(--purpur-spacing-150)}._purpur-text-field__input-container--start-adornment_3gl1k_52 ._purpur-text-field__input_3gl1k_26{padding-left:var(--purpur-spacing-100)}._purpur-text-field__input_3gl1k_26{border-radius:var(--purpur-border-radius-sm);padding:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-150);border:none;width:100%;box-sizing:border-box;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);line-height:150%;outline:none;background:transparent;color:var(--purpur-color-text-default)}._purpur-text-field__input_3gl1k_26:hover~._purpur-text-field__frame_3gl1k_19{border-width:var(--purpur-border-width-sm);border-color:var(--purpur-color-border-interactive-subtle-hover)}._purpur-text-field__input_3gl1k_26:active:not(:disabled):not(:read-only)~._purpur-text-field__frame_3gl1k_19,._purpur-text-field__input_3gl1k_26:focus:not(:disabled):not(:read-only)~._purpur-text-field__frame_3gl1k_19{outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:calc(var(--purpur-spacing-10) * 2);border-width:var(--purpur-border-width-xs);border-color:var(--purpur-color-border-interactive-subtle-hover)}._purpur-text-field__input_3gl1k_26:disabled{color:var(--purpur-color-text-weak)}._purpur-text-field__input_3gl1k_26:disabled~._purpur-text-field__frame_3gl1k_19{border-width:var(--purpur-border-width-xs);border-color:var(--purpur-color-border-medium)}._purpur-text-field__input_3gl1k_26:read-only:not(:disabled){color:var(--purpur-color-text-default)}._purpur-text-field__input_3gl1k_26:read-only:not(:disabled)~._purpur-text-field__frame_3gl1k_19{border-width:var(--purpur-border-width-xs)}._purpur-text-field__input_3gl1k_26:read-only:not(:disabled):not(._purpur-text-field__input--valid_3gl1k_94):not(._purpur-text-field__input--error_3gl1k_94)~._purpur-text-field__frame_3gl1k_19{border-color:var(--purpur-color-border-medium)}._purpur-text-field__input_3gl1k_26:-internal-autofill-previewed,._purpur-text-field__input_3gl1k_26:-internal-autofill-selected{box-shadow:inset 0 0 0 1px transparent,inset 0 0 0 100px var(--purpur-color-background-interactive-auto-fill)}._purpur-text-field__input_3gl1k_26._purpur-text-field__input--valid_3gl1k_94~._purpur-text-field__frame_3gl1k_19{border-color:var(--purpur-color-border-status-success)}._purpur-text-field__input_3gl1k_26._purpur-text-field__input--error_3gl1k_94:not(:hover)~._purpur-text-field__frame_3gl1k_19{border-color:var(--purpur-color-border-status-error)}._purpur-text-field__adornment-container_3gl1k_106{display:flex;align-items:center;gap:var(--purpur-spacing-50)}._purpur-text-field__valid-icon_3gl1k_111{color:var(--purpur-color-text-status-success-medium)}._purpur-date-field__container_ci2f4_1{position:relative}._purpur-date-field__overlay_ci2f4_5{pointer-events:none;box-sizing:border-box;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-scale-400);color:var(--purpur-color-text-default);line-height:var(--purpur-typography-line-height-loose);white-space:pre}._purpur-date-field__start-adornment_ci2f4_16{color:var(--purpur-color-text-weak)}

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const parseToDate: (date: string) => Date;
+export declare const parseToString: (date: Date | undefined) => string;
+export declare const mergeRefs: <T>(...inputRefs: (React.Ref<T> | undefined)[]) => React.Ref<T> | React.RefCallback<T>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,SAAU,MAAM,SAEvC,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,IAAI,GAAG,SAAS,WAEnD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,CAAC,gBACX,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,KACzC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAiBpC,CAAC"}

package/eslint.config.mjs

@@ -0,0 +1,2 @@
+import purpurCommon from "@purpurds/component-rig/eslint.config.mjs";
+export default purpurCommon;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@purpurds/date-field",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/date-field.cjs.js",
+  "types": "./dist/date-field.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/date-field.cjs.js",
+      "types": "./dist/date-field.d.ts",
+      "default": "./dist/date-field.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/date-field.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "date-fns": "~4.1.0",
+    "@purpurds/tokens": "7.7.0",
+    "@purpurds/field-error-text": "7.7.0",
+    "@purpurds/text-field": "7.7.0",
+    "@purpurds/field-helper-text": "7.7.0",
+    "@purpurds/icon": "7.7.0",
+    "@purpurds/label": "7.7.0"
+  },
+  "devDependencies": {
+    "eslint": "9.24.0",
+    "@storybook/react-vite": "^9.0.18",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~16.2.0",
+    "@testing-library/user-event": "~14.5.1",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.0.10",
+    "jsdom": "~22.1.0",
+    "lint-staged": "15.5.0",
+    "prettier": "~2.8.8",
+    "react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "storybook": "^9.0.18",
+    "typescript": "^5.6.3",
+    "vite": "^6.2.1",
+    "vitest": "^3.1.2",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/date-field.module.scss

@@ -0,0 +1,18 @@
+.purpur-date-field__container {
+  position: relative;
+}
+
+.purpur-date-field__overlay {
+  pointer-events: none;
+  box-sizing: border-box;
+  font-family: var(--purpur-typography-family-default);
+  font-size: var(--purpur-typography-scale-100);
+  font-weight: var(--purpur-typography-scale-400);
+  color: var(--purpur-color-text-default);
+  line-height: var(--purpur-typography-line-height-loose);
+  white-space: pre;
+}
+
+.purpur-date-field__start-adornment {
+  color: var(--purpur-color-text-weak);
+}

package/src/date-field.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { IconCalendar } from "@purpurds/icon/calendar";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/text-field/styles";
+import "@purpurds/date-field/styles";
+import "@purpurds/label/styles";
+import "@purpurds/field-helper-text/styles";
+import { DateField } from "./date-field";
+
+const meta = {
+  title: "Forms and Inputs/DateField",
+  component: DateField,
+  parameters: {
+    design: [
+      {
+        name: "DateField",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library---guidelines?node-id=39042-5999&p=f&t=5D0qSGRGqXJgdAxm-0",
+      },
+    ],
+  },
+  args: {
+    label: "Date field label",
+    helperText: "Helper text",
+    valid: false,
+    errorText: undefined,
+    disabled: false,
+    readOnly: false,
+    required: false,
+  },
+  argTypes: {
+    startAdornment: { table: { disable: true } },
+    endAdornment: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: "18.5rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DateField>;
+
+export default meta;
+type Story = StoryObj<typeof DateField>;
+
+export const Showcase: Story = {
+  args: {
+    label: "Date",
+    helperText: "This is a date field",
+  },
+  render: (args) => {
+    return <DateField {...args} startAdornment={<IconCalendar size="sm" />} />;
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    label: "Today",
+    helperText: "This is a controlled date field",
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = React.useState<Date | undefined>(new Date());
+    const selectHandler = (date: Date | undefined) => {
+      setValue(date);
+    };
+    return <DateField {...args} value={value} onChange={selectHandler} />;
+  },
+};

package/src/date-field.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { DateField } from "./date-field";
+
+describe("DateField", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders with placeholder overlay", () => {
+    render(<DateField label="Date" />);
+    expect(screen.getByLabelText("Date")).toBeTruthy();
+    expect(screen.getAllByText("Y").length).toBe(4);
+    expect(screen.getAllByText("M").length).toBe(2);
+    expect(screen.getAllByText("D").length).toBe(2);
+  });
+
+  it("renders with initial value", () => {
+    render(<DateField label="Date" value={new Date("2023-12-25")} />);
+    expect(screen.getByDisplayValue("2023-12-25")).toBeTruthy();
+  });
+
+  it("calls onChange with valid date", () => {
+    const handleChange = vi.fn();
+    render(<DateField label="Date" onChange={handleChange} />);
+    const input = screen.getByLabelText("Date");
+    fireEvent.change(input, { target: { value: "2023-12-31" } });
+    expect(handleChange).toHaveBeenCalled();
+    const calledDate = handleChange.mock.calls[0][0];
+    expect(calledDate.getFullYear()).toBe(2023);
+    expect(calledDate.getMonth()).toBe(11); // December is 11
+    expect(calledDate.getDate()).toBe(31);
+  });
+
+  it("does not call onChange for incomplete date", () => {
+    const handleChange = vi.fn();
+    render(<DateField label="Date" onChange={handleChange} />);
+    const input = screen.getByLabelText("Date");
+    fireEvent.change(input, { target: { value: "2023-12" } });
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it("formats input as user types", () => {
+    render(<DateField label="Date" />);
+    const input = screen.getByLabelText("Date") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "20231225" } });
+    expect(input.value).toBe("2023-12-25");
+  });
+
+  it("forwards ref to input", () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(<DateField label="Date" ref={ref} />);
+    expect(ref.current?.tagName).toBe("INPUT");
+  });
+
+  it("applies data-testid prop", () => {
+    render(<DateField label="Date" data-testid="date-field" />);
+    expect(screen.getByTestId("date-field-label")).toBeTruthy();
+    expect(screen.getByTestId("date-field-input")).toBeTruthy();
+  });
+});

package/src/date-field.tsx

@@ -0,0 +1,138 @@
+import React, {
+  type ForwardedRef,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { TextField, type TextFieldProps } from "@purpurds/text-field";
+import c from "classnames/bind";
+import { isValid } from "date-fns";
+
+import "@purpurds/text-field/styles";
+import styles from "./date-field.module.scss";
+import { mergeRefs, parseToDate, parseToString } from "./utils";
+
+const cx = c.bind(styles);
+
+type DateFieldPropsTemp = Omit<
+  TextFieldProps,
+  "type" | "value" | "onChange" | "clearButtonAriaLabel" | "clearButtonLabel" | "onClear"
+>;
+
+export type DateFieldProps = DateFieldPropsTemp & {
+  ["data-testid"]?: string;
+  value?: Date | undefined;
+  onChange?: (date: Date | undefined) => void;
+};
+
+const rootClassName = "purpur-date-field";
+const PLACEHOLDER = "YYYY-MM-DD";
+
+export const DateField = forwardRef(
+  (
+    { value, label, onChange, startAdornment, ...props }: DateFieldProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    const [inputValue, setInputValue] = useState<string>(parseToString(value));
+
+    // update inputValue when value prop changes
+    useEffect(() => {
+      setInputValue(value ? parseToString(value) : "");
+    }, [value]);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const mergedRef = mergeRefs(ref, inputRef);
+    const [overlayStyle, setOverlayStyle] = useState<React.CSSProperties>({});
+
+    useLayoutEffect(() => {
+      if (inputRef.current) {
+        const labelElement = window.document.querySelector(
+          `label[for="${inputRef.current.id}"]`
+        ) as HTMLLabelElement | null;
+        const labelHeight = labelElement ? labelElement.offsetHeight + 4 : 0;
+
+        const style = window.getComputedStyle(inputRef.current);
+
+        setOverlayStyle({
+          position: "absolute",
+          top: inputRef.current.offsetTop + labelHeight,
+          left: inputRef.current.offsetLeft,
+          padding: style.padding,
+          width: inputRef.current.offsetWidth,
+          height: inputRef.current.offsetHeight,
+        });
+      }
+    }, [inputValue, label, inputRef]);
+
+    const selectedDateCallback = (date: string) => {
+      if (date.length === 0) {
+        onChange?.(undefined);
+      }
+
+      if (date.length !== PLACEHOLDER.length) {
+        return;
+      }
+
+      const parsedDate = parseToDate(date);
+      if (isValid(parsedDate)) {
+        onChange?.(parsedDate);
+      }
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value.replace(/\D/g, "");
+      // Build value with dashes at correct positions
+      let formatted = "";
+      if (raw.length > 0) formatted += raw.slice(0, 4);
+      if (raw.length > 4) formatted += "-" + raw.slice(4, 6);
+      if (raw.length > 6) formatted += "-" + raw.slice(6, 8);
+      setInputValue(formatted);
+
+      selectedDateCallback(e.target.value);
+    };
+
+    const formatOverlayText = () => {
+      const chars = PLACEHOLDER.split("");
+      return chars.map((char, i) => {
+        const userChar = inputValue[i];
+        return (
+          <span
+            key={i}
+            style={{
+              color: userChar ? "transparent" : "var(--purpur-color-text-weak)",
+            }}
+          >
+            {userChar || char}
+          </span>
+        );
+      });
+    };
+
+    return (
+      <div className={cx(`${rootClassName}__container`)}>
+        <TextField
+          {...props}
+          startAdornment={
+            startAdornment ? (
+              <span className={cx(`${rootClassName}__start-adornment`)}>{startAdornment}</span>
+            ) : undefined
+          }
+          ref={mergedRef}
+          value={inputValue}
+          onChange={handleInputChange}
+          type="text"
+          maxLength={PLACEHOLDER.length}
+          inputMode="numeric"
+          label={label}
+        />
+        <div role="presentation" style={overlayStyle} className={cx(`${rootClassName}__overlay`)}>
+          {formatOverlayText()}
+        </div>
+      </div>
+    );
+  }
+);
+
+DateField.displayName = "DateField";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/utils.ts

@@ -0,0 +1,30 @@
+import { format, parse } from "date-fns";
+
+export const parseToDate = (date: string) => {
+  return parse(date, "yyyy-MM-dd", new Date());
+};
+
+export const parseToString = (date: Date | undefined) => {
+  return date ? format(date, "yyyy-MM-dd") : "";
+};
+
+export const mergeRefs = <T>(
+  ...inputRefs: (React.Ref<T> | undefined)[]
+): React.Ref<T> | React.RefCallback<T> => {
+  const filteredInputRefs = inputRefs.filter(Boolean);
+
+  if (filteredInputRefs.length <= 1) {
+    const firstRef = filteredInputRefs[0];
+    return firstRef || null;
+  }
+
+  return (ref: T | null) => {
+    for (const inputRef of filteredInputRefs) {
+      if (typeof inputRef === "function") {
+        inputRef(ref);
+      } else if (inputRef) {
+        (inputRef as React.RefObject<T | null>).current = ref;
+      }
+    }
+  };
+};