feat(ui): NoDataPlaceholder signature changed content > children

signalco-io · Oct 27, 2023 · 95f4542 · 95f4542
1 parent e1266d2
commit 95f4542
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 23 deletions.
diff --git a/web/apps/app/app/channels/[channelName]/page.tsx b/web/apps/app/app/channels/[channelName]/page.tsx
@@ -23,7 +23,9 @@ function ChannelConnectPartial(props: { channelName: string }) {
         return <ChannelPartialSlack />;
 
     return (
-        <NoDataPlaceholder content="Connect action not availble" />
+        <NoDataPlaceholder>
+            Connect action not availble
+        </NoDataPlaceholder>
     );
 }
 
@@ -71,7 +73,9 @@ export default function AppChannelPage({ params }: { params: { channelName: stri
                                         ))}
                                     </List>
                                 ) : (
-                                    <NoDataPlaceholder content="No items" />
+                                    <NoDataPlaceholder>
+                                        No items
+                                    </NoDataPlaceholder>
                                 )}
                         </Loadable>
                     </Stack>

diff --git a/web/apps/app/components/graphs/Graph.tsx b/web/apps/app/components/graphs/Graph.tsx
@@ -340,7 +340,7 @@ function Graph({ isLoading, error, data, label, discrete, ...rest }: GraphProps)
             {!!label && <Typography>{label}</Typography>}
             <Loadable isLoading={isLoading} loadingLabel="Loading data" error={error} width={100}>
                 {!data || data.length <= 0
-                    ? <NoDataPlaceholder content={t('NoData')} />
+                    ? <NoDataPlaceholder>{t('NoData')}</NoDataPlaceholder>
                     : <GraphComponent data={data} {...rest} />}
             </Loadable>
         </Row>

