electron-rare/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: electron-rare/docs:new-ui/new-doc-header
Branches Tags
electron-rare/docs:main electron-rare/docs:improve-indexing-command electron-rare/docs:e2e/test-on-instance electron-rare/docs:renovate/pypi-requests-vulnerability electron-rare/docs:fix/revelant-pages-titles electron-rare/docs:feat/e2ee-without-e2esdk electron-rare/docs:i18n/add-languages-greek electron-rare/docs:fix/docs-grid-aria-list-pattrn electron-rare/docs:gh-pages electron-rare/docs:config/increase-memory-nodejs electron-rare/docs:fix/html-export-empty-heading electron-rare/docs:fix/docs-grid-aria-list-pattern electron-rare/docs:fix/error-page-translation electron-rare/docs:fix/voice-over-rejected electron-rare/docs:sbl-create-doc-accesses-before-content electron-rare/docs:sbl-fix-delete-document-request-conflict electron-rare/docs:fix/separator-keyboard-interact electron-rare/docs:sbl-search-public-docs electron-rare/docs:fix-search-not-authenticated electron-rare/docs:fix/search-modal-a11y electron-rare/docs:refacto/sub-docs-search electron-rare/docs:fix/shortcuts-vocalized electron-rare/docs:search-feature-flags-2 electron-rare/docs:helm-psycopg-pool electron-rare/docs:renovate/pypi-pyjwt-vulnerability electron-rare/docs:fix/search-modal-name electron-rare/docs:CI/improve-workflow-docker-publish electron-rare/docs:fix/cve-minimatch electron-rare/docs:search-feature-flags-c electron-rare/docs:change/rustfs electron-rare/docs:add/clean-command electron-rare/docs:sbl/user-reconciliation electron-rare/docs:feat/e2ee electron-rare/docs:fix/a11y-modal-focus-and-tree-actions electron-rare/docs:refacto/blocknote-ai electron-rare/docs:fix/access-docs-focus electron-rare/docs:sbl-proximity-search-fix electron-rare/docs:fix/modal-save-firefox electron-rare/docs:feature/docx-import-remastered electron-rare/docs:feature/doc-import.backup electron-rare/docs:responsive/formatting-toolbar-fixed electron-rare/docs:sbl-publiccode-fix electron-rare/docs:fix/tables-deletion electron-rare/docs:fix/a11y-axe-contrast-errors electron-rare/docs:feat/e2e-export-reference-pdf electron-rare/docs:renovate/min-age electron-rare/docs:pr/renovate/1596 electron-rare/docs:ui/fulltext-search electron-rare/docs:feature/doc-import-helm electron-rare/docs:feature/overwrite-docs electron-rare/docs:endpoint-new electron-rare/docs:fix/CI-space-left electron-rare/docs:indexer/markdown_content electron-rare/docs:index-to-search-batch-task electron-rare/docs:feature/custom-frontend-components electron-rare/docs:index-to-search-documentation electron-rare/docs:documentation/export-templates electron-rare/docs:release/3.8.21 electron-rare/docs:release/3.8.2 electron-rare/docs:feat/static-certificate-path electron-rare/docs:fix/1221-emoji-dropdown-idx electron-rare/docs:index-to-search-compose electron-rare/docs:index-to-search-nosignal electron-rare/docs:pr/dakshesh14/1293 electron-rare/docs:fix/accessibility-focus-options-menu electron-rare/docs:fix/tree-keyboard-expand-children electron-rare/docs:fix/duplicate-sub-page-read-access electron-rare/docs:improve-contributing-md electron-rare/docs:fix/1160-sub-doc-access electron-rare/docs:feat/comments electron-rare/docs:packages/common-package electron-rare/docs:anct electron-rare/docs:fix/1136-heading-order electron-rare/docs:feat/leave-doc electron-rare/docs:feat/add-duplicate-action-tree electron-rare/docs:feature/doc-dnd-save electron-rare/docs:fix-link_reach_role_and_add_ancestors_info electron-rare/docs:feat/no-websocket electron-rare/docs:pr/Comete99/1036 electron-rare/docs:hack2025/tldraw electron-rare/docs:hack2025/fix-custom-block electron-rare/docs:do-not-merge/hackathon-2025 electron-rare/docs:hack2025/add-endpoint-content electron-rare/docs:buildpack electron-rare/docs:track-posthog electron-rare/docs:poc-silent-login electron-rare/docs:feat/file-status-check electron-rare/docs:fix/docker-vulnerability electron-rare/docs:qbey/add-resource-server-mode electron-rare/docs:pr/Zorin95670/949 electron-rare/docs:fix/typo-correction electron-rare/docs:documentation-env-fixes electron-rare/docs:rename-documentation-folder electron-rare/docs:make-title-search-case-insensitive electron-rare/docs:documentation/signing-commit electron-rare/docs:fix/owner-access-check electron-rare/docs:poc/install-front-excluding-agpl electron-rare/docs:feature/cursor_rules electron-rare/docs:fix/782-ai-feature-flag electron-rare/docs:release/v2.7.0 electron-rare/docs:feature/doc-dnd-with-react-query electron-rare/docs:changelog-in-releases electron-rare/docs:qbey/oidc-token-storage-and-refresh electron-rare/docs:feature/add-page-tree electron-rare/docs:media-security electron-rare/docs:accessibility-clean electron-rare/docs:fix/create-doc-race-test electron-rare/docs:readme-update electron-rare/docs:feature/collab-long-polling electron-rare/docs:accessibility electron-rare/docs:hackathon/11-02 electron-rare/docs:test/other-type-cursor electron-rare/docs:feature/blocknote-ai electron-rare/docs:issue/improve-export-spacings electron-rare/docs:pr/AntoLC/611 electron-rare/docs:feature/custom-blocks electron-rare/docs:feautre/new-home electron-rare/docs:compose-production electron-rare/docs:feature/editor-multi-columns electron-rare/docs:bug/fix-flacky-test electron-rare/docs:feature/add-new-home electron-rare/docs:fix-warning electron-rare/docs:helm/production-example electron-rare/docs:fix/create-demo-unflushed electron-rare/docs:use-internal-llm electron-rare/docs:new-ui/fix-ui electron-rare/docs:new-ui/invitation-modal-invite electron-rare/docs:feature/crisp-integration electron-rare/docs:new-ui/new-doc-header electron-rare/docs:add-favorite-documents electron-rare/docs:new-ui/doclist electron-rare/docs:feature/add-sentry electron-rare/docs:new-ui/new-layout electron-rare/docs:helm/demo-dev electron-rare/docs:main-opendesk electron-rare/docs:feature/add-alert-block electron-rare/docs:feature/localization electron-rare/docs:converter electron-rare/docs:docs-ia-env electron-rare/docs:install-p-py electron-rare/docs:feature/text-to-yjsbase64 electron-rare/docs:sccon electron-rare/docs:feature/back-read-yjs-doc electron-rare/docs:feature/ai-blocknote-back electron-rare/docs:feat/opendesk-theme electron-rare/docs:e2e-hackathon-2024 electron-rare/docs:e2ee-hackathon-2024 electron-rare/docs:add-is-e2ee-flag electron-rare/docs:feature/public-editable
electron-rare/docs:v4.8.4-preprod electron-rare/docs:v4.8.4 electron-rare/docs:v4.8.3 electron-rare/docs:v4.8.3-preprod electron-rare/docs:v4.8.2-preprod electron-rare/docs:v4.8.2 electron-rare/docs:v4.8.1-preprod electron-rare/docs:v4.8.1 electron-rare/docs:v4.8.0-psycopgpool electron-rare/docs:v4.8.0-preprod electron-rare/docs:v4.8.0 electron-rare/docs:v4.7.0-preprod electron-rare/docs:v4.7.0 electron-rare/docs:v4.6.0 electron-rare/docs:v4.6.0-preprod electron-rare/docs:v4.5.0-preprod electron-rare/docs:v4.5.0 electron-rare/docs:v4.4.0-preprod electron-rare/docs:v4.4.0 electron-rare/docs:v4.3.0-preprod electron-rare/docs:v4.3.0 electron-rare/docs:v4.2.0-preprod electron-rare/docs:v4.2.0 electron-rare/docs:v4.1.0-preprod electron-rare/docs:v4.1.0 electron-rare/docs:v4.0.0-preprod electron-rare/docs:v4.0.0 electron-rare/docs:v3.10.0-preprod electron-rare/docs:v3.10.0 electron-rare/docs:v3.9.0-preprod electron-rare/docs:v3.9.0 electron-rare/docs:v3.8.21 electron-rare/docs:v3.8.21-preprod electron-rare/docs:v3.8.2-preprod electron-rare/docs:v3.8.2 electron-rare/docs:v3.8.1-preprod electron-rare/docs:v3.8.1 electron-rare/docs:v3.8.0-preprod electron-rare/docs:v3.8.0 electron-rare/docs:v3.7.0-preprod electron-rare/docs:v3.7.0 electron-rare/docs:v3.6.0 electron-rare/docs:v3.6.0-preprod electron-rare/docs:v3.5.0-preprod electron-rare/docs:v3.5.0 electron-rare/docs:v3.4.2-preprod electron-rare/docs:v.3.4.2 electron-rare/docs:v3.4.2 electron-rare/docs:v3.4.1-preprod electron-rare/docs:v3.4.1 electron-rare/docs:v3.4.0 electron-rare/docs:v3.4.0-preprod electron-rare/docs:v3.3.0-preprod electron-rare/docs:v3.3.0 electron-rare/docs:v3.2.1 electron-rare/docs:v3.2.1-preprod electron-rare/docs:v3.2.0-preprod electron-rare/docs:v3.2.0 electron-rare/docs:v3.1.0 electron-rare/docs:v3.1.0-preprod electron-rare/docs:v3.0.0 electron-rare/docs:v3.0.0-preprod electron-rare/docs:v2.7.0-preprod electron-rare/docs:v2.6.0 electron-rare/docs:v2.6.0-preprod electron-rare/docs:v2.5.0 electron-rare/docs:v2.5.0-preprod electron-rare/docs:v2.4.0 electron-rare/docs:v2.4.0-preprod electron-rare/docs:v2.3.0 electron-rare/docs:v2.3.0-preprod electron-rare/docs:v2.2.0 electron-rare/docs:v2.2.0-preprod electron-rare/docs:v2.1.0 electron-rare/docs:v2.1.0-preprod electron-rare/docs:v2.0.1 electron-rare/docs:v2.0.1-preprod electron-rare/docs:v2.0.0 electron-rare/docs:v2.0.0-preprod electron-rare/docs:docs-0.0.1-debug electron-rare/docs:docs-0.0.1 electron-rare/docs:v1.10.0 electron-rare/docs:v1.10.0-preprod electron-rare/docs:v1.9.0 electron-rare/docs:v1.9.0-preprod electron-rare/docs:v1.8.2 electron-rare/docs:v1.8.2-preprod electron-rare/docs:v1.8.1 electron-rare/docs:v1.8.1-preprod electron-rare/docs:v1.8.0 electron-rare/docs:v1.8.0-preprod electron-rare/docs:v1.7.0 electron-rare/docs:v1.7.0-preprod electron-rare/docs:preprod electron-rare/docs:vdemo electron-rare/docs:production electron-rare/docs:v1.6.0 electron-rare/docs:v1.6.0-preprod electron-rare/docs:v-demo electron-rare/docs:v1.5.1-preprod electron-rare/docs:v1.5.1 electron-rare/docs:v1.5.0 electron-rare/docs:v1.5.0-preprod electron-rare/docs:v1.4.0 electron-rare/docs:v1.4.0-preprod electron-rare/docs:v1.3.0 electron-rare/docs:v1.3.0-preprod electron-rare/docs:v1.2.1 electron-rare/docs:v1.2.0 electron-rare/docs:v1.2.0-preprod electron-rare/docs:v1.1.0 electron-rare/docs:v1.1.0-preprod electron-rare/docs:v1.0.0 electron-rare/docs:v1.0.0-preprod electron-rare/docs:v0.1.0-coming-soon electron-rare/docs:v0.1.0-demo electron-rare/docs:v0.1.0 electron-rare/docs:v0.1.0-test
..
pull from: electron-rare/docs:main-opendesk
Branches Tags
electron-rare/docs:improve-indexing-command electron-rare/docs:e2e/test-on-instance electron-rare/docs:renovate/pypi-requests-vulnerability electron-rare/docs:fix/revelant-pages-titles electron-rare/docs:main electron-rare/docs:feat/e2ee-without-e2esdk electron-rare/docs:i18n/add-languages-greek electron-rare/docs:fix/docs-grid-aria-list-pattrn electron-rare/docs:gh-pages electron-rare/docs:config/increase-memory-nodejs electron-rare/docs:fix/html-export-empty-heading electron-rare/docs:fix/docs-grid-aria-list-pattern electron-rare/docs:fix/error-page-translation electron-rare/docs:fix/voice-over-rejected electron-rare/docs:sbl-create-doc-accesses-before-content electron-rare/docs:sbl-fix-delete-document-request-conflict electron-rare/docs:fix/separator-keyboard-interact electron-rare/docs:sbl-search-public-docs electron-rare/docs:fix-search-not-authenticated electron-rare/docs:fix/search-modal-a11y electron-rare/docs:refacto/sub-docs-search electron-rare/docs:fix/shortcuts-vocalized electron-rare/docs:search-feature-flags-2 electron-rare/docs:helm-psycopg-pool electron-rare/docs:renovate/pypi-pyjwt-vulnerability electron-rare/docs:fix/search-modal-name electron-rare/docs:CI/improve-workflow-docker-publish electron-rare/docs:fix/cve-minimatch electron-rare/docs:search-feature-flags-c electron-rare/docs:change/rustfs electron-rare/docs:add/clean-command electron-rare/docs:sbl/user-reconciliation electron-rare/docs:feat/e2ee electron-rare/docs:fix/a11y-modal-focus-and-tree-actions electron-rare/docs:refacto/blocknote-ai electron-rare/docs:fix/access-docs-focus electron-rare/docs:sbl-proximity-search-fix electron-rare/docs:fix/modal-save-firefox electron-rare/docs:feature/docx-import-remastered electron-rare/docs:feature/doc-import.backup electron-rare/docs:responsive/formatting-toolbar-fixed electron-rare/docs:sbl-publiccode-fix electron-rare/docs:fix/tables-deletion electron-rare/docs:fix/a11y-axe-contrast-errors electron-rare/docs:feat/e2e-export-reference-pdf electron-rare/docs:renovate/min-age electron-rare/docs:pr/renovate/1596 electron-rare/docs:ui/fulltext-search electron-rare/docs:feature/doc-import-helm electron-rare/docs:feature/overwrite-docs electron-rare/docs:endpoint-new electron-rare/docs:fix/CI-space-left electron-rare/docs:indexer/markdown_content electron-rare/docs:index-to-search-batch-task electron-rare/docs:feature/custom-frontend-components electron-rare/docs:index-to-search-documentation electron-rare/docs:documentation/export-templates electron-rare/docs:release/3.8.21 electron-rare/docs:release/3.8.2 electron-rare/docs:feat/static-certificate-path electron-rare/docs:fix/1221-emoji-dropdown-idx electron-rare/docs:index-to-search-compose electron-rare/docs:index-to-search-nosignal electron-rare/docs:pr/dakshesh14/1293 electron-rare/docs:fix/accessibility-focus-options-menu electron-rare/docs:fix/tree-keyboard-expand-children electron-rare/docs:fix/duplicate-sub-page-read-access electron-rare/docs:improve-contributing-md electron-rare/docs:fix/1160-sub-doc-access electron-rare/docs:feat/comments electron-rare/docs:packages/common-package electron-rare/docs:anct electron-rare/docs:fix/1136-heading-order electron-rare/docs:feat/leave-doc electron-rare/docs:feat/add-duplicate-action-tree electron-rare/docs:feature/doc-dnd-save electron-rare/docs:fix-link_reach_role_and_add_ancestors_info electron-rare/docs:feat/no-websocket electron-rare/docs:pr/Comete99/1036 electron-rare/docs:hack2025/tldraw electron-rare/docs:hack2025/fix-custom-block electron-rare/docs:do-not-merge/hackathon-2025 electron-rare/docs:hack2025/add-endpoint-content electron-rare/docs:buildpack electron-rare/docs:track-posthog electron-rare/docs:poc-silent-login electron-rare/docs:feat/file-status-check electron-rare/docs:fix/docker-vulnerability electron-rare/docs:qbey/add-resource-server-mode electron-rare/docs:pr/Zorin95670/949 electron-rare/docs:fix/typo-correction electron-rare/docs:documentation-env-fixes electron-rare/docs:rename-documentation-folder electron-rare/docs:make-title-search-case-insensitive electron-rare/docs:documentation/signing-commit electron-rare/docs:fix/owner-access-check electron-rare/docs:poc/install-front-excluding-agpl electron-rare/docs:feature/cursor_rules electron-rare/docs:fix/782-ai-feature-flag electron-rare/docs:release/v2.7.0 electron-rare/docs:feature/doc-dnd-with-react-query electron-rare/docs:changelog-in-releases electron-rare/docs:qbey/oidc-token-storage-and-refresh electron-rare/docs:feature/add-page-tree electron-rare/docs:media-security electron-rare/docs:accessibility-clean electron-rare/docs:fix/create-doc-race-test electron-rare/docs:readme-update electron-rare/docs:feature/collab-long-polling electron-rare/docs:accessibility electron-rare/docs:hackathon/11-02 electron-rare/docs:test/other-type-cursor electron-rare/docs:feature/blocknote-ai electron-rare/docs:issue/improve-export-spacings electron-rare/docs:pr/AntoLC/611 electron-rare/docs:feature/custom-blocks electron-rare/docs:feautre/new-home electron-rare/docs:compose-production electron-rare/docs:feature/editor-multi-columns electron-rare/docs:bug/fix-flacky-test electron-rare/docs:feature/add-new-home electron-rare/docs:fix-warning electron-rare/docs:helm/production-example electron-rare/docs:fix/create-demo-unflushed electron-rare/docs:use-internal-llm electron-rare/docs:new-ui/fix-ui electron-rare/docs:new-ui/invitation-modal-invite electron-rare/docs:feature/crisp-integration electron-rare/docs:new-ui/new-doc-header electron-rare/docs:add-favorite-documents electron-rare/docs:new-ui/doclist electron-rare/docs:feature/add-sentry electron-rare/docs:new-ui/new-layout electron-rare/docs:helm/demo-dev electron-rare/docs:main-opendesk electron-rare/docs:feature/add-alert-block electron-rare/docs:feature/localization electron-rare/docs:converter electron-rare/docs:docs-ia-env electron-rare/docs:install-p-py electron-rare/docs:feature/text-to-yjsbase64 electron-rare/docs:sccon electron-rare/docs:feature/back-read-yjs-doc electron-rare/docs:feature/ai-blocknote-back electron-rare/docs:feat/opendesk-theme electron-rare/docs:e2e-hackathon-2024 electron-rare/docs:e2ee-hackathon-2024 electron-rare/docs:add-is-e2ee-flag electron-rare/docs:feature/public-editable
electron-rare/docs:v4.8.4-preprod electron-rare/docs:v4.8.4 electron-rare/docs:v4.8.3 electron-rare/docs:v4.8.3-preprod electron-rare/docs:v4.8.2-preprod electron-rare/docs:v4.8.2 electron-rare/docs:v4.8.1-preprod electron-rare/docs:v4.8.1 electron-rare/docs:v4.8.0-psycopgpool electron-rare/docs:v4.8.0-preprod electron-rare/docs:v4.8.0 electron-rare/docs:v4.7.0-preprod electron-rare/docs:v4.7.0 electron-rare/docs:v4.6.0 electron-rare/docs:v4.6.0-preprod electron-rare/docs:v4.5.0-preprod electron-rare/docs:v4.5.0 electron-rare/docs:v4.4.0-preprod electron-rare/docs:v4.4.0 electron-rare/docs:v4.3.0-preprod electron-rare/docs:v4.3.0 electron-rare/docs:v4.2.0-preprod electron-rare/docs:v4.2.0 electron-rare/docs:v4.1.0-preprod electron-rare/docs:v4.1.0 electron-rare/docs:v4.0.0-preprod electron-rare/docs:v4.0.0 electron-rare/docs:v3.10.0-preprod electron-rare/docs:v3.10.0 electron-rare/docs:v3.9.0-preprod electron-rare/docs:v3.9.0 electron-rare/docs:v3.8.21 electron-rare/docs:v3.8.21-preprod electron-rare/docs:v3.8.2-preprod electron-rare/docs:v3.8.2 electron-rare/docs:v3.8.1-preprod electron-rare/docs:v3.8.1 electron-rare/docs:v3.8.0-preprod electron-rare/docs:v3.8.0 electron-rare/docs:v3.7.0-preprod electron-rare/docs:v3.7.0 electron-rare/docs:v3.6.0 electron-rare/docs:v3.6.0-preprod electron-rare/docs:v3.5.0-preprod electron-rare/docs:v3.5.0 electron-rare/docs:v3.4.2-preprod electron-rare/docs:v.3.4.2 electron-rare/docs:v3.4.2 electron-rare/docs:v3.4.1-preprod electron-rare/docs:v3.4.1 electron-rare/docs:v3.4.0 electron-rare/docs:v3.4.0-preprod electron-rare/docs:v3.3.0-preprod electron-rare/docs:v3.3.0 electron-rare/docs:v3.2.1 electron-rare/docs:v3.2.1-preprod electron-rare/docs:v3.2.0-preprod electron-rare/docs:v3.2.0 electron-rare/docs:v3.1.0 electron-rare/docs:v3.1.0-preprod electron-rare/docs:v3.0.0 electron-rare/docs:v3.0.0-preprod electron-rare/docs:v2.7.0-preprod electron-rare/docs:v2.6.0 electron-rare/docs:v2.6.0-preprod electron-rare/docs:v2.5.0 electron-rare/docs:v2.5.0-preprod electron-rare/docs:v2.4.0 electron-rare/docs:v2.4.0-preprod electron-rare/docs:v2.3.0 electron-rare/docs:v2.3.0-preprod electron-rare/docs:v2.2.0 electron-rare/docs:v2.2.0-preprod electron-rare/docs:v2.1.0 electron-rare/docs:v2.1.0-preprod electron-rare/docs:v2.0.1 electron-rare/docs:v2.0.1-preprod electron-rare/docs:v2.0.0 electron-rare/docs:v2.0.0-preprod electron-rare/docs:docs-0.0.1-debug electron-rare/docs:docs-0.0.1 electron-rare/docs:v1.10.0 electron-rare/docs:v1.10.0-preprod electron-rare/docs:v1.9.0 electron-rare/docs:v1.9.0-preprod electron-rare/docs:v1.8.2 electron-rare/docs:v1.8.2-preprod electron-rare/docs:v1.8.1 electron-rare/docs:v1.8.1-preprod electron-rare/docs:v1.8.0 electron-rare/docs:v1.8.0-preprod electron-rare/docs:v1.7.0 electron-rare/docs:v1.7.0-preprod electron-rare/docs:preprod electron-rare/docs:vdemo electron-rare/docs:production electron-rare/docs:v1.6.0 electron-rare/docs:v1.6.0-preprod electron-rare/docs:v-demo electron-rare/docs:v1.5.1-preprod electron-rare/docs:v1.5.1 electron-rare/docs:v1.5.0 electron-rare/docs:v1.5.0-preprod electron-rare/docs:v1.4.0 electron-rare/docs:v1.4.0-preprod electron-rare/docs:v1.3.0 electron-rare/docs:v1.3.0-preprod electron-rare/docs:v1.2.1 electron-rare/docs:v1.2.0 electron-rare/docs:v1.2.0-preprod electron-rare/docs:v1.1.0 electron-rare/docs:v1.1.0-preprod electron-rare/docs:v1.0.0 electron-rare/docs:v1.0.0-preprod electron-rare/docs:v0.1.0-coming-soon electron-rare/docs:v0.1.0-demo electron-rare/docs:v0.1.0 electron-rare/docs:v0.1.0-test

1 Commits
new-ui/new-doc-header .. main-opendesk

Author SHA1 Message Date
Anthony LC fa131840ca 💄(frontend) add opendesk theme 
We add the opendesk theme to the docs app.
We are using the Cunningham design system to
overload the default theme with the opendesk theme.
 2024-11-08 10:59:09 +01:00
