Fix build lib (#182)

.babelrc

@@ -1,6 +1,3 @@
 {
-  "presets": [
-    ["@babel/preset-env", { "modules": false }],
-    "@babel/preset-react"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "4.4.4",
+  "version": "4.4.4-beta-4",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",
@@ -39,7 +39,6 @@
     "README.md",
     "License"
   ],
-  "type": "module",
   "main": "dist/index.js",
   "homepage": "https://react-big-schedule.vercel.app",
   "repository": {
@@ -53,42 +52,46 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "build-lib": "node scripts/build.js",
-    "clean": "rimraf ./dist && mkdir dist",
-    "lint": "eslint ./src"
+    "dev": "webpack serve --open",
+    "build": "webpack --mode production",
+    "build:lib": "node scripts/build.js",
+    "clean": "npx rimraf dist",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src/**/*.{js,jsx} --fix"
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
-    "@babel/cli": "^7.25.7",
-    "antd": "^5.21.3",
+    "antd": "^5.22.1",
     "dayjs": "^1.11.13",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.28.0",
     "rrule": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/preset-env": "^7.25.8",
+    "@babel/cli": "^7.25.7",
+    "@babel/core": "^7.25.7",
+    "@babel/eslint-parser": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
     "@babel/preset-react": "^7.25.7",
-    "@eslint/js": "^9.11.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-loader": "^9.2.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-webpack-plugin": "^4.2.0",
     "fs-extra": "^11.2.0",
-    "globals": "^15.9.0",
-    "vite": "^5.4.8"
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   }
 }

scripts/build.js

@@ -1,16 +1,14 @@
-// Do this as the first thing so that any code reading it knows the right env.
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { exec } from 'child_process';
-import fs from 'fs-extra';
-import { promisify } from 'util';
-
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 
-const execPromise = promisify(exec);
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const { promisify } = require('util');
+const path = require('path');
+const exec = promisify(require('child_process').exec);
+const fs = require('fs-extra');
 
 async function build() {
   const root = path.resolve(__dirname, '..');
@@ -19,30 +17,25 @@ async function build() {
   const typingDir = path.resolve(root, 'typing');
   const jsTarget = targetDir;
   const cssTarget = path.resolve(targetDir, 'css');
-  const excludedFolders = ['examples', 'main.jsx'];
+  const excludedFolders = ['examples', 'main.jsx'].map(folder => path.join(sourceDir, folder)).join(',');
 
   try {
-    // Validate source and target directories
-    await fs.ensureDir(sourceDir);
-    await fs.ensureDir(targetDir);
-
-    // Clean previous build
+    // clean
     console.log('Cleaning...');
-    await execPromise('npm run clean');
+    await exec('npx rimraf dist');
+    await exec('mkdir dist');
 
-    // Transpile JS files using Babel, excluding specific folders
-    console.log('Transpiling JavaScript files with Babel... \n');
-    await execPromise(`babel ${sourceDir} --out-dir ${jsTarget} --ignore "${excludedFolders.map(folder => path.join(sourceDir, folder)).join(',')}"`);
+    // transpiling and copy js
+    console.log('Transpiling js with babel...');
+    await exec(`babel ${sourceDir} --out-dir ${jsTarget} --ignore "${excludedFolders}"`);
 
-    // Copy CSS files
     console.log('Copying CSS Files...');
     await fs.copy(`${sourceDir}/css/`, cssTarget);
 
-    // Copy TypeScript declaration files
-    console.log('Copying TypeScript Files...');
+    console.log('Copying Typescript Files...');
     await fs.copy(`${typingDir}/`, targetDir);
 
-    console.log('Build process completed successfully!');
+    console.log('Success!');
   } catch (e) {
     console.error('Build process failed:', e.message);
     console.error('Stack trace:', e.stack);

src/components/BodyView.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 import PropTypes from 'prop-types';
 

src/components/EventItem.jsx

@@ -1,9 +1,12 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable no-return-assign */
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
 import { Popover } from 'antd';
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import { CellUnit, DATETIME_FORMAT, DnDTypes } from '../config/default';
 import EventItemPopover from './EventItemPopover';
-import { DnDTypes, CellUnit, DATETIME_FORMAT } from '../config/default';
 
 const stopDragHelper = ({ count, cellUnit, config, dragType, eventItem, localeDayjs, value }) => {
   const whileTrue = true;

src/components/ResourceEvents.jsx

@@ -1,23 +1,13 @@
-import React, { Component } from 'react';
+/* eslint-disable */
 import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import { CellUnit, DATETIME_FORMAT, DnDTypes, SummaryPos } from '../config/default';
+import { getPos } from '../helper/utility';
 import AddMore from './AddMore';
-import Summary from './Summary';
 import SelectedArea from './SelectedArea';
-import { CellUnit, DATETIME_FORMAT, SummaryPos, DnDTypes } from '../config/default';
-import { getPos } from '../helper/utility';
+import Summary from './Summary';
 
 class ResourceEvents extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isSelecting: false,
-      left: 0,
-      width: 0,
-    };
-    this.supportTouch = false; // 'ontouchstart' in window;
-  }
-
   static propTypes = {
     resourceEvents: PropTypes.object.isRequired,
     schedulerData: PropTypes.object.isRequired,
@@ -38,6 +28,17 @@ class ResourceEvents extends Component {
     eventItemTemplateResolver: PropTypes.func,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSelecting: false,
+      left: 0,
+      width: 0,
+    };
+    this.supportTouch = false; // 'ontouchstart' in window;
+  }
+
   componentDidMount() {
     const { schedulerData } = this.props;
     const { config } = schedulerData;
@@ -50,8 +51,9 @@ class ResourceEvents extends Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps !== this.props) {
+      const { schedulerData } = this.props;
       this.supportTouchHelper('remove');
-      if (this.props.schedulerData.config.creatable) {
+      if (schedulerData.config.creatable) {
         this.supportTouchHelper();
       }
     }

src/components/ResourceView.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function ResourceView({ schedulerData, contentScrollbarHeight, slotClickedFunc, slotItemTemplateResolver, toggleExpandFunc }) {
   const { renderData } = schedulerData;

src/components/SchedulerData.js

@@ -3,9 +3,9 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
 import { RRuleSet, rrulestr } from 'rrule';
+import { CellUnit, DATE_FORMAT, DATETIME_FORMAT, ViewType } from '../config/default';
 import config from '../config/scheduler';
 import behaviors from '../helper/behaviors';
-import { ViewType, CellUnit, DATE_FORMAT, DATETIME_FORMAT } from '../config/default';
 
 export default class SchedulerData {
   constructor(date = dayjs(), viewType = ViewType.Week, showAgenda = false, isEventPerspective = false, newConfig = undefined, newBehaviors = undefined) {

src/components/SchedulerHeader.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Col, Row, Spin, Radio, Space, Popover, Calendar } from 'antd';
-import { RightOutlined, LeftOutlined } from '@ant-design/icons';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Calendar, Col, Popover, Radio, Row, Space, Spin } from 'antd';
 import dayjs from 'dayjs';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 import { DATE_FORMAT } from '../config/default';
 
 const RadioButton = Radio.Button;

src/components/SelectedArea.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 function SelectedArea({ left, width, schedulerData }) {
   const { config } = schedulerData;

src/components/Summary.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { SummaryPos } from '../config/default';
 
 function Summary({ schedulerData, summary, left, width, top }) {