diff --git a/web/apps/app/components/shared/entity/EntityContactSelection.tsx b/web/apps/app/components/shared/entity/EntityContactSelection.tsx
@@ -24,7 +24,11 @@ export default function EntityContactSelection(props: EntityContactSelectionProp
     };
 
     if (!isLoading && !error && !contacts.length) {
-        return <div className="p-2"><NoDataPlaceholder content={'No applicable contacts available'} /></div>;
+        return (
+            <div className="p-2">
+                <NoDataPlaceholder>No applicable contacts available</NoDataPlaceholder>
+            </div>
+        );
     }
 
     return (

diff --git a/web/apps/app/components/views/Entity/EntityDetailsView.tsx b/web/apps/app/components/views/Entity/EntityDetailsView.tsx
@@ -34,7 +34,9 @@ export default function EntityDetailsView({ id }: EntityDetailsViewProps) {
 
     if (!isLoading && !error && entity == null) {
         return (
-            <NoDataPlaceholder content={'Not Found'} />
+            <NoDataPlaceholder>
+                Not Found
+            </NoDataPlaceholder>
         );
     }
     return (

diff --git a/web/apps/app/components/widgets/parts/WidgetChecklist.tsx b/web/apps/app/components/widgets/parts/WidgetChecklist.tsx
@@ -118,7 +118,9 @@ function WidgetChecklist(props: WidgetSharedProps<ConfigProps>) {
                         ? items.map(item => <ChecklistItem key={item.id} item={item} onChange={handleItemChanged} onRemove={handleItemRemoved} />)
                         : (
                             <div className="flex h-full items-center justify-center">
-                                <NoDataPlaceholder content={placeholders.t('NoItems')} />
+                                <NoDataPlaceholder>
+                                    {placeholders.t('NoItems')}
+                                </NoDataPlaceholder>
                             </div>
                         )}
                 </Stack>

diff --git a/web/apps/app/components/widgets/parts/WidgetFinanceStock.tsx b/web/apps/app/components/widgets/parts/WidgetFinanceStock.tsx
@@ -90,7 +90,9 @@ export default function WidgetFinanceStock(props: WidgetSharedProps<ConfigProps>
                     </Stack>
                     <Stack>
                         {!price?.item ? (
-                            <NoDataPlaceholder content={'No data'} />
+                            <NoDataPlaceholder>
+                                No data
+                            </NoDataPlaceholder>
                         ) : (
                             <>
                                 <Typography level="h4" bold lineHeight={0.9}>${closePrice}</Typography>

diff --git a/web/apps/ui-docs/stories/Components/NavigatingButton.stories.ts b/web/apps/ui-docs/stories/Components/NavigatingButton.stories.ts
@@ -1,7 +1,16 @@
 import { NavigatingButton } from "@signalco/ui/dist/NavigatingButton";
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
-export default { component: NavigatingButton, tags: ['autodocs'] };
-type Story = StoryObj<typeof NavigatingButton>;
+const Component = NavigatingButton;
+
+export default {
+    component: Component,
+    tags: ['autodocs'],
+    args: {
+        children: 'Navigate',
+        href: '#'
+    }
+} satisfies Meta<typeof Component>;
+type Story = StoryObj<typeof Component>;
 
 export const Default: Story = {};
diff --git a/web/apps/ui-docs/stories/Components/NoDataPlaceholder.stories.ts b/web/apps/ui-docs/stories/Components/NoDataPlaceholder.stories.ts
@@ -1,7 +1,9 @@
 import { NoDataPlaceholder } from "@signalco/ui/dist/NoDataPlaceholder";
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
-export default { component: NoDataPlaceholder, tags: ['autodocs'] };
-type Story = StoryObj<typeof NoDataPlaceholder>;
+const Component = NoDataPlaceholder;
+
+export default { component: Component, tags: ['autodocs'], args: { children: 'No data' } } satisfies Meta<typeof Component>;
+type Story = StoryObj<typeof Component>;
 
 export const Default: Story = {};
diff --git a/web/apps/ui-docs/tsconfig.json b/web/apps/ui-docs/tsconfig.json
@@ -5,6 +5,7 @@
         "noEmit": true
     },
     "include": [
-        "stories"
+        "stories/**/*.ts",
+        "stories/**/*.tsx"
     ]
 }
diff --git a/web/packages/ui/src/Accordion/Accordion.tsx b/web/packages/ui/src/Accordion/Accordion.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import type { ComponentProps, MouseEvent } from 'react';
 import { cx } from 'classix';
+import { ExpandDown } from '@signalco/ui-icons';
 import { Row } from '../Row';
-import { Icon } from '../Icon';
 import { Collapse } from '../Collapse';
 import { Card, CardContent, CardHeader } from '../Card';
 
@@ -34,7 +34,7 @@ export function Accordion({ children, open, disabled, onOpenChanged, unmountOnEx
                 <Row spacing={1} justifyContent="space-between">
                     {multipleChildren ? children[0] : children}
                     {!disabled && (
-                        <Icon>{actualOpen ? 'expand_less' : 'expand_more'}</Icon>
+                        <ExpandDown className={cx('uitw-transition-transform', actualOpen && 'uitw-scale-y-[-1]')} />
                     )}
                 </Row>
             </CardHeader>

diff --git a/web/packages/ui/src/FilterList/FilterList.tsx b/web/packages/ui/src/FilterList/FilterList.tsx
@@ -68,7 +68,7 @@ export function ItemsWrapper({ children, noItemsPlaceholder, itemsWrapper, ...re
     return (
         <Loadable {...rest}>
             {!children || !Array.isArray(children) || children.length === 0 ? (
-                <NoDataPlaceholder content={noItemsPlaceholder} />
+                <NoDataPlaceholder>{noItemsPlaceholder}</NoDataPlaceholder>
             ) : (
                 <ItemsWrapper>{children}</ItemsWrapper>
             )}

diff --git a/web/packages/ui/src/NoDataPlaceholder/NoDataPlaceholder.tsx b/web/packages/ui/src/NoDataPlaceholder/NoDataPlaceholder.tsx
@@ -1,9 +1,7 @@
-import { Typography } from '../Typography';
+import { Typography, type TypographyProps } from '../Typography';
 
-export type NoDataPlaceholderProps = {
-  content: React.ReactNode | string;
-};
+export type NoDataPlaceholderProps = TypographyProps;
 
-export function NoDataPlaceholder({ content }: NoDataPlaceholderProps) {
-    return <Typography level="body2">{content}</Typography>
+export function NoDataPlaceholder(props: NoDataPlaceholderProps) {
+    return <Typography level="body2" {...props} />
 }