@granto-umbrella/umbrella-components 3.0.7 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/Input/Input.tsx

@@ -35,7 +35,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       icon,
       label,
       supportText,
-      size = 'md',
+      size = 'sm',
       radius = 'md' as 'md' | 'lg' | 'sm' | 'full',
       shadow = 'default' as 'none' | 'default' | 'md' | 'lg',
       style,

package/src/components/atoms/Input/Input.types.ts

@@ -4,7 +4,7 @@ export interface InputProps {
   placeholder?: string;
   value?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   className?: string;
   error?: boolean;
   disabled?: boolean;

package/src/components/atoms/Select/Select.styles.ts

@@ -48,7 +48,6 @@ export const CustomSelect = styled(Select).attrs({
           ? semanticColors.global.border.danger.enabled
           : semanticColors.global.border.medium};
     border-radius: ${semanticRadius.global.radius.md};
-    box-shadow: ${semanticShadows.shadow.default};
     transition: border-color 0.2s, box-shadow 0.2s;
     min-height: ${primitiveSizes.size.x12};
 

package/src/components/atoms/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,32 @@
+// src/components/atoms/Skeleton/styles.ts
+import styled, { keyframes, css } from 'styled-components';
+import { primitiveColors } from '../../../styles/tokens';
+
+const shimmer = keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+
+export const SkeletonWrap = styled.div`
+  display: grid;
+  gap: 8px;
+`;
+
+export const SkeletonBlock = styled.div<{
+  $variant: 'text' | 'rect' | 'circle';
+  $animated: boolean;
+}>`
+  background: linear-gradient(
+    90deg,
+    ${primitiveColors.gray[100]} 0%,
+    ${primitiveColors.gray[200]} 50%,
+    ${primitiveColors.gray[100]} 100%
+  );
+  background-size: 200% 100%;
+
+  ${({ $animated }) =>
+    $animated &&
+    css`
+      animation: ${shimmer} 1.4s ease-in-out infinite;
+    `}
+`;

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SkeletonBlock, SkeletonWrap } from './Skeleton.styles';
+import { SkeletonProps } from './Skeleton.types';
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  width,
+  height,
+  radius,
+  count = 1,
+  variant = 'rect',
+  animated = true,
+  className,
+  style,
+  ariaLabel = 'Carregando conteúdo',
+}) => {
+  const items = Array.from({ length: count });
+  return (
+    <SkeletonWrap
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      aria-label={ariaLabel}
+      className={className}
+    >
+      {items.map((_, i) => (
+        <SkeletonBlock
+          key={i}
+          $variant={variant}
+          $animated={animated}
+          style={{
+            width: width ?? (variant === 'text' ? '100%' : undefined),
+            height:
+              height ??
+              (variant === 'text' ? '1em' : variant === 'circle' ? 40 : 16),
+            borderRadius:
+              variant === 'circle' ? '9999px' : radius != null ? radius : 8,
+            ...style,
+          }}
+        />
+      ))}
+    </SkeletonWrap>
+  );
+};

package/src/components/atoms/Skeleton/Skeleton.types.ts

@@ -0,0 +1,13 @@
+export type SkeletonVariant = 'text' | 'rect' | 'circle';
+
+export type SkeletonProps = {
+  width?: string | number;
+  height?: string | number;
+  radius?: number;
+  count?: number;
+  variant?: SkeletonVariant;
+  animated?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+};

package/src/components/molecules/TimeLine/TimeLine.styles.ts

@@ -97,6 +97,7 @@ export const Title = styled.h4`
 `;
 
 export const Sub = styled.div`
+  margin-top: 16px;
   color: ${semanticColors.global.text.subtitle.enabled};
   font-size: ${typographyTokens.fontSizes.headingM};
 `;
@@ -116,3 +117,32 @@ export const List = styled.ol`
   display: flex;
   flex-direction: column;
 `;
