docs: adjust no props/appearances (#4074)

* docs: adjust no props/appearances * Update AppearanceDemo.tsx * fix * add component prop to props table * fix grid * remove log * fix list and section message * fix split * adjust message, center
marigold-ui · Aug 6, 2024 · 3ea6f99 · 3ea6f99
1 parent f3d3974
commit 3ea6f99
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 80 deletions.
diff --git a/docs/content/components/content/body/body.mdx b/docs/content/components/content/body/body.mdx
@@ -21,7 +21,7 @@ import { Body } from '@marigold/components';
 
 ## Props
 
-<PropsTable />
+<PropsTable component={title} />
 
 ## Examples
 

diff --git a/docs/content/components/content/divider/divider.mdx b/docs/content/components/content/divider/divider.mdx
@@ -20,7 +20,7 @@ import { Divider } from '@marigold/components';
 
 ## Props
 
-<PropsTable />
+<PropsTable component={title} />
 
 ## Examples
 

diff --git a/docs/content/components/content/footer/footer.mdx b/docs/content/components/content/footer/footer.mdx
@@ -23,7 +23,7 @@ import { Footer } from '@marigold/components';
 
 ## Props
 
-<PropsTable />
+<PropsTable component={title} />
 
 ## Examples
 

diff --git a/docs/content/components/content/header/header.mdx b/docs/content/components/content/header/header.mdx
@@ -23,7 +23,7 @@ import { Header } from '@marigold/components';
 
 ## Props
 
-<PropsTable />
+<PropsTable component={title} />
 
 ## Examples
 

diff --git a/docs/content/components/content/list/list.mdx b/docs/content/components/content/list/list.mdx
@@ -28,7 +28,7 @@ import { List } from '@marigold/components';
 
 ### List.Item
 
-<PropsTable componentFile="ListItem.tsx" />
+<PropsTable component="ListItem" />
 
 ## Usage
 

diff --git a/docs/content/components/content/section-message/section-message.mdx b/docs/content/components/content/section-message/section-message.mdx
@@ -23,8 +23,18 @@ import { SectionMessage } from '@marigold/components';
 
 ## Props
 
+### SectionMessage
+
 <PropsTable component={title} />
 
+#### SectionMessage.Title
+
+<PropsTable component="SectionMessageTitle" />
+
+#### SectionMessage.Content
+
+<PropsTable component="SectionMessageContent" />
+
 ## Examples
 
 ### Info Section Message

diff --git a/docs/content/components/layout/grid/grid.mdx b/docs/content/components/layout/grid/grid.mdx
@@ -21,15 +21,7 @@ import { Grid } from '@marigold/components';
 
 ### Grid.Area
 
-<PropsTable
-  props={[
-    {
-      property: 'name',
-      type: 'string',
-      description: 'Area name where the element should be placed.',
-    },
-  ]}
-/>
+<PropsTable component="GridArea" />
 
 ## Examples
 

diff --git a/docs/content/components/layout/split/split.mdx b/docs/content/components/layout/split/split.mdx
@@ -16,7 +16,7 @@ import { Split } from '@marigold/components';
 
 ## Props
 
-<PropsTable />
+<PropsTable component={title} />
 
 ## Examples
 

diff --git a/docs/ui/AppearanceDemo.tsx b/docs/ui/AppearanceDemo.tsx
@@ -4,7 +4,6 @@ import type { Theme } from '@/ui';
 import {
   Card,
   FieldGroup,
-  Inline,
   MarigoldProvider,
   OverlayContainerProvider,
   Select,

diff --git a/docs/ui/AppearanceTable.tsx b/docs/ui/AppearanceTable.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import { getAppearance } from '@/lib/utils';
-import { Inline, Table, Text, Theme } from '@/ui';
+import { Table, Theme } from '@/ui';
 import { useThemeSwitch } from './ThemeSwitch';
-import { BlankCanvas } from './icons';
 
 export interface AppearanceTableProps {
   component: keyof Theme['components'];
@@ -18,15 +17,6 @@ export const AppearanceTable = ({ component }: AppearanceTableProps) => {
 
   const appearances = getAppearance(component, themes[current]);
 
-  if (appearances?.variant?.length === 0 && appearances?.size?.length === 0) {
-    return (
-      <Inline space={2}>
-        <BlankCanvas />
-        <Text>Sorry! There are currently no variants and sizes available.</Text>
-      </Inline>
-    );
-  }
-
   return (
     <Table aria-labelledby="appearance table" variant="hover" stretch>
       <Table.Header>
@@ -43,7 +33,9 @@ export const AppearanceTable = ({ component }: AppearanceTableProps) => {
           </Table.Cell>
           <Table.Cell>
             <code className="before:content-none after:content-none">
-              {appearances.variant ? appearances.variant.join(' | ') : '-'}
+              {appearances.variant.length
+                ? appearances.variant.join(' | ')
+                : '-'}
             </code>
           </Table.Cell>
           <Table.Cell>The available variants of this component.</Table.Cell>
@@ -54,7 +46,7 @@ export const AppearanceTable = ({ component }: AppearanceTableProps) => {
           </Table.Cell>
           <Table.Cell>
             <code className="before:content-none after:content-none">
-              {appearances.size ? appearances.size.join(' | ') : '-'}
+              {appearances.size.length ? appearances.size.join(' | ') : '-'}
             </code>
           </Table.Cell>
           <Table.Cell>The available sizes of this component.</Table.Cell>

diff --git a/docs/ui/PropsTable.tsx b/docs/ui/PropsTable.tsx
@@ -1,12 +1,21 @@
 import componentProps from '@/registry/props.json';
-import { Inline, Stack, Text } from '@/ui';
+import { Inline, Inset, Stack, Text } from '@/ui';
 import { BlankCanvas } from './icons';
 import { Markdown } from './mdx';
 
+// Helper
+// ---------------
+const EmptyState = () => (
+  <Inline space={2} alignX="center" alignY="center">
+    <BlankCanvas />
+    <Text>Component does not have any props.</Text>
+  </Inline>
+);
+
 // Types
 // ---------------
 export interface PropsTableProps {
-  component?: string;
+  component: string;
 }
 
 interface Prop {
@@ -25,60 +34,57 @@ interface Prop {
 // Component
 // ---------------
 export const PropsTable = ({ component }: PropsTableProps) => {
-  //make the props iterable
-  const props =
-    component &&
-    (Object.entries((componentProps as any)[component]).map(
-      element => element[1]
-    ) as Prop[]);
+  const json = (componentProps as any)[component];
 
-  if (!props) {
-    return (
-      <Inline space={2}>
-        <BlankCanvas />
-        <Text>Sorry! There are currently no props available.</Text>
-      </Inline>
-    );
-  }
+  //make the props iterable
+  const props = json
+    ? Object.entries<Prop>(json).map(element => element[1])
+    : [];
 
   return (
     <div className="border-secondary-200 divide-y rounded-lg border bg-white/40">
-      {props.map(prop => (
-        <div
-          className="text-text-primary-muted flex flex-col gap-2 px-3 py-3.5 text-sm"
-          key={prop.name}
-        >
-          <Inline space={2} alignY="center">
-            <code className="before:content-none after:content-none">
-              {prop.name}
-              {prop.required ? '' : '?'}
-            </code>
-            <div
-              dangerouslySetInnerHTML={{ __html: prop.type.value }}
-              className="*:m-0 *:!bg-transparent *:p-0 *:text-xs"
-            />
-          </Inline>
+      {props.length ? (
+        props.map(prop => (
+          <div
+            className="text-text-primary-muted flex flex-col gap-2 px-3 py-3.5 text-sm"
+            key={prop.name}
+          >
+            <Inline space={2} alignY="center">
+              <code className="before:content-none after:content-none">
+                {prop.name}
+                {prop.required ? '' : '?'}
+              </code>
+              <div
+                dangerouslySetInnerHTML={{ __html: prop.type.value }}
+                className="*:m-0 *:!bg-transparent *:p-0 *:text-xs"
+              />
+            </Inline>
 
-          <Stack space={1}>
-            <Markdown
-              // Reset <code> for now
-              className="text-pretty text-xs *:bg-transparent *:p-0 *:text-xs"
-              contents={prop.description}
-            />
-            {prop.defaultValue ? (
-              <Inline space={2} alignY="center">
-                Defaults to:{' '}
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: prop.defaultValue.value,
-                  }}
-                  className="*:m-0 *:!bg-transparent *:p-0 *:text-xs"
-                />
-              </Inline>
-            ) : null}
-          </Stack>
-        </div>
-      ))}
+            <Stack space={1}>
+              <Markdown
+                // Reset <code> for now
+                className="text-pretty text-xs *:bg-transparent *:p-0 *:text-xs"
+                contents={prop.description}
+              />
+              {prop.defaultValue ? (
+                <Inline space={2} alignY="center">
+                  Defaults to:{' '}
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: prop.defaultValue.value,
+                    }}
+                    className="*:m-0 *:!bg-transparent *:p-0 *:text-xs"
+                  />
+                </Inline>
+              ) : null}
+            </Stack>
+          </div>
+        ))
+      ) : (
+        <Inset space={4}>
+          <EmptyState />
+        </Inset>
+      )}
     </div>
   );
 };
diff --git a/packages/components/src/Grid/GridArea.tsx b/packages/components/src/Grid/GridArea.tsx
@@ -3,7 +3,13 @@ import type { ReactNode } from 'react';
 // Props
 // ---------------
 export interface GridAreaProps {
+  /**
+   * Name of the grid area slot to put the component.
+   */
   name: string;
+  /**
+   * Children of the component.
+   */
   children?: ReactNode;
 }
 

diff --git a/packages/components/src/List/ListItem.tsx b/packages/components/src/List/ListItem.tsx
@@ -2,6 +2,9 @@ import type { ReactNode } from 'react';
 import { useListContext } from './Context';
 
 export interface ListItemProps {
+  /**
+   * Children of the component.
+   */
   children?: ReactNode;
 }
 

diff --git a/packages/components/src/SectionMessage/SectionMessageContent.tsx b/packages/components/src/SectionMessage/SectionMessageContent.tsx
@@ -3,6 +3,9 @@ import { cn } from '@marigold/system';
 import { useSectionMessageContext } from './Context';
 
 export interface SectionMessageContentProps {
+  /**
+   * The children of the component.
+   */
   children?: ReactNode;
 }
 

diff --git a/packages/components/src/SectionMessage/SectionMessageTitle.tsx b/packages/components/src/SectionMessage/SectionMessageTitle.tsx
@@ -3,6 +3,9 @@ import { cn } from '@marigold/system';
 import { useSectionMessageContext } from './Context';
 
 export interface SectionMessageTitleProps {
+  /**
+   * The children of the component.
+   */
   children?: ReactNode;
 }