property-practice-ui 0.0.2 → 0.0.4

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "property-practice-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./types": "./types/index.ts",
+    "./types": "./src/types/index.ts",
     "./atoms": "./src/atoms/index.ts",
     "./molecules": "./src/molecules/index.ts"
   },
@@ -39,23 +43,27 @@
     "storybook": "^9.0.16",
     "tailwindcss": "^3.4.17",
     "tsconfig-paths": "^4.2.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.8",
+    "@heroicons/react": "^2.2.0",
     "axios": "^1.12.2",
     "framer-motion": "^12.23.2",
-    "next": "15.3.6",
+    "next": "16.0.10",
+    "property-practice-icons": "^0.0.2",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "styled-components": "^6.1.19",
-    "tailwind-variants": "^1.0.0",
-    "@heroicons/react": "^2.2.0",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^1.0.0"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "build:package": "tsup",
     "test": "jest",
     "format": "prettier --write \"**/*.@(js|jsx|mjs|ts|tsx)\"",
     "lint": ""

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,106 @@
+import {
+  Button,
+  Dialog as DefaultDialog,
+  DialogPanel,
+  DialogTitle,
+  Transition,
+} from "@headlessui/react";
+import { Fragment, ReactNode } from "react";
+
+interface MyModalProps {
+  open: boolean;
+  onClose: () => void;
+  children?: ReactNode;
+  title?: string;
+  buttonText?: string;
+  buttonHandler?: () => void;
+  secondaryText?: string;
+  secondaryHandler?: () => void;
+}
+
+export const Dialog = ({
+  open,
+  onClose,
+  children,
+  title = "Payment successful",
+  buttonText = "Continue",
+  buttonHandler,
+  secondaryText,
+  secondaryHandler,
+}: MyModalProps) => {
+  return (
+    <Transition appear show={open} as={Fragment}>
+      <DefaultDialog
+        open={open}
+        as="div"
+        className="relative z-10 focus:outline-none"
+        onClose={onClose}
+        __demoMode
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          leave="ease-in duration-500"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/30" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4">
+            <DialogPanel
+              transition
+              className="w-full max-w-md rounded-lg bg-white dark:bg-white/5 p-6 backdrop-blur-1xl duration-300 ease-out"
+              style={{ maxWidth: "515px" }}
+            >
+              <div className="flex justify-between items-center mb-2">
+                <DialogTitle
+                  as="h3"
+                  className="text-2xl pb-3 font-bold dark:text-white text-center w-full"
+                >
+                  {title}
+                </DialogTitle>
+                <button
+                  type="button"
+                  onClick={onClose}
+                  aria-label="Close"
+                  className="text-gray-300 hover:text-gray-300 text-xl font-bold focus:outline-none px-2"
+                  style={{ lineHeight: 1 }}
+                >
+                  ×
+                </button>
+              </div>
+              {children}
+              <div
+                className={`${
+                  secondaryHandler && secondaryText
+                    ? "flex justify-center mt-4 gap-4"
+                    : "mt-4"
+                }`}
+              >
+                {buttonHandler && (
+                  <Button
+                    className="inline-flex items-center gap-2 rounded-md bg-gray-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white data-hover:bg-gray-600 data-open:bg-gray-700"
+                    onClick={buttonHandler}
+                  >
+                    {buttonText}
+                  </Button>
+                )}
+                {secondaryHandler && secondaryText && (
+                  <Button
+                    className="bg-gray-200 text-gray-800 px-4 py-2 w-24 rounded hover:bg-gray-300"
+                    onClick={secondaryHandler}
+                  >
+                    {secondaryText}
+                  </Button>
+                )}
+              </div>
+            </DialogPanel>
+          </div>
+        </div>
+      </DefaultDialog>
+    </Transition>
+  );
+}

