@buildcanada/components 0.3.2 → 0.3.4

package/src/content/Card/Card.tsx

@@ -1,170 +0,0 @@
-import cx from "classnames"
-
-export type CardVariant = "default" | "project" | "memo" | "feature" | "stat" | "profile"
-
-export interface CardProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    variant?: CardVariant
-    href?: string
-    onClick?: () => void
-}
-
-export function Card({
-    children,
-    className,
-    style,
-    variant = "default",
-    href,
-    onClick,
-}: CardProps) {
-    const isInteractive = Boolean(href || onClick)
-    const isButton = Boolean(onClick)
-
-    const classes = cx(
-        "bc-card",
-        `bc-card--${variant}`,
-        {
-            "bc-card--interactive": isInteractive,
-            "bc-card--button": isButton,
-        },
-        className
-    )
-
-    if (href) {
-        return (
-            <a href={href} className={classes} style={style}>
-                {children}
-            </a>
-        )
-    }
-
-    if (onClick) {
-        return (
-            <button type="button" className={classes} style={style} onClick={onClick}>
-                {children}
-            </button>
-        )
-    }
-
-    return (
-        <div className={classes} style={style}>
-            {children}
-        </div>
-    )
-}
-
-/*******************************************************************************
- * Card Subcomponents
- ******************************************************************************/
-
-export interface CardImageProps {
-    src: string
-    alt: string
-    className?: string
-}
-
-export function CardImage({ src, alt, className }: CardImageProps) {
-    return (
-        <div className={cx("bc-card__image", className)}>
-            <img src={src} alt={alt} />
-        </div>
-    )
-}
-
-export interface CardIconProps {
-    children: React.ReactNode
-    className?: string
-}
-
-export function CardIcon({ children, className }: CardIconProps) {
-    return <div className={cx("bc-card__icon", className)}>{children}</div>
-}
-
-export interface CardContentProps {
-    children: React.ReactNode
-    className?: string
-}
-
-export function CardContent({ children, className }: CardContentProps) {
-    return <div className={cx("bc-card__content", className)}>{children}</div>
-}
-
-export interface CardTitleProps {
-    children: React.ReactNode
-    className?: string
-    as?: "h2" | "h3" | "h4" | "h5" | "h6"
-}
-
-export function CardTitle({ children, className, as: Component = "h3" }: CardTitleProps) {
-    return <Component className={cx("bc-card__title", className)}>{children}</Component>
-}
-
-export interface CardDescriptionProps {
-    children: React.ReactNode
-    className?: string
-}
-
-export function CardDescription({ children, className }: CardDescriptionProps) {
-    return <p className={cx("bc-card__description", className)}>{children}</p>
-}
-
-export interface CardMetaProps {
-    children: React.ReactNode
-    className?: string
-}
-
-export function CardMeta({ children, className }: CardMetaProps) {
-    return <div className={cx("bc-card__meta", className)}>{children}</div>
-}
-
-export interface CardStatProps {
-    value: string | number
-    label: string
-    change?: string
-    changeDirection?: "up" | "down" | "neutral"
-    className?: string
-}
-
-export function CardStat({ value, label, change, changeDirection, className }: CardStatProps) {
-    return (
-        <div className={cx("bc-card__stat", className)}>
-            <span className="bc-card__stat-value">{value}</span>
-            <span className="bc-card__stat-label">{label}</span>
-            {change && (
-                <span
-                    className={cx("bc-card__stat-change", {
-                        "bc-card__stat-change--up": changeDirection === "up",
-                        "bc-card__stat-change--down": changeDirection === "down",
-                    })}
-                >
-                    {change}
-                </span>
-            )}
-        </div>
-    )
-}
-
-export interface CardAuthorProps {
-    name: string
-    role?: string
-    avatar?: string
-    className?: string
-}
-
-export function CardAuthor({ name, role, avatar, className }: CardAuthorProps) {
-    return (
-        <div className={cx("bc-card__author", className)}>
-            {avatar && (
-                <img src={avatar} alt={name} className="bc-card__author-avatar" />
-            )}
-            <div className="bc-card__author-info">
-                <span className="bc-card__author-name">{name}</span>
-                {role && <span className="bc-card__author-role">{role}</span>}
-            </div>
-        </div>
-    )
-}
-
-export default Card

package/src/content/Card/index.ts

