feat: add new DatePicker component

packages/core/.storybook/main.ts

@@ -40,8 +40,8 @@ export default {
   stories: [
     "../src/**/*.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../../storybook-blocks/**/*.mdx",
-    "../../storybook-blocks/**/*.stories.@(js|jsx|ts|tsx)"
+    "../../!(core)/**/*.mdx",
+    "../../!(core)/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   addons: getAddons(),
   framework: {
@@ -71,7 +71,9 @@ export default {
           "~monday-ui-style/dist/mixins": path.resolve(__dirname, "../../style/src/mixins"),
           "~monday-ui-style/dist/functions": path.resolve(__dirname, "../../style/src/functions"),
           "~monday-ui-style": path.resolve(__dirname, "../../style"),
-          "~vibe-storybook-components": path.resolve(__dirname, "../../storybook-blocks")
+          "~vibe-storybook-components": path.resolve(__dirname, "../../storybook-blocks/src"),
+          "@vibe/shared": path.resolve(__dirname, "../../shared/src"),
+          "@vibe/storybook-config": path.resolve(__dirname, "../../storybook-config/src/index.ts")
         }
       },
       define: {

packages/core/src/components/DatePicker/__stories__/DatePicker.mdx

@@ -5,6 +5,10 @@ import * as DatepickerStories from "./DatePicker.stories";
 
 # DatePicker
 
+<br />
+
+<DeprecatedWarning alternativeName="DatePicker" alternativeLink="/?path=/docs/components-datepicker-new--docs" />
+
 A simple and reusable Datepicker component
 
 <Canvas of={DatepickerStories.Overview} />

packages/core/src/components/DatePicker/__stories__/DatePicker.stories.tsx

@@ -14,7 +14,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/DatePicker",
+  title: "Components/DatePicker [Deprecated]",
   component: DatePicker,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,

packages/date-picker/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve("@vibe/config/eslint.config")]
+};

packages/date-picker/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@vibe/date-picker",
+  "version": "3.0.0",
+  "description": "Vibe Package For Date Picker Component",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mondaycom/vibe.git",
+    "directory": "packages/date-picker"
+  },
+  "bugs": {
+    "url": "https://github.com/mondaycom/vibe/issues"
+  },
+  "homepage": "https://github.com/mondaycom/vibe#readme",
+  "author": "monday.com",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest run",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
+  },
+  "dependencies": {
+    "@vibe/core": "3.69.1",
+    "@vibe/icons": "1.11.0",
+    "classnames": "^2.5.1",
+    "date-fns": "^2.30.0",
+    "es-toolkit": "^1.39.10",
+    "react-day-picker": "^8.8.0"
+  },
+  "devDependencies": {
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/react": "^12.1.2",
+    "@vibe/storybook-config": "3.0.1",
+    "@vibe/config": "3.0.1",
+    "typescript": "^4.7.3",
+    "vibe-storybook-components": "1.0.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-test-renderer": "16",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "sideEffects": [
+    "*.scss",
+    "*.css",
+    "*.scss.js",
+    "*.css.js"
+  ]
+}

packages/date-picker/rollup.config.mjs

@@ -0,0 +1,3 @@
+import config from "@vibe/config/rollup.config";
+
+export default config;

packages/date-picker/src/DateContentHoverContext.tsx

@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { noop } from "es-toolkit";
+
+export const DayContentHoverContext = createContext<{
+  hover: Date | undefined;
+  setHover: (_hover: Date | undefined) => void;
+}>({ hover: undefined, setHover: noop });
+
+export const DayContentHoverProvider = ({ children }: { children: React.ReactNode }) => {
+  const [hover, setHover] = useState<Date | undefined>(undefined);
+  const value = useMemo(() => ({ hover, setHover }), [hover]);
+  return <DayContentHoverContext.Provider value={value}>{children}</DayContentHoverContext.Provider>;
+};
+
+export const useDayContentHoverContext = () => useContext(DayContentHoverContext);