rharuow-ds 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,26 @@
+# rharuow-ds
+
+Design System em React com integração a React Hook Form, Tailwind CSS e shadcn/ui.
+
+## Instalação
+
+```bash
+npm install rharuow-ds
+```
+
+## Uso básico
+
+```tsx
+import { Button, Input } from "rharuow-ds";
+
+<Button variant="default">Clique aqui</Button>
+<Input label="E-mail" name="email" />
+```
+
+## Documentação
+
+Acesse a documentação interativa dos componentes em [GitHub Pages](#) _(link será atualizado após o deploy)_.
+
+---
+
+Desenvolvido por Harysson.

package/package.json

@@ -1,22 +1,34 @@
 {
   "name": "rharuow-ds",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "1.0.2",
+  "main": "dist/rharuow-ds.cjs.js",
+  "module": "dist/rharuow-ds.es.js",
+  "types": "dist/types/src/components/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/rharuow-ds.es.js",
+      "require": "./dist/rharuow-ds.cjs.js",
+      "types": "./dist/types/src/components/index.d.ts"
+    }
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "storybook": "storybook dev -p 6006",
+    "deploy-storybook": "npx gh-pages -d storybook-static",
     "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.59.0"
+  },
   "dependencies": {
     "clsx": "^2.1.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-hook-form": "^7.59.0",
     "shadcn-ui": "^0.9.5"
   },
   "devDependencies": {
@@ -25,6 +37,7 @@
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
     "autoprefixer": "^10.4.21",
+    "gh-pages": "^6.3.0",
     "postcss": "^8.5.6",
     "storybook": "^9.0.14",
     "tailwindcss": "^3.4.3",
@@ -32,7 +45,6 @@
   },
   "files": [
     "dist",
-    "src",
     "package.json",
     "README.md"
   ]

package/src/components/Button.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { cn } from "../lib/utils";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "outline";
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = "default",
-  className = "",
-  ...props
-}) => {
-  const base = "px-4 py-2 rounded font-medium transition";
-  const variants = {
-    default: "bg-blue-600 text-white hover:bg-blue-700",
-    outline: "border border-blue-600 text-blue-600 bg-white hover:bg-blue-50",
-  };
-  return (
-    <button className={cn(base, variants[variant], className)} {...props}>
-      {children}
-    </button>
-  );
-};

package/src/components/Input.tsx

@@ -1,104 +0,0 @@
-"use client";
-import * as React from "react";
-
-import { cn } from "../lib/utils";
-import { useFormContext, useWatch } from "react-hook-form";
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export interface CustomProps {
-  label?: string;
-  Icon?: React.ElementType;
-  iconClassName?: string;
-  containerClassName?: string;
-  iconAction?: React.MouseEventHandler<HTMLDivElement>;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps & CustomProps>(
-  (
-    {
-      className,
-      type = "text",
-      label,
-      onFocus,
-      onBlur,
-      Icon,
-      iconClassName,
-      iconAction,
-      containerClassName,
-      ...props
-    },
-    ref
-  ) => {
-    const [focused, setFocused] = React.useState(false);
-
-    const form = useFormContext();
-    const control = form?.control;
-    const valueWatch =
-      control && props.name
-        ? useWatch({ control, name: String(props.name) })
-        : undefined;
-
-    const value = props.value ?? valueWatch ?? "";
-    const error = form?.formState?.errors?.[props.name as string]?.message;
-
-    // Floating label: label sobe se input está focado ou tem valor
-    const isFloating = focused || !!value;
-
-    return (
-      <div className={cn("relative", containerClassName)}>
-        <input
-          id={props.id || props.name}
-          type={type}
-          className={cn(
-            "peer flex h-12 w-full border border-input rounded-md bg-transparent px-3 pt-6 pb-2 text-sm text-white placeholder-transparent transition focus:outline-none focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          )}
-          onFocus={(event) => {
-            setFocused(true);
-            onFocus && onFocus(event);
-          }}
-          onBlur={(event) => {
-            setFocused(false);
-            onBlur && onBlur(event);
-          }}
-          ref={ref}
-          {...props}
-        />
-        {label && (
-          <label
-            htmlFor={props.id || props.name}
-            className={cn(
-              "absolute left-3 top-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
-              isFloating
-                ? "scale-90 -translate-y-3 text-xs text-blue-400"
-                : "scale-100 translate-y-0"
-            )}
-          >
-            {label}
-          </label>
-        )}
-        {Icon && (
-          <div
-            className={cn(
-              "absolute top-1/2 right-3 -translate-y-1/2 text-white",
-              iconClassName
-            )}
-            onClick={iconAction}
-          >
-            <Icon />
-          </div>
-        )}
-        {error && (
-          <span className="text-red-500 text-xs mt-1 block">
-            {error as string}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from "./Button";
-export * from "./Input";

package/src/lib/utils.ts

@@ -1,5 +0,0 @@
-import clsx, { ClassValue } from "clsx";
-
-export function cn(...inputs: ClassValue[]) {
-  return clsx(...inputs);
-}

package/src/stories/Button.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  tags: ["autodocs"],
-};
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: "Botão padrão",
-    variant: "default",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    children: "Botão outline",
-    variant: "outline",
-  },
-};

package/src/stories/Input.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "../components/Input";
-import { FormProvider, useForm } from "react-hook-form";
-
-const meta: Meta<typeof Input> = {
-  title: "Components/Input",
-  component: Input,
-  tags: ["autodocs"],
-};
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-const Template = (args: any) => {
-  const methods = useForm();
-  return (
-    <FormProvider {...methods}>
-      <Input {...args} name="email" />
-    </FormProvider>
-  );
-};
-
-export const Default: Story = {
-  render: Template,
-  args: {
-    label: "E-mail",
-    placeholder: "Digite seu e-mail",
-  },
-};

package/src/styles/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;