Conversation
WalkthroughThis PR transitions the project from Storybook-based documentation to Docfy, adds comprehensive component documentation (80+ markdown files), upgrades Ember CLI and related dependencies to version 6.7.0, and updates Swagger UI integration imports across public API components. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.5.0)app/components/docs-layout/index.scssAllFilesIgnoredError: All input files were ignored because of the ignore pattern. Either change your input, ignore pattern or use "--allow-empty-input" to allow no inputs Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying irenestaging with
|
| Latest commit: |
2b34d76
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ce067abf.irenestaging.pages.dev |
| Branch Preview URL: | https://pd-2208-ember-docfy-v6.irenestaging.pages.dev |
Irene
|
||||||||||||||||||||||||||||||||||
| Project |
Irene
|
| Branch Review |
PD-2208-Ember-Docfy-V6
|
| Run status |
|
| Run duration | 04m 48s |
| Commit |
|
| Committer | SmitGala |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
0
|
Pending
|
1
|
Skipped
|
1
|
Passing
|
29
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/tests/dynamic-scan.spec.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Dynamic Scan > it tests dynamic scan for an apk file: 132571 |
Test Replay
Screenshots
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Nitpick comments (4)
docs/components/ak-menu-demo/default.md (1)
27-31: Consider:iconproperty inmenuDatais not used in the template.The
menuDataarray includes aniconproperty for each item, but the template only renders thelabelviaAkTypography. If icons are intended to be displayed, they should be added to the template. If this is intentional (e.g., to show data structure flexibility), consider adding a comment or using it in the demo.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/ak-menu-demo/default.md` around lines 27 - 31, The demo's menuData entries include an icon property that isn't rendered; update the template that renders the menu (where AkTypography currently displays item.label) to also render the item's icon (e.g., alongside or before label) using the project's icon component or an <Icon/> equivalent so icons from menuData are visible, or if icons are intentionally unused, add a clarifying comment in the demo next to menuData to explain why icon is present but not rendered.docs/components/ak-popover.md (1)
18-18: Clarify thearrowColordescription.The description "light or dark" is incomplete. Consider expanding it to clarify the expected values and usage, e.g., "Arrow color theme: 'light' or 'dark'".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/ak-popover.md` at line 18, The table row for the prop `arrowColor` is vague; update its description to clearly state the expected values and usage by replacing "light or dark" with a concise phrase such as "Arrow color theme: 'light' | 'dark' (controls popover arrow styling)" so readers understand the allowed string values and purpose of `arrowColor`.docs/components/ak-typography.md (1)
14-14: Consider clarifying the "auto" default value.The
tagprop default is listed as "auto". Consider adding a brief note explaining what "auto" means (e.g., "auto-selected based on variant") to improve clarity for users.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/ak-typography.md` at line 14, Update the docs entry for the `tag` prop in ak-typography to clarify what the "auto" default means: state that `tag` defaults to "auto" which causes the component (AKTypography / <AKTypography>) to choose the HTML element automatically based on the `variant` (or text purpose) — e.g., headings map to <h1>-<h6>, body text to <p>/span — so readers understand how the element is selected when `tag` is not provided.docs/components/ak-accordion-demo/with-icon.md (1)
64-66: Guard dynamic key updates inhandleChange.Using
this[id]directly can mutate unintended fields ifidis unexpected. A small allowlist keeps the demo safer and clearer.Suggested refactor
`@action` handleChange(id) { - this[id] = !this[id]; + if (id === 'withIcon1' || id === 'withIcon2' || id === 'withIcon3') { + this[id] = !this[id]; + } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/ak-accordion-demo/with-icon.md` around lines 64 - 66, The handleChange method currently flips this[id] directly which can mutate unexpected properties; guard dynamic key updates by implementing an allowlist of valid accordion keys (e.g., const allowed = ['panel1','panel2','panel3'] or similar) and only perform the toggle when id is included in that list, otherwise ignore or log a warning; update the handleChange(id) implementation to validate id against the allowlist before assigning to this[id] so only known fields are mutated.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/docs-layout/index.scss`:
- Around line 201-210: The inline code selector :not(pre) > code has
insufficient color contrast; update its styles to match the accessible
inline-code fix used elsewhere (use the same foreground color, e.g., the
darker/accessibility-approved hex or CSS variable and the same background/border
values) so the text color meets contrast guidelines and remains consistent with
other inline code styling.
- Around line 173-181: The inline code color for table cells (selectors "td
code" and "th code") uses `#e83e8c` which fails WCAG AA contrast for small text;
update the color value to a darker shade (for example `#d63384` or `#c21d65`) to
achieve at least a 4.5:1 contrast ratio against the existing background `#f6f8fa`,
then verify the new contrast with an accessibility tool and commit the change in
the docs-layout SCSS where the td code / th code rules are defined.
In `@app/components/public-api-docs/index.ts`:
- Around line 1-2: The current import attempts to pull named exports
SwaggerUIBundle and SwaggerUIStandalonePreset from swagger-ui-dist which doesn't
export them; replace the incorrect import by importing the actual bundle files
(import SwaggerUIBundle from 'swagger-ui-dist/swagger-ui-bundle.js' and import
SwaggerUIStandalonePreset from
'swagger-ui-dist/swagger-ui-standalone-preset.js') or switch to the 'swagger-ui'
package and import from there, and remove the `@ts-expect-error` comment;
reference the symbols SwaggerUIBundle, SwaggerUIStandalonePreset and
getAbsoluteFSPath when updating the import lines in the module initializing the
Swagger UI.
In `@app/services/store.js`:
- Line 1: Delete the duplicate "store.js" file and keep the TypeScript
"store.ts" version; both currently export the same default from
'ember-data/store' so removing store.js will not affect imports (which reference
ember-data/store directly); remove store.js from the repo/commit, confirm no
other files import "store.js" by name, and run the build/tests to ensure no
breakage.
In `@docs/components/ak-accordion-demo/groups.md`:
- Line 9: The `@defaultOpen` value in the AkAccordion::Group demo is using
"accordion-open" which doesn't match the IDs defined in accordionList
("accordion-secondary" and "accordion-primary"), so replace the `@defaultOpen`
entry with a valid ID (e.g., "accordion-secondary") or add an inline comment
explaining the mismatch is intentional; update the AkAccordion::Group line
(symbol: AkAccordion::Group, attribute: `@defaultOpen`) to reference an existing
accordion ID from accordionList (symbols: accordionList, "accordion-secondary",
"accordion-primary") or document the intended behavior.
In `@docs/components/ak-autocomplete-demo/basic.md`:
- Around line 31-36: The property searchQuery in the component is missing the
`@tracked` decorator so template updates won't run when handleChange mutates it;
fix by importing tracked from "@glimmer/tracking" (if not already) and add the
`@tracked` decorator to the searchQuery property declaration (the symbol
searchQuery) so changes performed by the handleChange(searchValue) action
trigger re-rendering.
In `@docs/components/ak-autocomplete-demo/loading.md`:
- Around line 18-27: The demo's searchQuery field is mutated by handleChange but
not marked as reactive, so template updates can be missed; fix by importing and
applying the `@tracked` decorator to the searchQuery property (update the class
export that defines options, searchQuery and handleChange) so changes in
handleChange trigger template re-renders—ensure you add the tracked import and
annotate searchQuery with `@tracked`.
In `@docs/components/ak-autocomplete-demo/with-filter.md`:
- Around line 20-41: The searchQuery field is mutated in the handleChange action
but not reactive; import the tracked decorator from '@glimmer/tracking' and
annotate the searchQuery property with `@tracked` so template bindings update when
handleChange sets this.searchQuery; update the top import list to include
tracked and leave the initial value ('ph') unchanged.
In `@docs/components/ak-icon-button.md`:
- Line 100: The example uses an unsupported prop `@color` on AkIconButton; remove
the `@color`="danger" or replace it with a supported `@borderColor` value. Update
the example line for AkIconButton to omit `@color` or use `@borderColor`="primary"
(or "secondary" / "default") so it matches the component API and documented
props.
In `@docs/components/ak-select-demo/default.md`:
- Around line 23-36: The property selected in the component is mutated by the
handleSelectChange action but lacks reactivity; import the tracked decorator
from `@glimmer/tracking` and annotate the selected field with `@tracked` (e.g., add
"import { tracked } from '@glimmer/tracking';" and change selected to `@tracked`
selected = this.selectItems[0];) so UI updates when handleSelectChange runs;
keep selectItems and handleSelectChange as-is.
In `@docs/components/ak-select-demo/multiple.md`:
- Around line 22-36: The component's selected state is mutated in the
handleSelectChange action but isn't tracked, so add the `@tracked` decorator to
the selected property and import tracked from '@glimmer/tracking'; update the
declaration of selected (the selected property in the default class) to be
decorated with `@tracked` so Glimmer will reactively update the UI when
handleSelectChange assigns a new value.
In `@docs/components/ak-tabs.md`:
- Line 9: Update the docs/components/ak-tabs.md description to correct the
component name: replace the incorrect "Akt.tabItem" reference with the correct
"AkTabs" so the sentence reads that you should use AkTabs with AkTabs.tabItem
(or simply AkTabs for each tab) and ensure any other mentions of "Akt" are
corrected to "AkTabs".
In `@package.json`:
- Around line 214-215: The package.json includes an unused dependency
"swagger-ui" which is not imported anywhere (only "swagger-ui-dist" is used by
the components public-api-docs/api-endpoints, public-api-docs/schemas, and
public-api-docs), so remove the "swagger-ui" entry from package.json to reduce
bundle size and update lockfile by running your package manager (e.g.,
npm/yarn/pnpm install) to ensure the removal is reflected; confirm no imports of
"swagger-ui" remain before committing.
- Line 211: Remove the unused npm package entry "path": "^0.12.7" from
package.json and update lockfiles by running the package manager (e.g., npm
uninstall path or remove the line and run npm install / npm ci) so the
dependency and its lockfile references are cleared; verify no imports reference
the npm package (code references use Node's built-in path in files like
staticserver/index.js and .docfy-config.js).
---
Nitpick comments:
In `@docs/components/ak-accordion-demo/with-icon.md`:
- Around line 64-66: The handleChange method currently flips this[id] directly
which can mutate unexpected properties; guard dynamic key updates by
implementing an allowlist of valid accordion keys (e.g., const allowed =
['panel1','panel2','panel3'] or similar) and only perform the toggle when id is
included in that list, otherwise ignore or log a warning; update the
handleChange(id) implementation to validate id against the allowlist before
assigning to this[id] so only known fields are mutated.
In `@docs/components/ak-menu-demo/default.md`:
- Around line 27-31: The demo's menuData entries include an icon property that
isn't rendered; update the template that renders the menu (where AkTypography
currently displays item.label) to also render the item's icon (e.g., alongside
or before label) using the project's icon component or an <Icon/> equivalent so
icons from menuData are visible, or if icons are intentionally unused, add a
clarifying comment in the demo next to menuData to explain why icon is present
but not rendered.
In `@docs/components/ak-popover.md`:
- Line 18: The table row for the prop `arrowColor` is vague; update its
description to clearly state the expected values and usage by replacing "light
or dark" with a concise phrase such as "Arrow color theme: 'light' | 'dark'
(controls popover arrow styling)" so readers understand the allowed string
values and purpose of `arrowColor`.
In `@docs/components/ak-typography.md`:
- Line 14: Update the docs entry for the `tag` prop in ak-typography to clarify
what the "auto" default means: state that `tag` defaults to "auto" which causes
the component (AKTypography / <AKTypography>) to choose the HTML element
automatically based on the `variant` (or text purpose) — e.g., headings map to
<h1>-<h6>, body text to <p>/span — so readers understand how the element is
selected when `tag` is not provided.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 0acf0557-5455-4bbd-a89b-ae7b3feb3726
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (74)
.docfy-config.js.eslintrc.jsapp/components/ak-tree/index.tsapp/components/ak-tree/provider/index.tsapp/components/docs-layout/index.hbsapp/components/docs-layout/index.scssapp/components/docs-layout/index.tsapp/components/public-api-docs/api-endpoints/index.tsapp/components/public-api-docs/index.tsapp/components/public-api-docs/schemas/index.tsapp/router.tsapp/services/store.jsapp/templates/docs.hbsapp/utils/freshdesk.tsconfig/ember-cli-update.jsondocs/components/ak-accordion-demo/accordion-presets.mddocs/components/ak-accordion-demo/custom.mddocs/components/ak-accordion-demo/default.mddocs/components/ak-accordion-demo/groups.mddocs/components/ak-accordion-demo/mount-unmount.mddocs/components/ak-accordion-demo/with-icon.mddocs/components/ak-accordion.mddocs/components/ak-appbar.mddocs/components/ak-autocomplete-demo/basic.mddocs/components/ak-autocomplete-demo/loading.mddocs/components/ak-autocomplete-demo/with-filter.mddocs/components/ak-autocomplete.mddocs/components/ak-button.mddocs/components/ak-checkbox-tree-demo/basic.mddocs/components/ak-checkbox-tree-demo/disabled.mddocs/components/ak-checkbox-tree-demo/no-cascade.mddocs/components/ak-checkbox-tree-demo/without-checkboxes.mddocs/components/ak-checkbox-tree.mddocs/components/ak-checkbox.mddocs/components/ak-chip-demo/deletable.mddocs/components/ak-chip.mddocs/components/ak-clipboard.mddocs/components/ak-date-picker.mddocs/components/ak-divider.mddocs/components/ak-drawer.mddocs/components/ak-icon-button.mddocs/components/ak-icon.mddocs/components/ak-link.mddocs/components/ak-list.mddocs/components/ak-loader.mddocs/components/ak-menu-demo/default.mddocs/components/ak-menu-demo/with-icons.mddocs/components/ak-menu.mddocs/components/ak-modal.mddocs/components/ak-pagination.mddocs/components/ak-popover-demo/default.mddocs/components/ak-popover.mddocs/components/ak-radio.mddocs/components/ak-select-demo/default.mddocs/components/ak-select-demo/multiple.mddocs/components/ak-select.mddocs/components/ak-skeleton.mddocs/components/ak-stack.mddocs/components/ak-table-demo/default.mddocs/components/ak-table.mddocs/components/ak-tabs-demo/button-variant.mddocs/components/ak-tabs-demo/custom-badge-content.mddocs/components/ak-tabs-demo/link-variant.mddocs/components/ak-tabs.mddocs/components/ak-text-field-demo/with-event.mddocs/components/ak-text-field.mddocs/components/ak-toggle.mddocs/components/ak-tooltip.mddocs/components/ak-tree.mddocs/components/ak-typography.mddocs/index.mdember-cli-build.jspackage.jsontypes/global.d.ts
| td code, | ||
| th code { | ||
| font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | ||
| font-size: 13px; | ||
| background: #f6f8fa; | ||
| padding: 2px 6px; | ||
| border-radius: 4px; | ||
| color: #e83e8c; | ||
| } |
There was a problem hiding this comment.
Address contrast ratio for inline code in tables.
SonarCloud flags that #e83e8c on #f6f8fa background may not meet WCAG AA contrast requirements for small text (needs 4.5:1 ratio). Consider using a darker shade like #d63384 or #c21d65 to improve accessibility.
🎨 Proposed fix for better contrast
td code,
th code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 13px;
background: `#f6f8fa`;
padding: 2px 6px;
border-radius: 4px;
- color: `#e83e8c`;
+ color: `#d63384`;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| td code, | |
| th code { | |
| font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | |
| font-size: 13px; | |
| background: #f6f8fa; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| color: #e83e8c; | |
| } | |
| td code, | |
| th code { | |
| font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | |
| font-size: 13px; | |
| background: `#f6f8fa`; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| color: `#d63384`; | |
| } |
🧰 Tools
🪛 GitHub Check: SonarCloud Code Analysis
[warning] 180-180: Text does not meet the minimal contrast requirement with its background.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/docs-layout/index.scss` around lines 173 - 181, The inline
code color for table cells (selectors "td code" and "th code") uses `#e83e8c`
which fails WCAG AA contrast for small text; update the color value to a darker
shade (for example `#d63384` or `#c21d65`) to achieve at least a 4.5:1 contrast
ratio against the existing background `#f6f8fa`, then verify the new contrast with
an accessibility tool and commit the change in the docs-layout SCSS where the td
code / th code rules are defined.
| // @ts-expect-error no type defs | ||
| import SwaggerUI from 'swagger-ui'; | ||
| import { SwaggerUIBundle, SwaggerUIStandalonePreset } from 'swagger-ui-dist'; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
swagger-ui-dist npm package exports SwaggerUIBundle SwaggerUIStandalonePreset
💡 Result:
The swagger-ui-dist npm package (latest version 5.32.0 as of Feb 2026) exposes Swagger UI's dist folder contents for static serving. Its primary export is getAbsoluteFSPath (also called absolutePath in older docs) to get the filesystem path to the dist assets. Official npm README and Swagger docs claim it supports importing { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist", with example: import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"; However, a 2023 GitHub issue (#9163) reports that require('swagger-ui-dist') only returns { absolutePath: fn, getAbsoluteFSPath: fn }, without exporting SwaggerUIBundle or SwaggerUIStandalonePreset. This issue was for v5.4.2 and is closed, but no resolution snippet shown. The docs may be outdated or the feature unimplemented/inconsistent across versions/environments. The package includes files like swagger-ui-bundle.js (UMD bundle exporting SwaggerUIBundle globally) and swagger-ui-standalone-preset.js. To use these in code, import/require the specific bundle files from the package path, e.g.: import SwaggerUIBundle from 'swagger-ui-dist/swagger-ui-bundle.js'; import SwaggerUIStandalonePreset from 'swagger-ui-dist/swagger-ui-standalone-preset.js'; For static serving (intended use): const path = require('swagger-ui-dist').getAbsoluteFSPath; then serve files from that path. Recommend using 'swagger-ui' package instead for proper module bundling with dependencies.
Citations:
- 1: https://www.npmjs.com/package/swagger-ui-dist
- 2:
swagger-ui-distdoes not exportSwaggerUIBundleswagger-api/swagger-ui#9163 - 3: https://registry.npmjs.org/swagger-ui-dist
- 4: https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/
🏁 Script executed:
# Verify the file exists and examine its contents
if [ -f "app/components/public-api-docs/index.ts" ]; then
echo "=== File exists ==="
wc -l app/components/public-api-docs/index.ts
echo ""
echo "=== Lines 1-10 ==="
head -10 app/components/public-api-docs/index.ts
echo ""
echo "=== Lines around line 72 (SwaggerUI usage) ==="
sed -n '65,80p' app/components/public-api-docs/index.ts
else
echo "File not found"
fiRepository: appknox/irene
Length of output: 1078
🏁 Script executed:
# Check if there are any other imports from swagger-ui or swagger-ui-dist in the codebase
echo "=== Checking for swagger-ui imports ==="
rg "swagger-ui" --type ts --type tsx -n | head -20Repository: appknox/irene
Length of output: 141
🏁 Script executed:
# Check package.json to see what version of swagger-ui-dist is installed
echo "=== Checking package.json dependencies ==="
if [ -f "package.json" ]; then
cat package.json | grep -A 5 -B 5 "swagger-ui"
fiRepository: appknox/irene
Length of output: 388
Incorrect import pattern: swagger-ui-dist does not export SwaggerUIBundle and SwaggerUIStandalonePreset as named exports.
The swagger-ui-dist package is a distribution-only package for serving static assets. Named exports of SwaggerUIBundle and SwaggerUIStandalonePreset are not available; the package only exports getAbsoluteFSPath for locating dist assets.
To use Swagger UI programmatically, either:
- Import from the specific bundle files within the package:
import SwaggerUIBundle from 'swagger-ui-dist/swagger-ui-bundle.js'; import SwaggerUIStandalonePreset from 'swagger-ui-dist/swagger-ui-standalone-preset.js';
- Use the
swagger-uipackage instead (already inpackage.jsonas^5.30.3).
The @ts-expect-error comment is masking the actual issue.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/public-api-docs/index.ts` around lines 1 - 2, The current
import attempts to pull named exports SwaggerUIBundle and
SwaggerUIStandalonePreset from swagger-ui-dist which doesn't export them;
replace the incorrect import by importing the actual bundle files (import
SwaggerUIBundle from 'swagger-ui-dist/swagger-ui-bundle.js' and import
SwaggerUIStandalonePreset from
'swagger-ui-dist/swagger-ui-standalone-preset.js') or switch to the 'swagger-ui'
package and import from there, and remove the `@ts-expect-error` comment;
reference the symbols SwaggerUIBundle, SwaggerUIStandalonePreset and
getAbsoluteFSPath when updating the import lines in the module initializing the
Swagger UI.
| @@ -0,0 +1 @@ | |||
| export { default } from 'ember-data/store'; | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if other service files use TypeScript
fd -e ts -e js . app/services --exec basename {} \; | sort | uniq -c | sort -rnRepository: appknox/irene
Length of output: 978
🏁 Script executed:
cat app/services/store.jsRepository: appknox/irene
Length of output: 100
🏁 Script executed:
cat app/services/store.tsRepository: appknox/irene
Length of output: 100
🏁 Script executed:
# Check if store.js is imported anywhere in the codebase
rg "from.*store\.js" --type ts --type jsRepository: appknox/irene
Length of output: 39
🏁 Script executed:
# Check if store.ts is imported anywhere in the codebase
rg "from.*store'" --type ts --type js | head -20Repository: appknox/irene
Length of output: 1948
🏁 Script executed:
# Check if the store service is injected using `@service` decorator
rg "@service.*store" --type ts --type js | head -20Repository: appknox/irene
Length of output: 1382
🏁 Script executed:
# Check git history for both files
git log --oneline -- app/services/store.js app/services/store.ts | head -10Repository: appknox/irene
Length of output: 82
🏁 Script executed:
# Search for any references to app/services/store in test files or config
rg "app/services/store" --type ts --type jsRepository: appknox/irene
Length of output: 39
🏁 Script executed:
# Check if there are any imports that alias the store differently
rg "import.*store" app/services --type ts | grep -v "ember-data"Repository: appknox/irene
Length of output: 39
🏁 Script executed:
# Check the commit that added these files
git show c2936fea --stat | grep -i storeRepository: appknox/irene
Length of output: 7742
Delete the duplicate store.js file.
Both store.js and store.ts exist in app/services/ with identical content, but neither is used anywhere in the codebase. All imports reference ember-data/store directly. Keep store.ts (the TypeScript version, consistent with the rest of the codebase) and remove store.js.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/services/store.js` at line 1, Delete the duplicate "store.js" file and
keep the TypeScript "store.ts" version; both currently export the same default
from 'ember-data/store' so removing store.js will not affect imports (which
reference ember-data/store directly); remove store.js from the repo/commit,
confirm no other files import "store.js" by name, and run the build/tests to
ensure no breakage.
| <AkStack @direction="column" @spacing="3" @width="full"> | ||
| <AkStack @direction="column" @width="full"> | ||
| <AkTypography @variant="h4" @color="inherit" @gutterBottom={{true}}>Group with multiple expanded</AkTypography> | ||
| <AkAccordion::Group @openMultiple={{true}} @defaultOpen={{array "accordion-open"}} class="w-full" as |actx|> |
There was a problem hiding this comment.
Potential mismatch in @defaultOpen value.
The @defaultOpen array contains "accordion-open", but the accordionList in the JS component only defines IDs "accordion-secondary" and "accordion-primary". This mismatch means no accordion will be open by default in the "multiple expanded" example.
If this is intentional to demonstrate the behavior when no matching ID exists, consider adding a comment. Otherwise, update to use an existing ID like "accordion-secondary".
💡 Suggested fix if a default open accordion is intended
- <AkAccordion::Group `@openMultiple`={{true}} `@defaultOpen`={{array "accordion-open"}} class="w-full" as |actx|>
+ <AkAccordion::Group `@openMultiple`={{true}} `@defaultOpen`={{array "accordion-secondary"}} class="w-full" as |actx|>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <AkAccordion::Group @openMultiple={{true}} @defaultOpen={{array "accordion-open"}} class="w-full" as |actx|> | |
| <AkAccordion::Group `@openMultiple`={{true}} `@defaultOpen`={{array "accordion-secondary"}} class="w-full" as |actx|> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-accordion-demo/groups.md` at line 9, The `@defaultOpen`
value in the AkAccordion::Group demo is using "accordion-open" which doesn't
match the IDs defined in accordionList ("accordion-secondary" and
"accordion-primary"), so replace the `@defaultOpen` entry with a valid ID (e.g.,
"accordion-secondary") or add an inline comment explaining the mismatch is
intentional; update the AkAccordion::Group line (symbol: AkAccordion::Group,
attribute: `@defaultOpen`) to reference an existing accordion ID from
accordionList (symbols: accordionList, "accordion-secondary",
"accordion-primary") or document the intended behavior.
| export default class extends Component { | ||
| selectItems = [ | ||
| { label: 'Maintainer', value: 'maintainer' }, | ||
| { label: 'Developer', value: 'developer' }, | ||
| { label: 'Reporter', value: 'reporter' }, | ||
| ]; | ||
|
|
||
| selected = this.selectItems[0]; | ||
|
|
||
| @action | ||
| handleSelectChange(selected) { | ||
| this.selected = selected; | ||
| } | ||
| } |
There was a problem hiding this comment.
Missing @tracked decorator on reactive property.
The selected property is mutated in the handleSelectChange action (line 34) but is not decorated with @tracked. In Ember Octane, properties that are mutated and should trigger UI updates must be tracked. Without this decorator, the UI will not reactively update when the selection changes.
🔧 Proposed fix
import Component from '@glimmer/component';
import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
export default class extends Component {
selectItems = [
{ label: 'Maintainer', value: 'maintainer' },
{ label: 'Developer', value: 'developer' },
{ label: 'Reporter', value: 'reporter' },
];
- selected = this.selectItems[0];
+ `@tracked` selected = this.selectItems[0];
`@action`
handleSelectChange(selected) {
this.selected = selected;
}
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-select-demo/default.md` around lines 23 - 36, The property
selected in the component is mutated by the handleSelectChange action but lacks
reactivity; import the tracked decorator from `@glimmer/tracking` and annotate the
selected field with `@tracked` (e.g., add "import { tracked } from
'@glimmer/tracking';" and change selected to `@tracked` selected =
this.selectItems[0];) so UI updates when handleSelectChange runs; keep
selectItems and handleSelectChange as-is.
| import { action } from '@ember/object'; | ||
|
|
||
| export default class extends Component { | ||
| selectItems = [ | ||
| { label: 'Maintainer', value: 'maintainer' }, | ||
| { label: 'Developer', value: 'developer' }, | ||
| { label: 'Reporter', value: 'reporter' }, | ||
| ]; | ||
|
|
||
| selected = [this.selectItems[0]]; | ||
|
|
||
| @action | ||
| handleSelectChange(selected) { | ||
| this.selected = selected; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "multiple.md" | grep -i selectRepository: appknox/irene
Length of output: 101
🏁 Script executed:
cat -n ./docs/components/ak-select-demo/multiple.mdRepository: appknox/irene
Length of output: 1094
🏁 Script executed:
find ./docs -type f -name "*.md" -path "*/ak-select-demo/*" | head -5 | xargs -I {} sh -c 'echo "=== {} ===" && grep -A 20 "export default class" {}'Repository: appknox/irene
Length of output: 819
🏁 Script executed:
find ./app -type f -name "*.js" -path "*/components/*" | head -10 | xargs -I {} sh -c 'head -30 {} | grep -B5 -A5 "@tracked\|selectItems\|selected"'Repository: appknox/irene
Length of output: 327
🏁 Script executed:
rg "@tracked" ./app --type js -A 2 -B 2 | head -50Repository: appknox/irene
Length of output: 39
🏁 Script executed:
cat ./package.json | grep -A 5 -B 5 "ember\|glimmer" | head -30Repository: appknox/irene
Length of output: 1641
🏁 Script executed:
rg '"(ember|glimmer)":\s*"' ./package.jsonRepository: appknox/irene
Length of output: 39
🏁 Script executed:
cat ./package.json | grep -E '"(ember|glimmer|@ember|@glimmer)' | head -20Repository: appknox/irene
Length of output: 900
🏁 Script executed:
rg "@tracked" . --type js -l | head -20Repository: appknox/irene
Length of output: 308
🏁 Script executed:
rg "@tracked" ./tests/integration/components/upload-app/index-test.js -B 3 -A 3Repository: appknox/irene
Length of output: 199
🏁 Script executed:
find ./app/components -type f -name "*.js" -exec grep -l "selected\|@action" {} \; | head -5Repository: appknox/irene
Length of output: 239
🏁 Script executed:
cat ./app/components/ak-select/index.stories.js | head -100Repository: appknox/irene
Length of output: 2281
🏁 Script executed:
cat ./app/components/ak-select/index.js | head -60Repository: appknox/irene
Length of output: 124
🏁 Script executed:
find ./app/components/ak-select -type f | head -10Repository: appknox/irene
Length of output: 364
🏁 Script executed:
cat ./app/components/ak-select/index.ts | head -80Repository: appknox/irene
Length of output: 2280
🏁 Script executed:
cat ./app/components/ak-select/index.ts | grep -E "@tracked|selected|@action" -A 2 -B 2Repository: appknox/irene
Length of output: 178
Track selected state to ensure reactive updates in this Glimmer component demo.
The selected property is mutated in the handleSelectChange action but is not marked @tracked, which may prevent reliable UI updates. Add the @tracked decorator to ensure Glimmer properly tracks state changes.
Suggested fix
import Component from '@glimmer/component';
import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
export default class extends Component {
selectItems = [
{ label: 'Maintainer', value: 'maintainer' },
{ label: 'Developer', value: 'developer' },
{ label: 'Reporter', value: 'reporter' },
];
- selected = [this.selectItems[0]];
+ `@tracked` selected = [this.selectItems[0]];
`@action`
handleSelectChange(selected) {
this.selected = selected;
}
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-select-demo/multiple.md` around lines 22 - 36, The
component's selected state is mutated in the handleSelectChange action but isn't
tracked, so add the `@tracked` decorator to the selected property and import
tracked from '@glimmer/tracking'; update the declaration of selected (the
selected property in the default class) to be decorated with `@tracked` so Glimmer
will reactively update the UI when handleSelectChange assigns a new value.
|
|
||
| # AkTabs | ||
|
|
||
| Tabbed navigation. Use AkTabs with Akt.tabItem for each tab. |
There was a problem hiding this comment.
Fix typo in component usage description.
"Akt.tabItem" should be "AkTabs" in the description.
📝 Proposed fix
-Tabbed navigation. Use AkTabs with Akt.tabItem for each tab.
+Tabbed navigation. Use AkTabs with AkTabs::Item (or yielded tabItem) for each tab.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Tabbed navigation. Use AkTabs with Akt.tabItem for each tab. | |
| Tabbed navigation. Use AkTabs with AkTabs::Item (or yielded tabItem) for each tab. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-tabs.md` at line 9, Update the docs/components/ak-tabs.md
description to correct the component name: replace the incorrect "Akt.tabItem"
reference with the correct "AkTabs" so the sentence reads that you should use
AkTabs with AkTabs.tabItem (or simply AkTabs for each tab) and ensure any other
mentions of "Akt" are corrected to "AkTabs".
| "ember-data-resources": "^5.3.2", | ||
| "ember-websockets": "^10.2.1", | ||
| "iconify-icon": "^2.3.0", | ||
| "path": "^0.12.7", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check where path is imported to understand the use case
rg -n "from ['\"]path['\"]" --type ts --type js
rg -n "require\(['\"]path['\"]" --type ts --type jsRepository: appknox/irene
Length of output: 159
🏁 Script executed:
# Check the context of path usage in both files
head -20 staticserver/index.js
echo "---"
head -20 .docfy-config.jsRepository: appknox/irene
Length of output: 766
🏁 Script executed:
# Check package.json to see where path is listed
rg -A 5 -B 5 '"path"' package.jsonRepository: appknox/irene
Length of output: 354
🏁 Script executed:
# Check if there's any browser-side code that might use path
rg -l "browser|webpack|bundler" --type ts --type js | head -10Repository: appknox/irene
Length of output: 660
🏁 Script executed:
# Check if path is imported anywhere else we might have missed
rg "path" package.json | grep -i importRepository: appknox/irene
Length of output: 39
🏁 Script executed:
# Check if path is explicitly imported from the npm package (not built-in)
# Look for imports that specify path as a dependency
rg "from.*path.*package|require.*path.*from" --type ts --type js
# Check build/webpack config files
fd "webpack|build|rollup|vite" -t f
# Check if path appears in any bundled or app-side code
rg "path" app --type ts --type js | head -20Repository: appknox/irene
Length of output: 1939
🏁 Script executed:
# Check the actual npm path package to understand what it provides
# Also check if it's listed as a prod or dev dependency
grep -A 2 -B 2 '"path"' package.json | head -20Repository: appknox/irene
Length of output: 198
🏁 Script executed:
# Search more broadly for any code that might be trying to use path operations in browser context
rg "path\." --type ts --type js app/ | head -30Repository: appknox/irene
Length of output: 283
🏁 Script executed:
# Check if path is dynamically required or used in any way we missed
rg "require.*path|import.*path" --type ts --type js -A 2 -B 2 | grep -v node_modules | grep -v distRepository: appknox/irene
Length of output: 746
🏁 Script executed:
# Check if path is used in package.json scripts or build config
cat package.json | grep -A 30 '"scripts"'Repository: appknox/irene
Length of output: 1676
Remove the unused path dependency from package.json.
The npm package path@^0.12.7 is listed as a dependency but is never actually imported or used. The only imports of path in the codebase (staticserver/index.js and .docfy-config.js) reference Node.js's built-in path module, not the npm package. Since this is a Node.js/Ember application with no browser-side path operations requiring a polyfill, this dependency can be safely removed.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` at line 211, Remove the unused npm package entry "path":
"^0.12.7" from package.json and update lockfiles by running the package manager
(e.g., npm uninstall path or remove the line and run npm install / npm ci) so
the dependency and its lockfile references are cleared; verify no imports
reference the npm package (code references use Node's built-in path in files
like staticserver/index.js and .docfy-config.js).
| "swagger-ui": "^5.30.3", | ||
| "swagger-ui-dist": "^5.31.0" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if swagger-ui (not swagger-ui-dist) is still imported anywhere
rg -n "from ['\"]swagger-ui['\"]" --type ts --type js
rg -n "require\(['\"]swagger-ui['\"]" --type ts --type jsRepository: appknox/irene
Length of output: 39
🏁 Script executed:
#!/bin/bash
# Check if swagger-ui-dist IS being imported
rg -n "swagger-ui-dist" --type ts --type js --type htmlRepository: appknox/irene
Length of output: 438
Remove the unused swagger-ui dependency.
The codebase only imports from swagger-ui-dist (used in 3 components: public-api-docs/api-endpoints, public-api-docs/schemas, and public-api-docs). The swagger-ui package at line 214 is not imported anywhere and can be removed to reduce bundle size.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` around lines 214 - 215, The package.json includes an unused
dependency "swagger-ui" which is not imported anywhere (only "swagger-ui-dist"
is used by the components public-api-docs/api-endpoints,
public-api-docs/schemas, and public-api-docs), so remove the "swagger-ui" entry
from package.json to reduce bundle size and update lockfile by running your
package manager (e.g., npm/yarn/pnpm install) to ensure the removal is
reflected; confirm no imports of "swagger-ui" remain before committing.
SmitGala
force-pushed
the
PD-2208-Ember-Docfy-V6
branch
from
c2936fe to
2b34d76
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
app/components/ak-clipboard/index.stories.js (1)
59-80:.bind({})is unnecessary for arrow functions.
WithTargetTemplateis an arrow function that doesn't referencethisand instead creates a freshWithTargetContext()instance. Arrow functions cannot have theirthisrebound via.bind(), making line 80's.bind({})a no-op. Consider removing it for clarity.♻️ Suggested simplification
-export const WithTarget = WithTargetTemplate.bind({}); +export const WithTarget = WithTargetTemplate;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/ak-clipboard/index.stories.js` around lines 59 - 80, The export uses .bind({}) on an arrow function which is a no-op—remove the unnecessary bind: change the export so WithTarget is assigned directly from WithTargetTemplate (leave WithTargetTemplate and WithTargetContext as-is) to avoid confusion and improve clarity.docs/components/ak-divider.md (1)
8-8: Consider completing the sentence for better clarity.The description uses a sentence fragment without an explicit subject. While acceptable in technical documentation, completing it would improve readability.
✨ Suggested improvement
-A thin line that separates content. Can be horizontal or vertical. +A thin line that separates content. It can be horizontal or vertical.As per static analysis tool hint: "To form a complete sentence, be sure to include a subject."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/ak-divider.md` at line 8, The description for the ak-divider component is a sentence fragment; update the text to a complete sentence by adding a clear subject and verb (e.g., "The ak-divider is a thin line that separates content and can be horizontal or vertical." or "A thin line that separates content and can be horizontal or vertical." → "It is a thin line that separates content and can be horizontal or vertical."). Edit the content in ak-divider.md (the ak-divider component description) to replace the fragment with one of these complete-sentence variants to improve clarity and satisfy the static analysis rule.package.json (1)
199-199: Confirm intentional exact version pinning.Changed from
^1.5.0to1.5.0(exact version). This prevents automatic patch updates. If this is to avoid a known issue with newer versions, consider adding a comment explaining why.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` at line 199, The dependency entry for "@novnc/novnc" was changed from a caret range to an exact version ("1.5.0"), which pins patches and prevents automatic updates; if this is intentional (e.g., to avoid a known regression), update the package.json dependency comment or repository docs to state the rationale and include the issue/PR reference and the author/date; otherwise revert the change back to a semver range (e.g., "^1.5.0") in the package.json. Ensure you edit the dependency key "@novnc/novnc" to reflect the chosen approach and add a short comment in package.json or the repo's CHANGELOG/DEPENDENCIES note describing why exact pinning was chosen (include link/ID for traceability).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/ak-clipboard/index.stories.js`:
- Around line 38-57: In the WithTargetContext class update the onSuccess
action's alert message to correct the typo: change "successfull" to "successful"
inside the template string in the onSuccess(event) method so the alert reads
`${event.text} is successful.`; ensure only the string spelling is changed and
behavior remains the same.
In `@docs/components/ak-accordion-demo/custom.md`:
- Line 3: The subtitle text "Customized Summary UI / Summary Icon Only / Summary
Text Only" is repetitive and should be tightened into a clearer list-style
subtitle; replace that line with a concise phrase such as "Customized Summary
UI, Summary Icon Only, and Summary Text Only" (or convert it into a short
bullet/list under the section header) to improve readability and tone.
- Line 13: The template currently uses an invalid quoted dynamic argument for
AkIcon's `@iconName`; change it to pass a dynamic value using the if helper so
`@iconName` is bound to the full icon name string based on acs.isExpanded (choose
"arrow-drop-up" when true and "arrow-drop-down" when false) and remove the outer
quotes so the argument is passed as a dynamic expression rather than a literal
string.
In `@docs/components/ak-divider.md`:
- Around line 18-19: Update the prop descriptions for `height` and `width` in
the ak-divider docs to reflect that both control divider dimensions regardless
of orientation: change the `height` description to something like "Length of the
divider (e.g., 200px)" and the `width` description to "Thickness of the divider
(e.g., 1px)"; update the text in docs/components/ak-divider.md where the props
table lists `height` and `width` so examples and text are consistent with the
vertical example that uses both `@height='200px'` and `@width='1px'`.
In `@docs/components/ak-table-demo/full-bordered.md`:
- Around line 5-7: Update the heading and description to use consistent
hyphenation: change “Full bordered” to “Full-bordered” in the document title and
descriptive sentence, and ensure the variant example uses the exact marker
`@variant`='full-bordered' to match the hyphenated label (references: the heading
text and the string `@variant`='full-bordered').
---
Nitpick comments:
In `@app/components/ak-clipboard/index.stories.js`:
- Around line 59-80: The export uses .bind({}) on an arrow function which is a
no-op—remove the unnecessary bind: change the export so WithTarget is assigned
directly from WithTargetTemplate (leave WithTargetTemplate and WithTargetContext
as-is) to avoid confusion and improve clarity.
In `@docs/components/ak-divider.md`:
- Line 8: The description for the ak-divider component is a sentence fragment;
update the text to a complete sentence by adding a clear subject and verb (e.g.,
"The ak-divider is a thin line that separates content and can be horizontal or
vertical." or "A thin line that separates content and can be horizontal or
vertical." → "It is a thin line that separates content and can be horizontal or
vertical."). Edit the content in ak-divider.md (the ak-divider component
description) to replace the fragment with one of these complete-sentence
variants to improve clarity and satisfy the static analysis rule.
In `@package.json`:
- Line 199: The dependency entry for "@novnc/novnc" was changed from a caret
range to an exact version ("1.5.0"), which pins patches and prevents automatic
updates; if this is intentional (e.g., to avoid a known regression), update the
package.json dependency comment or repository docs to state the rationale and
include the issue/PR reference and the author/date; otherwise revert the change
back to a semver range (e.g., "^1.5.0") in the package.json. Ensure you edit the
dependency key "@novnc/novnc" to reflect the chosen approach and add a short
comment in package.json or the repo's CHANGELOG/DEPENDENCIES note describing why
exact pinning was chosen (include link/ID for traceability).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 15a4d5e6-c1ec-43b5-85d4-1749084185f9
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (76)
.docfy-config.js.eslintrc.jsapp/components/ak-clipboard/index.stories.jsapp/components/docs-layout/index.hbsapp/components/docs-layout/index.scssapp/components/docs-layout/index.tsapp/router.tsapp/templates/docs.hbsdocs/components/ak-accordion-demo/accordion-presets.mddocs/components/ak-accordion-demo/custom.mddocs/components/ak-accordion-demo/default.mddocs/components/ak-accordion-demo/groups.mddocs/components/ak-accordion-demo/mount-unmount.mddocs/components/ak-accordion-demo/with-icon.mddocs/components/ak-accordion.mddocs/components/ak-appbar.mddocs/components/ak-autocomplete-demo/01-basic.mddocs/components/ak-autocomplete-demo/02-loading.mddocs/components/ak-autocomplete-demo/03-empty-state.mddocs/components/ak-autocomplete-demo/04-with-filter.mddocs/components/ak-autocomplete.mddocs/components/ak-button.mddocs/components/ak-checkbox-tree-demo/basic.mddocs/components/ak-checkbox-tree-demo/disabled.mddocs/components/ak-checkbox-tree-demo/no-cascade.mddocs/components/ak-checkbox-tree-demo/without-checkboxes.mddocs/components/ak-checkbox-tree.mddocs/components/ak-checkbox.mddocs/components/ak-chip-demo/deletable.mddocs/components/ak-chip.mddocs/components/ak-clipboard-demo/copy-me.mddocs/components/ak-clipboard-demo/copy-target.mddocs/components/ak-clipboard.mddocs/components/ak-date-picker.mddocs/components/ak-divider.mddocs/components/ak-drawer-demo/basic.mddocs/components/ak-drawer-demo/right-anchor.mddocs/components/ak-drawer.mddocs/components/ak-icon-button.mddocs/components/ak-icon.mddocs/components/ak-link.mddocs/components/ak-list.mddocs/components/ak-loader.mddocs/components/ak-menu-demo/default.mddocs/components/ak-menu-demo/disabled.mddocs/components/ak-menu-demo/with-icons.mddocs/components/ak-menu.mddocs/components/ak-modal.mddocs/components/ak-pagination-demo/basic.mddocs/components/ak-pagination-demo/compact.mddocs/components/ak-pagination-demo/custom-ui.mddocs/components/ak-pagination.mddocs/components/ak-popover-demo/default.mddocs/components/ak-popover.mddocs/components/ak-radio-demo/column.mddocs/components/ak-radio.mddocs/components/ak-select-demo/default.mddocs/components/ak-select-demo/multiple.mddocs/components/ak-select.mddocs/components/ak-skeleton.mddocs/components/ak-stack.mddocs/components/ak-table-demo/default.mddocs/components/ak-table-demo/full-bordered.mddocs/components/ak-table.mddocs/components/ak-tabs-demo/button-variant.mddocs/components/ak-tabs-demo/custom-badge-content.mddocs/components/ak-tabs-demo/link-variant.mddocs/components/ak-tabs.mddocs/components/ak-text-field-demo/with-event.mddocs/components/ak-text-field.mddocs/components/ak-toggle.mddocs/components/ak-tooltip.mddocs/components/ak-tree.mddocs/components/ak-typography.mddocs/index.mdpackage.json
✅ Files skipped from review due to trivial changes (64)
- app/templates/docs.hbs
- docs/index.md
- docs/components/ak-text-field-demo/with-event.md
- .docfy-config.js
- docs/components/ak-list.md
- docs/components/ak-typography.md
- docs/components/ak-accordion-demo/default.md
- docs/components/ak-checkbox-tree-demo/no-cascade.md
- docs/components/ak-link.md
- docs/components/ak-checkbox-tree.md
- docs/components/ak-select-demo/default.md
- docs/components/ak-chip.md
- docs/components/ak-autocomplete-demo/02-loading.md
- docs/components/ak-checkbox-tree-demo/disabled.md
- docs/components/ak-checkbox-tree-demo/basic.md
- docs/components/ak-accordion-demo/mount-unmount.md
- docs/components/ak-tooltip.md
- docs/components/ak-icon-button.md
- docs/components/ak-select.md
- docs/components/ak-chip-demo/deletable.md
- docs/components/ak-modal.md
- docs/components/ak-drawer-demo/basic.md
- docs/components/ak-checkbox.md
- docs/components/ak-checkbox-tree-demo/without-checkboxes.md
- docs/components/ak-autocomplete.md
- docs/components/ak-menu-demo/disabled.md
- docs/components/ak-clipboard-demo/copy-me.md
- docs/components/ak-icon.md
- docs/components/ak-accordion-demo/groups.md
- docs/components/ak-tree.md
- docs/components/ak-autocomplete-demo/03-empty-state.md
- docs/components/ak-button.md
- docs/components/ak-popover-demo/default.md
- docs/components/ak-radio.md
- docs/components/ak-loader.md
- docs/components/ak-popover.md
- docs/components/ak-clipboard.md
- docs/components/ak-select-demo/multiple.md
- docs/components/ak-table.md
- docs/components/ak-date-picker.md
- docs/components/ak-toggle.md
- docs/components/ak-text-field.md
- docs/components/ak-pagination.md
- docs/components/ak-drawer.md
- docs/components/ak-pagination-demo/basic.md
- docs/components/ak-tabs-demo/custom-badge-content.md
- docs/components/ak-autocomplete-demo/01-basic.md
- docs/components/ak-table-demo/default.md
- docs/components/ak-accordion-demo/accordion-presets.md
- docs/components/ak-accordion.md
- docs/components/ak-appbar.md
- docs/components/ak-radio-demo/column.md
- docs/components/ak-clipboard-demo/copy-target.md
- docs/components/ak-drawer-demo/right-anchor.md
- docs/components/ak-tabs-demo/button-variant.md
- docs/components/ak-pagination-demo/compact.md
- docs/components/ak-menu.md
- docs/components/ak-menu-demo/with-icons.md
- docs/components/ak-menu-demo/default.md
- docs/components/ak-autocomplete-demo/04-with-filter.md
- app/components/docs-layout/index.scss
- docs/components/ak-pagination-demo/custom-ui.md
- docs/components/ak-tabs-demo/link-variant.md
- docs/components/ak-stack.md
🚧 Files skipped from review as they are similar to previous changes (6)
- docs/components/ak-skeleton.md
- app/router.ts
- .eslintrc.js
- docs/components/ak-tabs.md
- app/components/docs-layout/index.hbs
- app/components/docs-layout/index.ts
| class WithTargetContext { | ||
| id = ''; | ||
|
|
||
| @tracked textToCopy = 'I will be copied!'; | ||
|
|
||
| @action | ||
| updateTextToCopy(event) { | ||
| this.textToCopy = event.target.value; | ||
| } | ||
|
|
||
| @action | ||
| onSuccess(event) { | ||
| alert(`${event.text} is successfull.`); | ||
| } | ||
|
|
||
| @action | ||
| onError(event) { | ||
| alert(`${event.action} errored.`); | ||
| } | ||
| } |
There was a problem hiding this comment.
Well-structured context class using Ember's reactivity system.
The refactoring to a class-based context with @tracked state and @action methods is a clean approach for managing story state.
Minor typo: "successfull" → "successful" on line 50.
,
🔤 Proposed typo fix
`@action`
onSuccess(event) {
- alert(`${event.text} is successfull.`);
+ alert(`${event.text} is successful.`);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class WithTargetContext { | |
| id = ''; | |
| @tracked textToCopy = 'I will be copied!'; | |
| @action | |
| updateTextToCopy(event) { | |
| this.textToCopy = event.target.value; | |
| } | |
| @action | |
| onSuccess(event) { | |
| alert(`${event.text} is successfull.`); | |
| } | |
| @action | |
| onError(event) { | |
| alert(`${event.action} errored.`); | |
| } | |
| } | |
| class WithTargetContext { | |
| id = ''; | |
| `@tracked` textToCopy = 'I will be copied!'; | |
| `@action` | |
| updateTextToCopy(event) { | |
| this.textToCopy = event.target.value; | |
| } | |
| `@action` | |
| onSuccess(event) { | |
| alert(`${event.text} is successful.`); | |
| } | |
| `@action` | |
| onError(event) { | |
| alert(`${event.action} errored.`); | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/ak-clipboard/index.stories.js` around lines 38 - 57, In the
WithTargetContext class update the onSuccess action's alert message to correct
the typo: change "successfull" to "successful" inside the template string in the
onSuccess(event) method so the alert reads `${event.text} is successful.`;
ensure only the string spelling is changed and behavior remains the same.
| @@ -0,0 +1,70 @@ | |||
| # Custom Blocks | |||
|
|
|||
| Customized Summary UI / Summary Icon Only / Summary Text Only | |||
There was a problem hiding this comment.
Tighten the section descriptor text.
This line reads repetitive and can be clearer as a list-style subtitle (for example: “Customized Summary UI, Summary Icon Only, and Summary Text Only”).
🧰 Tools
🪛 LanguageTool
[style] ~3-~3: This adverb was used twice in the sentence. Consider removing one of them or replacing them with a synonym.
Context: ...y UI / Summary Icon Only / Summary Text Only ```hbs template <AkStack @direction="c...
(ADVERB_REPETITION_PREMIUM)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-accordion-demo/custom.md` at line 3, The subtitle text
"Customized Summary UI / Summary Icon Only / Summary Text Only" is repetitive
and should be tightened into a clearer list-style subtitle; replace that line
with a concise phrase such as "Customized Summary UI, Summary Icon Only, and
Summary Text Only" (or convert it into a short bullet/list under the section
header) to improve readability and tone.
| <:summary as |acs|> | ||
| <AkStack @justifyContent="space-between" @alignItems="center" @width="full" class="p-2" style="border: 1px solid #2db421; cursor: pointer;" {{on 'click' acs.onSummaryClick}}> | ||
| <AkTypography @color="success">Custom Summary UI</AkTypography> | ||
| <AkIcon @iconName='arrow-drop-{{if acs.isExpanded "up" "down"}}' @color="success" /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the file to confirm the exact content at line 13
cat -n docs/components/ak-accordion-demo/custom.md | head -20Repository: appknox/irene
Length of output: 1418
🌐 Web query:
Ember angle-bracket component arguments dynamic values template syntax
💡 Result:
In Ember.js (Octane edition and later), angle-bracket components use named arguments prefixed with @ to pass dynamic values. The syntax distinguishes component arguments from HTML attributes. To invoke a component with dynamic values: <TodoItem @item={{this.item}} @done={{false}} @maxItems={{10}} /> - Use CapitalCase for the component name (e.g., instead of {{todo-item}}). - Prefix arguments with @ (e.g., @item). - Wrap dynamic values in {{}} (e.g., @item={{this.item}}). - Static values: @title="Hello". - Self-closing for no content: <Component @arg={{value}} />. Inside the component template, access arguments with {}:
@title="User" class="current-user" data-test="avatar" /> Use ...attributes in the component template to apply them: <aside ...attributes> #if this.model}} <LinkTo @route={} @model={{this.model}} /> {{/if}} Or computed properties in the component class. This syntax is standard since Ember 3.4, preferred in Octane (3.15+).
Citations:
- 1: https://guides.emberjs.com/release/upgrading/current-edition/templates/
- 2: https://guides.emberjs.com/release/components/component-arguments-and-html-attributes
- 3: https://guides.emberjs.com/release/upgrading/current-edition/glimmer-components/
Fix invalid dynamic @iconName template syntax.
@iconName='arrow-drop-{{...}}' violates Ember angle-bracket argument syntax. Dynamic values must use @arg={{expression}} without outer quotes. The if helper should return the full icon name string.
Proposed fix
- <AkIcon `@iconName`='arrow-drop-{{if acs.isExpanded "up" "down"}}' `@color`="success" />
+ <AkIcon `@iconName`={{if acs.isExpanded "arrow-drop-up" "arrow-drop-down"}} `@color`="success" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <AkIcon @iconName='arrow-drop-{{if acs.isExpanded "up" "down"}}' @color="success" /> | |
| <AkIcon `@iconName`={{if acs.isExpanded "arrow-drop-up" "arrow-drop-down"}} `@color`="success" /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-accordion-demo/custom.md` at line 13, The template
currently uses an invalid quoted dynamic argument for AkIcon's `@iconName`; change
it to pass a dynamic value using the if helper so `@iconName` is bound to the full
icon name string based on acs.isExpanded (choose "arrow-drop-up" when true and
"arrow-drop-down" when false) and remove the outer quotes so the argument is
passed as a dynamic expression rather than a literal string.
| | `height` | string | - | Height for vertical divider | | ||
| | `width` | string | - | Width for horizontal divider | |
There was a problem hiding this comment.
Clarify the height and width prop descriptions.
The current descriptions suggest these props are direction-specific ("Height for vertical divider" and "Width for horizontal divider"), but the vertical example (lines 66-67) uses both @height='200px' and @width='1px'. This indicates that both props can be used on any divider to control its dimensions (length and thickness), not just for specific directions.
Consider revising the descriptions to clarify their actual purpose.
📝 Suggested clarification
-| `height` | string | - | Height for vertical divider |
-| `width` | string | - | Width for horizontal divider |
+| `height` | string | - | Sets the height/length of the divider |
+| `width` | string | - | Sets the width/thickness of the divider |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | `height` | string | - | Height for vertical divider | | |
| | `width` | string | - | Width for horizontal divider | | |
| | `height` | string | - | Sets the height/length of the divider | | |
| | `width` | string | - | Sets the width/thickness of the divider | |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-divider.md` around lines 18 - 19, Update the prop
descriptions for `height` and `width` in the ak-divider docs to reflect that
both control divider dimensions regardless of orientation: change the `height`
description to something like "Length of the divider (e.g., 200px)" and the
`width` description to "Thickness of the divider (e.g., 1px)"; update the text
in docs/components/ak-divider.md where the props table lists `height` and
`width` so examples and text are consistent with the vertical example that uses
both `@height='200px'` and `@width='1px'`.
| # Full bordered | ||
|
|
||
| Set **`@variant='full-bordered'`** for a grid: borders on every cell (matches the Storybook **FullBordered** story). |
There was a problem hiding this comment.
Use consistent hyphenation for the variant label.
“Full bordered” should be hyphenated as “Full-bordered” in the heading/description for correct compound-modifier grammar and consistency with the variant naming style.
✏️ Suggested doc wording update
-# Full bordered
+# Full-bordered
-Set **`@variant='full-bordered'`** for a grid: borders on every cell (matches the Storybook **FullBordered** story).
+Set **`@variant='full-bordered'`** for a full-bordered grid: borders on every cell (matches the Storybook **FullBordered** story).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Full bordered | |
| Set **`@variant='full-bordered'`** for a grid: borders on every cell (matches the Storybook **FullBordered** story). | |
| # Full-bordered | |
| Set **`@variant='full-bordered'`** for a full-bordered grid: borders on every cell (matches the Storybook **FullBordered** story). |
🧰 Tools
🪛 LanguageTool
[grammar] ~5-~5: Use a hyphen to join words.
Context: --- order: 2 --- # Full bordered Set **`@variant='full-bordered...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/components/ak-table-demo/full-bordered.md` around lines 5 - 7, Update
the heading and description to use consistent hyphenation: change “Full
bordered” to “Full-bordered” in the document title and descriptive sentence, and
ensure the variant example uses the exact marker `@variant`='full-bordered' to
match the hyphenated label (references: the heading text and the string
`@variant`='full-bordered').
2 participants
No description provided.