Skip to content

Commit a3bf15a

Browse files
griest024xelaint
griest024
and
xelaint
authored
feat(daffio): add design docs route (#3113)
* feat(docs-utils): add component doc kind * feat(dgeni): gen design packages and guides together * feat(daffio): generalize docs routing * feat(daffio): add design docs route * move guides into foundations folder --------- Co-authored-by: xelaint <[email protected]>
1 parent d33ae96 commit a3bf15a

32 files changed

+498
-85
lines changed

‎apps/daffio/src/app/core/router/route.type.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ export interface DaffioRoute extends Route {
1616
& DaffioRouteWithSidebars['data']
1717
& {
1818
docKind?: DaffDocKind;
19+
docPrefix?: string;
1920
};
2021
}

‎apps/daffio/src/app/docs/api/api-routing.module.ts

-3
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@ export const apiRoutes: Routes = [
2626
{
2727
path: '',
2828
component: DaffioApiListPageComponent,
29-
resolve: {
30-
reference: () => inject(DaffioDocsIndexService).getList(DaffDocKind.API),
31-
},
3229
},
3330
{
3431
path: '**',

‎apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts

+10-21
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
11
import {
22
Component,
33
Input,
4-
Injectable,
54
} from '@angular/core';
65
import {
76
ComponentFixture,
87
TestBed,
98
waitForAsync,
109
} from '@angular/core/testing';
1110
import { By } from '@angular/platform-browser';
12-
import { ActivatedRoute } from '@angular/router';
1311
import { RouterTestingModule } from '@angular/router/testing';
14-
import { cold } from 'jasmine-marbles';
15-
import { BehaviorSubject } from 'rxjs';
12+
import { of } from 'rxjs';
1613

1714
import { DaffioApiListPageComponent } from './api-list-page.component';
15+
import { DaffioDocsIndexService } from '../../../services/index.service';
1816
import { DaffioApiListComponent } from '../../components/api-list/api-list.component';
1917
import { DaffioApiReference } from '../../models/api-reference';
2018

21-
@Injectable({ providedIn: 'root' })
22-
class ActivatedRouteStub {
23-
data = new BehaviorSubject({});
24-
};
25-
2619
@Component({
2720
template: '',
2821
selector: 'daffio-api-list',
@@ -34,7 +27,7 @@ class MockDaffioApiListComponent {
3427
describe('DaffioApiListPageComponent', () => {
3528
let component: DaffioApiListPageComponent;
3629
let fixture: ComponentFixture<DaffioApiListPageComponent>;
37-
let activatedRoute: ActivatedRouteStub;
30+
let indexServiceSpy: jasmine.SpyObj<DaffioDocsIndexService>;
3831

3932
const stubDocsList: DaffioApiReference = {
4033
id: 'id',
@@ -62,6 +55,8 @@ describe('DaffioApiListPageComponent', () => {
6255
};
6356

6457
beforeEach(waitForAsync(() => {
58+
indexServiceSpy = jasmine.createSpyObj('DaffioDocsIndexService', ['getList']);
59+
6560
TestBed.configureTestingModule({
6661
imports: [
6762
RouterTestingModule,
@@ -71,16 +66,17 @@ describe('DaffioApiListPageComponent', () => {
7166
DaffioApiListPageComponent,
7267
],
7368
providers: [
74-
{ provide: ActivatedRoute, useExisting: ActivatedRouteStub },
69+
{
70+
provide: DaffioDocsIndexService,
71+
useValue: indexServiceSpy,
72+
},
7573
],
7674
})
7775
.compileComponents();
7876
}));
7977

8078
beforeEach(() => {
81-
activatedRoute = TestBed.inject(ActivatedRouteStub);
82-
activatedRoute.data.next({ reference: stubDocsList });
83-
79+
indexServiceSpy.getList.and.returnValue(of(stubDocsList));
8480
fixture = TestBed.createComponent(DaffioApiListPageComponent);
8581
component = fixture.componentInstance;
8682
fixture.detectChanges();
@@ -90,17 +86,10 @@ describe('DaffioApiListPageComponent', () => {
9086
expect(component).toBeTruthy();
9187
});
9288

93-
it('should initialize apiList$ from a route resolver', () => {
94-
const expected = cold('b', { b: stubDocsList });
95-
expect(component.apiList$).toBeObservable(expected);
96-
});
97-
9889
describe('on <daffio-api-list>', () => {
9990
let apiListComponent: DaffioApiListComponent;
10091

10192
beforeEach(() => {
102-
activatedRoute.data.next({ reference: stubDocsList });
103-
fixture.detectChanges();
10493
apiListComponent = fixture.debugElement.query(By.css('daffio-api-list')).componentInstance;
10594
});
10695

‎apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import {
33
Component,
44
OnInit,
55
} from '@angular/core';
6-
import { ActivatedRoute } from '@angular/router';
76
import { Observable } from 'rxjs';
8-
import { map } from 'rxjs/operators';
97

8+
import { DaffioDocsIndexService } from '../../../services/index.service';
109
import { DaffioApiReference } from '../../models/api-reference';
1110

1211
@Component({
@@ -21,11 +20,11 @@ export class DaffioApiListPageComponent implements OnInit {
2120
*/
2221
apiList$: Observable<DaffioApiReference>;
2322

24-
constructor(private route: ActivatedRoute) { }
23+
constructor(
24+
private index: DaffioDocsIndexService<DaffioApiReference>,
25+
) { }
2526

2627
ngOnInit() {
27-
this.apiList$ = this.route.data.pipe(
28-
map((data: { reference: DaffioApiReference }) => data.reference),
29-
);
28+
this.apiList$ = this.index.getList();
3029
}
3130
}

‎apps/daffio/src/app/docs/containers/docs-list/docs-list.component.ts

+2-17
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,8 @@ import {
44
Component,
55
OnInit,
66
} from '@angular/core';
7-
import {
8-
distinctUntilChanged,
9-
map,
10-
Observable,
11-
switchMap,
12-
tap,
13-
} from 'rxjs';
14-
15-
import { DaffRouterActivatedRoute } from '@daffodil/router';
7+
import { Observable } from 'rxjs';
168

17-
import { DaffioRoute } from '../../../core/router/route.type';
189
import { DaffioDocsListComponent } from '../../components/docs-list/docs-list.component';
1910
import { DaffioDocList } from '../../models/doc-list';
2011
import { DaffioDocsIndexService } from '../../services/index.service';
@@ -36,16 +27,10 @@ export class DaffioDocsListContainer implements OnInit {
3627
docsList$: Observable<DaffioDocList>;
3728

3829
constructor(
39-
private route: DaffRouterActivatedRoute,
4030
private index: DaffioDocsIndexService,
4131
) {}
4232

4333
ngOnInit() {
44-
this.docsList$ = this.route.route$.pipe(
45-
switchMap((route) => route.data),
46-
map((data: DaffioRoute['data']) => data.docKind),
47-
distinctUntilChanged(),
48-
switchMap((kind) => this.index.getList(kind)),
49-
);
34+
this.docsList$ = this.index.getList();
5035
}
5136
}

‎apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<daffio-docs-list [list]="docsList$ | async"></daffio-docs-list>

‎apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.spec.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
provideHttpClient,
3+
withInterceptorsFromDi,
4+
} from '@angular/common/http';
5+
import { provideHttpClientTesting } from '@angular/common/http/testing';
6+
import {
7+
waitForAsync,
8+
ComponentFixture,
9+
TestBed,
10+
} from '@angular/core/testing';
11+
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
12+
import { RouterTestingModule } from '@angular/router/testing';
13+
14+
import { DaffioDocsDesignListContainer } from './docs-list.component';
15+
16+
describe('DaffioDocsDesignListContainer', () => {
17+
let component: DaffioDocsDesignListContainer;
18+
let fixture: ComponentFixture<DaffioDocsDesignListContainer>;
19+
20+
beforeEach(waitForAsync(() => {
21+
TestBed.configureTestingModule({
22+
imports: [DaffioDocsDesignListContainer,
23+
RouterTestingModule,
24+
NoopAnimationsModule],
25+
providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
26+
})
27+
.compileComponents();
28+
}));
29+
30+
beforeEach(() => {
31+
fixture = TestBed.createComponent(DaffioDocsDesignListContainer);
32+
component = fixture.componentInstance;
33+
fixture.detectChanges();
34+
});
35+
36+
it('should create', () => {
37+
expect(component).toBeTruthy();
38+
});
39+
});

‎apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { AsyncPipe } from '@angular/common';
2+
import {
3+
ChangeDetectionStrategy,
4+
Component,
5+
OnInit,
6+
} from '@angular/core';
7+
import { Observable } from 'rxjs';
8+
9+
import { DaffioDocsListComponent } from '../../../components/docs-list/docs-list.component';
10+
import { DaffioDocList } from '../../../models/doc-list';
11+
import { DaffioDocsDesignIndexService } from '../../services/index.service';
12+
13+
@Component({
14+
selector: 'daffio-docs-design-list-container',
15+
templateUrl: './docs-list.component.html',
16+
changeDetection: ChangeDetectionStrategy.OnPush,
17+
standalone: true,
18+
imports: [
19+
AsyncPipe,
20+
DaffioDocsListComponent,
21+
],
22+
providers: [
23+
DaffioDocsDesignIndexService,
24+
],
25+
})
26+
export class DaffioDocsDesignListContainer implements OnInit {
27+
docsList$: Observable<DaffioDocList>;
28+
29+
constructor(
30+
private index: DaffioDocsDesignIndexService,
31+
) {}
32+
33+
ngOnInit() {
34+
this.docsList$ = this.index.getList();
35+
}
36+
}

‎apps/daffio/src/app/docs/design/containers/docs-list/sidebar.provider.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { DaffioDocsDesignListContainer } from './docs-list.component';
2+
import { DaffioSidebarFooterComponent } from '../../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
3+
import { DaffioSidebarHeaderComponent } from '../../../../core/sidebar/components/sidebar-header/sidebar-header.component';
4+
5+
export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID = 'daffioDocsList';
6+
7+
export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION = {
8+
id: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID,
9+
header: DaffioSidebarHeaderComponent,
10+
body: DaffioDocsDesignListContainer,
11+
footer: DaffioSidebarFooterComponent,
12+
};

‎apps/daffio/src/app/docs/design/design-routing.module.ts

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { NgModule } from '@angular/core';
2+
import {
3+
Routes,
4+
RouterModule,
5+
} from '@angular/router';
6+
7+
import { DaffSidebarModeEnum } from '@daffodil/design/sidebar';
8+
import {
9+
DAFF_DOC_KIND_PATH_SEGMENT_MAP,
10+
DAFF_DOCS_DESIGN_PATH,
11+
DAFF_DOCS_PATH,
12+
DaffDocKind,
13+
} from '@daffodil/docs-utils';
14+
15+
import { DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
16+
import { DaffioDocsDesignOverviewPageComponent } from './pages/overview/overview.component';
17+
import { DAFF_NAV_SIDEBAR_REGISTRATION } from '../../core/nav/sidebar.provider';
18+
import { DaffioRoute } from '../../core/router/route.type';
19+
import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
20+
import { DocsResolver } from '../resolvers/docs-resolver.service';
21+
22+
export const docsDesignRoutes: Routes = [
23+
<DaffioRoute>{
24+
path: '',
25+
data: {
26+
docPrefix: `${DAFF_DOCS_PATH}/${DAFF_DOCS_DESIGN_PATH}`,
27+
daffioSidebars: {
28+
[DAFF_NAV_SIDEBAR_REGISTRATION.id]: DAFF_NAV_SIDEBAR_REGISTRATION,
29+
[DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION.id]: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION,
30+
},
31+
daffioDockedSidebar: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION.id,
32+
// daffNamedViews: {
33+
// [DaffioRouterNamedViewsEnum.FOOTER]: DaffioSimpleFooterComponent,
34+
// },
35+
},
36+
children: [
37+
{
38+
path: DAFF_DOC_KIND_PATH_SEGMENT_MAP[DaffDocKind.API],
39+
loadChildren: () => import('../api/api.module').then(m => m.DaffioApiModule),
40+
},
41+
{
42+
path: '',
43+
pathMatch: 'full',
44+
component: DaffioDocsDesignOverviewPageComponent,
45+
},
46+
<DaffioRoute>{
47+
path: '**',
48+
component: DaffioDocsPageComponent,
49+
resolve: {
50+
doc: DocsResolver,
51+
},
52+
data: {
53+
sidebarMode: DaffSidebarModeEnum.SideFixed,
54+
},
55+
},
56+
],
57+
},
58+
];
59+
60+
@NgModule({
61+
imports: [
62+
RouterModule.forChild(docsDesignRoutes),
63+
],
64+
exports: [
65+
RouterModule,
66+
],
67+
})
68+
export class DaffioDocsDesignRoutingModule { }

‎apps/daffio/src/app/docs/design/design.module.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
3+
import { DaffioDocsDesignRoutingModule } from './design-routing.module';
4+
5+
@NgModule({
6+
imports: [
7+
DaffioDocsDesignRoutingModule,
8+
],
9+
})
10+
export class DaffioDocsDesignModule {}

‎apps/daffio/src/app/docs/design/pages/overview/overview.component.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<daff-container size="md">
2+
<h1 class="daffio-docs-design-overview__title">Daffodil Design</h1>
3+
<p class="daffio-docs-design-overview__subtitle">Design and build seamless, intuitive, and accessible experiences with Daffodil Design System — an open-source library built with Angular.</p>
4+
<a daff-button color="primary" routerLink="./getting-started">Get started</a>
5+
</daff-container>

‎apps/daffio/src/app/docs/design/pages/overview/overview.component.scss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@use 'utilities' as daff;
2+
3+
:host {
4+
display: block;
5+
padding: 48px 24px;
6+
7+
@include daff.breakpoint(tablet) {
8+
padding: 48px 96px;
9+
}
10+
}
11+
12+
.daffio-docs-design-overview {
13+
&__title {
14+
@include daff.headline-xl();
15+
margin: 0 0 16px;
16+
padding: 0;
17+
}
18+
19+
&__subtitle {
20+
@include daff.body-lg;
21+
font-weight: 400;
22+
margin: 0 0 32px;
23+
padding: 0;
24+
}
25+
}

0 commit comments

Comments
 (0)