@soyfri/shared-library 1.5.0-beta.4 → 1.5.0

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,143 @@
+import { Avatar as MuiAvatar, Tooltip } from '@mui/material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import React, { useState } from 'react';
+
+export interface AvatarItem {
+  text?: string;
+  imageUrl?: string;
+  badge?: string;
+  color?: string;
+  backgroundColor?: string;
+}
+
+export interface AvatarProps {
+  type?: string;
+  items: AvatarItem[];
+  displayedAvatars?: number;
+  size?: 'sm' | 'xl';
+  trustUrls?: boolean;
+  showText?: boolean;
+  showTooltip?: boolean;
+}
+
+const sizes = {
+  sm: {
+    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem' },
+    icon: { width: 42, height: 42, marginTop: '.5rem', fontSize: 42 },
+    badge: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem', fontSize: 16 },
+  },
+  xl: {
+    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: '0' },
+    icon: { width: 126, height: 126, marginTop: '0', fontSize: 126 },
+    badge: { width: 105, height: 105, borderWidth: 10, marginTop: '0', fontSize: 64 },
+  },
+};
+
+export const Avatar: React.FC<AvatarProps> = ({
+  items,
+  type,
+  displayedAvatars = 4,
+  size = 'sm',
+  trustUrls = false,
+  showText = true,
+  showTooltip = false,
+}) => {
+  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());
+
+  const handleImageError = (index: number) => {
+    setErrorIndex((prev) => new Set(prev).add(index));
+  };
+
+  return (
+    <div data-testid="avatar-container" className="flex items-center leading-2 h-full w-full">
+      {items.slice(0, displayedAvatars).map((item, i) => {
+        const commonStyle = {
+          zIndex: displayedAvatars - i,
+          marginLeft: i > 0 ? -22 : 0,
+        };
+
+        const style = sizes[size];
+
+        const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;
+
+        const showFallbackIcon = (!item.imageUrl && !item.badge) || (errorIndex.has(i) && !item.badge);
+        const showBadge = (item.badge && !item.imageUrl) || (item.badge && errorIndex.has(i));
+
+        const content = (
+          <span key={i} data-testid="avatar" style={commonStyle}>
+            {item.imageUrl && !errorIndex.has(i) ? (
+              <img
+                data-testid="image"
+                alt={item.text || 'User avatar'}
+                src={imgSrc}
+                onError={() => handleImageError(i)}
+                style={{
+                  ...style.avatar,
+                  color: item.color || '#667688',
+                  border: `${style.avatar.borderWidth}px solid white`,
+                  borderRadius: '9999px',
+                  marginTop: style.avatar.marginTop,
+                }}
+              />
+            ) : showFallbackIcon ? (
+              <AccountCircleIcon
+                data-testid="icon"
+                aria-label={item.text}
+                sx={{
+                  ...style.icon,
+                  fontSize: style.icon.fontSize,
+                  marginTop: style.icon.marginTop,
+                  borderRadius: '9999px',
+                  backgroundColor: '#fff',
+                  color: item.color || '#667688',
+                }}
+              />
+            ) : null}
+
+            {showBadge && (
+              <span
+                data-testid="badge"
+                aria-label={item.text}
+                style={{
+                  ...style.badge,
+                  display: 'inline-block',
+                  backgroundColor: item.backgroundColor || '#c8d5e9',
+                  color: item.color || '#667688',
+                  fontWeight: 700,
+                  textAlign: 'center',
+                  borderRadius: '9999px',
+                  border: `${style.badge.borderWidth}px solid white`,
+                  lineHeight: style.badge.height,
+                  fontSize: style.badge.fontSize,
+                  marginTop: style.badge.marginTop,
+                  marginBottom: style.badge.marginTop,
+                }}
+              >
+                {item.badge}
+              </span>
+            )}
+          </span>
+        );
+
+        return showTooltip && item.text ? (
+          <Tooltip key={i} title={item.text}>
+            {content}
+          </Tooltip>
+        ) : (
+          content
+        );
+      })}
+
+      {showText && (
+        <span data-testid="text" className="ml-2 text-xs font-normal">
+          {type && items.length === 1 && (
+            <span data-testid="type">{type}: </span>
+          )}
+          {items[0].text} {items.length > 2 && `+${items.length - 1}`}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar} from './Avatar'

package/src/components/Button/Button.definition.ts

@@ -0,0 +1,97 @@
+export const DefaultButtonDefinition = `
+<Button variant="text">
+  Button
+</Button>
+`
+
+export const OutlinedButtonDefinition = `
+<Button variant="outlined">
+  Button
+</Button>
+`
+
+export const ContainedButtonDefinition = `
+<Button variant="contained">
+  Button
+</Button>
+`
+
+export const WithStartIconButtonDefinition = `
+<Button
+  data-testid="button"
+  startIcon={<NotificationsIcon/>}
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const WithEndIconButtonDefinition = `
+<Button
+  data-testid="button"
+  endIcon={<NotificationsIcon/>}
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const WithSmallSizeButtonDefinition = `
+<Button
+  data-testid="button"
+  size="small"
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const WithLargeSizeButtonDefinition = `
+<Button
+  data-testid="button"
+  size="large"
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const DisabledStateButtonDefinition = `
+<Button
+  data-testid="button"
+  disabled
+  variant="contained"
+>
+  Button
+</Button>`
+
+export const LoadingButtonDefinition = `
+<Button
+  data-testid="button"
+  loading
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const LoadingIndicatorStartButtonDefinition = `
+<Button
+  data-testid="button"
+  loading
+  loadingPosition="start"
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const LoadingIndicatorEndButtonDefinition = `
+<Button
+  data-testid="button"
+  loading
+  loadingPosition="end"
+  variant="contained"
+>
+  Button
+</Button>`

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

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import { expect, within } from "storybook/test";
+import {
+  ContainedButtonDefinition,
+  DefaultButtonDefinition,
+  DisabledStateButtonDefinition,
+  LoadingButtonDefinition,
+  LoadingIndicatorEndButtonDefinition,
+  LoadingIndicatorStartButtonDefinition,
+  OutlinedButtonDefinition,
+  WithEndIconButtonDefinition,
+  WithLargeSizeButtonDefinition,
+  WithSmallSizeButtonDefinition,
+  WithStartIconButtonDefinition
+} from "./Button.definition";
+
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "text"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con el texto \"Button\" y el estilo \"default\"."
+      },
+      source: {
+        code: DefaultButtonDefinition.trim()
+      }
+    }
+  }
+};
+
+export const Outlined: Story = {
+  args: {
+    children: "Button",
+    variant: "outlined"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con el texto \"Button\" y el estilo \"outlined\"."
+      },
+      source: {
+        code: OutlinedButtonDefinition.trim()
+      }
+    }
+  }
+};
+
+export const Contained: Story = {
+  args: {
+    children: "Button",
+    variant: "contained"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con el texto \"Button\" y el estilo \"contained\"."
+      },
+      source: {
+        code: ContainedButtonDefinition.trim()
+      }
+    }
+  }
+};
+
+
+export const WithStartIcon: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    startIcon: <NotificationsIcon />,
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con el texto \"Button\", el estilo \"contained\" y un icono al inicio."
+      },
+      source: {
+        code: WithStartIconButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+  }
+};
+
+
+export const WithEndIcon: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    endIcon: <NotificationsIcon />,
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con el texto \"Button\", el estilo \"contained\" y un icono al final."
+      },
+      source: {
+        code: WithEndIconButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+  }
+};
+
+export const WithSmallSize: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    size: "small",
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton tamaño \"small\"."
+      },
+      source: {
+        code: WithSmallSizeButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+  }
+};
+
+
+export const WithLargeSize: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    size: "large",
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton tamaño \"large\"."
+      },
+      source: {
+        code: WithLargeSizeButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    "data-testid": "button",
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton deshabilitado."
+      },
+      source: {
+        code: DisabledStateButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+    expect(button).toBeDisabled();
+  }
+};
+
+
+export const Loading: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    loading: true,
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con loader."
+      },
+      source: {
+        code: LoadingButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+    expect(button).toBeDisabled();
+  }
+};
+
+export const LoadingStart: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    loading: true,
+    loadingPosition: "start",
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con al inicio loader."
+      },
+      source: {
+        code: LoadingIndicatorStartButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+    expect(button).toBeDisabled();
+  }
+};
+
+
+export const LoadingEnd: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    loading: true,
+    loadingPosition: "end",
+    "data-testid": "button"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Boton con al inicio loader."
+      },
+      source: {
+        code: LoadingIndicatorEndButtonDefinition.trim()
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("button");
+    expect(within(button).getByText("Button")).toBeInTheDocument();
+    expect(button).toBeDisabled();
+  }
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,67 @@
+import { Button as MuiButton } from "@mui/material";
+import type { ButtonProps } from "@mui/material/Button";
+import React from "react";
+
+type PickButtonProps = Pick<ButtonProps, "href" | "children" | "onClick" | "color" | "disabled" | "className" | "endIcon" | "startIcon" | "loading" | "loadingIndicator" | "variant" | "size" | "loadingPosition" | "type" | "sx">;
+
+export interface MyButtonProps extends PickButtonProps {
+  children?: React.ReactNode;
+  variant?: "text" | "outlined" | "contained";
+  disabled?: boolean;
+  endIcon?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  size?: "small" | "medium" | "large";
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  loading?: boolean;
+  loadingIndicator?: React.ReactNode;
+  loadingPosition?: "start" | "end" | "center";
+  color?: "primary" | "success" | "error" | "info" | "warning"; //change for tailwind  class colors
+  href?: string;
+  "data-testid"?: string;
+  type?: "button" | "submit" ;
+}
+
+export const Button: React.FC<MyButtonProps> = ({
+  children,
+  variant,
+  disabled,
+  startIcon,
+  endIcon,
+  size,
+  className,
+  onClick,
+  loading,
+  loadingPosition,
+  loadingIndicator,
+  color,
+  href,
+  "data-testid": dataTestId,
+  type,
+  sx
+}) => {
+  return (
+    <MuiButton
+      disabled={disabled}
+      variant={variant}
+      startIcon={startIcon}
+      endIcon={endIcon}
+      size={size}
+      className={className}
+      onClick={onClick}
+      loading={loading}
+      loadingPosition={loadingPosition}
+      loadingIndicator={loadingIndicator}
+      sx={{ textTransform: "none", ...sx }}
+      disableRipple={true}
+      disableElevation={true}
+      color={color}
+      data-testid={dataTestId}
+      href={href}
+      type={type}
+    >
+      {children}
+    </MuiButton>);
+};
+
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button';

