property-practice-ui 0.0.1

package/src/molecules/FAQAccordion/FAQAccordion.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { HiMinus, HiPlus } from 'react-icons/hi2';
+import styled from 'styled-components';
+import { Description, Header } from '../../atoms';
+import { colors } from '../../tokens/colors';
+
+type TextColor = keyof typeof colors.text;
+
+const AccordionContainer = styled.div`
+  border-bottom: 1px solid ${colors.text.light || '#d1d5db'};
+  padding: 1.5rem 0;
+`;
+
+const AccordionHeader = styled.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  padding: 0;
+`;
+
+const NumberBadge = styled.span<{ numberColor: TextColor }>`
+  font-size: 1rem;
+  font-weight: 600;
+  color: ${props => colors.text[props.numberColor]};
+  flex-shrink: 0;
+`;
+
+const HeaderWrapper = styled.div`
+  flex-grow: 1;
+`;
+
+const IconWrapper = styled.div<{ iconColor: TextColor }>`
+  color: ${props => colors.text[props.iconColor]};
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AccordionContent = styled.div<{ $isOpen: boolean }>`
+  max-height: ${props => props.$isOpen ? '1000px' : '0'};
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  padding-left: 2.5rem;
+  margin-top: ${props => props.$isOpen ? '1rem' : '0'};
+`;
+
+interface AccordionProps {
+  number: string;
+  title: string;
+  content: string;
+  defaultOpen?: boolean;
+  headerVariant?: 'h1' | 'h2' | 'h3';
+  numberColor?: TextColor;
+  titleColor?: TextColor;
+  iconColor?: TextColor;
+  contentVariant?: 'primary' | 'secondary' | 'subtle' | 'error';
+}
+
+export const FAQAccordion = ({
+  number,
+  title,
+  content,
+  defaultOpen = false,
+  headerVariant = 'h3',
+  numberColor = 'brand',
+  titleColor = 'brand',
+  iconColor = 'brand',
+  contentVariant = 'primary',
+}: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <AccordionContainer>
+      <AccordionHeader onClick={() => setIsOpen(!isOpen)}>
+        <NumberBadge numberColor={numberColor}>{number}</NumberBadge>
+        <HeaderWrapper>
+          <Header variant={headerVariant} color={titleColor}>
+            {title}
+          </Header>
+        </HeaderWrapper>
+        <IconWrapper iconColor={iconColor}>
+          {isOpen ? <HiMinus size={24} /> : <HiPlus size={24} />}
+        </IconWrapper>
+      </AccordionHeader>
+      <AccordionContent $isOpen={isOpen}>
+        <Description variant={contentVariant}>
+          {content}
+        </Description>
+      </AccordionContent>
+    </AccordionContainer>
+  );
+};

package/src/molecules/FeatureContainer/FeatureContainer.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { GiMolecule } from "react-icons/gi";
+import { FeatureContainer as Component } from './FeatureContainer';
+
+const meta: Meta = {
+  title: 'Molecules/FeatureContainer',
+  component: Component,
+};
+
+export default meta;
+
+const featureItems = [
+  {
+    thumbnail: <GiMolecule size={24} color="white" />,
+    title: 'End-to-End Process Issuing',
+    description: 'Litigator manages the full issuing process for you.',
+    thumbnailBgColor: '#0d9488',
+  },
+  {
+    thumbnail: <GiMolecule size={24} color="white" />,
+    title: 'Automated Workflow',
+    description: 'Streamline your processes with intelligent automation.',
+    thumbnailBgColor: '#0d9488',
+  },
+  {
+    thumbnail: <GiMolecule size={24} color="white" />,
+    title: 'Real-time Updates',
+    description: 'Stay informed with instant notifications and tracking.',
+    thumbnailBgColor: '#0d9488',
+  },
+];
+
+export const FeatureContainer: StoryObj<
+  Pick<ComponentProps<typeof Component>, 'items'>
+> = {
+  args: {
+    items: featureItems,
+  },
+};

