feat(datetime): setup initial datetime package

mlaursen · mlaursen · commit 824a83da02d2 · 2025-07-29T16:49:04.000-04:00
diff --git a/apps/docs/_everything.scss b/apps/docs/_everything.scss
@@ -1,14 +1,17 @@
 @forward "overrides";
 @forward "@react-md/code" as code-*;
+@forward "@react-md/datetime" as datetime-*;
 
 @use "@react-md/core";
 @use "@react-md/code";
+@use "@react-md/datetime";
 
 @mixin light-theme($core) {
   @if $core {
     @include core.use-light-theme;
   }
   @include code.use-light-theme;
+  @include datetime.use-light-theme;
 
   // Maybe add this one into core? Useful when you want a "transparent"
   // background on any surface that actually has a background color so it can
@@ -33,6 +36,7 @@
     @include core.use-dark-theme;
   }
   @include code.use-dark-theme;
+  @include datetime.use-dark-theme;
 
   --background-color: #{core.$dark-theme-background-color};
   --logo-shadow: #{core.$white};
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -50,6 +50,7 @@
     "@next/third-parties": "^14.2.15",
     "@react-md/code": "workspace:*",
     "@react-md/core": "workspace:*",
+    "@react-md/datetime": "workspace:*",
     "@react-md/material-icons": "workspace:*",
     "algoliasearch": "^5.34.1",
     "cnbuilder": "^3.1.0",
diff --git a/apps/docs/src/app/(main)/layout.scss b/apps/docs/src/app/(main)/layout.scss
@@ -2,6 +2,7 @@
 
 @include everything.styles;
 @include everything.code-styles;
+@include everything.datetime-styles;
 
 // See the next.config.mjs to see how the `$env` gets defined
 $is_production: $env == production;
