Erin M Young UI

A modern React component library built with Storybook, TypeScript, styled-components, and Framer Motion.

✨ Features

• 🎨 Theming: Built-in light/dark mode support with customizable themes
• 🚀 Modern Stack: React 19, TypeScript 5.8, Storybook 9, Vite 7
• 📱 Responsive: Mobile-first design approach
• 🎭 Animations: Smooth animations powered by Framer Motion
• 📚 Documented: Interactive Storybook documentation
• 🧪 Tested: Comprehensive test coverage with Vitest
• 🎯 Accessible: Built with accessibility in mind

📦 Installation

npm install @erinmyoung/erinmyoung-ui styled-components framer-motion
# or
yarn add @erinmyoung/erinmyoung-ui styled-components framer-motion
# or
pnpm add @erinmyoung/erinmyoung-ui styled-components framer-motion

Note: styled-components and framer-motion are peer dependencies and must be installed separately.

🚀 Quick Start

import { Button, portfolioLight } from "@erinmyoung/erinmyoung-ui";
import { ThemeProvider } from "styled-components";

function App() {
  return (
    <ThemeProvider theme={portfolioLight}>
      <Button
        text="Hello World"
        size="medium"
        onClick={() => alert("Clicked!")}
      />
    </ThemeProvider>
  );
}

🎨 Components

Button

Interactive button component with multiple sizes and hover effects.

import { Button } from "@erinmyoung/erinmyoung-ui";

<Button text="Click me" size="large" onClick={() => console.log("Clicked!")} />;

Arrow

Directional arrow button for navigation.

import { Arrow } from "@erinmyoung/erinmyoung-ui";

<Arrow $orientation="right" onClick={() => navigate("/next")} />;

Exit

Close/exit button component.

import { Exit } from "@erinmyoung/erinmyoung-ui";

<Exit onClick={() => closeModal()} />;

Icon

Versatile icon component with accessibility features and contrast checking.

import { Icon } from "@erinmyoung/erinmyoung-ui";

<Icon
  src="/path/to/icon.svg"
  alt="Settings icon"
  backgroundColor="#ffffff"
  size="medium"
/>;

ImageWithBackground

Image component with background color support and responsive behavior.

import { ImageWithBackground } from "@erinmyoung/erinmyoung-ui";

<ImageWithBackground
  src="/path/to/image.jpg"
  alt="Product image"
  backgroundColor="#f5f5f5"
  size="large"
/>;

List

Flexible list component for displaying items with consistent styling.

import { List } from "@erinmyoung/erinmyoung-ui";

<List
  items={["Item 1", "Item 2", "Item 3"]}
  orientation="vertical"
  size="medium"
/>;

ScrollProgress

Flexible scroll progress indicator that works with both window scroll and container-based scrolling. When a $container ref is provided, it tracks that container's scroll progress; otherwise, it defaults to window scroll.

Container-based scrolling:

import { ScrollProgress } from "@erinmyoung/erinmyoung-ui";
import { useRef } from "react";

function ScrollableContent() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} style={{ height: "400px", overflowY: "auto" }}>
      {/* Your content */}
      <ScrollProgress
        $container={containerRef}
        size={80}
        $right="2rem"
        $bottom="2rem"
      />
    </div>
  );
}

Window-based scrolling:

import { ScrollProgress } from "@erinmyoung/erinmyoung-ui";

function App() {
  return (
    <div>
      {/* Your page content */}
      <ScrollProgress size={80} $right="2rem" $bottom="2rem" />
    </div>
  );
}

SectionTitle

Decorative section title with custom graphics.

import { SectionTitle } from "@erinmyoung/erinmyoung-ui";

<SectionTitle text="Welcome Section" size="large" $fillBgColor={true} />;

Spinner

Loading spinner component with theme-based sizing options.

import { Spinner } from "@erinmyoung/erinmyoung-ui";

<Spinner size="medium" />;

## 🎨 Theming

### Built-in Themes

```tsx
import {
  portfolioLight,
  portfolioDark,
  storeLight,
  storeDark,
} from "@erinmyoung/erinmyoung-ui";

Custom Themes

import type { Theme } from "@erinmyoung/erinmyoung-ui";

const customTheme: Theme = {
  mode: "light",
  colors: {
    background: "#ffffff",
    text: "#333333",
    accent: "#f0f0f0",
    border: "#cccccc",
    shadow: "#cccccc",
    titleLines: "#999999",
    circle: "#666666",
    motionCircle: "#333333",
  },
};

🛠️ Development

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Setup

# Clone the repository
git clone https://github.com/erinmyoung/erinmyoung-ui.git
cd erinmyoung-ui

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Run tests
npm test

# Build the library
npm run build

Available Scripts

• npm run dev - Start Vite dev server
• npm run build - Build the library
• npm run test - Run tests
• npm run test-watch - Run tests in watch mode
• npm run storybook - Start Storybook
• npm run lint - Lint code
• npm run format - Format code with Prettier

📚 Documentation

Visit Storybook for interactive component documentation and examples.

🧪 Testing

The library includes comprehensive tests using Vitest and Testing Library:

npm test                 # Run all tests
npm run test-watch      # Watch mode
npm run test:ui         # UI mode

📄 License

MIT © Erin Young

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

🔗 Links

• Documentation (Storybook)
• GitHub Repository
• NPM Package
• Issues
• Changelog