package/src/components/Filter/Filter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Dropdown } from '@repo/property-practice-ui';
+import { Dropdown } from 'property-practice-ui';
 import { Option } from '../../types';
 
 interface FilterProps<T extends string | number> {

package/src/components/NavMenu.tsx

@@ -1,6 +1,6 @@
-import { MenuItem, MenuSubItem } from '../../types/menuItem';
 import Link from 'next/link';
 import { tv } from 'tailwind-variants';
+import { MenuItem, MenuSubItem } from '../types/menuItem';
 
 interface Props {
   direction: 'horizontal' | 'vertical';

package/src/components/SortBy/SortBy.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { OrderType } from '../../../types/orderType';
+import { OrderType } from '../../types/orderType';
 
 interface SortByProps {
   value: OrderType;

package/src/components/TableList.tsx

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
-import { TableListItem as TableListItemType } from '../../types';
+import type { TableListItemType } from '../types/tableListItem';
 
 const itemContainer = tv({
   base: 'rounded-2xl mb-2 px-8 py-3 flex flex-wrap items-center justify-between gap-4',

package/src/components/TableRow/TableRow.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
-import { tv } from 'tailwind-variants';
-import AppDialog from '../../../../../apps/admin-frontend/components/dialog';
 import {
   ClockIcon,
   HomeIcon,
   TrashIcon,
-} from '../../../../property-practice-icons/src';
+} from 'property-practice-icons';
+import { useEffect, useMemo, useState } from 'react';
+import { tv } from 'tailwind-variants';
+import { Dialog } from '../Dialog/Dialog';
 import { TableHeaderConfig } from '../Table/Table';
 
 type PaginationOptionsType = {
@@ -92,7 +92,7 @@ const RowCell = ({
     <p className="text-base font-medium text-gray-400 flex items-center gap-1">
       {header.filterAccessor === 'formattedAddress' && <HomeIcon />}
       {header.filterAccessor === 'formattedAddress' ? (
-        <span className="truncate max-w-[200px] block">
+        <span className="break-words max-w-[200px] block">
           {item[header.filterAccessor]}
         </span>
       ) : header.filterAccessor === 'status' ? (
@@ -119,7 +119,7 @@ const DeleteDialog = ({
   onConfirm: () => void;
   isDeleting: boolean;
 }) => (
-  <AppDialog
+  <Dialog
     open={open}
     onClose={onClose}
     title="Delete Transaction"
@@ -135,7 +135,7 @@ const DeleteDialog = ({
         property from the list (soft delete).
       </p>
     </div>
-  </AppDialog>
+  </Dialog>
 );
 
 export const TableRow = ({

package/src/components/Tabs/Tabs.tsx

@@ -1,32 +1,23 @@
 'use client';
 
-import { useMemo, useState } from 'react';
-import {
-  TransactionTypeEnum,
-  TransactionTypeEnumType,
-} from '../../../../property-practice-dtos';
+import { useState } from 'react';
+import { Option } from '../../types';
 
-interface TabsProps {
-  saleData: any[];
-  leaseData: any[];
-  defaultTab?: TransactionTypeEnumType;
-  onTabChange?: (tab: TransactionTypeEnumType) => void;
+interface TabsProps <T>{
+  defaultTab: T;
+  onTabChange?: (tab: T) => void;
+  options: Option<T>[]
 }
 
-export const Tabs = ({
-  saleData,
-  leaseData,
-  defaultTab = TransactionTypeEnum.enum.SALE,
+export const Tabs = <T extends string | number>({
+  defaultTab,
   onTabChange,
-}: TabsProps) => {
-  const [tab, setTab] = useState<TransactionTypeEnumType>(defaultTab);
+  options
+}: TabsProps<T>) => {
+  const [tab, setTab] = useState<T>(defaultTab);
 
-  const displayedData = useMemo(
-    () => (tab === TransactionTypeEnum.enum.SALE ? saleData : leaseData),
-    [tab, saleData, leaseData],
-  );
 
-  const handleTabChange = (newTab: TransactionTypeEnumType) => {
+  const handleTabChange = (newTab: T) => {
     setTab(newTab);
     onTabChange?.(newTab);
   };
@@ -35,18 +26,18 @@ export const Tabs = ({
     <div className="flex flex-col gap-4">
       <div className="px-4 border-b border-gray-300 bg-white">
         <div className="flex gap-x-10 py-3">
-          {Object.values(TransactionTypeEnum.enum).map((type) => (
+          {options.map(({label, value}) => (
             <button
-              key={type}
+              key={value}
               type="button"
-              onClick={() => handleTabChange(type as TransactionTypeEnumType)}
+              onClick={() => handleTabChange(value)}
               className={`text-base font-semibold cursor-pointer px-6 py-2 rounded-t-lg border-b-4 transition-colors duration-200 ${
-                tab === type
+                tab === value
                   ? 'border-blue-600 text-[#033c89]'
                   : 'border-transparent text-gray-400 dark:text-[#033c89]'
               }`}
             >
-              {type.charAt(0).toUpperCase() + type.slice(1).toLowerCase()}
+              {label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()}
             </button>
           ))}
         </div>

package/src/components/Toast.tsx

@@ -1,8 +1,6 @@
-'use client';
-
 import { useEffect } from 'react';
 import { tv } from 'tailwind-variants';
-import { ToastType } from '../../types';
+import { ToastType } from '../types/toast';
 
 interface Props {
   visible?: boolean;

package/src/components/TopMenu.tsx

@@ -1,7 +1,5 @@
-'use client';
-
-import { useEffect, useState } from 'react';
 import { motion, useAnimation } from 'framer-motion';
+import { useEffect, useState } from 'react';
 import { tv } from 'tailwind-variants';
 
 export const navbar = tv({

package/src/index.ts

@@ -1,6 +1,4 @@
-export { default as FileUpload } from './components/FileUpload';
 export { Filter } from './components/Filter/Filter';
-export { default as ModeSwitch } from './components/ModeSwitch';
 export { default as NavMenu } from './components/NavMenu';
 export { Search } from './components/SearchBar/Search';
 export { SortBy } from './components/SortBy/SortBy';
@@ -16,4 +14,3 @@ export { default as TopMenu } from './components/TopMenu';
 export * from './molecules';
 export * from './organism';
 export * from './templates';
-

package/src/organism/ToastProvider/ToastProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { ToastType } from '../../../types';
 import Toast from '../../components/Toast';
+import type { ToastType } from '../../types/toast';
 
 type ShowToastInput = {
   type?: ToastType;

package/src/templates/Contact/Contact.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import styled from 'styled-components';
 import { ExtendedButton, Header, TermsCheckbox } from '../../atoms';
 import { ContactForm } from '../../organism';
@@ -75,7 +76,7 @@ interface ContactProps {
   termsVariant?: 'primary' | 'secondary' | 'subtle';
   buttonArrowVariant?: 'brand' | 'teal' | 'blue';
   buttonTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
-  buttonTextVariant?: ComponentTextColor;
+  buttonTextVariant?: ComponentProps<typeof ExtendedButton>['textVariant'];
 }
 
 export const Contact = ({

package/src/templates/OtherProducts/OtherProducts.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import styled from 'styled-components';
 import { Header } from '../../atoms';
 import { ProductInfo } from '../../molecules';
@@ -45,7 +46,7 @@ interface OtherProductsProps {
   productTitleColor?: ComponentTextColor;
   productButtonArrowVariant?: 'brand' | 'teal' | 'blue';
   productButtonTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
-  productButtonTextVariant?: ComponentTextColor;
+  productButtonTextVariant?: ComponentProps<typeof ProductInfo>['buttonTextVariant'];
 }
 
 export const OtherProducts = ({

package/src/types/index.ts

@@ -0,0 +1,6 @@
+export * from './inputAttributes';
+export * from './menuItem';
+export * from './orderType';
+export * from './tableListItem';
+export * from './toast';
+

package/{types → src/types}/tableListItem.ts

@@ -1,4 +1,4 @@
-export type TableListItem = {
+export type TableListItemType = {
   title: string;
   status?: string;
   date: Date;

package/tsconfig.json

@@ -1,7 +1,8 @@
 {
    "extends": "@repo/typescript-config/react-library.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "rootDir": "src"
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist", ".storybook"]

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+    entry: ["./src/index.ts"],
+    splitting: true,
+    clean: true,
+    outDir: 'dist',
+    tsconfig: './tsconfig.json',
+    dts: true,
+    format: ['cjs', 'esm'],
+})