@takaro/lib-components 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "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/data/Table/index.tsx

@@ -93,7 +93,19 @@ export function Table<DataType extends object>({
         if (column.id === undefined) {
           throw new Error('ColumnDef must have an id');
         }
-        acc[column.id] = column?.meta?.hiddenColumn ? !column.meta.hiddenColumn : true;
+
+        if (column?.meta?.includeColumn == false) {
+          acc[column.id] = false;
+          return acc;
+        } else {
+          acc[column.id] = true;
+        }
+
+        if (column?.meta?.hideColumn) {
+          acc[column.id] = !column.meta.hideColumn;
+        } else {
+          acc[column.id] = true;
+        }
         return acc;
       },
       {} as Record<string, boolean>,

package/src/components/data/Table/react-table.d.ts

@@ -5,7 +5,10 @@ type DataTypes = 'datetime' | 'number' | 'string' | 'boolean' | 'uuid';
 
 declare module '@tanstack/table-core' {
   interface ColumnMeta<TData extends RowData, TValue> {
-    hiddenColumn?: boolean;
+    /// Column is not visible in table by default, but can be enabled with view options
+    hideColumn?: boolean;
+    canShowColumn?: boolean;
+    includeColumn?: boolean;
     dataType?: DataTypes;
   }
 }

package/src/components/data/Table/subcomponents/ColumnVisibility/index.tsx

@@ -18,7 +18,16 @@ export function ColumnVisibility<DataType extends object>({
   openColumnVisibilityTooltip,
   setHasShownColumnVisibilityTooltip,
 }: ColumnVisibilityProps<DataType>) {
-  const viableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide() === true);
+  const viableColumns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide() === true)
+    .filter((column) => {
+      if (column.columnDef.meta?.includeColumn === false) {
+        return false;
+      }
+      return true;
+    });
+
   const hiddenColumns = viableColumns.filter((column) => column.getIsVisible() === false);
 
   return (

package/src/components/feedback/Alert/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, MouseEvent, useState } from 'react';
+import { forwardRef, isValidElement, MouseEvent, ReactElement, useState } from 'react';
 import { Container, Grid, IconContainer, ButtonContainer } from './style';
 import {
   AiFillCheckCircle as Success,
@@ -20,14 +20,15 @@ type Action = {
 export interface AlertProps {
   variant: AlertVariants;
   title?: string;
-  text?: string | string[];
+  text?: string | string[] | ReactElement;
   elevation?: Elevation;
   dismiss?: boolean;
   action?: Action;
+  showIcon?: boolean;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 4, action },
+  { variant, title, text, dismiss = false, elevation = 4, action, showIcon = true },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
@@ -39,7 +40,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
     e.stopPropagation();
     action?.execute();
   };
-
   const handleDismiss = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -58,6 +58,19 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
         return <Info size={24} />;
     }
   }
+
+  function renderText() {
+    if (isValidElement(text)) {
+      return text;
+    }
+
+    if (typeof text === 'string') {
+      return <p>{text}</p>;
+    } else if (Array.isArray(text)) {
+      return <ul>{text?.map((message) => <li key={'message-' + message}>{message}</li>)}</ul>;
+    }
+  }
+
   return (
     <AnimatePresence>
       {visible && (
@@ -72,8 +85,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           ref={ref}
           role="status"
         >
-          <Grid hasTitle={hasTitle}>
-            <IconContainer variant={variant}>{getIcon()}</IconContainer>
+          <Grid hasTitle={hasTitle} showIcon={showIcon}>
+            {showIcon && <IconContainer variant={variant}>{getIcon()}</IconContainer>}
 
             {/* If title is declared set title, otherwise put everything on single line */}
             {title && (
@@ -82,25 +95,13 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
                 <div />
               </>
             )}
-            {typeof text === 'string' ? (
-              <p>{text}</p>
-            ) : (
-              text && (
-                <ul>
-                  {text.map((message) => (
-                    <li key={'message-' + message}>{message}</li>
-                  ))}
-                </ul>
-              )
-            )}
+            {renderText()}
             {hasTitle ? <div /> : null}
             <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
               {action && (
-                <Button size="small" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
-              )}
-              {dismiss && (
-                <Button size="small" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />
+                <Button size="tiny" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
               )}
+              {dismiss && <Button size="tiny" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />}
             </ButtonContainer>
           </Grid>
         </Container>

package/src/components/feedback/Alert/style.ts

@@ -58,10 +58,15 @@ export const Container = styled(motion.div)<{
   }}
 `;
 
-export const Grid = styled.div<{ hasTitle: boolean }>`
+export const Grid = styled.div<{ hasTitle: boolean; showIcon: boolean }>`
   display: grid;
-  grid-template-columns: ${({ theme, hasTitle }) =>
-    !hasTitle ? `${theme.spacing[5]} 1fr fit-content(100px)` : `${theme.spacing[5]} 1fr`};} 
+  grid-template-columns: ${({ theme, hasTitle, showIcon }) => {
+    const result = '';
+    if (showIcon) result.concat(`${theme.spacing[5]}`);
+    result.concat(' 1fr');
+    if (hasTitle) result.concat(' fit-content(100px)');
+    return result;
+  }}
   align-items: center;
   gap: ${({ theme, hasTitle }) => (hasTitle ? 0 : theme.spacing['0_5'])};
 `;
@@ -83,5 +88,6 @@ export const ButtonContainer = styled.div<{
 }>`
   display: ${({ show }): string => (show ? 'flex' : 'none')};
   align-items: center;
+  white-space: nowrap;
   margin-top: ${({ theme, hasTitle }): string => (hasTitle ? theme.spacing['1'] : theme.spacing[0])};
 `;

package/src/components/other/Collapsible/CollapsibleContent.tsx

@@ -6,6 +6,13 @@ const Container = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing['1']};
   hyphens: auto;
 
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: 10px 5px 0px 5px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+
   p {
     hypens: auto;
   }

package/src/components/other/Collapsible/CollapsibleTrigger.tsx

@@ -22,6 +22,18 @@ const Container = styled.button<{ open: boolean }>`
   margin-bottom: ${({ theme, open }) => (!open ? theme.spacing['1'] : theme.spacing['0_5'])};
   border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
   color: ${({ theme }) => theme.colors.textAlt};
+  font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+
+  ${({ open }) => {
+    if (open) {
+      return `
+        border-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-bottom: 0;
+      `;
+    }
+  }}
 
   svg {
     fill: ${({ theme }) => theme.colors.textAlt};