calendar-simple 1.0.0-beta.1

package/.github/workflows/publish.yml

@@ -0,0 +1,37 @@
+name: Publish Version
+
+on:
+  push:
+    branches:
+      - release
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      packages: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Semantic Release
+        run: npx semantic-release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      
+      - name: Published Version Name
+        run: echo "Version Name ${{ steps.extract_version.outputs.version_name }}"

package/.releaserc

@@ -0,0 +1,23 @@
+{
+  "branches": [
+    {
+      "name": "main"
+    },
+    {
+      "name": "release",
+      "prerelease": "beta"
+    }
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/github",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "README.md"
+      }
+    ],
+    "@semantic-release/npm"
+  ]
+}

package/README.md

@@ -0,0 +1,60 @@
+# 1.0.0-beta.1 (2025-11-09)
+
+
+### Bug Fixes
+
+* add semantic-release configuration and workflow ([b3cfda0](https://github.com/Jaganath-MSJ/CalendarSimple/commit/b3cfda0593642a5e488fc90226d0f974163986d3))
+* **publish:** update node version to 22 in workflow ([3fb4a19](https://github.com/Jaganath-MSJ/CalendarSimple/commit/3fb4a19b6005983ac4640d1d4049cf586ce42c4c))
+* replace NPM_TOKEN with GITHUB_TOKEN for publishing ([9497cd5](https://github.com/Jaganath-MSJ/CalendarSimple/commit/9497cd52b408e05b282cfd562a0cebd6239f1c5e))
+* uncomment NPM_TOKEN in publish workflow ([0a5d293](https://github.com/Jaganath-MSJ/CalendarSimple/commit/0a5d29305377a02574a8473ce53e33f04dbd8187))
+
+# Calendar App
+
+A user-friendly calendar app for viewing, selecting, and managing dates with data management capabilities.
+
+## Features
+
+- View and navigate through a monthly calendar
+- Select dates and manage selected dates
+- Customizable styling with Styled Components
+- Support for data management and event handling
+- Easy integration into React projects
+- Lightweight and minimal dependencies
+
+## Tech Stack
+- React JS
+- TypeScrpit
+- Styled Component
+- Moment.js
+
+## Key Features
+
+- **Monthly Calendar View:** Navigate through a monthly calendar with ease.
+- **Date Selection:** Select single or multiple dates from the calendar.
+- **Data Management:** Add, update, or remove data associated with selected dates.
+- **Custom Styling:** Easily customize the calendar appearance using Styled Components.
+- **Event Handling:** Handle user interactions and events seamlessly within the calendar component.
+
+## Installation
+    npm install --save calendar-simple
+
+## Usage
+    import React from 'react';
+    import { Calendar } from 'calendar-simple';
+
+    const App: React.FC = () => {
+        return (
+            <div>
+                <h1>Calendar App</h1>
+                <Calendar />
+            </div>
+        );
+    };
+
+    export default App;
+
+## Library
+For a more information, you can visit [Lib Link](https://www.npmjs.com/package/calendar-simple).
+
+## License
+This project is licensed under the MIT License - see the LICENSE file for details.

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import React$1 from 'react';
+
+interface CalendarType {
+    dayType?: EDayType;
+    data?: React.ReactNode[];
+    width?: number;
+    height?: number;
+    selectedDate?: Date;
+    onDateClick?: (date: Date) => void;
+    onMonthChange?: (date: Date) => void;
+    isSelectDate?: boolean;
+    className?: string;
+    headerClassName?: string;
+    tableClassName?: string;
+    tableDateClassName?: string;
+    dataClassName?: string;
+    selectedClassName?: string;
+    todayClassName?: string;
+    pastYearLength?: number;
+    futureYearLength?: number;
+}
+declare enum EDayType {
+    fullName = "FULL",
+    halfName = "HALF"
+}
+
+declare const _default: React$1.NamedExoticComponent<CalendarType>;
+
+declare const DAY_TYPE: {
+    FULL_NAME: string;
+    HALF_NAME: string;
+};
+
+export { type CalendarType, DAY_TYPE, EDayType, _default as default };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import React$1 from 'react';
+
+interface CalendarType {
+    dayType?: EDayType;
+    data?: React.ReactNode[];
+    width?: number;
+    height?: number;
+    selectedDate?: Date;
+    onDateClick?: (date: Date) => void;
+    onMonthChange?: (date: Date) => void;
+    isSelectDate?: boolean;
+    className?: string;
+    headerClassName?: string;
+    tableClassName?: string;
+    tableDateClassName?: string;
+    dataClassName?: string;
+    selectedClassName?: string;
+    todayClassName?: string;
+    pastYearLength?: number;
+    futureYearLength?: number;
+}
+declare enum EDayType {
+    fullName = "FULL",
+    halfName = "HALF"
+}
+
+declare const _default: React$1.NamedExoticComponent<CalendarType>;
+
+declare const DAY_TYPE: {
+    FULL_NAME: string;
+    HALF_NAME: string;
+};
+
+export { type CalendarType, DAY_TYPE, EDayType, _default as default };

package/dist/index.js

@@ -0,0 +1,447 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DAY_TYPE: () => DAY_TYPE,
+  EDayType: () => EDayType,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Calendar.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/components/Calendar.type.ts
+var EDayType = /* @__PURE__ */ ((EDayType2) => {
+  EDayType2["fullName"] = "FULL";
+  EDayType2["halfName"] = "HALF";
+  return EDayType2;
+})(EDayType || {});
+var defaultCalenderProps = {
+  dayType: "HALF" /* halfName */,
+  data: [],
+  width: 400,
+  height: 400,
+  isSelectDate: false,
+  pastYearLength: 5,
+  futureYearLength: 5
+};
+
+// src/components/Calendar.constant.ts
+var DAY_LIST = {
+  SUNDAY: {
+    FULL: "Sunday",
+    HALF: "Sun"
+  },
+  MONDAY: {
+    FULL: "Monday",
+    HALF: "Mon"
+  },
+  TUESDAY: {
+    FULL: "Tuesday",
+    HALF: "Tue"
+  },
+  WEDNESDAY: {
+    FULL: "Wednesday",
+    HALF: "Wed"
+  },
+  THURSDAY: {
+    FULL: "Thursday",
+    HALF: "Thu"
+  },
+  FRIDAY: {
+    FULL: "Friday",
+    HALF: "Fri"
+  },
+  SATURDAY: {
+    FULL: "Saturday",
+    HALF: "Sat"
+  }
+};
+var DAY_LIST_NAME = {
+  FULL: [
+    DAY_LIST.SUNDAY.FULL,
+    DAY_LIST.MONDAY.FULL,
+    DAY_LIST.TUESDAY.FULL,
+    DAY_LIST.WEDNESDAY.FULL,
+    DAY_LIST.THURSDAY.FULL,
+    DAY_LIST.FRIDAY.FULL,
+    DAY_LIST.SATURDAY.FULL
+  ],
+  HALF: [
+    DAY_LIST.SUNDAY.HALF,
+    DAY_LIST.MONDAY.HALF,
+    DAY_LIST.TUESDAY.HALF,
+    DAY_LIST.WEDNESDAY.HALF,
+    DAY_LIST.THURSDAY.HALF,
+    DAY_LIST.FRIDAY.HALF,
+    DAY_LIST.SATURDAY.HALF
+  ]
+};
+var MONTHS = {
+  JAN: { label: "January", value: 0 },
+  FEB: { label: "February", value: 1 },
+  MAR: { label: "March", value: 2 },
+  APR: { label: "April", value: 3 },
+  MAY: { label: "May", value: 4 },
+  JUN: { label: "June", value: 5 },
+  JUL: { label: "July", value: 6 },
+  AUG: { label: "August", value: 7 },
+  SEP: { label: "September", value: 8 },
+  OCT: { label: "October", value: 9 },
+  NOV: { label: "November", value: 10 },
+  DEC: { label: "December", value: 11 }
+};
+var MONTH_LIST = Object.values(MONTHS);
+var CALENDER_STRINGS = {
+  MONTH: "monthDropdown",
+  YEAR: "yearDropdown"
+};
+var DAY_TYPE = {
+  FULL_NAME: "FULL",
+  HALF_NAME: "HALF"
+};
+
+// src/components/Calendar.utils.ts
+var import_moment = __toESM(require("moment"));
+var getNoOfDays = (date) => {
+  const noOfDates = date.daysInMonth();
+  return noOfDates;
+};
+var getMonthStartingDay = (date) => {
+  const monthStartingDay = Number(date.startOf("month").format("d"));
+  return monthStartingDay;
+};
+var convertToDate = (momentDate) => {
+  const date = momentDate.toDate();
+  return date;
+};
+var convertToMoment = (date) => {
+  const momentDate = (0, import_moment.default)(date);
+  return momentDate;
+};
+var getYearList = (pastLength, futureLength, selectedYear) => {
+  const yearLength = pastLength + futureLength;
+  const yearStarting = (0, import_moment.default)().year() - pastLength + 1;
+  const yearList = Array.from(
+    { length: yearLength },
+    (_, index) => index + yearStarting
+  );
+  if (!yearList.includes(selectedYear)) {
+    if ((0, import_moment.default)().year() <= selectedYear) {
+      yearList.push(selectedYear);
+    } else {
+      return [selectedYear, ...yearList];
+    }
+  }
+  return yearList;
+};
+var checkIsToday = (selectedDate, dates) => {
+  const cloneSelectedDate = selectedDate.clone();
+  cloneSelectedDate.date(dates);
+  const isToday = (0, import_moment.default)().isSame(cloneSelectedDate, "D");
+  return isToday;
+};
+
+// src/components/Calendar.styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var CalenderStyles = import_styled_components.default.section`
+  * {
+    padding: 0;
+    margin: 0;
+    outline: none;
+  }
+  width: max-content;
+  height: max-content;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    margin-bottom: 10px;
+    & > div {
+      display: flex;
+      gap: 20px;
+    }
+  }
+  & > table {
+    border-collapse: collapse;
+    & th,
+    & td {
+      border: 1px solid black;
+      text-align: center;
+      min-width: calc(${(props) => props.$width} / 7);
+      max-width: calc(${(props) => props.$width} / 7);
+    }
+    & th {
+      height: calc(${(props) => props.$height} / 10);
+    }
+    & td {
+      height: calc(${(props) => props.$height} / 7);
+    }
+  }
+`;
+var ButtonStyles = import_styled_components.default.button`
+  outline: none;
+  border: none;
+  background: none;
+  color: rgb(211, 211, 211);
+  border-radius: 5px;
+  &:hover {
+    background-color: rgba(211, 211, 211, 0.5);
+    transition: 0.2s ease-in-out;
+  }
+`;
+var SelectStyles = import_styled_components.default.select`
+  border-radius: 3px;
+  padding: 2px;
+  cursor: pointer;
+`;
+var Calendar_styles_default = CalenderStyles;
+
+// src/components/DateData.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_classnames = __toESM(require("classnames"));
+function DateData(props) {
+  const {
+    date,
+    data,
+    className,
+    dataClassName,
+    isSelected,
+    isToday,
+    onClick,
+    selectedClassName,
+    todayClassName
+  } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    DateDataStyles,
+    {
+      $isSelected: isSelected,
+      $isToday: isToday,
+      onClick: () => onClick?.(date),
+      className: (0, import_classnames.default)(
+        className,
+        isSelected && selectedClassName,
+        isToday && todayClassName
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", null, date), data && /* @__PURE__ */ import_react.default.createElement("div", { className: dataClassName }, data))
+  );
+}
+var DateDataStyles = import_styled_components2.default.td`
+  cursor: pointer;
+  & > div {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    & > div > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  ${(props) => props.$isSelected ? `
+        background-color: #EEEEEE;
+        color: #737373;
+        font-weight: bold;
+      ` : ``}
+  ${(props) => props.$isToday ? `
+        color: #2E75B6;
+        font-size: 18px;
+        font-weight: bold;
+      ` : ``}
+`;
+var DateData_default = DateData;
+
+// src/assets/LeftArrow.tsx
+var import_react2 = __toESM(require("react"));
+function LeftArrow() {
+  return /* @__PURE__ */ import_react2.default.createElement("svg", { width: "40px", height: "40px", viewBox: "0 0 24.00 24.00", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#707070", transform: "rotate(180)" }, /* @__PURE__ */ import_react2.default.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), /* @__PURE__ */ import_react2.default.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ import_react2.default.createElement("g", { id: "SVGRepo_iconCarrier" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M10 7L15 12L10 17", stroke: "#707070", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+var LeftArrow_default = LeftArrow;
+
+// src/assets/RightArrow.tsx
+var import_react3 = __toESM(require("react"));
+function RightArrow() {
+  return /* @__PURE__ */ import_react3.default.createElement("svg", { width: "40px", height: "40px", viewBox: "0 0 24.00 24.00", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#707070" }, /* @__PURE__ */ import_react3.default.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), /* @__PURE__ */ import_react3.default.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ import_react3.default.createElement("g", { id: "SVGRepo_iconCarrier" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M10 7L15 12L10 17", stroke: "#707070", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+var RightArrow_default = RightArrow;
+
+// src/components/Calendar.tsx
+var Calender = (props = defaultCalenderProps) => {
+  const {
+    dayType = defaultCalenderProps.dayType,
+    data = defaultCalenderProps.data,
+    width = defaultCalenderProps.width,
+    height = defaultCalenderProps.height,
+    selectedDate: selected_date,
+    onDateClick,
+    onMonthChange,
+    isSelectDate = defaultCalenderProps.isSelectDate,
+    className,
+    headerClassName,
+    tableClassName,
+    tableDateClassName,
+    dataClassName,
+    selectedClassName,
+    todayClassName,
+    pastYearLength = defaultCalenderProps.pastYearLength,
+    futureYearLength = defaultCalenderProps.futureYearLength
+  } = props;
+  const selectedDateMoment = (0, import_react4.useMemo)(
+    () => selected_date ? convertToMoment(selected_date) : (0, import_moment.default)(),
+    [selected_date]
+  );
+  const [selectedDate, setSelectedDate] = (0, import_react4.useState)(selectedDateMoment);
+  (0, import_react4.useLayoutEffect)(() => {
+    setSelectedDate(selectedDateMoment);
+  }, [selectedDateMoment]);
+  const getDates = (0, import_react4.useCallback)(() => {
+    const dateComponent = [];
+    const noOfDays = getNoOfDays(selectedDate.clone());
+    const monthStartDay = getMonthStartingDay(selectedDate.clone());
+    const noOfRows = Math.round((noOfDays + monthStartDay) / 7 + 0.4);
+    let dates = 1;
+    const onClickDateHandler = (date) => {
+      const cloneSelectedDate = selectedDate.clone();
+      if (date !== cloneSelectedDate.date()) {
+        cloneSelectedDate.date(date);
+        setSelectedDate(cloneSelectedDate.clone());
+        onDateClick?.(convertToDate(cloneSelectedDate.clone()));
+      }
+    };
+    for (let row = 1; row <= noOfRows; row++) {
+      const tableRow = [];
+      for (let day = 1; day <= 7; day++) {
+        if (row === 1 && day <= monthStartDay || dates > noOfDays) {
+          const emptyData = /* @__PURE__ */ import_react4.default.createElement("td", { key: `empty_${day}` });
+          tableRow.push(emptyData);
+        } else {
+          const dateData = /* @__PURE__ */ import_react4.default.createElement(
+            DateData_default,
+            {
+              key: `date_${dates}`,
+              isSelected: isSelectDate && dates === selectedDate.date(),
+              isToday: checkIsToday(selectedDate, dates),
+              onClick: isSelectDate ? onClickDateHandler : void 0,
+              date: dates,
+              data: data[dates - 1],
+              className: tableDateClassName,
+              dataClassName,
+              selectedClassName,
+              todayClassName
+            }
+          );
+          dates++;
+          tableRow.push(dateData);
+        }
+      }
+      const rowData = /* @__PURE__ */ import_react4.default.createElement("tr", { key: row }, tableRow);
+      dateComponent.push(rowData);
+    }
+    return dateComponent;
+  }, [
+    data,
+    selectedDate,
+    dataClassName,
+    selectedClassName,
+    todayClassName,
+    tableDateClassName,
+    onDateClick,
+    isSelectDate
+  ]);
+  const onMonthArrowClick = (option) => {
+    const clonedSelectedDate = selectedDate.clone();
+    if (option === "add" /* add */) {
+      clonedSelectedDate.month(clonedSelectedDate.month() + 1);
+    } else if (option === "sub" /* sub */) {
+      clonedSelectedDate.month(clonedSelectedDate.month() - 1);
+    }
+    setSelectedDate(clonedSelectedDate);
+    onMonthChange?.(convertToDate(clonedSelectedDate));
+  };
+  const onDropdownClick = (event, option) => {
+    const value = Number(event.target.value);
+    const clonedSelectedDate = selectedDate.clone();
+    if (option === "month" /* month */) {
+      clonedSelectedDate.month(value);
+    } else if (option === "year" /* year */) {
+      clonedSelectedDate.year(value);
+    }
+    setSelectedDate(clonedSelectedDate);
+    onMonthChange?.(convertToDate(clonedSelectedDate));
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(
+    Calendar_styles_default,
+    {
+      $width: `${width}px`,
+      $height: `${height}px`,
+      className
+    },
+    /* @__PURE__ */ import_react4.default.createElement("div", { className: headerClassName }, /* @__PURE__ */ import_react4.default.createElement(ButtonStyles, { onClick: () => onMonthArrowClick("sub" /* sub */) }, /* @__PURE__ */ import_react4.default.createElement(LeftArrow_default, null)), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(
+      SelectStyles,
+      {
+        id: CALENDER_STRINGS.MONTH,
+        name: CALENDER_STRINGS.MONTH,
+        value: selectedDate.month(),
+        onChange: (e) => onDropdownClick(e, "month" /* month */)
+      },
+      MONTH_LIST.map((month) => /* @__PURE__ */ import_react4.default.createElement("option", { key: month.label, value: month.value }, month.label))
+    ), /* @__PURE__ */ import_react4.default.createElement(
+      SelectStyles,
+      {
+        id: CALENDER_STRINGS.YEAR,
+        name: CALENDER_STRINGS.YEAR,
+        value: selectedDate.year(),
+        onChange: (e) => onDropdownClick(e, "year" /* year */)
+      },
+      getYearList(
+        pastYearLength,
+        futureYearLength,
+        selectedDate.year()
+      ).map((year) => /* @__PURE__ */ import_react4.default.createElement("option", { key: year, value: year }, year))
+    )), /* @__PURE__ */ import_react4.default.createElement(ButtonStyles, { onClick: () => onMonthArrowClick("add" /* add */) }, /* @__PURE__ */ import_react4.default.createElement(RightArrow_default, null))),
+    /* @__PURE__ */ import_react4.default.createElement("table", { className: tableClassName }, /* @__PURE__ */ import_react4.default.createElement("thead", null, /* @__PURE__ */ import_react4.default.createElement("tr", null, DAY_LIST_NAME[dayType].map((day) => /* @__PURE__ */ import_react4.default.createElement("th", { key: day }, day)))), /* @__PURE__ */ import_react4.default.createElement("tbody", null, getDates()))
+  );
+};
+var Calendar_default = (0, import_react4.memo)(Calender);
+
+// src/index.ts
+var index_default = Calendar_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DAY_TYPE,
+  EDayType
+});

package/dist/index.mjs

@@ -0,0 +1,415 @@
+// src/components/Calendar.tsx
+import React4, {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  memo
+} from "react";
+
+// src/components/Calendar.type.ts
+var EDayType = /* @__PURE__ */ ((EDayType2) => {
+  EDayType2["fullName"] = "FULL";
+  EDayType2["halfName"] = "HALF";
+  return EDayType2;
+})(EDayType || {});
+var defaultCalenderProps = {
+  dayType: "HALF" /* halfName */,
+  data: [],
+  width: 400,
+  height: 400,
+  isSelectDate: false,
+  pastYearLength: 5,
+  futureYearLength: 5
+};
+
+// src/components/Calendar.constant.ts
+var DAY_LIST = {
+  SUNDAY: {
+    FULL: "Sunday",
+    HALF: "Sun"
+  },
+  MONDAY: {
+    FULL: "Monday",
+    HALF: "Mon"
+  },
+  TUESDAY: {
+    FULL: "Tuesday",
+    HALF: "Tue"
+  },
+  WEDNESDAY: {
+    FULL: "Wednesday",
+    HALF: "Wed"
+  },
+  THURSDAY: {
+    FULL: "Thursday",
+    HALF: "Thu"
+  },
+  FRIDAY: {
+    FULL: "Friday",
+    HALF: "Fri"
+  },
+  SATURDAY: {
+    FULL: "Saturday",
+    HALF: "Sat"
+  }
+};
+var DAY_LIST_NAME = {
+  FULL: [
+    DAY_LIST.SUNDAY.FULL,
+    DAY_LIST.MONDAY.FULL,
+    DAY_LIST.TUESDAY.FULL,
+    DAY_LIST.WEDNESDAY.FULL,
+    DAY_LIST.THURSDAY.FULL,
+    DAY_LIST.FRIDAY.FULL,
+    DAY_LIST.SATURDAY.FULL
+  ],
+  HALF: [
+    DAY_LIST.SUNDAY.HALF,
+    DAY_LIST.MONDAY.HALF,
+    DAY_LIST.TUESDAY.HALF,
+    DAY_LIST.WEDNESDAY.HALF,
+    DAY_LIST.THURSDAY.HALF,
+    DAY_LIST.FRIDAY.HALF,
+    DAY_LIST.SATURDAY.HALF
+  ]
+};
+var MONTHS = {
+  JAN: { label: "January", value: 0 },
+  FEB: { label: "February", value: 1 },
+  MAR: { label: "March", value: 2 },
+  APR: { label: "April", value: 3 },
+  MAY: { label: "May", value: 4 },
+  JUN: { label: "June", value: 5 },
+  JUL: { label: "July", value: 6 },
+  AUG: { label: "August", value: 7 },
+  SEP: { label: "September", value: 8 },
+  OCT: { label: "October", value: 9 },
+  NOV: { label: "November", value: 10 },
+  DEC: { label: "December", value: 11 }
+};
+var MONTH_LIST = Object.values(MONTHS);
+var CALENDER_STRINGS = {
+  MONTH: "monthDropdown",
+  YEAR: "yearDropdown"
+};
+var DAY_TYPE = {
+  FULL_NAME: "FULL",
+  HALF_NAME: "HALF"
+};
+
+// src/components/Calendar.utils.ts
+import moment from "moment";
+var getNoOfDays = (date) => {
+  const noOfDates = date.daysInMonth();
+  return noOfDates;
+};
+var getMonthStartingDay = (date) => {
+  const monthStartingDay = Number(date.startOf("month").format("d"));
+  return monthStartingDay;
+};
+var convertToDate = (momentDate) => {
+  const date = momentDate.toDate();
+  return date;
+};
+var convertToMoment = (date) => {
+  const momentDate = moment(date);
+  return momentDate;
+};
+var getYearList = (pastLength, futureLength, selectedYear) => {
+  const yearLength = pastLength + futureLength;
+  const yearStarting = moment().year() - pastLength + 1;
+  const yearList = Array.from(
+    { length: yearLength },
+    (_, index) => index + yearStarting
+  );
+  if (!yearList.includes(selectedYear)) {
+    if (moment().year() <= selectedYear) {
+      yearList.push(selectedYear);
+    } else {
+      return [selectedYear, ...yearList];
+    }
+  }
+  return yearList;
+};
+var checkIsToday = (selectedDate, dates) => {
+  const cloneSelectedDate = selectedDate.clone();
+  cloneSelectedDate.date(dates);
+  const isToday = moment().isSame(cloneSelectedDate, "D");
+  return isToday;
+};
+
+// src/components/Calendar.styles.ts
+import styled from "styled-components";
+var CalenderStyles = styled.section`
+  * {
+    padding: 0;
+    margin: 0;
+    outline: none;
+  }
+  width: max-content;
+  height: max-content;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    margin-bottom: 10px;
+    & > div {
+      display: flex;
+      gap: 20px;
+    }
+  }
+  & > table {
+    border-collapse: collapse;
+    & th,
+    & td {
+      border: 1px solid black;
+      text-align: center;
+      min-width: calc(${(props) => props.$width} / 7);
+      max-width: calc(${(props) => props.$width} / 7);
+    }
+    & th {
+      height: calc(${(props) => props.$height} / 10);
+    }
+    & td {
+      height: calc(${(props) => props.$height} / 7);
+    }
+  }
+`;
+var ButtonStyles = styled.button`
+  outline: none;
+  border: none;
+  background: none;
+  color: rgb(211, 211, 211);
+  border-radius: 5px;
+  &:hover {
+    background-color: rgba(211, 211, 211, 0.5);
+    transition: 0.2s ease-in-out;
+  }
+`;
+var SelectStyles = styled.select`
+  border-radius: 3px;
+  padding: 2px;
+  cursor: pointer;
+`;
+var Calendar_styles_default = CalenderStyles;
+
+// src/components/DateData.tsx
+import React from "react";
+import styled2 from "styled-components";
+import cx from "classnames";
+function DateData(props) {
+  const {
+    date,
+    data,
+    className,
+    dataClassName,
+    isSelected,
+    isToday,
+    onClick,
+    selectedClassName,
+    todayClassName
+  } = props;
+  return /* @__PURE__ */ React.createElement(
+    DateDataStyles,
+    {
+      $isSelected: isSelected,
+      $isToday: isToday,
+      onClick: () => onClick?.(date),
+      className: cx(
+        className,
+        isSelected && selectedClassName,
+        isToday && todayClassName
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, date), data && /* @__PURE__ */ React.createElement("div", { className: dataClassName }, data))
+  );
+}
+var DateDataStyles = styled2.td`
+  cursor: pointer;
+  & > div {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    & > div > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  ${(props) => props.$isSelected ? `
+        background-color: #EEEEEE;
+        color: #737373;
+        font-weight: bold;
+      ` : ``}
+  ${(props) => props.$isToday ? `
+        color: #2E75B6;
+        font-size: 18px;
+        font-weight: bold;
+      ` : ``}
+`;
+var DateData_default = DateData;
+
+// src/assets/LeftArrow.tsx
+import React2 from "react";
+function LeftArrow() {
+  return /* @__PURE__ */ React2.createElement("svg", { width: "40px", height: "40px", viewBox: "0 0 24.00 24.00", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#707070", transform: "rotate(180)" }, /* @__PURE__ */ React2.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), /* @__PURE__ */ React2.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React2.createElement("g", { id: "SVGRepo_iconCarrier" }, /* @__PURE__ */ React2.createElement("path", { d: "M10 7L15 12L10 17", stroke: "#707070", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+var LeftArrow_default = LeftArrow;
+
+// src/assets/RightArrow.tsx
+import React3 from "react";
+function RightArrow() {
+  return /* @__PURE__ */ React3.createElement("svg", { width: "40px", height: "40px", viewBox: "0 0 24.00 24.00", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#707070" }, /* @__PURE__ */ React3.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), /* @__PURE__ */ React3.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React3.createElement("g", { id: "SVGRepo_iconCarrier" }, /* @__PURE__ */ React3.createElement("path", { d: "M10 7L15 12L10 17", stroke: "#707070", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+var RightArrow_default = RightArrow;
+
+// src/components/Calendar.tsx
+var Calender = (props = defaultCalenderProps) => {
+  const {
+    dayType = defaultCalenderProps.dayType,
+    data = defaultCalenderProps.data,
+    width = defaultCalenderProps.width,
+    height = defaultCalenderProps.height,
+    selectedDate: selected_date,
+    onDateClick,
+    onMonthChange,
+    isSelectDate = defaultCalenderProps.isSelectDate,
+    className,
+    headerClassName,
+    tableClassName,
+    tableDateClassName,
+    dataClassName,
+    selectedClassName,
+    todayClassName,
+    pastYearLength = defaultCalenderProps.pastYearLength,
+    futureYearLength = defaultCalenderProps.futureYearLength
+  } = props;
+  const selectedDateMoment = useMemo(
+    () => selected_date ? convertToMoment(selected_date) : moment(),
+    [selected_date]
+  );
+  const [selectedDate, setSelectedDate] = useState(selectedDateMoment);
+  useLayoutEffect(() => {
+    setSelectedDate(selectedDateMoment);
+  }, [selectedDateMoment]);
+  const getDates = useCallback(() => {
+    const dateComponent = [];
+    const noOfDays = getNoOfDays(selectedDate.clone());
+    const monthStartDay = getMonthStartingDay(selectedDate.clone());
+    const noOfRows = Math.round((noOfDays + monthStartDay) / 7 + 0.4);
+    let dates = 1;
+    const onClickDateHandler = (date) => {
+      const cloneSelectedDate = selectedDate.clone();
+      if (date !== cloneSelectedDate.date()) {
+        cloneSelectedDate.date(date);
+        setSelectedDate(cloneSelectedDate.clone());
+        onDateClick?.(convertToDate(cloneSelectedDate.clone()));
+      }
+    };
+    for (let row = 1; row <= noOfRows; row++) {
+      const tableRow = [];
+      for (let day = 1; day <= 7; day++) {
+        if (row === 1 && day <= monthStartDay || dates > noOfDays) {
+          const emptyData = /* @__PURE__ */ React4.createElement("td", { key: `empty_${day}` });
+          tableRow.push(emptyData);
+        } else {
+          const dateData = /* @__PURE__ */ React4.createElement(
+            DateData_default,
+            {
+              key: `date_${dates}`,
+              isSelected: isSelectDate && dates === selectedDate.date(),
+              isToday: checkIsToday(selectedDate, dates),
+              onClick: isSelectDate ? onClickDateHandler : void 0,
+              date: dates,
+              data: data[dates - 1],
+              className: tableDateClassName,
+              dataClassName,
+              selectedClassName,
+              todayClassName
+            }
+          );
+          dates++;
+          tableRow.push(dateData);
+        }
+      }
+      const rowData = /* @__PURE__ */ React4.createElement("tr", { key: row }, tableRow);
+      dateComponent.push(rowData);
+    }
+    return dateComponent;
+  }, [
+    data,
+    selectedDate,
+    dataClassName,
+    selectedClassName,
+    todayClassName,
+    tableDateClassName,
+    onDateClick,
+    isSelectDate
+  ]);
+  const onMonthArrowClick = (option) => {
+    const clonedSelectedDate = selectedDate.clone();
+    if (option === "add" /* add */) {
+      clonedSelectedDate.month(clonedSelectedDate.month() + 1);
+    } else if (option === "sub" /* sub */) {
+      clonedSelectedDate.month(clonedSelectedDate.month() - 1);
+    }
+    setSelectedDate(clonedSelectedDate);
+    onMonthChange?.(convertToDate(clonedSelectedDate));
+  };
+  const onDropdownClick = (event, option) => {
+    const value = Number(event.target.value);
+    const clonedSelectedDate = selectedDate.clone();
+    if (option === "month" /* month */) {
+      clonedSelectedDate.month(value);
+    } else if (option === "year" /* year */) {
+      clonedSelectedDate.year(value);
+    }
+    setSelectedDate(clonedSelectedDate);
+    onMonthChange?.(convertToDate(clonedSelectedDate));
+  };
+  return /* @__PURE__ */ React4.createElement(
+    Calendar_styles_default,
+    {
+      $width: `${width}px`,
+      $height: `${height}px`,
+      className
+    },
+    /* @__PURE__ */ React4.createElement("div", { className: headerClassName }, /* @__PURE__ */ React4.createElement(ButtonStyles, { onClick: () => onMonthArrowClick("sub" /* sub */) }, /* @__PURE__ */ React4.createElement(LeftArrow_default, null)), /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(
+      SelectStyles,
+      {
+        id: CALENDER_STRINGS.MONTH,
+        name: CALENDER_STRINGS.MONTH,
+        value: selectedDate.month(),
+        onChange: (e) => onDropdownClick(e, "month" /* month */)
+      },
+      MONTH_LIST.map((month) => /* @__PURE__ */ React4.createElement("option", { key: month.label, value: month.value }, month.label))
+    ), /* @__PURE__ */ React4.createElement(
+      SelectStyles,
+      {
+        id: CALENDER_STRINGS.YEAR,
+        name: CALENDER_STRINGS.YEAR,
+        value: selectedDate.year(),
+        onChange: (e) => onDropdownClick(e, "year" /* year */)
+      },
+      getYearList(
+        pastYearLength,
+        futureYearLength,
+        selectedDate.year()
+      ).map((year) => /* @__PURE__ */ React4.createElement("option", { key: year, value: year }, year))
+    )), /* @__PURE__ */ React4.createElement(ButtonStyles, { onClick: () => onMonthArrowClick("add" /* add */) }, /* @__PURE__ */ React4.createElement(RightArrow_default, null))),
+    /* @__PURE__ */ React4.createElement("table", { className: tableClassName }, /* @__PURE__ */ React4.createElement("thead", null, /* @__PURE__ */ React4.createElement("tr", null, DAY_LIST_NAME[dayType].map((day) => /* @__PURE__ */ React4.createElement("th", { key: day }, day)))), /* @__PURE__ */ React4.createElement("tbody", null, getDates()))
+  );
+};
+var Calendar_default = memo(Calender);
+
+// src/index.ts
+var index_default = Calendar_default;
+export {
+  DAY_TYPE,
+  EDayType,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "calendar-simple",
+  "version": "1.0.0-beta.1",
+  "description": "A user-friendly calendar app for viewing, selecting, and managing dates with data management capabilities.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jaganath-MSJ/CalendarSimple.git"
+  },
+  "scripts": {
+    "build": "tsup"
+  },
+  "keywords": [
+    "calendar",
+    "simple",
+    "calendar-simple"
+  ],
+  "author": "jaganath-m-s",
+  "license": "MIT",
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "moment": "^2.30.1",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@types/node": "^16.18.76",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "babel-loader": "^9.1.3",
+    "prettier": "^3.2.5",
+    "semantic-release": "^25.0.2",
+    "tsup": "^8.0.2",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}