property-practice-ui 0.0.1

package/src/molecules/PageLayout/PageLayout.tsx

@@ -0,0 +1,60 @@
+import { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components';
+import { Header } from '../../atoms';
+import Spinner from '../../components/Spinner';
+import { colors } from '../../tokens/colors';
+import { spaces } from '../../tokens/spaces';
+
+interface PageLayoutProps {
+  title: string;
+  children: ReactNode;
+  isLoading?: boolean;
+  rightElement?: ReactElement
+}
+
+const Container = styled.div`
+  width: '100%';
+  min-height: '100vh';
+  padding-bottom: ${spaces[9]};
+`;
+
+const HeaderContainer = styled.div`
+  padding: ${spaces[4.5]} ${spaces[6]};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ContentContainer = styled.div`
+  border-top: 1px solid ${colors.border.hover};
+`;
+
+const SpinnerContainer = styled.div`
+  display: flex;
+  width: 100%;
+  padding: ${spaces[6]};
+  align-items: center;
+  justify-content: center;
+`;
+
+export const PageLayout = ({
+  title,
+  children,
+  isLoading = false,
+  rightElement
+}: PageLayoutProps) => {
+  return (
+    <Container>
+      <HeaderContainer>
+        <Header color="subtle">{title}</Header> {rightElement && rightElement}
+      </HeaderContainer>
+      {isLoading ? (
+        <SpinnerContainer>
+          <Spinner />
+        </SpinnerContainer>
+      ) : (
+        <ContentContainer>{children}</ContentContainer>
+      )}
+    </Container>
+  );
+};

package/src/molecules/ProductInfo/ProductInfo.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { ProductInfo as Component } from './ProductInfo';
+
+const meta: Meta = {
+  title: 'Molecules/ProductInfo',
+  component: Component,
+};
+
+export default meta;
+
+export const ProductInfo: StoryObj<Omit<ComponentProps<typeof Component>, 'onButtonClick'>> = {
+  args: {
+    image: 'https://via.placeholder.com/180',
+    logoImage: 'https://via.placeholder.com/200x60?text=Logo',
+    title: 'Affordable & Professional Online Legal Contracts',
+    buttonText: 'Learn More',
+    titleVariant: 'h2',
+    titleColor: 'brand',
+    buttonArrowVariant: 'teal',
+    buttonTextBgVariant: 'brand',
+    buttonTextVariant: 'secondary',
+  },
+  argTypes: {
+    image: { control: 'text' },
+    logoImage: { control: 'text' },
+    title: { control: 'text' },
+    buttonText: { control: 'text' },
+    titleVariant: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3'],
+    },
+    titleColor: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+    buttonArrowVariant: {
+      control: 'select',
+      options: ['brand', 'teal', 'blue'],
+    },
+    buttonTextBgVariant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+    },
+    buttonTextVariant: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+  },
+};

package/src/molecules/ProductInfo/ProductInfo.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { ExtendedButton, Header } from '../../atoms';
+import { colors } from '../../tokens/colors';
+
+type TextColor = keyof typeof colors.text;
+
+const Container = styled.div`
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  max-width: 600px;
+`;
+
+const ImageWrapper = styled.div`
+  flex-shrink: 0;
+  width: 180px;
+  height: 180px;
+  border-radius: 8px;
+  overflow: hidden;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const LogoWrapper = styled.div`
+  max-width: 200px;
+  
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
+
+interface ProductInfoItemProps {
+  image: string;
+  logoImage: string;
+  title: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+  titleVariant?: 'h1' | 'h2' | 'h3';
+  titleColor?: TextColor;
+  buttonArrowVariant?: 'brand' | 'teal' | 'blue';
+  buttonTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
+  buttonTextVariant?: 'brand' | 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'light' | 'error' | 'blue';
+}
+
+export const ProductInfo = ({
+  image,
+  logoImage,
+  title,
+  buttonText,
+  onButtonClick,
+  titleVariant = 'h2',
+  titleColor = 'brand',
+  buttonArrowVariant = 'teal',
+  buttonTextBgVariant = 'brand',
+  buttonTextVariant = 'secondary',
+}: ProductInfoItemProps) => {
+  return (
+    <Container>
+      <ImageWrapper>
+        <img src={image} alt="Product" />
+      </ImageWrapper>
+      <ContentWrapper>
+        <LogoWrapper>
+          <img src={logoImage} alt="Logo" />
+        </LogoWrapper>
+        <Header variant={titleVariant} color={titleColor}>
+          {title}
+        </Header>
+        <ExtendedButton
+          text={buttonText}
+          onClick={onButtonClick}
+          arrowVariant={buttonArrowVariant}
+          textBgVariant={buttonTextBgVariant}
+          textVariant={buttonTextVariant}
+        />
+      </ContentWrapper>
+    </Container>
+  );
+};

package/src/molecules/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { Option } from '../../types';
+import { RadioGroup as Component } from './RadioGroup';
+
+const meta: Meta = {
+  title: 'Molecules/RadioGroup',
+  component: Component,
+};
+
+export default meta;
+
+const options: Option[] = [
+  {
+    label: 'Sale',
+    value: 'SALE',
+  },
+  {
+    label: 'Lease',
+    value: 'LEASE',
+  },
+];
+
+const Container = styled.div`
+  padding: 20px;
+`;
+
+export const RadioGroup: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    label: 'Radio Group',
+    options,
+    value: options[0]?.value,
+  },
+  argTypes: {
+    label: { control: 'text' },
+    value: {
+      control: 'select',
+      options: options.map((option) => option.value),
+    },
+  },
+  render: (args) => (
+    <Container>
+      <Component {...args} />
+    </Container>
+  ),
+};

package/src/molecules/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { Label, RadioItem } from '../../atoms';
+import { spaces } from '../../tokens/spaces';
+import { Option } from '../../types';
+
+type RadioGroupProps<T extends string | number> = {
+  label?: string;
+  options: readonly Option<T>[];
+  value: T;
+  onClick: (value: T) => void;
+  className?: string;
+};
+
+const Container = styled.div``;
+
+const OptionsContainer = styled.div`
+  margin-top: ${spaces[2]};
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: ${spaces[2]};
+`;
+
+const LabelContainer = styled.div`
+  padding-left: ${spaces[1]};
+`;
+
+export const RadioGroup = <T extends string | number>({
+  label,
+  options,
+  value,
+  onClick,
+  className,
+}: RadioGroupProps<T>) => {
+  return (
+    <Container className={className}>
+      {typeof label === 'string' && (
+        <LabelContainer>
+          <Label value={label} fontWeight="600" />
+        </LabelContainer>
+      )}
+      <OptionsContainer>
+        {options.map((option, idx) => (
+          <RadioItem
+            key={idx}
+            isSelected={value === option.value}
+            label={option.label}
+            disabled={option.disabled}
+            onClick={() => onClick(option.value)}
+          />
+        ))}
+      </OptionsContainer>
+    </Container>
+  );
+};

package/src/molecules/RatesChart/RatesChart.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps, useState } from 'react';
+import { RatesChart as Component } from './RatesChart';
+
+const meta: Meta = {
+  title: 'Molecules/RatesChart',
+  component: Component,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const ratesData = [
+  { transactionType: 'Transaction name', price: 'R10.00' },
+  { transactionType: 'Transaction name', price: 'R10.00' },
+  { transactionType: 'Transaction name', price: 'R10.00' },
+  { transactionType: 'Transaction name', price: 'R10.00' },
+  { transactionType: 'Transaction name', price: 'R10.00' },
+  { transactionType: 'Transaction name', price: 'R10.00' },
+];
+
+export const RatesChart: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <>
+        <button
+          onClick={() => setIsOpen(true)}
+          style={{
+            padding: '1rem 2rem',
+            backgroundColor: '#0d9488',
+            color: '#ffffff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '1rem',
+          }}
+        >
+          Open Rates Chart
+        </button>
+        {isOpen && (
+          <Component
+            {...args}
+            rates={ratesData}
+            onClose={() => setIsOpen(false)}
+          />
+        )}
+      </>
+    );
+  },
+  args: {
+    title: 'Rates chart',
+  },
+  argTypes: {
+    title: { control: 'text' },
+
+  },
+};

package/src/molecules/RatesChart/RatesChart.tsx

@@ -0,0 +1,185 @@
+import { HiX } from 'react-icons/hi';
+import styled from 'styled-components';
+import { Header } from '../../atoms';
+import { colors } from '../../tokens/colors';
+
+const variants = ['primary', 'secondary', 'subtle'] as const;
+type Variant = (typeof variants)[number];
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+
+const ChartContainer = styled.div`
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+`;
+
+const HeaderSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+`;
+
+const CloseButton = styled.button<{ variant: Variant }>`
+  background-color: ${(props) => {
+    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: #ffffff;
+  border: none;
+  border-radius: 4px;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+const TableHeader = styled.thead`
+  border-bottom: 2px solid #e5e7eb;
+`;
+
+const TableHeaderCell = styled.th<{ variant: Variant }>`
+  text-align: left;
+  padding: 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: ${(props) => {
+    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;
+    }
+  }};
+`;
+
+const TableBody = styled.tbody``;
+
+const TableRow = styled.tr`
+  border-bottom: 1px solid #f3f4f6;
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const TableCell = styled.td<{ variant: Variant }>`
+  padding: 0.75rem 0;
+  font-size: 0.875rem;
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+      case 'secondary':
+        return colors.text.primary;
+      case 'subtle':
+        return colors.text.subtle;
+      default:
+        return colors.text.primary;
+    }
+  }};
+`;
+
+interface RateItem {
+  transactionType: string;
+  price: string;
+}
+
+interface RatesChartProps {
+  title?: string;
+  rates: RateItem[];
+  onClose: () => void;
+  variant?: Variant;
+}
+
+export const RatesChart = ({
+  title = 'Rates chart',
+  rates,
+  onClose,
+  variant = 'primary',
+}: RatesChartProps) => {
+  const getHeaderColor = () => {
+    switch (variant) {
+      case 'primary':
+        return 'brand';
+      case 'secondary':
+        return 'primary';
+      case 'subtle':
+        return 'subtle';
+      default:
+        return 'brand';
+    }
+  };
+
+  return (
+    <Overlay onClick={onClose}>
+      <ChartContainer onClick={(e) => e.stopPropagation()}>
+        <HeaderSection>
+          <Header variant="h2" color={getHeaderColor()}>
+            {title}
+          </Header>
+          <CloseButton onClick={onClose} variant={variant}>
+            <HiX size={20} />
+          </CloseButton>
+        </HeaderSection>
+        <Table>
+          <TableHeader>
+            <tr>
+              <TableHeaderCell variant={variant}>Transaction type</TableHeaderCell>
+              <TableHeaderCell variant={variant}>Price</TableHeaderCell>
+            </tr>
+          </TableHeader>
+          <TableBody>
+            {rates.map((rate, index) => (
+              <TableRow key={index}>
+                <TableCell variant={variant}>{rate.transactionType}</TableCell>
+                <TableCell variant={variant}>{rate.price}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ChartContainer>
+    </Overlay>
+  );
+};
+
+RatesChart.variants = variants;

package/src/molecules/SideNav/SideNav.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { SideNav as Component } from './SideNav';
+
+const meta: Meta = {
+  title: 'Organisms/SideNav',
+  component: Component,
+};
+
+export default meta;
+
+export const SideNav: StoryObj<Omit<ComponentProps<typeof Component>, 'onBackToTop'>> = {
+  args: {
+    items: [
+      { label: 'Home', href: '#home' },
+      { label: 'About', href: '#about' },
+      { label: 'Services', href: '#services' },
+      { label: 'Contact', href: '#contact' },
+    ],
+    activeItem: '#home',
+    triangleColor: 'primary',
+    dividerColor: 'primary',
+    activeTextBgVariant: 'transparent',
+    activeTextVariant: 'primary',
+    inactiveTextBgVariant: 'transparent',
+    inactiveTextVariant: 'subtle',
+    backToTopBgVariant: 'transparent',
+    backToTopTextVariant: 'subtle',
+  },
+  argTypes: {
+    triangleColor: {
+      control: 'select',
+      options: ['primary', 'secondary', 'hover', 'active', 'error', 'focus', 'brand'],
+    },
+    dividerColor: {
+      control: 'select',
+      options: ['primary', 'secondary', 'hover', 'active', 'error', 'focus', 'brand'],
+    },
+    activeTextBgVariant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+    },
+    activeTextVariant: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+    inactiveTextBgVariant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+    },
+    inactiveTextVariant: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+    backToTopBgVariant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+    },
+    backToTopTextVariant: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+  },
+};