@kashifsaadat/react-scheduler 0.0.8

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap";.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative;line-height:initial}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{z-index:1;line-height:0}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:700;font-size:.944rem}h2.react-datepicker__current-month{padding:0;margin:0}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover *:before{border-color:#a6a6a6}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{transform:rotate(45deg);left:-7px}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{transform:rotate(225deg);right:-7px}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:.3rem;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:#fff;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + .85rem);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:transparent}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__week-number--selected{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{white-space:nowrap;margin-bottom:-8px}.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:.3rem;background-color:#ff6803;color:#fff}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:.3rem;background-color:#bad9f1;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{position:absolute;bottom:70%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:.5rem;box-sizing:content-box}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon:after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:"×"}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{cursor:default;background-color:#ccc}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:700;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:#000c;left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media (max-width: 400px),(max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__children-container{width:13.8rem;margin:.4rem;padding-right:.2rem;padding-left:.2rem;height:auto}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-.125em}

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@kashifsaadat/react-scheduler",
+  "version": "0.0.8",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KashifSaadat/react-scheduler.git"
+  },
+  "keywords": [
+    "scheduler",
+    "gantt",
+    "gantt chart",
+    "react",
+    "timeline",
+    "calendar"
+  ],
+  "author": {
+    "name": "Bitnoise",
+    "url": "https://scheduler.bitnoise.pl/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write .",
+    "typecheck": "tsc -b",
+    "prepare": "husky"
+  },
+  "main": "dist/index.umd.js",
+  "modules": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "yarn run lint"
+    ]
+  },
+  "dependencies": {
+    "dayjs": "1.11.13",
+    "lodash.debounce": "4.0.8",
+    "path": "0.12.7",
+    "react": "19.1.0",
+    "react-datepicker": "^8.4.0",
+    "react-dom": "19.1.0",
+    "styled-components": "^6.1.19",
+    "styled-normalize": "8.1.1"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "9.7.0",
+    "@types/datejs": "0.0.36",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/node": "22.15.3",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@types/styled-components": "5.1.34",
+    "@typescript-eslint/eslint-plugin": "8.31.0",
+    "@typescript-eslint/parser": "8.31.0",
+    "@vitejs/plugin-react": "4.4.1",
+    "babel-plugin-styled-components": "2.1.4",
+    "eslint": "9.25.1",
+    "eslint-config-prettier": "10.1.2",
+    "eslint-import-resolver-typescript": "4.3.4",
+    "eslint-plugin-filenames": "1.3.2",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prettier": "5.2.6",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "husky": "9.1.7",
+    "lint-staged": "15.5.1",
+    "prettier": "3.5.3",
+    "rollup-plugin-visualizer": "5.14.0",
+    "typescript": "5.8.3",
+    "vite": "6.3.3",
+    "vite-plugin-dts": "4.5.3",
+    "vite-plugin-svgr": "4.3.0"
+  }
+}

package/readme.md

