@granto-umbrella/umbrella-components 2.3.10 → 2.3.12

package/README.md

@@ -1,150 +1,19 @@
 # Umbrella - Components - Design System
 
-## Estrutura do Projeto
+# Usando no Projeto React 
 
-```css
-granto-umbrella-components/
-  ├── cli/
-  │   ├── index.js
-  │   ├── templates/
-  │   │   ├── Button/
-  │   │   │   ├── Button.tsx
-  │   │   │   ├── styles.ts
-  │   │   │   └── index.ts
-  ├── src/
-  │   ├── components/
-  │   ├── App.tsx
-  │   ├── main.tsx
-  ├── package.json
-  ├── vite.config.ts
-  ├── tsconfig.json
-  ├── README.md
-```
-
-## Configurar o CLI
-
-Arquivo cli/index.js
-
-```js
-#!/usr/bin/env node
-
-const fs = require("fs");
-const path = require("path");
-
-const components = ["button"];
-
-const args = process.argv.slice(2);
-const command = args[0]; // Ex: 'add'
-const component = args[1]; // Ex: 'button'
-
-function copyTemplate(templatePath, targetPath) {
-  fs.mkdirSync(targetPath, { recursive: true });
-
-  fs.readdirSync(templatePath).forEach((file) => {
-    const srcFile = path.join(templatePath, file);
-    const destFile = path.join(targetPath, file);
-
-    fs.copyFileSync(srcFile, destFile);
-  });
-}
-
-if (command === "add" && components.includes(component)) {
-  const templatePath = path.join(__dirname, "../templates", component);
-  const targetPath = path.join(process.cwd(), "src/components", component);
-
-  if (fs.existsSync(targetPath)) {
-    console.log(`⚠️ O componente "${component}" já existe.`);
-  } else {
-    copyTemplate(templatePath, targetPath);
-    console.log(`✅ Componente "${component}" adicionado com sucesso!`);
-  }
-} else {
-  console.log("❌ Comando inválido.");
-  console.log('Exemplo: npx meu-cli add button');
-}
-```
-
-## Criando Template do Componente
-
-Template: templates/Button/Button.tsx
-
-```js
-import React from "react";
-import styled from "styled-components";
-
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: () => void;
-  variant?: "primary" | "secondary";
-}
-
-const StyledButton = styled.button<ButtonProps>`
-  padding: 10px 20px;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-
-  background-color: ${(props) =>
-    props.variant === "primary" ? "#007BFF" : "#6C757D"};
-  color: white;
-
-  &:hover {
-    opacity: 0.9;
-  }
-`;
-
-const Button: React.FC<ButtonProps> = ({ children, onClick, variant = "primary" }) => {
-  return (
-    <StyledButton onClick={onClick} variant={variant}>
-      {children}
-    </StyledButton>
-  );
-};
-
-export default Button;
-```
-
-Template: templates/Button/styles.ts
-
-```css
-import styled from "styled-components";
-
-export const StyledButton = styled.button`
-  padding: 10px 20px;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-  background-color: #007bff;
-  color: white;
-
-  &:hover {
-    opacity: 0.9;
-  }
-`;
-```
-
-# Usando o CLI no Projeto React com Vite
-
-## Instalar o CLI
+## Instalar
 
 ```js 
-npm install -g granto-umbrella-components
+npm install @granto-umbrella/umbrella-components
 ```
 
-## Adicionar um Componente
-
-```
-npx granto-umbrella-components add button
-```
-
-Este comando copia o template do Button para o diretório do projeto em src/components/button/.
-
-# Uso no Projeto React com Vite
+# Uso no Projeto React
 
 ## Importar o Componente
 
 ```js
-import { Button } from "./components/button";
+import { Button } from "@granto-umbrella/umbrella-components";
 
 function App() {
   return (
@@ -155,9 +24,4 @@ function App() {
 }
 
 export default App;
-```
-
-## Rodar o Projeto
-```js
-npm run dev
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -33,7 +33,7 @@
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-label": "^2.1.3",
-    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-radio-group": "^1.2.4",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.488.0",

package/src/components/atoms/DatePickerInput/DatePicker.styles.ts

@@ -17,7 +17,9 @@ registerLocale("pt-BR", ptBR);
 
 // global overrides for the popup calendar
 export const DatePickerGlobalStyles = createGlobalStyle`
-  /* … your existing .react-datepicker* overrides … */
+  .react-datepicker-wrapper {
+    display: flex !important;
+  }
 `;
 
 // wrapper around input + icon
@@ -30,10 +32,11 @@ export const InputWrapper = styled.div`
 export const IconWrapper = styled.div`
   position: absolute;
   top: 50%;
-  left: ${semanticSizes.global.padding.lg};
+  left: 16px;
   transform: translateY(-50%);
   pointer-events: none;
-  color: ${semanticColors.neutral[500]};
+  color: ${semanticColors.global.text.onSurface.enabled};
+  z-index: 1;
 `;
 
 // styled input itself; we add extra left‐padding for the icon