package/src/components/Card/Card.definition.ts

@@ -0,0 +1,5 @@
+export const DefaultCardDefinition = `
+<Card>
+  Card
+</Card>
+`

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,32 @@
+import { DefaultCardDefinition } from "./Card.definition";
+import Card from "./Card";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    children: "Card",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Tarjeta con el texto \"Card\" y el estilo \"default\"."
+      },
+      source: {
+        code: DefaultCardDefinition.trim()
+      }
+    }
+  }
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,44 @@
+import { CardActions, Card as MuiCard } from "@mui/material";
+import type { CardProps } from "@mui/material/Card";
+import { CardContent as MuiCardContent } from "@mui/material";
+
+
+type PickCardProps = Pick<CardProps, 'children' | 'raised' | 'sx' | 'className' | 'sx'>;
+
+export interface MyCardProps extends PickCardProps {
+    children?: React.ReactNode;
+    raised?: boolean;
+    className?: string
+    onClick?: () => void;
+    onBlur?: () => void;
+    "data-testid"?: string;
+    sx?: object;
+}
+
+export const Card: React.FC<MyCardProps> = ({
+    children,
+    raised,
+    sx,
+    className,
+    onClick,
+    onBlur,
+    "data-testid": dataTestId
+}) => {
+    return (
+        <MuiCard
+            raised={raised}
+            sx={sx}
+            className={className}
+            data-testid={dataTestId}
+            onClick={onClick}
+            onBlur={onBlur}
+
+        >
+
+            {children}
+
+        </MuiCard>
+    );
+};
+
+export default Card;

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card';