@@ -1,22 +0,0 @@
-export {
-    Card,
-    CardImage,
-    CardIcon,
-    CardContent,
-    CardTitle,
-    CardDescription,
-    CardMeta,
-    CardStat,
-    CardAuthor,
-    type CardProps,
-    type CardVariant,
-    type CardImageProps,
-    type CardIconProps,
-    type CardContentProps,
-    type CardTitleProps,
-    type CardDescriptionProps,
-    type CardMetaProps,
-    type CardStatProps,
-    type CardAuthorProps,
-} from "./Card"
-export { default } from "./Card"

package/src/content/Hero/Hero.tsx

@@ -1,63 +0,0 @@
-import cx from "classnames"
-
-export type HeroVariant = "home" | "page" | "centered"
-export type HeroBackground = "white" | "linen" | "charcoal"
-
-export interface HeroProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    variant?: HeroVariant
-    background?: HeroBackground
-}
-
-export function Hero({
-    children,
-    className,
-    style,
-    variant = "page",
-    background = "linen",
-}: HeroProps) {
-    const classes = cx(
-        "bc-hero",
-        `bc-hero--${variant}`,
-        `bc-hero--bg-${background}`,
-        className
-    )
-
-    return (
-        <div className={classes} style={style}>
-            <div className="bc-hero__inner">{children}</div>
-        </div>
-    )
-}
-
-export interface HeroTitleProps {
-    children: React.ReactNode
-    className?: string
-    as?: "h1" | "h2"
-}
-
-export function HeroTitle({ children, className, as: Component = "h1" }: HeroTitleProps) {
-    return <Component className={cx("bc-hero__title", className)}>{children}</Component>
-}
-
-export interface HeroSubtitleProps {
-    children: React.ReactNode
-    className?: string
-}
-
-export function HeroSubtitle({ children, className }: HeroSubtitleProps) {
-    return <p className={cx("bc-hero__subtitle", className)}>{children}</p>
-}
-
-export interface HeroActionsProps {
-    children: React.ReactNode
-    className?: string
-}
-
-export function HeroActions({ children, className }: HeroActionsProps) {
-    return <div className={cx("bc-hero__actions", className)}>{children}</div>
-}
-
-export default Hero

package/src/content/Hero/index.ts

@@ -1,13 +0,0 @@
-export {
-    Hero,
-    HeroTitle,
-    HeroSubtitle,
-    HeroActions,
-    type HeroProps,
-    type HeroVariant,
-    type HeroBackground,
-    type HeroTitleProps,
-    type HeroSubtitleProps,
-    type HeroActionsProps,
-} from "./Hero"
-export { default } from "./Hero"

package/src/content/StatBlock/StatBlock.tsx

@@ -1,52 +0,0 @@
-import cx from "classnames"
-
-export type StatBlockSize = "sm" | "md" | "lg"
-export type StatBlockTrend = "up" | "down" | "neutral"
-
-export interface StatBlockProps {
-    value: string | number
-    label: string
-    description?: string
-    change?: string
-    trend?: StatBlockTrend
-    size?: StatBlockSize
-    className?: string
-    style?: React.CSSProperties
-}
-
-export function StatBlock({
-    value,
-    label,
-    description,
-    change,
-    trend,
-    size = "md",
-    className,
-    style,
-}: StatBlockProps) {
-    const classes = cx("bc-stat-block", `bc-stat-block--${size}`, className)
-
-    return (
-        <div className={classes} style={style}>
-            <span className="bc-stat-block__value">{value}</span>
-            <span className="bc-stat-block__label">{label}</span>
-            {description && (
-                <span className="bc-stat-block__description">{description}</span>
-            )}
-            {change && (
-                <span
-                    className={cx("bc-stat-block__change", {
-                        "bc-stat-block__change--up": trend === "up",
-                        "bc-stat-block__change--down": trend === "down",
-                    })}
-                >
-                    {trend === "up" && "↑ "}
-                    {trend === "down" && "↓ "}
-                    {change}
-                </span>
-            )}
-        </div>
-    )
-}
-
-export default StatBlock

package/src/content/StatBlock/index.ts

@@ -1,2 +0,0 @@
-export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./StatBlock"
-export { default } from "./StatBlock"

