{"id":22508237,"url":"https://github.com/Altinn/dialogporten-frontend","last_synced_at":"2025-08-03T13:30:54.630Z","repository":{"id":191788757,"uuid":"639368395","full_name":"digdir/dialogporten-frontend","owner":"digdir","description":"Brukergrensesnitt for Dialogporten","archived":false,"fork":false,"pushed_at":"2024-10-29T17:32:11.000Z","size":3217,"stargazers_count":4,"open_issues_count":170,"forks_count":1,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-10-29T18:56:09.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://digdir.github.io/dialogporten-frontend/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digdir.png","metadata":{"files":{"readme":"Readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-11T10:28:38.000Z","updated_at":"2024-10-28T14:12:27.000Z","dependencies_parsed_at":"2024-01-16T01:48:38.813Z","dependency_job_id":"e2566900-fdba-4da2-a4dd-ff57c84bf206","html_url":"https://github.com/digdir/dialogporten-frontend","commit_stats":null,"previous_names":["digdir/dialogporten-frontend-react","digdir/dialogporten-frontend"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdialogporten-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdialogporten-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdialogporten-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdialogporten-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digdir","download_url":"https://codeload.github.com/digdir/dialogporten-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228545146,"owners_count":17934700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-12-07T01:18:54.949Z","updated_at":"2025-08-03T13:30:54.619Z","avatar_url":"https://github.com/digdir.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dialogporten frontend\n\n## Developer setup\n\nTool | Description\n-----|------------\n[fnm](https://github.com/Schniz/fnm) | Fnm is used to automatically get the correct version of Node in the project\nDocker | We recommend to use OrbStack if you're using Mac for development, on Linux you can install Docker directly.\npnpm | Package manager used in this project\nfzf | Fuzzy finder used in some scripts\n\n\n### macOS\n\nOn macOS using [Homebrew](https://brew.sh/) you can install dependencies by running:\n\n```bash\nbrew install fnm pnpm fzf\nbrew install --cask OrbStack\ncorepack enable\ncorepack prepare -activate\n```\n\n### Windows\n\nOn Windows using [Chocolatey](https://chocolatey.org/) you can install dependencies by running:\n\n```bash\nchoco install -y fnm pnpm fzf docker-desktop\n```\n\n## Running Docker locally\n\nFirst you'll need to setup an `.env` file:\n\n### env\nEnsure that `./.env` (in root) is created with following keys and appropriate values (**Note**: replace the examples)\n```\nCLIENT_ID=\u003cmy_example_service\u003e\nCLIENT_SECRET=\u003csecret_password_keep_this_private\u003e\n```\n\n## Docker\n\nRunning Docker in watch mode:\n\n```bash\nmake pull (optional)\nmake dev\n```\n\n## Playwright Testing Guidelines\n\nThis describes how to work with Playwright tests in `/packages/frontend`.\n\n## Installation\n\nAfter installing project dependencies, ensure Playwright browsers are installed:\n\n```bash\npnpm install:browsers\n```\n\n## Running Tests\n\nRun all tests:\n\n```bash\npnpm test:playwright\n```\n\nRun code test generator (use app.localhost/?mock=true to access mock data):\n\n```bash\npnpm codegen:playwright\n```\n\n### Common Flags\n\n| Flag        | Description                                   |\n|-------------|-----------------------------------------------|\n| `--debug`   | Runs tests in debug mode.                     |\n| `--ui`      | Opens Playwright’s test runner UI.            |\n| `--headed`  | Runs tests with a visible browser window.     |\n\nExample:\n\n```bash\npnpm test:playwright --debug\n```\n\n### Running a Single Test\n\n```bash\npnpm test:playwright -g 'myStory.spec.ts'\n```\n\n## Mock Data\n\nMock data is located under `src/mocks/data`.\n\n- **Base:** Default dataset\n- **Stories:** Specific datasets used via `playwrightId`\n\nTo run the app with mocks:\n\n```\nhttp://app.localhost/?mock=true\n```\n\nTo specify a dataset:\n\n```\nhttp://app.localhost/?mock=true\u0026playwrightId=\u003cfolder-name\u003e\n```\n\n## Mobile Testing\n\nRun tests using a mobile viewport (iPhone 13):\n\n```bash\npnpm test:playwright:mobile\n```\n\nThe same test files are reused for mobile and desktop. Conditional logic within tests can detect the viewport.\n\n## Accessibility Tests\n\nRun accessibility tests:\n\n```bash\npnpm test:accessibility\n```\n\nAccessibility logic resides in `axe.test.ts`. You can reuse `createHtmlReport` for reporting.\n\n## File Structure\n\n- Tests: `packages/frontend/tests`\n- Playwright config: `packages/frontend/playwright.config.ts`\n\n\n## Documentation\n\nOur project documentation is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. The documentation is located in the `packages/docs/` directory.\n\n### Documentation Structure\n\n```\npackages/docs/docs/\n├── architecture/    # System architecture documentation\n├── deployment/      # Deployment processes and configurations\n├── development/     # Development guidelines and setup\n└── notes/          # Additional project notes and business rules\n```\n\n### Contributing to Documentation\n\n1. **Location**: All documentation files are in the `packages/docs/docs/` directory\n2. **Format**: Documentation is written in MDX format (`.mdx` files), which supports Markdown with React components\n3. **Diagrams**: We use [tldraw](https://www.tldraw.com/) for creating diagrams\n   - Save diagram source files as `.tldr` format\n   - Export diagrams as `.svg` files\n   - Always keep both `.tldr` and `.svg` files together in the same directory\n\n### Running Documentation Locally\n\n```bash\n# Using pnpm\npnpm --filter docs run dev\n\n# Using Docker\npnpm --filter docs run build:docker\npnpm --filter docs run run:docker\n```\n\nThe documentation will be available at:\n- Local development: http://localhost:3000\n- Docker: http://localhost:8080\n\n### Documentation Guidelines\n\n1. **File Organization**:\n   - Place new documentation in the appropriate subdirectory\n   - Use clear, descriptive filenames\n   - Include a frontmatter section in MDX files with title and sidebar position\n\n2. **Diagrams**:\n   - Create diagrams using tldraw\n   - Save both `.tldr` and `.svg` versions\n   - Place diagrams in the same directory as the documentation they support\n\n3. **Content Structure**:\n   - Use clear headings and subheadings\n   - Include code examples where relevant\n   - Add links to related documentation\n   - Keep content up to date with code changes\n\n4. **Search Optimization**:\n   - Use descriptive titles and headings\n   - Include relevant keywords naturally in the content\n   - Add appropriate tags in frontmatter when applicable\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAltinn%2Fdialogporten-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAltinn%2Fdialogporten-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAltinn%2Fdialogporten-frontend/lists"}