docs: add theme section (#136)

* docs: add theme section

* docs: coderabbit suggestion

Author: MGREMY

apps/docs/docs/components/accordion/index.md

@@ -61,3 +61,6 @@ keyword: AccordionPage
 ```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/accordion/ng-doc.page.ts

@@ -1,10 +1,19 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteAlwaysOpenComponent } from './_always-open.component';
 import { FlowbiteColorComponent } from './_color.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteFlushComponent } from './_flush.component';
 import { FlowbiteIconComponent } from './_icon.component';
 
+import {
+  flowbiteAccordionContentTheme,
+  flowbiteAccordionItemTheme,
+  flowbiteAccordionTheme,
+  flowbiteAccordionTitleTheme,
+} from 'flowbite-angular/accordion';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +30,14 @@ const Accordion: NgDocPage = {
     flowbiteFlushComponent: FlowbiteFlushComponent,
     flowbiteIconComponent: FlowbiteIconComponent,
   },
+  data: {
+    themes: [
+      { title: 'Accordion theme', content: toIndentedJson(flowbiteAccordionTheme) },
+      { title: 'Accordion item content', content: toIndentedJson(flowbiteAccordionItemTheme) },
+      { title: 'Accordion title theme', content: toIndentedJson(flowbiteAccordionTitleTheme) },
+      { title: 'Accordion content', content: toIndentedJson(flowbiteAccordionContentTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Accordion;

apps/docs/docs/components/alert/index.md

@@ -61,3 +61,6 @@ keyword: AlertPage
 ```angular-ts file="./_border-accent.component.ts" group="borderAccent" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/alert/ng-doc.page.ts

@@ -1,10 +1,18 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteBorderAccentComponent } from './_border-accent.component';
 import { FlowbiteBorderComponent } from './_border.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDismissableComponent } from './_dismissable.component';
 import { FlowbiteIconComponent } from './_icon.component';
 
+import {
+  flowbiteAlertButtonTheme,
+  flowbiteAlertContentTheme,
+  flowbiteAlertTheme,
+} from 'flowbite-angular/alert';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +29,13 @@ const Alert: NgDocPage = {
     flowbiteBorderAccentComponent: FlowbiteBorderAccentComponent,
     flowbiteDismissableComponent: FlowbiteDismissableComponent,
   },
+  data: {
+    themes: [
+      { title: 'Alert theme', content: toIndentedJson(flowbiteAlertTheme) },
+      { title: 'Alert content theme', content: toIndentedJson(flowbiteAlertContentTheme) },
+      { title: 'Alert button theme', content: toIndentedJson(flowbiteAlertButtonTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Alert;

apps/docs/docs/components/badge/index.md

@@ -61,3 +61,6 @@ keyword: BadgePage
 ```angular-ts file="./_dismiss.component.ts" group="dismiss" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/badge/ng-doc.page.ts

@@ -1,10 +1,18 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteBorderComponent } from './_border.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDismissComponent } from './_dismiss.component';
 import { FlowbiteIconComponent } from './_icon.component';
 import { FlowbiteLinkComponent } from './_link.component';
 
+import {
+  flowbiteBadgeButtonTheme,
+  flowbiteBadgeLinkTheme,
+  flowbiteBadgeTheme,
+} from 'flowbite-angular/badge';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +29,13 @@ const Badge: NgDocPage = {
     flowbiteIconComponent: FlowbiteIconComponent,
     flowbiteDismissComponent: FlowbiteDismissComponent,
   },
+  data: {
+    themes: [
+      { title: 'Badge', content: toIndentedJson(flowbiteBadgeTheme) },
+      { title: 'Badge link', content: toIndentedJson(flowbiteBadgeLinkTheme) },
+      { title: 'Badge button', content: toIndentedJson(flowbiteBadgeButtonTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Badge;

apps/docs/docs/components/breadcrumb/index.md

@@ -13,3 +13,6 @@ keyword: BreadcrumbPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/breadcrumb/ng-doc.page.ts

@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteBreadcrumbContentTheme,
+  flowbiteBreadcrumbItemTheme,
+  flowbiteBreadcrumbTheme,
+} from 'flowbite-angular/breadcrumb';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Breadcrumb: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Breadcrumb', content: toIndentedJson(flowbiteBreadcrumbTheme) },
+      { title: 'Breadcrumb content', content: toIndentedJson(flowbiteBreadcrumbContentTheme) },
+      { title: 'Breadcrumb item', content: toIndentedJson(flowbiteBreadcrumbItemTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Breadcrumb;

apps/docs/docs/components/button/index.md

@@ -85,3 +85,6 @@ keyword: ButtonPage
 ```angular-ts file="./_group.component.ts" group="group" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/button/ng-doc.page.ts

@@ -1,3 +1,5 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDisabledComponent } from './_disabled.component';
@@ -7,6 +9,8 @@ import { FlowbiteOutlineComponent } from './_outline.component';
 import { FlowbitePillComponent } from './_pill.component';
 import { FlowbiteSizeComponent } from './_size.component';
 
+import { flowbiteButtonTheme } from 'flowbite-angular/button';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -25,6 +29,9 @@ const Button: NgDocPage = {
     flowbiteDisabledComponent: FlowbiteDisabledComponent,
     flowbiteGroupComponent: FlowbiteGroupComponent,
   },
+  data: {
+    themes: [{ title: 'Button', content: toIndentedJson(flowbiteButtonTheme) }] satisfies DocThemes,
+  },
 };
 
 export default Button;