react-native-sj-ui 0.1.1 → 0.1.3

package/lib/module/components/Button.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
+import ViewCard from "./ViewCard.js";
+import TextView from "./TextView.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const COLORS = {
+  primary: '#2563EB',
+  secondary: '#6B7280',
+  success: '#16A34A',
+  danger: '#DC2626',
+  warning: '#D97706',
+  info: '#0891B2'
+};
+const Button = ({
+  title,
+  children,
+  variant = 'solid',
+  colorScheme = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  borderRadius = 8,
+  onPress,
+  ...props
+}) => {
+  const color = COLORS[colorScheme];
+  const sizeStyle = {
+    sm: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      fontSize: 14
+    },
+    md: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      fontSize: 16
+    },
+    lg: {
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      fontSize: 18
+    }
+  }[size];
+  let backgroundColor = color;
+  let borderColor = color;
+  let borderWidth = 0;
+  let textColor = '#fff';
+  switch (variant) {
+    case 'outline':
+      backgroundColor = 'transparent';
+      borderColor = color;
+      borderWidth = 1;
+      textColor = color;
+      break;
+    case 'ghost':
+      backgroundColor = 'transparent';
+      borderColor = 'transparent';
+      borderWidth = 0;
+      textColor = color;
+      break;
+  }
+  if (disabled) {
+    backgroundColor = '#D1D5DB';
+    borderColor = '#D1D5DB';
+    textColor = '#6B7280';
+  }
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    ...props,
+    activeOpacity: 0.8,
+    disabled: disabled || loading,
+    onPress: onPress,
+    children: /*#__PURE__*/_jsx(ViewCard, {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      width: fullWidth ? '100%' : undefined,
+      paddingVertical: sizeStyle.paddingVertical,
+      paddingHorizontal: sizeStyle.paddingHorizontal,
+      borderRadius: borderRadius,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      borderWidth: borderWidth,
+      opacity: disabled ? 0.6 : 1,
+      children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: variant === 'solid' ? '#fff' : color,
+        size: "small"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [leftIcon, title && /*#__PURE__*/_jsx(TextView, {
+          textColor: textColor,
+          fontWeight: "600",
+          fontSize: sizeStyle.fontSize,
+          children: title
+        }), children, rightIcon]
+      })
+    })
+  });
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/lib/module/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActivityIndicator","TouchableOpacity","ViewCard","TextView","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","COLORS","primary","secondary","success","danger","warning","info","Button","title","children","variant","colorScheme","size","loading","disabled","leftIcon","rightIcon","fullWidth","borderRadius","onPress","props","color","sizeStyle","sm","paddingVertical","paddingHorizontal","fontSize","md","lg","backgroundColor","borderColor","borderWidth","textColor","activeOpacity","flexDirection","alignItems","justifyContent","gap","width","undefined","opacity","fontWeight"],"sourceRoot":"../../../src","sources":["components/Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/index.js

@@ -5,5 +5,6 @@ import Flex from "./Flex.js";
 import Row from "./Row.js";
 import TextView from "./TextView.js";
 import ViewCard from "./ViewCard.js";