140 changed files with 4126 additions and 6883 deletions
Expand all files Collapse all files
.github/workflows/docker-hub.yml
-4
View File
@@ -6,12 +6,8 @@ on:
push:
branches:
- 'main'
- 'main-new-ui'
tags:
- 'v*'
pull_request:
branches:
- 'main'
env:
DOCKER_USER: 1001:127
.github/workflows/helmfile-linter.yaml
-22
View File
@@ -1,22 +0,0 @@
name: Helmfile lint
run-name: Helmfile lint
on:
pull_request:
branches:
- 'main'
jobs:
helmfile-lint:
runs-on: ubuntu-latest
container:
image: ghcr.io/helmfile/helmfile:latest
steps:
-
uses: numerique-gouv/action-helmfile-lint@main
with:
app-id: ${{ secrets.APP_ID }}
age-key: ${{ secrets.SOPS_PRIVATE }}
private-key: ${{ secrets.PRIVATE_KEY }}
helmfile-src: "src/helm"
repositories: "impress,secrets"
.github/workflows/impress.yml
+2 -4
View File
@@ -107,9 +107,7 @@ jobs:
- name: Install Python
uses: actions/setup-python@v3
with:
python-version: "3.12.6"
- name: Upgrade pip and setuptools
run: pip install --upgrade pip setuptools
python-version: "3.10"
- name: Install development dependencies
run: pip install --user .[dev]
- name: Check code formatting with ruff
@@ -201,7 +199,7 @@ jobs:
- name: Install Python
uses: actions/setup-python@v3
with:
python-version: "3.12.6"
python-version: "3.10"
- name: Install development dependencies
run: pip install --user .[dev]
CHANGELOG.md
+1 -16
View File
@@ -11,31 +11,16 @@ and this project adheres to
## Added
- 🌐(backend) add german translation #259
- 🌐(frontend) Add German translation #255
- ✨(frontend) Add a broadcast store #387
- ✨(frontend) WIP: New ui
- 💄(frontend) Add left panel #420
- 💄(frontend) updating the header and leftpanel for responsive #421
- ✨(backend) config endpoint #425
- 💄(frontend) update DocsGrid component #431
- ✨(backend) whitelist pod's IP address #443
- 💄(frontend) update DocsGridOptions component #432
- 💄(frontend) update DocHeader ui #446
## Changed
- 🚸(backend) improve users similarity search and sort results #391
- ♻️(frontend) simplify stores #402
- ✨(frontend) update $css Box props type to add styled components RuleSet #423
- 🌐(backend) add german translation #259
## Fixed
- 🔧(backend) fix logging for docker and make it configurable by envar #427
- 🦺(backend) add comma to sub regex #408
- 🐛(editor) collaborative user tag hidden when read only #385
- 🐛(frontend) users have view access when revoked #387
## [1.7.0] - 2024-10-24
env.d/development/common.dist
-13
View File
@@ -4,12 +4,6 @@ DJANGO_SECRET_KEY=ThisIsAnExampleKeyForDevPurposeOnly
DJANGO_SETTINGS_MODULE=impress.settings
DJANGO_SUPERUSER_PASSWORD=admin
# Logging
# Set to DEBUG level for dev only
LOGGING_LEVEL_HANDLERS_CONSOLE=INFO
LOGGING_LEVEL_LOGGERS_ROOT=INFO
LOGGING_LEVEL_LOGGERS_APP=INFO
# Python
PYTHONPATH=/app
@@ -27,7 +21,6 @@ STORAGES_STATICFILES_BACKEND=django.contrib.staticfiles.storage.StaticFilesStora
AWS_S3_ENDPOINT_URL=http://minio:9000
AWS_S3_ACCESS_KEY_ID=impress
AWS_S3_SECRET_ACCESS_KEY=password
MEDIA_BASE_URL=http://localhost:8083
# OIDC
OIDC_OP_JWKS_ENDPOINT=http://nginx:8083/realms/impress/protocol/openid-connect/certs
@@ -51,9 +44,3 @@ OIDC_AUTH_REQUEST_EXTRA_PARAMS={"acr_values": "eidas1"}
AI_BASE_URL=https://openaiendpoint.com
AI_API_KEY=password
AI_MODEL=llama
# Collaboration
COLLABORATION_SERVER_URL=ws://localhost:4444
# Frontend
FRONTEND_THEME=dsfr
src/backend/core/api/viewsets.py
-29
View File
@@ -26,13 +26,11 @@ from rest_framework import (
mixins,
pagination,
status,
views,
viewsets,
)
from rest_framework import (
response as drf_response,
)
from rest_framework.permissions import AllowAny
from core import enums, models
from core.services.ai_services import AIService
@@ -888,30 +886,3 @@ class InvitationViewset(
invitation.document.email_invitation(
language, invitation.email, invitation.role, self.request.user
)
class ConfigView(views.APIView):
"""API ViewSet for sharing some public settings."""
permission_classes = [AllowAny]
def get(self, request):
"""
GET /api/v1.0/config/
Return a dictionary of public settings.
"""
array_settings = [
"COLLABORATION_SERVER_URL",
"ENVIRONMENT",
"FRONTEND_THEME",
"MEDIA_BASE_URL",
"LANGUAGES",
"LANGUAGE_CODE",
"SENTRY_DSN",
]
dict_settings = {}
for setting in array_settings:
if hasattr(settings, setting):
dict_settings[setting] = getattr(settings, setting)
return drf_response.Response(dict_settings)
src/backend/core/tests/test_api_config.py
-63
View File
@@ -1,63 +0,0 @@
"""
Test config API endpoints in the Impress core app.
"""
from django.test import override_settings
import pytest
from rest_framework.status import (
HTTP_200_OK,
)
from rest_framework.test import APIClient
from core import factories
pytestmark = pytest.mark.django_db
@override_settings(
COLLABORATION_SERVER_URL="http://testcollab/",
FRONTEND_THEME="test-theme",
MEDIA_BASE_URL="http://testserver/",
SENTRY_DSN="https://sentry.test/123",
)
def test_api_config_anonymous():
"""Anonymous users should be allowed to get the configuration."""
client = APIClient()
response = client.get("/api/v1.0/config/")
assert response.status_code == HTTP_200_OK
assert response.json() == {
"COLLABORATION_SERVER_URL": "http://testcollab/",
"ENVIRONMENT": "test",
"FRONTEND_THEME": "test-theme",
"LANGUAGES": [["en-us", "English"], ["fr-fr", "French"], ["de-de", "German"]],
"LANGUAGE_CODE": "en-us",
"MEDIA_BASE_URL": "http://testserver/",
"SENTRY_DSN": "https://sentry.test/123",
}
@override_settings(
COLLABORATION_SERVER_URL="http://testcollab/",
FRONTEND_THEME="test-theme",
MEDIA_BASE_URL="http://testserver/",
SENTRY_DSN="https://sentry.test/123",
)
def test_api_config_authenticated():
"""Authenticated users should be allowed to get the configuration."""
user = factories.UserFactory()
client = APIClient()
client.force_login(user)
response = client.get("/api/v1.0/config/")
assert response.status_code == HTTP_200_OK
assert response.json() == {
"COLLABORATION_SERVER_URL": "http://testcollab/",
"ENVIRONMENT": "test",
"FRONTEND_THEME": "test-theme",
"MEDIA_BASE_URL": "http://testserver/",
"LANGUAGES": [["en-us", "English"], ["fr-fr", "French"], ["de-de", "German"]],
"LANGUAGE_CODE": "en-us",
"SENTRY_DSN": "https://sentry.test/123",
}
src/backend/core/urls.py
-1
View File
@@ -55,5 +55,4 @@ urlpatterns = [
]
),
),
path(f"api/{settings.API_VERSION}/config/", viewsets.ConfigView.as_view()),
]
src/backend/impress/settings.py
+32 -64
View File
@@ -10,9 +10,8 @@ For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""
import json
import os
import tomllib
from socket import gethostbyname, gethostname
from django.utils.translation import gettext_lazy as _
@@ -28,12 +27,19 @@ DATA_DIR = os.path.join("/", "data")
def get_release():
"""
Get the current release of the application
By release, we mean the release from the version.json file à la Mozilla [1]
(if any). If this file has not been found, it defaults to "NA".
[1]
https://github.com/mozilla-services/Dockerflow/blob/master/docs/version_object.md
"""
# Try to get the current release from the version.json file generated by the
# CI during the Docker image build
try:
with open(os.path.join(BASE_DIR, "pyproject.toml"), "rb") as f:
pyproject_data = tomllib.load(f)
return pyproject_data["project"]["version"]
except (FileNotFoundError, KeyError):
with open(os.path.join(BASE_DIR, "version.json"), encoding="utf8") as version:
return json.load(version)["version"]
except FileNotFoundError:
return "NA" # Default: not available
@@ -50,7 +56,7 @@ class Base(Configuration):
You may also want to override default configuration by setting the following environment
variables:
* SENTRY_DSN
* DJANGO_SENTRY_DSN
* DB_NAME
* DB_HOST
* DB_PASSWORD
@@ -98,9 +104,6 @@ class Base(Configuration):
STATIC_ROOT = os.path.join(DATA_DIR, "static")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(DATA_DIR, "media")
MEDIA_BASE_URL = values.Value(
None, environ_name="MEDIA_BASE_URL", environ_prefix=None
)
SITE_ID = 1
@@ -369,17 +372,7 @@ class Base(Configuration):
CORS_ALLOWED_ORIGIN_REGEXES = values.ListValue([])
# Sentry
SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN", environ_prefix=None)
# Collaboration
COLLABORATION_SERVER_URL = values.Value(
None, environ_name="COLLABORATION_SERVER_URL", environ_prefix=None
)
# Frontend
FRONTEND_THEME = values.Value(
None, environ_name="FRONTEND_THEME", environ_prefix=None
)
SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN")
# Easy thumbnails
THUMBNAIL_EXTENSION = "webp"
@@ -489,42 +482,6 @@ class Base(Configuration):
environ_prefix=None,
)
# Logging
# We want to make it easy to log to console but by default we log production
# to Sentry and don't want to log to console.
LOGGING = {
"version": 1,
"disable_existing_loggers": False,
"handlers": {
"console": {
"class": "logging.StreamHandler",
"level": values.Value(
"ERROR",
environ_name="LOGGING_LEVEL_HANDLERS_CONSOLE",
environ_prefix=None,
),
},
},
# Override root logger to send it to console
"root": {
"handlers": ["console"],
"level": values.Value(
"INFO", environ_name="LOGGING_LEVEL_LOGGERS_ROOT", environ_prefix=None
),
},
"loggers": {
"core": {
"handlers": ["console"],
"level": values.Value(
"INFO",
environ_name="LOGGING_LEVEL_LOGGERS_APP",
environ_prefix=None,
),
"propagate": False,
},
},
}
# pylint: disable=invalid-name
@property
def ENVIRONMENT(self):
@@ -620,6 +577,23 @@ class Development(Base):
class Test(Base):
"""Test environment settings"""
LOGGING = values.DictValue(
{
"version": 1,
"disable_existing_loggers": False,
"handlers": {
"console": {
"class": "logging.StreamHandler",
},
},
"loggers": {
"impress": {
"handlers": ["console"],
"level": "DEBUG",
},
},
}
)
PASSWORD_HASHERS = [
"django.contrib.auth.hashers.MD5PasswordHasher",
]
@@ -650,13 +624,7 @@ class Production(Base):
"""
# Security
# Add allowed host from environment variables.
# The machine hostname is added by default,
# it makes the application pingable by a load balancer on the same machine by example
ALLOWED_HOSTS = [
*values.ListValue([], environ_name="ALLOWED_HOSTS"),
gethostbyname(gethostname()),
]
ALLOWED_HOSTS = values.ListValue(None)
CSRF_TRUSTED_ORIGINS = values.ListValue([])
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
src/backend/pyproject.toml
+2 -3
View File
@@ -17,13 +17,13 @@ classifiers = [
"License :: OSI Approved :: MIT License",
"Natural Language :: English",
"Programming Language :: Python :: 3",
"Programming Language :: Python :: 3.12",
"Programming Language :: Python :: 3.10",
]
description = "An application to print markdown to pdf from a set of managed templates."
keywords = ["Django", "Contacts", "Templates", "RBAC"]
license = { file = "LICENSE" }
readme = "README.md"
requires-python = ">=3.12"
requires-python = ">=3.10"
dependencies = [
"boto3==1.35.44",
"Brotli==1.1.0",
@@ -127,7 +127,6 @@ select = [
[tool.ruff.lint.isort]
section-order = ["future","standard-library","django","third-party","impress","first-party","local-folder"]
sections = { impress=["core"], django=["django"] }
extra-standard-library = ["tomllib"]
[tool.ruff.lint.per-file-ignores]
"**/tests/*" = ["S", "SLF"]
src/frontend/apps/e2e/__tests__/app-impress/common.ts
+14 -19
View File
@@ -36,25 +36,18 @@ export const createDoc = async (
await page
.getByRole('button', {
name: 'New doc',
name: 'Create a new document',
})
.click();
const input = page.getByRole('textbox', { name: 'doc title input' });
await input.click();
await input.fill(randomDocs[i]);
await input.blur();
await page.getByRole('heading', { name: 'Untitled document' }).click();
await page.keyboard.type(randomDocs[i]);
await page.getByText('Created at ').click();
}
return randomDocs;
};
export const verifyDocName = async (page: Page, docName: string) => {
const input = page.getByRole('textbox', { name: 'doc title input' });
await expect(input).toBeVisible();
await expect(input).toHaveValue(docName);
};
export const addNewMember = async (
page: Page,
index: number,
@@ -104,22 +97,24 @@ export const goToGridDoc = async (
const header = page.locator('header').first();
await header.locator('h2').getByText('Docs').click();
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const datagridTable = datagrid.getByRole('table');
const rows = docsGrid.getByRole('row');
expect(await rows.count()).toEqual(20);
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
const rows = datagridTable.getByRole('row');
const row = title
? rows.filter({
hasText: title,
})
: rows.nth(nthRow);
await expect(row).toBeVisible();
const docTitleCell = row.getByRole('cell').nth(1);
const docTitle = await docTitleCell.textContent();
const docTitleContent = row.locator('[aria-describedby="doc-title"]').first();
const docTitle = await docTitleContent.textContent();
expect(docTitle).toBeDefined();
await row.getByRole('link').first().click();
src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
+8 -5
View File
@@ -18,11 +18,14 @@ test.describe('Doc Create', () => {
const header = page.locator('header').first();
await header.locator('h2').getByText('Docs').click();
await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const datagridTable = datagrid.getByRole('table');
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
await expect(docsGrid.getByText(docTitle)).toBeVisible();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
await expect(datagridTable.getByText(docTitle)).toBeVisible({
timeout: 5000,
});
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+9 -16
View File
@@ -2,12 +2,7 @@ import path from 'path';
import { expect, test } from '@playwright/test';
import {
createDoc,
goToGridDoc,
mockedDocument,
verifyDocName,
} from './common';
import { createDoc, goToGridDoc, mockedDocument } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -95,7 +90,7 @@ test.describe('Doc Editor', () => {
});
const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
await verifyDocName(page, randomDoc[0]);
await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
const webSocket = await webSocketPromise;
expect(webSocket.url()).toContain('ws://localhost:4444/');
@@ -115,7 +110,7 @@ test.describe('Doc Editor', () => {
}) => {
const randomDoc = await createDoc(page, 'doc-markdown', browserName, 1);
await verifyDocName(page, randomDoc[0]);
await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -140,7 +135,7 @@ test.describe('Doc Editor', () => {
}) => {
// Check the first doc
const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
await verifyDocName(page, firstDoc);
await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -149,8 +144,7 @@ test.describe('Doc Editor', () => {
// Check the second doc
const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
await verifyDocName(page, secondDoc);
await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
await editor.click();
await editor.fill('Hello World Doc 2');
@@ -160,7 +154,7 @@ test.describe('Doc Editor', () => {
await goToGridDoc(page, {
title: firstDoc,
});
await verifyDocName(page, firstDoc);
await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
});
@@ -171,7 +165,7 @@ test.describe('Doc Editor', () => {
}) => {
// Check the first doc
const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
await verifyDocName(page, doc);
await expect(page.locator('h2').getByText(doc)).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -182,7 +176,7 @@ test.describe('Doc Editor', () => {
nthRow: 2,
});
await verifyDocName(page, secondDoc);
await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
await goToGridDoc(page, {
title: doc,
@@ -197,8 +191,7 @@ test.describe('Doc Editor', () => {
// Check the first doc
const doc = await goToGridDoc(page);
await verifyDocName(page, doc);
await expect(page.locator('h2').getByText(doc)).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.click();
src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
+4 -4
View File
@@ -3,7 +3,7 @@ import cs from 'convert-stream';
import jsdom from 'jsdom';
import pdf from 'pdf-parse';
import { createDoc, verifyDocName } from './common';
import { createDoc } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -20,7 +20,7 @@ test.describe('Doc Export', () => {
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
});
await verifyDocName(page, randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').fill('Hello World');
@@ -57,7 +57,7 @@ test.describe('Doc Export', () => {
return download.suggestedFilename().includes(`${randomDoc}.docx`);
});
await verifyDocName(page, randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').fill('Hello World');
@@ -97,7 +97,7 @@ test.describe('Doc Export', () => {
await route.continue();
});
await verifyDocName(page, randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.locator('.bn-block-outer').last().fill('Hello World');
await page.locator('.bn-block-outer').last().click();
src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+264 -178
View File
@@ -1,14 +1,264 @@
import { expect, test } from '@playwright/test';
type SmallDoc = {
id: string;
title: string;
};
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Documents Grid', () => {
test('checks all the elements are visible', async ({ page }) => {
await expect(page.locator('h2').getByText('Documents')).toBeVisible();
const datagrid = page
.getByLabel('Datagrid of the documents page 1')
.getByRole('table');
const thead = datagrid.locator('thead');
await expect(thead.getByText(/Document name/i)).toBeVisible();
await expect(thead.getByText(/Created at/i)).toBeVisible();
await expect(thead.getByText(/Updated at/i)).toBeVisible();
await expect(thead.getByText(/Your role/i)).toBeVisible();
await expect(thead.getByText(/Members/i)).toBeVisible();
const row1 = datagrid.getByRole('row').nth(1).getByRole('cell');
const docName = await row1.nth(1).textContent();
expect(docName).toBeDefined();
const docCreatedAt = await row1.nth(2).textContent();
expect(docCreatedAt).toBeDefined();
const docUpdatedAt = await row1.nth(3).textContent();
expect(docUpdatedAt).toBeDefined();
const docRole = await row1.nth(4).textContent();
expect(
docRole &&
['Administrator', 'Owner', 'Reader', 'Editor'].includes(docRole),
).toBeTruthy();
const docUserNumber = await row1.nth(5).textContent();
expect(docUserNumber).toBeDefined();
// Open the document
await row1.nth(1).click();
await expect(page.locator('h2').getByText(docName!)).toBeVisible();
});
[
{
nameColumn: 'Document name',
ordering: 'title',
cellNumber: 1,
orderDefault: '',
orderDesc: '&ordering=-title',
orderAsc: '&ordering=title',
defaultColumn: false,
},
{
nameColumn: 'Created at',
ordering: 'created_at',
cellNumber: 2,
orderDefault: '',
orderDesc: '&ordering=-created_at',
orderAsc: '&ordering=created_at',
defaultColumn: false,
},
{
nameColumn: 'Updated at',
ordering: 'updated_at',
cellNumber: 3,
orderDefault: '&ordering=-updated_at',
orderDesc: '&ordering=updated_at',
orderAsc: '',
defaultColumn: true,
},
].forEach(
({
nameColumn,
ordering,
cellNumber,
orderDefault,
orderDesc,
orderAsc,
defaultColumn,
}) => {
test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderDefault}`) &&
response.status() === 200,
);
const responsePromiseOrderingDesc = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderDesc}`) &&
response.status() === 200,
);
const responsePromiseOrderingAsc = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderAsc}`) &&
response.status() === 200,
);
// Checks the initial state
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const datagridTable = datagrid.getByRole('table');
const thead = datagridTable.locator('thead');
const response = await responsePromise;
expect(response.ok()).toBeTruthy();
const docNameRow1 = datagridTable
.getByRole('row')
.nth(1)
.getByRole('cell')
.nth(cellNumber);
const docNameRow2 = datagridTable
.getByRole('row')
.nth(2)
.getByRole('cell')
.nth(cellNumber);
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
// Initial state
await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/);
const initialDocNameRow1 = await docNameRow1.textContent();
const initialDocNameRow2 = await docNameRow2.textContent();
expect(initialDocNameRow1).toBeDefined();
expect(initialDocNameRow2).toBeDefined();
// Ordering ASC
await thead.getByText(nameColumn).click();
const responseOrderingAsc = await responsePromiseOrderingAsc;
expect(responseOrderingAsc.ok()).toBeTruthy();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/);
const textDocNameRow1Asc = await docNameRow1.textContent();
const textDocNameRow2Asc = await docNameRow2.textContent();
const compare = (comp1: string, comp2: string) => {
const comparisonResult = comp1.localeCompare(comp2, 'en', {
caseFirst: 'false',
ignorePunctuation: true,
});
// eslint-disable-next-line playwright/no-conditional-in-test
return defaultColumn ? comparisonResult >= 0 : comparisonResult <= 0;
};
expect(
textDocNameRow1Asc &&
textDocNameRow2Asc &&
compare(textDocNameRow1Asc, textDocNameRow2Asc),
).toBeTruthy();
// Ordering Desc
await thead.getByText(nameColumn).click();
const responseOrderingDesc = await responsePromiseOrderingDesc;
expect(responseOrderingDesc.ok()).toBeTruthy();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/);
const textDocNameRow1Desc = await docNameRow1.textContent();
const textDocNameRow2Desc = await docNameRow2.textContent();
expect(
textDocNameRow1Desc &&
textDocNameRow2Desc &&
compare(textDocNameRow2Desc, textDocNameRow1Desc),
).toBeTruthy();
});
},
);
test('checks the pagination', async ({ page }) => {
const responsePromisePage1 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1`) &&
response.status() === 200,
);
const responsePromisePage2 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=2`) &&
response.status() === 200,
);
const datagridPage1 = page
.getByLabel('Datagrid of the documents page 1')
.getByRole('table');
const responsePage1 = await responsePromisePage1;
expect(responsePage1.ok()).toBeTruthy();
await expect(
datagridPage1.getByRole('row').nth(1).getByRole('cell').nth(1),
).toHaveText(/.*/);
await page.getByLabel('Go to page 2').click();
const datagridPage2 = page
.getByLabel('Datagrid of the documents page 2')
.getByRole('table');
const responsePage2 = await responsePromisePage2;
expect(responsePage2.ok()).toBeTruthy();
await expect(
datagridPage2.getByRole('row').nth(1).getByRole('cell').nth(1),
).toHaveText(/.*/);
});
test('it deletes the document', async ({ page }) => {
const datagrid = page
.getByLabel('Datagrid of the documents page 1')
.getByRole('table');
const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
const docName = await docRow.nth(1).textContent();
await docRow
.getByRole('button', {
name: 'Delete the document',
})
.click();
await expect(
page.locator('h2').getByText(`Deleting the document "${docName}"`),
).toBeVisible();
await page
.getByRole('button', {
name: 'Confirm deletion',
})
.click();
await expect(
page.getByText('The document has been deleted.'),
).toBeVisible();
await expect(datagrid.getByText(docName!)).toBeHidden();
});
});
test.describe('Documents Grid mobile', () => {
test.use({ viewport: { width: 500, height: 1200 } });
@@ -76,183 +326,19 @@ test.describe('Documents Grid mobile', () => {
await page.goto('/');
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const tableDatagrid = datagrid.getByRole('table');
const rows = docsGrid.getByRole('row');
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
const rows = tableDatagrid.getByRole('row');
const row = rows.filter({
hasText: 'My mocked document',
});
await expect(
row.locator('[aria-describedby="doc-title"]').nth(0),
).toHaveText('My mocked document');
});
});
test.describe('Document grid item options', () => {
test('it deletes the document', async ({ page }) => {
let docs: SmallDoc[] = [];
const response = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
docs = result.results as SmallDoc[];
const button = page.getByTestId(`docs-grid-actions-button-${docs[0].id}`);
await expect(button).toBeVisible();
await button.click();
const removeButton = page.getByTestId(
`docs-grid-actions-remove-${docs[0].id}`,
);
await expect(removeButton).toBeVisible();
await removeButton.click();
await expect(
page.locator('h2').getByText(`Deleting the document "${docs[0].title}"`),
).toBeVisible();
await page
.getByRole('button', {
name: 'Confirm deletion',
})
.click();
const refetchResponse = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1') &&
response.status() === 200,
);
const resultRefetch = await refetchResponse.json();
expect(resultRefetch.count).toBe(result.count - 1);
await expect(page.getByTestId('main-layout-loader')).toBeHidden();
await expect(
page.getByText('The document has been deleted.'),
).toBeVisible();
await expect(button).toBeHidden();
});
test("it checks if the delete option is disabled if we don't have the destroy capability", async ({
page,
}) => {
await page.route('*/**/api/v1.0/documents/?page=1', async (route) => {
await route.fulfill({
json: {
results: [
{
id: 'mocked-document-id',
content: '',
title: 'Mocked document',
accesses: [],
abilities: {
destroy: false, // Means not owner
link_configuration: false,
versions_destroy: false,
versions_list: true,
versions_retrieve: true,
accesses_manage: false, // Means not admin
update: false,
partial_update: false, // Means not editor
retrieve: true,
},
link_reach: 'restricted',
created_at: '2021-09-01T09:00:00Z',
},
],
},
});
});
await page.goto('/');
const button = page.getByTestId(
`docs-grid-actions-button-mocked-document-id`,
);
await expect(button).toBeVisible();
await button.click();
const removeButton = page.getByTestId(
`docs-grid-actions-remove-mocked-document-id`,
);
await expect(removeButton).toBeVisible();
await removeButton.isDisabled();
});
});
test.describe('Documents Grid', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('checks all the elements are visible', async ({ page }) => {
let docs: SmallDoc[] = [];
await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
const response = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
docs = result.results as SmallDoc[];
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
await expect(page.locator('h4').getByText('All docs')).toBeVisible();
const thead = page.getByTestId('docs-grid-header');
await expect(thead.getByText(/Name/i)).toBeVisible();
await expect(thead.getByText(/Updated at/i)).toBeVisible();
await Promise.all(
docs.map(async (doc) => {
await expect(
page.getByTestId(`docs-grid-name-${doc.id}`),
).toBeVisible();
}),
);
});
test('checks the infinite scroll', async ({ page }) => {
let docs: SmallDoc[] = [];
const responsePromisePage1 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1`) &&
response.status() === 200,
);
const responsePromisePage2 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=2`) &&
response.status() === 200,
);
const responsePage1 = await responsePromisePage1;
expect(responsePage1.ok()).toBeTruthy();
let result = await responsePage1.json();
docs = result.results as SmallDoc[];
await Promise.all(
docs.map(async (doc) => {
await expect(
page.getByTestId(`docs-grid-name-${doc.id}`),
).toBeVisible();
}),
);
await page.getByTestId('infinite-scroll-trigger').scrollIntoViewIfNeeded();
const responsePage2 = await responsePromisePage2;
result = await responsePage2.json();
docs = result.results as SmallDoc[];
await Promise.all(
docs.map(async (doc) => {
await expect(
page.getByTestId(`docs-grid-name-${doc.id}`),
).toBeVisible();
}),
);
await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
+89 -23
View File
@@ -6,7 +6,6 @@ import {
mockedAccesses,
mockedDocument,
mockedInvitations,
verifyDocName,
} from './common';
test.beforeEach(async ({ page }) => {
@@ -60,30 +59,84 @@ test.describe('Doc Header', () => {
const card = page.getByLabel(
'It is the card information about the document.',
);
await expect(card.getByPlaceholder('Untitled document')).toBeVisible();
await expect(card.getByText('Public document')).toBeVisible();
await expect(card.getByText('Owner ·')).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await expect(card.locator('a').getByText('home')).toBeVisible();
await expect(card.locator('h2').getByText('Mocked document')).toBeVisible();
await expect(card.getByText('Public')).toBeVisible();
await expect(
page.getByRole('button', { name: 'Open the document options' }),
card.getByText('Created at 09/01/2021, 11:00 AM'),
).toBeVisible();
await expect(
card.getByText('Owners: Super Owner / super2@owner.com'),
).toBeVisible();
await expect(card.getByText('Your role: Owner')).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
});
test('it updates the title doc', async ({ page, browserName }) => {
await createDoc(page, 'doc-update', browserName, 1);
const docTitle = page.getByRole('textbox', { name: 'doc title input' });
await expect(docTitle).toBeVisible();
await docTitle.fill('Hello World');
await docTitle.blur();
await verifyDocName(page, 'Hello World');
const [randomDoc] = await createDoc(page, 'doc-update', browserName, 1);
await page.getByRole('heading', { name: randomDoc }).fill(' ');
await page.getByText('Created at').click();
await expect(
page.getByRole('heading', { name: 'Untitled document' }),
).toBeVisible();
});
test('it updates the title doc from editor heading', async ({ page }) => {
await page
.getByRole('button', {
name: 'Create a new document',
})
.click();
const docHeader = page.getByLabel(
'It is the card information about the document.',
);
await expect(
docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.locator('h1').click();
await page.keyboard.type('Hello World', { delay: 100 });
await expect(
docHeader.getByRole('heading', { name: 'Hello World', level: 2 }),
).toBeVisible();
await expect(
page.getByText('Document title updated successfully'),
).toBeVisible();
await docHeader
.getByRole('heading', { name: 'Hello World', level: 2 })
.fill('Top World');
await editor.locator('h1').fill('Super World');
await expect(
docHeader.getByRole('heading', { name: 'Top World', level: 2 }),
).toBeVisible();
await editor.locator('h1').fill('');
await docHeader
.getByRole('heading', { name: 'Top World', level: 2 })
.fill(' ');
await page.getByText('Created at').click();
await expect(
docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
).toBeVisible();
});
test('it deletes the doc', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.getByLabel('Open the document options').click();
await page
@@ -106,7 +159,9 @@ test.describe('Doc Header', () => {
page.getByText('The document has been deleted.'),
).toBeVisible();
await expect(page.getByRole('button', { name: 'New do' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Create a new document' }),
).toBeVisible();
const row = page
.getByLabel('Datagrid of the documents page 1')
@@ -140,12 +195,16 @@ test.describe('Doc Header', () => {
await goToGridDoc(page);
await expect(
page.locator('h2').getByText('Mocked document'),
).toHaveAttribute('contenteditable');
await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Delete document' }),
).toBeDisabled();
).toBeHidden();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -214,12 +273,16 @@ test.describe('Doc Header', () => {
await goToGridDoc(page);
await expect(
page.locator('h2').getByText('Mocked document'),
).toHaveAttribute('contenteditable');
await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Delete document' }),
).toBeDisabled();
).toBeHidden();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -288,12 +351,16 @@ test.describe('Doc Header', () => {
await goToGridDoc(page);
await expect(
page.locator('h2').getByText('Mocked document'),
).not.toHaveAttribute('contenteditable');
await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Delete document' }),
).toBeDisabled();
).toBeHidden();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -347,7 +414,7 @@ test.describe('Doc Header', () => {
// create page and navigate to it
await page
.getByRole('button', {
name: 'New doc',
name: 'Create a new document',
})
.click();
@@ -382,7 +449,7 @@ test.describe('Doc Header', () => {
// create page and navigate to it
await page
.getByRole('button', {
name: 'New doc',
name: 'Create a new document',
})
.click();
@@ -434,7 +501,6 @@ test.describe('Documents Header mobile', () => {
await goToGridDoc(page);
await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Share' }).click();
await expect(page.getByLabel('Share modal')).toBeVisible();
src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts
+3 -6
View File
@@ -126,9 +126,8 @@ test.describe('Document list members', () => {
test('it checks the role rules', async ({ page, browserName }) => {
const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(docTitle);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
@@ -189,9 +188,7 @@ test.describe('Document list members', () => {
test('it checks the delete members', async ({ page, browserName }) => {
const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(docTitle);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
src/frontend/apps/e2e/__tests__/app-impress/doc-routing.spec.ts
+2 -2
View File
@@ -9,7 +9,7 @@ test.describe('Doc Routing', () => {
test('Check the presence of the meta tag noindex', async ({ page }) => {
const buttonCreateHomepage = page.getByRole('button', {
name: 'New doc',
name: 'Create a new document',
});
await expect(buttonCreateHomepage).toBeVisible();
@@ -27,7 +27,7 @@ test.describe('Doc Routing', () => {
await expect(page).toHaveURL('/');
const buttonCreateHomepage = page.getByRole('button', {
name: 'New doc',
name: 'Create a new document',
});
await expect(buttonCreateHomepage).toBeVisible();
src/frontend/apps/e2e/__tests__/app-impress/doc-table-content.spec.ts
+2 -7
View File
@@ -17,9 +17,7 @@ test.describe('Doc Table Content', () => {
1,
);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.getByLabel('Open the document options').click();
await page
@@ -38,7 +36,6 @@ test.describe('Doc Table Content', () => {
await page.getByRole('button', { name: 'Strike' }).click();
await page.locator('.bn-block-outer').first().click();
await editor.click();
await page.locator('.bn-block-outer').last().click();
// Create space to fill the viewport
@@ -110,9 +107,7 @@ test.describe('Doc Table Content', () => {
1,
);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await expect(page.getByLabel('Open the panel')).toBeHidden();
const editor = page.locator('.ProseMirror');
src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
+6 -14
View File
@@ -10,9 +10,7 @@ test.describe('Doc Version', () => {
test('it displays the doc versions', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.getByLabel('Open the document options').click();
await page
@@ -81,14 +79,12 @@ test.describe('Doc Version', () => {
await goToGridDoc(page);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue('Mocked document');
await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
await page.getByLabel('Open the document options').click();
await expect(
page.getByRole('button', { name: 'Version history' }),
).toBeDisabled();
).toBeHidden();
await page.getByRole('button', { name: 'Table of content' }).click();
@@ -99,14 +95,12 @@ test.describe('Doc Version', () => {
test('it restores the doc version', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.locator('.bn-block-outer').last().click();
await page.locator('.bn-block-outer').last().fill('Hello');
expect(true).toBe(true);
await goToGridDoc(page, {
title: randomDoc,
});
@@ -158,9 +152,7 @@ test.describe('Doc Version', () => {
}) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
const input = page.getByPlaceholder('Untitled document');
await expect(input).toBeVisible();
await expect(input).toHaveValue(randomDoc);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.locator('.bn-block-outer').last().click();
src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
+18 -26
View File
@@ -1,6 +1,6 @@
import { expect, test } from '@playwright/test';
import { createDoc, keyCloakSignIn, verifyDocName } from './common';
import { createDoc, keyCloakSignIn } from './common';
const browsersName = ['chromium', 'webkit', 'firefox'];
@@ -85,7 +85,7 @@ test.describe('Doc Visibility: Restricted', () => {
1,
);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
const urlDoc = page.url();
@@ -111,7 +111,7 @@ test.describe('Doc Visibility: Restricted', () => {
const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
const urlDoc = page.url();
@@ -139,7 +139,7 @@ test.describe('Doc Visibility: Restricted', () => {
const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
@@ -176,7 +176,7 @@ test.describe('Doc Visibility: Restricted', () => {
await page.goto(urlDoc);
await verifyDocName(page, docTitle);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
});
});
@@ -198,7 +198,7 @@ test.describe('Doc Visibility: Public', () => {
1,
);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -227,14 +227,10 @@ test.describe('Doc Visibility: Public', () => {
position: { x: 0, y: 0 },
});
const cardContainer = page.getByLabel(
'It is the card information about the document.',
);
await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
await expect(
cardContainer.getByText('Public document', { exact: true }),
page
.getByLabel('It is the card information about the document.')
.getByText('Public', { exact: true }),
).toBeVisible();
const urlDoc = page.url();
@@ -265,7 +261,7 @@ test.describe('Doc Visibility: Public', () => {
const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -294,14 +290,10 @@ test.describe('Doc Visibility: Public', () => {
position: { x: 0, y: 0 },
});
const cardContainer = page.getByLabel(
'It is the card information about the document.',
);
await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
await expect(
cardContainer.getByText('Public document', { exact: true }),
page
.getByLabel('It is the card information about the document.')
.getByText('Public', { exact: true }),
).toBeVisible();
const urlDoc = page.url();
@@ -316,7 +308,7 @@ test.describe('Doc Visibility: Public', () => {
await page.goto(urlDoc);
await verifyDocName(page, docTitle);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
await expect(
page.getByText('Read only, you cannot edit this document'),
@@ -341,7 +333,7 @@ test.describe('Doc Visibility: Authenticated', () => {
1,
);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -393,7 +385,7 @@ test.describe('Doc Visibility: Authenticated', () => {
1,
);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -459,7 +451,7 @@ test.describe('Doc Visibility: Authenticated', () => {
1,
);
await verifyDocName(page, docTitle);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -506,7 +498,7 @@ test.describe('Doc Visibility: Authenticated', () => {
await page.goto(urlDoc);
await verifyDocName(page, docTitle);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await expect(
page.getByText('Read only, you cannot edit this document'),
src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts
+77
View File
@@ -0,0 +1,77 @@
import { expect, test } from '@playwright/test';
import { goToGridDoc } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Footer', () => {
test('checks all the elements are visible', async ({ page }) => {
const footer = page.locator('footer').first();
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
await expect(
footer.getByRole('link', { name: 'legifrance.gouv.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'info.gouv.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'service-public.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'data.gouv.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Legal Notice' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Personal data and cookies' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Accessibility' }),
).toBeVisible();
await expect(
footer.getByText(
'Unless otherwise stated, all content on this site is under licence',
),
).toBeVisible();
});
test('checks footer is not visible on doc editor', async ({ page }) => {
await expect(page.locator('footer')).toBeVisible();
await goToGridDoc(page);
await expect(page.locator('footer')).toBeHidden();
});
const legalPages = [
{ name: 'Legal Notice', url: '/legal-notice/' },
{ name: 'Personal data and cookies', url: '/personal-data-cookies/' },
{ name: 'Accessibility', url: '/accessibility/' },
];
for (const { name, url } of legalPages) {
test(`checks ${name} page`, async ({ page }) => {
const footer = page.locator('footer').first();
await footer.getByRole('link', { name }).click();
await expect(
page
.getByRole('heading', {
name,
})
.first(),
).toBeVisible();
await expect(page).toHaveURL(url);
});
}
});
src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
+18 -4
View File
@@ -75,15 +75,29 @@ test.describe('Header mobile', () => {
test('it checks the header when mobile', async ({ page }) => {
const header = page.locator('header').first();
await expect(header.getByLabel('Open the header menu')).toBeVisible();
await expect(
header.getByRole('link', { name: 'Docs Logo Docs' }),
).toBeVisible();
await expect(
header.getByRole('button', {
name: 'Les services de La Suite numérique',
}),
).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Logout',
}),
).toBeHidden();
await expect(page.getByText('English')).toBeHidden();
await header.getByLabel('Open the header menu').click();
await expect(
page.getByRole('button', {
name: 'Logout',
}),
).toBeVisible();
await expect(page.getByText('English')).toBeVisible();
});
});
src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
+15 -3
View File
@@ -6,7 +6,11 @@ test.beforeEach(async ({ page }) => {
test.describe('Language', () => {
test('checks the language picker', async ({ page }) => {
await expect(page.getByLabel('Logout')).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Create a new document',
}),
).toBeVisible();
const header = page.locator('header').first();
await header.getByRole('combobox').getByText('English').click();
@@ -15,7 +19,11 @@ test.describe('Language', () => {
header.getByRole('combobox').getByText('Français'),
).toBeVisible();
await expect(page.getByLabel('Se déconnecter')).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Créer un nouveau document',
}),
).toBeVisible();
await header.getByRole('combobox').getByText('Français').click();
await header.getByRole('option', { name: 'Deutsch' }).click();
@@ -23,7 +31,11 @@ test.describe('Language', () => {
header.getByRole('combobox').getByText('Deutsch'),
).toBeVisible();
await expect(page.getByLabel('Abmelden')).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Neues Dokument erstellen',
}),
).toBeVisible();
});
test('checks that backend uses the same language as the frontend', async ({
src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts
-48
View File
@@ -1,48 +0,0 @@
import { expect, test } from '@playwright/test';
test.describe('Left panel desktop', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('checks all the elements are visible', async ({ page }) => {
await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
});
});
test.describe('Left panel mobile', () => {
test.use({ viewport: { width: 500, height: 1200 } });
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('checks all the desktop elements are hidden and all mobile elements are visible', async ({
page,
}) => {
await expect(page.getByTestId('left-panel-desktop')).toBeHidden();
await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
const header = page.locator('header').first();
const homeButton = page.getByRole('button', { name: 'house' });
const newDocButton = page.getByRole('button', { name: 'New doc' });
const languageButton = page.getByRole('combobox', { name: 'Language' });
const logoutButton = page.getByRole('button', { name: 'Logout' });
await expect(homeButton).not.toBeInViewport();
await expect(newDocButton).not.toBeInViewport();
await expect(languageButton).not.toBeInViewport();
await expect(logoutButton).not.toBeInViewport();
await header.getByLabel('Open the header menu').click();
await expect(page.getByTestId('left-panel-mobile')).toBeInViewport();
await expect(homeButton).toBeInViewport();
await expect(newDocButton).toBeInViewport();
await expect(languageButton).toBeInViewport();
await expect(logoutButton).toBeInViewport();
});
});
src/frontend/apps/e2e/package.json
+1 -1
View File
@@ -12,7 +12,7 @@
"test:ui::chromium": "yarn test:ui --project=chromium"
},
"devDependencies": {
"@playwright/test": "1.48.2",
"@playwright/test": "1.48.1",
"@types/node": "*",
"@types/pdf-parse": "1.1.4",
"eslint-config-impress": "*",
src/frontend/apps/impress/.env
+1 -1
View File
@@ -1,5 +1,5 @@
NEXT_PUBLIC_API_ORIGIN=
NEXT_PUBLIC_Y_PROVIDER_URL=
NEXT_PUBLIC_MEDIA_URL=
NEXT_PUBLIC_THEME=dsfr
NEXT_PUBLIC_SW_DEACTIVATED=
NEXT_PUBLIC_THEME=open-desk
src/frontend/apps/impress/cunningham.ts
+235 -66
View File
@@ -5,30 +5,22 @@ const config = {
colors: {
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-050': '#F5F5FE',
'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA',
'greyscale-000': '#fff',
'greyscale-1000': '#161616',
},
font: {
sizes: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem',
xl: '1.25rem',
xl: '1.50rem',
t: '0.6875rem',
s: '0.75rem',
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
h1: '2.2rem',
h2: '1.7rem',
h3: '1.37rem',
h4: '1.15rem',
h5: '1rem',
h6: '0.87rem',
},
weights: {
thin: 100,
@@ -42,21 +34,6 @@ const config = {
auto: 'auto',
bx: '2.2rem',
full: '100%',
'4xs': '0.125rem',
'3xs': '0.25rem',
'2xs': '0.375rem',
xs: '0.5rem',
sm: '0.75rem',
base: '1rem',
md: '1.5rem',
lg: '2rem',
xl: '2.5rem',
xxl: '3rem',
xxxl: '3.5rem',
'4xl': '4rem',
'5xl': '4.5rem',
'6xl': '6rem',
'7xl': '7.5rem',
},
breakpoints: {
xxs: '320px',
@@ -127,7 +104,7 @@ const config = {
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#fff',
'menu-background-color': '#ffffff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-300)',
},
@@ -149,7 +126,7 @@ const config = {
},
},
modal: {
'background-color': '#fff',
'background-color': '#ffffff',
},
button: {
'border-radius': {
@@ -201,9 +178,7 @@ const config = {
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
@@ -222,19 +197,19 @@ const config = {
dsfr: {
theme: {
colors: {
'card-border': '#E5E5E5',
'card-border': '#ededed',
'primary-text': '#000091',
'primary-100': '#ECECFE',
'primary-100': '#f5f5fe',
'primary-150': '#F4F4FD',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-200': '#ececfe',
'primary-300': '#e3e3fd',
'primary-400': '#cacafb',
'primary-500': '#6a6af4',
'primary-600': '#000091',
'primary-700': '#272747',
'primary-800': '#000091',
'primary-900': '#21213F',
'secondary-text': '#fff',
'primary-800': '#21213f',
'primary-900': '#1c1a36',
'secondary-text': '#FFFFFF',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
@@ -245,22 +220,16 @@ const config = {
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-text': '#303C4B',
'greyscale-000': '#fff',
'greyscale-050': '#F6F6F6',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-250': '#ddd',
'greyscale-300': '#CECECE',
'greyscale-350': '#ddd',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-750': '#353535',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'greyscale-000': '#f6f6f6',
'greyscale-100': '#eeeeee',
'greyscale-200': '#e5e5e5',
'greyscale-300': '#e1e1e1',
'greyscale-400': '#dddddd',
'greyscale-500': '#cecece',
'greyscale-600': '#7b7b7b',
'greyscale-700': '#666666',
'greyscale-800': '#2a2a2a',
'greyscale-900': '#1e1e1e',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
@@ -328,9 +297,9 @@ const config = {
'color-hover': '#1212ff',
'color-active': '#2323ff',
},
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
},
'primary-text': {
background: {
@@ -394,7 +363,7 @@ const config = {
},
'forms-input': {
'border-radius': '4px',
'background-color': '#fff',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
'value-color': 'var(--c--theme--colors--primary-text)',
@@ -412,7 +381,7 @@ const config = {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#fff',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-text)',
'border-color-hover': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
@@ -430,6 +399,206 @@ const config = {
},
},
},
'open-desk': {
theme: {
colors: {
'card-border': '#ededed',
'primary-text': '#637089',
'primary-100': '#F7F5FF',
'primary-200': '#ECE7FE',
'primary-300': '#DCD2FE',
'primary-400': '#C8B9FD',
'primary-500': '#8E75FA',
'primary-600': '#7051FA',
'primary-700': '#571EFA',
'primary-800': '#4519C2',
'primary-900': '#341291',
'secondary-text': '#FFFFFF',
'secondary-100': '#EDFDFB',
'secondary-200': '#BFF9F2',
'secondary-300': '#71EFE1',
'secondary-400': '#00E6CC',
'secondary-500': '#00A896',
'secondary-600': '#008A7B',
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
'greyscale-text': '#303C4B',
'greyscale-000': '#ffffff',
'greyscale-100': '#EEEFF2',
'greyscale-200': '#D3D7DE',
'greyscale-300': '#B6BCC8',
'greyscale-400': '#7C879C',
'greyscale-500': '#637089',
'greyscale-600': '#4D5B79',
'greyscale-700': '#364768',
'greyscale-800': '#203257',
'greyscale-900': '#1e1e1e',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
},
font: {
families: {
accent: 'Open Sans',
base: 'Open Sans',
},
},
logo: {
src: '/assets/logo-open-desk.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'OpenDesk Logo',
},
},
components: {
alert: {
'border-radius': '0',
},
button: {
'medium-height': '48px',
'border-radius': '4px',
primary: {
background: {
color: 'var(--c--theme--colors--primary-700)',
'color-hover': 'var(--c--theme--colors--primary-900)',
'color-active': 'var(--c--theme--colors--primary-900)',
},
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
},
'primary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
},
secondary: {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': '#EDEDED',
},
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
},
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
},
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-500)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
'background-color': 'transparent',
'background-color-hover': '#F4F4FD',
},
pagination: {
'background-color': 'var(--c--theme--colors--primary-100)',
'border-color': 'var(--c--theme--colors--primary-600)',
'background-color-active': 'var(--c--theme--colors--primary-300)',
},
},
'forms-checkbox': {
'border-radius': '0',
color: 'var(--c--theme--colors--greyscale-600)',
text: {
color: 'var(--c--theme--colors--greyscale-600)',
size: 'var(--c--theme--font--sizes--t)',
},
},
'forms-datepicker': {
'border-radius': '0',
},
'forms-fileuploader': {
'border-radius': '0',
},
'forms-field': {
color: 'var(--c--theme--colors--primary-600)',
},
'forms-input': {
'border-radius': '4px',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-600)',
'box-shadow-color': 'var(--c--theme--colors--primary-600)',
'value-color': 'var(--c--theme--colors--primary-600)',
'font-size': '14px',
},
'forms-labelledbox': {
'label-color': {
big: 'var(--c--theme--colors--primary-600)',
},
},
'forms-select': {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-600)',
'border-color-hover': 'var(--c--theme--colors--primary-600)',
'box-shadow-color': 'var(--c--theme--colors--primary-600)',
},
'forms-radio': {
'accent-color': 'var(--c--theme--colors--primary-600)',
},
'forms-switch': {
'handle-border-radius': '2px',
'rail-border-radius': '4px',
'accent-color': 'var(--c--theme--colors--primary-600)',
},
'forms-textarea': {
'border-radius': '0',
},
},
},
},
};
src/frontend/apps/impress/package.json
+13 -14
View File
@@ -21,36 +21,35 @@
"@gouvfr-lasuite/integration": "1.0.2",
"@hocuspocus/provider": "2.13.7",
"@openfun/cunningham-react": "2.9.4",
"@tanstack/react-query": "5.60.5",
"i18next": "23.16.5",
"@tanstack/react-query": "5.59.15",
"i18next": "23.16.2",
"i18next-browser-languagedetector": "8.0.0",
"idb": "8.0.0",
"lodash": "4.17.21",
"luxon": "3.5.0",
"next": "15.0.3",
"next": "14.2.15",
"react": "*",
"react-aria-components": "1.4.1",
"react-dom": "*",
"react-i18next": "15.1.1",
"react-intersection-observer": "9.13.1",
"react-select": "5.8.3",
"react-i18next": "15.0.3",
"react-select": "5.8.1",
"styled-components": "6.1.13",
"y-protocols": "1.0.6",
"yjs": "*",
"zustand": "5.0.1"
"zustand": "5.0.0"
},
"devDependencies": {
"@svgr/webpack": "8.1.0",
"@tanstack/react-query-devtools": "5.60.5",
"@tanstack/react-query-devtools": "5.59.15",
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/jest-dom": "6.6.2",
"@testing-library/react": "16.0.1",
"@testing-library/user-event": "14.5.2",
"@types/jest": "29.5.14",
"@types/lodash": "4.17.13",
"@types/jest": "29.5.13",
"@types/lodash": "4.17.12",
"@types/luxon": "3.4.2",
"@types/node": "*",
"@types/react": "18.3.12",
"@types/react": "18.3.11",
"@types/react-dom": "*",
"cross-env": "*",
"dotenv": "16.4.5",
@@ -64,7 +63,7 @@
"stylelint-config-standard": "36.0.1",
"stylelint-prettier": "5.0.2",
"typescript": "*",
"webpack": "5.96.1",
"workbox-webpack-plugin": "7.3.0"
"webpack": "5.95.0",
"workbox-webpack-plugin": "7.1.0"
}
}
src/frontend/apps/impress/public/assets/logo-open-desk.svg
+48
View File
@@ -0,0 +1,48 @@
<svg
width="128"
height="40"
viewBox="0 0 128 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.2902 26.2256V26.6237C23.2902 28.3039 21.9405 29.6701 20.2806 29.6701H13.2164C11.5565 29.6701 10.2068 28.3039 10.2068 26.6237V19.4729C10.2068 17.7927 11.5565 16.4265 13.2164 16.4265H13.6097V26.2274H23.2921L23.2902 26.2256Z"
fill="#927AFA"
/>
<path
d="M23.4214 23.8407H15.9639V15.4957C15.9639 12.6474 18.2534 10.3299 21.0673 10.3299H23.4232C26.6692 10.3299 29.3113 13.0044 29.3113 16.2901V17.8787C29.3113 21.1644 26.6692 23.8389 23.4232 23.8389L23.4214 23.8407ZM19.3649 20.3962H23.4214C24.7914 20.3962 25.9066 19.2673 25.9066 17.8806V16.2919C25.9066 14.9051 24.7914 13.7763 23.4214 13.7763H21.0654C20.1274 13.7763 19.3649 14.5482 19.3649 15.4976V20.3981V20.3962Z"
fill="#571EFA"
/>
<path
d="M38.9254 16.9629C41.6673 16.9629 43.4195 19.0001 43.4195 21.4952C43.4195 23.9903 41.6673 26.0275 38.9254 26.0275C36.1835 26.0275 34.4128 23.9903 34.4128 21.4952C34.4128 19.0001 36.1651 16.9629 38.9254 16.9629ZM38.9254 24.921C41.0247 24.921 42.1362 23.3399 42.1362 21.4952C42.1362 19.6505 41.0247 18.0693 38.9254 18.0693C36.8261 18.0693 35.6979 19.6505 35.6979 21.4952C35.6979 23.3399 36.8076 24.921 38.9254 24.921Z"
fill="black"
/>
<path
d="M45.0867 17.1386H46.3717V19.3515C46.9792 17.8936 48.2643 16.9629 50.1384 16.9629C52.5516 16.9629 54.1819 18.8076 54.1819 21.512C54.1819 24.2164 52.5516 26.0275 50.1384 26.0275C48.2292 26.0275 46.9626 25.0612 46.3717 23.6389V29.0496H45.0867V17.1386ZM49.7377 24.921C51.4733 24.921 52.8968 23.8314 52.8968 21.512C52.8968 19.1926 51.4733 18.0693 49.7377 18.0693C48.0021 18.0693 46.4234 19.2113 46.4234 21.512C46.4234 23.8127 48.0206 24.921 49.7377 24.921Z"
fill="black"
/>
<path
d="M59.6306 16.9629C62.0955 16.9629 63.7443 18.5272 63.7443 21.1961V21.7232H56.8204C56.8721 23.5511 57.7916 24.9547 59.7007 24.9547C61.2794 24.9547 62.2007 24.1118 62.5128 22.811H63.7794C63.4157 24.3566 62.3743 26.0256 59.7358 26.0256C56.9423 26.0256 55.5889 23.9174 55.5889 21.37C55.5889 18.559 57.2026 16.961 59.6324 16.961L59.6306 16.9629ZM62.4758 20.7046C62.354 19.0001 61.2258 18.0338 59.6121 18.0338C58.1018 18.0338 56.9736 19.0169 56.8352 20.7046H62.4758Z"
fill="black"
/>
<path
d="M65.5483 17.1386H66.8334V19.5626C67.3024 17.946 68.5173 16.9629 70.408 16.9629C72.2987 16.9629 73.497 18.2282 73.497 20.5121V25.8518H72.1953V20.6168C72.1953 18.8076 71.5011 18.0693 69.9741 18.0693C68.0299 18.0693 66.8334 19.7215 66.8334 22.0577V25.8518H65.5483V17.1386Z"
fill="black"
/>
<path
d="M75.6665 13.466H80.1624C81.4346 13.466 82.5572 13.6249 83.5302 13.9408C84.5014 14.2566 85.2972 14.8715 85.9157 15.7854C86.5343 16.6994 86.8445 17.9871 86.8445 19.6505C86.8445 21.3139 86.5343 22.6203 85.9157 23.5324C85.2972 24.4463 84.5014 25.0612 83.5302 25.3771C82.5572 25.6929 81.4364 25.8518 80.1624 25.8518H75.6665V13.466ZM80.1624 23.3754C81.0413 23.3754 81.7448 23.3044 82.271 23.1642C82.7972 23.024 83.2256 22.6876 83.5561 22.1531C83.8866 21.6204 84.0509 20.785 84.0509 19.6505C84.0509 18.516 83.8829 17.6955 83.5487 17.1554C83.2126 16.6171 82.7843 16.277 82.2636 16.1368C81.7429 15.9966 81.0432 15.9256 80.1643 15.9256H78.4453V23.3754H80.1643H80.1624Z"
fill="black"
/>
<path
d="M88.6575 18.9384C89.0453 18.2525 89.5826 17.7292 90.2713 17.3666C90.96 17.004 91.7502 16.8227 92.6402 16.8227C94.0988 16.8227 95.238 17.2152 96.0597 18.0002C96.8813 18.7852 97.2912 19.8692 97.2912 21.2503V21.9886H90.731C90.7772 22.6203 90.9747 23.1156 91.3219 23.4726C91.669 23.8295 92.1435 24.009 92.7454 24.009C93.2661 24.009 93.6963 23.8987 94.0379 23.6744C94.3795 23.452 94.5955 23.1362 94.6897 22.725H97.3097C97.1712 23.7081 96.704 24.5061 95.912 25.1135C95.1199 25.7228 94.0693 26.0275 92.762 26.0275C91.8019 26.0275 90.9692 25.8312 90.262 25.4387C89.5567 25.0463 89.0157 24.4986 88.6391 23.7959C88.2624 23.0932 88.0759 22.2858 88.0759 21.3718C88.0759 20.4579 88.2698 19.6243 88.6575 18.9384ZM94.7229 20.5457C94.6767 19.9832 94.4718 19.5496 94.1062 19.2449C93.7425 18.9403 93.2698 18.7889 92.6919 18.7889C92.114 18.7889 91.6653 18.9422 91.3126 19.2449C90.96 19.5496 90.7606 19.9832 90.7144 20.5457H94.7229Z"
fill="black"
/>
<path
d="M99.6342 25.1659C98.8698 24.5921 98.4875 23.7492 98.4875 22.6352H101.126C101.126 23.1399 101.283 23.5118 101.595 23.751C101.907 23.9921 102.387 24.1117 103.035 24.1117C103.51 24.1117 103.853 24.0501 104.067 23.9267C104.281 23.8034 104.389 23.6071 104.389 23.338C104.389 23.1511 104.326 22.9978 104.198 22.882C104.071 22.7642 103.868 22.6652 103.591 22.5829L100.917 21.8447C100.327 21.6933 99.8188 21.4204 99.3904 21.0279C98.9621 20.6354 98.7479 20.0934 98.7479 19.4019C98.7479 18.5702 99.0858 17.9329 99.7634 17.4862C100.441 17.0414 101.386 16.819 102.601 16.819C103.944 16.819 104.99 17.0918 105.742 17.6357C106.493 18.1796 106.87 18.9683 106.87 19.9981H104.232C104.232 19.144 103.694 18.716 102.618 18.716C102.236 18.716 101.935 18.7814 101.715 18.9085C101.495 19.0375 101.385 19.2075 101.385 19.4187C101.385 19.7813 101.702 20.0448 102.339 20.2093L104.387 20.7195C105.184 20.9195 105.825 21.226 106.305 21.6428C106.785 22.0577 107.025 22.6409 107.025 23.3903C107.025 24.2463 106.687 24.8986 106.01 25.349C105.332 25.7994 104.329 26.0256 102.998 26.0256C101.517 26.0256 100.395 25.7378 99.6305 25.164L99.6342 25.1659Z"
fill="black"
/>
<path
d="M108.486 12.939H111.124V20.4224L114.612 16.9965H117.84L113.484 21.3008L117.823 25.8518H114.612L111.124 22.1269V25.8518H108.486V12.939Z"
fill="black"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

src/frontend/apps/impress/src/__tests__/pages.test.tsx
+26
View File
@@ -0,0 +1,26 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import { AppWrapper } from '@/tests/utils';
import Page from '../pages';
jest.mock('next/navigation', () => ({
useRouter() {
return {
push: jest.fn(),
};
},
}));
describe('Page', () => {
it('checks Page rendering', () => {
render(<Page />, { wrapper: AppWrapper });
expect(
screen.getByRole('button', {
name: /Create a new document/i,
}),
).toBeInTheDocument();
});
});
src/frontend/apps/impress/src/assets/fonts/OpenSans/OpenSans-Bold.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/OpenSans/OpenSans-Italic.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/OpenSans/OpenSans-Regular.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/OpenSans/OpenSans-Semibold.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/OpenSans/OpenSans-font.css
+30
View File
@@ -0,0 +1,30 @@
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Bold.woff2') format('woff2');
font-weight: 700;
}
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Semibold.woff2') format('woff2');
font-weight: 600;
}
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Bold.woff2') format('woff2');
font-weight: 500;
}
src/frontend/apps/impress/src/components/Box.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { ComponentPropsWithRef, ReactHTML } from 'react';
import styled from 'styled-components';
import { CSSProperties, RuleSet } from 'styled-components/dist/types';
import { CSSProperties } from 'styled-components/dist/types';
import {
MarginPadding,
@@ -15,7 +15,7 @@ export interface BoxProps {
$align?: CSSProperties['alignItems'];
$background?: CSSProperties['background'];
$color?: CSSProperties['color'];
$css?: string | RuleSet<object>;
$css?: string;
$direction?: CSSProperties['flexDirection'];
$display?: CSSProperties['display'];
$effect?: 'show' | 'hide';
@@ -73,7 +73,7 @@ export const Box = styled('div')<BoxProps>`
${({ $transition }) => $transition && `transition: ${$transition};`}
${({ $width }) => $width && `width: ${$width};`}
${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
${({ $css }) => $css && `${$css};`}
${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
${({ $effect }) => {
let effect;
src/frontend/apps/impress/src/components/BoxButton.tsx
+5 -20
View File
@@ -1,13 +1,8 @@
import { forwardRef } from 'react';
import { css } from 'styled-components';
import { ComponentPropsWithRef, forwardRef } from 'react';
import { Box, BoxType } from './Box';
export type BoxButtonType = BoxType & {
disabled?: boolean;
};
/**
export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
/**
* Styleless button that extends the Box component.
@@ -22,7 +17,7 @@ export type BoxButtonType = BoxType & {
* </BoxButton>
* ```
*/
const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
const BoxButton = forwardRef<HTMLDivElement, BoxType>(
({ $css, ...props }, ref) => {
return (
<Box
@@ -31,25 +26,15 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
$background="none"
$margin="none"
$padding="none"
$css={css`
cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
$css={`
cursor: pointer;
border: none;
outline: none;
transition: all 0.2s ease-in-out;
font-family: inherit;
color: ${props.disabled
? 'var(--c--theme--colors--greyscale-400) !important'
: 'inherit'};
${$css || ''}
`}
{...props}
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
if (props.disabled) {
return;
}
props.onClick?.(event);
}}
/>
);
},
src/frontend/apps/impress/src/components/Card.tsx
+3 -3
View File
@@ -1,5 +1,4 @@
import { PropsWithChildren } from 'react';
import { css } from 'styled-components';
import { useCunninghamTheme } from '@/cunningham';
@@ -16,8 +15,9 @@ export const Card = ({
<Box
$background="white"
$radius="4px"
$css={css`
border: 1px solid ${colorsTokens()['greyscale-200']};
$css={`
box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
border: 1px solid ${colorsTokens()['card-border']};
${$css}
`}
{...props}
src/frontend/apps/impress/src/components/DropButton.tsx
+8 -3
View File
@@ -1,4 +1,9 @@
import { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
import React, {
PropsWithChildren,
ReactNode,
useEffect,
useState,
} from 'react';
import { Button, DialogTrigger, Popover } from 'react-aria-components';
import styled from 'styled-components';
@@ -6,7 +11,7 @@ const StyledPopover = styled(Popover)`
background-color: white;
border-radius: 4px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
border: 1px solid #dddddd;
opacity: 0;
transition: opacity 0.2s ease-in-out;
@@ -24,7 +29,7 @@ const StyledButton = styled(Button)`
text-wrap: nowrap;
`;
export interface DropButtonProps {
interface DropButtonProps {
button: ReactNode;
isOpen?: boolean;
onOpenChange?: (isOpen: boolean) => void;
src/frontend/apps/impress/src/components/DropdownMenu.tsx
-112
View File
@@ -1,112 +0,0 @@
import { PropsWithChildren, useState } from 'react';
import { css } from 'styled-components';
import { Box, BoxButton, BoxProps, DropButton, Icon } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
export type DropdownMenuOption = {
icon?: string;
label: string;
testId?: string;
callback?: () => void | Promise<unknown>;
danger?: boolean;
disabled?: boolean;
};
export type DropdownMenuProps = {
options: DropdownMenuOption[];
showArrow?: boolean;
arrowCss?: BoxProps['$css'];
};
export const DropdownMenu = ({
options,
children,
showArrow = false,
arrowCss,
}: PropsWithChildren<DropdownMenuProps>) => {
const theme = useCunninghamTheme();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
const [isOpen, setIsOpen] = useState(false);
const onOpenChange = (isOpen: boolean) => {
setIsOpen(isOpen);
};
return (
<DropButton
isOpen={isOpen}
onOpenChange={onOpenChange}
button={
showArrow ? (
<Box>
<div>{children}</div>
<Icon
$css={
arrowCss ??
css`
color: var(--c--theme--colors--primary-600);
`
}
iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
/>
</Box>
) : (
children
)
}
>
<Box>
{options.map((option, index) => {
const isDisabled = option.disabled !== undefined && option.disabled;
return (
<BoxButton
data-testid={option.testId}
$direction="row"
disabled={isDisabled}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onOpenChange?.(false);
void option.callback?.();
}}
key={option.label}
$align="center"
$background={colors['greyscale-000']}
$color={colors['primary-600']}
$padding={{ vertical: 'xs', horizontal: 'base' }}
$width="100%"
$gap={spacings['base']}
$css={css`
border: none;
font-size: var(--c--theme--font--sizes--sm);
color: var(--c--theme--colors--primary-600);
font-weight: 500;
cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
user-select: none;
border-bottom: ${index !== options.length - 1
? `1px solid var(--c--theme--colors--greyscale-200)`
: 'none'};
&:hover {
background-color: var(--c--theme--colors--greyscale-050);
}
`}
>
{option.icon && (
<Icon
$size="20px"
$theme={!isDisabled ? 'primary' : 'greyscale'}
$variation={!isDisabled ? '600' : '400'}
iconName={option.icon}
/>
)}
{option.label}
</BoxButton>
);
})}
</Box>
</DropButton>
);
};
src/frontend/apps/impress/src/components/Icon.tsx
+10 -21
View File
@@ -1,19 +1,6 @@
import { css } from 'styled-components';
import { Text, TextType } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
type IconProps = TextType & {
iconName: string;
};
export const Icon = ({ iconName, ...textProps }: IconProps) => {
return (
<Text $isMaterialIcon {...textProps}>
{iconName}
</Text>
);
};
interface IconBGProps extends TextType {
iconName: string;
}
@@ -42,21 +29,23 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
);
};
type IconOptionsProps = TextType & {
isHorizontal?: boolean;
};
interface IconOptionsProps {
isOpen: boolean;
'aria-label': string;
}
export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
return (
<Text
{...props}
aria-label={props['aria-label']}
$isMaterialIcon
$css={css`
$css={`
transition: all 0.3s ease-in-out;
transform: rotate(${isOpen ? '90' : '0'}deg);
user-select: none;
${props.$css}
`}
>
{isHorizontal ? 'more_horiz' : 'more_vert'}
more_vert
</Text>
);
};
src/frontend/apps/impress/src/components/Text.tsx
+1 -3
View File
@@ -33,7 +33,6 @@ export interface TextProps extends BoxProps {
| 'greyscale';
$variation?:
| 'text'
| '000'
| '100'
| '200'
| '300'
@@ -42,8 +41,7 @@ export interface TextProps extends BoxProps {
| '600'
| '700'
| '800'
| '900'
| '1000';
| '900';
}
export type TextType = ComponentPropsWithRef<typeof Text>;
src/frontend/apps/impress/src/components/__tests__/Box.spec.tsx
+2 -2
View File
@@ -17,8 +17,8 @@ describe('<Box />', () => {
);
expect(screen.getByText('My Box')).toHaveStyle(`
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-left: 4rem;
padding-right: 4rem;
padding-top: 3rem;
padding-bottom: 0.5rem;`);
});
src/frontend/apps/impress/src/components/index.ts
-2
View File
@@ -2,11 +2,9 @@ export * from './Box';
export * from './BoxButton';
export * from './Card';
export * from './DropButton';
export * from './DropdownMenu';
export * from './Icon';
export * from './InfiniteScroll';
export * from './Link';
export * from './SideModal';
export * from './separators/SeparatedSection';
export * from './Text';
export * from './TextErrors';
src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
-31
View File
@@ -1,31 +0,0 @@
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
export enum SeparatorVariant {
LIGHT = 'light',
DARK = 'dark',
}
type Props = {
variant?: SeparatorVariant;
};
export const HorizontalSeparator = ({
variant = SeparatorVariant.LIGHT,
}: Props) => {
const { colorsTokens } = useCunninghamTheme();
return (
<Box
$height="1px"
$width="100%"
$margin={{ vertical: 'base' }}
$background={
variant === SeparatorVariant.DARK
? '#e5e5e533'
: colorsTokens()['greyscale-100']
}
/>
);
};
src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
-32
View File
@@ -1,32 +0,0 @@
import { PropsWithChildren } from 'react';
import { css } from 'styled-components';
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
type Props = {
showSeparator?: boolean;
};
export const SeparatedSection = ({
showSeparator = true,
children,
}: PropsWithChildren<Props>) => {
const theme = useCunninghamTheme();
const colors = theme.colorsTokens();
const spacings = theme.spacingsTokens();
return (
<Box
$css={css`
padding: ${spacings['base']} 0;
${showSeparator &&
css`
border-bottom: 1px solid ${colors?.['greyscale-200']};
`}
`}
>
{children}
</Box>
);
};
src/frontend/apps/impress/src/cunningham/cunningham-style.css
+1 -13
View File
@@ -4,6 +4,7 @@
@import url('./cunningham-tokens.css');
@import url('./cunningham-custom-tokens.css');
@import url('../assets/fonts/Marianne/Marianne-font.css');
@import url('../assets/fonts/OpenSans/OpenSans-font.css');
.c__input,
.c__field,
@@ -351,11 +352,6 @@ input:-webkit-autofill:focus {
background-color: transparent;
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--2xs);
gap: var(--c--theme--spacings--2xs);
}
.c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s);
}
@@ -447,7 +443,6 @@ input:-webkit-autofill:focus {
}
.c__button--tertiary {
background-color: var(--c--components--button--tertiary--background--color);
color: var(--c--components--button--tertiary--color);
border: none;
}
@@ -460,13 +455,6 @@ input:-webkit-autofill:focus {
color: var(--c--components--button--tertiary--color);
}
.c__button--tertiary:active {
background-color: var(
--c--components--button--tertiary--background--color-active
);
color: var(--c--components--button--tertiary--color-active);
}
.c__button--tertiary:disabled {
background-color: var(
--c--components--button--tertiary--background--color-disabled
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+216 -660
View File
@@ -71,26 +71,19 @@
--c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-bg: #fafafa;
--c--theme--colors--primary-050: #f5f5fe;
--c--theme--colors--primary-150: #e5eefa;
--c--theme--colors--primary-950: #1b1b35;
--c--theme--colors--info-150: #e5eefa;
--c--theme--colors--greyscale-1000: #161616;
--c--theme--font--sizes--h1: 2rem;
--c--theme--font--sizes--h2: 1.75rem;
--c--theme--font--sizes--h3: 1.5rem;
--c--theme--font--sizes--h4: 1.375rem;
--c--theme--font--sizes--h5: 1.25rem;
--c--theme--font--sizes--h6: 1.125rem;
--c--theme--font--sizes--h1: 2.2rem;
--c--theme--font--sizes--h2: 1.7rem;
--c--theme--font--sizes--h3: 1.37rem;
--c--theme--font--sizes--h4: 1.15rem;
--c--theme--font--sizes--h5: 1rem;
--c--theme--font--sizes--h6: 0.87rem;
--c--theme--font--sizes--l: 1rem;
--c--theme--font--sizes--m: 0.8125rem;
--c--theme--font--sizes--s: 0.75rem;
--c--theme--font--sizes--xs: 0.75rem;
--c--theme--font--sizes--sm: 0.875rem;
--c--theme--font--sizes--md: 1rem;
--c--theme--font--sizes--lg: 1.125rem;
--c--theme--font--sizes--ml: 0.938rem;
--c--theme--font--sizes--xl: 1.25rem;
--c--theme--font--sizes--xl: 1.5rem;
--c--theme--font--sizes--t: 0.6875rem;
--c--theme--font--weights--thin: 100;
--c--theme--font--weights--light: 300;
@@ -111,7 +104,7 @@
--c--theme--font--letterspacings--m: normal;
--c--theme--font--letterspacings--s: normal;
--c--theme--spacings--0: 0;
--c--theme--spacings--xl: 2.5rem;
--c--theme--spacings--xl: 4rem;
--c--theme--spacings--l: 3rem;
--c--theme--spacings--b: 1.625rem;
--c--theme--spacings--s: 1rem;
@@ -121,20 +114,6 @@
--c--theme--spacings--auto: auto;
--c--theme--spacings--bx: 2.2rem;
--c--theme--spacings--full: 100%;
--c--theme--spacings--4xs: 0.125rem;
--c--theme--spacings--3xs: 0.25rem;
--c--theme--spacings--2xs: 0.375rem;
--c--theme--spacings--xs: 0.5rem;
--c--theme--spacings--sm: 0.75rem;
--c--theme--spacings--base: 1rem;
--c--theme--spacings--md: 1.5rem;
--c--theme--spacings--lg: 2rem;
--c--theme--spacings--xxl: 3rem;
--c--theme--spacings--xxxl: 3.5rem;
--c--theme--spacings--4xl: 4rem;
--c--theme--spacings--5xl: 4.5rem;
--c--theme--spacings--6xl: 6rem;
--c--theme--spacings--7xl: 7.5rem;
--c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
--c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
--c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -296,13 +275,7 @@
--c--components--button--tertiary--color-disabled: var(
--c--theme--colors--greyscale-600
);
--c--components--button--tertiary--background--color: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary--background--color-hover: var(
--c--theme--colors--primary-300
);
--c--components--button--tertiary--background--color-active: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary--background--color-disabled: var(
@@ -363,18 +336,18 @@
}
.cunningham-theme--dsfr {
--c--theme--colors--card-border: #e5e5e5;
--c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-text: #000091;
--c--theme--colors--primary-100: #ececfe;
--c--theme--colors--primary-100: #f5f5fe;
--c--theme--colors--primary-150: #f4f4fd;
--c--theme--colors--primary-200: #e3e3fd;
--c--theme--colors--primary-300: #cacafb;
--c--theme--colors--primary-400: #8585f6;
--c--theme--colors--primary-200: #ececfe;
--c--theme--colors--primary-300: #e3e3fd;
--c--theme--colors--primary-400: #cacafb;
--c--theme--colors--primary-500: #6a6af4;
--c--theme--colors--primary-600: #313178;
--c--theme--colors--primary-600: #000091;
--c--theme--colors--primary-700: #272747;
--c--theme--colors--primary-800: #000091;
--c--theme--colors--primary-900: #21213f;
--c--theme--colors--primary-800: #21213f;
--c--theme--colors--primary-900: #1c1a36;
--c--theme--colors--secondary-text: #fff;
--c--theme--colors--secondary-100: #fee9ea;
--c--theme--colors--secondary-200: #fedfdf;
@@ -386,22 +359,16 @@
--c--theme--colors--secondary-800: #341f1f;
--c--theme--colors--secondary-900: #2b1919;
--c--theme--colors--greyscale-text: #303c4b;
--c--theme--colors--greyscale-000: #fff;
--c--theme--colors--greyscale-050: #f6f6f6;
--c--theme--colors--greyscale-000: #f6f6f6;
--c--theme--colors--greyscale-100: #eee;
--c--theme--colors--greyscale-200: #e5e5e5;
--c--theme--colors--greyscale-250: #ddd;
--c--theme--colors--greyscale-300: #cecece;
--c--theme--colors--greyscale-350: #ddd;
--c--theme--colors--greyscale-400: #929292;
--c--theme--colors--greyscale-500: #7c7c7c;
--c--theme--colors--greyscale-600: #666;
--c--theme--colors--greyscale-700: #3a3a3a;
--c--theme--colors--greyscale-750: #353535;
--c--theme--colors--greyscale-300: #e1e1e1;
--c--theme--colors--greyscale-400: #ddd;
--c--theme--colors--greyscale-500: #cecece;
--c--theme--colors--greyscale-600: #7b7b7b;
--c--theme--colors--greyscale-700: #666;
--c--theme--colors--greyscale-800: #2a2a2a;
--c--theme--colors--greyscale-900: #242424;
--c--theme--colors--greyscale-950: #1e1e1e;
--c--theme--colors--greyscale-1000: #161616;
--c--theme--colors--greyscale-900: #1e1e1e;
--c--theme--colors--success-text: #1f8d49;
--c--theme--colors--success-100: #dffee6;
--c--theme--colors--success-200: #b8fec9;
@@ -556,6 +523,199 @@
--c--components--la-gauffre--activated: true;
}
.cunningham-theme--open-desk {
--c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-text: #637089;
--c--theme--colors--primary-100: #f7f5ff;
--c--theme--colors--primary-200: #ece7fe;
--c--theme--colors--primary-300: #dcd2fe;
--c--theme--colors--primary-400: #c8b9fd;
--c--theme--colors--primary-500: #8e75fa;
--c--theme--colors--primary-600: #7051fa;
--c--theme--colors--primary-700: #571efa;
--c--theme--colors--primary-800: #4519c2;
--c--theme--colors--primary-900: #341291;
--c--theme--colors--secondary-text: #fff;
--c--theme--colors--secondary-100: #edfdfb;
--c--theme--colors--secondary-200: #bff9f2;
--c--theme--colors--secondary-300: #71efe1;
--c--theme--colors--secondary-400: #00e6cc;
--c--theme--colors--secondary-500: #00a896;
--c--theme--colors--secondary-600: #008a7b;
--c--theme--colors--secondary-700: #006c60;
--c--theme--colors--secondary-800: #00564d;
--c--theme--colors--secondary-900: #004039;
--c--theme--colors--greyscale-text: #303c4b;
--c--theme--colors--greyscale-000: #fff;
--c--theme--colors--greyscale-100: #eeeff2;
--c--theme--colors--greyscale-200: #d3d7de;
--c--theme--colors--greyscale-300: #b6bcc8;
--c--theme--colors--greyscale-400: #7c879c;
--c--theme--colors--greyscale-500: #637089;
--c--theme--colors--greyscale-600: #4d5b79;
--c--theme--colors--greyscale-700: #364768;
--c--theme--colors--greyscale-800: #203257;
--c--theme--colors--greyscale-900: #1e1e1e;
--c--theme--colors--success-text: #1f8d49;
--c--theme--colors--success-100: #dffee6;
--c--theme--colors--success-200: #b8fec9;
--c--theme--colors--success-300: #88fdaa;
--c--theme--colors--success-400: #3bea7e;
--c--theme--colors--success-500: #1f8d49;
--c--theme--colors--success-600: #18753c;
--c--theme--colors--success-700: #204129;
--c--theme--colors--success-800: #1e2e22;
--c--theme--colors--success-900: #19281d;
--c--theme--colors--info-text: #0078f3;
--c--theme--colors--info-100: #f4f6ff;
--c--theme--colors--info-200: #e8edff;
--c--theme--colors--info-300: #dde5ff;
--c--theme--colors--info-400: #bdcdff;
--c--theme--colors--info-500: #0078f3;
--c--theme--colors--info-600: #0063cb;
--c--theme--colors--info-700: #f4f6ff;
--c--theme--colors--info-800: #222a3f;
--c--theme--colors--info-900: #1d2437;
--c--theme--colors--warning-text: #d64d00;
--c--theme--colors--warning-100: #fff4f3;
--c--theme--colors--warning-200: #ffe9e6;
--c--theme--colors--warning-300: #ffded9;
--c--theme--colors--warning-400: #ffbeb4;
--c--theme--colors--warning-500: #d64d00;
--c--theme--colors--warning-600: #b34000;
--c--theme--colors--warning-700: #5e2c21;
--c--theme--colors--warning-800: #3e241e;
--c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-text: #e1000f;
--c--theme--colors--danger-100: #fef4f4;
--c--theme--colors--danger-200: #fee9e9;
--c--theme--colors--danger-300: #fddede;
--c--theme--colors--danger-400: #fcbfbf;
--c--theme--colors--danger-500: #e1000f;
--c--theme--colors--danger-600: #c9191e;
--c--theme--colors--danger-700: #642727;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #3a1c1c;
--c--theme--font--families--accent: open sans;
--c--theme--font--families--base: open sans;
--c--theme--logo--src: /assets/logo-open-desk.svg;
--c--theme--logo--widthHeader: 110px;
--c--theme--logo--widthFooter: 220px;
--c--theme--logo--alt: opendesk logo;
--c--components--alert--border-radius: 0;
--c--components--button--medium-height: 48px;
--c--components--button--border-radius: 4px;
--c--components--button--primary--background--color: var(
--c--theme--colors--primary-700
);
--c--components--button--primary--background--color-hover: var(
--c--theme--colors--primary-900
);
--c--components--button--primary--background--color-active: var(
--c--theme--colors--primary-900
);
--c--components--button--primary--color: #fff;
--c--components--button--primary--color-hover: #fff;
--c--components--button--primary--color-active: #fff;
--c--components--button--primary-text--background--color-hover: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--background--color-active: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--button--secondary--background--color-hover: var(
--c--theme--colors--primary-100
);
--c--components--button--secondary--background--color-active: #ededed;
--c--components--button--secondary--border--color: var(
--c--theme--colors--primary-600
);
--c--components--button--secondary--border--color-hover: var(
--c--theme--colors--primary-600
);
--c--components--button--secondary--color: var(
--c--theme--colors--primary-600
);
--c--components--button--secondary--color-hover: var(
--c--theme--colors--primary-700
);
--c--components--button--tertiary-text--background--color-hover: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary-text--color: var(
--c--theme--colors--primary-600
);
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-700
);
--c--components--datagrid--header--color: var(
--c--theme--colors--primary-500
);
--c--components--datagrid--header--size: var(--c--theme--font--sizes--s);
--c--components--datagrid--body--background-color: transparent;
--c--components--datagrid--body--background-color-hover: #f4f4fd;
--c--components--datagrid--pagination--background-color: var(
--c--theme--colors--primary-100
);
--c--components--datagrid--pagination--border-color: var(
--c--theme--colors--primary-600
);
--c--components--datagrid--pagination--background-color-active: var(
--c--theme--colors--primary-300
);
--c--components--forms-checkbox--border-radius: 0;
--c--components--forms-checkbox--color: var(
--c--theme--colors--greyscale-600
);
--c--components--forms-checkbox--text--color: var(
--c--theme--colors--greyscale-600
);
--c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--t);
--c--components--forms-datepicker--border-radius: 0;
--c--components--forms-fileuploader--border-radius: 0;
--c--components--forms-field--color: var(--c--theme--colors--primary-600);
--c--components--forms-input--border-radius: 4px;
--c--components--forms-input--background-color: #fff;
--c--components--forms-input--border-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-input--box-shadow-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-input--value-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-input--font-size: 14px;
--c--components--forms-labelledbox--label-color--big: var(
--c--theme--colors--primary-600
);
--c--components--forms-select--item-font-size: 14px;
--c--components--forms-select--border-radius: 4px;
--c--components--forms-select--border-radius-hover: 4px;
--c--components--forms-select--background-color: #fff;
--c--components--forms-select--border-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-select--border-color-hover: var(
--c--theme--colors--primary-600
);
--c--components--forms-select--box-shadow-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-radio--accent-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-switch--handle-border-radius: 2px;
--c--components--forms-switch--rail-border-radius: 4px;
--c--components--forms-switch--accent-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-textarea--border-radius: 0;
}
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);
}
@@ -844,26 +1004,14 @@
color: var(--c--theme--colors--primary-bg);
}
.clr-primary-050 {
color: var(--c--theme--colors--primary-050);
}
.clr-primary-150 {
color: var(--c--theme--colors--primary-150);
}
.clr-primary-950 {
color: var(--c--theme--colors--primary-950);
}
.clr-info-150 {
color: var(--c--theme--colors--info-150);
}
.clr-greyscale-1000 {
color: var(--c--theme--colors--greyscale-1000);
}
.bg-secondary-text {
background-color: var(--c--theme--colors--secondary-text);
}
@@ -1152,26 +1300,14 @@
background-color: var(--c--theme--colors--primary-bg);
}
.bg-primary-050 {
background-color: var(--c--theme--colors--primary-050);
}
.bg-primary-150 {
background-color: var(--c--theme--colors--primary-150);
}
.bg-primary-950 {
background-color: var(--c--theme--colors--primary-950);
}
.bg-info-150 {
background-color: var(--c--theme--colors--info-150);
}
.bg-greyscale-1000 {
background-color: var(--c--theme--colors--greyscale-1000);
}
.fw-thin {
font-weight: var(--c--theme--font--weights--thin);
}
@@ -1245,26 +1381,6 @@
letter-spacing: var(--c--theme--font--letterspacings--s);
}
.fs-xs {
font-size: var(--c--theme--font--sizes--xs);
letter-spacing: var(--c--theme--font--letterspacings--xs);
}
.fs-sm {
font-size: var(--c--theme--font--sizes--sm);
letter-spacing: var(--c--theme--font--letterspacings--sm);
}
.fs-md {
font-size: var(--c--theme--font--sizes--md);
letter-spacing: var(--c--theme--font--letterspacings--md);
}
.fs-lg {
font-size: var(--c--theme--font--sizes--lg);
letter-spacing: var(--c--theme--font--letterspacings--lg);
}
.fs-ml {
font-size: var(--c--theme--font--sizes--ml);
letter-spacing: var(--c--theme--font--letterspacings--ml);
@@ -1508,286 +1624,6 @@
margin-right: var(--c--theme--spacings--full);
}
.m-4xs {
margin: var(--c--theme--spacings--4xs);
}
.mb-4xs {
margin-bottom: var(--c--theme--spacings--4xs);
}
.mt-4xs {
margin-top: var(--c--theme--spacings--4xs);
}
.ml-4xs {
margin-left: var(--c--theme--spacings--4xs);
}
.mr-4xs {
margin-right: var(--c--theme--spacings--4xs);
}
.m-3xs {
margin: var(--c--theme--spacings--3xs);
}
.mb-3xs {
margin-bottom: var(--c--theme--spacings--3xs);
}
.mt-3xs {
margin-top: var(--c--theme--spacings--3xs);
}
.ml-3xs {
margin-left: var(--c--theme--spacings--3xs);
}
.mr-3xs {
margin-right: var(--c--theme--spacings--3xs);
}
.m-2xs {
margin: var(--c--theme--spacings--2xs);
}
.mb-2xs {
margin-bottom: var(--c--theme--spacings--2xs);
}
.mt-2xs {
margin-top: var(--c--theme--spacings--2xs);
}
.ml-2xs {
margin-left: var(--c--theme--spacings--2xs);
}
.mr-2xs {
margin-right: var(--c--theme--spacings--2xs);
}
.m-xs {
margin: var(--c--theme--spacings--xs);
}
.mb-xs {
margin-bottom: var(--c--theme--spacings--xs);
}
.mt-xs {
margin-top: var(--c--theme--spacings--xs);
}
.ml-xs {
margin-left: var(--c--theme--spacings--xs);
}
.mr-xs {
margin-right: var(--c--theme--spacings--xs);
}
.m-sm {
margin: var(--c--theme--spacings--sm);
}
.mb-sm {
margin-bottom: var(--c--theme--spacings--sm);
}
.mt-sm {
margin-top: var(--c--theme--spacings--sm);
}
.ml-sm {
margin-left: var(--c--theme--spacings--sm);
}
.mr-sm {
margin-right: var(--c--theme--spacings--sm);
}
.m-base {
margin: var(--c--theme--spacings--base);
}
.mb-base {
margin-bottom: var(--c--theme--spacings--base);
}
.mt-base {
margin-top: var(--c--theme--spacings--base);
}
.ml-base {
margin-left: var(--c--theme--spacings--base);
}
.mr-base {
margin-right: var(--c--theme--spacings--base);
}
.m-md {
margin: var(--c--theme--spacings--md);
}
.mb-md {
margin-bottom: var(--c--theme--spacings--md);
}
.mt-md {
margin-top: var(--c--theme--spacings--md);
}
.ml-md {
margin-left: var(--c--theme--spacings--md);
}
.mr-md {
margin-right: var(--c--theme--spacings--md);
}
.m-lg {
margin: var(--c--theme--spacings--lg);
}
.mb-lg {
margin-bottom: var(--c--theme--spacings--lg);
}
.mt-lg {
margin-top: var(--c--theme--spacings--lg);
}
.ml-lg {
margin-left: var(--c--theme--spacings--lg);
}
.mr-lg {
margin-right: var(--c--theme--spacings--lg);
}
.m-xxl {
margin: var(--c--theme--spacings--xxl);
}
.mb-xxl {
margin-bottom: var(--c--theme--spacings--xxl);
}
.mt-xxl {
margin-top: var(--c--theme--spacings--xxl);
}
.ml-xxl {
margin-left: var(--c--theme--spacings--xxl);
}
.mr-xxl {
margin-right: var(--c--theme--spacings--xxl);
}
.m-xxxl {
margin: var(--c--theme--spacings--xxxl);
}
.mb-xxxl {
margin-bottom: var(--c--theme--spacings--xxxl);
}
.mt-xxxl {
margin-top: var(--c--theme--spacings--xxxl);
}
.ml-xxxl {
margin-left: var(--c--theme--spacings--xxxl);
}
.mr-xxxl {
margin-right: var(--c--theme--spacings--xxxl);
}
.m-4xl {
margin: var(--c--theme--spacings--4xl);
}
.mb-4xl {
margin-bottom: var(--c--theme--spacings--4xl);
}
.mt-4xl {
margin-top: var(--c--theme--spacings--4xl);
}
.ml-4xl {
margin-left: var(--c--theme--spacings--4xl);
}
.mr-4xl {
margin-right: var(--c--theme--spacings--4xl);
}
.m-5xl {
margin: var(--c--theme--spacings--5xl);
}
.mb-5xl {
margin-bottom: var(--c--theme--spacings--5xl);
}
.mt-5xl {
margin-top: var(--c--theme--spacings--5xl);
}
.ml-5xl {
margin-left: var(--c--theme--spacings--5xl);
}
.mr-5xl {
margin-right: var(--c--theme--spacings--5xl);
}
.m-6xl {
margin: var(--c--theme--spacings--6xl);
}
.mb-6xl {
margin-bottom: var(--c--theme--spacings--6xl);
}
.mt-6xl {
margin-top: var(--c--theme--spacings--6xl);
}
.ml-6xl {
margin-left: var(--c--theme--spacings--6xl);
}
.mr-6xl {
margin-right: var(--c--theme--spacings--6xl);
}
.m-7xl {
margin: var(--c--theme--spacings--7xl);
}
.mb-7xl {
margin-bottom: var(--c--theme--spacings--7xl);
}
.mt-7xl {
margin-top: var(--c--theme--spacings--7xl);
}
.ml-7xl {
margin-left: var(--c--theme--spacings--7xl);
}
.mr-7xl {
margin-right: var(--c--theme--spacings--7xl);
}
.p-0 {
padding: var(--c--theme--spacings--0);
}
@@ -2007,283 +1843,3 @@
.pr-full {
padding-right: var(--c--theme--spacings--full);
}
.p-4xs {
padding: var(--c--theme--spacings--4xs);
}
.pb-4xs {
padding-bottom: var(--c--theme--spacings--4xs);
}
.pt-4xs {
padding-top: var(--c--theme--spacings--4xs);
}
.pl-4xs {
padding-left: var(--c--theme--spacings--4xs);
}
.pr-4xs {
padding-right: var(--c--theme--spacings--4xs);
}
.p-3xs {
padding: var(--c--theme--spacings--3xs);
}
.pb-3xs {
padding-bottom: var(--c--theme--spacings--3xs);
}
.pt-3xs {
padding-top: var(--c--theme--spacings--3xs);
}
.pl-3xs {
padding-left: var(--c--theme--spacings--3xs);
}
.pr-3xs {
padding-right: var(--c--theme--spacings--3xs);
}
.p-2xs {
padding: var(--c--theme--spacings--2xs);
}
.pb-2xs {
padding-bottom: var(--c--theme--spacings--2xs);
}
.pt-2xs {
padding-top: var(--c--theme--spacings--2xs);
}
.pl-2xs {
padding-left: var(--c--theme--spacings--2xs);
}
.pr-2xs {
padding-right: var(--c--theme--spacings--2xs);
}
.p-xs {
padding: var(--c--theme--spacings--xs);
}
.pb-xs {
padding-bottom: var(--c--theme--spacings--xs);
}
.pt-xs {
padding-top: var(--c--theme--spacings--xs);
}
.pl-xs {
padding-left: var(--c--theme--spacings--xs);
}
.pr-xs {
padding-right: var(--c--theme--spacings--xs);
}
.p-sm {
padding: var(--c--theme--spacings--sm);
}
.pb-sm {
padding-bottom: var(--c--theme--spacings--sm);
}
.pt-sm {
padding-top: var(--c--theme--spacings--sm);
}
.pl-sm {
padding-left: var(--c--theme--spacings--sm);
}
.pr-sm {
padding-right: var(--c--theme--spacings--sm);
}
.p-base {
padding: var(--c--theme--spacings--base);
}
.pb-base {
padding-bottom: var(--c--theme--spacings--base);
}
.pt-base {
padding-top: var(--c--theme--spacings--base);
}
.pl-base {
padding-left: var(--c--theme--spacings--base);
}
.pr-base {
padding-right: var(--c--theme--spacings--base);
}
.p-md {
padding: var(--c--theme--spacings--md);
}
.pb-md {
padding-bottom: var(--c--theme--spacings--md);
}
.pt-md {
padding-top: var(--c--theme--spacings--md);
}
.pl-md {
padding-left: var(--c--theme--spacings--md);
}
.pr-md {
padding-right: var(--c--theme--spacings--md);
}
.p-lg {
padding: var(--c--theme--spacings--lg);
}
.pb-lg {
padding-bottom: var(--c--theme--spacings--lg);
}
.pt-lg {
padding-top: var(--c--theme--spacings--lg);
}
.pl-lg {
padding-left: var(--c--theme--spacings--lg);
}
.pr-lg {
padding-right: var(--c--theme--spacings--lg);
}
.p-xxl {
padding: var(--c--theme--spacings--xxl);
}
.pb-xxl {
padding-bottom: var(--c--theme--spacings--xxl);
}
.pt-xxl {
padding-top: var(--c--theme--spacings--xxl);
}
.pl-xxl {
padding-left: var(--c--theme--spacings--xxl);
}
.pr-xxl {
padding-right: var(--c--theme--spacings--xxl);
}
.p-xxxl {
padding: var(--c--theme--spacings--xxxl);
}
.pb-xxxl {
padding-bottom: var(--c--theme--spacings--xxxl);
}
.pt-xxxl {
padding-top: var(--c--theme--spacings--xxxl);
}
.pl-xxxl {
padding-left: var(--c--theme--spacings--xxxl);
}
.pr-xxxl {
padding-right: var(--c--theme--spacings--xxxl);
}
.p-4xl {
padding: var(--c--theme--spacings--4xl);
}
.pb-4xl {
padding-bottom: var(--c--theme--spacings--4xl);
}
.pt-4xl {
padding-top: var(--c--theme--spacings--4xl);
}
.pl-4xl {
padding-left: var(--c--theme--spacings--4xl);
}
.pr-4xl {
padding-right: var(--c--theme--spacings--4xl);
}
.p-5xl {
padding: var(--c--theme--spacings--5xl);
}
.pb-5xl {
padding-bottom: var(--c--theme--spacings--5xl);
}
.pt-5xl {
padding-top: var(--c--theme--spacings--5xl);
}
.pl-5xl {
padding-left: var(--c--theme--spacings--5xl);
}
.pr-5xl {
padding-right: var(--c--theme--spacings--5xl);
}
.p-6xl {
padding: var(--c--theme--spacings--6xl);
}
.pb-6xl {
padding-bottom: var(--c--theme--spacings--6xl);
}
.pt-6xl {
padding-top: var(--c--theme--spacings--6xl);
}
.pl-6xl {
padding-left: var(--c--theme--spacings--6xl);
}
.pr-6xl {
padding-right: var(--c--theme--spacings--6xl);
}
.p-7xl {
padding: var(--c--theme--spacings--7xl);
}
.pb-7xl {
padding-bottom: var(--c--theme--spacings--7xl);
}
.pt-7xl {
padding-top: var(--c--theme--spacings--7xl);
}
.pl-7xl {
padding-left: var(--c--theme--spacings--7xl);
}
.pr-7xl {
padding-right: var(--c--theme--spacings--7xl);
}
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+225 -71
View File
@@ -13,7 +13,7 @@ export const tokens = {
'secondary-700': '#97A3AE',
'secondary-800': '#757E87',
'secondary-900': '#596067',
'info-text': '#fff',
'info-text': '#FFFFFF',
'info-100': '#EBF2FC',
'info-200': '#8CB5EA',
'info-300': '#5894E1',
@@ -32,7 +32,7 @@ export const tokens = {
'greyscale-700': '#555F6B',
'greyscale-800': '#303C4B',
'greyscale-900': '#0C1A2B',
'greyscale-000': '#fff',
'greyscale-000': '#FFFFFF',
'primary-100': '#EDF5FA',
'primary-200': '#8CB5EA',
'primary-300': '#5894E1',
@@ -69,35 +69,28 @@ export const tokens = {
'danger-700': '#9B0000',
'danger-800': '#780000',
'danger-900': '#5C0000',
'primary-text': '#fff',
'success-text': '#fff',
'warning-text': '#fff',
'danger-text': '#fff',
'primary-text': '#FFFFFF',
'success-text': '#FFFFFF',
'warning-text': '#FFFFFF',
'danger-text': '#FFFFFF',
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-050': '#F5F5FE',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA',
'greyscale-1000': '#161616',
},
font: {
sizes: {
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
h1: '2.2rem',
h2: '1.7rem',
h3: '1.37rem',
h4: '1.15rem',
h5: '1rem',
h6: '0.87rem',
l: '1rem',
m: '0.8125rem',
s: '0.75rem',
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem',
xl: '1.25rem',
xl: '1.50rem',
t: '0.6875rem',
},
weights: {
@@ -127,7 +120,7 @@ export const tokens = {
},
spacings: {
'0': '0',
xl: '2.5rem',
xl: '4rem',
l: '3rem',
b: '1.625rem',
s: '1rem',
@@ -137,20 +130,6 @@ export const tokens = {
auto: 'auto',
bx: '2.2rem',
full: '100%',
'4xs': '0.125rem',
'3xs': '0.25rem',
'2xs': '0.375rem',
xs: '0.5rem',
sm: '0.75rem',
base: '1rem',
md: '1.5rem',
lg: '2rem',
xxl: '3rem',
xxxl: '3.5rem',
'4xl': '4rem',
'5xl': '4.5rem',
'6xl': '6rem',
'7xl': '7.5rem',
},
transitions: {
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -223,7 +202,7 @@ export const tokens = {
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#fff',
'menu-background-color': '#ffffff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-300)',
},
@@ -244,7 +223,7 @@ export const tokens = {
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
},
},
modal: { 'background-color': '#fff' },
modal: { 'background-color': '#ffffff' },
button: {
'border-radius': {
active: 'var(--c--components--button--border-radius)',
@@ -291,9 +270,7 @@ export const tokens = {
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
@@ -357,19 +334,19 @@ export const tokens = {
dsfr: {
theme: {
colors: {
'card-border': '#E5E5E5',
'card-border': '#ededed',
'primary-text': '#000091',
'primary-100': '#ECECFE',
'primary-100': '#f5f5fe',
'primary-150': '#F4F4FD',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-200': '#ececfe',
'primary-300': '#e3e3fd',
'primary-400': '#cacafb',
'primary-500': '#6a6af4',
'primary-600': '#000091',
'primary-700': '#272747',
'primary-800': '#000091',
'primary-900': '#21213F',
'secondary-text': '#fff',
'primary-800': '#21213f',
'primary-900': '#1c1a36',
'secondary-text': '#FFFFFF',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
@@ -380,22 +357,16 @@ export const tokens = {
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-text': '#303C4B',
'greyscale-000': '#fff',
'greyscale-050': '#F6F6F6',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-250': '#ddd',
'greyscale-300': '#CECECE',
'greyscale-350': '#ddd',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-750': '#353535',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'greyscale-000': '#f6f6f6',
'greyscale-100': '#eeeeee',
'greyscale-200': '#e5e5e5',
'greyscale-300': '#e1e1e1',
'greyscale-400': '#dddddd',
'greyscale-500': '#cecece',
'greyscale-600': '#7b7b7b',
'greyscale-700': '#666666',
'greyscale-800': '#2a2a2a',
'greyscale-900': '#1e1e1e',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
@@ -456,9 +427,9 @@ export const tokens = {
'color-hover': '#1212ff',
'color-active': '#2323ff',
},
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
},
'primary-text': {
background: {
@@ -515,7 +486,7 @@ export const tokens = {
},
'forms-input': {
'border-radius': '4px',
'background-color': '#fff',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
'value-color': 'var(--c--theme--colors--primary-text)',
@@ -531,7 +502,7 @@ export const tokens = {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#fff',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-text)',
'border-color-hover': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
@@ -545,5 +516,188 @@ export const tokens = {
'la-gauffre': { activated: true },
},
},
'open-desk': {
theme: {
colors: {
'card-border': '#ededed',
'primary-text': '#637089',
'primary-100': '#F7F5FF',
'primary-200': '#ECE7FE',
'primary-300': '#DCD2FE',
'primary-400': '#C8B9FD',
'primary-500': '#8E75FA',
'primary-600': '#7051FA',
'primary-700': '#571EFA',
'primary-800': '#4519C2',
'primary-900': '#341291',
'secondary-text': '#FFFFFF',
'secondary-100': '#EDFDFB',
'secondary-200': '#BFF9F2',
'secondary-300': '#71EFE1',
'secondary-400': '#00E6CC',
'secondary-500': '#00A896',
'secondary-600': '#008A7B',
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
'greyscale-text': '#303C4B',
'greyscale-000': '#ffffff',
'greyscale-100': '#EEEFF2',
'greyscale-200': '#D3D7DE',
'greyscale-300': '#B6BCC8',
'greyscale-400': '#7C879C',
'greyscale-500': '#637089',
'greyscale-600': '#4D5B79',
'greyscale-700': '#364768',
'greyscale-800': '#203257',
'greyscale-900': '#1e1e1e',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
},
font: { families: { accent: 'Open Sans', base: 'Open Sans' } },
logo: {
src: '/assets/logo-open-desk.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'OpenDesk Logo',
},
},
components: {
alert: { 'border-radius': '0' },
button: {
'medium-height': '48px',
'border-radius': '4px',
primary: {
background: {
color: 'var(--c--theme--colors--primary-700)',
'color-hover': 'var(--c--theme--colors--primary-900)',
'color-active': 'var(--c--theme--colors--primary-900)',
},
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
},
'primary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
},
secondary: {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': '#EDEDED',
},
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
},
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
},
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-500)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
'background-color': 'transparent',
'background-color-hover': '#F4F4FD',
},
pagination: {
'background-color': 'var(--c--theme--colors--primary-100)',
'border-color': 'var(--c--theme--colors--primary-600)',
'background-color-active': 'var(--c--theme--colors--primary-300)',
},
},
'forms-checkbox': {
'border-radius': '0',
color: 'var(--c--theme--colors--greyscale-600)',
text: {
color: 'var(--c--theme--colors--greyscale-600)',
size: 'var(--c--theme--font--sizes--t)',
},
},
'forms-datepicker': { 'border-radius': '0' },
'forms-fileuploader': { 'border-radius': '0' },
'forms-field': { color: 'var(--c--theme--colors--primary-600)' },
'forms-input': {
'border-radius': '4px',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-600)',
'box-shadow-color': 'var(--c--theme--colors--primary-600)',
'value-color': 'var(--c--theme--colors--primary-600)',
'font-size': '14px',
},
'forms-labelledbox': {
'label-color': { big: 'var(--c--theme--colors--primary-600)' },
},
'forms-select': {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-600)',
'border-color-hover': 'var(--c--theme--colors--primary-600)',
'box-shadow-color': 'var(--c--theme--colors--primary-600)',
},
'forms-radio': {
'accent-color': 'var(--c--theme--colors--primary-600)',
},
'forms-switch': {
'handle-border-radius': '2px',
'rail-border-radius': '4px',
'accent-color': 'var(--c--theme--colors--primary-600)',
},
'forms-textarea': { 'border-radius': '0' },
},
},
},
};
src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
-6
View File
@@ -5,8 +5,6 @@ import { tokens } from './cunningham-tokens';
type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
type ColorsTokens = Tokens['theme']['colors'];
type FontSizesTokens = Tokens['theme']['font']['sizes'];
type SpacingsTokens = Tokens['theme']['spacings'];
type ComponentTokens = Tokens['components'];
type Theme = 'default' | 'dsfr';
@@ -15,8 +13,6 @@ interface AuthStore {
setTheme: (theme: Theme) => void;
themeTokens: () => Partial<Tokens['theme']>;
colorsTokens: () => Partial<ColorsTokens>;
fontSizesTokens: () => Partial<FontSizesTokens>;
spacingsTokens: () => Partial<SpacingsTokens>;
componentTokens: () => ComponentTokens;
}
@@ -29,8 +25,6 @@ const useCunninghamTheme = create<AuthStore>((set, get) => {
themeTokens: () => currentTheme().theme,
colorsTokens: () => currentTheme().theme.colors,
componentTokens: () => currentTheme().components,
spacingsTokens: () => currentTheme().theme.spacings,
fontSizesTokens: () => currentTheme().theme.font.sizes,
setTheme: (theme: Theme) => {
set({ theme });
},
src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
+2 -1
View File
@@ -14,13 +14,14 @@ import { useTranslation } from 'react-i18next';
import { isAPIError } from '@/api';
import { Box, Text } from '@/components';
import { useDocOptions, useDocStore } from '@/features/docs/doc-management/';
import { useDocOptions } from '@/features/docs/doc-management/';
import {
AITransformActions,
useDocAITransform,
useDocAITranslate,
} from '../api/';
import { useDocStore } from '../stores';
type LanguageTranslate = {
value: string;
src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+38 -28
View File
@@ -1,10 +1,9 @@
import { Dictionary, locales } from '@blocknote/core';
import { locales } from '@blocknote/core';
import '@blocknote/core/fonts/inter.css';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';
import { useCreateBlockNote } from '@blocknote/react';
import { HocuspocusProvider } from '@hocuspocus/provider';
import { t } from 'i18next';
import React, { useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
@@ -12,10 +11,11 @@ import { Box, TextErrors } from '@/components';
import { mediaUrl } from '@/core';
import { useAuthStore } from '@/core/auth';
import { Doc } from '@/features/docs/doc-management';
import { Version } from '@/features/docs/doc-versioning/';
import { useCreateDocAttachment } from '../api/useCreateDocUpload';
import useSaveDoc from '../hook/useSaveDoc';
import { useEditorStore, useHeadingStore } from '../stores';
import { useDocStore, useHeadingStore } from '../stores';
import { randomColor } from '../utils';
import { BlockNoteToolbar } from './BlockNoteToolbar';
@@ -26,13 +26,7 @@ const cssEditor = (readonly: boolean) => `
};
& .bn-editor {
padding-right: 30px;
${
readonly &&
`
padding-left: 30px;
pointer-events: none;
`
}
${readonly && `padding-left: 30px;`}
};
& .collaboration-cursor__caret.ProseMirror-widget{
word-wrap: initial;
@@ -42,11 +36,6 @@ const cssEditor = (readonly: boolean) => `
padding: 2px;
border-radius: 4px;
}
/* @TODO: A fix is made in v0.19.1 - This code can be removed after the upgrade */
.bn-block-content[data-content-type=codeBlock]>div>select option{
color: black;
background-color: white;
}
@media screen and (width <= 560px) {
& .bn-editor {
padding-left: 40px;
@@ -79,22 +68,47 @@ const cssEditor = (readonly: boolean) => `
`;
interface BlockNoteEditorProps {
doc: Doc;
version?: Version;
}
export const BlockNoteEditor = ({ doc, version }: BlockNoteEditorProps) => {
const { createProvider, docsStore } = useDocStore();
const storeId = version?.id || doc.id;
const initialContent = version?.content || doc.content;
const provider = docsStore?.[storeId]?.provider;
useEffect(() => {
if (!provider || provider.document.guid !== storeId) {
createProvider(storeId, initialContent);
}
}, [createProvider, initialContent, provider, storeId]);
if (!provider) {
return null;
}
return <BlockNoteContent doc={doc} provider={provider} storeId={storeId} />;
};
interface BlockNoteContentProps {
doc: Doc;
provider: HocuspocusProvider;
storeId: string;
}
export const BlockNoteEditor = ({
export const BlockNoteContent = ({
doc,
provider,
storeId,
}: BlockNoteEditorProps) => {
}: BlockNoteContentProps) => {
const isVersion = doc.id !== storeId;
const { userData } = useAuthStore();
const { setEditor } = useEditorStore();
const { setStore, docsStore } = useDocStore();
const readOnly = !doc.abilities.partial_update || isVersion;
useSaveDoc(doc.id, provider.document, !readOnly);
const storedEditor = docsStore?.[storeId]?.editor;
const {
mutateAsync: createDocAttachment,
isError: isErrorAttachment,
@@ -125,23 +139,19 @@ export const BlockNoteEditor = ({
provider,
fragment: provider.document.getXmlFragment('document-store'),
user: {
name: userData?.full_name || userData?.email || t('Anonymous'),
name: userData?.email || 'Anonymous',
color: randomColor(),
},
},
dictionary: locales[lang as keyof typeof locales] as Dictionary,
dictionary: locales[lang as keyof typeof locales],
uploadFile,
},
[lang, provider, uploadFile, userData?.email, userData?.full_name],
[provider, uploadFile, userData?.email, lang],
);
useEffect(() => {
setEditor(editor);
return () => {
setEditor(undefined);
};
}, [setEditor, editor]);
setStore(storeId, { editor });
}, [setStore, storeId, editor]);
useEffect(() => {
setHeadings(editor);
@@ -168,7 +178,7 @@ export const BlockNoteEditor = ({
)}
<BlockNoteView
editor={editor}
editor={storedEditor ?? editor}
formattingToolbar={false}
editable={!readOnly}
theme="light"
src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+10 -34
View File
@@ -1,12 +1,13 @@
import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
import { useRouter as useNavigate } from 'next/navigation';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Card, Text, TextErrors } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { DocHeader } from '@/features/docs/doc-header';
import { Doc, useDocStore } from '@/features/docs/doc-management';
import { Doc } from '@/features/docs/doc-management';
import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
import { useResponsiveStore } from '@/stores';
@@ -31,18 +32,11 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
const { colorsTokens } = useCunninghamTheme();
const { providers } = useDocStore();
const provider = providers?.[doc.id];
if (!provider) {
return null;
}
return (
<>
<DocHeader doc={doc} versionId={versionId as Versions['version_id']} />
{!doc.abilities.partial_update && (
<Box $width="100%" $margin={{ all: 'small', top: 'none' }}>
<Box $margin={{ all: 'small', top: 'none' }}>
<Alert type={VariantType.WARNING}>
{t(`Read only, you cannot edit this document.`)}
</Alert>
@@ -57,10 +51,10 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
)}
<Box
$background={colorsTokens()['primary-bg']}
$height="100%"
$direction="row"
$width="100%"
$margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
$css="overflow-x: clip; flex: 1;"
$css="overflow-x: clip;"
$position="relative"
>
<Card
@@ -72,7 +66,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
{isVersion ? (
<DocVersionEditor doc={doc} versionId={versionId} />
) : (
<BlockNoteEditor doc={doc} storeId={doc.id} provider={provider} />
<BlockNoteEditor doc={doc} />
)}
{!isMobile && <IconOpenPanelEditor headings={headings} />}
</Card>
@@ -97,24 +91,12 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
docId: doc.id,
versionId,
});
const { createProvider, providers } = useDocStore();
const { replace } = useRouter();
useEffect(() => {
if (!version?.id) {
return;
}
const provider = providers?.[version.id];
if (!provider || provider.document.guid !== version.id) {
createProvider(version.id, version.content);
}
}, [createProvider, providers, version]);
const navigate = useNavigate();
if (isError && error) {
if (error.status === 404) {
void replace(`/404`);
navigate.replace(`/404`);
return null;
}
@@ -142,11 +124,5 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
);
}
const provider = providers?.[version.id];
if (!provider) {
return null;
}
return <BlockNoteEditor doc={doc} storeId={version.id} provider={provider} />;
return <BlockNoteEditor doc={doc} version={version} />;
};
src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
+3 -1
View File
@@ -127,7 +127,9 @@ export const PanelEditor = ({
</BoxButton>
)}
</Box>
{isPanelTableContentOpen && <TableContent headings={headings} />}
{isPanelTableContentOpen && (
<TableContent doc={doc} headings={headings} />
)}
{!isPanelTableContentOpen && doc.abilities.versions_list && (
<VersionList doc={doc} />
)}
src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export * from './useEditorStore';
export * from './useDocStore';
export * from './useHeadingStore';
export * from './usePanelEditorStore';
src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx → src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx
+27 -13
View File
@@ -1,23 +1,31 @@
import { BlockNoteEditor } from '@blocknote/core';
import { HocuspocusProvider } from '@hocuspocus/provider';
import * as Y from 'yjs';
import { create } from 'zustand';
import { providerUrl } from '@/core';
import { Base64, Doc, blocksToYDoc } from '@/features/docs/doc-management';
import { Base64, Doc } from '@/features/docs/doc-management';
import { blocksToYDoc } from '../utils';
interface DocStore {
provider: HocuspocusProvider;
editor?: BlockNoteEditor;
}
export interface UseDocStore {
currentDoc?: Doc;
providers: {
[storeId: string]: HocuspocusProvider;
docsStore: {
[storeId: string]: DocStore;
};
createProvider: (storeId: string, initialDoc: Base64) => HocuspocusProvider;
setProviders: (storeId: string, providers: HocuspocusProvider) => void;
setStore: (storeId: string, props: Partial<DocStore>) => void;
setCurrentDoc: (doc: Doc | undefined) => void;
}
export const useDocStore = create<UseDocStore>((set, get) => ({
currentDoc: undefined,
providers: {},
docsStore: {},
createProvider: (storeId: string, initialDoc: Base64) => {
const doc = new Y.Doc({
guid: storeId,
@@ -42,17 +50,23 @@ export const useDocStore = create<UseDocStore>((set, get) => ({
document: doc,
});
get().setProviders(storeId, provider);
get().setStore(storeId, { provider });
return provider;
},
setProviders: (storeId, provider) => {
set(({ providers }) => ({
providers: {
...providers,
[storeId]: provider,
},
}));
setStore: (storeId, props) => {
set(({ docsStore }, ...store) => {
return {
...store,
docsStore: {
...docsStore,
[storeId]: {
...docsStore[storeId],
...props,
},
},
};
});
},
setCurrentDoc: (doc) => {
set({ currentDoc: doc });
src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx
-14
View File
@@ -1,14 +0,0 @@
import { BlockNoteEditor } from '@blocknote/core';
import { create } from 'zustand';
export interface UseEditorstore {
editor?: BlockNoteEditor;
setEditor: (editor: BlockNoteEditor | undefined) => void;
}
export const useEditorStore = create<UseEditorstore>((set) => ({
editor: undefined,
setEditor: (editor) => {
set({ editor });
},
}));
src/frontend/apps/impress/src/features/docs/doc-editor/utils.ts
+19
View File
@@ -1,3 +1,5 @@
import * as Y from 'yjs';
export const randomColor = () => {
const randomInt = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -26,3 +28,20 @@ function hslToHex(h: number, s: number, l: number) {
export const toBase64 = (
str: WithImplicitCoercion<ArrayBuffer | SharedArrayBuffer>,
) => Buffer.from(str).toString('base64');
type BasicBlock = {
type: string;
content: string;
};
export const blocksToYDoc = (blocks: BasicBlock[], doc: Y.Doc) => {
const xmlFragment = doc.getXmlFragment('document-store');
blocks.forEach((block) => {
const xmlElement = new Y.XmlElement(block.type);
if (block.content) {
xmlElement.insert(0, [new Y.XmlText(block.content)]);
}
xmlFragment.push([xmlElement]);
});
};
src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+81 -49
View File
@@ -1,18 +1,19 @@
import { DateTime } from 'luxon';
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Icon, Text } from '@/components';
import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
import { Box, Card, StyledLink, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import {
Doc,
LinkReach,
Role,
currentDocRole,
useTrans,
} from '@/features/docs/doc-management';
import { Versions } from '@/features/docs/doc-versioning';
import { useDate } from '@/hook';
import { useResponsiveStore } from '@/stores';
import { DocTagPublic } from './DocTagPublic';
import { DocTitle } from './DocTitle';
import { DocToolBox } from './DocToolBox';
@@ -22,43 +23,43 @@ interface DocHeaderProps {
}
export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
const { colorsTokens } = useCunninghamTheme();
const { t } = useTranslation();
const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
const { formatDate } = useDate();
const { transRole } = useTrans();
const { isMobile, isSmallMobile } = useResponsiveStore();
return (
<>
<Box
$width="100%"
$padding={{ vertical: 'base' }}
$gap={spacings['base']}
<Card
$margin={isMobile ? 'tiny' : 'small'}
aria-label={t('It is the card information about the document.')}
>
{docIsPublic && (
<Box
$padding={isMobile ? 'tiny' : 'small'}
$direction="row"
$align="center"
>
<StyledLink href="/">
<Text
$isMaterialIcon
$theme="primary"
$variation="600"
$size="2rem"
$css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
$hasTransition
$radius="5px"
$padding="tiny"
>
home
</Text>
</StyledLink>
<Box
aria-label={t('Public document')}
$color={colors['primary-600']}
$background={colors['primary-100']}
$radius={spacings['3xs']}
$direction="row"
$padding="xs"
$flex={1}
$align="center"
$gap={spacings['3xs']}
$css={css`
border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
`}
>
<Icon data-testid="public-icon" iconName="public" />
<Text>{t('Public document')}</Text>
</Box>
)}
<Box $direction="row" $align="center" $width="100%">
$width="1px"
$height="70%"
$background={colorsTokens()['greyscale-100']}
$margin={{ horizontal: 'tiny' }}
/>
<Box
$direction="row"
$justify="space-between"
@@ -67,24 +68,55 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
$wrap="wrap"
$align="center"
>
<Box $flex={1} $width="100%" $gap={spacings['3xs']}>
<DocTitle doc={doc} />
<Box $direction="row">
<Text $variation="400" $size="s" $weight="bold">
{transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
</Text>
<Text $variation="400" $size="s">
{t('Last update: {{update}}', {
update: DateTime.fromISO(doc.updated_at).toRelative(),
})}
</Text>
</Box>
</Box>
<DocTitle doc={doc} />
<DocToolBox doc={doc} versionId={versionId} />
</Box>
</Box>
<HorizontalSeparator />
</Box>
<Box
$direction={isSmallMobile ? 'column' : 'row'}
$align={isSmallMobile ? 'start' : 'center'}
$css="border-top:1px solid #eee"
$padding={{
horizontal: isMobile ? 'tiny' : 'big',
vertical: 'tiny',
}}
$gap="0.5rem 2rem"
$justify="space-between"
$wrap="wrap"
$position="relative"
>
<Box
$direction={isSmallMobile ? 'column' : 'row'}
$align={isSmallMobile ? 'start' : 'center'}
$gap="0.5rem 2rem"
$wrap="wrap"
>
<DocTagPublic doc={doc} />
<Text $size="s" $display="inline">
{t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
</Text>
<Text $size="s" $display="inline" $elipsis $maxWidth="60vw">
{t('Owners:')}{' '}
<strong>
{doc.accesses
.filter(
(access) => access.role === Role.OWNER && access.user.email,
)
.map((access, index, accesses) => (
<Fragment key={`access-${index}`}>
{access.user.full_name || access.user.email}{' '}
{index < accesses.length - 1 ? ' / ' : ''}
</Fragment>
))}
</strong>
</Text>
</Box>
<Text $size="s" $display="inline">
{t('Your role:')}{' '}
<strong>{transRole(currentDocRole(doc.abilities))}</strong>
</Text>
</Box>
</Card>
</>
);
};
src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+71 -27
View File
@@ -5,12 +5,12 @@ import {
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { useHeadingStore } from '@/features/docs/doc-editor';
import {
Doc,
KEY_DOC,
@@ -18,7 +18,8 @@ import {
useTrans,
useUpdateDoc,
} from '@/features/docs/doc-management';
import { useBroadcastStore, useResponsiveStore } from '@/stores';
import { useResponsiveStore } from '@/stores';
import { isFirefox } from '@/utils/userAgent';
interface DocTitleProps {
doc: Doc;
@@ -31,7 +32,7 @@ export const DocTitle = ({ doc }: DocTitleProps) => {
return (
<Text
as="h2"
$margin={{ all: 'none', left: 'none' }}
$margin={{ all: 'none', left: 'tiny' }}
$size={isMobile ? 'h4' : 'h2'}
>
{doc.title}
@@ -49,8 +50,10 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
const { toast } = useToastProvider();
const { untitledDocument } = useTrans();
const isUntitled = titleDisplay === untitledDocument;
const { broadcast } = useBroadcastStore();
const { headings } = useHeadingStore();
const headingText = headings?.[0]?.contentText;
const debounceRef = useRef<NodeJS.Timeout>();
const { isMobile } = useResponsiveStore();
const { mutate: updateDoc } = useUpdateDoc({
listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
@@ -58,9 +61,6 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
if (data.title !== untitledDocument) {
toast(t('Document title updated successfully'), VariantType.SUCCESS);
}
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${data.id}`);
},
});
@@ -77,6 +77,10 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
// If mutation we update
if (sanitizedTitle !== doc.title) {
if (debounceRef.current) {
clearTimeout(debounceRef.current);
debounceRef.current = undefined;
}
updateDoc({ id: doc.id, title: sanitizedTitle });
}
},
@@ -90,30 +94,70 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
}
};
const handleOnClick = () => {
if (isUntitled) {
setTitleDisplay('');
}
};
useEffect(() => {
if ((!debounceRef.current && !isUntitled) || !headingText) {
return;
}
setTitleDisplay(headingText);
if (debounceRef.current) {
clearTimeout(debounceRef.current);
}
debounceRef.current = setTimeout(() => {
handleTitleSubmit(headingText);
debounceRef.current = undefined;
}, 3000);
}, [isUntitled, handleTitleSubmit, headingText]);
return (
<>
<Tooltip content={t('Rename')} placement="top">
<Box
as="input"
defaultValue={isUntitled ? '' : titleDisplay}
onKeyDownCapture={handleKeyDown}
placeholder={untitledDocument}
aria-label={t('doc title input')}
name="doc-title"
as="h2"
$radius="4px"
onBlurCapture={(event) => handleTitleSubmit(event.target.value)}
$color={colorsTokens()['greyscale-text']}
$flex={1}
$width="100%"
$padding={{ left: '0' }}
$margin={{ left: '-2px' }}
$background="transparent"
$css={css`
font-size: var(--c--theme--font--sizes--h2);
font-weight: 700;
border: none;
$padding={{ horizontal: 'tiny', vertical: '4px' }}
$margin="none"
contentEditable={isFirefox() ? 'true' : 'plaintext-only'}
onClick={handleOnClick}
onBlurCapture={(e) =>
handleTitleSubmit(e.currentTarget.textContent || '')
}
onKeyDownCapture={handleKeyDown}
suppressContentEditableWarning={true}
$color={
isUntitled
? colorsTokens()['greyscale-200']
: colorsTokens()['greyscale-text']
}
$css={`
${isUntitled && 'font-style: italic;'}
cursor: text;
font-size: ${isMobile ? '1.2rem' : '1.5rem'};
transition: box-shadow 0.5s, border-color 0.5s;
border: 1px dashed transparent;
&:hover {
border-color: rgba(0, 123, 255, 0.25);
border-style: dashed;
}
&:focus {
outline: none;
border-color: transparent;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
`}
/>
>
{titleDisplay}
</Box>
</Tooltip>
</>
);
src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+95 -121
View File
@@ -3,31 +3,21 @@ import {
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import { useState } from 'react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import {
Box,
DropdownMenu,
DropdownMenuOption,
Icon,
IconOptions,
} from '@/components';
import { Box, DropButton, IconOptions } from '@/components';
import { useAuthStore } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import {
useEditorStore,
usePanelEditorStore,
} from '@/features/docs/doc-editor/';
import { useDocStore, usePanelEditorStore } from '@/features/docs/doc-editor/';
import {
Doc,
ModalRemoveDoc,
ModalShare,
} from '@/features/docs/doc-management';
import { ModalVersion, Versions } from '@/features/docs/doc-versioning';
import { useResponsiveStore } from '@/stores';
import { ModalVersion, Versions } from '../../doc-versioning';
import { ModalPDF } from './ModalExport';
interface DocToolBoxProps {
@@ -37,93 +27,21 @@ interface DocToolBoxProps {
export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
const { t } = useTranslation();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
const [isModalShareOpen, setIsModalShareOpen] = useState(false);
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
const [isDropOpen, setIsDropOpen] = useState(false);
const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
const { isSmallMobile } = useResponsiveStore();
const { authenticated } = useAuthStore();
const { editor } = useEditorStore();
const { docsStore } = useDocStore();
const { toast } = useToastProvider();
const options: DropdownMenuOption[] = [
...(isSmallMobile
? [
{
label: t('Share'),
icon: 'upload',
callback: () => {
setIsModalShareOpen(true);
},
},
{
label: t('Export'),
icon: 'download',
callback: () => {
setIsModalPDFOpen(true);
},
},
]
: []),
{
label: t('Version history'),
icon: 'history',
disabled: !doc.abilities.versions_list,
callback: () => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(false);
},
},
{
label: t('Table of contents'),
icon: 'summarize',
callback: () => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(true);
},
},
{
label: t('Export'),
icon: 'file_download',
callback: () => {
setIsModalPDFOpen(true);
},
},
{
label: t('Copy as {{format}}', { format: 'Markdown' }),
icon: 'content_copy',
callback: () => {
void copyCurrentEditorToClipboard('markdown');
},
},
{
label: t('Copy as {{format}}', { format: 'HTML' }),
icon: 'content_copy',
callback: () => {
void copyCurrentEditorToClipboard('html');
},
},
{
label: t('Delete document'),
icon: 'delete',
disabled: !doc.abilities.destroy,
callback: () => {
setIsModalRemoveOpen(true);
},
},
];
const copyCurrentEditorToClipboard = async (
asFormat: 'html' | 'markdown',
) => {
const editor = docsStore[doc.id]?.editor;
if (!editor) {
toast(t('Editor unavailable'), VariantType.ERROR, { duration: 3000 });
return;
@@ -165,10 +83,9 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
</Button>
</Box>
)}
<Box $direction="row" $margin={{ left: 'auto' }} $gap={spacings['2xs']}>
{authenticated && !isSmallMobile && (
<Box $direction="row" $margin={{ left: 'auto' }} $gap="1rem">
{authenticated && (
<Button
color="primary-text"
onClick={() => {
setIsModalShareOpen(true);
}}
@@ -177,34 +94,91 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
{t('Share')}
</Button>
)}
{!isSmallMobile && (
<Button
color="primary-text"
icon={
<Icon iconName="download" $theme="primary" $variation="800" />
}
onClick={() => {
setIsModalPDFOpen(true);
}}
size={isSmallMobile ? 'small' : 'medium'}
/>
)}
<DropdownMenu options={options}>
<IconOptions
isHorizontal
$theme="primary"
$radius={spacings['3xs']}
$css={
isSmallMobile
? css`
padding: 10px;
border: 1px solid ${colors['greyscale-300']};
`
: ''
}
aria-label={t('Open the document options')}
/>
</DropdownMenu>
<DropButton
button={
<IconOptions
isOpen={isDropOpen}
aria-label={t('Open the document options')}
/>
}
onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
isOpen={isDropOpen}
>
<Box>
{doc.abilities.versions_list && (
<Button
onClick={() => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(false);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">history</span>}
size="small"
>
{t('Version history')}
</Button>
)}
<Button
onClick={() => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(true);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">summarize</span>}
size="small"
>
{t('Table of contents')}
</Button>
<Button
onClick={() => {
setIsModalPDFOpen(true);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">file_download</span>}
size="small"
>
{t('Export')}
</Button>
{doc.abilities.destroy && (
<Button
onClick={() => {
setIsModalRemoveOpen(true);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">delete</span>}
size="small"
>
{t('Delete document')}
</Button>
)}
<Button
onClick={() => {
setIsDropOpen(false);
void copyCurrentEditorToClipboard('markdown');
}}
color="primary-text"
icon={<span className="material-icons">content_copy</span>}
size="small"
>
{t('Copy as {{format}}', { format: 'Markdown' })}
</Button>
<Button
onClick={() => {
setIsDropOpen(false);
void copyCurrentEditorToClipboard('html');
}}
color="primary-text"
icon={<span className="material-icons">content_copy</span>}
size="small"
>
{t('Copy as {{format}}', { format: 'HTML' })}
</Button>
</Box>
</DropButton>
</Box>
{isModalShareOpen && (
<ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
+4 -2
View File
@@ -14,7 +14,7 @@ import { t } from 'i18next';
import { useEffect, useMemo, useState } from 'react';
import { Box, Text } from '@/components';
import { useEditorStore } from '@/features/docs/doc-editor';
import { useDocStore } from '@/features/docs/doc-editor/';
import { Doc } from '@/features/docs/doc-management';
import { useExport } from '../api/useExport';
@@ -31,7 +31,7 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
});
const { toast } = useToastProvider();
const { editor } = useEditorStore();
const { docsStore } = useDocStore();
const {
mutate: createExport,
data: documentGenerated,
@@ -104,6 +104,8 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
return;
}
const editor = docsStore[doc.id].editor;
if (!editor) {
toast(t('No editor found'), VariantType.ERROR);
return;
src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx
+1 -11
View File
@@ -1,12 +1,6 @@
import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import {
APIError,
APIList,
errorCauses,
fetchAPI,
useAPIInfiniteQuery,
} from '@/api';
import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
import { Doc } from '../types';
@@ -58,7 +52,3 @@ export function useDocs(
...queryConfig,
});
}
export const useInfiniteDocs = (params: DocsParams) => {
return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params);
};
src/frontend/apps/impress/src/features/docs/doc-management/api/useRemoveDoc.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const useRemoveDoc = (options?: UseRemoveDocOptions) => {
mutationFn: removeDoc,
...options,
onSuccess: (data, variables, context) => {
void queryClient.invalidateQueries({
void queryClient.resetQueries({
queryKey: [KEY_LIST_DOC],
});
if (options?.onSuccess) {
src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx
+2 -9
View File
@@ -1,8 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Doc, KEY_DOC } from '@/features/docs/doc-management';
import { useBroadcastStore } from '@/stores';
import { Doc } from '@/features/docs';
export type UpdateDocLinkParams = Pick<Doc, 'id'> &
Partial<Pick<Doc, 'link_role' | 'link_reach'>>;
@@ -38,20 +37,14 @@ export function useUpdateDocLink({
listInvalideQueries,
}: UpdateDocLinkProps = {}) {
const queryClient = useQueryClient();
const { broadcast } = useBroadcastStore();
return useMutation<Doc, APIError, UpdateDocLinkParams>({
mutationFn: updateDocLink,
onSuccess: (data, variable) => {
onSuccess: (data) => {
listInvalideQueries?.forEach((queryKey) => {
void queryClient.resetQueries({
queryKey: [queryKey],
});
});
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${variable.id}`);
onSuccess?.(data);
},
});
src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg
-9
View File
@@ -1,9 +0,0 @@
<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
<path d="M6.5 8.55556H15" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
<path d="M6.5 11.3889H23.5M6.5 14.2222H23.5M6.5 17.0556H23.5M6.5 19.8889H23.5M6.5 22.7222H20.6667" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
<rect x="7" y="10" width="16" height="16" rx="8" fill="#6A6AF4"/>
<rect x="7" y="10" width="16" height="16" rx="8" stroke="white" stroke-width="1.5"/>
<path d="M16.8 18L18 19.2V20.1H15.45V22.95L15 23.4L14.55 22.95V20.1H12V19.2L13.2 18V14.7H12.6V13.8H17.4V14.7H16.8V18Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 853 B

src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
-6
View File
@@ -1,6 +0,0 @@
<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
<path d="M5.5 7.55554H14" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
<path d="M5.5 10.3889H22.5M5.5 13.2222H22.5M5.5 16.0556H22.5M5.5 18.8889H22.5M5.5 21.7222H22.5M5.5 24.5556H22.5M5.5 27.3889H22.5M5.5 30.2222H22.5M5.5 33.0556H22.5" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 635 B

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+33 -11
View File
@@ -7,12 +7,13 @@ import {
useToastProvider,
} from '@openfun/cunningham-react';
import { t } from 'i18next';
import { usePathname } from 'next/navigation';
import { useRouter } from 'next/router';
import { useRouter } from 'next/navigation';
import { Box, Text, TextErrors } from '@/components';
import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
import { useRemoveDoc } from '../api/useRemoveDoc';
import IconDoc from '../assets/icon-doc.svg';
import { Doc } from '../types';
interface ModalRemoveDocProps {
@@ -21,13 +22,12 @@ interface ModalRemoveDocProps {
}
export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
const { colorsTokens } = useCunninghamTheme();
const { toast } = useToastProvider();
const { push } = useRouter();
const pathname = usePathname();
const router = useRouter();
const {
mutate: removeDoc,
isError,
error,
} = useRemoveDoc({
@@ -35,11 +35,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
toast(t('The document has been deleted.'), VariantType.SUCCESS, {
duration: 4000,
});
if (pathname === '/') {
onClose();
} else {
void push('/');
}
router.push('/');
},
});
@@ -62,7 +58,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
rightActions={
<Button
aria-label={t('Confirm deletion')}
color="danger"
color="primary"
fullWidth
onClick={() =>
removeDoc({
@@ -100,6 +96,32 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
)}
{isError && <TextErrors causes={error.cause} />}
<Text
as="p"
$padding="small"
$direction="row"
$gap="0.5rem"
$background={colorsTokens()['primary-150']}
$theme="primary"
$align="center"
$radius="2px"
>
<IconDoc
className="p-t"
aria-label={t(`Document icon`)}
color={colorsTokens()['primary-500']}
width={58}
style={{
borderRadius: '8px',
backgroundColor: '#ffffff',
border: `1px solid ${colorsTokens()['primary-300']}`,
}}
/>
<Text $theme="primary" $weight="bold" $size="l">
{doc.title}
</Text>
</Text>
</Box>
</Modal>
);
src/frontend/apps/impress/src/features/docs/doc-management/index.ts
-1
View File
@@ -1,6 +1,5 @@
export * from './api';
export * from './components';
export * from './hooks';
export * from './stores';
export * from './types';
export * from './utils';
src/frontend/apps/impress/src/features/docs/doc-management/stores/index.tsx
-1
View File
@@ -1 +0,0 @@
export * from './useDocStore';
src/frontend/apps/impress/src/features/docs/doc-management/utils.ts
-19
View File
@@ -1,5 +1,3 @@
import * as Y from 'yjs';
import { Doc, Role } from './types';
export const currentDocRole = (abilities: Doc['abilities']): Role => {
@@ -11,20 +9,3 @@ export const currentDocRole = (abilities: Doc['abilities']): Role => {
? Role.EDITOR
: Role.READER;
};
type BasicBlock = {
type: string;
content: string;
};
export const blocksToYDoc = (blocks: BasicBlock[], doc: Y.Doc) => {
const xmlFragment = doc.getXmlFragment('document-store');
blocks.forEach((block) => {
const xmlElement = new Y.XmlElement(block.type);
if (block.content) {
xmlElement.insert(0, [new Y.XmlText(block.content)]);
}
xmlFragment.push([xmlElement]);
});
};
src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+8 -6
View File
@@ -1,21 +1,23 @@
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, BoxButton, Text } from '@/components';
import { HeadingBlock, useEditorStore } from '@/features/docs/doc-editor';
import { MAIN_LAYOUT_ID } from '@/layouts/conf';
import { HeadingBlock, useDocStore } from '@/features/docs/doc-editor';
import { Doc } from '@/features/docs/doc-management';
import { useResponsiveStore } from '@/stores';
import { Heading } from './Heading';
interface TableContentProps {
doc: Doc;
headings: HeadingBlock[];
}
export const TableContent = ({ headings }: TableContentProps) => {
const { editor } = useEditorStore();
export const TableContent = ({ doc, headings }: TableContentProps) => {
const { docsStore } = useDocStore();
const { isMobile } = useResponsiveStore();
const { t } = useTranslation();
const editor = docsStore?.[doc.id]?.editor;
const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
// To highlight the first heading in the viewport
@@ -47,7 +49,7 @@ export const TableContent = ({ headings }: TableContentProps) => {
}
};
document.getElementById(MAIN_LAYOUT_ID)?.addEventListener('scroll', () => {
window.addEventListener('scroll', () => {
setTimeout(() => {
handleScroll();
}, 300);
src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx
+15 -11
View File
@@ -7,12 +7,12 @@ import {
useToastProvider,
} from '@openfun/cunningham-react';
import { t } from 'i18next';
import { useRouter } from 'next/router';
import { useRouter } from 'next/navigation';
import * as Y from 'yjs';
import { Box, Text } from '@/components';
import { toBase64 } from '@/features/docs/doc-editor';
import { Doc, useDocStore, useUpdateDoc } from '@/features/docs/doc-management';
import { toBase64, useDocStore } from '@/features/docs/doc-editor';
import { Doc, useUpdateDoc } from '@/features/docs/doc-management';
import { KEY_LIST_DOC_VERSIONS } from '../api/useDocVersions';
import { Versions } from '../types';
@@ -31,25 +31,29 @@ export const ModalVersion = ({
versionId,
}: ModalVersionProps) => {
const { toast } = useToastProvider();
const { push } = useRouter();
const { providers } = useDocStore();
const router = useRouter();
const { docsStore, setStore } = useDocStore();
const { mutate: updateDoc } = useUpdateDoc({
listInvalideQueries: [KEY_LIST_DOC_VERSIONS],
onSuccess: () => {
const onDisplaySuccess = () => {
toast(t('Version restored successfully'), VariantType.SUCCESS);
void push(`/docs/${docId}`);
router.push(`/docs/${docId}`);
};
if (!providers?.[docId] || !providers?.[versionId]) {
if (!docsStore?.[docId]?.provider || !docsStore?.[versionId]?.provider) {
onDisplaySuccess();
return;
}
setStore(docId, {
editor: undefined,
});
revertUpdate(
providers[docId].document,
providers[docId].document,
providers[versionId].document,
docsStore[docId].provider.document,
docsStore[docId].provider.document,
docsStore[versionId].provider.document,
);
onDisplaySuccess();
@@ -79,7 +83,7 @@ export const ModalVersion = ({
fullWidth
onClick={() => {
const newDoc = toBase64(
Y.encodeStateAsUpdate(providers?.[versionId].document),
Y.encodeStateAsUpdate(docsStore?.[versionId]?.provider.document),
);
updateDoc({
src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+5 -2
View File
@@ -1,6 +1,6 @@
import { Button } from '@openfun/cunningham-react';
import { t } from 'i18next';
import { PropsWithChildren, useState } from 'react';
import React, { PropsWithChildren, useState } from 'react';
import { Box, DropButton, IconOptions, StyledLink, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
@@ -69,7 +69,10 @@ export const VersionItem = ({
{isActive && versionId && (
<DropButton
button={
<IconOptions aria-label={t('Open the version options')} />
<IconOptions
isOpen={isDropOpen}
aria-label={t('Open the version options')}
/>
}
onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
isOpen={isDropOpen}
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+202 -85
View File
@@ -1,103 +1,220 @@
import { Button, Loader } from '@openfun/cunningham-react';
import {
Column,
DataGrid,
SortModel,
usePagination,
} from '@openfun/cunningham-react';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { InView } from 'react-intersection-observer';
import { createGlobalStyle } from 'styled-components';
import { Box, Card, Text } from '@/components';
import { Card, StyledLink, Text, TextErrors } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import {
Doc,
DocsOrdering,
LinkReach,
currentDocRole,
isDocsOrdering,
useDocs,
useTrans,
} from '@/features/docs/doc-management';
import { useDate } from '@/hook/';
import { useResponsiveStore } from '@/stores';
import { useInfiniteDocs } from '../../doc-management';
import { PAGE_SIZE } from '../conf';
import { DocsGridItem } from './DocsGridItem';
import { DocsGridLoader } from './DocsGridLoader';
import { DocsGridActions } from './DocsGridActions';
const DocsGridStyle = createGlobalStyle`
& .c__datagrid thead{
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
& .c__pagination__goto{
display:none;
}
`;
type SortModelItem = {
field: string;
sort: 'asc' | 'desc' | null;
};
function formatSortModel(sortModel: SortModelItem): DocsOrdering | undefined {
const { field, sort } = sortModel;
const orderingField = sort === 'desc' ? `-${field}` : field;
if (isDocsOrdering(orderingField)) {
return orderingField;
}
}
export const DocsGrid = () => {
const { colorsTokens } = useCunninghamTheme();
const { transRole } = useTrans();
const { t } = useTranslation();
const { isDesktop } = useResponsiveStore();
const {
data,
isFetching,
isRefetching,
isLoading,
fetchNextPage,
hasNextPage,
} = useInfiniteDocs({
page: 1,
const { formatDate } = useDate();
const pagination = usePagination({
pageSize: PAGE_SIZE,
});
const loading = isFetching || isLoading;
const [sortModel, setSortModel] = useState<SortModel>([
{
field: 'updated_at',
sort: 'desc',
},
]);
const { page, pageSize, setPagesCount } = pagination;
const [docs, setDocs] = useState<Doc[]>([]);
const { isMobile } = useResponsiveStore();
const loadMore = (inView: boolean) => {
if (!inView || loading) {
const ordering = sortModel.length ? formatSortModel(sortModel[0]) : undefined;
const { data, isLoading, error } = useDocs({
page,
ordering,
});
useEffect(() => {
if (isLoading) {
return;
}
void fetchNextPage();
};
setDocs(data?.results || []);
}, [data?.results, t, isLoading]);
useEffect(() => {
setPagesCount(data?.count ? Math.ceil(data.count / pageSize) : 0);
}, [data?.count, pageSize, setPagesCount]);
const columns: Column<Doc>[] = [
{
headerName: '',
id: 'visibility',
size: 95,
renderCell: ({ row }) => {
return (
row.link_reach === LinkReach.PUBLIC && (
<StyledLink href={`/docs/${row.id}`}>
<Text
$weight="bold"
$background={colorsTokens()['primary-600']}
$color="white"
$padding="xtiny"
$radius="3px"
>
{t('Public')}
</Text>
</StyledLink>
)
);
},
},
{
headerName: t('Document name'),
field: 'title',
renderCell: ({ row }) => {
return (
<StyledLink href={`/docs/${row.id}`}>
<Text $weight="bold" $theme="primary">
{row.title}
</Text>
</StyledLink>
);
},
},
{
headerName: t('Created at'),
field: 'created_at',
renderCell: ({ row }) => {
return (
<StyledLink href={`/docs/${row.id}`}>
<Text $weight="bold">{formatDate(row.created_at)}</Text>
</StyledLink>
);
},
},
{
headerName: t('Updated at'),
field: 'updated_at',
renderCell: ({ row }) => {
return (
<StyledLink href={`/docs/${row.id}`}>
<Text $weight="bold">{formatDate(row.updated_at)}</Text>
</StyledLink>
);
},
},
{
headerName: t('Your role'),
id: 'your_role',
renderCell: ({ row }) => {
return (
<StyledLink href={`/docs/${row.id}`}>
<Text $weight="bold">
{transRole(currentDocRole(row.abilities))}
</Text>
</StyledLink>
);
},
},
{
headerName: t('Members'),
id: 'users_number',
renderCell: ({ row }) => {
return (
<StyledLink href={`/docs/${row.id}`}>
<Text $weight="bold">{row.accesses.length}</Text>
</StyledLink>
);
},
},
{
id: 'column-actions',
renderCell: ({ row }) => {
return <DocsGridActions doc={row} />;
},
},
];
// Inverse columns for mobile to have the most important information first
if (isMobile) {
const tmpCol = columns[0];
columns[0] = columns[1];
columns[1] = tmpCol;
}
return (
<Box $position="relative" $width="100%" $maxWidth="960px">
<DocsGridLoader isLoading={isRefetching} />
<Card data-testid="docs-grid" $padding="md">
<Text
as="h4"
$size="h4"
$weight="700"
$margin={{ top: '0px', bottom: 'xs' }}
>
{t('All docs')}
</Text>
<Card
$padding={{ bottom: 'small', horizontal: 'big' }}
$margin={{ all: isMobile ? 'small' : 'big', top: 'none' }}
$overflow="auto"
aria-label={t(`Datagrid of the documents page {{page}}`, { page })}
$height="100%"
>
<DocsGridStyle />
<Text
$weight="bold"
as="h2"
$theme="primary"
$margin={{ bottom: 'small' }}
>
{t('Documents')}
</Text>
<Box>
<Box $direction="row" $padding="xs" data-testid="docs-grid-header">
<Box $flex={6} $padding="3xs">
<Text $size="xs" $variation="600">
{t('Name')}
</Text>
</Box>
{isDesktop && (
<Box $flex={1} $padding="3xs">
<Text $size="xs" $variation="600">
{t('Updated at')}
</Text>
</Box>
)}
{error && <TextErrors causes={error.cause} />}
<Box $flex={1} $align="flex-end" $padding="3xs" />
</Box>
{/* Body */}
{data?.pages.map((currentPage) => {
return currentPage.results.map((doc) => (
<DocsGridItem doc={doc} key={doc.id} />
));
})}
</Box>
{loading && (
<Box
data-testid="docs-grid-loader"
$padding="md"
$align="center"
$justify="center"
$width="100%"
>
<Loader />
</Box>
)}
{hasNextPage && !loading && (
<InView
data-testid="infinite-scroll-trigger"
as="div"
onChange={loadMore}
>
{!isFetching && hasNextPage && (
<Button onClick={() => void fetchNextPage()} color="primary-text">
{t('More docs')}
</Button>
)}
</InView>
)}
</Card>
</Box>
<DataGrid
columns={columns}
rows={docs}
isLoading={isLoading}
pagination={pagination}
onSortModelChange={setSortModel}
sortModel={sortModel}
emptyPlaceholderLabel={t("You don't have any document yet.")}
/>
</Card>
);
};
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
+18 -23
View File
@@ -1,7 +1,7 @@
import { useModal } from '@openfun/cunningham-react';
import { Button } from '@openfun/cunningham-react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
interface DocsGridActionsProps {
@@ -10,31 +10,26 @@ interface DocsGridActionsProps {
export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
const { t } = useTranslation();
const deleteModal = useModal();
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const options: DropdownMenuOption[] = [
{
label: t('Remove'),
icon: 'delete',
callback: () => deleteModal.open(),
disabled: !doc.abilities.destroy,
testId: `docs-grid-actions-remove-${doc.id}`,
},
];
if (!doc.abilities.destroy) {
return null;
}
return (
<>
<DropdownMenu options={options}>
<Icon
data-testid={`docs-grid-actions-button-${doc.id}`}
iconName="more_horiz"
$theme="primary"
$variation="600"
/>
</DropdownMenu>
{deleteModal.isOpen && (
<ModalRemoveDoc onClose={deleteModal.onClose} doc={doc} />
<Button
onClick={() => {
setIsModalRemoveOpen(true);
}}
color="tertiary-text"
icon={<span className="material-icons">delete</span>}
size="small"
style={{ padding: '0rem' }}
aria-label={t('Delete the document')}
/>
{isModalRemoveOpen && (
<ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
)}
</>
);
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx
+40
View File
@@ -0,0 +1,40 @@
import { Button } from '@openfun/cunningham-react';
import { useRouter } from 'next/navigation';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box } from '@/components';
import { useCreateDoc, useTrans } from '@/features/docs/doc-management/';
import { useResponsiveStore } from '@/stores';
import { DocsGrid } from './DocsGrid';
export const DocsGridContainer = () => {
const { t } = useTranslation();
const { untitledDocument } = useTrans();
const router = useRouter();
const { isMobile } = useResponsiveStore();
const { mutate: createDoc } = useCreateDoc({
onSuccess: (doc) => {
router.push(`/docs/${doc.id}`);
},
});
const handleCreateDoc = () => {
createDoc({ title: untitledDocument });
};
return (
<Box $overflow="auto">
<Box
$align="flex-end"
$justify="center"
$margin={isMobile ? 'small' : 'big'}
>
<Button onClick={handleCreateDoc}>{t('Create a new document')}</Button>
</Box>
<DocsGrid />
</Box>
);
};
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
-104
View File
@@ -1,104 +0,0 @@
import { Button } from '@openfun/cunningham-react';
import { DateTime } from 'luxon';
import { css } from 'styled-components';
import { Box, Icon, StyledLink, Text } from '@/components';
import { useResponsiveStore } from '@/stores';
import { Doc, LinkReach } from '../../doc-management';
import { DocsGridActions } from './DocsGridActions';
import { SimpleDocItem } from './SimpleDocItem';
type DocsGridItemProps = {
doc: Doc;
};
export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
const { isDesktop } = useResponsiveStore();
const isPublic = doc.link_reach === LinkReach.PUBLIC;
const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
const isRestricted = doc.link_reach === LinkReach.RESTRICTED;
const sharedCount = doc.accesses.length - 1;
const isShared = sharedCount > 0;
return (
<Box
$direction="row"
$width="100%"
$align="center"
role="row"
$padding={{ vertical: 'xs', horizontal: 'sm' }}
$css={css`
cursor: pointer;
border-radius: 4px;
&:hover {
background-color: var(--c--theme--colors--greyscale-100);
}
`}
>
<StyledLink $css="flex: 7; align-items: center;" href={`/docs/${doc.id}`}>
<Box
data-testid={`docs-grid-name-${doc.id}`}
$flex={6}
$padding={{ right: 'base' }}
>
<SimpleDocItem doc={doc} />
</Box>
{isDesktop && (
<Box $flex={1}>
<Text $variation="500" $size="xs">
{DateTime.fromISO(doc.updated_at).toRelative()}
</Text>
</Box>
)}
</StyledLink>
<Box
$flex={1}
$direction="row"
$align="center"
$justify="flex-end"
$gap="10px"
>
{isDesktop && isPublic && (
<Button
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
}}
size="nano"
icon={<Icon $variation="000" iconName="public" />}
>
{isShared ? sharedCount : undefined}
</Button>
)}
{isDesktop && !isPublic && isRestricted && isShared && (
<Button
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
}}
color="tertiary"
size="nano"
icon={<Icon $variation="800" $theme="primary" iconName="group" />}
>
{sharedCount}
</Button>
)}
{isDesktop && !isPublic && isAuthenticated && (
<Button
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
}}
size="nano"
icon={<Icon $variation="000" iconName="corporate_fare" />}
>
{sharedCount}
</Button>
)}
<DocsGridActions doc={doc} />
</Box>
</Box>
);
};
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
-44
View File
@@ -1,44 +0,0 @@
import { Loader } from '@openfun/cunningham-react';
import { createGlobalStyle, css } from 'styled-components';
import { Box } from '@/components';
import { HEADER_HEIGHT } from '@/features/header/conf';
const DocsGridLoaderStyle = createGlobalStyle`
body, main {
overflow: hidden!important;
overflow-y: hidden!important;
}
`;
type DocsGridLoaderProps = {
isLoading: boolean;
};
export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
if (!isLoading) {
return null;
}
return (
<>
<DocsGridLoaderStyle />
<Box
data-testid="grid-loader"
$align="center"
$justify="center"
$height="calc(100vh - 50px)"
$width="100%"
$maxWidth="960px"
$background="rgba(255, 255, 255, 0.3)"
$zIndex={998}
$position="fixed"
$css={css`
top: ${HEADER_HEIGHT}px;
`}
>
<Loader />
</Box>
</>
);
};
src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
-83
View File
@@ -1,83 +0,0 @@
import { css } from 'styled-components';
import { Box, Icon, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Doc, LinkReach } from '@/features/docs';
import PinnedDocumentIcon from '@/features/docs/doc-management/assets/pinned-document.svg';
import SimpleFileIcon from '@/features/docs/doc-management/assets/simple-document.svg';
import { useResponsiveStore } from '@/stores';
const ItemTextCss = css`
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
`;
type SimpleDocItemProps = {
doc: Doc;
isPinned?: boolean;
subText?: string;
};
export const SimpleDocItem = ({
doc,
isPinned = false,
subText,
}: SimpleDocItemProps) => {
const { spacingsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const spacings = spacingsTokens();
const isPublic = doc?.link_reach === LinkReach.PUBLIC;
const isShared = !isPublic && doc.accesses.length > 1;
const accessCount = doc.accesses.length - 1;
const isSharedOrPublic = isShared || isPublic;
return (
<Box $direction="row" $gap={spacings.sm}>
<Box
$direction="row"
$align="center"
$css={css`
background-color: transparent;
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05));
`}
>
{isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
</Box>
<Box>
<Text
aria-describedby="doc-title"
aria-label={doc.title}
$size="sm"
$variation="1000"
$weight="500"
$css={ItemTextCss}
>
{doc.title}
</Text>
<Box $direction="row" $align="center" $gap={spacings['3xs']}>
{!isDesktop && (
<>
{isPublic && <Icon iconName="public" $size="16px" />}
{isShared && <Icon iconName="group" $size="16px" />}
{isSharedOrPublic && accessCount > 0 && (
<Text $size="12px">{accessCount}</Text>
)}
{isSharedOrPublic && <Text $size="12px">·</Text>}
</>
)}
<Text $size="xs" $variation="500" $weight="500" $css={ItemTextCss}>
{subText ??
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '}
</Text>
</Box>
</Box>
</Box>
);
};
src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './DocsGridContainer';
src/frontend/apps/impress/src/features/left-panel/index.ts → src/frontend/apps/impress/src/features/docs/docs-grid/index.ts
-1
View File
@@ -1,2 +1 @@
export * from './components';
export * from './stores';
src/frontend/apps/impress/src/features/docs/members/members-add/api/useCreateDocAccess.tsx
+1 -8
View File
@@ -5,13 +5,11 @@ import { User } from '@/core/auth';
import {
Access,
Doc,
KEY_DOC,
KEY_LIST_DOC,
Role,
} from '@/features/docs/doc-management';
import { KEY_LIST_DOC_ACCESSES } from '@/features/docs/members/members-list';
import { ContentLanguage } from '@/i18n/types';
import { useBroadcastStore } from '@/stores';
import { OptionType } from '../types';
@@ -55,11 +53,9 @@ export const createDocAccess = async ({
export function useCreateDocAccess() {
const queryClient = useQueryClient();
const { broadcast } = useBroadcastStore();
return useMutation<Access, APIError, CreateDocAccessParams>({
mutationFn: createDocAccess,
onSuccess: (_data, variable) => {
onSuccess: () => {
void queryClient.resetQueries({
queryKey: [KEY_LIST_DOC],
});
@@ -69,9 +65,6 @@ export function useCreateDocAccess() {
void queryClient.resetQueries({
queryKey: [KEY_LIST_DOC_ACCESSES],
});
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${variable.docId}`);
},
});
}
src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts
-7
View File
@@ -7,7 +7,6 @@ import {
import { APIError, errorCauses, fetchAPI } from '@/api';
import { KEY_DOC, KEY_LIST_DOC } from '@/features/docs/doc-management';
import { KEY_LIST_USER } from '@/features/docs/members/members-add';
import { useBroadcastStore } from '@/stores';
import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
@@ -40,8 +39,6 @@ type UseDeleteDocAccessOptions = UseMutationOptions<
export const useDeleteDocAccess = (options?: UseDeleteDocAccessOptions) => {
const queryClient = useQueryClient();
const { broadcast } = useBroadcastStore();
return useMutation<void, APIError, DeleteDocAccessProps>({
mutationFn: deleteDocAccess,
...options,
@@ -52,10 +49,6 @@ export const useDeleteDocAccess = (options?: UseDeleteDocAccessOptions) => {
void queryClient.invalidateQueries({
queryKey: [KEY_DOC],
});
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${variables.docId}`);
void queryClient.resetQueries({
queryKey: [KEY_LIST_DOC],
});
src/frontend/apps/impress/src/features/docs/members/members-list/api/useUpdateDocAccess.ts
-7
View File
@@ -11,7 +11,6 @@ import {
KEY_LIST_DOC,
Role,
} from '@/features/docs/doc-management';
import { useBroadcastStore } from '@/stores';
import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
@@ -50,8 +49,6 @@ type UseUpdateDocAccessOptions = UseMutationOptions<
export const useUpdateDocAccess = (options?: UseUpdateDocAccessOptions) => {
const queryClient = useQueryClient();
const { broadcast } = useBroadcastStore();
return useMutation<Access, APIError, UpdateDocAccessProps>({
mutationFn: updateDocAccess,
...options,
@@ -62,10 +59,6 @@ export const useUpdateDocAccess = (options?: UseUpdateDocAccessOptions) => {
void queryClient.invalidateQueries({
queryKey: [KEY_DOC],
});
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${variables.docId}`);
void queryClient.invalidateQueries({
queryKey: [KEY_LIST_DOC],
});
src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import {
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import { useRouter } from 'next/router';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -35,7 +35,7 @@ export const MemberItem = ({
const { isSmallMobile, screenWidth } = useResponsiveStore();
const [localRole, setLocalRole] = useState(role);
const { toast } = useToastProvider();
const { push } = useRouter();
const router = useRouter();
const { mutate: updateDocAccess, error: errorUpdate } = useUpdateDocAccess({
onSuccess: () => {
toast(t('The role has been updated'), VariantType.SUCCESS, {
@@ -55,7 +55,7 @@ export const MemberItem = ({
);
if (isMyself) {
void push('/');
router.push('/');
}
},
});
src/frontend/apps/impress/src/features/footer/Footer.tsx
+1
View File
@@ -1,4 +1,5 @@
import Image from 'next/image';
import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
src/frontend/apps/impress/src/features/header/assets/icon-docs.svg
+30 -3
View File
@@ -1,4 +1,31 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.6305 28.8312C22.7983 28.5038 23.9166 27.9062 24.6505 26.8503C25.3749 25.8163 25.5789 24.5047 25.5789 23.2425V4.75099C25.5789 4.42358 25.5611 4.09557 25.5216 3.77148C26.1016 3.99961 26.5486 4.37658 26.8626 4.90239C27.2331 5.50024 27.4184 6.28757 27.4184 7.26435V26.0464C27.4184 27.3684 27.0942 28.3578 26.4458 29.0146C25.7974 29.6714 24.8207 29.9998 23.5155 29.9998H16.4209C16.5889 29.9704 16.7574 29.9401 16.9262 29.909C18.4067 29.6444 19.9713 29.2854 21.6185 28.8346L21.6305 28.8312Z" fill="#C9191E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58203 25.655V6.8477C4.58203 5.70251 4.88938 4.83519 5.50408 4.24575C6.1272 3.65631 6.95242 3.33212 7.97972 3.27318C9.49542 3.18055 10.9311 3.05425 12.2868 2.89425C13.6425 2.72584 14.9393 2.53217 16.1771 2.31324C17.4234 2.0943 18.6359 1.85011 19.8148 1.58065C21.0274 1.29435 21.9578 1.4375 22.6062 2.0101C23.2546 2.58269 23.5788 3.49632 23.5788 4.75099V23.2425C23.5788 24.3456 23.3893 25.1666 23.0104 25.7055C22.6315 26.2529 21.9915 26.6528 21.0905 26.9054C19.4906 27.3433 17.9833 27.6886 16.5687 27.9412C15.154 28.2022 13.7731 28.4001 12.4258 28.5348C11.0785 28.6696 9.69751 28.7748 8.28286 28.8506C7.11241 28.918 6.20299 28.6738 5.5546 28.118C4.90622 27.5707 4.58203 26.7497 4.58203 25.655ZM9.20865 10.2624C11.0635 10.1444 12.7632 9.96305 14.3075 9.71831C14.6822 9.65722 15.0564 9.5936 15.4291 9.52759C15.8192 9.45851 16.1013 9.11859 16.1013 8.72337C16.1013 8.21154 15.638 7.82609 15.135 7.91189C14.846 7.96118 14.5555 8.00909 14.2635 8.05562C12.7346 8.29923 11.0452 8.47998 9.19523 8.5977C8.91819 8.61558 8.69776 8.70188 8.55608 8.87391C8.42209 9.03661 8.35645 9.23229 8.35645 9.45535C8.35645 9.68212 8.43296 9.87951 8.58568 10.0418L8.58783 10.0439C8.75336 10.2095 8.96369 10.2811 9.20865 10.2624ZM9.20801 14.456C11.0631 14.338 12.763 14.1566 14.3075 13.9119C15.8588 13.6589 17.3936 13.3638 18.9112 13.0266C19.2191 12.9581 19.4498 12.8503 19.5652 12.683C19.6786 12.5221 19.7347 12.3376 19.7347 12.1332C19.7347 11.9026 19.6469 11.704 19.476 11.5426C19.2921 11.3689 19.0348 11.3284 18.7304 11.3911L18.7285 11.3915C17.2823 11.7194 15.794 12.0053 14.2635 12.2492C12.7346 12.4928 11.0452 12.6735 9.19523 12.7913C8.91819 12.8091 8.69776 12.8954 8.55608 13.0675C8.42276 13.2294 8.35645 13.4205 8.35645 13.6363C8.35645 13.8703 8.43209 14.0723 8.58558 14.2354L8.59 14.2396C8.75499 14.3949 8.96316 14.4655 9.20551 14.4562L9.20801 14.456ZM9.20847 18.6494C11.0634 18.5229 12.7631 18.3374 14.3075 18.0927C15.8589 17.8482 17.3934 17.5573 18.9112 17.22C19.2199 17.1514 19.4508 17.0391 19.566 16.8627C19.6783 16.7029 19.7347 16.5233 19.7347 16.3266C19.7347 16.0961 19.6469 15.8974 19.476 15.7361C19.2921 15.5623 19.0348 15.5218 18.7304 15.5845L18.729 15.5848C17.2827 15.9043 15.7942 16.1861 14.2635 16.43C12.7345 16.6736 11.045 16.8586 9.19495 16.9847C8.91804 17.0026 8.69771 17.0889 8.55608 17.2609C8.42276 17.4228 8.35645 17.6139 8.35645 17.8297C8.35645 18.0637 8.43209 18.2658 8.58558 18.4289L8.59 18.433C8.75499 18.5883 8.96316 18.6589 9.20551 18.6496L9.20847 18.6494ZM14.3075 22.257C12.7632 22.5018 11.0635 22.6831 9.20867 22.8012C8.9637 22.8198 8.75337 22.7482 8.58783 22.5826L8.58572 22.5805C8.433 22.4182 8.35645 22.2208 8.35645 21.9941C8.35645 21.771 8.42209 21.5753 8.55608 21.4126C8.69776 21.2406 8.91827 21.1543 9.19531 21.1364C11.0453 21.0187 12.7346 20.838 14.2635 20.5943C14.5555 20.5478 14.846 20.4999 15.135 20.4506C15.638 20.3648 16.1013 20.7503 16.1013 21.2621C16.1013 21.6573 15.8192 21.9972 15.4291 22.0663C15.0564 22.1323 14.6822 22.1959 14.3075 22.257Z" fill="#000091"/>
<svg viewBox="0 0 36 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_830)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M26.5706 16.681V20.756H9.59985V16.681H26.5706ZM26.5706 23.0467V27.1215H9.59985V23.0467H26.5706ZM19.5375 29.2926V33.3674H9.59985V29.2926H19.5375Z"
fill="#E1000F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M35.6982 16.7351V33.2911C35.6826 33.2845 35.667 33.2756 35.6492 33.269V37.4663C35.6492 39.8874 33.641 41.8683 31.1867 41.8683H4.461C2.00664 41.8683 -0.00146484 39.8874 -0.00146484 37.4663V4.45137C-0.00146484 2.03028 2.00664 0.0493774 4.461 0.0493774H18.723V4.45137H4.461V37.4663H31.1867V16.7351H35.6982Z"
fill="#000091"
/>
<path
d="M33.9524 0.0360107H23.626C22.6794 0.0360107 21.9049 0.799997 21.9049 1.73376V11.9202C21.9049 12.854 22.6794 13.618 23.626 13.618H33.9524C34.899 13.618 35.6735 12.854 35.6735 11.9202V1.73376C35.6735 0.799997 34.899 0.0360107 33.9524 0.0360107ZM26.6378 6.40257C26.6378 7.10713 26.0613 7.67588 25.347 7.67588H24.4865V8.73697C24.4865 9.08501 24.1939 9.37362 23.8411 9.37362C23.4883 9.37362 23.1957 9.08501 23.1957 8.73697V5.12925C23.1957 4.66237 23.5829 4.28038 24.0562 4.28038H25.347C26.0613 4.28038 26.6378 4.84913 26.6378 5.55369V6.40257ZM30.9405 8.10031C30.9405 8.80488 30.364 9.37362 29.6497 9.37362H27.9286C27.6877 9.37362 27.4984 9.18687 27.4984 8.94919V4.70482C27.4984 4.46713 27.6877 4.28038 27.9286 4.28038H29.6497C30.364 4.28038 30.9405 4.84913 30.9405 5.55369V8.10031ZM34.3827 4.91704C34.3827 5.26507 34.0901 5.55369 33.7373 5.55369H33.0919V6.40257H33.7373C34.0901 6.40257 34.3827 6.69118 34.3827 7.03922C34.3827 7.38726 34.0901 7.67588 33.7373 7.67588H33.0919V8.73697C33.0919 9.08501 32.7993 9.37362 32.4465 9.37362C32.0936 9.37362 31.8011 9.08501 31.8011 8.73697V5.12925C31.8011 4.66237 32.1883 4.28038 32.6616 4.28038H33.7373C34.0901 4.28038 34.3827 4.569 34.3827 4.91704ZM24.4865 6.40257H25.347V5.55369H24.4865V6.40257ZM28.7892 8.10031H29.6497V5.55369H28.7892V8.10031Z"
fill="#000091"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M35.6734 10.0666V13.6574H32.4942V10.0666H35.6734ZM25.0866 0.0441895V3.59171H21.9041V0.0441895H25.0866Z"
fill="#000091"
/>
</g>
<defs>
<clipPath id="clip0_5_830">
<rect width="36" height="42" fill="white" />
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

src/frontend/apps/impress/src/features/header/components/Burger/Burger.module.css
+32
View File
@@ -0,0 +1,32 @@
.burgerIcon {
cursor: pointer;
transform: translate(-20%, 0%);
}
.burgerIcon path {
stroke-width: 40;
stroke-linecap: round;
fill: none;
transition: all 0.5s ease-in-out;
}
/* In menu form */
.burgerIcon path:first-child,
.burgerIcon path:last-child {
stroke-dasharray: 240px 910px;
}
.burgerIcon .middle_bar {
stroke-dasharray: 240px 240px;
}
/* In cross form */
.open path:first-child,
.open path:last-child {
stroke-dashoffset: -650px;
}
.open :nth-child(2) {
stroke-dasharray: 0 220px;
stroke-dashoffset: -120px;
}
src/frontend/apps/impress/src/features/header/components/Burger/Burger.spec.tsx
+18
View File
@@ -0,0 +1,18 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { Burger } from './Burger';
describe('<Burger />', () => {
test('Burger interactions', () => {
const { rerender } = render(<Burger isOpen={true} />);
const burger = screen.getByRole('img');
expect(burger).toBeInTheDocument();
expect(burger.classList.contains('open')).toBeTruthy();
rerender(<Burger isOpen={false} />);
expect(burger.classList.contains('open')).not.toBeTruthy();
});
});
src/frontend/apps/impress/src/features/header/components/Burger/Burger.tsx
+31
View File
@@ -0,0 +1,31 @@
import { SVGProps } from 'react';
import { Box } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import styles from './Burger.module.css';
import BurgerIcon from './burger.svg';
type BurgerProps = SVGProps<SVGSVGElement> & {
isOpen: boolean;
};
export const Burger = ({ isOpen, ...props }: BurgerProps) => {
const { colorsTokens } = useCunninghamTheme();
return (
<Box
$color={colorsTokens()['primary-text']}
$padding="none"
$justify="center"
>
<BurgerIcon
role="img"
className={`${styles.burgerIcon} ${isOpen ? styles.open : ''}`}
{...props}
/>
</Box>
);
};
export default Burger;
src/frontend/apps/impress/src/features/header/components/Burger/burger.svg
+10
View File
@@ -0,0 +1,10 @@
<svg viewBox="280 230 400 200" stroke="currentColor">
<path
d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
/>
<path d="M300,320 L540,320" />
<path
d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
transform="translate(480, 320) scale(1, -1) translate(-480, -318)"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

src/frontend/apps/impress/src/features/header/components/DropdownMenu.tsx
+46
View File
@@ -0,0 +1,46 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, DropButton } from '@/components';
import { ButtonLogin } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { LanguagePicker } from '@/features/language';
import { Burger } from './Burger/Burger';
export const DropdownMenu = () => {
const { colorsTokens } = useCunninghamTheme();
const [isDropOpen, setIsDropOpen] = useState(false);
const { t } = useTranslation();
return (
<DropButton
button={
<Burger
isOpen={isDropOpen}
width={30}
height={30}
aria-controls="menu"
aria-label={t('Open the header menu')}
/>
}
onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
isOpen={isDropOpen}
>
<Box $align="center" $direction="column">
<Box
$width="100%"
$align="center"
$height="36px"
$justify="center"
$css={`&:hover{background:${colorsTokens()['primary-150']}}`}
$hasTransition
$radius="2px"
>
<LanguagePicker />
</Box>
<ButtonLogin />
</Box>
</DropButton>
);
};
src/frontend/apps/impress/src/features/header/components/Header.tsx
+65 -81
View File
@@ -1,106 +1,90 @@
import { Button } from '@openfun/cunningham-react';
import Image from 'next/image';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Icon, StyledLink, Text } from '@/components/';
import { Box, StyledLink, Text } from '@/components/';
import { ButtonLogin } from '@/core/auth';
import { useCunninghamTheme } from '@/cunningham';
import { LanguagePicker } from '@/features/language';
import { useLeftPanelStore } from '@/features/left-panel';
import { useResponsiveStore } from '@/stores';
import { default as IconDocs } from '../assets/icon-docs.svg?url';
import { HEADER_HEIGHT } from '../conf';
import { DropdownMenu } from './DropdownMenu';
import { LaGaufre } from './LaGaufre';
export const Header = () => {
const { t } = useTranslation();
const theme = useCunninghamTheme();
const { isPanelOpen, togglePanel } = useLeftPanelStore();
const { isDesktop } = useResponsiveStore();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
const { isSmallMobile } = useResponsiveStore();
return (
<Box
as="header"
$css={css`
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: ${HEADER_HEIGHT}px;
min-height: ${HEADER_HEIGHT}px;
padding: 0 ${spacings['base']};
background-color: ${colors['greyscale-000']};
border-bottom: 1px solid ${colors['greyscale-200']};
`}
$justify="center"
$width="100%"
$zIndex="100"
$padding={{ vertical: 'xtiny' }}
$css="box-shadow: 0 1px 4px #00000040;"
>
{!isDesktop && (
<Button
size="medium"
onClick={togglePanel}
aria-label={t('Open the header menu')}
color="primary-text"
icon={<Icon iconName={isPanelOpen ? 'close' : 'menu'} />}
/>
)}
<StyledLink href="/">
<Box
$align="center"
$gap={spacings['3xs']}
$direction="row"
$position="relative"
$height="fit-content"
$margin={{ top: 'auto' }}
>
<Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
<Text
$margin="none"
as="h2"
$color="#000091"
$zIndex={1}
$size="1.30rem"
>
{t('Docs')}
</Text>
<Text
$padding="2px 3px"
$size="8px"
$background="#368bd6"
$color="white"
$position="absolute"
$radius="5px"
$css={`
<Box
$margin={{
left: 'big',
right: isSmallMobile ? 'none' : 'big',
}}
$align="center"
$justify="space-between"
$direction="row"
>
<Box>
<StyledLink href="/">
<Box
$align="center"
$gap="0.8rem"
$direction="row"
$position="relative"
$height="fit-content"
$margin={{ top: 'auto' }}
>
<Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
<Text
$padding="2px 3px"
$size="8px"
$background="#368bd6"
$color="white"
$position="absolute"
$radius="5px"
$css={`
bottom: 13px;
right: -17px;
`}
>
BETA
</Text>
>
BETA
</Text>
<Text
$margin="none"
as="h2"
$color="#000091"
$zIndex={1}
$size="1.30rem"
$css="font-family: 'Marianne'"
>
{t('Docs')}
</Text>
</Box>
</StyledLink>
</Box>
</StyledLink>
{!isDesktop ? (
<Box $direction="row" $gap={spacings['sm']}>
<LaGaufre />
</Box>
) : (
<Box $align="center" $gap={spacings['sm']} $direction="row">
<ButtonLogin />
<LanguagePicker />
<LaGaufre />
</Box>
)}
{isSmallMobile ? (
<Box $direction="row" $gap="2rem">
<LaGaufre />
<DropdownMenu />
</Box>
) : (
<Box $align="center" $gap="2vw" $direction="row">
<ButtonLogin />
<LanguagePicker />
<LaGaufre />
</Box>
)}
</Box>
</Box>
);
};
src/frontend/apps/impress/src/features/header/conf.ts
-1
View File
@@ -1 +0,0 @@
export const HEADER_HEIGHT = 52;
src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
-2
View File
@@ -1,5 +1,4 @@
import { Select } from '@openfun/cunningham-react';
import { Settings } from 'luxon';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
@@ -35,7 +34,6 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
export const LanguagePicker = () => {
const { t, i18n } = useTranslation();
const { preload: languages } = i18n.options;
Settings.defaultLocale = i18n.language;
const optionsPicker = useMemo(() => {
return (languages || []).map((lang) => ({
src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
-81
View File
@@ -1,81 +0,0 @@
import { PropsWithChildren } from 'react';
import { createGlobalStyle, css } from 'styled-components';
import { Box, SeparatedSection } from '@/components';
import { ButtonLogin } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { HEADER_HEIGHT } from '@/features/header/conf';
import { LanguagePicker } from '@/features/language';
import { useResponsiveStore } from '@/stores';
import { useLeftPanelStore } from '../stores';
import { LeftPanelHeader } from './LeftPanelHeader';
const MobileLeftPanelStyle = createGlobalStyle`
body {
overflow: hidden;
}
`;
export const LeftPanel = ({ children }: PropsWithChildren) => {
const { isDesktop } = useResponsiveStore();
const { isPanelOpen } = useLeftPanelStore();
const theme = useCunninghamTheme();
const colors = theme.colorsTokens();
const spacings = theme.spacingsTokens();
return (
<>
{isDesktop && (
<Box
data-testid="left-panel-desktop"
$css={`
height: calc(100vh - ${HEADER_HEIGHT}px);
width: 300px;
min-width: 300px;
border-right: 1px solid ${colors['greyscale-200']};
`}
>
<LeftPanelHeader>{children}</LeftPanelHeader>
</Box>
)}
{!isDesktop && (
<>
{isPanelOpen && <MobileLeftPanelStyle />}
<Box
$hasTransition
$css={css`
z-index: 999;
width: 100dvw;
height: calc(100dvh - 52px);
border-right: 1px solid var(--c--theme--colors--greyscale-200);
position: fixed;
transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
background-color: var(--c--theme--colors--greyscale-000);
`}
>
<Box
data-testid="left-panel-mobile"
$css={css`
width: 100%;
justify-content: center;
align-items: center;
gap: ${spacings['base']};
`}
>
<LeftPanelHeader>{children}</LeftPanelHeader>
<SeparatedSection showSeparator={false}>
<Box $justify="center" $align="center" $gap={spacings['sm']}>
<ButtonLogin />
<LanguagePicker />
</Box>
</SeparatedSection>
</Box>
</Box>
</>
)}
</>
);
};
src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
-55
View File
@@ -1,55 +0,0 @@
import { Button } from '@openfun/cunningham-react';
import { t } from 'i18next';
import { useRouter } from 'next/navigation';
import { PropsWithChildren } from 'react';
import { Box, Icon, SeparatedSection } from '@/components';
import { useCreateDoc } from '@/features/docs';
import { useLeftPanelStore } from '../stores';
export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
const router = useRouter();
const { togglePanel } = useLeftPanelStore();
const { mutate: createDoc } = useCreateDoc({
onSuccess: (doc) => {
router.push(`/docs/${doc.id}`);
togglePanel();
},
});
const goToHome = () => {
router.push('/');
togglePanel();
};
const createNewDoc = () => {
createDoc({ title: t('Untitled document') });
};
return (
<Box $width="100%">
<SeparatedSection>
<Box
$padding={{ horizontal: 'sm' }}
$width="100%"
$direction="row"
$justify="space-between"
$align="center"
>
<Box $direction="row" $gap="2px">
<Button
onClick={goToHome}
size="medium"
color="primary-text"
icon={<Icon iconName="house" />}
/>
</Box>
<Button onClick={createNewDoc}>{t('New doc')}</Button>
</Box>
</SeparatedSection>
{children}
</Box>
);
};
src/frontend/apps/impress/src/features/left-panel/components/index.tsx
-1
View File
@@ -1 +0,0 @@
export * from './LeftPanel';

Some files were not shown because too many files have changed in this diff Show More