property-practice-ui 0.0.1

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from '@repo/eslint-config/react-internal';
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "property-practice-ui",
+  "version": "0.0.1",
+  "description": "",
+  "private": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./types": "./types/index.ts",
+    "./atoms": "./src/atoms/index.ts",
+    "./molecules": "./src/molecules/index.ts"
+  },
+  "keywords": [
+    "storybook",
+    "react",
+    "ui",
+    "components",
+    "design system",
+    "tailwindcss",
+    "typescript"
+  ],
+  "author": "Property Practice",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
+    "@storybook/addon-a11y": "^9.0.16",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-onboarding": "^9.0.16",
+    "@storybook/addon-vitest": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "playwright": "^1.53.2",
+    "postcss": "^8.5.6",
+    "prettier": "3.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^9.0.16",
+    "tailwindcss": "^3.4.17",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "axios": "^1.12.2",
+    "framer-motion": "^12.23.2",
+    "next": "15.3.6",
+    "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"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "jest",
+    "format": "prettier --write \"**/*.@(js|jsx|mjs|ts|tsx)\"",
+    "lint": ""
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/atoms/ArrowButton/ArrowButton.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { ArrowButton as Component } from './ArrowButton';
+
+const meta: Meta = {
+  title: 'Atoms/ArrowButton',
+  component: Component,
+};
+
+export default meta;
+
+export const ArrowButton: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  args: {
+    variant: 'brand',
+    asChild: false,
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['brand', 'teal', 'blue'],
+    },
+    asChild: { control: 'boolean' },
+  },
+};
+
+export const BrandVariant: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    variant: 'brand',
+  },
+};
+
+export const TealVariant: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    variant: 'teal',
+  },
+};
+
+export const BlueVariant: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    variant: 'blue',
+  },
+};
+
+export const AllVariants: StoryObj = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Component variant="brand" />
+      <Component variant="teal" />
+      <Component variant="blue" />
+    </div>
+  ),
+};

package/src/atoms/ArrowButton/ArrowButton.tsx

@@ -0,0 +1,71 @@
+import { HiArrowUpRight } from 'react-icons/hi2';
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const variants = ['brand', 'teal', 'blue'] as const;
+type Variant = (typeof variants)[number];
+
+const StyledContainer = styled.button<{
+  as?: 'button' | 'div';
+  variant: Variant;
+}>`
+  padding: 0.75rem;
+  ${props => props.as === 'button' ? `
+    width: 2.5rem;
+    height: 2.5rem;
+  ` : ''}
+  flex-shrink: 0;
+  background-color: ${(props) => {
+    switch (props.variant) {
+      case 'brand':
+        return colors.background.brand;
+      case 'teal':
+        return colors.background.subtle;
+      case 'blue':
+        return colors.background.blue;
+      default:
+        return colors.background.brand;
+    }
+  }};
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover svg {
+    transform: rotate(45deg);
+  }
+`;
+
+const StyledIcon = styled(HiArrowUpRight)`
+  width: 1rem;
+  height: 1rem;
+  color: ${colors.text.secondary};
+  transition: transform 0.2s;
+`;
+
+interface ButtonProps {
+  onClick?: () => void;
+  asChild?: boolean;
+  variant?: Variant;
+}
+
+export const ArrowButton = ({ 
+  onClick, 
+  asChild = false,
+  variant = 'brand'
+}: ButtonProps) => {
+  return (
+    <StyledContainer 
+      as={asChild ? 'div' : 'button'}
+      onClick={onClick}
+      variant={variant}
+    >
+      <StyledIcon aria-hidden />
+    </StyledContainer>
+  );
+};
+
+ArrowButton.variants = variants;

package/src/atoms/Button/Button.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { FaPlus } from 'react-icons/fa';
+import { Button as Component } from './Button';
+
+const meta: Meta = {
+  title: 'Atoms/Button',
+  component: Component,
+};
+
+export default meta;
+
+export const Button: StoryObj<
+  Pick<ComponentProps<typeof Component>, 'text' | 'type' | 'disabled'>
+> = {
+  args: {
+    text: 'Submit',
+    disabled: false,
+  },
+  argTypes: {
+    text: {
+      control: 'text',
+    },
+    type: {
+      control: 'select',
+      options: Component.types,
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  render: (args) => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+        <Component disabled={args.disabled} text={args.text} type={args.type} />
+        <Component
+          disabled={args.disabled}
+          text={args.text}
+          type={args.type}
+          icon={<FaPlus fontSize="12px" />}
+        />
+      </div>
+    );
+  },
+};

package/src/atoms/Button/Button.tsx