@@ -11,6 +12,7 @@ $is_production: $env == production;
     @if everything.$disable-default-root-theme {
       @include everything.variables;
       @include everything.code-variables;
+      @include everything.datetime-variables;
 
       @if everything.$color-scheme ==
         system and
diff --git a/apps/playground/_everything.scss b/apps/playground/_everything.scss
@@ -1,15 +1,19 @@
 @forward "overrides";
 @forward "@react-md/code" as code-*;
+@forward "@react-md/datetime" as datetime-*;
 
 @use "@react-md/core";
 @use "@react-md/code";
+@use "@react-md/datetime";
 
 @mixin light-theme {
   @include core.use-light-theme;
   @include code.use-light-theme;
+  @include datetime.use-light-theme;
 }
 
 @mixin dark-theme {
   @include core.use-dark-theme;
   @include code.use-dark-theme;
+  @include datetime.use-dark-theme;
 }
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@react-md/code": "workspace:*",
     "@react-md/core": "workspace:*",
+    "@react-md/datetime": "workspace:*",
     "@react-md/material-icons": "workspace:*",
     "cnbuilder": "^3.1.0",
     "js-cookie": "^3.0.5",
diff --git a/apps/playground/src/app/app.scss b/apps/playground/src/app/app.scss
@@ -2,10 +2,12 @@
 
 @include everything.styles;
 @include everything.code-styles;
+@include everything.datetime-styles;
 
 :root {
   @include everything.variables;
   @include everything.code-variables;
+  @include everything.datetime-variables;
 
   @media (prefers-color-scheme: dark) {
     @include everything.dark-theme;
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "docs-dev": "pnpm --filter docs dev",
     "docs-generator-dev": "pnpm --filter docs-generator dev",
     "sassdoc-dev": "pnpm --filter sassdoc-generator dev",
+    "datetime-dev": "pnpm --filter datetime dev",
     "dev": "pnpm turbo-s dev --no-cache --continue",
     "lint": "pnpm run turbo-s run lint",
     "clean": "pnpm run turbo-s clean && pnpm clean-root",
@@ -31,6 +32,8 @@
     "test-core-watch": "pnpm --filter core test --watch",
     "test-core-coverage": "pnpm --filter core test --coverage",
     "test-core-coverage-watch": "pnpm --filter core test --coverage --watch",
+    "test-datetime": "pnpm --filter datetime test",
+    "test-datetime-watch": "pnpm --filter datetime test --watch",
     "core-export-map": "pnpm --filter core export-map",
     "core-index-file": "pnpm --filter core create-index-file",
     "typecheck": "pnpm run turbo-s typecheck",
@@ -39,7 +42,7 @@
     "check-format": "prettier --check .",
     "changeset": "changeset",
     "run-script": "tsx --tsconfig scripts/tsconfig.json",
-    "turbo-release": "pnpm run turbo-s --filter=react-md --filter=@react-md/codemod --filter=@react-md/material-icons",
+    "turbo-release": "pnpm run turbo-s --filter=react-md --filter=@react-md/codemod --filter=@react-md/material-icons --filter=@react-md/datetime",
     "clean-release-dist": "pnpm run turbo-release clean-dist",
     "build-release-packages": "pnpm run turbo-release build",
     "build-release": "npm-run-all core-index-file build-release-packages",
diff --git a/packages/datetime/.npmignore b/packages/datetime/.npmignore
@@ -0,0 +1,6 @@
+# I only want the src, dist, README.md, CHANGELOG.md, LICENSE and, package.json to be published
+/*
+!/src/**
+src/**/*.scss
+!/dist/**
+**/__tests__/**
diff --git a/packages/datetime/.stylelintrc.json b/packages/datetime/.stylelintrc.json
@@ -0,0 +1,15 @@
+{
+  "extends": ["stylelint-config-recommended-scss"],
+  "plugins": ["stylelint-order", "stylelint-scss"],
+  "rules": {
+    "no-descending-specificity": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      { "ignorePseudoClasses": ["global", "local"] }
+    ],
+    "order/properties-alphabetical-order": true,
+    "scss/comment-no-empty": null,
+    "scss/operator-no-newline-before": null,
+    "scss/operator-no-newline-after": null
+  }
+}
diff --git a/packages/datetime/.swcrc b/packages/datetime/.swcrc
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc.json",
+  "exclude": ["__tests__"],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
+    "target": "es2021"
+  },
+  "sourceMaps": true
+}
diff --git a/packages/datetime/LICENSE b/packages/datetime/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Mikkel Laursen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/packages/datetime/README.md b/packages/datetime/README.md
@@ -0,0 +1 @@
+# @react-md/datetime
diff --git a/packages/datetime/eslint.config.mjs b/packages/datetime/eslint.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+import { config, configs, gitignore } from "@mlaursen/eslint-config";
+import { join } from "node:path";
+
+const strict = process.env.STRICT_TYPING === "true";
+
+const frontend = strict
+  ? configs.frontendTypeChecking(import.meta.dirname, "jest")
+  : configs.frontend("jest");
+
+export default config(
+  gitignore(join(import.meta.url, "..", "..")),
+  ...frontend
+);
diff --git a/packages/datetime/package.json b/packages/datetime/package.json
@@ -0,0 +1,116 @@
+{
+  "name": "@react-md/datetime",
+  "version": "1.0.0",
+  "description": "The core components and functionality for react-md.",
+  "type": "module",
+  "sass": "./dist/_datetime.scss",
+  "exports": {
+    ".": {
+      "sass": "./dist/_datetime.scss"
+    },
+    "./*": "./dist/*.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "dist/**/*.scss"
+  ],
+  "scripts": {
+    "run-script": "tsx --tsconfig scripts/tsconfig.json",
+    "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
+    "prepare-release": "npm-run-all clean-dist build",
+    "build": "npm-run-all build-esm build-scss build-types",
+    "build-esm": "swc -d ./dist --strip-leading-paths src",
+    "build-esm-watch": "pnpm run build-esm --watch",
+    "build-types": "tsc -P tsconfig.types.json",
+    "build-types-watch": "pnpm run build-types --watch",
+    "build-scss": "pnpm run run-script scripts/copySassFiles.ts",
+    "build-scss-watch": "pnpm run build-scss --watch",
+    "clean-dist": "rm -rf dist",
+    "clean": "rm -rf .turbo dist node_modules",
+    "typecheck": "tsc --noEmit",
+    "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",
+    "lint-styles": "stylelint \"src/**/*.{css,scss}\"",
+    "lint": "npm-run-all lint-scripts lint-styles",
+    "test": "vitest"
+  },
+  "author": "Mikkel Laursen <mlaursen03@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mlaursen/react-md.git",
+    "directory": "packages/datetime"
+  },
+  "bugs": {
+    "url": "https://github.com/mlaursen/react-md/issues"
+  },
+  "homepage": "https://react-md.dev",
+  "keywords": [
+    "react",
+    "material design",
+    "react-md",
+    "components",
+    "ui",
+    "library",
+    "date",
+    "time",
+    "datetime",
+    "picker"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@date-fns/tz": "^1.2.0",
+    "@react-md/core": "workspace:*",
+    "cnbuilder": "^3.1.0",
+    "date-fns": "^4.1.0"
+  },
+  "devDependencies": {
+    "@mlaursen/eslint-config": "^8.0.1",
+    "@swc/cli": "^0.6.0",
+    "@swc/core": "^1.11.29",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/node": "^22.15.29",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.8.1",
+    "chokidar": "^4.0.3",
+    "eslint": "^9.28.0",
+    "glob": "11.0.3",
+    "jsdom": "^26.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.5.3",
+    "stylelint": "^16.20.0",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-order": "^7.0.0",
+    "stylelint-scss": "^6.12.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "@react-md/core": "workspace:*",
+    "react": ">= 18",
+    "react-dom": ">= 18"
+  },
+  "peerDependenciesMeta": {
+    "@react-md/core": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "volta": {
+    "node": "22.13.1",
+    "pnpm": "10.8.0"
+  }
+}
diff --git a/packages/datetime/scripts/copySassFiles.ts b/packages/datetime/scripts/copySassFiles.ts
@@ -0,0 +1,64 @@
+/* eslint-disable no-console */
+import chokidar from "chokidar";
+import { glob } from "glob";
+import { existsSync } from "node:fs";
+import { copyFile, mkdir, rm } from "node:fs/promises";
+import { dirname } from "node:path";
+
+let log = false;
+const pattern = "src/**/*.scss";
+
+const replaceDist = (path: string): string => path.replace("src", "dist");
+const ensureParentDirectories = async (filePath: string): Promise<void> => {
+  const folder = dirname(filePath);
+  if (!existsSync(folder)) {
+    await mkdir(folder, { recursive: true });
+  }
+};
+
+const cp = async (path: string, dest = replaceDist(path)): Promise<void> => {
+  await ensureParentDirectories(dest);
+  await copyFile(path, dest);
+  if (log) {
+    console.log(`Copied ${path} -> ${dest}`);
+  }
+};
+
+if (process.argv.includes("--watch")) {
+  const watcher = chokidar.watch("src", {
+    ignored: (path, stats) => !!stats?.isFile() && !path.endsWith(".scss"),
+  });
+  watcher.on("all", async (eventName, path) => {
+    const dist = replaceDist(path);
+
+    switch (eventName) {
+      case "add":
+      case "change":
+        void cp(path, dist);
+        break;
+      case "unlink": {
+        if (existsSync(dist)) {
+          await rm(dist);
+          console.log(`Removed ${dist}`);
+        }
+        break;
+      }
+    }
+  });
+  watcher.on("ready", () => {
+    log = true;
+    console.log("Watching changes...");
+  });
+} else {
+  if (!existsSync("dist")) {
+    await mkdir("dist");
+  }
+
+  const styles = await glob(pattern);
+  for (const filePath of styles) {
+    const dist = replaceDist(filePath);
+    await ensureParentDirectories(dist);
+    await cp(filePath, dist);
+  }
+  console.log(`Copied ${styles.length} scss files`);
+}
diff --git a/packages/datetime/scripts/tsconfig.json b/packages/datetime/scripts/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["esnext"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/datetime/src/_base.scss b/packages/datetime/src/_base.scss
diff --git a/packages/datetime/src/_datetime.scss b/packages/datetime/src/_datetime.scss
diff --git a/packages/datetime/src/types.ts b/packages/datetime/src/types.ts
diff --git a/packages/datetime/tsconfig.json b/packages/datetime/tsconfig.json
diff --git a/packages/datetime/tsconfig.types.json b/packages/datetime/tsconfig.types.json
diff --git a/packages/datetime/vite.config.ts b/packages/datetime/vite.config.ts
diff --git a/packages/datetime/vitest.setup.ts b/packages/datetime/vitest.setup.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