package/src/molecules/FeatureContainer/FeatureContainer.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { FeatureItem } from '../../atoms';
+import { colors } from '../../tokens/colors';
+
+type TextColor = keyof typeof colors.text;
+type BackgroundColor = keyof typeof colors.background;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const FeatureWrapper = styled.div`
+  padding: 1rem 0;
+  border-bottom: 1px solid #e5e7eb;
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+interface FeatureItemData {
+  thumbnail: React.ReactNode;
+  title: string;
+  description: string;
+  thumbnailSize?: string;
+}
+
+interface FeatureContainerProps {
+  items: FeatureItemData[];
+  thumbnailBgColor?: BackgroundColor;
+  titleColor?: TextColor;
+  descriptionVariant?: 'primary' | 'secondary' | 'subtle' | 'error';
+}
+
+export const FeatureContainer = ({ 
+  items, 
+  thumbnailBgColor = 'brand',
+  titleColor = 'primary',
+  descriptionVariant = 'subtle',
+}: FeatureContainerProps) => {
+  return (
+    <Container>
+      {items.map((item, index) => (
+        <FeatureWrapper key={index}>
+          <FeatureItem
+            thumbnail={item.thumbnail}
+            title={item.title}
+            description={item.description}
+            thumbnailSize={item.thumbnailSize}
+            thumbnailBgColor={thumbnailBgColor}
+            titleColor={titleColor}
+            descriptionVariant={descriptionVariant}
+          />
+        </FeatureWrapper>
+      ))}
+    </Container>
+  );
+};

package/src/molecules/FileButton/FileButton.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, useRef } from 'react';
+import { FaPlus } from 'react-icons/fa6';
+import { Button } from '../../atoms';
+
+const acceptTypes = ['.docx', '.doc', '.pdf', 'image/*'] as const;
+
+type AcceptType = (typeof acceptTypes)[number];
+
+interface FileButtonProps
+  extends Omit<ComponentProps<typeof Button>, 'onClick' | 'type'> {
+  onFileSelect?: (file: File) => void;
+  accept?: AcceptType[];
+  multiple?: boolean;
+}
+
+export const FileButton = ({
+  onFileSelect,
+  accept = ['.pdf'],
+  multiple = false,
+  ...rest
+}: FileButtonProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0 && onFileSelect) {
+      Array.from(files).forEach((file) => onFileSelect(file));
+    }
+  };
+
+  return (
+    <>
+      <Button
+        {...rest}
+        icon={<FaPlus fontSize="10px" />}
+        onClick={handleClick}
+      />
+      <input
+        type="file"
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        onChange={handleFileChange}
+        accept={accept?.map((item) => item).join(',')}
+        multiple={multiple}
+      />
+    </>
+  );
+};

package/src/molecules/Input/Input.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { Input as Component } from './Input';
+
+const meta: Meta = {
+  title: 'Molecules/Input',
+  component: Component,
+};
+
+export default meta;
+
+export const Input: StoryObj<
+  Pick<
+    ComponentProps<typeof Component>,
+    'label' | 'name' | 'placeholder' | 'type' | 'error'
+  >
+> = {
+  args: {
+    label: 'First Name',
+    placeholder: 'Full Name',
+    type: 'text',
+    error: 'default',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    type: { control: 'select', options: Component.types },
+    error: { control: 'text' },
+  },
+};

package/src/molecules/Input/Input.tsx

@@ -0,0 +1,31 @@
+import { ComponentProps, useMemo } from 'react';
+import { Input as InputBase } from '../../atoms/Input/Input';
+import { FloatingLabel } from '../../atoms/Label/Label';
+import { InputContainer } from '../InputContainer/InputContainer';
+
+interface InputProps extends ComponentProps<typeof InputBase> {
+  label?: string;
+  error?: string;
+}
+
+export const Input = ({ label, error, ...rest }: InputProps) => {
+  const isInvalid = useMemo(
+    () => typeof error === 'string' && error.length > 0,
+    [error],
+  );
+
+  return (
+    <InputContainer error={error}>
+      {typeof label === 'string' && (
+        <FloatingLabel
+          color={isInvalid ? 'error' : 'subtle'}
+          value={label}
+          fontWeight="600"
+        />
+      )}
+      <InputBase {...rest} />
+    </InputContainer>
+  );
+};
+
+Input.types = InputBase.types;

package/src/molecules/InputContainer/InputContainer.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import styled from 'styled-components';
+import { Label } from '../../atoms';
+import { colors } from '../../tokens/colors';
+import { radii } from '../../tokens/radii';
+import { sizes } from '../../tokens/sizes';
+import { spaces } from '../../tokens/spaces';
+
+const variants = ['outline', 'none'] as const;
+interface InputContainerProps {
+  error?: string;
+  children: ReactNode;
+  variant?: (typeof variants)[number];
+}
+
+const Container = styled.div`
+  width: 100%;
+`;
+
+const InnerContainer = styled.div<
+  Pick<InputContainerProps, 'error' | 'variant'>
+>`
+  position: relative;
+  width: 100%;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+
+  border-style: solid;
+  border-width: ${(props) => (props?.variant === 'outline' ? sizes[0] : '0px')};
+  border-color: ${(props) =>
+    props?.error ? colors.border.error : colors.border.active};
+  border-radius: ${radii.lg};
+
+  padding: ${spaces[3]} ${spaces[3]} ${spaces[2]};
+
+  &:hover {
+    border-color: ${colors.border.hover};
+    cursor: text;
+  }
+
+  &:focus-within {
+    border-color: ${colors.border.focus};
+  }
+`;
+
+export const InputContainer = ({
+  error,
+  children,
+  variant = 'outline',
+}: InputContainerProps) => {
+  return (
+    <Container>
+      <InnerContainer error={error} variant={variant}>
+        {children}
+      </InnerContainer>
+      {typeof error === 'string' && <Label value={error} color="error" />}
+    </Container>
+  );
+};

package/src/molecules/JutaBrand/JutaBrand.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { JutaBrand as Component } from './JutaBrand';
+
+const meta: Meta = {
+  title: 'Molecules/JutaBrand',
+  component: Component,
+};
+
+export default meta;
+
+const logos = [
+  'https://via.placeholder.com/150x60/1e40af/ffffff?text=LENDICOR',
+  'https://via.placeholder.com/150x60/1e40af/ffffff?text=Harris+Billings',
+  'https://via.placeholder.com/150x60/1e40af/ffffff?text=BDP',
+  'https://via.placeholder.com/150x60/1e40af/ffffff?text=cinque',
+];
+
+export const JutaBrand: StoryObj<
+  Pick<
+    ComponentProps<typeof Component>,
+    | 'mainHeader'
+    | 'subHeader'
+    | 'logos'
+    | 'mainHeaderColor'
+    | 'subHeaderColor'
+  >
+> = {
+  args: {
+    mainHeader: 'Juta, a trusted brand',
+    subHeader: 'With over 170 years of quality solutions in education, legal and business our partners include:',
+    logos: logos,
+    mainHeaderColor: 'primary',
+    subHeaderColor: 'primary',
+  },
+  argTypes: {
+    mainHeader: { control: 'text' },
+    subHeader: { control: 'text' },
+    logos: { control: 'object' },
+    mainHeaderColor: { control: 'text' },
+    subHeaderColor: { control: 'text' },
+  },
+};

package/src/molecules/JutaBrand/JutaBrand.tsx

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { Header } from '../../atoms';
+import { colors } from '../../tokens/colors';
+
+type Color = keyof typeof colors.text;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  text-align: center;
+  padding: 3rem 2rem;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const LogosContainer = styled.div`
+  display: flex;
+  gap: 3rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+const LogoWrapper = styled.div`
+  max-width: 150px;
+  
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+`;
+
+interface JutaBrandProps {
+  mainHeader: string;
+  subHeader: string;
+  logos: string[];
+  mainHeaderColor?: Color;
+  subHeaderColor?: Color;
+}
+
+export const JutaBrand = ({
+  mainHeader,
+  subHeader,
+  logos,
+  mainHeaderColor = 'brand',
+  subHeaderColor = 'subtle',
+}: JutaBrandProps) => {
+  return (
+    <Container>
+      <HeaderWrapper>
+        <Header variant="h1" color={mainHeaderColor}>
+          {mainHeader}
+        </Header>
+        <Header variant="h2" color={subHeaderColor}>
+          {subHeader}
+        </Header>
+      </HeaderWrapper>
+      <LogosContainer>
+        {logos.map((logo, index) => (
+          <LogoWrapper key={index}>
+            <img src={logo} alt={`Partner logo ${index + 1}`} />
+          </LogoWrapper>
+        ))}
+      </LogosContainer>
+    </Container>
+  );
+};

