Skip to content

Commit 6b6faa3

Browse files
artembelikartembelik
committed
chore(docs): added sidebar page (#DS-3649)
1 parent cfc7bb0 commit 6b6faa3

File tree

18 files changed

+303
-163
lines changed

18 files changed

+303
-163
lines changed

‎apps/docs/src/app/services/documentation-items.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -549,6 +549,18 @@ const DOCS: { [key: string]: DocCategory[] } = {
549549
apiId: 'select',
550550
hasExamples: true
551551
},
552+
{
553+
id: 'sidebar',
554+
name: {
555+
ru: 'Sidebar',
556+
en: 'Sidebar'
557+
},
558+
svgPreview: 'sidebar',
559+
hasApi: true,
560+
apiId: 'sidebar',
561+
hasExamples: true,
562+
isNew: expiresAt('2025-06-16')
563+
},
552564
{
553565
id: 'sidepanel',
554566
name: {

‎apps/docs/src/sitemap.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -480,6 +480,18 @@
480480
<url>
481481
<loc>https://koobiq.io/ru/components/select/api</loc>
482482
</url>
483+
<url>
484+
<loc>https://koobiq.io/en/components/sidebar/overview</loc>
485+
</url>
486+
<url>
487+
<loc>https://koobiq.io/ru/components/sidebar/overview</loc>
488+
</url>
489+
<url>
490+
<loc>https://koobiq.io/en/components/sidebar/api</loc>
491+
</url>
492+
<url>
493+
<loc>https://koobiq.io/ru/components/sidebar/api</loc>
494+
</url>
483495
<url>
484496
<loc>https://koobiq.io/en/components/sidepanel/overview</loc>
485497
</url>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@
177177
"build:package-docs-content": "ts-node --project ./tools/package-docs-content/tsconfig.json ./tools/package-docs-content/package-docs-content.ts",
178178
"styles:build-all": "ts-node --project tools/scss-compiler/tsconfig.json tools/scss-compiler/scss-bundle.ts",
179179
"build:schematics": "rimraf packages/schematics/dist && rollup --failAfterWarnings -c packages/schematics/rollup.config.js && node ./packages/schematics/scripts/copy-meta-to-dist.js",
180-
"docs": "yarn run build:cdk && yarn run build:components && yarn run build:components-experimental && yarn run styles:build-all && yarn run build:angular-luxon-adapter && yarn run build:angular-moment-adapter && yarn run build:docs-content && yarn run build:package-docs-content && yarn run build:docs-examples-module && yarn run build:docs-examples && yarn run docs:start:dev",
180+
"docs": "yarn run build:cdk && yarn run build:components && yarn run build:components-experimental && yarn run styles:build-all && yarn run build:angular-luxon-adapter && yarn run build:angular-moment-adapter && yarn run build:docs-content && yarn run build:package-docs-content && yarn run build:docs-examples-module && yarn run build:docs-examples && yarn run docs:generate-sitemap && yarn run docs:start:dev",
181181
"docs:start:dev": "ng serve --configuration=development koobiq-docs",
182182
"docs:start:prod": "ng serve --configuration=production koobiq-docs",
183183
"docs:generate-sitemap": "ts-node tools/generate-sitemap.ts",

‎packages/components-dev/sidebar/module.ts

Lines changed: 18 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,29 @@
1-
import { JsonPipe } from '@angular/common';
21
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
3-
import { KbqButtonModule } from '@koobiq/components/button';
4-
import { KbqSidebarModule, SidebarPositions } from '@koobiq/components/sidebar';
5-
import { Direction, KbqSplitterModule } from '@koobiq/components/splitter';
2+
import { SidebarExamplesModule } from 'packages/docs-examples/components/sidebar';
3+
4+
@Component({
5+
standalone: true,
6+
imports: [SidebarExamplesModule],
7+
selector: 'dev-examples',
8+
template: `
9+
<sidebar-overview-example />
10+
<hr />
11+
<sidebar-with-splitter-example />
12+
<hr />
13+
`,
14+
changeDetection: ChangeDetectionStrategy.OnPush
15+
})
16+
export class DevExamples {}
617

718
@Component({
819
standalone: true,
920
imports: [
10-
KbqSplitterModule,
11-
KbqButtonModule,
12-
KbqSidebarModule,
13-
JsonPipe
21+
DevExamples
1422
],
1523
selector: 'dev-app',
1624
templateUrl: './template.html',
17-
styleUrls: ['./styles.scss'],
25+
styleUrl: './styles.scss',
1826
encapsulation: ViewEncapsulation.None,
1927
changeDetection: ChangeDetectionStrategy.OnPush
2028
})
21-
export class DevApp {
22-
direction = Direction;
23-
sidebarPositions = SidebarPositions;
24-
25-
leftSidebarSidebarState: boolean = false;
26-
leftSplitterState: boolean = false;
27-
28-
rightSidebarSidebarState: boolean = false;
29-
30-
onStateChanged($event): void {
31-
console.log('onStateChanged: ', $event);
32-
}
33-
34-
toggleLeftSidebar() {
35-
this.leftSidebarSidebarState = !this.leftSidebarSidebarState;
36-
}
37-
38-
toggleRightSidebar() {
39-
this.rightSidebarSidebarState = !this.rightSidebarSidebarState;
40-
}
41-
42-
toggleLeftSplitterState() {
43-
this.leftSplitterState = !this.leftSplitterState;
44-
}
45-
}
29+
export class DevApp {}

‎packages/components-dev/sidebar/styles.scss

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,4 @@
11
dev-app {
22
display: block;
3-
}
4-
5-
.dev-container {
6-
display: flex;
7-
flex-direction: row;
8-
justify-content: flex-start;
9-
10-
height: 200px;
11-
}
12-
13-
.dev-container__body {
14-
flex: 1 1 30%;
15-
16-
background-color: antiquewhite;
17-
}
18-
19-
.kbq-sidebar-opened {
20-
background-color: #6fba53;
21-
}
22-
23-
.kbq-sidebar-closed {
24-
background-color: darkgray;
3+
width: 700px;
254
}

‎packages/components-dev/sidebar/template.html

Lines changed: 1 addition & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1 @@
1-
<br />
2-
3-
<div class="layout-row layout-align-space-between">
4-
<div>
5-
<button kbq-button (click)="leftSidebar.toggle()">toggle by method</button>
6-
&nbsp;
7-
</div>
8-
9-
<div>
10-
<button kbq-button (click)="rightSidebar.toggle()">toggle by method</button>
11-
&nbsp;
12-
</div>
13-
</div>
14-
15-
<br />
16-
<br />
17-
18-
<div class="dev-container layout-row layout-align-space-between">
19-
<kbq-sidebar #leftSidebar="kbqSidebar" [position]="sidebarPositions.Left" (stateChanged)="onStateChanged($event)">
20-
<div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
21-
<div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
22-
</kbq-sidebar>
23-
24-
<div class="dev-container__body">main area</div>
25-
26-
<kbq-sidebar #rightSidebar="kbqSidebar" [position]="sidebarPositions.Right" (stateChanged)="onStateChanged($event)">
27-
<div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
28-
<div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
29-
</kbq-sidebar>
30-
</div>
31-
32-
<br />
33-
<br />
34-
<br />
35-
36-
<div class="layout-row layout-align-space-between">
37-
<div>
38-
<button kbq-button (click)="toggleLeftSidebar()">toggle by state</button>
39-
&nbsp;
40-
<button kbq-button (click)="toggleLeftSplitterState()">toggle splitter state</button>
41-
&nbsp;
42-
</div>
43-
44-
<div>
45-
<button kbq-button (click)="toggleRightSidebar()">toggle by state</button>
46-
&nbsp;
47-
</div>
48-
</div>
49-
50-
<br />
51-
<br />
52-
53-
<kbq-splitter
54-
class="dev-container layout-row layout-align-space-between"
55-
[direction]="direction.Horizontal"
56-
[disabled]="leftSplitterState"
57-
>
58-
<kbq-sidebar
59-
kbq-splitter-area
60-
[opened]="leftSidebarSidebarState"
61-
[position]="sidebarPositions.Left"
62-
(stateChanged)="onStateChanged($event)"
63-
>
64-
<div kbq-sidebar-opened class="kbq-sidebar-opened" [maxWidth]="'600px'" [minWidth]="'320px'">
65-
kbq-sidebar-opened
66-
</div>
67-
68-
<div kbq-sidebar-closed class="kbq-sidebar-closed" [width]="'32px'">kbq-sidebar-closed</div>
69-
</kbq-sidebar>
70-
71-
<div kbq-splitter-area class="flex dev-container__body">main body</div>
72-
73-
<kbq-sidebar
74-
kbq-splitter-area
75-
[opened]="rightSidebarSidebarState"
76-
[position]="sidebarPositions.Right"
77-
(stateChanged)="onStateChanged($event)"
78-
>
79-
<div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
80-
<div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
81-
</kbq-sidebar>
82-
</kbq-splitter>
83-
84-
<br />
85-
<br />
86-
<br />
87-
88-
<div>{{ leftSidebar.params | json }}</div>
1+
<dev-examples />

‎packages/components/sidebar/examples.sidebar.en.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
🚧 **Documentation in progress** 🚧
1+
### With splitter
22

3-
Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
4-
5-
If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.
3+
<!-- example(sidebar-with-splitter) -->

‎packages/components/sidebar/examples.sidebar.ru.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
🚧 **Документация в процессе написания** 🚧
1+
### Со сплиттером
22

3-
К сожалению, документация для этого раздела еще не готова. Мы активно работаем над ее созданием и планируем добавить в ближайшее время.
4-
5-
Если вы хотите помочь в написании документации или у вас есть вопросы, пожалуйста, [создайте issue](https://github.com/koobiq/angular-components/issues) в нашем репозитории на GitHub.
3+
<!-- example(sidebar-with-splitter) -->

‎packages/components/sidebar/sidebar.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ interface KbqSidebarParams {
3333

3434
@Directive({
3535
selector: '[kbq-sidebar-opened]',
36-
exportAs: 'kbqSidebarOpened'
36+
exportAs: 'kbqSidebarOpened',
37+
host: {
38+
class: 'kbq-sidebar-opened'
39+
}
3740
})
3841
export class KbqSidebarOpened {
3942
@Input() minWidth: string;
@@ -43,7 +46,10 @@ export class KbqSidebarOpened {
4346

4447
@Directive({
4548
selector: '[kbq-sidebar-closed]',
46-
exportAs: 'kbqSidebarClosed'
49+
exportAs: 'kbqSidebarClosed',
50+
host: {
51+
class: 'kbq-sidebar-closed'
52+
}
4753
})
4854
export class KbqSidebarClosed {
4955
@Input() width: string;

‎packages/components/sidebar/sidebar.en.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
🚧 **Documentation in progress** 🚧
1+
Component designed to add collapsible side content.
22

3-
Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
3+
<!-- example(sidebar-overview) -->
44

5-
If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.
5+
### Keyboard interaction
6+
7+
| <div style="min-width: 110px;">Key</div> | Action |
8+
| ---------------------------------------------- | ------------------------ |
9+
| <span class="docs-hot-key-button">&#91;</span> | Open/close left Sidebar |
10+
| <span class="docs-hot-key-button">&#93;</span> | Open/close right Sidebar |

‎packages/components/sidebar/sidebar.ru.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Компонент, предназначенный для добавления сворачиваемого бокового контента.
2+
3+
<!-- example(sidebar-overview) -->
4+
5+
### Работа с клавиатурой
6+
7+
| <div style="min-width: 110px;">Клавиша</div> | Действие |
8+
| ---------------------------------------------- | ------------------------------ |
9+
| <span class="docs-hot-key-button">&#91;</span> | Открыть/закрыть левый Sidebar |
10+
| <span class="docs-hot-key-button">&#93;</span> | Открыть/закрыть правый Sidebar |

‎packages/docs-examples/components/sidebar/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { SidebarOverviewExample } from './sidebar-overview/sidebar-overview-example';
3+
import { SidebarWithSplitterExample } from './sidebar-with-splitter/sidebar-with-splitter-example';
4+
5+
export { SidebarOverviewExample, SidebarWithSplitterExample };
6+
7+
const EXAMPLES = [
8+
SidebarOverviewExample,
9+
SidebarWithSplitterExample
10+
];
11+
12+
@NgModule({
13+
imports: EXAMPLES,
14+
exports: EXAMPLES
15+
})
16+
export class SidebarExamplesModule {}

‎packages/docs-examples/components/sidebar/ng-package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"lib": {
3+
"entryFile": "index.ts"
4+
}
5+
}

0 commit comments

Comments
 (0)