@@ -0,0 +1,370 @@
+<div align="center">
+  <img src="logo.svg" style="height: 60px" alt="@bitnoise/react-scheduler">
+  <hr />
+  <p align="center">
+    ✨ <a href="https://scheduler.bitnoise.pl/">https://scheduler.bitnoise.pl/</a> ✨
+    <br/>
+    Open sourced, typescript oriented, light-weight, and ultra fast React Component for creating gantt charts.
+  </p>
+  <div align="center">
+    <a href="https://bit.ly/react_scheduler">Youtube Tutorial</a>
+    <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+    <a href="https://www.npmjs.com/package/@bitnoi.se/react-scheduler">npm</a>
+    <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+    <a href="https://github.com/Bitnoise/react-scheduler/issues/new">Report an issue</a>
+  </div>
+</div>
+<hr />
+
+<div>
+  <h3 align="center">NEWSLETTER</h3>
+  <p>
+    If you want to stay updated with Scheduler updates and news from the technical world, sign up for our newsletter. We don't  spam (we send emails once a month), we don't run a sales newsletter, and we respect your time.
+  </p>
+  <p>
+  See for yourself: <a href="https://www.bitnoise.pl/newsletter">NEWSLETTER</a>
+  </p>
+</div>
+<hr/>
+
+### Installation
+
+```bash
+# yarn
+yarn add '@bitnoi.se/react-scheduler'
+# npm
+npm install '@bitnoi.se/react-scheduler'
+```
+
+### Example usage
+
+1. import required styles for scheduler
+
+```ts
+import "@bitnoi.se/react-scheduler/dist/style.css";
+```
+
+2. Import Scheduler component into your project
+
+```ts
+import { Scheduler, SchedulerData } from "@bitnoi.se/react-scheduler";
+import dayjs from "dayjs";
+
+default export function Component() {
+  const [filterButtonState, setFilterButtonState] = useState(0);
+
+  const [range, setRange] = useState({
+    startDate: new Date(),
+    endDate: new Date()
+  });
+
+  const handleRangeChange = useCallback((range) => {
+    setRange(range);
+  }, []);
+
+  // Filtering events that are included in current date range
+  // Example can be also found on video https://youtu.be/9oy4rTVEfBQ?t=118&si=52BGKSIYz6bTZ7fx
+  // and in the react-scheduler repo App.tsx file https://github.com/Bitnoise/react-scheduler/blob/master/src/App.tsx
+  const filteredMockedSchedulerData = mockedSchedulerData.map((person) => ({
+        ...person,
+        data: person.data.filter(
+          (project) =>
+            // we use "dayjs" for date calculations, but feel free to use library of your choice
+            dayjs(project.startDate).isBetween(range.startDate, range.endDate) ||
+            dayjs(project.endDate).isBetween(range.startDate, range.endDate) ||
+            (dayjs(project.startDate).isBefore(range.startDate, "day") &&
+              dayjs(project.endDate).isAfter(range.endDate, "day"))
+        )
+      }))
+
+  return (
+    <section>
+      <Scheduler
+        data={filteredMockedSchedulerData}
+        isLoading={isLoading}
+        onRangeChange={handleRangeChange}
+        onTileClick={(clickedResource) => console.log(clickedResource)}
+        onItemClick={(item) => console.log(item)}
+        onFilterData={() => {
+          // Some filtering logic...
+          setFilterButtonState(1);
+        }}
+        onClearFilterData={() => {
+          // Some clearing filters logic...
+          setFilterButtonState(0)
+        }}
+        config={{
+          zoom: 0,
+          filterButtonState,
+        }}
+      />
+    </section>
+  );
+}
+
+const mockedSchedulerData: SchedulerData = [
+  {
+    id: "070ac5b5-8369-4cd2-8ba2-0a209130cc60",
+    label: {
+      icon: "https://picsum.photos/24",
+      title: "Joe Doe",
+      subtitle: "Frontend Developer"
+    },
+    data: [
+      {
+        id: "8b71a8a5-33dd-4fc8-9caa-b4a584ba3762",
+        startDate: new Date("2023-04-13T15:31:24.272Z"),
+        endDate: new Date("2023-08-28T10:28:22.649Z"),
+        occupancy: 3600,
+        title: "Project A",
+        subtitle: "Subtitle A",
+        description: "array indexing Salad West Account",
+        bgColor: "rgb(254,165,177)"
+      },
+      {
+        id: "22fbe237-6344-4c8e-affb-64a1750f33bd",
+        startDate: new Date("2023-10-07T08:16:31.123Z"),
+        endDate: new Date("2023-11-15T21:55:23.582Z"),
+        occupancy: 2852,
+        title: "Project B",
+        subtitle: "Subtitle B",
+        description: "Tuna Home pascal IP drive",
+        bgColor: "rgb(254,165,177)"
+      },
+      {
+        id: "3601c1cd-f4b5-46bc-8564-8c983919e3f5",
+        startDate: new Date("2023-03-30T22:25:14.377Z"),
+        endDate: new Date("2023-09-01T07:20:50.526Z"),
+        occupancy: 1800,
+        title: "Project C",
+        subtitle: "Subtitle C",
+        bgColor: "rgb(254,165,177)"
+      },
+      {
+        id: "b088e4ac-9911-426f-aef3-843d75e714c2",
+        startDate: new Date("2023-10-28T10:08:22.986Z"),
+        endDate: new Date("2023-10-30T12:30:30.150Z"),
+        occupancy: 11111,
+        title: "Project D",
+        subtitle: "Subtitle D",
+        description: "Garden heavy an software Metal",
+        bgColor: "rgb(254,165,177)"
+      }
+    ]
+  }
+];
+
+```
+
+3. If some problems occur, please see our troubleshooting section below.
+
+### Scheduler API
+
+##### Scheduler Component Props
+
+| Property Name     | Type       | Arguments                         | Description                                                                                                                       |
+| ----------------- | ---------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| isLoading         | `boolean`  | -                                 | shows loading indicators on scheduler                                                                                             |
+| onRangeChange     | `function` | updated `startDate` and `endDate` | runs whenever user reaches end of currently rendered canvas                                                                       |
+| onTileClick       | `function` | clicked resource data             | detects resource click                                                                                                            |
+| onItemClick       | `function` | clicked left column item data     | detects item click on left column                                                                                                 |
+| onFilterData      | `function` | -                                 | callback firing when filter button was clicked                                                                                    |
+| onClearFilterData | `function` | -                                 | callback firing when clear filters button was clicked (clearing button is visible **only** when filterButtonState is set to `>0`) |
+| config            | `Config`   | -                                 | object with scheduler config properties                                                                                           |
+
+##### Scheduler Config Object
+
+---
+
+| Property Name                        | Type               | Default     | Description                                                                                                                                                            |
+| ------------------------------------ | ------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| zoom                                 | `0` or `1` or `2`  | 0           | `0` - display grid divided into weeks `1` - display grid divided into days `2` - display grid divided into hours                                                       |
+| filterButtonState                    | `number`           | 0           | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) |
+| maxRecordsPerPage                    | `number`           | 50          | number of items from `SchedulerData` visible per page                                                                                                                  |
+| lang                                 | `en`, `lt` or `pl` | en          | scheduler's language                                                                                                                                                   |
+| includeTakenHoursOnWeekendsInDayView | `boolean`          | `false`     | show weekends as taken when given resource is longer than a week                                                                                                       |
+| showTooltip                          | `boolean`          | `true`      | show tooltip when hovering over tiles                                                                                                                                  |
+| translations                         | `LocaleType[]`     | `undefined` | option to add specific langs translations                                                                                                                              |
+| showThemeToggle                      | `boolean`          | `false`     | show toggle button to switch between light/dark mode                                                                                                                   |
+| defaultTheme                         | `light` or `dark`  | `light`     | scheduler's default theme                                                                                                                                              |
+
+#### Translation object example
+
+```ts
+import enDayjsTranslations from "dayjs/locale/en";
+
+const langs: LocaleType[] = [
+  {
+    id: "en",
+    lang: {
+      feelingEmpty: "I feel so empty...",
+      free: "Free",
+      loadNext: "Next",
+      loadPrevious: "Previous",
+      over: "over",
+      taken: "Taken",
+      topbar: {
+        filters: "Filters",
+        next: "next",
+        prev: "prev",
+        today: "Today",
+        view: "View"
+      },
+      search: "search",
+      week: "week"
+    },
+    translateCode: "en-EN",
+    dayjsTranslations: enDayjsTranslations
+  }
+];
+
+<Scheduler
+  // ... //
+  config={{
+    lang: "en",
+    translations: langs
+  }}
+/>;
+```
+
+#### Scheduler LocaleType Object
+
+| Property Name     | Type                       | Description                        |
+| ----------------- | -------------------------- | ---------------------------------- |
+| id                | `string`                   | key is needed for selecting lang   |
+| lang              | `Translation`              | object with translations           |
+| translateCode     | `string`                   | code that is saved in localStorage |
+| dayjsTranslations | `string ILocale undefined` | object with translation from dayjs |
+
+#### Scheduler Translation Object
+
+| Property Name | Type     |
+| ------------- | -------- |
+| feelingEmpty  | `string` |
+| free          | `string` |
+| loadNext      | `string` |
+| loadPrevious  | `string` |
+| over          | `string` |
+| taken         | `string` |
+| search        | `string` |
+| week          | `string` |
+| topbar        | `Topbar` |
+
+##### Scheduler Topbar Object
+
+| Property Name | Type     |
+| ------------- | -------- |
+| filters       | `string` |
+| next          | `string` |
+| prev          | `string` |
+| today         | `string` |
+| view          | `string` |
+
+##### Scheduler Data
+
+array of chart rows with shape of
+| Property Name | Type | Description |
+| -------- | --------------------- | -------------------------------- |
+| id | `string` | unique row id |
+| label | `SchedulerRowLabel` | row's label, `e.g person's name, surname, icon` |
+| data | `Array<ResourceItem>` | array of `resources` |
+
+##### Left Colum Item Data
+
+data that is accessible as argument of `onItemClick` callback
+| Property Name | Type | Description |
+| -------- | --------------------- | -------------------------------- |
+| id | `string` | unique row id |
+| label | `SchedulerRowLabel` | row's label, `e.g person's name, surname, icon` |
+
+##### Resource Item
+
+item that will be visible on the grid as tile and that will be accessible as argument of `onTileClick` event
+| Property Name | Type | Description |
+| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
+| id | `string` | unique resource id |
+| title | `string` | resource title that will be displayed on resource tile |
+| subtitle | `string (optional)` | resource subtitle that will be displayed on resource tile |
+| description | `string (optional)` | resource description that will be displayed on resource tile |
+| startDate | `Date` | date for calculating start position for resource |
+| endDate | `Date` | date for calculating end position for resource |
+| occupancy | `number` | number of seconds resource takes up for given row that will be visible on resource tooltip when hovered |
+| bgColor | `string (optional)` | tile color |
+
+### Troubleshooting
+
+- For using Scheduler with RemixJS make sure to add `@bitnoi.se/react-scheduler` to `serverDependenciesToBundle` in `remix.config.js` like so:
+
+```js
+// remix.config.js
+/** @type  {import('@remix-run/dev').AppConfig} */
+module.exports = {
+	// ...
+	serverDependenciesToBundle: [..., "@bitnoi.se/react-scheduler"],
+};
+```
+
+- When using with NextJS (app router) Scheduler needs to be wrapped with component with `use client`
+
+```ts
+"use client"
+import { Scheduler, SchedulerProps } from "@bitnoi.se/react-scheduler";
+
+default export function SchedulerClient(props: SchedulerProps) {
+	return <Scheduler {...props} />;
+}
+
+```
+
+- When using with NextJS (pages router) it needs to be imported using `dynamic`:
+
+```ts
+import dynamic from "next/dynamic";
+const Scheduler = dynamic(() => import("@bitnoi.se/react-scheduler").then((mod) => mod.Scheduler), {
+  ssr: false
+});
+```
+
+- How to customize Scheduler dimensions
+
+Scheduler is position absolutely to take all available space. If you want to have fixed dimensions wrap Scheduler inside a div with position set to relative.
+
+Example using styled components:
+
+```ts
+export const StyledSchedulerFrame = styled.div`
+  position: relative;
+  height: 40vh;
+  width: 40vw;
+`;
+
+<StyledSchedulerFrame>
+    <Scheduler  {...}/>
+</StyledSchedulerFrame>
+```
+
+### Known Issues
+
+1. No responsiveness
+2. Slower performance on Firefox when working with big set of data due to Firefox being slower working with canvas
+
+### How to contribute
+
+- **Reporting Issues**: If you come across any bugs, glitches, or have any suggestions for improvements, please [open an issue](https://github.com/Bitnoise/react-scheduler/issues) on our GitHub repository. Provide as much detail as possible, including steps to reproduce the issue.
+- **Suggesting Enhancements**: If you have ideas for new features or enhancements, we would love to hear them! You can [open an issue](https://github.com/Bitnoise/react-scheduler/issues) on our GitHub repository and clearly describe your suggestion.
+- **Submitting Pull Requests**: If you have developed a fix or a new feature that you would like to contribute, you can submit a pull request. Here's a quick overview of the process:
+  - Clone the repository and create your own branch: `git checkout -b feat/your-branch-name`.
+  - Implement your changes, following the **code style and guidelines** from [development.md](development.md).
+  - Test your changes to ensure they work as expected.
+  - Commit your changes and push to your forked repository.
+  - Open a pull request against our main repository's `master` branch.
+    - add at least 1 reviewer
+    - link correct issue
+
+### Contact
+
+If you have any questions or need further assistance, feel free to reach out to us at [scheduler@bitnoi.se](mailto:scheduler@bitnoi.se). We appreciate your contributions and thank you for helping us improve this project!
+
+### License
+
+MIT Licensed. Copyright (c) Bitnoise 2023.