Skip to content

Ember v6 - Docfy #1676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SmitGala wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Ember v6 - Docfy #1676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f7c2082
remove ember deprecations at page level
avzz-19 Jan 2, 2026
5bdf2b7
ember v6 upgrade
avzz-19 Jan 2, 2026
2b34d76
Ember v6 _ Docfy
SmitGala Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .docfy-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const path = require('path');

module.exports = {
sources: [
{
root: path.join(__dirname, 'docs'),
pattern: '**/*.md',
urlPrefix: 'docs',
},
],
/**
* Must be truthy so @docfy/ember-cli does not inject `repository` from package.json
* (that enables Edit this page/demo URLs). Omit `url` so Docfy never builds edit links.
*/
repository: {},
};
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ module.exports = {
// node files
{
files: [
'./.docfy-config.js',
'./.stylelintrc.js',
'./.eslintrc.js',
'./.prettierrc.js',
Expand Down
47 changes: 34 additions & 13 deletions app/components/ak-clipboard/index.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default {
title: 'AkClipboard',
Expand Down Expand Up @@ -33,27 +35,46 @@ Default.args = {
},
};

const WithTargetTemplate = (args) => ({
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.`);
}
}
Comment on lines +38 to +57

@coderabbitai coderabbitai Bot Apr 1, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
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.


const WithTargetTemplate = () => ({
template: hbs`
<AkTextField id="copy-input" value="I will be copied!" />
<AkTypography @color="textSecondary" @gutterBottom={{true}}>
Experiment with me
</AkTypography>

<AkTextField
id="copy-input"
@value={{this.textToCopy}}
{{on 'input' this.updateTextToCopy}}
/>

<AkClipboard @id={{this.id}} @onSuccess={{this.onSuccess}} @onError={{this.onError}} as |cb|>
<AkButton class="mt-2" data-clipboard-target="#copy-input" id={{cb.triggerId}}>
Copy Input text
</AkButton>
</AkClipboard>
`,
context: args,
context: new WithTargetContext(),
});

export const WithTarget = WithTargetTemplate.bind({});

WithTarget.args = {
id: '',
onSuccess: (event) => {
alert(`${event.text} is successfull.`);
},
onError: (event) => {
alert(`${event.action} errored.`);
},
};
6 changes: 4 additions & 2 deletions app/components/ak-tree/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import {
type AkTreeProviderSignature,
} from 'irene/components/ak-tree/provider';

export interface AkTreeSignature<N extends AkTreeNodeProps>
extends Omit<AkTreeProviderSignature<N>, 'Blocks'> {
export interface AkTreeSignature<N extends AkTreeNodeProps> extends Omit<
AkTreeProviderSignature<N>,
'Blocks'
> {
Blocks: {
default: [
node: AkTreeNodeFlattenedProps | undefined,
Expand Down
11 changes: 6 additions & 5 deletions app/components/ak-tree/provider/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,12 @@ export interface AkTreeProviderSignatureArgs<N extends AkTreeNodeProps> {
onExpand: AkTreeProviderCheckExpandFuncType;
}

export interface AkTreeProviderDefaultBlockProps<N extends AkTreeNodeProps>
extends Omit<
AkTreeProviderSignatureArgs<N>,
'treeData' | 'onCheck' | 'onExpand'
> {
export interface AkTreeProviderDefaultBlockProps<
N extends AkTreeNodeProps,
> extends Omit<
AkTreeProviderSignatureArgs<N>,
'treeData' | 'onCheck' | 'onExpand'
> {
nodes: Array<N>;
flatNodes: AkTreeProviderFlatNodes;
getFlatNode(key?: string): AkTreeNodeFlattenedProps | undefined;
Expand Down
87 changes: 87 additions & 0 deletions app/components/docs-layout/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<div local-class='docs-layout'>
<aside local-class='docs-sidebar'>
<nav local-class='docs-sidebar-nav'>
<DocfyOutput @scope='docs' as |node|>
{{! Top-level pages }}
{{#each node.pages as |page|}}
<div local-class='docs-nav-item'>
<DocfyLink
@to={{page.url}}
@activeClass='active'
local-class='docs-nav-link docs-nav-link--top'
>
{{page.title}}
</DocfyLink>
</div>
{{/each}}

{{! Nested sections (e.g. Components) }}
{{#each node.children as |child|}}
<div local-class='docs-nav-section'>
<div local-class='docs-nav-section-label'>
{{child.label}}
</div>
{{#each child.pages as |page|}}
<div local-class='docs-nav-item'>
<DocfyLink
@to={{page.url}}
@activeClass='active'
local-class='docs-nav-link docs-nav-link--nested'
>
{{page.title}}
</DocfyLink>
</div>
{{/each}}

{{! Sub-sections (e.g. components/ak-button under components) }}
{{#each child.children as |subChild|}}
<div local-class='docs-nav-subsection'>
<div local-class='docs-nav-subsection-label'>
{{subChild.label}}
</div>
{{#each subChild.pages as |page|}}
<div local-class='docs-nav-item'>
<DocfyLink
@to={{page.url}}
@activeClass='active'
local-class='docs-nav-link docs-nav-link--deep'
>
{{page.title}}
</DocfyLink>
</div>
{{/each}}
</div>
{{/each}}
</div>
{{/each}}
</DocfyOutput>
</nav>
</aside>

<div local-class='docs-content' {{did-insert this.setScrollContainerRef}}>
<main local-class='docs-content-inner'>
<div local-class='docs-prose'>
{{yield}}
</div>

<DocfyPreviousAndNextPage as |previous next|>
<div local-class='docs-page-nav'>
{{#if previous}}
<DocfyLink @to={{previous.url}} local-class='docs-prev-link'>
←
{{previous.title}}
</DocfyLink>
{{else}}
<span></span>
{{/if}}
{{#if next}}
<DocfyLink @to={{next.url}} local-class='docs-next-link'>
{{next.title}}
→
</DocfyLink>
{{/if}}
</div>
</DocfyPreviousAndNextPage>
</main>
</div>
</div>
Loading
Loading