property-practice-ui 0.0.1

package/src/atoms/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,106 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const variants = ['primary', 'secondary', 'subtle'] as const;
+type Variant = (typeof variants)[number];
+
+const ToggleContainer = styled.div<{ variant: Variant }>`
+  display: inline-flex;
+  background-color: ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+        return colors.background.secondary;
+      case 'secondary':
+        return colors.background.light;
+      case 'subtle':
+        return colors.background.subtle;
+      default:
+        return colors.background.secondary;
+    }
+  }};
+  border-radius: 9999px;
+  padding: 0.25rem;
+  gap: 0.25rem;
+`;
+
+const ToggleOption = styled.button<{ 
+  $isActive: boolean; 
+  variant: Variant;
+}>`
+  padding: 0.5rem 1.5rem;
+  border-radius: 9999px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  
+  background-color: ${props => {
+    if (!props.$isActive) return 'transparent';
+    
+    switch (props.variant) {
+      case 'primary':
+        return colors.background.brand;
+      case 'secondary':
+        return colors.background.blue;
+      case 'subtle':
+        return colors.background.subtle;
+      default:
+        return colors.background.brand;
+    }
+  }};
+  
+  color: ${props => {
+    if (props.$isActive) {
+      return colors.text.secondary; 
+    }
+    
+    switch (props.variant) {
+      case 'primary':
+        return colors.text.brand;
+      case 'secondary':
+        return colors.text.blue;
+      case 'subtle':
+        return colors.text.subtle;
+      default:
+        return colors.text.brand;
+    }
+  }};
+
+  &:hover {
+    opacity: ${props => props.$isActive ? 1 : 0.7};
+  }
+`;
+
+interface ToggleButtonProps {
+  options: string[];
+  activeOption: string;
+  onChange: (option: string) => void;
+  variant?: Variant;
+}
+
+export const ToggleButton = ({
+  options,
+  activeOption,
+  onChange,
+  variant = 'primary',
+}: ToggleButtonProps) => {
+  return (
+    <ToggleContainer variant={variant}>
+      {options.map((option) => (
+        <ToggleOption
+          key={option}
+          $isActive={activeOption === option}
+          variant={variant}
+          onClick={() => onChange(option)}
+        >
+          {option}
+        </ToggleOption>
+      ))}
+    </ToggleContainer>
+  );
+};
+
+ToggleButton.variants = variants;

package/src/atoms/index.ts

@@ -0,0 +1,20 @@
+export { ArrowButton } from './ArrowButton/ArrowButton';
+export { Button } from './Button/Button';
+export { Description } from './Description/Description';
+export { ExtendedButton } from './ExtendedButton/ExtendedButton';
+export { FeatureItem } from './FeatureItem/FeatureItem';
+export { FormContainer } from './FormContainer/FormContainer';
+export { Header } from './Header/Header';
+export { Input } from './Input/Input';
+export { Label } from './Label/Label';
+export { Loader } from './Loader/Loader';
+export { Pill } from './Pill/Pill';
+export { RadioItem } from './RadioItem/RadioItem';
+export { SecondaryInput } from './SecondaryInput/SecondaryInput';
+export { SocialButton } from './SocialButton/SocialButton';
+export { TermsCheckbox } from './TermsCheckbox/TermsCheckbox';
+export { Text } from './Text/Text';
+export { Textarea } from './Textarea/Textarea';
+export { TextButton } from './TextButton/TextButton';
+export { ToggleButton } from './ToggleButton/ToggleButton';
+

package/src/components/DynamicInput.tsx

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,123 @@
+'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/Filter/Filter.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Dropdown } from '@repo/property-practice-ui';
+import { Option } from '../../types';
+
+interface FilterProps<T extends string | number> {
+  name: string;
+  label?: string;
+  options: Option<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  placeholder?: string;
+}
+
+export function Filter<T extends string | number>({
+  name,
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = 'Filter by User',
+}: FilterProps<T>) {
+  return (
+    <Dropdown
+      name={name}
+      label={label}
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+    />
+  );
+}

package/src/components/ModeSwitch.tsx

@@ -0,0 +1,66 @@
+'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/src/components/NavMenu.tsx

