split hooks & react component library as diff packages

.prettierignore

@@ -1,7 +1,6 @@
 **/node_modules/
 **/build/
 **/dist/
-**/.vscode/
 **/.idea/
 **/.git/
 **/.turbo/

configs/eslint-config-custom/package.json

@@ -32,14 +32,14 @@
   },
   "packageManager": "^[email protected]",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^1.13.3",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "typescript": "^5.4.5"
   }

packages/@calender-sync/core/package.json

@@ -35,7 +35,7 @@
     "url": "https://rahulsriram.dev"
   },
   "devDependencies": {
-    "@types/node": "^20.11.0",
+    "@types/node": "^20.12.12",
     "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",

packages/@calender-sync/core/src/index.ts

@@ -4,6 +4,7 @@ import qs from "query-string"
 import type {
   CalendarEvent,
   CalendarEventOrganizer,
+  CalenderType,
   Google,
   NormalizedCalendarEvent,
   Outlook,
@@ -229,4 +230,5 @@ export {
   outlookMobile,
   yahoo,
   type CalendarEvent,
+  type CalenderType,
 }

packages/@calender-sync/core/src/interfaces.ts

@@ -60,9 +60,12 @@ interface Yahoo extends Record<string, string | boolean | number | undefined> {
   in_loc?: string
 }
 
+type CalenderType = "google" | "apple" | "yahoo" | "outlook"
+
 export type {
   CalendarEvent,
   CalendarEventOrganizer,
+  CalenderType,
   Google,
   NormalizedCalendarEvent,
   Outlook,

packages/@calender-sync/hooks/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: "custom",
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+}

packages/@calender-sync/hooks/.npmignore

@@ -0,0 +1,4 @@
+.vscode
+.github
+.turbo
+.storybook

packages/@calender-sync/hooks/LICENSE

@@ -0,0 +1,16 @@
+MIT LICENSE
+
+Copyright (c) 2024 Calender Sync Hooks, by Rahul SriRam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.

packages/@calender-sync/hooks/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@calender-sync/hooks",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Rahul SriRam",
+    "email": "[email protected]",
+    "url": "https://rahulsriram.dev"
+  },
+  "license": "MIT",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/src/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --max-warnings 0 --fix"
+  },
+  "keywords": [
+    "calender-sync",
+    "react",
+    "vite",
+    "typescript",
+    "hooks"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "eslint": "^8.57.0",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
+    "eslint-config-custom": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@calender-sync/core": "workspace:*"
+  }
+}

packages/@calender-sync/hooks/src/index.tsx

@@ -0,0 +1,55 @@
+import {
+  apple,
+  google,
+  outlook,
+  outlookMobile,
+  yahoo,
+  type CalendarEvent,
+  type CalenderType,
+} from "@calender-sync/core"
+
+function useCalenderSync() {
+  const generateCalendarUrl = (type: CalenderType, event: CalendarEvent) => {
+    let url = ""
+
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+
+    switch (type) {
+      case "google":
+        url = google(event)
+        break
+      case "apple":
+        url = apple(event)
+        break
+      case "yahoo":
+        url = yahoo(event)
+        break
+      case "outlook":
+        url = isMobile ? outlookMobile(event) : outlook(event)
+        break
+    }
+
+    return url
+  }
+
+  const addToCalendar = (
+    type: CalenderType,
+    event: CalendarEvent,
+    newTab = true,
+  ) => {
+    let url = generateCalendarUrl(type, event)
+
+    if (newTab) {
+      window.open(url, "_blank")
+    } else {
+      window.location.href = url
+    }
+  }
+
+  return {
+    generateCalendarUrl,
+    addToCalendar,
+  }
+}
+
+export { useCalenderSync, type CalendarEvent, type CalenderType }

packages/@calender-sync/hooks/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts", "vite-env.d.ts"],
+  "exclude": ["node_modules", "build", "dist"]
+}

packages/@calender-sync/hooks/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/@calender-sync/hooks/vite.config.ts