package/src/molecules/Modal/Modal.tsx

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import styled from 'styled-components';
+import { fadeIn } from '../../tokens/animations';
+import { breakpoints } from '../../tokens/breakpoints';
+import { colors } from '../../tokens/colors';
+import { radii } from '../../tokens/radii';
+import { spaces } from '../../tokens/spaces';
+
+const positions = ['top', 'center', 'bottom'] as const;
+
+type ContentPosition = (typeof positions)[number];
+
+interface ModalProps {
+  visible: boolean;
+  onClose: () => void;
+  dismissable?: boolean;
+  contentPosition?: ContentPosition;
+  children: ReactNode;
+}
+
+const Overlay = styled.div<{ contentPosition: ContentPosition }>`
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: ${(props) =>
+    props.contentPosition === 'center'
+      ? 'center'
+      : props.contentPosition === 'bottom'
+        ? 'flex-end'
+        : 'flex-start'};
+  justify-content: center;
+  animation: ${fadeIn} 160ms ease-out;
+`;
+
+const ContentContainer = styled.div`
+  position: relative;
+  width: min(${breakpoints.sm}, 92vw);
+  max-height: 86vh;
+  overflow: auto;
+  border-radius: ${radii.xl};
+  padding: ${spaces[6]};
+  background-color: ${colors.background.primary};
+`;
+
+export const Modal = ({
+  visible,
+  contentPosition = 'center',
+  dismissable = true,
+  onClose,
+  children,
+}: ModalProps) => {
+  function onDismiss() {
+    if (dismissable) {
+      onClose();
+    }
+  }
+
+  if (!visible) return <></>;
+
+  return (
+    <Overlay contentPosition={contentPosition} onClick={onDismiss}>
+      <ContentContainer onClick={(e) => e.stopPropagation()}>
+        {children}
+      </ContentContainer>
+    </Overlay>
+  );
+};