-export { Column, Flex, Row, TextView, ViewCard };
+import Button from "./Button.js";
+export { Column, Flex, Row, TextView, ViewCard, Button };
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Column","Flex","Row","TextView","ViewCard"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,aAAU;AAC7B,OAAOC,IAAI,MAAM,WAAQ;AACzB,OAAOC,GAAG,MAAM,UAAO;AACvB,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,QAAQ,MAAM,eAAY;AAEjC,SAASJ,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ","ignoreList":[]}
+{"version":3,"names":["Column","Flex","Row","TextView","ViewCard","Button"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,aAAU;AAC7B,OAAOC,IAAI,MAAM,WAAQ;AACzB,OAAOC,GAAG,MAAM,UAAO;AACvB,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,MAAM,MAAM,aAAU;AAE7B,SAASL,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM","ignoreList":[]}

package/lib/typescript/src/components/Button.d.ts

@@ -0,0 +1,20 @@
+import { type TouchableOpacityProps } from 'react-native';
+type ButtonVariant = 'solid' | 'outline' | 'ghost';
+type ButtonColorScheme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends TouchableOpacityProps {
+    title?: string;
+    children?: React.ReactNode;
+    variant?: ButtonVariant;
+    colorScheme?: ButtonColorScheme;
+    size?: ButtonSize;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    borderRadius?: number;
+    onPress?: () => void;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/lib/typescript/src/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAItB,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnD,KAAK,iBAAiB,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,WAAY,SAAQ,qBAAqB;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8GjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -3,5 +3,6 @@ import Flex from './Flex.js';
 import Row from './Row.js';
 import TextView from './TextView.js';
 import ViewCard from './ViewCard.js';
-export { Column, Flex, Row, TextView, ViewCard };
+import Button from './Button.js';
+export { Column, Flex, Row, TextView, ViewCard, Button };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,WAAQ,CAAC;AAC1B,OAAO,GAAG,MAAM,UAAO,CAAC;AACxB,OAAO,QAAQ,MAAM,eAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,eAAY,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,WAAQ,CAAC;AAC1B,OAAO,GAAG,MAAM,UAAO,CAAC;AACxB,OAAO,QAAQ,MAAM,eAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,eAAY,CAAC;AAClC,OAAO,MAAM,MAAM,aAAU,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sj-ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "The ui library for react native application.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Button.tsx

@@ -0,0 +1,162 @@
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  type TouchableOpacityProps,
+} from 'react-native';
+import ViewCard from './ViewCard';
+import TextView from './TextView';
+
+type ButtonVariant = 'solid' | 'outline' | 'ghost';
+
+type ButtonColorScheme =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info';
+
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends TouchableOpacityProps {
+  title?: string;
+  children?: React.ReactNode;
+
+  variant?: ButtonVariant;
+  colorScheme?: ButtonColorScheme;
+  size?: ButtonSize;
+
+  loading?: boolean;
+
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+
+  fullWidth?: boolean;
+
+  borderRadius?: number;
+
+  onPress?: () => void;
+}
+
+const COLORS = {
+  primary: '#2563EB',
+  secondary: '#6B7280',
+  success: '#16A34A',
+  danger: '#DC2626',
+  warning: '#D97706',
+  info: '#0891B2',
+};
+
+const Button: React.FC<ButtonProps> = ({
+  title,
+  children,
+  variant = 'solid',
+  colorScheme = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  borderRadius = 8,
+  onPress,
+  ...props
+}) => {
+  const color = COLORS[colorScheme];
+
+  const sizeStyle = {
+    sm: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      fontSize: 14,
+    },
+    md: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      fontSize: 16,
+    },
+    lg: {
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      fontSize: 18,
+    },
+  }[size];
+
+  let backgroundColor = color;
+  let borderColor = color;
+  let borderWidth = 0;
+  let textColor = '#fff';
+
+  switch (variant) {
+    case 'outline':
+      backgroundColor = 'transparent';
+      borderColor = color;
+      borderWidth = 1;
+      textColor = color;
+      break;
+
+    case 'ghost':
+      backgroundColor = 'transparent';
+      borderColor = 'transparent';
+      borderWidth = 0;
+      textColor = color;
+      break;
+  }
+
+  if (disabled) {
+    backgroundColor = '#D1D5DB';
+    borderColor = '#D1D5DB';
+    textColor = '#6B7280';
+  }
+
+  return (
+    <TouchableOpacity
+      {...props}
+      activeOpacity={0.8}
+      disabled={disabled || loading}
+      onPress={onPress}
+    >
+      <ViewCard
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
+        gap={8}
+        width={fullWidth ? '100%' : undefined}
+        paddingVertical={sizeStyle.paddingVertical}
+        paddingHorizontal={sizeStyle.paddingHorizontal}
+        borderRadius={borderRadius}
+        backgroundColor={backgroundColor}
+        borderColor={borderColor}
+        borderWidth={borderWidth}
+        opacity={disabled ? 0.6 : 1}
+      >
+        {loading ? (
+          <ActivityIndicator
+            color={variant === 'solid' ? '#fff' : color}
+            size="small"
+          />
+        ) : (
+          <>
+            {leftIcon}
+
+            {title && (
+              <TextView
+                textColor={textColor}
+                fontWeight="600"
+                fontSize={sizeStyle.fontSize}
+              >
+                {title}
+              </TextView>
+            )}
+
+            {children}
+
+            {rightIcon}
+          </>
+        )}
+      </ViewCard>
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

package/src/components/index.ts

@@ -3,5 +3,6 @@ import Flex from './Flex';
 import Row from './Row';
 import TextView from './TextView';
 import ViewCard from './ViewCard';
+import Button from './Button';
 
-export { Column, Flex, Row, TextView, ViewCard };
+export { Column, Flex, Row, TextView, ViewCard, Button };