{"id":44508360,"url":"https://github.com/wallarm/design-system","last_synced_at":"2026-06-01T01:02:50.638Z","repository":{"id":335234234,"uuid":"1144799670","full_name":"wallarm/design-system","owner":"wallarm","description":"Wallarm Design System","archived":false,"fork":false,"pushed_at":"2026-05-19T15:57:02.000Z","size":15266,"stargazers_count":6,"open_issues_count":6,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-19T15:57:23.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wallarm.github.io/design-system/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wallarm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-29T04:04:18.000Z","updated_at":"2026-05-19T15:13:00.000Z","dependencies_parsed_at":"2026-04-16T20:05:08.178Z","dependency_job_id":null,"html_url":"https://github.com/wallarm/design-system","commit_stats":null,"previous_names":["wallarm/design-system"],"tags_count":290,"template":false,"template_full_name":null,"purl":"pkg:github/wallarm/design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallarm%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallarm%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallarm%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallarm%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wallarm","download_url":"https://codeload.github.com/wallarm/design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallarm%2Fdesign-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33500467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T14:31:05.219Z","status":"online","status_checked_at":"2026-05-26T02:00:06.821Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-13T12:20:08.092Z","updated_at":"2026-05-26T02:10:04.428Z","avatar_url":"https://github.com/wallarm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wallarm Design System\n\nA comprehensive design system and component library built with React, TypeScript, and modern web technologies. This monorepo includes a UI component library with Storybook documentation and a playground application for testing and demonstration.\n\n## 🚀 Quick Start\n\n### Install Dependencies\n\n```bash\npnpm install\n```\n\n### Development\n\n```bash\n# Start all applications\npnpm dev\n\n# Start Storybook\npnpm storybook\n\n# Start Design System dev server\npnpm design-system:dev\n```\n\n### Build\n\n```bash\n# Build all packages and applications\npnpm build\n\n# Build specific package\npnpm build --filter=@wallarm-org/design-system\n```\n\n### Testing\n\n```bash\n# Run all tests\npnpm test\n\n# E2E testing\npnpm e2e\n\n# E2E testing special component\npnpm e2e -- packages/design-system/src/components/Example/Example.e2e.ts\n\n# E2E in Docker (cross-platform)\npnpm e2e:docker\n\n# E2E in Docker special component\npnpm e2e:docker -- packages/design-system/src/components/Example/Example.e2e.ts\n\n# E2E in Docker update screenshots\npnpm e2e:docker:update\n\n# E2E in Docker update screenshots for special component\npnpm e2e:docker:update -- packages/design-system/src/components/Example/Example.e2e.ts\n```\n\n## 📁 Project Structure\n\n```\nwallarm-design-system/\n├── apps/\n│   └── playground/          # Playground application (Rsbuild + React)\n├── packages/\n│   ├── design-system/       # Core design system library\n│   └── configs/             # Shared configurations\n│       ├── eslint-config/   # ESLint configuration\n│       ├── playwright-config/ # Playwright test configuration\n│       ├── rsbuild-config/  # Rsbuild bundler configuration\n│       ├── tailwind-config/ # Tailwind CSS configuration\n│       ├── typescript-config/ # TypeScript configuration\n│       └── vitest-config/   # Vitest test configuration\n├── .github/                 # GitHub configuration\n│   ├── workflows/           # CI/CD pipelines\n│   └── PULL_REQUEST_TEMPLATE.md\n├── scripts/                 # Build and automation scripts\n└── .claude/                 # AI agents and automation\n```\n\n### Applications and Packages\n\n**Apps:**\n\n- `@wallarm-org/playground` - Playground application for testing and demonstrating components (Rsbuild + React + TypeScript)\n\n**Packages:**\n\n- `@wallarm-org/design-system` - Core design system library with React components and Storybook documentation\n- `@wallarm-org/eslint-config` - Shared ESLint configurations\n- `@wallarm-org/typescript-config` - Shared TypeScript configurations\n- `@wallarm-org/playwright-config` - Shared Playwright test configurations\n- `@wallarm-org/vitest-config` - Shared Vitest test configurations\n- `@wallarm-org/rsbuild-config` - Shared Rsbuild bundler configurations\n- `@wallarm-org/tailwind-config` - Shared Tailwind CSS configurations\n\n## 🛠 Tech Stack\n\n### Frontend\n\n- **React 19** - UI library\n- **TypeScript** - Type safety with strict mode\n- **Rsbuild** - Modern build tool based on Rspack\n- **Tailwind CSS v4** - Utility-first CSS framework\n- **Ark UI** - Headless component primitives\n- **DnD Kit** for drag and drop behavior\n- **TanStack Table** for table layouts\n- **TanStack Virtual** for virtualization\n\n### Development\n\n- **Turborepo** - High-performance monorepo build system\n- **pnpm** - Fast, disk space efficient package manager\n- **Storybook v10** - Component documentation and development\n- **Vitest** - Fast unit testing framework\n- **Playwright** - Cross-browser E2E testing\n- **ESLint + Prettier** - Code quality and formatting\n- **Husky** - Git hooks for code quality\n- **Figma Code Connect** - Design-to-code synchronization\n\n### CI/CD\n\n- **GitHub Actions** - Automated CI/CD pipelines\n- **Docker** - Containerization with multi-stage builds\n- **Docker Compose** - Local development environment\n- **GitHub Container Registry** - Docker image storage\n- **GitHub Pages** - Static hosting for Storybook documentation\n\n## 🤖 AI Automation\n\nThe project features an advanced AI agent system for development automation:\n\n### Commands\n\n```bash\n# Update screenshots via commit\ngit commit -m \"fix: button styles [update-screenshots]\"\n\n# Skip E2E tests via commit\ngit commit -m \"docs: update readme [skip-e2e]\"\n\n# AI assistants available via triggers:\n/design-system component Card    # Design System component\n/test e2e checkout               # E2E tests\n/ci workflow deploy              # CI/CD workflow\n```\n\n## 📚 Documentation\n\n- **[CLAUDE.md](./CLAUDE.md)** - AI assistant instructions\n- **[AGENTS.md](./AGENTS.md)** - Agent system and routing\n- **[.claude/agents/](./.claude/agents/)** - Specialized AI agents\n- **[CI_PLAN.md](./CI_PLAN.md)** - CI/CD infrastructure plan\n- **[VERSIONING.md](./VERSIONING.md)** - Versioning strategy and release process\n\n## 🔧 Useful Commands\n\n### Development\n\n```bash\npnpm dev              # Start all applications\npnpm storybook        # Design system Storybook\npnpm design-system:dev # Design system dev server\n```\n\n### Testing\n\n```bash\npnpm test             # Unit tests\npnpm test:coverage    # With coverage\npnpm e2e              # E2E locally\npnpm e2e:docker       # E2E in Docker\npnpm e2e:ui           # E2E with UI\n```\n\n### Build\n\n```bash\npnpm build            # Build all packages\npnpm build:configs    # Build configuration packages\npnpm storybook        # Run Storybook development server\n```\n\n### Code Quality\n\n```bash\npnpm lint             # ESLint check\npnpm lint:fix         # ESLint auto-fix\npnpm format           # Prettier formatting\npnpm typecheck        # TypeScript type checking\n```\n\n### Versioning \u0026 Release\n\n```bash\npnpm commit           # Create a conventional commit (interactive)\npnpm changeset        # Create a changeset for version bump\npnpm version          # Update package versions\npnpm release          # Publish packages to NPM (CI only)\n```\n\n## 🐳 Docker\n\n### Local Development\n\n```bash\n# E2E tests in Docker\npnpm e2e:docker\n\n# Screenshot updates\npnpm e2e:docker:update\n```\n\n### Production\n\n```bash\n# Using docker-compose for local development\ndocker-compose -f docker-compose.local.yml up\n\n# Build individual images\ndocker build -f packages/design-system/Dockerfile -t wallarm-design-system .\ndocker build -f apps/playground/Dockerfile -t wallarm-playground .\n```\n\n## 🚦 CI/CD Pipeline\n\nComprehensive GitHub Actions pipeline with multiple stages:\n\n### Pipeline Jobs\n\n1. **PR Title Check** - Validates PR titles follow conventional commits\n2. **Setup \u0026 Dependencies** - Node.js setup, dependency caching, screenshot update detection\n3. **Quality Checks** - Parallel execution of lint, typecheck, and unit tests\n4. **Build** - Docker image building for Storybook\n5. **E2E Tests** - Cross-browser testing (Chromium) for Storybook components\n6. **Screenshot Updates** - Automated screenshot updates on main branch with `[update-screenshots]` commit flag\n7. **Deploy** - Production deployment:\n   - **deploy-storybook** - Deploys Storybook documentation to GitHub Pages\n\n### Features\n\n- **Parallel Execution** - Quality checks and E2E tests run in parallel\n- **Sharded Testing** - E2E tests split into 3 shards for faster execution\n- **Smart Caching** - Dependencies cached across all workflow runs\n- **Docker Integration** - Storybook runs in container for consistent E2E testing\n- **Auto Screenshot Updates** - Commit with `[update-screenshots]` to update visual snapshots\n- **E2E Skip Trigger** - Commit with `[skip-e2e]` to skip E2E tests when needed\n- **E2E Optimization** - Skips E2E tests for bot screenshot commits\n- **Container Registry**:\n  - Build stage: `ghcr.io/wallarm/design-system`\n  - Storybook Documentation: GitHub Pages at `https://wallarm.github.io/wallarm-design-system/`\n\n### Environment\n\n- **Node.js**: v24+\n- **pnpm**: v10.33.2\n- **Playwright**: v1.58.0\n\n## 🤝 Contributing\n\n1. Clone the repository\n2. Install dependencies: `pnpm install`\n3. Create feature branch: `git checkout -b feature/amazing-feature`\n4. Follow code conventions (ESLint + Prettier)\n5. Add tests for new functionality\n6. Create Pull Request\n\n### Commit Conventions\n\n```bash\nfeat: add new feature\nfix: fix bug\ndocs: update documentation\ntest: add tests\nrefactor: refactor code\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwallarm%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwallarm%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwallarm%2Fdesign-system/lists"}