@granto-umbrella/umbrella-components 2.0.0 → 2.0.2

package/package.json

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

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

@@ -1,10 +1,8 @@
-import { Radius } from "../../../types/radius.types";
-
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "sm" | "md" | "lg";
   variant?: "primary" | "outline" | "danger" | "ghost" | "alert";
-  radius?: Radius;
+  radius?: string;
   isLoading?: boolean;
   leftIcon?: string;
   rightIcon?: string;

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

@@ -16,38 +16,35 @@ export const CheckboxWrapper = styled.label`
   user-select: none;
 `;
 
-export const StyledCheckbox = styled.input.attrs({ type: "checkbox" })`
-  width: ${semanticSizes.global.padding.xl};
-  height: ${semanticSizes.global.padding.xl};
+export const StyledCheckbox = styled.input`
+  width: ${semanticSizes.global.padding.lg};
+  height: ${semanticSizes.global.padding.lg};
   border: 2px solid ${semanticColors.neutral[400]};
   border-radius: ${semanticRadius.global.radius.sm};
   appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
   cursor: pointer;
   position: relative;
+  transition: all 0.2s ease-in-out;
 
   &:checked {
     background: ${semanticColors.branding.surface.enabled};
     border-color: ${semanticColors.branding.surface.enabled};
   }
-
-  &:disabled {
-    background: ${semanticColors.neutral[200]};
-    border-color: ${semanticColors.neutral[300]};
-    cursor: not-allowed;
-  }
 `;
 
-export const CheckboxIconWrapper = styled.span`
-  position: absolute;
+export const CheckboxIconWrapper = styled.div<{ checked?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
+  position: absolute;
+  width: ${semanticSizes.global.padding.lg};
+  height: ${semanticSizes.global.padding.lg};
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
   pointer-events: none;
-  color: ${semanticColors.base.background};
+  color: ${({ checked }) =>
+    checked ? semanticColors.base.background : "transparent"};
 `;
 
 export const CheckboxLabel = styled.span`
@@ -55,18 +52,21 @@ export const CheckboxLabel = styled.span`
   color: ${semanticColors.base.text};
 `;
 
-export const CheckboxGroup = styled.div`
+export const CheckboxGroupWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${semanticSizes.global.gap.sm};
 `;
 
-export const CheckboxGroupHorizontal = styled(CheckboxGroup)`
+export const CheckboxGroupHorizontal = styled(CheckboxGroupWrapper)`
   flex-direction: row;
   flex-wrap: wrap;
 `;
 
 export const SelectAllWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${semanticSizes.global.gap.sm};
   font-weight: bold;
   font-size: ${typographyTokens.fontSizes.labelS};
 `;

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -1,97 +1,35 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { Check } from "@phosphor-icons/react";
 import {
   CheckboxWrapper,
   StyledCheckbox,
   CheckboxLabel,
-  CheckboxGroupHorizontal,
-  SelectAllWrapper,
   CheckboxIconWrapper,
 } from "./Checkbox.styles";
-import { CheckboxGroupProps, CheckboxProps } from "./Checkbox.types";
+import { CheckboxProps } from "./Checkbox.types";
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   label,
   checked,
+  onChange,
+  disabled = false,
   ...props
 }) => {
   return (
-    <CheckboxWrapper>
-      <StyledCheckbox checked={checked} {...props} />
+    <CheckboxWrapper disabled={disabled}>
+      <StyledCheckbox
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        {...props}
+      />
       {checked && (
         <CheckboxIconWrapper>
-          <Check size={14} weight="bold" />
+          <Check size={8} weight="bold" />
         </CheckboxIconWrapper>
       )}
       {label && <CheckboxLabel>{label}</CheckboxLabel>}
     </CheckboxWrapper>
   );
 };