@@ -0,0 +1,83 @@
+import { MenuItem, MenuSubItem } from '../../types/menuItem';
+import Link from 'next/link';
+import { tv } from 'tailwind-variants';
+
+interface Props {
+  direction: 'horizontal' | 'vertical';
+  items: MenuItem[];
+  selected?: string;
+}
+
+export default function NavMenu({ direction, items, selected = '' }: Props) {
+  const containerStyle = tv({
+    base: 'flex',
+    variants: {
+      direction: {
+        vertical: 'flex-col',
+        horizontal: 'flex-row',
+      },
+    },
+    defaultVariants: {
+      direction: 'horizontal',
+    },
+  });
+
+  return (
+    <ul className={containerStyle({ direction })}>
+      {items.map((item: MenuItem, i: number) => (
+        <li
+          key={i}
+          className="mb-2 max-h-10 hover:max-h-400 transition-all overflow-hidden duration-500"
+        >
+          <Link
+            href={item.link || ''}
+            className={` ${item.link == selected ? 'font-bold text-gray-100' : 'font-semibold text-gray-200'} flex mb-2 py-3 px-4 items-center justify-between text-sm rounded-2xl hover:underline hover:font-bold transition duration-200`}
+          >
+            <div className="flex items-center gap-2">
+              {item.icon && item.icon}
+              <span>{item.title}</span>
+            </div>
+            {item.items && (
+              <span className="transform">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={20}
+                  height={20}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M15.1746 10.1204C15.3843 9.94067 15.6999 9.96495 15.8796 10.1746C16.0593 10.3843 16.0351 10.6999 15.8254 10.8796L12.3254 13.8796C12.1382 14.0401 11.8619 14.0401 11.6746 13.8796L8.17461 10.8796C7.96495 10.6999 7.94067 10.3843 8.12038 10.1746C8.30009 9.96495 8.61574 9.94067 8.8254 10.1204L12 12.8415L15.1746 10.1204Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            )}
+          </Link>
+          <div>
+            {item.items && (
+              <ul className="pl-8 p-4 rounded-md">
+                {item.items.map((subItem: MenuSubItem, i: number) => (
+                  <li key={i} className="mb-2">
+                    <Link
+                      href={subItem.link || '#'}
+                      className="flex mb-2 py-3 px-4 items-center text-gray-300 font-semibold text-xs rounded-2xl hover:underline hover:font-bold hover:text-gray-800 transition duration-200"
+                    >
+                      {subItem.icon && (
+                        <span
+                          className="mr-2"
+                          dangerouslySetInnerHTML={{ __html: subItem.icon }}
+                        ></span>
+                      )}
+                      <span>{subItem.title}</span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/SearchBar/Search.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Search as Component } from '../SearchBar/Search';
+
+const meta: Meta = {
+  title: 'Components/Search',
+  component: Component,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    placeholder: 'Search...',
+    delay: 1000,
+    onChange: (val: string) => console.log('Search term changed:', val),
+  },
+  argTypes: {
+    value: { control: 'text' },
+    placeholder: { control: 'text' },
+    delay: { control: 'number' },
+  },
+};

package/src/components/SearchBar/Search.tsx

@@ -0,0 +1,40 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+interface SearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  delay?: number;
+}
+
+export const Search = ({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  delay = 1000,
+}: SearchProps) => {
+  const [searchTerm, setSearchTerm] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      onChange(searchTerm);
+    }, delay);
+
+    return () => clearTimeout(handler);
+  }, [searchTerm, delay, onChange]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  return (
+    <input
+      type="text"
+      value={searchTerm}
+      onChange={handleChange}
+      placeholder={placeholder}
+      className="border border-gray-300 rounded-md px-4 py-2 w-64 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      aria-label={placeholder}
+    />
+  );
+};

package/src/components/SortBy/SortBy.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OrderType } from '../../../types/orderType';
+import { SortBy as Component } from './SortBy';
+
+const meta: Meta = {
+  title: 'Components/SortBy',
+  component: Component,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 'desc',
+    onChange: (val: OrderType) => console.log('Changed sort to:', val),
+  },
+  argTypes: {
+    value: {
+      control: {
+        type: 'select',
+        options: ['asc', 'desc'],
+      },
+    },
+  },
+};

package/src/components/SortBy/SortBy.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { OrderType } from '../../../types/orderType';
+
+interface SortByProps {
+  value: OrderType;
+  onChange: (value: OrderType) => void;
+}
+
+const Options: { value: OrderType; label: string }[] = [
+  {
+    value: 'desc',
+    label: 'Sort by: Newest',
+  },
+  {
+    value: 'asc',
+    label: 'Sort by: Oldest',
+  },
+];
+
+export const SortBy = ({ value, onChange }: SortByProps) => {
+  const [selected, setSelected] = useState<OrderType>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      onChange(selected);
+    });
+    return () => clearTimeout(handler);
+  }, [selected, onChange]);
+
+  return (
+    <select
+      value={selected}
+      onChange={(e) => setSelected(e.target.value as OrderType)}
+      className="border border-gray-300 rounded-md px-4 py-2 w-48 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+    >
+      {Options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};

package/src/components/Spinner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+interface SpinnerProps {
+  height?: `${number}px`;
+  width?: `${number}px`;
+}
+
+export default function Spinner(props: SpinnerProps) {
+  return (
+    <>
+      <svg
+        aria-hidden="true"
+        className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+    </>
+  );
+}