Docs merge accordion and accordion item docs (#2482)

* docs: removes accordion item route from pattern hub * feat: adds merged variants to default component * docs: try to merge docs * docs: merge accordion and accordion item overview * chore: moved properties for accordion-item into accordion fix: typescript issues with react --------- Co-authored-by: brunoschadeck <[email protected]>
db-ui · Apr 10, 2024 · 0e3b18c · 0e3b18c
1 parent 99961e1
commit 0e3b18c
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 46 deletions.
diff --git a/packages/components/src/components/accordion/docs/Angular.md b/packages/components/src/components/accordion/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAccordion } from '@db-ui/ngx-components';
+import { DBAccordion, DBAccordionItem } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAccordion],
+  imports: [..., DBAccordion, DBAccordionItem],
   // ...
 })
 ```

diff --git a/packages/components/src/components/accordion/docs/React.md b/packages/components/src/components/accordion/docs/React.md
@@ -6,7 +6,7 @@ For general installation and configuration look at the [react-components](https:
 
 ```tsx App.tsx
 // App.tsx
-import { DBAccordion } from "@db-ui/react-components";
+import { DBAccordion, DBAccordionItem } from "@db-ui/react-components";
 
 const App = () => (
 	<DBAccordion>

diff --git a/packages/components/src/components/accordion/docs/Vue.md b/packages/components/src/components/accordion/docs/Vue.md
@@ -7,7 +7,7 @@ For general installation and configuration look at the [v-components](https://ww
 ```vue App.vue
 <!-- App.vue -->
 <script>
-import { DBAccordion } from "@db-ui/v-components";
+import { DBAccordion, DBAccordionItem } from "@db-ui/v-components";
 </script>
 
 <template>

diff --git a/showcases/patternhub/components/index.tsx b/showcases/patternhub/components/index.tsx
@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import type {
-	DefaultComponentProps,
-	DefaultComponentVariants
+import React, { useEffect, useState } from 'react';
+import {
+	type DefaultComponentProps,
+	type DefaultComponentVariants,
+	type PatternhubComponentProps
 } from '../../shared/default-component-data';
 import DefaultPage from './default-page';
 import { DBCard, DBDivider, DBLink } from './src';
@@ -44,7 +45,62 @@ const VariantList = ({ examples, slotCode }: DefaultComponentVariants) => {
 	);
 };
 
-const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
+const VariantsWrapper = ({
+	variants,
+	componentName
+}: {
+	variants: DefaultComponentVariants[];
+	componentName?: string;
+}) => {
+	const getHref = (
+		variant: DefaultComponentVariants,
+		componentName?: string
+	) => {
+		if (
+			typeof window === 'undefined' ||
+			!window.location.origin ||
+			!window.location.href
+		) {
+			return '';
+		}
+
+		const currentUrlWithoutQuery = window.location.href.split('?')[0];
+		const variantQuery = `?page=${variant.name.toLowerCase()}`;
+
+		if (componentName) {
+			return `${currentUrlWithoutQuery.split('components')[0]}/components/${componentName}${variantQuery}`;
+		}
+
+		return `${currentUrlWithoutQuery}${variantQuery}`;
+	};
+
+	return (
+		<>
+			{variants?.map((variant, index) => (
+				<div key={`${variant.name}-${index}`}>
+					<DBDivider></DBDivider>
+					<h2>
+						<DBLink
+							content="external"
+							target="_blank"
+							href={getHref(variant, componentName)}>
+							{variant.name}
+						</DBLink>
+					</h2>
+					<VariantList {...variant} />
+				</div>
+			))}
+		</>
+	);
+};
+
+const DefaultComponent = ({
+	title,
+	variants,
+	subComponent,
+	isSubComponent,
+	componentName
+}: DefaultComponentProps & PatternhubComponentProps) => {
 	const [foundVariant, setFoundVariant] =
 		useState<DefaultComponentVariants>();
 	const router = useRouter();
@@ -61,41 +117,34 @@ const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
 		}
 	}, [router]);
 
-	const getHref = (variant: DefaultComponentVariants) =>
-		typeof window !== 'undefined' &&
-		window.location.origin &&
-		window.location.href
-			? `${window.location.href.split('?')[0]}?page=${variant.name.toLowerCase()}`
-			: '';
-
 	return (
 		<>
 			{foundVariant && (
 				<div>
 					<VariantList {...foundVariant} />
 				</div>
 			)}
-			{!foundVariant && (
+			{!foundVariant && !isSubComponent && (
 				<DefaultPage>
 					<div className="default-container">
 						<h1>{title}</h1>
-						{variants?.map((variant, index) => (
-							<div key={`${variant.name}-${index}`}>
-								<DBDivider></DBDivider>
-								<h2>
-									<DBLink
-										content="external"
-										target="_blank"
-										href={getHref(variant)}>
-										{variant.name}
-									</DBLink>
-								</h2>
-								<VariantList {...variant} />
-							</div>
-						))}
+						<VariantsWrapper
+							variants={variants}
+							componentName={componentName}
+						/>
 					</div>
+					{subComponent}
 				</DefaultPage>
 			)}
+			{!foundVariant && isSubComponent && (
+				<div className="default-container">
+					<h2>{title}</h2>
+					<VariantsWrapper
+						variants={variants}
+						componentName={componentName}
+					/>
+				</div>
+			)}
 		</>
 	);
 };

diff --git a/showcases/patternhub/data/routes.ts b/showcases/patternhub/data/routes.ts
@@ -46,11 +46,13 @@ const componentChildren: NavigationItem[] = [
 			},
 			{
 				label: 'DBAccordion',
-				name: 'accordion'
-			},
-			{
-				label: 'DBAccordionItem',
-				name: 'accordion-item'
+				name: 'accordion',
+				subNavigation: [
+					{
+						label: 'DBAccordionItem Properties',
+						path: `/components/accordion-item/properties`
+					}
+				]
 			},
 			{
 				label: 'DBTabs',
@@ -254,7 +256,8 @@ export const ROUTES: NavigationItem[] = [
 						{
 							label: 'Migration',
 							path: `/components/${component.name}/migration`
-						}
+						},
+						...(component.subNavigation ?? [])
 					]
 				}))
 			}))

diff --git a/showcases/patternhub/scripts/get-code-files.js b/showcases/patternhub/scripts/get-code-files.js
@@ -174,7 +174,8 @@ const writeCodeFiles = async (componentPath, componentName) => {
 			.replace(
 				')}></DefaultComponent>',
 				`,[${tags}])}></DefaultComponent>`
-			);
+			)
+			.replaceAll('// Patternhub:', '');
 
 		return `${pre}\n${readFile}`;
 	}

diff --git a/showcases/react-showcase/src/components/accordion-item/index.tsx b/showcases/react-showcase/src/components/accordion-item/index.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
 import { DBAccordionItem } from '../../../../../output/react/src';
 import DefaultComponent from '../index';
 import defaultComponentVariants from '../../../../shared/accordion-item.json';
 import type { DBAccordionItemProps } from '../../../../../output/react/src/components/accordion-item/model';
 import { getVariants } from '../data';
+import { type PatternhubComponentProps } from '../../../../shared/default-component-data';
 
 const getAccordionItem = ({
 	children,
@@ -18,10 +18,12 @@ const getAccordionItem = ({
 	);
 };
 
-const AccordionItemComponent = () => {
+const AccordionItemComponent = (props: PatternhubComponentProps) => {
 	return (
 		<DefaultComponent
 			title="DBAccordionItem"
+			// Patternhub:isSubComponent={props.isSubComponent}
+			// Patternhub:componentName={props.componentName}
 			variants={getVariants(
 				defaultComponentVariants,
 				getAccordionItem

diff --git a/showcases/react-showcase/src/components/accordion/index.tsx b/showcases/react-showcase/src/components/accordion/index.tsx
@@ -7,6 +7,7 @@ import DefaultComponent from '../index';
 import defaultComponentVariants from '../../../../shared/accordion.json';
 import type { DBAccordionProps } from '../../../../../output/react/src/components/accordion/model';
 import { getVariants } from '../data';
+// Patternhub:import AccordionItemComponent from '../accordion-item';
 
 const getAccordion = ({ behaviour, children, variant }: DBAccordionProps) => (
 	<>
@@ -23,12 +24,16 @@ const getAccordion = ({ behaviour, children, variant }: DBAccordionProps) => (
 
 const AccordionComponent = () => {
 	return (
-		<DefaultComponent
-			title="DBAccordion"
-			variants={getVariants(
-				defaultComponentVariants,
-				getAccordion
-			)}></DefaultComponent>
+		<div>
+			<DefaultComponent
+				title="DBAccordion"
+				// We use this only for patternhub to include an item inside the parent
+				// Patternhub:subComponent={<AccordionItemComponent	isSubComponent componentName="accordion-item"/>}
+				variants={getVariants(
+					defaultComponentVariants,
+					getAccordion
+				)}></DefaultComponent>
+		</div>
 	);
 };
 

diff --git a/showcases/shared/default-component-data.ts b/showcases/shared/default-component-data.ts
@@ -26,3 +26,9 @@ export type DefaultComponentProps = {
 	title: string;
 	variants: DefaultComponentVariants[];
 };
+
+export type PatternhubComponentProps = {
+	subComponent?: unknown;
+	isSubComponent?: boolean;
+	componentName?: string;
+};