@@ -0,0 +1,37 @@
+import react from "@vitejs/plugin-react-swc"
+import path from "path"
+import { defineConfig } from "vite"
+import dts from "vite-plugin-dts"
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      rollupTypes: false,
+      include: ["src"],
+      insertTypesEntry: true,
+      entryRoot: "src",
+    }),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.tsx"),
+      name: "@calender-sync/hooks",
+      formats: ["es"],
+      fileName: "index",
+    },
+    cssCodeSplit: true,
+    minify: "esbuild",
+    cssMinify: "esbuild",
+    sourcemap: true,
+    copyPublicDir: false,
+    rollupOptions: {
+      external: ["react", "react-dom", "react/jsx-runtime"],
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})

packages/@calender-sync/react/package.json

@@ -54,17 +54,17 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.5",
-    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-essentials": "^8.1.0",
     "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/addon-onboarding": "^8.0.10",
+    "@storybook/addon-links": "^8.1.0",
+    "@storybook/addon-onboarding": "^8.1.0",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/react": "^8.0.10",
+    "@storybook/react": "^8.1.0",
     "@storybook/react-vite": "^8.0.10",
     "@storybook/test": "^8.0.10",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "postcss": "^8.4.38",
@@ -83,6 +83,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^2.3.0",
-    "@calender-sync/core": "workspace:*"
+    "@calender-sync/hooks": "workspace:*"
   }
 }

packages/@calender-sync/react/src/components/dropdown/apple.tsx

@@ -1,6 +1,8 @@
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
 import ICONS from "@/lib/icons"
+import { useCalenderSync } from "@calender-sync/hooks"
 import * as React from "react"
+import useCalenderLinkDropdown from "./use-calender-link-dropdown"
 
 interface CalSyncDropdownAppleButtonProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuItem> {
@@ -10,9 +12,24 @@ interface CalSyncDropdownAppleButtonProps
 const CalSyncDropdownAppleButton = React.forwardRef<
   React.ElementRef<typeof DropdownMenuItem>,
   CalSyncDropdownAppleButtonProps
->(({}, forwardedRef) => {
+>((props, forwardedRef) => {
+  const { addToCalendar } = useCalenderSync()
+  const { event, newTab } = useCalenderLinkDropdown()
+
   return (
-    <DropdownMenuItem ref={forwardedRef}>
+    <DropdownMenuItem
+      {...props}
+      role="link"
+      ref={forwardedRef}
+      onClick={(e) => {
+        e.preventDefault()
+        addToCalendar("apple", event, newTab)
+
+        if (props?.onClick) {
+          props.onClick(e)
+        }
+      }}
+    >
       <div className="flex items-center space-x-2">
         <ICONS.apple />
         <span>Add to Apple Calender</span>

packages/@calender-sync/react/src/components/dropdown/context.tsx

@@ -0,0 +1,15 @@
+import type { CalendarEvent } from "@calender-sync/hooks"
+import * as React from "react"
+
+type CalendarSyncDropdownProps = {
+  event: CalendarEvent | null
+  newTab?: boolean
+}
+
+const CalendarSyncDropdownContext =
+  React.createContext<CalendarSyncDropdownProps>({
+    event: null,
+    newTab: true,
+  })
+
+export { CalendarSyncDropdownContext, type CalendarSyncDropdownProps }

packages/@calender-sync/react/src/components/dropdown/google.tsx

@@ -1,6 +1,8 @@
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
 import ICONS from "@/lib/icons"
+import { useCalenderSync } from "@calender-sync/hooks"
 import * as React from "react"
+import useCalenderLinkDropdown from "./use-calender-link-dropdown"
 
 interface CalSyncDropdownGoogleButtonProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuItem> {
@@ -10,9 +12,24 @@ interface CalSyncDropdownGoogleButtonProps
 const CalSyncDropdownGoogleButton = React.forwardRef<
   React.ElementRef<typeof DropdownMenuItem>,
   CalSyncDropdownGoogleButtonProps
->(({}, forwardedRef) => {
+>((props, forwardedRef) => {
+  const { addToCalendar } = useCalenderSync()
+  const { event, newTab } = useCalenderLinkDropdown()
+
   return (
-    <DropdownMenuItem ref={forwardedRef}>
+    <DropdownMenuItem
+      {...props}
+      role="link"
+      ref={forwardedRef}
+      onClick={(e) => {
+        e.preventDefault()
+        void addToCalendar("google", event, newTab)
+
+        if (props?.onClick) {
+          props.onClick(e)
+        }
+      }}
+    >
       <div className="flex items-center space-x-2">
         <ICONS.google />
         <span>Add to Google Calendar</span>