@@ -0,0 +1,91 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+import { radii } from '../../tokens/radii';
+import { spaces } from '../../tokens/spaces';
+import { Loader } from '../Loader/Loader';
+
+const ButtonTypes = ['submit', 'reset', 'button'] as const;
+
+type ButtonType = (typeof ButtonTypes)[number];
+
+const variants = ['dark', 'light'] as const;
+
+type Variant = (typeof variants)[number];
+
+interface ButtonProps {
+  onClick?: () => void;
+  text?: string;
+  type?: ButtonType;
+  disabled?: boolean;
+  icon?: ReactElement;
+  variant?: Variant;
+  isLoading?: boolean;
+}
+
+const StyledButton = styled.button<{ variant: Variant }>`
+  padding: ${spaces[2]} ${spaces[4]};
+  background-color: ${(props) =>
+    props.variant === 'light'
+      ? colors.button.primary
+      : colors.button.secondary};
+  border-radius: ${radii.lg};
+  color: ${(props) =>
+    props.variant === 'light' ? colors.text.primary : colors.text.secondary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${spaces[2]};
+  max-height: 34px;
+
+  &:hover {
+    background-color: ${colors.button.hover};
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: ${colors.button.active};
+    color: ${colors.text.secondary};
+  }
+
+  &:disabled {
+    background-color: ${colors.button.primary};
+    cursor: not-allowed;
+    color: ${colors.text.primary};
+  }
+`;
+
+const ButtonText = styled.span`
+  font-size: 12px;
+  font-weight: 700;
+`;
+
+export const Button = ({
+  onClick,
+  text,
+  type = 'button',
+  disabled,
+  icon = undefined,
+  variant = 'light',
+  isLoading,
+}: ButtonProps) => {
+  return (
+    <StyledButton
+      type={type}
+      onClick={onClick}
+      disabled={disabled || isLoading}
+      variant={variant}
+    >
+      {!isLoading ? (
+        <>
+          {typeof icon !== 'undefined' && icon}
+          <ButtonText>{text}</ButtonText>
+        </>
+      ) : (
+        <Loader size="20px" />
+      )}
+    </StyledButton>
+  );
+};
+
+Button.types = ButtonTypes;

