Added dependencies, removed clutter, TS compile errors fixed, yet to test

2024-10-05 22:42:44 +05:30
parent 6eb002ff11
commit 7b6d45780d
34 changed files with 4705 additions and 725 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -2,23 +2,10 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
 lerna-debug.log*

 # Dependencies
 node_modules
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-# Swap the comments on the following lines if you don't wish to use zero-installs
-# Documentation here: https://yarnpkg.com/features/zero-installs
-!.yarn/cache
-#.pnp.*

 # Testing
 coverage
--- a/build-tools/build.sh
+++ b/build-tools/build.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Get the directory of the current script
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+rm -rf build
+npx tsc
+vite build
+
+# Run Post processors: Update style imports in .js files, create component modules
+node "$SCRIPT_DIR/post-processor.js" build/cjs
+node "$SCRIPT_DIR/post-processor.js" build/es
--- a/build-tools/generate-module.js
+++ b/build-tools/generate-module.js
@@ -0,0 +1,31 @@
+import { promises as fs } from "fs"
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+async function generateModule(fileName) {
+  if (fileName.endsWith(".js") && fileName.indexOf("-chunk") === -1 && fileName !== "index.js") {
+    const dir = fileName.slice(0, -3)
+    const name = `@armco/calendar/${dir}`
+    const packageJsonContent = {
+      name,
+      main: `../cjs/${dir}.js`,
+      module: `../es/${dir}.js`,
+      types: `../types/${dir}.d.ts`,
+    }
+    const dirPath = resolve(__dirname, `../build/${dir}`)
+    try {
+      await fs.mkdir(dirPath, { recursive: true })
+      await fs.writeFile(
+        resolve(dirPath, "package.json"),
+        JSON.stringify(packageJsonContent, null, 2),
+      )
+    } catch (error) {
+      console.error(`Error processing directory ${dirPath}:`, error)
+    }
+  }
+}
+
+export default generateModule
--- a/build-tools/post-processor.js
+++ b/build-tools/post-processor.js
@@ -0,0 +1,23 @@
+import { readdir } from "fs/promises"
+import generateModule from "./generate-module.js"
+
+async function postProcessor(dir) {
+  try {
+    const files = await readdir(dir)
+    await Promise.all(
+      files.map(async (file) => {
+        await generateModule(file, dir)
+      }),
+    )
+  } catch (error) {
+    console.error(`Error processing directory ${dir}:`, error)
+  }
+}
+
+const targetDir = process.argv[2]
+if (targetDir) {
+  postProcessor(targetDir)
+} else {
+  console.error("Please provide the build directory to run post processor on.")
+  process.exit(1)
+}
--- a/index.html
+++ b/index.html
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Redux App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,24 +1,23 @@
 {
  "name": "@armco/calendar",
-  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.4",
  "type": "module",
+  "main": "build/cjs/index.js",
+  "module": "build/es/index.js",
+  "types": "build/types/index.d.ts",
  "scripts": {
-    "dev": "vite",
-    "start": "vite",
-    "build": "tsc && vite build",
-    "generate": "plop",
-    "atom": "plop atom",
-    "molecule": "plop molecule",
-    "component": "plop component",
-    "page": "plop page",
-    "preview": "vite preview",
-    "test": "vitest",
+    "build": "./build-tools/build.sh",
    "format": "prettier --write .",
    "lint": "eslint .",
-    "type-check": "tsc"
+    "publish:sh": "./publish.sh",
+    "publish:local": "./publish-local.sh"
  },
  "dependencies": {
+    "@armco/configs": "^0.0.7",
+    "@armco/icon": "^0.0.5",
+    "@armco/shared-components": "^0.0.53",
+    "@armco/types": "^0.0.11",
+    "@armco/utils": "^0.0.17",
    "@reduxjs/toolkit": "^1.8.1",
    "react": "^18.2.0",
    "react-app-polyfill": "^3.0.0",
@@ -39,6 +38,7 @@
    "eslint": "^8.0.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-prettier": "^4.2.1",
+    "glob": "^11.0.0",
    "jsdom": "^21.1.0",
    "plop": "^3.1.2",
    "prettier": "^2.7.1",
@@ -46,6 +46,10 @@
    "sass": "^1.63.4",
    "typescript": "^5.0.2",
    "vite": "^4.0.0",
+    "vite-plugin-dts": "^4.2.1",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0",
    "vitest": "^0.30.1"
  },
  "eslintConfig": {
@@ -62,7 +66,6 @@
    }
  },
  "prettier": "prettier-config-nick",
