{"id":32892761,"url":"https://github.com/govalta/goa-workspace-playground","last_synced_at":"2026-06-20T12:34:02.943Z","repository":{"id":322530039,"uuid":"1072562133","full_name":"GovAlta/goa-workspace-playground","owner":"GovAlta","description":"A demo about our Workspace 2.0 Evolution ","archived":false,"fork":false,"pushed_at":"2026-05-22T19:07:41.000Z","size":216,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T22:26:21.106Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://govalta.github.io/goa-workspace-playground/","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/GovAlta.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":null,"dco":null,"cla":null}},"created_at":"2025-10-08T22:36:23.000Z","updated_at":"2026-04-01T14:42:03.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/GovAlta/goa-workspace-playground","commit_stats":null,"previous_names":["govalta/goa-workspace-playground"],"tags_count":0,"template":true,"template_full_name":"GovAlta/ui-components-react-template","purl":"pkg:github/GovAlta/goa-workspace-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovAlta%2Fgoa-workspace-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovAlta%2Fgoa-workspace-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovAlta%2Fgoa-workspace-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovAlta%2Fgoa-workspace-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GovAlta","download_url":"https://codeload.github.com/GovAlta/goa-workspace-playground/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovAlta%2Fgoa-workspace-playground/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34570537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"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":"2025-11-10T05:06:25.932Z","updated_at":"2026-06-20T12:34:02.938Z","avatar_url":"https://github.com/GovAlta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workspace Template (DS 2.0)\n\nA template for building Alberta government **workspace applications** using the GoA Design System 2.0. This template provides a starting point for internal staff-facing applications with common patterns and components already implemented.\n\n## Tech Stack\n\n- **React** 18.2 with TypeScript 5.3\n- **Vite** 5.1 for fast development and builds\n- **React Router** 6.22 for routing\n- **GoA Design System 2.0** (`@abgov/react-components`, `@abgov/web-components`)\n- **Vitest** for testing\n\n## Features\n\n- **Work Side Menu** - Responsive sidebar navigation with primary, secondary, and account sections\n- **Dynamic page headers** - Sticky headers with title and action buttons\n- **Data tables** - Sorting, filtering, keyboard navigation, and horizontal scroll shadows\n- **Notification system** - Popover notifications with localStorage persistence\n- **Loading states** - Progress indicators for async operations\n- **Error boundary** - Graceful error handling with fallback UI\n- **Mock API utilities** - Simulate network requests for development\n\n## Project Structure\n\n```\nsrc/\n├── components/          # Reusable UI components\n│   ├── ErrorBoundary.tsx\n│   ├── PageHeader.tsx\n│   └── ScrollContainer.tsx\n├── constants/           # Shared constants\n│   └── breakpoints.ts\n├── contexts/            # React Context providers\n│   ├── MenuContext.tsx\n│   ├── NotificationContext.tsx\n│   └── PageHeaderContext.tsx\n├── data/                # Mock data\n│   ├── mockClients.json\n│   ├── mockNotifications.ts\n│   └── mockSearchResults.json\n├── routes/              # Page components\n│   ├── ClientsPage.tsx\n│   ├── SearchPage.tsx\n│   └── ...\n├── types/               # TypeScript interfaces\n│   ├── Client.ts\n│   ├── Notification.ts\n│   └── SearchResult.ts\n├── utils/               # Helper functions\n│   ├── badgeUtils.ts\n│   ├── dateUtils.ts\n│   ├── mockApi.ts\n│   └── searchUtils.ts\n├── App.tsx              # Root layout\n├── App.css              # Global styles\n└── index.tsx            # Entry point\n```\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- npm 9+\n\n### Installation\n\n1. Click the green **Use this template** button\n2. Select **Create a new repository**\n3. Select an owner and give the repo a suitable name\n4. Clone the repo onto your machine\n5. Install dependencies:\n\n```bash\nnpm install\n```\n\n### Development\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser.\n\n### Available Scripts\n\n| Script                | Description              |\n| --------------------- | ------------------------ |\n| `npm run dev`         | Start development server |\n| `npm run build`       | Build for production     |\n| `npm run build:check` | Type-check and build     |\n| `npm run preview`     | Preview production build |\n| `npm run test`        | Run tests                |\n| `npm run coverage`    | Run tests with coverage  |\n\n## Key Patterns\n\n### Loading States\n\nUse the `mockFetch` utility to simulate API calls with loading states:\n\n```tsx\nimport { mockFetch } from \"../utils/mockApi\";\n\nconst [data, setData] = useState([]);\nconst [isLoading, setIsLoading] = useState(true);\n\nuseEffect(() =\u003e {\n  const fetchData = async () =\u003e {\n    setIsLoading(true);\n    const result = await mockFetch(mockData);\n    setData(result);\n    setIsLoading(false);\n  };\n  fetchData();\n}, []);\n\n// In JSX:\n\u003cGoabCircularProgress visible={isLoading} variant=\"fullscreen\" message=\"Loading...\" /\u003e;\n```\n\n### Page Headers\n\nUse the `usePageHeader` hook to set dynamic page titles and actions:\n\n```tsx\nimport { usePageHeader } from \"../contexts/PageHeaderContext\";\n\nusePageHeader(\"Page Title\", \u003cGoabButton\u003eAction\u003c/GoabButton\u003e);\n```\n\n### Error Handling\n\nThe app is wrapped in an `ErrorBoundary` component that catches errors and displays a fallback UI.\n\n## Customization\n\n### Styling\n\n- Global styles are in `src/App.css`\n- GoA Design System tokens are imported via `@abgov/web-components/index.css`\n- Mobile breakpoint is set at 624px (defined in `src/constants/breakpoints.ts`)\n\n### Adding New Pages\n\n1. Create a new component in `src/routes/`\n2. Add the route in `src/index.tsx`\n3. Add a menu item in `src/App.tsx`\n\n## Resources\n\n- [GoA Design System 2.0](https://design.alberta.ca)\n- [UI Components Documentation](https://design.alberta.ca)\n\n## License\n\nThis template is provided by the Government of Alberta for use by Alberta government teams building internal workspace applications.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgovalta%2Fgoa-workspace-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgovalta%2Fgoa-workspace-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgovalta%2Fgoa-workspace-playground/lists"}