package/src/atoms/CheckboxItem/CheckboxItem.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+import { radii } from '../../tokens/radii';
+import { sizes } from '../../tokens/sizes';
+import { spaces } from '../../tokens/spaces';
+
+interface CheckboxItemProps<T> {
+  value: T;
+  label: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+const CheckboxWrapper = styled.label`
+  display: flex;
+  align-items: center;
+  gap: ${spaces[2]};
+  cursor: pointer;
+  font-size: 16px;
+  color: ${colors.text.subtle};
+`;
+
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  display: none;
+`;
+
+const StyledCheckbox = styled.span<{ checked: boolean }>`
+  width: ${sizes.lg};
+  height: ${sizes.lg};
+  border: 1.5px solid ${colors.background.tertiary};
+  border-radius: ${radii.md};
+  background-color: ${({ checked }) =>
+    checked ? colors.background.tertiary : 'transparent'};
+  transition: all 0.2s ease-in-out;
+`;
+
+export const CheckboxItem = <T extends string | number | boolean>({
+  label,
+  onClick,
+  checked,
+}: CheckboxItemProps<T>) => {
+  return (
+    <CheckboxWrapper onClick={onClick}>
+      <HiddenCheckbox checked={checked} readOnly />
+      <StyledCheckbox checked={checked} />
+      {label}
+    </CheckboxWrapper>
+  );
+};

package/src/atoms/Description/Description.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const variants = ['primary', 'secondary', 'subtle', 'error'] as const;
+type Variant = (typeof variants)[number];
+
+interface DescriptionProps {
+  children: string;
+  variant?: Variant;
+}
+
+const StyledDescription = styled.p<{ variant: Variant }>`
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+        return colors.text.primary;
+      case 'secondary':
+        return colors.text.secondary;
+      case 'subtle':
+        return colors.text.subtle;
+      case 'error':
+        return colors.text.error;
+      default:
+        return colors.text.primary;
+    }
+  }};
+`;
+
+export const Description = ({
+  children,
+  variant = 'primary',
+}: DescriptionProps) => {
+  return (
+    <StyledDescription variant={variant}>
+      {children}
+    </StyledDescription>
+  );
+};
+
+Description.variants = variants;

package/src/atoms/ExtendedButton/ExtendedButton.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { ExtendedButton as Component } from './ExtendedButton';
+
+const meta: Meta = {
+  title: 'Atoms/ExtendedButton',
+  component: Component,
+};
+
+export default meta;
+
+export const ExtendedButton: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  args: {
+    text: 'Register For Free',
+    arrowVariant: 'teal',
+    textBgVariant: 'brand',
+    textVariant: 'secondary',
+  },
+  argTypes: {
+    text: { control: 'text' },
+    arrowVariant: {
+      control: 'select',
+      options: ['brand', 'teal', 'blue'],
+    },
+    textBgVariant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+    },
+    textVariant: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+  },
+};
+
+export const TealArrowDarkBg: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Register For Free',
+    arrowVariant: 'teal',
+    textBgVariant: 'brand',
+    textVariant: 'secondary',
+  },
+};
+
+export const BlueArrowLightBg: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Learn More',
+    arrowVariant: 'blue',
+    textBgVariant: 'secondary',
+    textVariant: 'primary',
+  },
+};
+
+export const BrandArrowTealBg: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Get Started',
+    arrowVariant: 'brand',
+    textBgVariant: 'subtle',
+    textVariant: 'secondary',
+  },
+};

package/src/atoms/ExtendedButton/ExtendedButton.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { ArrowButton, TextButton } from "..";
+
+const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  padding: 0;
+  background: transparent;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+interface ExtendedButtonProps {
+  text: string;
+  onClick?: () => void;
+  arrowVariant?: 'brand' | 'teal' | 'blue';
+  textBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
+  textVariant?: 'brand' | 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'light' | 'error' | 'blue';
+}
+
+export const ExtendedButton = ({ 
+  text, 
+  onClick,
+  arrowVariant = 'teal',
+  textBgVariant = 'brand',
+  textVariant = 'secondary',
+}: ExtendedButtonProps) => {
+  return (
+    <StyledButton onClick={onClick}>
+      <ArrowButton asChild variant={arrowVariant} />
+      <TextButton asChild text={text} bgVariant={textBgVariant} textVariant={textVariant} uppercase={false} />
+    </StyledButton>
+  );
+};

package/src/atoms/FeatureItem/FeatureItem.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { GiMolecule } from "react-icons/gi";
+import { FeatureItem as Component } from './FeatureItem';
+
+const meta: Meta = {
+  title: 'Atoms/FeatureItem',
+  component: Component,
+};
+
+export default meta;
+
+export const FeatureItem: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  args: {
+    thumbnail: <GiMolecule size={24} color="#0d9488" />,
+    title: 'End-to-End Process Issuing',
+    description: 'Litigator manages the full issuing process for you.',
+
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+
+  },
+};

package/src/atoms/FeatureItem/FeatureItem.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+type TextColor = keyof typeof colors.text;
+type BackgroundColor = keyof typeof colors.background;
+
+const Container = styled.div`
+  display: flex;
+  gap: 1rem;
+  background-color: transparent;
+`;
+
+const ThumbnailWrapper = styled.div<{ $size?: string; thumbnailBgColor: BackgroundColor }>`
+  width: ${props => props.$size || '3rem'};
+  height: ${props => props.$size || '3rem'};
+  border-radius: 50%;
+  background-color: ${props => colors.background[props.thumbnailBgColor]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+const Title = styled.h3<{ titleColor: TextColor }>`
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: ${props => colors.text[props.titleColor]};
+`;
+
+const Description = styled.p<{ descriptionColor: TextColor }>`
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: ${props => colors.text[props.descriptionColor]};
+`;
+
+interface FeatureItemProps {
+  thumbnail: React.ReactNode;
+  title: string;
+  description: string;
+  thumbnailSize?: string;
+  thumbnailBgColor?: BackgroundColor;
+  titleColor?: TextColor;
+  descriptionVariant?: 'primary' | 'secondary' | 'subtle' | 'error';
+}
+
+export const FeatureItem = ({
+  thumbnail,
+  title,
+  description,
+  thumbnailSize,
+  thumbnailBgColor = 'brand',
+  titleColor = 'primary',
+  descriptionVariant = 'subtle',
+}: FeatureItemProps) => {
+  // Map descriptionVariant to text color
+  const getDescriptionColor = (): TextColor => {
+    switch (descriptionVariant) {
+      case 'primary':
+        return 'primary';
+      case 'secondary':
+        return 'secondary';
+      case 'subtle':
+        return 'subtle';
+      case 'error':
+        return 'error';
+      default:
+        return 'subtle';
+    }
+  };
+
+  return (
+    <Container>
+      <ThumbnailWrapper $size={thumbnailSize} thumbnailBgColor={thumbnailBgColor}>
+        {thumbnail}
+      </ThumbnailWrapper>
+      <Content>
+        <Title titleColor={titleColor}>{title}</Title>
+        <Description descriptionColor={getDescriptionColor()}>{description}</Description>
+      </Content>
+    </Container>
+  );
+};

package/src/atoms/FormContainer/FormContainer.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import styled from 'styled-components';
+import { breakpoints } from '../../tokens/breakpoints';
+import { spaces } from '../../tokens/spaces';
+
+type Space = keyof typeof spaces;
+
+interface FormContainerProps {
+  children: ReactNode;
+  space?: Space;
+}
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const InnerContainer = styled.div<{ space: Space }>`
+  display: flex;
+  flex-direction: column;
+  padding: ${spaces[4]};
+  width: 100%;
+  max-width: ${breakpoints.lg};
+  gap: ${(props) => spaces[props.space]};
+`;
+
+export const FormContainer = ({ children, space = 4 }: FormContainerProps) => {
+  return (
+    <Container>
+      <InnerContainer space={space}>{children}</InnerContainer>
+    </Container>
+  );
+};