-  "main": "index.tsx",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ReStruct-Corporate-Advantage/calendar.git"
--- a/plop-templates/Component/Component.component.scss.hbs
+++ b/plop-templates/Component/Component.component.scss.hbs
@@ -1,3 +0,0 @@
-.c-{{pascalCase name}} {
-  
-}
--- a/plop-templates/Component/Component.test.ts.hbs
+++ b/plop-templates/Component/Component.test.ts.hbs
@@ -1,8 +0,0 @@
-import React from "react"
-import {{pascalCase name}} from "./{{pascalCase name}}"
-
-describe("{{pascalCase name}}", () => {
-   it("renders without error", () => {
-
-   })
-})
--- a/plop-templates/Component/Component.tsx.hbs
+++ b/plop-templates/Component/Component.tsx.hbs
@@ -1,10 +0,0 @@
-import React from "react"
-import "./{{pascalCase name}}.component.scss"
-
-interface {{pascalCase name}}Props {}
-
-const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
-  return <div className="c-{{pascalCase name}}">In Component {{pascalCase name}}</div>
-}
-
-export default {{pascalCase name}}
--- a/plop-templates/Component/index.ts.hbs
+++ b/plop-templates/Component/index.ts.hbs
@@ -1,3 +0,0 @@
-import {{pascalCase name}} from "./{{pascalCase name}}.jsx"
-
-export default {{pascalCase name}}
--- a/plop-templates/Page/Page.module.scss.hbs
+++ b/plop-templates/Page/Page.module.scss.hbs
@@ -1,3 +0,0 @@
-.c-{{pascalCase name}} {
-  
-}
--- a/plop-templates/Page/Page.slice.ts.hbs
+++ b/plop-templates/Page/Page.slice.ts.hbs
@@ -1,18 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit"
-
-export interface {{pascalCase name}}State {}
-
-const initialState: {{pascalCase name}}State = {}
-
-export const {{snakeCase name}}Slice = createSlice({
-  name: "{{snakeCase name}}",
-  initialState,
-  reducers: {
-    increment: (state) => {},
-  },
-  extraReducers: (builder) => {},
-})
-
-export const { increment } = {{snakeCase name}}Slice.actions
-
-export default {{snakeCase name}}Slice.reducer
--- a/plop-templates/Page/Page.test.ts.hbs
+++ b/plop-templates/Page/Page.test.ts.hbs
@@ -1,8 +0,0 @@
-import React from "react"
-import {{pascalCase name}} from "./{{pascalCase name}}"
-
-describe("{{pascalCase name}}", () => {
-   it("renders without error", () => {
-
-   })
-})
--- a/plop-templates/Page/Page.tsx.hbs
+++ b/plop-templates/Page/Page.tsx.hbs
@@ -1,10 +0,0 @@
-import React from "react"
-import "./{{pascalCase name}}.module.scss"
-
-interface {{pascalCase name}}Props {}
-
-const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
-  return <div className="c-{{pascalCase name}}">In Page {{pascalCase name}}</div>
-}
-
-export default {{pascalCase name}}
--- a/plop-templates/Page/index.ts.hbs
+++ b/plop-templates/Page/index.ts.hbs
@@ -1,3 +0,0 @@
-import {{pascalCase name}} from "./{{pascalCase name}}.jsx"
-
-export default {{pascalCase name}}
--- a/plop-templates/injectable-index.ts.hbs
+++ b/plop-templates/injectable-index.ts.hbs
@@ -1,5 +0,0 @@
-/* PLOP_INJECT_IMPORT */
-
-export {
-  /* PLOP_INJECT_EXPORT */
-}
--- a/plopfile.cjs
+++ b/plopfile.cjs
@@ -1,207 +0,0 @@
-module.exports = (plop) => {
-  plop.setGenerator("component", {
-    description: "Create a component",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is your component name?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
-        templateFile: "plop-templates/Component/Component.tsx.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.ts",
-        templateFile: "plop-templates/Component/Component.test.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.component.scss",
-        templateFile: "plop-templates/Component/Component.component.scss.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/{{pascalCase name}}/index.ts",
-        templateFile: "plop-templates/Component/index.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/index.ts",
-        templateFile: "plop-templates/injectable-index.ts.hbs",
-        skipIfExists: true,
-      },
-      {
-        type: "append",
-        path: "src/app/components/index.ts",
-        pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
-      },
-      {
-        type: "append",
-        path: "src/app/components/index.ts",
-        pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{pascalCase name}},`,
-      },
-    ],
-  })
-  plop.setGenerator("atom", {
-    description: "Create a component",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is your component name?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.tsx",
-        templateFile: "plop-templates/Component/Component.tsx.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.test.ts",
-        templateFile: "plop-templates/Component/Component.test.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.component.scss",
-        templateFile: "plop-templates/Component/Component.component.scss.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/atoms/{{pascalCase name}}/index.ts",
-        templateFile: "plop-templates/Component/index.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/index.ts",
-        templateFile: "plop-templates/injectable-index.ts.hbs",
-        skipIfExists: true,
-      },
-      {
-        type: "append",
-        path: "src/app/components/index.ts",
-        pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from "./atoms/{{pascalCase name}}"`,
-      },
-      {
-        type: "append",
-        path: "src/app/components/index.ts",
-        pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{pascalCase name}},`,
-      },
-    ],
-  })
-  plop.setGenerator("molecule", {
-    description: "Create a rich component",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is your component name?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.tsx",
-        templateFile: "plop-templates/Component/Component.tsx.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.ts",
-        templateFile: "plop-templates/Component/Component.test.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss",
-        templateFile: "plop-templates/Component/Component.component.scss.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/molecules/{{pascalCase name}}/index.ts",
-        templateFile: "plop-templates/Component/index.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/components/index.ts",
-        templateFile: "plop-templates/injectable-index.ts.hbs",
-        skipIfExists: true,
-      },
-      {
-        type: "append",
-        path: "src/app/components/index.ts",
-        pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from "./molecules/{{pascalCase name}}"`,
-      },
-      {
-        type: "append",
-        path: "src/app/components/index.ts",
-        pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{pascalCase name}},`,
-      },
-    ],
-  })
-  plop.setGenerator("page", {
-    description: "Create a page",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is your page name?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.tsx",
-        templateFile: "plop-templates/Page/Page.tsx.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.ts",
-        templateFile: "plop-templates/Page/Page.test.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss",
-        templateFile: "plop-templates/Page/Page.module.scss.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/index.ts",
-        templateFile: "plop-templates/Page/index.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.slice.ts",
-        templateFile: "plop-templates/Page/Page.slice.ts.hbs",
-      },
-      {
-        type: "add",
-        path: "src/app/pages/index.ts",
-        templateFile: "plop-templates/injectable-index.ts.hbs",
-        skipIfExists: true,
-      },
-      {
-        type: "append",
-        path: "src/app/pages/index.ts",
-        pattern: `/* PLOP_INJECT_IMPORT */`,
-        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
-      },
-      {
-        type: "append",
-        path: "src/app/pages/index.ts",
-        pattern: `/* PLOP_INJECT_EXPORT */`,
-        template: `\t{{pascalCase name}},`,
-      },
-    ],
-  })
-}
--- a/publish-local.sh
+++ b/publish-local.sh
@@ -0,0 +1,16 @@
+#!/bin/sh
+
+semver=${1:-patch}
+
+set -e
+
+npm run build
+cp package.json build/
+sed -i '' -E 's/"build"/"*"/' build/package.json
+
+sed -i '' 's#"build/cjs/Icon.js"#"cjs/Icon.js"#' build/package.json
+sed -i '' 's#"build/es/Icon.js"#"es/Icon.js"#' build/package.json
+sed -i '' 's#"build/types/Icon.d.ts"#"types/Icon.d.ts"#' build/package.json
+
+cd build
+npm pack --pack-destination ~/__Projects__/Common
--- a/publish.sh
+++ b/publish.sh
@@ -0,0 +1,16 @@
+#!/bin/sh
+
+semver=${1:-patch}
+
+set -e
+npm --no-git-tag-version version ${semver}
+npm run build
+cp package.json build/
+sed -i '' -E 's/"build"/"*"/' build/package.json
+
+sed -i '' 's#"build/cjs/index.js"#"cjs/index.js"#' build/package.json
+sed -i '' 's#"build/es/index.js"#"es/index.js"#' build/package.json
+sed -i '' 's#"build/types/index.d.ts"#"types/index.d.ts"#' build/package.json
+
+cd build
+npm publish --access public --loglevel verbose
--- a/src/Calendar.test.ts
+++ b/src/Calendar.test.ts
@@ -1,8 +0,0 @@
-import React from "react"
-import Calendar from "./Calendar"
-
-describe("Calendar", () => {
-   it("renders without error", () => {
-
-   })
-})
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -1,8 +1,4 @@
 import { useEffect, useState } from "react"
-import MonthSelector from "./MonthSelector"
-import JustCalendar from "./JustCalendar"
-import EventManager from "./EventManager"
-import MonthNavigator from "./MonthNavigator"
 import {
  ArButtonVariants,
  ArCalViews,
@@ -12,7 +8,12 @@ import {
  CalendarProps,
  Event,
 } from "@armco/types"
-import { Button, CalHelper, isWithinSchedule } from "../.."
+import Button from "@armco/shared-components/Button"
+import { CalHelper, isWithinSchedule } from "@armco/utils/dateHelper"
+import MonthSelector from "./MonthSelector"
+import JustCalendar from "./JustCalendar"
+import EventManager from "./EventManager"
+import MonthNavigator from "./MonthNavigator"
 import "./Calendar.component.scss"

 const calHelper = new CalHelper({ siblingMonths: true, weekStart: 1 })
--- a/src/DatePicker.tsx
+++ b/src/DatePicker.tsx
@@ -6,10 +6,10 @@ import {
  DatePickerProps,
  FunctionType,
 } from "@armco/types"
-import { Helper } from "@armco/utils"
-import { Icon } from "@armco/icon"
-import { Popover } from "@armco/shared-components"
-import Calendar from "."
+import { pad } from "@armco/utils/helper"
+import Icon from "@armco/icon"
+import Popover from "@armco/shared-components/Popover"
+import Calendar from "./Calendar"
 import "./DatePicker.component.scss"

 const DatePicker = (props: DatePickerProps): JSX.Element => {
@@ -53,11 +53,7 @@ const DatePicker = (props: DatePickerProps): JSX.Element => {
            placeholder="dd/mm/yyyy"
            value={
              date &&
-              Helper.pad(date.day) +
-                "/" +
-                Helper.pad(date.month + 1) +
-                "/" +
-                date.year
+              pad(date.day) + "/" + pad(date.month + 1) + "/" + date.year
            }
          />
          <Icon
--- a/src/DateRangePicker.tsx
+++ b/src/DateRangePicker.tsx
@@ -5,10 +5,12 @@ import {
  CalendarDate,
  DateRangePickerProps,
 } from "@armco/types"
-import { Icon } from "@armco/icon"
-import { DateFormatter, Helper, toDate } from "@armco/utils"
-import { Popover } from "@armco/shared-components"
-import Calendar from "."
+import Icon from "@armco/icon"
+import { toDate } from "@armco/utils/dateHelper"
+import { DateFormatter } from "@armco/utils/dateformat"
+import { pad } from "@armco/utils/helper"
+import Popover from "@armco/shared-components/Popover"
+import Calendar from "./Calendar"
 import "./DateRangePicker.component.scss"

 const DateRangePicker = (props: DateRangePickerProps): JSX.Element => {
@@ -33,18 +35,14 @@ const DateRangePicker = (props: DateRangePickerProps): JSX.Element => {
        DateFormatter(toDate(endDate), mask)
    } else {
      value =
-        Helper.pad(startDate.day) +
+        pad(startDate.day) +
        "/" +
-        Helper.pad(startDate.month + 1) +
+        pad(startDate.month + 1) +
        "/" +
        startDate.year
      value += " - "
      value +=
-        Helper.pad(endDate.day) +
-        "/" +
-        Helper.pad(endDate.month + 1) +
-        "/" +
-        endDate.year
+        pad(endDate.day) + "/" + pad(endDate.month + 1) + "/" + endDate.year
    }
  }

--- a/src/EventForm.tsx
+++ b/src/EventForm.tsx
@@ -10,16 +10,14 @@ import {
  FunctionType,
  ObjectType,
 } from "@armco/types"
-import {
-  Button,
-  SegmentedControl,
-  Select,
-  TextArea,
-  TextInput,
-  TimeEntry,
-  Toggle,
-  toDate,
-} from "../.."
+import Button from "@armco/shared-components/Button"
+import SegmentedControl from "@armco/shared-components/SegmentedControl"
+import Select from "@armco/shared-components/Select"
+import TextArea from "@armco/shared-components/TextArea"
+import TextInput from "@armco/shared-components/TextInput"
+import TimeEntry from "@armco/shared-components/TimeEntry"
+import Toggle from "@armco/shared-components/Toggle"
+import { toDate } from "@armco/utils/dateHelper"
 import { EventListItem } from "./EventList"

 const durationOptions = [
@@ -86,7 +84,7 @@ const validateEvent = (event: Event) => {
  )
 }

-const EventForm = (props: EventFormProps) => {
+export const EventForm = (props: EventFormProps) => {
  const { miniMode, onSubmit, selectedDate } = props
  const [localEvent, setLocalEvent] = useState<Event>({
    title: "",
@@ -281,5 +279,3 @@ const EventForm = (props: EventFormProps) => {
    </div>
  )
 }
-
-export default EventForm
--- a/src/EventList.tsx
+++ b/src/EventList.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 import { EventListProps, Event, SegmentData } from "@armco/types"
-import { LoadableIcon } from "../.."
+import Icon from "@armco/icon"
 import { segments } from "./EventForm"

 const noEventsMessage = (
@@ -62,7 +62,7 @@ export const EventListItem = ({
  if (event?.eventType) {
    preview = selectedEventType?.icon ? (
      <span>
-        <LoadableIcon classes="me-2" icon={selectedEventType.icon} />
+        <Icon attributes={{ classes: "me-2" }} icon={selectedEventType.icon} />
        {preview}
      </span>
    ) : (
@@ -80,7 +80,7 @@ export const EventListItem = ({
  )
 }

-const EventList = (props: EventListProps) => {
+export const EventList = (props: EventListProps) => {
  const { events } = props
  return (
    <div className="ar-EventList flex-grow-1 p-3">
@@ -103,5 +103,3 @@ const EventList = (props: EventListProps) => {
    </div>
  )
 }
-
-export default EventList
--- a/src/EventManager.tsx
+++ b/src/EventManager.tsx
@@ -6,9 +6,10 @@ import {
  EventManagerProps,
  Event,
 } from "@armco/types"
-import EventForm from "./EventForm"
-import EventList from "./EventList"
-import { Button, Helper } from "../.."
+import { EventForm } from "./EventForm"
+import { EventList } from "./EventList"
+import Button from "@armco/shared-components/Button"
+import { pad } from "@armco/utils/helper"
 import "./EventManager.component.scss"

 const EventManager = (props: EventManagerProps) => {
@@ -34,9 +35,9 @@ const EventManager = (props: EventManagerProps) => {
          onClick={() => setCurrentView(ArCalViews.CALENDAR)}
        />
        <span className="fw-bold">
-          {Helper.pad(selectedDate.day) +
+          {pad(selectedDate.day) +
            " - " +
-            Helper.pad(selectedDate.month + 1) +
+            pad(selectedDate.month + 1) +
            " - " +
            selectedDate.year}
        </span>
--- a/src/JustCalendar.tsx
+++ b/src/JustCalendar.tsx
@@ -6,7 +6,8 @@ import {
  DateItemProps,
  JustCalendarProps,
 } from "@armco/types"
-import { Badge, LoadableIcon } from "../.."
+import Icon from "@armco/icon"
+import Badge from "@armco/shared-components/Badge"

 const weekDays = [
  {
@@ -111,11 +112,15 @@ const DateItem = (props: DateItemProps) => {
          }`}
          onClick={() => onDateSelected(date, allowEventSetting && hovered)}
        >