+
+export const Empty = styled.div`
+  display: grid;
+  gap: 12px;
+  justify-items: start;
+  background: #fff;
+  border: 1px dashed ${primitiveColors.gray[300]};
+  border-radius: 12px;
+  padding: 16px;
+  color: ${semanticColors.global.text.subtitle.enabled};
+`;
+
+export const RetryButton = styled.button`
+  appearance: none;
+  border: 1px solid ${semanticColors.branding.surface.enabled};
+  background: ${semanticColors.branding.surface.enabled};
+  color: ${primitiveColors.base.white};
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+  &:active {
+    filter: brightness(0.9);
+  }
+`;

package/src/components/molecules/TimeLine/TimeLine.tsx

@@ -1,8 +1,63 @@
+// src/components/molecules/TimeLine/TimeLine.tsx
 import React from 'react';
-import { ItemWrap, Card, Sub, Row, Dot, List, Title } from './TimeLine.styles';
+import {
+  ItemWrap,
+  Card,
+  Sub,
+  Row,
+  Dot,
+  List,
+  Title,
+  Empty,
+  RetryButton,
+} from './TimeLine.styles';
 import { TimelineProps } from './TimeLine.types';
+import { Skeleton } from '../../atoms/Skeleton/Skeleton';
+
+export const Timeline: React.FC<TimelineProps> = ({
+  items,
+  loading = false,
+  onRetry,
+  emptyLabel = 'Nenhum evento encontrado.',
+  skeletonItems = 3,
+}) => {
+  if (loading) {
+    return (
+      <List aria-label="Linha do tempo (carregando)">
+        {Array.from({ length: skeletonItems }).map((_, i) => (
+          <ItemWrap key={`sk-${i}`}>
+            <Skeleton
+              variant="circle"
+              width={24}
+              height={24}
+              ariaLabel="Carregando ponto da linha do tempo"
+            />
+            <Card>
+              <Skeleton variant="text" width="60%" height={32} />
+
+              <Sub>
+                <Skeleton variant="text" width="40%" height={18} />
+              </Sub>
+            </Card>
+          </ItemWrap>
+        ))}
+      </List>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return (
+      <Empty role="status" aria-live="polite">
+        <div>{emptyLabel}</div>
+        {onRetry && (
+          <RetryButton type="button" onClick={onRetry}>
+            Tentar novamente
+          </RetryButton>
+        )}
+      </Empty>
+    );
+  }
 
-export const Timeline: React.FC<TimelineProps> = ({ items }) => {
   return (
     <List aria-label="Linha do tempo">
       {items.map((it) => {
@@ -17,7 +72,7 @@ export const Timeline: React.FC<TimelineProps> = ({ items }) => {
 
         return (
           <ItemWrap key={it.id}>
-            {it?.type && <Dot aria-hidden $variant={it.type || 'created'} />}
+            {it?.type && <Dot aria-hidden $variant={it.type || 'continued'} />}
             <Card>
               <Row style={{ justifyContent: 'space-between' }}>
                 <Title>{it.title}</Title>

package/src/components/molecules/TimeLine/TimeLine.types.ts

@@ -20,6 +20,10 @@ export interface TimelineItem {
 
 export type TimelineProps = {
   items: TimelineItem[];
+  loading?: boolean;
+  onRetry?: () => void;
+  emptyLabel?: string;
+  skeletonItems?: number;
 };
 
 export interface TimelineActor {
@@ -38,6 +42,7 @@ export type RemoteEventType =
   | 'subscription:partner_quote'
   | 'subscription:partner_subscribe'
   | 'order:proposal_refused'
+  | 'issue:partner_issue'
   | string;
 
 export interface RemoteEventActor {

package/src/components/organisms/TimelineModal/TimelineModal.tsx

@@ -9,11 +9,17 @@ export const TimelineModal = ({
   onOpenChange,
   onClose,
   data,
+  onRetry,
+  emptyLabel,
+  loading,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onClose: () => void;
+  onRetry?: () => void;
+  emptyLabel?: string;
   data: any;
+  loading?: boolean;
 }) => {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
@@ -30,7 +36,13 @@ export const TimelineModal = ({
           </Title>
         </Dialog.Title>
 
-        <Timeline items={data} />
+        <Timeline
+          items={data}
+          onRetry={onRetry}
+          emptyLabel={emptyLabel}
+          skeletonItems={4}
+          loading={loading}
+        />
       </Content>
     </Dialog.Root>
   );