Init react docs

docs/docs/react/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "React",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Installation and usage of React Calendar Heatmap component"
+  }
+}

docs/docs/react/demo.mdx

@@ -0,0 +1,9 @@
+---
+sidebar_position: 2
+---
+
+# ▶️ Demo
+
+**[⚡️ Play on StackBlitz](https://stackblitz.com/edit/nx-vue-calendar-heatmap-demo)**
+
+<iframe className="embed-iframe" src="https://stackblitz.com/edit/nx-vue-calendar-heatmap-demo?embed=1&file=src/App.vue&hideExplorer=1&hideNavigation=1&view=preview"></iframe>

docs/docs/react/installation.mdx

@@ -0,0 +1,61 @@
+---
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# 📦 Installation
+
+Install the **primary** package using your package manager of choice.
+
+<Tabs groupId="package-managers">
+  <TabItem value="pnpm" label="PNPM" default>
+    ```bash
+pnpm i @ngeenx/nx-react-calendar-heatmap
+    ```
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    ```bash
+npm i @ngeenx/nx-react-calendar-heatmap
+    ```
+  </TabItem>
+</Tabs>
+
+## Peer Dependencies
+
+This library requires **[tippy.js](https://atomiks.github.io/tippyjs/)** and **[luxon](https://moment.github.io/luxon/#/)** (*the successor to Moment.js*) as **peer dependencies**. We are using `tippy.js` for the tooltip and `luxon` for date time manipulation.
+
+Also, we need `@ngeenx/nx-calendar-heatmap-utils` for the calendar heatmap utils.
+
+You can install them using the following commands:
+
+<Tabs groupId="package-managers">
+  <TabItem value="pnpm" label="PNPM" default>
+    ```bash
+pnpm i @ngeenx/nx-calendar-heatmap-utils tippy.js luxon
+    ```
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    ```bash
+npm i @ngeenx/nx-calendar-heatmap-utils tippy.js luxon
+    ```
+  </TabItem>
+</Tabs>
+
+## Types
+
+Optionally, you can install the types for `luxon` using the following commands:
+
+<Tabs groupId="package-managers">
+  <TabItem value="pnpm" label="PNPM" default>
+    ```bash
+pnpm i @types/luxon -D
+    ```
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    ```bash
+npm i @types/luxon -D
+    ```
+  </TabItem>
+</Tabs>

docs/docs/react/usage-options.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_position: 4
+---
+
+# 🛠️ Options
+
+You can customize the Calendar Heatmap by providing the following options:
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `HeatMapCalendarType` | **must provide with config** | `WEEKLY`\|`MONTHLY`\|`YEARLY` |
+| `startDate` | `DateTime` | **must provide with config** | The start date of the calendar. |
+| `cellSize` | Number (*as px*) | optional (`15`) | Day cell size (*also you can configure with `overWritedDayStyle` option*) |
+| `colors` | `IHeatmapColor[]` | optional | Heatmap colors for each level range. |
+| `hideEmptyDays` | `Boolean` | optional (`false`) | Empty days (*only start and end end month*) for filler days. |
+| `overWritedDayStyle` | `Object` | optional | Style each day with inline style object. |
+| `heatmapLegend` | `IHeatmapLegend` | optional | Configure `display`, `direction` and `tooltipFormatter` of heatmap calendar legend. |
+| `locale` | `String` | optional (`"en"`) | Specify the locale for the calendar (*weekday and month names*). |
+| `i18n` | `ILocale` | optional | Custom locale for the calendar texts (*min, max, less, more, etc.*). |
+| `tippyProps` | `Props` (*from tippy*) | optional | Tippy.js props for the tooltip. |
+| `tooltip` | `IHeatmapTooltip` | optional | Configure the tooltip for the heatmap (*unit, display state, date format and custom formatter*). |
+| `onClick` | `(day: IHeatmapDay) => void` | optional | Handle click event for each day. |

docs/docs/react/usage.mdx

@@ -0,0 +1,187 @@
+---
+sidebar_position: 3
+---
+
+# 🚀 Usage
+
+Use the following steps to use the Calendar Heatmap in your Vue project.
+
+## Import
+
+Import `NxCalendarHeatmap` component in your component.
+
+```html  title="App.vue"
+<template>
+  <section>
+    <span> Yearly </span>
+
+    // highlight-next-line
+    <NxCalendarHeatmap :options="options" :data="heatmapData">
+      // highlight-next-line
+      <template #footerContent>
+        // highlight-next-line
+        <a href="#"> Footer hint </a>
+      // highlight-next-line
+      </template>
+    // highlight-next-line
+    </NxCalendarHeatmap>
+  </section>
+</template>
+
+<script setup lang="ts">
+// vue
+import { onMounted, ref, watch } from "vue";
+
+// highlight-next-line
+// calendar libs
+// highlight-next-line
+import { NxCalendarHeatmap } from "@ngeenx/nx-vue-calendar-heatmap";
+// highlight-next-line
+import {
+  // highlight-next-line
+  IHeatmapDay,
+  // highlight-next-line
+  HeatMapCalendarType,
+  // highlight-next-line
+  ICalendarHeatmapOptions,
+  // highlight-next-line
+  IHeatmapColor,
+  // highlight-next-line
+  HeatmapLevelsDirection,
+  // highlight-next-line
+} from "@ngeenx/nx-calendar-heatmap-utils";
+// highlight-next-line
+
+// highlight-next-line
+// third party
+// highlight-next-line
+import { DateTime } from "luxon";
+
+// ...
+</script>
+
+<style lang="scss">
+// highlight-next-line
+@import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
+// highlight-next-line
+@import "tippy.js/dist/tippy.css";
+</style>
+```
+
+## Data Source
+
+`data` property is an array of `IHeatmapDay` objects. Each object represents a day in the heatmap (*dates must sort in ascending order*).
+
+:::info[Data Source]
+
+Data must be provided by the parent component. There is no internal API call to fetch the data or date ordering features. In this case provided data must cover the selected calendar type and day order.
+
+:::
+
+```html  title="App.vue"
+<template>
+  <section>
+    <span> Yearly </span>
+
+    <NxCalendarHeatmap :options="options" :data="heatmapData">
+      <template #footerContent>
+        <a href="#"> Footer hint </a>
+      </template>
+    </NxCalendarHeatmap>
+  </section>
+</template>
+
+<script setup lang="ts">
+// vue
+import { onMounted, ref, watch } from "vue";
+
+// calendar libs
+// highlight-next-line
+import { NxCalendarHeatmap } from "@ngeenx/nx-vue-calendar-heatmap";
+// highlight-next-line
+import {
+  // highlight-next-line
+  IHeatmapDay,
+  // highlight-next-line
+  HeatMapCalendarType,
+  // highlight-next-line
+  ICalendarHeatmapOptions,
+  // highlight-next-line
+  IHeatmapColor,
+  // highlight-next-line
+  HeatmapLevelsDirection,
+  // highlight-next-line
+} from "@ngeenx/nx-calendar-heatmap-utils";
+
+// third party
+import { DateTime } from "luxon";
+
+// highlight-next-line
+const startDate = ref(DateTime.now().startOf("year"));
+// highlight-next-line
+const heatmapData = ref<IHeatmapDay[]>([]);
+
+// highlight-next-line
+const options = ref<ICalendarHeatmapOptions>({
+  // highlight-next-line
+  type: HeatMapCalendarType.YEARLY,
+  // highlight-next-line
+  startDate: startDate.value,
+  // highlight-next-line
+  onClick: onDayClick,
+// highlight-next-line
+});
+
+// ...
+
+const generateHeatmapData = (startDate: DateTime) => {
+  let endDate: DateTime = startDate.endOf("year");
+
+  const daysBetween = Math.floor(endDate.diff(startDate, "days").days);
+  const heatmap = [];
+
+  let currentDate = startDate;
+
+  for (let i = 0; i <= daysBetween; i++) {
+    const day: IHeatmapDay = {
+      date: currentDate,
+      count: Math.floor(Math.random() * 101),
+    };
+
+    heatmap.push(day);
+
+    currentDate = currentDate.plus({ days: 1 });
+  }
+
+  return heatmap;
+};
+
+// highlight-next-line
+const onDayClick = (day: IHeatmapDay) => {
+  // highlight-next-line
+  console.log(`Clicked on ${day.date} with value ${day.count}`);
+// highlight-next-line
+};
+
+// ...
+
+// highlight-next-line
+onMounted(() => {
+  // highlight-next-line
+  heatmapData.value = generateHeatmapData(startDate.value);
+// highlight-next-line
+});
+</script>
+
+<style lang="scss">
+@import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
+@import "tippy.js/dist/tippy.css";
+</style>
+```
+
+
+:::note
+
+`generateHeatmapData` is a helper function to generate random data for the heatmap. You can replace this function with your own data source.
+
+:::

docs/docs/vue/_category_.json

@@ -3,6 +3,6 @@
   "position": 2,
   "link": {
     "type": "generated-index",
-    "description": "Installation and usage of Angular Calendar Heatmap component"
+    "description": "Installation and usage of Vue Calendar Heatmap component"
   }
 }

libs/features/nx-react-calendar-heatmap/vite.config.ts

@@ -1,22 +1,22 @@
 /// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import * as path from 'path';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import * as path from "path";
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import { nxCopyAssetsPlugin } from "@nx/vite/plugins/nx-copy-assets.plugin";
 
 export default defineConfig({
   root: __dirname,
   cacheDir:
-    '../../../node_modules/.vite/libs/features/nx-react-calendar-heatmap',
+    "../../../node_modules/.vite/libs/features/nx-react-calendar-heatmap",
   plugins: [
     react(),
     nxViteTsPaths(),
-    nxCopyAssetsPlugin(['*.md']),
+    nxCopyAssetsPlugin(["*.md"]),
     dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      entryRoot: "src",
+      tsconfigPath: path.join(__dirname, "tsconfig.lib.json"),
     }),
   ],
   // Uncomment this if you are using workers.
@@ -26,36 +26,42 @@ export default defineConfig({
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
-    outDir: '../../../dist/libs/features/nx-react-calendar-heatmap',
+    outDir: "../../../dist/libs/features/nx-react-calendar-heatmap",
     emptyOutDir: true,
     reportCompressedSize: true,
     commonjsOptions: {
       transformMixedEsModules: true,
     },
     lib: {
       // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'nx-react-calendar-heatmap',
-      fileName: 'index',
+      entry: "src/index.ts",
+      name: "nx-react-calendar-heatmap",
+      fileName: "index",
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ["es", "cjs"],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      external: [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "tippy.js",
+        "luxon",
+      ],
     },
   },
   test: {
     watch: false,
     globals: true,
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
+    environment: "jsdom",
+    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    reporters: ["default"],
     coverage: {
       reportsDirectory:
-        '../../../coverage/libs/features/nx-react-calendar-heatmap',
-      provider: 'v8',
+        "../../../coverage/libs/features/nx-react-calendar-heatmap",
+      provider: "v8",
     },
   },
 });

package.json

@@ -7,6 +7,7 @@
     "vue:start": "nx serve vue-app",
     "react:start": "nx serve react-app",
     "vue:build": "nx build nx-vue-calendar-heatmap --skip-nx-cache",
+    "react:build": "nx build nx-react-calendar-heatmap --skip-nx-cache",
     "utils:test": "nx test nx-calendar-heatmap-utils",
     "utils:build": "nx build nx-calendar-heatmap-utils --skip-nx-cache && nx run nx-calendar-heatmap-utils:tailwind-build",
     "lint:all": "nx run-many --all --target=lint",