property-practice-ui 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @repo/property-practice-ui
 
+## 0.0.3
+
+### Patch Changes
+
+- 5423f4e: change module type
+
 ## 0.0.2
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "property-practice-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "private": false,
+  "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./types": "./types/index.ts",
+    "./types": "./src/types/index.ts",
     "./atoms": "./src/atoms/index.ts",
     "./molecules": "./src/molecules/index.ts"
   },
@@ -45,7 +46,7 @@
   "dependencies": {
     "axios": "^1.12.2",
     "framer-motion": "^12.23.2",
-    "next": "15.3.6",
+    "next": "16.0.10",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "styled-components": "^6.1.19",

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

@@ -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' ? (

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,8 @@
+<<<<<<< HEAD
 export { default as FileUpload } from './components/FileUpload';
+=======
+>>>>>>> develop
 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';

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/src/components/DynamicInput.tsx

@@ -1,54 +0,0 @@
-import { InputAttributes } from '../../types/inputAttributes';
-
-interface Props {
-  field: InputAttributes;
-  setValue: (field: string, value: string) => void;
-}
-export default function DynamicInput({ field, setValue }: Props) {
-  const control = () => {
-    switch (field.type) {
-      case 'Date':
-        return (
-          <>
-            <input
-              className="w-full border-0 text-sm bg-gray-50 text-gray-800 outline-none"
-              type="date"
-              placeholder={field.title}
-              required={field.required}
-              onChange={(event) => setValue(field.field, event.target.value)}
-            />
-            <label className="mt-auto text-xs text-gray-400 pt-2">
-              {field.title}
-            </label>
-          </>
-        );
-      case 'Boolean':
-        return (
-          <p className="flex flex-row">
-            <input
-              className="border-0 text-sm bg-gray-50 text-gray-800 outline-none mr-2"
-              type="checkbox"
-              placeholder={field.title}
-              onChange={(event) =>
-                setValue(field.field, event.target.checked ? 'Yes' : 'No')
-              }
-            />
-            <label className="mt-auto text-sm text-gray-400">
-              {field.title}
-            </label>
-          </p>
-        );
-      default:
-        return (
-          <input
-            className="w-full text-sm bg-transparent text-gray-700 dark:text-gray-300 outline-none relative py-4 px-3 rounded-lg border border-gray-400 hover:border-white focus-within:border-blue-500"
-            type={field.type?.toLowerCase() || 'text'}
-            placeholder={field.title}
-            required={field.required}
-            onChange={(event) => setValue(field.field, event.target.value)}
-          />
-        );
-    }
-  };
-  return <div className="flex flex-col p-2">{control()}</div>;
-}

package/src/components/FileUpload.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import axios from 'axios';
-
-interface FileUploadFormProps {
-  setFile: (file: File | null) => void;
-}
-
-export default function FileUploadForm({ setFile }: FileUploadFormProps) {
-  const [progress, setProgress] = useState(0);
-  const [message, setMessage] = useState('');
-  const [dragOver, setDragOver] = useState(false);
-  const [file, setLocalFile] = useState<File | null>(null);
-
-  const handleFile = (selected: File) => {
-    if (selected) {
-      setLocalFile(selected);
-      setFile(selected);
-    }
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selected = e.target.files?.[0];
-    if (selected) handleFile(selected);
-  };
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setDragOver(false);
-    const droppedFile = event.dataTransfer.files?.[0];
-    if (droppedFile) handleFile(droppedFile);
-  };
-
-  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setDragOver(true);
-  };
-
-  const handleDragLeave = () => setDragOver(false);
-
-  const toBase64 = (file: File): Promise<string> =>
-    new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve((reader.result as string).split(',')[1]);
-      reader.onerror = reject;
-    });
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setProgress(0);
-    setMessage('');
-    if (!file) return setMessage('❌ No file selected.');
-
-    try {
-      const base64 = await toBase64(file);
-
-      await axios.post(
-        '/api/upload',
-        {
-          fileName: file.name,
-          base64File: base64,
-        },
-        {
-          onUploadProgress: (event) => {
-            const percent = event.total
-              ? Math.round((event.loaded / event.total) * 100)
-              : 0;
-            setProgress(percent);
-          },
-        },
-      );
-
-      setMessage('✅ Submitted successfully!');
-    } catch (err) {
-      console.error(err);
-      setMessage('❌ Upload failed.');
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="max-w-xl mx-auto p-6 space-y-6 bg-white dark:bg-transparent rounded-lg shadow"
-    >
-      {/* Drag and Drop + Button + Preview */}
-      <div
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        className={`flex flex-col items-center justify-center px-4 py-10 border-gray-300 border-2 border-dashed rounded-md text-center transition ${
-          dragOver ? 'bg-blue-50' : 'bg-white dark:bg-transparent '
-        }`}
-      >
-        +
-        <p className="text-sm text-gray-300 mb-2">
-          {file ? `Selected: ${file.name}` : 'Drag & drop your file here'}
-        </p>
-      </div>
-
-      {/* Progress Bar */}
-      {progress > 0 && (
-        <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
-          <div
-            className="bg-blue-600 h-4 transition-all"
-            style={{ width: `${progress}%` }}
-          />
-        </div>
-      )}
-
-      {message && (
-        <p
-          className={`text-sm ${
-            message.includes('✅') ? 'text-green-600' : 'text-red-600'
-          }`}
-        >
-          {message}
-        </p>
-      )}
-    </form>
-  );
-}

package/src/components/ModeSwitch.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-const toggleMode = (mode: string) => {
-  document.cookie = `mode=${mode}; path=/; max-age=31536000`;
-  window.location.reload();
-};
-
-export default function SwitchButton() {
-  return (
-    <div className="inline-flex shadow-md bg-white dark:bg-gray-500 shadow-gray-900 rounded-xl border-0">
-      <button
-        onClick={() => toggleMode('')}
-        className="p-1 border-r border-1 border-gray-800"
-      >
-        <svg
-          fill="#d0d0d0"
-          viewBox="0 0 24 24"
-          height="20px"
-          width="20px"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-          <g
-            id="SVGRepo_tracerCarrier"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></g>
-          <g id="SVGRepo_iconCarrier">
-            <path
-              d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
-              stroke="#d0d0d0"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
-          </g>
-        </svg>
-      </button>
-      <button onClick={() => toggleMode('dark')} className="p-1.5">
-        <svg
-          fill="#757575"
-          height="16px"
-          width="16px"
-          version="1.1"
-          id="Layer_1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 472.618 472.618"
-        >
-          <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-          <g
-            id="SVGRepo_tracerCarrier"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></g>
-          <g id="SVGRepo_iconCarrier">
-            <g>
-              <g>
-                <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path>
-              </g>
-            </g>
-          </g>
-        </svg>
-      </button>
-    </div>
-  );
-}

package/types/index.ts

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