包详细信息

@gtalumni-la/react

gtalumni-la124MIT0.1.2

React - Georgia Tech Alumni Association React UI Components

buzz, react, components, ui

自述文件

Georgia Tech Design System

An atomic design system for the Georgia Tech community, providing a consistent and cohesive user experience across digital products.

⚠️ Alpha Release: These packages are currently in active development and not ready for production use. Breaking changes may occur between versions until we reach v1.0.0.

npm version npm version License: MIT Documentation

Built with pnpm workspaces and Turborepo for the Georgia Tech Alumni community.

🏗️ Project Structure

This monorepo contains:

  • packages/tokens: Tokens - Style Dictionary configuration that generates design tokens for Georgia Tech brand guidelines
  • packages/react: React - React component library that uses the design tokens

📦 Published Packages

⚠️ Alpha Packages: Install at your own risk. These packages are under active development.

GT Tokens

npm install @gtalumni-la/tokens

GT React Components

npm install @gtalumni-la/react

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • pnpm 8+

Installation

# Install dependencies
pnpm install

# Build all packages
pnpm build

Development

# Start development mode for all packages
pnpm dev

# Build all packages
pnpm build

# Lint all packages
pnpm lint

# Run type checking
pnpm type-check

📦 Packages

Tokens (@gtalumni-la/tokens)

Generates design tokens based on Georgia Tech brand guidelines using Style Dictionary.

Available formats:

  • CSS custom properties (dist/css/variables.css)
  • SCSS variables (dist/scss/_variables.scss)
  • JavaScript/TypeScript tokens (dist/js/tokens.js, dist/ts/tokens.ts)
  • JSON (dist/json/tokens.json)

Usage:

# For design tokens development
cd packages/tokens
pnpm dev

React (@gtalumni-la/react)

React component library following Georgia Tech design guidelines.

Usage:

cd packages/react
pnpm build  # Build components
pnpm dev    # Watch mode

📚 Documentation

Complete documentation and component playground:

  • 📖 Documentation Website: GT Design System Docs - Getting Started Guide, API Docs, Design Tokens
  • 🎮 Component Playground: Interactive Storybook - Live examples and component testing
  • 🌐 Live Docs: Available on GitHub Pages with automatic deployment

Local Development

# Start documentation site
pnpm docs:dev       # http://localhost:5173/gt-design-system/

# Start component playground
pnpm storybook      # http://localhost:6006

# Build all documentation
pnpm docs:build && pnpm storybook:build

🎨 Design Guidelines

This project follows the Georgia Tech Brand Guidelines.

Colors

  • Primary: Tech Gold (#B3A369), Tech Navy (#003057)
  • Secondary: Blue (#0F446C), Light Gold (#EAAA00), Dark Gold (#857437)
  • Semantic: Success, Warning, Error, Info states

Typography

  • Headings: Roboto Slab
  • Body: Source Sans Pro
  • Code: Roboto Mono

🛠️ Development

This project uses:

  • pnpm workspaces for package management
  • Turborepo for build orchestration and caching
  • Style Dictionary for design token generation
  • TypeScript for type safety across all packages
  • React for UI components

TypeScript Configuration

The project uses a comprehensive TypeScript setup:

  • Root tsconfig.json: Base configuration with project references
  • Package-specific configs: Each package extends the root config
  • Path mapping: Import packages using @gatech/gt-tokens and @gatech/ui-components
  • Strict type checking: All packages use strict TypeScript settings
  • Composite builds: Enables incremental compilation across packages

Type Safety Features

  • Design Token Types: Strongly typed design tokens with proper interfaces
  • Component Props: All React components have comprehensive TypeScript interfaces
  • Utility Types: Helper types for theme modes, sizes, and component states
  • Build-time Validation: TypeScript checking integrated into build process
// Example: Using typed design tokens
import { GT_COLORS, getGTColor, type GTColorKey } from '@gtalumni-la/tokens';

const primaryColor: string = getGTColor('TECH_GOLD');

📋 Publishing

Automated Publishing

This project uses Changesets for version management and automated publishing:

# Add a changeset
pnpm changeset

# Version packages
pnpm version-packages

# Publish to npm
pnpm publish-packages

Manual Publishing

# Build all packages
pnpm build

# Publish design tokens
cd packages/gt-tokens
npm publish --access public

# Publish UI components
cd packages/gt-react
npm publish --access public

GitHub Actions (Recommended)

Set up GitHub Actions for automated publishing:

  1. Add NPM_TOKEN secret to GitHub repository
  2. Configure workflow to publish on release tags
  3. Use Changesets bot for automated PR releases

🔗 Links

📝 License

MIT License - see LICENSE file for details.