@granto-umbrella/umbrella-components 1.3.2 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -12,7 +12,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "prepublish": "npm run bump:patch && npm run build && npm run build-storybook && git add * && git commit -m 'chore: release' && git push && git push --tags && npm publish",
+    "prepublish": "npm run build && npm run build-storybook && git add * && git commit -m 'chore: release' && git push && git push --tags && npm publish",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -40,6 +40,10 @@
     "@chromatic-com/storybook": "3.2.3",
     "@eslint/js": "^9.17.0",
     "@storybook/react-vite": "8.4.7",
+    "@storybook/addon-onboarding": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-actions": "8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

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

@@ -92,27 +92,27 @@ const buttonVariants = {
 };
 
 export const StyledButton = styled.button<{
-  size: keyof typeof buttonSizes;
-  variant: keyof typeof buttonVariants;
-  radius: keyof typeof semanticRadiusBorders;
-  width?: string;
-  height?: string;
+  $size: keyof typeof buttonSizes;
+  $variant: keyof typeof buttonVariants;
+  $radius: keyof typeof semanticRadiusBorders;
+  $width?: string;
+  $height?: string;
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
-  border-radius: ${({ radius }) => semanticRadiusBorders[radius]};
+  border-radius: ${({ $radius }) => semanticRadiusBorders[$radius]};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
   gap: ${semanticSizes.md};
 
-  ${({ size }) => buttonSizes[size]}
-  ${({ variant }) => buttonVariants[variant]}
+  ${({ $size }) => buttonSizes[$size]}
+  ${({ $variant }) => buttonVariants[$variant]}
 
-  width: ${({ width }) => width || "auto"};
-  height: ${({ height }) => height || "auto"};
+  width: ${({ $width }) => $width || "auto"};
+  height: ${({ $height }) => $height || "auto"};
 
   &:disabled {
     cursor: not-allowed;

package/src/components/atoms/Button/Button.tsx

@@ -22,11 +22,11 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <StyledButton
-      size={size}
-      variant={variant}
-      radius={radius}
-      width={width}
-      height={height}
+      $size={size}
+      $variant={variant}
+      $radius={radius}
+      $width={width}
+      $height={height}
       {...props}
     >
       {isLoading ? (

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { InputProps } from "./Input.types";
 import {
   Container,
@@ -9,46 +9,66 @@ import {
   SupportText,
 } from "./Input.styles";
 
-const Input: React.FC<InputProps> = ({
-  type = "text",
-  placeholder = "Placeholder",
-  value,
-  onChange,
-  error = false,
-  disabled = false,
-  icon,
-  label,
-  supportText,
-  size = "md",
-  radius = "--border-1",
-  shadow = "shadow",
-  style,
-  register,
-}) => {
-  return (
-    <Container>
-      {label && <Label>{label}</Label>}
-      <InputWrapper
-        $error={error}
-        $disabled={disabled}
-        $size={size}
-        $radius={radius}
-        $shadow={shadow}
-      >
-        {icon && <Icon>{icon}</Icon>}
-        <StyledInput
-          {...register}
-          style={style}
-          type={type}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          disabled={disabled}
-        />
-      </InputWrapper>
-      {supportText && <SupportText $error={error}>{supportText}</SupportText>}
-    </Container>
-  );
-};
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | null | undefined)[]
+): React.RefCallback<T> {
+  return (value: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = "text",
+      placeholder = "Placeholder",
+      value,
+      onChange,
+      error = false,
+      disabled = false,
+      icon,
+      label,
+      supportText,
+      size = "md",
+      radius = "--border-1",
+      shadow = "shadow",
+      style,
+      register,
+    },
+    ref
+  ) => {
+    return (
+      <Container>
+        {label && <Label>{label}</Label>}
+        <InputWrapper
+          $error={error}
+          $disabled={disabled}
+          $size={size}
+          $radius={radius}
+          $shadow={shadow}
+        >
+          {icon && <Icon>{icon}</Icon>}
+          <StyledInput
+            {...(register || {})}
+            ref={mergeRefs(ref, register ? register.ref : null)}
+            style={style}
+            type={type}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        </InputWrapper>
+        {supportText && <SupportText $error={error}>{supportText}</SupportText>}
+      </Container>
+    );
+  }
+);
 
 export default Input;