-          <LoadableIcon
+          <Icon
            icon="io.IoIosAddCircle"
-            color="#5cb85cb3"
-            hoverColor="#5cb85c"
-            size={miniMode ? "0.8rem" : "1.5rem"}
+            attributes={{
+              colors: {
+                fillColor: "#5cb85cb3",
+                hoverFillColor: "#5cb85c",
+              },
+              size: miniMode ? "0.8rem" : "1.5rem",
+            }}
          />
        </span>
      )}
--- a/src/MonthNavigator.tsx
+++ b/src/MonthNavigator.tsx
@@ -4,7 +4,9 @@ import {
  ArMonthSelectorViews,
  ArThemes,
 } from "@armco/types"
-import { LoadableIcon, CalHelper, MONTH_INDEX } from "../.."
+import Icon from "@armco/icon"
+import { CalHelper } from "@armco/utils/dateHelper"
+import { MONTH_INDEX } from "@armco/configs/constants"

 const getSelectedDecade = (refDate: Date, selectedDecade?: number) => {
  const useYear = selectedDecade || refDate.getFullYear()
@@ -55,11 +57,15 @@ const MonthNavigator = (props: MonthNavigatorProps) => {
          className="ar-MonthNavigator__nav-button flex-center cursor-pointer"
          onClick={() => setRefDate(CalHelper.getPreviousYear(refDate))}
        >
-          <LoadableIcon
+          <Icon
            icon="ai/AiOutlineDoubleLeft"
-            color={theme === ArThemes.DARK1 ? "white" : "black"}
-            size="1rem"
-            strokeWidth={miniMode ? "30" : "100"}
+            attributes={{
+              colors: {
+                fillColor: theme === ArThemes.DARK1 ? "white" : "black",
+              },
+              size: "1rem",
+              strokeWidth: miniMode ? "30" : "100",
+            }}
          />
        </div>
        <div
@@ -79,11 +85,15 @@ const MonthNavigator = (props: MonthNavigatorProps) => {
            }
          }}
        >
