Skip to content

Commit 5b11f37

Browse files
authored
refactor: code format (#5357)
1 parent 1263696 commit 5b11f37

File tree

6 files changed

+110
-89
lines changed

6 files changed

+110
-89
lines changed

.github/workflows/codeql.yml

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ name: "CodeQL Advanced"
1313

1414
on:
1515
push:
16-
branches: [ "main" ]
16+
branches: ["main"]
1717
pull_request:
18-
branches: [ "main" ]
18+
branches: ["main"]
1919
schedule:
20-
- cron: '23 2 * * 2'
20+
- cron: "23 2 * * 2"
2121

2222
jobs:
2323
analyze:
@@ -43,10 +43,10 @@ jobs:
4343
fail-fast: false
4444
matrix:
4545
include:
46-
- language: actions
47-
build-mode: none
48-
- language: javascript-typescript
49-
build-mode: none
46+
- language: actions
47+
build-mode: none
48+
- language: javascript-typescript
49+
build-mode: none
5050
# CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
5151
# Use `c-cpp` to analyze code written in C, C++ or both
5252
# Use 'java-kotlin' to analyze code written in Java, Kotlin or both
@@ -56,45 +56,45 @@ jobs:
5656
# If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
5757
# your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
5858
steps:
59-
- name: Checkout repository
60-
uses: actions/checkout@v5
59+
- name: Checkout repository
60+
uses: actions/checkout@v5
6161

62-
# Add any setup steps before running the `github/codeql-action/init` action.
63-
# This includes steps like installing compilers or runtimes (`actions/setup-node`
64-
# or others). This is typically only required for manual builds.
65-
# - name: Setup runtime (example)
66-
# uses: actions/setup-example@v1
62+
# Add any setup steps before running the `github/codeql-action/init` action.
63+
# This includes steps like installing compilers or runtimes (`actions/setup-node`
64+
# or others). This is typically only required for manual builds.
65+
# - name: Setup runtime (example)
66+
# uses: actions/setup-example@v1
6767

68-
# Initializes the CodeQL tools for scanning.
69-
- name: Initialize CodeQL
70-
uses: github/codeql-action/init@v3
71-
with:
72-
languages: ${{ matrix.language }}
73-
build-mode: ${{ matrix.build-mode }}
74-
# If you wish to specify custom queries, you can do so here or in a config file.
75-
# By default, queries listed here will override any specified in a config file.
76-
# Prefix the list here with "+" to use these queries and those in the config file.
68+
# Initializes the CodeQL tools for scanning.
69+
- name: Initialize CodeQL
70+
uses: github/codeql-action/init@v3
71+
with:
72+
languages: ${{ matrix.language }}
73+
build-mode: ${{ matrix.build-mode }}
74+
# If you wish to specify custom queries, you can do so here or in a config file.
75+
# By default, queries listed here will override any specified in a config file.
76+
# Prefix the list here with "+" to use these queries and those in the config file.
7777

78-
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
79-
# queries: security-extended,security-and-quality
78+
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
79+
# queries: security-extended,security-and-quality
8080

81-
# If the analyze step fails for one of the languages you are analyzing with
82-
# "We were unable to automatically build your code", modify the matrix above
83-
# to set the build mode to "manual" for that language. Then modify this step
84-
# to build your code.
85-
# ℹ️ Command-line programs to run using the OS shell.
86-
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
87-
- if: matrix.build-mode == 'manual'
88-
shell: bash
89-
run: |
90-
echo 'If you are using a "manual" build mode for one or more of the' \
91-
'languages you are analyzing, replace this with the commands to build' \
92-
'your code, for example:'
93-
echo ' make bootstrap'
94-
echo ' make release'
95-
exit 1
81+
# If the analyze step fails for one of the languages you are analyzing with
82+
# "We were unable to automatically build your code", modify the matrix above
83+
# to set the build mode to "manual" for that language. Then modify this step
84+
# to build your code.
85+
# ℹ️ Command-line programs to run using the OS shell.
86+
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
87+
- if: matrix.build-mode == 'manual'
88+
shell: bash
89+
run: |
90+
echo 'If you are using a "manual" build mode for one or more of the' \
91+
'languages you are analyzing, replace this with the commands to build' \
92+
'your code, for example:'
93+
echo ' make bootstrap'
94+
echo ' make release'
95+
exit 1
9696
97-
- name: Perform CodeQL Analysis
98-
uses: github/codeql-action/analyze@v3
99-
with:
100-
category: "/language:${{matrix.language}}"
97+
- name: Perform CodeQL Analysis
98+
uses: github/codeql-action/analyze@v3
99+
with:
100+
category: "/language:${{matrix.language}}"

.github/workflows/copilot-setup-steps.yml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,4 @@ jobs:
3535

3636
- name: Install JavaScript dependencies
3737
run: npm ci
38-
3938
# TODO: we probably would want to enhance this with further aspects like e.g. linting or testing. But we would need to determine the tradeoff in between slowing down Copilot with this, as we would most likely run some of this work later on within the PR anyhow.

docs/adr/adr-03-dependency-automation.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,32 +59,39 @@ If dependencies are not updated automatically, packages can outdated and provide
5959
The repository uses Dependabot with the following strategy:
6060

6161
#### Version Pinning Strategy
62+
6263
- **All dependencies are pinned to exact versions** (no `^` or `~` prefixes) to ensure reproducible builds
6364
- **Peer dependencies** maintain ranges for compatibility (e.g., `"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"`)
6465
- **Internal workspace dependencies** use `"*"` for monorepo flexibility
6566
- **Versioning strategy**: `increase` ensures all updates generate pull requests
6667

6768
#### Automation Levels
69+
6870
1. **Patch updates**: Automatically approved and merged via GitHub Actions
6971
2. **Minor updates**: Grouped by technology/framework, require manual review
7072
3. **Major updates**: Blocked for critical dependencies (Angular, React, TypeScript) requiring manual coordination
7173

7274
#### Dependency Grouping
75+
7376
Dependencies are logically grouped to reduce PR noise:
77+
7478
- **Framework groups**: Angular, React, Next.js
7579
- **Tool groups**: ESLint, Stylelint, Prettier, TypeScript, Vite
76-
- **Testing groups**: Playwright, Vitest
80+
- **Testing groups**: Playwright, Vitest
7781
- **Development tools**: Commitlint
7882
- **Patch group**: All patch updates bundled together
7983

8084
#### Schedule and Timing
85+
8186
- **Daily runs at 23:00 Europe/Berlin timezone**
8287
- **Pull request limit**: 10 concurrent PRs to avoid overwhelming maintainers
8388

8489
#### Ignored Dependencies
90+
8591
Certain dependencies are intentionally ignored for manual control:
92+
8693
- Angular major versions (coordinated framework updates)
87-
- React major versions (coordinated framework updates)
94+
- React major versions (coordinated framework updates)
8895
- TypeScript major versions (requires codebase compatibility review)
8996
- Sass (temporary due to compatibility issues)
9097
- ESLint v9 major (pending migration planning)

docs/adr/adr-05-copilot-developer-doc.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,39 +17,32 @@ Key requirements:
1717
## Decision
1818

1919
1. Documentation Format & Location
20-
2120
- Use Markdown files per component, stored in packages/components/docs/ or packages/components/src/components/docs/.
2221
- Central table of contents in docs/llms.txt listing all component docs with relative paths.
2322

2423
2. GitHub Copilot Custom Instructions
25-
2624
- Place `copilot-instructions.md` in the project root (under .github/) to provide global guidance.
2725
- Instruct Copilot Chat to load this file automatically; it will include links to llms.txt and recommended file paths.
2826

2927
3. Automatic Context Loading
30-
3128
- In VS Code and IntelliJ, Copilot Chat will automatically read `.github/copilot-instructions.md` on new chats.
3229
- To surface specific details, embed documentation (e.g., Button.md) directly in `copilot-instructions.md`.
3330

3431
4. Interactive Context Attachment
35-
3632
- For deeper or ad-hoc queries, use the "Attach Context" feature in Copilot Chat to load component Markdown files during the session.
3733

3834
5. Static Site & Developer Docs (future usage, not part of the current scope)
39-
4035
- Integrate component docs via Astro as a package in the monorepo, referencing Markdown sources in packages/components/... .
4136
- Render pages dynamically under /components/[slug] and /api/[slug] for manual browsing.
4237

4338
6. Automated Propagation of Copilot Instructions
4439

4540
We add a `postinstall` hook to our component package that:
46-
4741
- copies or appends the package-specific file `.github/copilot-instructions.md` to the target project,
4842
- uses unique markers to automatically replace outdated blocks during future installations,
4943
- handles missing or already existing files as well as idempotent updates cleanly, ensuring that every installation immediately provides the latest Copilot context for our package.
5044

5145
7. Automate generation and propagation of Copilot instructions on package build.
52-
5346
- Define `generate:agent` in `package.json` and hook into `prepare`.
5447
- Only include `*.md` files whose filename matches the parent directory converted to PascalCase (e.g. `custom-select``CustomSelect.md`), ensuring no unrelated MDs are merged.
5548

@@ -62,7 +55,6 @@ Key requirements:
6255
## Consequences
6356

6457
- Pros:
65-
6658
- Clear separation: manual design guidance (Markdown) vs. AI context (`copilot-instructions.md` + `llms.txt` snippets).
6759
- Maintains single source (docs in packages/components/docs).
6860
- Enables Copilot to provide accurate, component-specific suggestions without manual file opening.

docs/chrome-devtools-integration.md

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,18 @@ The DB UX Design System now includes enhanced Chrome DevTools integration via th
77
## What's Included
88

99
The plugin is automatically enabled in all Vite-based development environments:
10+
1011
- React showcase (`/showcases/react-showcase/`)
1112
- Vue showcase (`/showcases/vue-showcase/`)
1213

1314
## Enhanced Features
1415

1516
### 1. DevTools JSON Generation
17+
1618
The plugin automatically generates a `com.chrome.devtools.json` file that provides metadata about the running application to Chrome DevTools.
1719

1820
### 2. Better Debugging Experience
21+
1922
- Enhanced source mapping
2023
- Improved component inspection
2124
- Better performance profiling
@@ -24,26 +27,29 @@ The plugin automatically generates a `com.chrome.devtools.json` file that provid
2427
## How to Use
2528

2629
### Prerequisites
30+
2731
- Google Chrome or Chromium-based browser
2832
- Chrome DevTools (built-in)
2933

3034
### Steps
35+
3136
1. Start any Vite development server:
32-
```bash
33-
# React showcase
34-
cd showcases/react-showcase && npm run dev
3537

36-
# Vue showcase
37-
cd showcases/vue-showcase && npm run dev
38-
```
38+
```bash
39+
# React showcase
40+
cd showcases/react-showcase && npm run dev
41+
42+
# Vue showcase
43+
cd showcases/vue-showcase && npm run dev
44+
```
3945

4046
2. Open Chrome DevTools (F12)
4147

4248
3. The enhanced debugging features will be automatically available in:
43-
- **Sources** tab - Better source mapping
44-
- **Elements** tab - Enhanced component inspection
45-
- **Performance** tab - More detailed profiling
46-
- **Console** tab - Improved error reporting
49+
- **Sources** tab - Better source mapping
50+
- **Elements** tab - Enhanced component inspection
51+
- **Performance** tab - More detailed profiling
52+
- **Console** tab - Improved error reporting
4753

4854
### Verifying the Integration
4955

@@ -52,16 +58,19 @@ When the development server starts, you should see the Vite server output withou
5258
## Development Workflow
5359

5460
### Component Development
61+
5562
- Use the **Elements** tab to inspect component structures
5663
- Leverage enhanced source maps for debugging
5764
- Utilize improved error reporting in the **Console**
5865

5966
### Performance Analysis
67+
6068
- Use the **Performance** tab for detailed profiling
6169
- Monitor component rendering performance
6270
- Analyze bundle loading characteristics
6371

6472
### Source Code Navigation
73+
6574
- Enhanced source mapping makes debugging easier
6675
- Better stack traces for error resolution
6776
- Improved breakpoint debugging experience
@@ -71,13 +80,13 @@ When the development server starts, you should see the Vite server output withou
7180
The plugin is configured with default settings in all Vite configurations:
7281

7382
```typescript
74-
import devtoolsJson from 'vite-plugin-devtools-json';
83+
import devtoolsJson from "vite-plugin-devtools-json";
7584
7685
// In vite.config.ts
7786
plugins: [
78-
// ... other plugins
79-
devtoolsJson() // Enable Chrome DevTools JSON generation
80-
]
87+
// ... other plugins
88+
devtoolsJson() // Enable Chrome DevTools JSON generation
89+
];
8190
```
8291

8392
## Browser Compatibility
@@ -91,26 +100,32 @@ plugins: [
91100
## Troubleshooting
92101

93102
### Plugin Not Loading
103+
94104
If you see errors related to the DevTools plugin:
105+
95106
1. Ensure you're using a Chromium-based browser
96107
2. Clear browser cache and restart the development server
97108
3. Check console for specific error messages
98109
99110
### Missing DevTools Features
111+
100112
If enhanced features aren't visible:
113+
101114
1. Verify the development server started without errors
102115
2. Open DevTools before navigating to the application
103116
3. Refresh the page with DevTools open
104117

105118
## Production Impact
106119

107120
The `vite-plugin-devtools-json` only affects development builds. Production builds are not impacted:
121+
108122
- No additional bundle size
109123
- No runtime performance impact
110124
- No security concerns
111125

112126
## More Information
113127

114128
For detailed information about the plugin, visit:
129+
115130
- [Plugin Repository](https://github.com/ChromeDevTools/vite-plugin-devtools-json)
116131
- [Chrome DevTools Documentation](https://developer.chrome.com/docs/devtools/)

0 commit comments

Comments
 (0)