sprint-asia-custom-component 0.1.1 → 0.1.2

package/dist/index.js

@@ -8,12 +8,40 @@
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-  const Button = () => {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "bg-warning500 p-4"
-    }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "text-primary500"
-    }, "Button custom"));
+  const Button = ({
+    title = "Button",
+    type = "wrap",
+    isActive = true,
+    size = "large",
+    onClick = () => {}
+  }) => {
+    const [isPressed, setIsPressed] = React.useState(false);
+    const handleButtonPress = () => {
+      setIsPressed(true);
+    };
+    const handleButtonRelease = () => {
+      setIsPressed(false);
+    };
+    const handleClick = () => {
+      onClick();
+    };
+    return /*#__PURE__*/React__default["default"].createElement("button", {
+      className: `
+            ${isPressed && isActive ? 'bg-primary700 text-white' : isActive ? 'bg-primary500 hover:bg-primary600 text-white cursor-pointer' : 'bg-neutral30 text-neutral80 cursor-default'} 
+            ${type === "full" && "w-full"}
+            ${size === "small" && "text-sm h-7"}
+            ${size === "medium" && "text-md h-8"}
+            ${size === "large" && "text-lg h-10"}
+            ${size === "very large" && "text-xl h-12"}
+            ${size === "extra very large" && "text-2xl h-14"}
+            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
+      disabled: !isActive,
+      onClick: handleClick,
+      onMouseDown: handleButtonPress,
+      onMouseUp: handleButtonRelease,
+      onTouchStart: handleButtonPress,
+      onTouchEnd: handleButtonRelease
+    }, title);
   };
 
   exports.Button = Button;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

package/src/components/Button/index.js

@@ -1,11 +1,48 @@
-import React from 'react'
+import React, { useState } from 'react';
+
+const Button = ({
+    title = "Button",
+    type = "wrap",
+    isActive = true,
+    size = "large",
+    onClick = () => {}
+}) => {
+    const [isPressed, setIsPressed] = useState(false);
+
+    const handleButtonPress = () => {
+        setIsPressed(true);
+    };
+
+    const handleButtonRelease = () => {
+        setIsPressed(false);
+    };
+
+    const handleClick = () => {
+        onClick();
+    };
 
-const Button = () => {
   return (
-    <div className='bg-warning500 p-4'>
-        <p className='text-primary500'>Button custom</p>
-    </div>
-  )
-}
+    <button
+        className={`
+            ${(isPressed && isActive) ? 'bg-primary700 text-white' : (isActive ? 'bg-primary500 hover:bg-primary600 text-white cursor-pointer' : 'bg-neutral30 text-neutral80 cursor-default')} 
+            ${type === "full" && "w-full"}
+            ${size === "small" && "text-sm h-7"}
+            ${size === "medium" && "text-md h-8"}
+            ${size === "large" && "text-lg h-10"}
+            ${size === "very large" && "text-xl h-12"}
+            ${size === "extra very large" && "text-2xl h-14"}
+            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
+        }
+        disabled={!isActive}
+        onClick={handleClick}
+        onMouseDown={handleButtonPress}
+        onMouseUp={handleButtonRelease}
+        onTouchStart={handleButtonPress}
+        onTouchEnd={handleButtonRelease}
+    >
+        {title}
+    </button>
+  );
+};
 
-export default Button
+export default Button;