package/src/molecules/OverviewRowItem/OverviewRowItem.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps } from "react";
+import { OverviewRowItem as Component } from './OverviewRowItem';
+
+const meta: Meta = {
+    title: 'Molecules/OverviewRowItem',
+    component: Component
+}
+
+export default meta
+
+export const OverviewRowItem: StoryObj<ComponentProps<typeof Component>> = {
+    args: {
+        isComplete: true,
+        isMainHeader: true,
+        title: 'Property Information'
+    },
+    argTypes: {
+        isComplete: {control: 'boolean'},
+        isMainHeader: {control: 'boolean'},
+        title: {control: 'text'}
+    }
+}

package/src/molecules/OverviewRowItem/OverviewRowItem.tsx

@@ -0,0 +1,39 @@
+import { FaCircleCheck, FaCircleExclamation } from "react-icons/fa6"
+import styled from "styled-components"
+import { Header } from "../../atoms"
+import { colors } from "../../tokens/colors"
+import { radii } from "../../tokens/radii"
+import { spaces } from "../../tokens/spaces"
+
+const Container = styled.div<{isComplete: boolean}>`
+display: flex;
+align-items: center ;
+justify-content: space-between;
+padding: ${spaces[2]} ${spaces[3]};
+background-color: ${props => props.isComplete ? colors.background.blue : colors.background.light};
+border-radius: ${radii.sm};
+`
+
+const Row = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${spaces[2]};
+`
+
+interface OverviewRowItemProps {
+    isComplete: boolean
+    title: string
+    isMainHeader: boolean
+}
+
+export const OverviewRowItem = ({isComplete, isMainHeader, title}: OverviewRowItemProps) => {
+
+    return <Container isComplete={isComplete}>
+        <Header variant={isMainHeader ? 'h2' : 'h3'} color={isComplete ? 'secondary' : 'primary'}>{title}</Header>
+
+        <Row>
+            <Header variant='h3' color={isComplete ? 'secondary' : 'primary'}>{isComplete ? 'Complete' : 'Information Outstanding'}</Header>
+            {isComplete ? <FaCircleCheck color={colors.background.success}/> : <FaCircleExclamation color={colors.background.error}/>}
+        </Row>
+    </Container>
+}

package/src/molecules/PDFPreviewer/PDFPreviewer.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { EmptyState } from '../EmptyState/EmptyState';
+
+interface PDFPreviewerProps {
+  url: string;
+}
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+export const PDFPreviewer = ({ url }: PDFPreviewerProps) => {
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setError(null);
+    try {
+      new URL(url);
+    } catch {
+      setError('Invalid preview URL');
+    }
+  }, [url]);
+
+  if (typeof error === 'string')
+    return (
+      <EmptyState message="Failed to load this document" variant="documents" />
+    );
+
+  return (
+    <Container>
+      <iframe
+        src={`${url}#view=FitH&toolbar=1&navpanes=0`}
+        title="Document preview"
+        allow="clipboard-read; clipboard-write"
+        referrerPolicy="no-referrer"
+        style={{ width: '100%', height: '100%', border: '0' }}
+      />
+    </Container>
+  );
+};