@takaro/lib-components 0.4.3 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",

package/src/components/actions/Button/Button.stories.tsx

@@ -25,7 +25,7 @@ export default {
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
     size: 'medium',
-    text: 'basic button',
+    children: 'basic button',
     variant: 'default',
     type: 'button',
     disabled: false,
@@ -44,127 +44,143 @@ export const Examples = () => (
       onClick={() => {
         /* */
       }}
-      text="Default Button"
-    />
+    >
+      Default Button
+    </Button>
     <Button
       icon={<Icon size={20} />}
       onClick={() => {
         /* */
       }}
-      text="Icon Button"
-    />
+    >
+      Icon Button
+    </Button>
     <Button
       disabled
       onClick={() => {
         /* */
       }}
-      text="Disabled Button"
-    />
+    >
+      Disabled Button
+    </Button>
     <Button
       isLoading
       onClick={() => {
         /* */
       }}
-      text="Loading Button"
-    />
+    >
+      Loading Button
+    </Button>
 
     {/* Outline */}
     <Button
       onClick={() => {
         /* */
       }}
-      text="Outlined Button"
       variant="outline"
-    />
+    >
+      Outlined Button
+    </Button>
     <Button
       icon={<Icon size={20} />}
       onClick={() => {
         /* */
       }}
-      text="Icon Button"
       variant="outline"
-    />
+    >
+      Icon Button
+    </Button>
     <Button
       disabled
       onClick={() => {
         /* */
       }}
-      text="Disabled Button"
       variant="outline"
-    />
+    >
+      Disabled Button
+    </Button>
     <Button
       isLoading
       onClick={() => {
         /* */
       }}
-      text="Loading Button"
       variant="outline"
-    />
+    >
+      Loading Button
+    </Button>
 
     {/* Clear */}
     <Button
       onClick={() => {
         /* */
       }}
-      text="Clear Button"
       variant="clear"
-    />
+    >
+      Clear Button
+    </Button>
     <Button
       icon={<Icon size={20} />}
       onClick={() => {
         /* */
       }}
-      text="Icon Button"
       variant="clear"
-    />
+    >
+      Icon Button
+    </Button>
     <Button
       disabled
       onClick={() => {
         /* */
       }}
-      text="Disabled Button"
       variant="clear"
-    />
+    >
+      Disabled Button
+    </Button>
     <Button
       isLoading
       onClick={() => {
         /* */
       }}
-      text="Loading Button"
       variant="clear"
-    />
+    >
+      Loading Button
+    </Button>
 
     {/* white */}
     <Button
       onClick={() => {
         /* */
       }}
-      text="White Button"
       variant="white"
-    />
+    >
+      White Button
+    </Button>
     <Button
       icon={<Icon size={20} />}
       onClick={() => {
         /* */
       }}
-      text="Icon Button"
       variant="white"
-    />
+    >
+      Icon Button
+    </Button>
     <Button
       disabled
       onClick={() => {
         /* */
       }}
-      text="Disabled Button"
       variant="white"
-    />
+    >
+      Disabled Button
+    </Button>
     <Button
       isLoading
       onClick={() => {
         /* */
       }}
-      text="Loading Button"
       variant="white"
-    />
+    >
+      Loading Button
+    </Button>
   </>
 );

package/src/components/actions/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Should render <Button/> 1`] = `
 <div>
   <button
-    class="sc-djTQaJ ikqgQo"
+    class="sc-gvPdwL csCrvu"
     color="primary"
     tabindex="0"
     type="button"

package/src/components/actions/ContextMenu/ContextMenu.stories.tsx

@@ -30,6 +30,7 @@ export const Target: StoryFn<ContextMenuProps> = () => {
 
   return (
     <Container ref={targetRef}>
+      The context menu has a targetRef prop, so it is only triggered on the orange box.
       <ContextMenu targetRef={targetRef}>
         <ContextMenu.Item label="Item 1" />
         <ContextMenu.Item label="Item 2" />

package/src/components/actions/ContextMenu/index.tsx

@@ -95,7 +95,8 @@ export const ContextMenu: FC<ContextMenuProps> & SubComponentTypes = ({ children
     let timeout: number;
 
     function onContextMenu(e: MouseEvent) {
-      if (targetRef?.current && targetRef?.current.contains(e.target as Node)) {
+      const shouldShowMenu = !targetRef?.current || targetRef.current.contains(e.target as Node);
+      if (shouldShowMenu) {
         e.preventDefault();
         refs.setPositionReference({
           getBoundingClientRect() {
@@ -146,7 +147,7 @@ export const ContextMenu: FC<ContextMenuProps> & SubComponentTypes = ({ children
       }
       clearTimeout(timeout);
     };
-  }, [refs]);
+  }, [refs, targetRef]);
 
   return (
     <FloatingPortal>

package/src/components/actions/DropdownButton/DropdownButton.stories.tsx

@@ -26,34 +26,34 @@ export const Default: StoryFn<DropdownButtonProps> = () => {
     <>
       <DropdownButton>
         <Action
+          text="Save changes"
           onClick={() => {
             setMessage('save changes event fired');
           }}
-          text="Save changes"
         >
           Save changes
         </Action>
         <Action
+          text="Save and Schedule"
           onClick={() => {
             setMessage('Save and schedule event fired');
           }}
-          text="Save and schedule"
         >
           Save and schedule
         </Action>
         <Action
+          text="Save and publish documen"
           onClick={() => {
             setMessage('save and published fired');
           }}
-          text="Save and publish"
         >
           Save and publish
         </Action>
         <Action
+          text="Export PDF"
           onClick={() => {
             setMessage('Export PDF event fired');
           }}
-          text="Export PDF"
         >
           Export PDF
         </Action>
@@ -69,15 +69,15 @@ export const Description: StoryFn<DropdownButtonProps> = () => {
   return (
     <>
       <DropdownButton>
-        <Action onClick={() => setMessage('Merge pull request is fired')} text="Merge pull request">
+        <Action text="Merge pull request" onClick={() => setMessage('Merge pull request is fired')}>
           <h4>merge pull request</h4>
           <p>All commits from this branch will be added to the base branchh via a merge commit.</p>
         </Action>
-        <Action onClick={() => setMessage('Squash and merge is fired')} text="Squash and merge">
+        <Action text="Squash and merge" onClick={() => setMessage('Squash and merge is fired')}>
           <h4>Squash and merge</h4>
           <p>The 4 commits from this branch will be combined into one commit in the base branch.</p>
         </Action>
-        <Action onClick={() => setMessage('Rebase and merge is fired.')} text="Rebase and merge">
+        <Action text="Rebase and merge" onClick={() => setMessage('Rebase and merge is fired.')}>
           <h4>Rebase and merge</h4>
           <p>the 4 commits from this branch will be rebased and added to the base branch.</p>
         </Action>

package/src/components/actions/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Should render <IconButton /> 1`] = `
 <div>
   <button
     aria-label="test"
-    class="sc-dBFDNq dwHZij"
+    class="sc-djVXDX cRGHRs"
     color="primary"
     type="button"
   >

package/src/components/data/Drawer/Drawer.stories.tsx

@@ -60,7 +60,7 @@ export const Default: StoryFn<DrawerOptions> = ({ promptCloseConfirmation }) =>
 
   return (
     <>
-      <Button onClick={() => setOpen(true)} text="Open drawer" />
+      <Button onClick={() => setOpen(true)}>Open drawer</Button>
       <Drawer open={open} onOpenChange={setOpen} promptCloseConfirmation={promptCloseConfirmation}>
         <Drawer.Content>
           <Drawer.Heading>Product Details</Drawer.Heading>
@@ -140,8 +140,12 @@ export const Default: StoryFn<DrawerOptions> = ({ promptCloseConfirmation }) =>
           </Drawer.Body>
           <Drawer.Footer>
             <ButtonContainer>
-              <Button text="Cancel" onClick={() => setOpen(false)} color="background" />
-              <Button fullWidth text="Save changes" type="submit" form="myform" />
+              <Button onClick={() => setOpen(false)} color="background">
+                Cancel
+              </Button>
+              <Button fullWidth type="submit" form="myform">
+                Save changes
+              </Button>
             </ButtonContainer>
           </Drawer.Footer>
         </Drawer.Content>

package/src/components/data/Stats/Stat.tsx

@@ -1,13 +1,23 @@
-import { FC, useContext } from 'react';
+import { FC, useContext, ReactNode, cloneElement, isValidElement } from 'react';
 import { styled } from '../../../styled';
-import { StatContext, Direction } from './context';
+import { StatContext, Direction, Size } from './context';
+import { AiOutlineArrowUp, AiOutlineArrowDown } from 'react-icons/ai';
 
-const Container = styled.div<{ hasBorder: boolean; direction: Direction }>`
+const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: Size }>`
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
-  padding: ${({ theme }) => theme.spacing['2']};
+  padding: ${({ theme, size }) => {
+    switch (size) {
+      case 'small':
+        return theme.spacing['1'];
+      case 'medium':
+        return theme.spacing['2'];
+      case 'large':
+        return theme.spacing['3'];
+    }
+  }};
 
-  ${({ hasBorder, direction, theme }) => {
-    if (hasBorder) {
+  ${({ isGrouped, direction, theme }) => {
+    if (isGrouped) {
       if (direction === 'vertical') {
         return `
           &:not(:last-child) {
@@ -22,7 +32,7 @@ const Container = styled.div<{ hasBorder: boolean; direction: Direction }>`
             border-bottom-right-radius: ${theme.borderRadius.medium};
           }
         `;
-      } else if (direction === 'horizontal') {
+      } else {
         return `
           &:not(:last-child) {
             border-right: 1px solid ${theme.colors.secondary};
@@ -46,18 +56,39 @@ const Container = styled.div<{ hasBorder: boolean; direction: Direction }>`
   }};
 
   dt {
-    font-size: ${({ theme }) => theme.fontSize.medium};
-    font-color: ${({ theme }) => theme.colors.secondary};
+    font-size: ${({ theme, size }) => {
+      switch (size) {
+        case 'small':
+          return theme.fontSize.small;
+        case 'medium':
+          return theme.fontSize.medium;
+        case 'large':
+          return theme.fontSize.mediumLarge;
+      }
+    }};
+    color: ${({ theme }) => theme.colors.secondary};
     margin-bottom: ${({ theme }) => theme.spacing['0_5']};
   }
 
   dd {
     font-weight: bold;
     color: ${({ theme }) => theme.colors.white};
-    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    font-size: ${({ theme, size }) => {
+      switch (size) {
+        case 'small':
+          return theme.fontSize.medium;
+        case 'medium':
+          return theme.fontSize.mediumLarge;
+        case 'large':
+          return theme.fontSize.large;
+      }
+    }};
     letter-spacing: 1px;
     margin: 0;
     padding: 0;
+    display: flex;
+    align-items: center;
+    gap: ${({ theme }) => theme.spacing['1']};
 
     &.placeholder {
       min-width: 80%;
@@ -66,34 +97,82 @@ const Container = styled.div<{ hasBorder: boolean; direction: Direction }>`
   }
 `;
 
+const TrendContainer = styled.span<{ direction: 'up' | 'down' }>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  font-weight: normal;
+  color: ${({ theme, direction }) => (direction === 'up' ? theme.colors.success : theme.colors.error)};
+`;
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  margin-right: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+export interface TrendConfig {
+  direction: 'up' | 'down';
+  value: string | number;
+}
+
 export interface StatProps {
   description: string;
-  value: string;
-  // TODO: Add icon support when needed
-  // icon?: ReactNode
+  value: string | number | ReactNode;
+  icon?: ReactNode;
+  trend?: TrendConfig;
   isLoading?: boolean;
+  size?: Size;
 }
 
-export const Stat: FC<StatProps> = ({ description, value, isLoading }) => {
-  const { border, direction } = useContext(StatContext);
+export const Stat: FC<StatProps> = ({ description, value, icon, trend, isLoading, size: propSize }) => {
+  const { grouped, direction, size: contextSize } = useContext(StatContext);
+  const size = propSize ?? contextSize;
+
+  const renderValue = () => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      return value.toString();
+    }
+    return value;
+  };
+
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (isValidElement(icon)) {
+      return <IconWrapper>{cloneElement(icon, { size: 20 } as any)}</IconWrapper>;
+    }
+    return <IconWrapper>{icon}</IconWrapper>;
+  };
+
+  const renderTrend = () => {
+    if (!trend) return null;
+    const TrendIcon = trend.direction === 'up' ? AiOutlineArrowUp : AiOutlineArrowDown;
+    return (
+      <TrendContainer direction={trend.direction}>
+        <TrendIcon size={14} />
+        {trend.value}
+      </TrendContainer>
+    );
+  };
 
   if (isLoading) {
     return (
-      <Container hasBorder={border} direction={direction}>
-        <div>
-          <dt>{description}</dt>
-          <dd className="placeholder"></dd>
-        </div>
+      <Container isGrouped={grouped} direction={direction} size={size} aria-busy="true" aria-label="Loading">
+        <dt>{description}</dt>
+        <dd className="placeholder"></dd>
       </Container>
     );
   }
 
   return (
-    <Container hasBorder={border} direction={direction}>
-      <div>
-        <dt>{description}</dt>
-        <dd>{value}</dd>
-      </div>
+    <Container isGrouped={grouped} direction={direction} size={size}>
+      <dt>{description}</dt>
+      <dd>
+        {renderIcon()}
+        {renderValue()}
+        {renderTrend()}
+      </dd>
     </Container>
   );
 };