package/src/feedback/Dialog/Dialog.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useRef, useCallback } from "react"
-import cx from "classnames"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
-
-export type DialogPosition =
-    | "top-left"
-    | "top-right"
-    | "bottom-left"
-    | "bottom-right"
-    | "center"
-
-export interface DialogProps {
-    open: boolean
-    onClose: () => void
-    children: React.ReactNode
-    title?: string
-    description?: string
-    position?: DialogPosition
-    className?: string
-    closeOnEscape?: boolean
-    showCloseButton?: boolean
-    ariaLabelledBy?: string
-    ariaDescribedBy?: string
-    offset?: number
-}
-
-export function Dialog({
-    open,
-    onClose,
-    children,
-    title,
-    description,
-    position = "bottom-right",
-    className,
-    closeOnEscape = true,
-    showCloseButton = true,
-    ariaLabelledBy,
-    ariaDescribedBy,
-    offset = 16,
-}: DialogProps) {
-    const dialogRef = useRef<HTMLDivElement>(null)
-
-    const handleClose = useCallback(() => {
-        onClose()
-    }, [onClose])
-
-    // Handle escape key
-    useEffect(() => {
-        if (!closeOnEscape || !open) return
-
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                handleClose()
-            }
-        }
-
-        document.addEventListener("keydown", handleKeyDown)
-        return () => document.removeEventListener("keydown", handleKeyDown)
-    }, [closeOnEscape, open, handleClose])
-
-    if (!open) return null
-
-    const classes = cx(
-        "bc-dialog",
-        `bc-dialog--${position}`,
-        className
-    )
-
-    const titleId = ariaLabelledBy || (title ? "bc-dialog-title" : undefined)
-    const descriptionId = ariaDescribedBy || (description ? "bc-dialog-description" : undefined)
-
-    const style = {
-        "--bc-dialog-offset": `${offset}px`,
-    } as React.CSSProperties
-
-    return (
-        <div
-            ref={dialogRef}
-            className={classes}
-            style={style}
-            role="dialog"
-            aria-modal="false"
-            aria-labelledby={titleId}
-            aria-describedby={descriptionId}
-        >
-            <div className="bc-dialog__container">
-                {(title || showCloseButton) && (
-                    <header className="bc-dialog__header">
-                        {title && (
-                            <h2 id={titleId} className="bc-dialog__title">
-                                {title}
-                            </h2>
-                        )}
-                        {showCloseButton && (
-                            <button
-                                type="button"
-                                className="bc-dialog__close"
-                                onClick={handleClose}
-                                aria-label="Close dialog"
-                            >
-                                <FontAwesomeIcon icon={faXmark} />
-                            </button>
-                        )}
-                    </header>
-                )}
-                {description && (
-                    <p id={descriptionId} className="bc-dialog__description">
-                        {description}
-                    </p>
-                )}
-                <div className="bc-dialog__content">
-                    {children}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Dialog

package/src/feedback/PopupForm/PopupForm.tsx

@@ -1,90 +0,0 @@
-import cx from "classnames"
-
-import { Dialog, type DialogPosition } from "../Dialog"
-import { Button, type ButtonVariant } from "../../primitives/Button"
-
-export interface PopupFormProps {
-    open: boolean
-    onClose: () => void
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
-    children: React.ReactNode
-    title?: string
-    description?: string
-    position?: DialogPosition
-    offset?: number
-    className?: string
-    submitText?: string
-    submitVariant?: ButtonVariant
-    cancelText?: string
-    cancelVariant?: ButtonVariant
-    showCancel?: boolean
-    isSubmitting?: boolean
-    submitDisabled?: boolean
-    closeOnEscape?: boolean
-}
-
-export function PopupForm({
-    open,
-    onClose,
-    onSubmit,
-    children,
-    title,
-    description,
-    position = "bottom-right",
-    offset,
-    className,
-    submitText = "Submit",
-    submitVariant = "solid-auburn",
-    cancelText = "Cancel",
-    cancelVariant = "outline-charcoal",
-    showCancel = true,
-    isSubmitting = false,
-    submitDisabled = false,
-    closeOnEscape = true,
-}: PopupFormProps) {
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        onSubmit(e)
-    }
-
-    const classes = cx("bc-popup-form", className)
-
-    return (
-        <Dialog
-            open={open}
-            onClose={onClose}
-            title={title}
-            description={description}
-            position={position}
-            offset={offset}
-            closeOnEscape={closeOnEscape}
-        >
-            <form onSubmit={handleSubmit} className={classes}>
-                <div className="bc-popup-form__fields">
-                    {children}
-                </div>
-                <div className="bc-popup-form__actions">
-                    {showCancel && (
-                        <Button
-                            type="button"
-                            text={cancelText}
-                            variant={cancelVariant}
-                            onClick={onClose}
-                            disabled={isSubmitting}
-                            icon={null}
-                        />
-                    )}
-                    <Button
-                        type="submit"
-                        text={isSubmitting ? "Submitting..." : submitText}
-                        variant={submitVariant}
-                        disabled={submitDisabled || isSubmitting}
-                        icon={null}
-                    />
-                </div>
-            </form>
-        </Dialog>
-    )
-}
-
-export default PopupForm

