@soyfri/shared-library 1.5.0 → 1.6.0-beta.0

package/src/components/Avatar/Avatar.tsx

@@ -1,143 +0,0 @@
-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

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

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

@@ -1,97 +0,0 @@
-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

@@ -1,285 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

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

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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

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