-
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
-  options = [],
-  selected = [],
-  setSelected,
-  direction = "vertical",
-}) => {
-  console.log("1", options);
-  const handleChange = useCallback(
-    (value: string) => {
-      setSelected((prev) =>
-        prev.includes(value)
-          ? prev.filter((v) => v !== value)
-          : [...prev, value]
-      );
-    },
-    [setSelected]
-  );
-
-  return (
-    <CheckboxWrapper
-      as={direction === "horizontal" ? CheckboxGroupHorizontal : CheckboxGroup}
-    >
-      {options.length > 0 ? (
-        options.map((option) => (
-          <Checkbox
-            key={option.value}
-            label={option.label}
-            checked={selected.includes(option.value)}
-            onChange={() => handleChange(option.value)}
-          />
-        ))
-      ) : (
-        <span>Nenhuma opção disponível</span>
-      )}
-    </CheckboxWrapper>
-  );
-};
-
-export const CheckboxSelectAll: React.FC<CheckboxGroupProps> = ({
-  options = [],
-  selected = [],
-  setSelected,
-}) => {
-  console.log("2", options);
-  const allSelected = options.length > 0 && selected.length === options.length;
-  const isIndeterminate = selected.length > 0 && !allSelected;
-
-  const handleSelectAll = useCallback(() => {
-    setSelected(allSelected ? [] : options.map((option) => option.value));
-  }, [allSelected, options, setSelected]);
-
-  return (
-    <SelectAllWrapper>
-      <Checkbox
-        label="Selecionar todos"
-        checked={allSelected}
-        indeterminate={isIndeterminate}
-        onChange={handleSelectAll}
-      />
-      <CheckboxGroup
-        options={options}
-        selected={selected}
-        setSelected={setSelected}
-      />
-    </SelectAllWrapper>
-  );
-};

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

@@ -1,12 +1,14 @@
 export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
-  indeterminate?: boolean;
+  checked?: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
 }
 
 export interface CheckboxGroupProps {
   options: { label: string; value: string }[];
   selected: string[];
-  setSelected: (selected: string[] | ((prev: string[]) => string[])) => void;
+  setSelected: (values: string[]) => void;
   direction?: "vertical" | "horizontal";
 }

package/src/components/atoms/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroupProps } from "./Checkbox.types";
+import { CheckboxGroupWrapper } from "./Checkbox.styles";
+
+export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+  options,
+  selected,
+  setSelected,
+  direction = "vertical",
+}) => {
+  const handleChange = (value: string) => {
+    const newSelected = selected.includes(value)
+      ? selected.filter((v: string) => v !== value)
+      : [...selected, value];
+    setSelected(newSelected);
+  };
+
+  return (
+    <CheckboxGroupWrapper direction={direction}>
+      {options.map((option) => (
+        <Checkbox
+          key={option.value}
+          label={option.label}
+          checked={selected.includes(option.value)}
+          onChange={() => handleChange(option.value)}
+        />
+      ))}
+    </CheckboxGroupWrapper>
+  );
+};

package/src/components/atoms/Checkbox/CheckboxSelectAll.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroup } from "./CheckboxGroup";
+import { CheckboxGroupProps } from "./Checkbox.types";
+import { SelectAllWrapper } from "./Checkbox.styles";
+
+export const CheckboxSelectAll: React.FC<CheckboxGroupProps> = ({
+  options,
+  selected,
+  setSelected,
+}) => {
+  const allSelected = selected.length === options.length;
+
+  const handleSelectAll = () => {
+    setSelected(allSelected ? [] : options.map((option) => option.value));
+  };
+
+  return (
+    <SelectAllWrapper>
+      <Checkbox
+        label="Selecionar todos"
+        checked={allSelected}
+        onChange={handleSelectAll}
+      />
+      <CheckboxGroup
+        options={options}
+        selected={selected}
+        setSelected={setSelected}
+      />
+    </SelectAllWrapper>
+  );
+};

package/src/index.ts

@@ -4,9 +4,32 @@ import Button from "./components/atoms/Button";
 import Icon from "./components/atoms/Icon";
 import Input from "./components/atoms/Input";
 import Select from "./components/atoms/Select";
+import AlertDialog from "./components/organisms/AlertDialog/AlertDialog";
+import Badge from "./components/atoms/Badge/Badge";
+import Breadcrumb from "./components/atoms/Breadcrumb/Breadcrumb";
+import RadioButton from "./components/atoms/RadioButton/RadioButton";
+import { Checkbox } from "./components/atoms/Checkbox/Checkbox";
+import Switch from "./components/atoms/Switch/Switch";
+import Text from "./components/atoms/Text";
+import Textarea from "./components/atoms/Textarea/Textarea";
+import ButtonGroup from "./components/molecules/ButtonGroup";
 
 // Export all components
-export { Button, Icon, Input, Select };
+export {
+  Button,
+  Icon,
+  Input,
+  Select,
+  AlertDialog,
+  Badge,
+  Breadcrumb,
+  RadioButton,
+  Checkbox,
+  Switch,
+  Text,
+  Textarea,
+  ButtonGroup,
+};
 
 // Export all tokens from a new file
 export { primitiveColors, semanticColors } from "./styles/tokens/colors";