@@ -42,9 +45,7 @@ export const StyledDatePicker = styled(
 )`
   width: 100%;
   padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  padding-left: calc(
-    ${semanticSizes.global.padding.lg} ${primitiveSizes.size.x4}
-  );
+  padding-left: 42px;
   border: 1px solid ${semanticColors.neutral[300]};
   border-radius: ${semanticRadius.global.radius.md};
   font-size: ${typographyTokens.fontSizes.labelM};

package/src/components/atoms/DatePickerInput/DatePickerInput.tsx

@@ -14,7 +14,7 @@ import "react-datepicker/dist/react-datepicker.css";
 
 interface DatePickerInputProps {
   mode?: "single" | "range";
-  selected: Date | [Date, Date];
+  selected: Date | [Date, Date] | null;
   onChange: (date: Date | [Date, Date]) => void;
   minDate?: Date;
   maxDate?: Date;
@@ -41,7 +41,6 @@ export const DatePickerInput: React.FC<DatePickerInputProps> = ({
     <DatePickerGlobalStyles />
 
     <InputWrapper>
-      {/* the calendar icon */}
       <IconWrapper>
         <CalendarIcon size={16} />
       </IconWrapper>
@@ -50,9 +49,9 @@ export const DatePickerInput: React.FC<DatePickerInputProps> = ({
         <StyledDatePicker
           locale="pt-BR"
           selectsRange
-          startDate={(selected as [Date, Date])[0] || undefined}
-          endDate={(selected as [Date, Date])[1] || undefined}
-          selected={(selected as [Date, Date])[0] || undefined}
+          startDate={(selected as [Date, Date])[0] || undefined || null}
+          endDate={(selected as [Date, Date])[1] || undefined || null}
+          selected={(selected as [Date, Date])[0] || undefined || null}
           onChange={(d) => onChange(d as [Date, Date])}
           minDate={minDate}
           maxDate={maxDate}

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

@@ -1,44 +1,11 @@
-import { semanticColors, semanticShadows } from "../../../styles/tokens";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import styled from "styled-components";
-import { Circle } from "lucide-react";
+import { semanticSizes } from "../../../styles/tokens";
 
-export const StyledRadioGroup = styled(RadioGroupPrimitive.Root)`
+export const Container = styled.div<{
+  orientation?: "horizontal" | "vertical";
+}>`
   display: flex;
-  flex-direction: row;
-`;
-
-export const StyledRadioGroupItem = styled(RadioGroupPrimitive.Item)`
-  display: none;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px ${semanticShadows.shadow.none};
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-
-export const StyledIndicator = styled(RadioGroupPrimitive.Indicator)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 9999px;
-  color: ${semanticColors.branding.surface.enabled};
-`;
-
-export const StyledCircle = styled(Circle)`
-  width: 0.625rem;
-  height: 0.625rem;
-  fill: currentColor;
-  color: currentColor;
+  flex-direction: ${({ orientation = "horizontal" }) =>
+    orientation === "vertical" ? "column" : "row"};
+  gap: ${semanticSizes.global.padding.sm};
 `;

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.tsx

@@ -1,32 +1,43 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import {
-  StyledRadioGroup,
-  StyledRadioGroupItem,
-  StyledIndicator,
-  StyledCircle,
-} from "./RadioBoxGroup.styles";
+import React from "react";
+import { Container } from "./RadioBoxGroup.styles";
+import RadioButton from "../../../components/atoms/RadioButton/RadioButton";
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ ...props }, ref) => {
-  return <StyledRadioGroup {...props} ref={ref} />;
-});
-RadioGroup.displayName = "RadioGroup";
+export interface Option {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
 
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ ...props }, ref) => {
+export interface RadioBoxGroupProps {
+  name: string;
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+  orientation?: "horizontal" | "vertical";
+}
+
+const RadioBoxGroup: React.FC<RadioBoxGroupProps> = ({
+  name,
+  options,
+  value,
+  onChange,
+  orientation = "horizontal",
+}) => {
   return (
-    <StyledRadioGroupItem {...props} ref={ref}>
-      <StyledIndicator>
-        <StyledCircle />
-      </StyledIndicator>
-    </StyledRadioGroupItem>
+    <Container orientation={orientation}>
+      {options.map((opt) => (
+        <RadioButton
+          key={opt.value}
+          name={name}
+          value={opt.value}
+          label={opt.label}
+          checked={opt.value === value}
+          disabled={opt.disabled}
+          onChange={(e) => onChange(e.currentTarget.value)}
+        />
+      ))}
+    </Container>
   );
-});
-RadioGroupItem.displayName = "RadioGroupItem";
+};
 
-export { RadioGroup, RadioGroupItem };
+export default RadioBoxGroup;

package/src/components/organisms/CalendarPopover/CalendarPopover.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from "react";
 import { format } from "date-fns";
-import { Calendar, CalendarIcon } from "lucide-react";
+import { CalendarIcon } from "lucide-react";
 
 import { cn } from "../../../lib/utils";
 import { FormControl } from "../Form/Form";
@@ -10,6 +11,7 @@ import {
   PopoverTrigger,
 } from "../../molecules/Popover/Popover";
 import Button from "../../atoms/Button/Button";
+import { Calendar } from "../../../components/molecules/Calendar/Calendar";
 
 export type DatePickerFieldProps = {
   formField: {
@@ -43,8 +45,9 @@ const DatePickerField: React.FC<DatePickerFieldProps> = ({ formField }) => {
         <Calendar
           mode="single"
           selected={formField.value}
+          required
           onSelect={formField.onChange}
-          disabled={(date) =>
+          disabled={(date: any) =>
             date > new Date() || date < new Date("1900-01-01")
           }
           initialFocus

package/src/index.ts

@@ -28,10 +28,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "./components/molecules/Popover/Popover";
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "./components/molecules/RadioBoxGroup/RadioBoxGroup";
+import RadioGroup from "./components/molecules/RadioBoxGroup/RadioBoxGroup";
 import AlertDialog from "./components/organisms/AlertDialog/AlertDialog";
 import {
   DialogFooter,
@@ -88,7 +85,6 @@ export {
   PopoverTrigger,
   RadioButton,
   RadioGroup,
-  RadioGroupItem,
   Select,
   StyledDialogClose,
   StyledDialogOverlay,