-          <LoadableIcon
+          <Icon
            icon="ai/AiOutlineLeft"
-            color={theme === ArThemes.DARK1 ? "white" : "black"}
-            size="1rem"
-            strokeWidth={miniMode ? "30" : "100"}
+            attributes={{
+              colors: {
+                fillColor: theme === ArThemes.DARK1 ? "white" : "black",
+              },
+              size: "1rem",
+              strokeWidth: miniMode ? "30" : "100",
+            }}
          />
        </div>
        <div
@@ -137,22 +147,30 @@ const MonthNavigator = (props: MonthNavigatorProps) => {
            }
          }}
        >
-          <LoadableIcon
+          <Icon
            icon="ai.AiOutlineRight"
-            color={theme === ArThemes.DARK1 ? "white" : "black"}
-            size="1rem"
-            strokeWidth={miniMode ? "30" : "100"}
+            attributes={{
+              colors: {
+                fillColor: theme === ArThemes.DARK1 ? "white" : "black",
+              },
+              size: "1rem",
+              strokeWidth: miniMode ? "30" : "100",
+            }}
          />
        </div>
        <div
          className="ar-MonthNavigator__nav-button flex-center cursor-pointer"
          onClick={() => setRefDate(CalHelper.getNextYear(refDate))}
        >