package/src/feedback/PopupForm/index.ts

@@ -1 +0,0 @@
-export { PopupForm, type PopupFormProps } from "./PopupForm"

package/src/layout/Container/Container.tsx

@@ -1,29 +0,0 @@
-import cx from "classnames"
-
-export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full"
-
-export interface ContainerProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    size?: ContainerSize
-    as?: "div" | "main" | "article" | "section"
-}
-
-export function Container({
-    children,
-    className,
-    style,
-    size = "lg",
-    as: Component = "div",
-}: ContainerProps) {
-    const classes = cx("bc-container", `bc-container--${size}`, className)
-
-    return (
-        <Component className={classes} style={style}>
-            {children}
-        </Component>
-    )
-}
-
-export default Container

package/src/layout/Container/index.ts

@@ -1,2 +0,0 @@
-export { Container, type ContainerProps, type ContainerSize } from "./Container"
-export { default } from "./Container"

package/src/layout/Divider/Divider.tsx

@@ -1,32 +0,0 @@
-import cx from "classnames"
-
-export type DividerOrientation = "horizontal" | "vertical"
-export type DividerVariant = "solid" | "dashed" | "construction"
-
-export interface DividerProps {
-    className?: string
-    style?: React.CSSProperties
-    orientation?: DividerOrientation
-    variant?: DividerVariant
-    spacing?: "none" | "sm" | "md" | "lg"
-}
-
-export function Divider({
-    className,
-    style,
-    orientation = "horizontal",
-    variant = "solid",
-    spacing = "md",
-}: DividerProps) {
-    const classes = cx(
-        "bc-divider",
-        `bc-divider--${orientation}`,
-        `bc-divider--${variant}`,
-        `bc-divider--spacing-${spacing}`,
-        className
-    )
-
-    return <hr className={classes} style={style} />
-}
-
-export default Divider

package/src/layout/Divider/index.ts

@@ -1,2 +0,0 @@
-export { Divider, type DividerProps, type DividerOrientation, type DividerVariant } from "./Divider"
-export { default } from "./Divider"

package/src/layout/Grid/Grid.tsx

@@ -1,75 +0,0 @@
-import cx from "classnames"
-
-export type GridColumns = 1 | 2 | 3 | 4 | 6 | 12
-export type GridGap = "none" | "sm" | "md" | "lg"
-
-export interface GridProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    columns?: GridColumns
-    columnsMd?: GridColumns
-    columnsLg?: GridColumns
-    gap?: GridGap
-    as?: "div" | "ul" | "ol"
-}
-
-export function Grid({
-    children,
-    className,
-    style,
-    columns = 1,
-    columnsMd,
-    columnsLg,
-    gap = "md",
-    as: Component = "div",
-}: GridProps) {
-    const classes = cx(
-        "bc-grid",
-        `bc-grid--cols-${columns}`,
-        `bc-grid--gap-${gap}`,
-        columnsMd && `bc-grid--cols-md-${columnsMd}`,
-        columnsLg && `bc-grid--cols-lg-${columnsLg}`,
-        className
-    )
-
-    return (
-        <Component className={classes} style={style}>
-            {children}
-        </Component>
-    )
-}
-
-export interface GridItemProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    span?: number
-    spanMd?: number
-    spanLg?: number
-}
-
-export function GridItem({
-    children,
-    className,
-    style,
-    span,
-    spanMd,
-    spanLg,
-}: GridItemProps) {
-    const classes = cx(
-        "bc-grid__item",
-        span && `bc-grid__item--span-${span}`,
-        spanMd && `bc-grid__item--span-md-${spanMd}`,
-        spanLg && `bc-grid__item--span-lg-${spanLg}`,
-        className
-    )
-
-    return (
-        <div className={classes} style={style}>
-            {children}
-        </div>
-    )
-}
-
-export default Grid

package/src/layout/Grid/index.ts

@@ -1,2 +0,0 @@
-export { Grid, GridItem, type GridProps, type GridItemProps, type GridColumns, type GridGap } from "./Grid"
-export { default } from "./Grid"