-          <LoadableIcon
+          <Icon
            icon="ai.AiOutlineDoubleRight"
-            color={theme === ArThemes.DARK1 ? "white" : "black"}
-            size="1rem"
-            strokeWidth={miniMode ? "30" : "100"}
+            attributes={{
+              colors: {
+                fillColor: theme === ArThemes.DARK1 ? "white" : "black",
+              },
+              size: "1rem",
+              strokeWidth: miniMode ? "30" : "100",
+            }}
          />
        </div>
      </div>
--- a/src/MonthSelector.tsx
+++ b/src/MonthSelector.tsx
@@ -3,7 +3,8 @@ import {
  ArMonthSelectorViews,
  MonthSelectorProps,
 } from "@armco/types"
-import { MONTH_INDEX, sub } from "../.."
+import { MONTH_INDEX } from "@armco/configs/constants"
+import { sub } from "@armco/utils/dateHelper"
 import "./MonthSelector.component.scss"

 const generateDecades = (currentDecade: number) => {
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,9 @@
-export { default } from "./Calendar"
+export { default as Calendar } from "./Calendar"
 export { default as DatePicker } from "./DatePicker"
 export { default as DateRangePicker } from "./DateRangePicker"
 export { default as JustCalendar } from "./JustCalendar"
-export { default as EventForm } from "./EventForm"
+export { EventList } from "./EventList"
+export { EventForm } from "./EventForm"
 export { default as EventManager } from "./EventManager"
 export { default as MonthNavigator } from "./MonthNavigator"
 export { default as MonthSelector } from "./MonthSelector"
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom"
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
      "dom.iterable",
      "esnext"
    ],
+    "outDir": "build",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,40 @@
+import { resolve } from "path"
+import { glob } from "glob"
 import { defineConfig } from "vitest/config"
 import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
+import { externalizeDeps } from "vite-plugin-externalize-deps"

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    open: true,
-  },
+  plugins: [
+    react(),
+    libInjectCss(),
+    dts({ outDir: "build/types" }),
+    externalizeDeps(),
+  ],
  build: {
    outDir: "build",
-    sourcemap: true,
-  },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: "src/setupTests",
-    mockReset: true,
+    lib: {
+      entry: glob.sync(resolve(__dirname, "src/**/!(*.d).{ts,tsx}")),
+    },
+    rollupOptions: {
+      treeshake: true,
+      output: [
+        {
+          format: "es",
+          dir: "build/es",
+          entryFileNames: "[name].js",
+          chunkFileNames: "[name]-chunk.js",
+        },
+        {
+          format: "cjs",
+          dir: "build/cjs",
+          entryFileNames: "[name].js",
+          chunkFileNames: "[name]-chunk.js",
+        },
+      ],
+    },
  },
 })