react-validate-component 0.1.1 → 0.1.2

package/dist/vColor/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function vColor(): React.JSX.Element;

package/dist/vDate/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function vDate(): React.JSX.Element;

package/dist/vEmail/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function vEmail(): React.JSX.Element;

package/dist/vRadio/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function vRadio(): React.JSX.Element;

package/dist/vRange/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function vRange(): React.JSX.Element;

package/dist/vText/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { VTEXT_PARAMS } from './vText';
+export declare function VText({ vState, vType, vClassName, vShowMessage, vMessage, vLocateMessage, vMessageClass, vIsAnimate, props, }: VTEXT_PARAMS): React.JSX.Element;

package/dist/{types/vinput.d.ts → vText/vText.d.ts}

@@ -1,10 +1,11 @@
-import propsType from './vprops';
+import propsType from '../types/vprops';
 export interface VTEXT_PARAMS {
     readonly vState: boolean;
+    readonly vType: // 유효성 메시지를 출력할 타입
+    'inner' | 'outer' | 'tooltip';
     vClassName?: string;
     readonly vShowMessage: boolean;
     vMessage?: string;
-    vIsInnerMessage?: boolean;
     vLocateMessage?: 'top-left' | 'top' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom' | 'bottom-right';
     vMessageClass?: string;
     vIsAnimate?: boolean;

package/dist/vURL/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function vURL(): React.JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -13,7 +13,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
+    "test": "jest",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -27,6 +27,9 @@
       "pre-commit": "tsdx lint"
     }
   },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
   "prettier": {
     "printWidth": 80,
     "semi": true,
@@ -51,6 +54,8 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "husky": "^9.1.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "size-limit": "^11.1.4",
@@ -59,10 +64,18 @@
     "typescript": "^3.9.10"
   },
   "dependencies": {
+    "@babel/cli": "^7.24.8",
     "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-arrow-functions": "^7.24.7",
     "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/plugin-transform-template-literals": "^7.24.7",
     "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
     "babel-jest": "^29.7.0",
-    "rollup-plugin-postcss": "^4.0.2"
+    "babel-loader": "^9.1.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   }
 }

package/src/index.ts

@@ -0,0 +1,10 @@
+import { VText } from './vText';
+import { VCheckbox } from './vCheckbox';
+import { vColor } from './vColor';
+import { vDate } from './vDate';
+import { vEmail } from './vEmail';
+import { vRadio } from './vRadio';
+import { vRange } from './vRange';
+import { vURL } from './vURL';
+
+export { VText, VCheckbox, vColor, vDate, vEmail, vRadio, vRange, vURL };

package/src/vCheckbox/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function VCheckbox() {
+  return <input type="checkbox" />;
+}

package/src/vColor/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vColor() {
+  return <input type="color" />;
+}

package/src/vDate/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vDate() {
+  return <input type="date" />;
+}

package/src/vEmail/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vEmail() {
+  return <input type="email" />;
+}

package/src/vRadio/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vRadio() {
+  return <input type="radio" />;
+}

package/src/vRange/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vRange() {
+  return <input type="range" />;
+}

package/src/vText/index.module.css

@@ -0,0 +1,210 @@
+.invalid {
+  border: 2px solid red;
+  outline: none;
+}
+.invalid:focus,
+.invalid:focus-visible,
+.invalid:focus-within {
+  border: 2px solid red;
+}
+
+/* vType === 'outer' */
+.vinput {
+  display: flex;
+}
+.vinput-top-left {
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  justify-content: center;
+}
+.vinput-top {
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+}
+.vinput-top-right {
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  justify-content: center;
+}
+.vinput-center-left {
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: center;
+}
+.vinput-center-right {
+  align-items: center;
+  justify-content: center;
+}
+.vinput-bottom-left {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.vinput-bottom {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.vinput-bottom-right {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+/* vType === 'inner' */
+.innerMessage {
+  position: absolute;
+  font-size: 12px;
+  margin: 0;
+  padding: 2px 5px;
+  display: flex;
+}
+.innerMessage-top-left {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.innerMessage-top {
+  align-items: flex-start;
+  justify-content: center;
+}
+.innerMessage-top-right {
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.innerMessage-center-left {
+  align-items: center;
+  justify-content: flex-start;
+}
+.innerMessage-center {
+  align-items: center;
+  justify-content: center;
+}
+.innerMessage-center-right {
+  align-items: center;
+  justify-content: flex-end;
+}
+.innerMessage-bottom-left {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+.innerMessage-bottom {
+  align-items: flex-end;
+  justify-content: center;
+}
+.innerMessage-bottom-right {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+/* vType === 'tooltip' */
+.tooltipMessage {
+  position: absolute;
+  margin: 0;
+  padding: 10px 20px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background-color: black;
+}
+p[class*='tooltipMessage-top'] {
+  transform: translateY(calc(-100% - 10px));
+}
+p[class*='tooltipMessage-top']::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  border: 10px solid transparent;
+  border-top-color: black;
+  border-bottom: 0;
+  margin-bottom: -11px;
+}
+.vinput.tooltipMessage-top-left {
+  justify-content: flex-start;
+}
+p.tooltipMessage-top-left::after {
+  left: 3%;
+}
+.vinput.tooltipMessage-top {
+  justify-content: center;
+}
+p.tooltipMessage-top::after {
+  left: 44%;
+}
+.tooltipMessage-top-right {
+  justify-content: flex-end;
+}
+p.tooltipMessage-top-right::after {
+  left: 87%;
+}
+p[class*='tooltipMessage-center'] {
+  /* transform: translateY(calc(-100% - 10px)); */
+}
+p[class*='tooltipMessage-center']::after {
+  content: '';
+  position: absolute;
+  border: 10px solid transparent;
+}
+.vinput.tooltipMessage-center-right {
+  justify-content: flex-end;
+}
+p.tooltipMessage-center-right {
+  transform: translateX(calc(100% + 10px));
+}
+p.tooltipMessage-center-right::after {
+  border-right-color: black;
+  left: -10%;
+}
+.vinput.tooltipMessage-center-left {
+  justify-content: flex-start;
+}
+p.tooltipMessage-center-left {
+  transform: translateX(calc(-100% - 10px));
+}
+p.tooltipMessage-center-left::after {
+  border-left-color: black;
+  left: 100%;
+}
+
+p[class*='tooltipMessage-bottom'] {
+  transform: translateY(calc(120% + 10px));
+}
+p[class*='tooltipMessage-bottom']::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  border: 10px solid transparent;
+  border-bottom-color: black;
+  border-top: 0;
+  margin-top: -11px;
+}
+.vinput.tooltipMessage-bottom-left {
+  justify-content: flex-start;
+}
+p.tooltipMessage-bottom-left::after {
+  left: 3%;
+}
+.vinput.tooltipMessage-bottom {
+  justify-content: center;
+}
+p.tooltipMessage-bottom::after {
+  left: 44%;
+}
+.tooltipMessage-bottom-right {
+  justify-content: flex-end;
+}
+p.tooltipMessage-bottom-right::after {
+  left: 87%;
+}
+
+.animateMessage {
+  animation: fade-in 1s ease-in-out;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/vText/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import styles from './index.module.css';
+import { VTEXT_PARAMS } from './vText';
+
+// Text
+export function VText({
+  vState = false,
+  vType = 'outer',
+  vClassName = '',
+  vShowMessage = false,
+  vMessage = '',
+  vLocateMessage = 'bottom',
+  vMessageClass = '',
+  vIsAnimate = false,
+  props = {},
+}: VTEXT_PARAMS) {
+  switch (vType) {
+    case 'outer':
+      return (
+        <div
+          className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}
+        >
+          <input
+            type="text"
+            {...props}
+            defaultValue={props?.defaultValue ?? ''}
+            className={`${props?.className} ${
+              vState ? vClassName || styles.invalid : ''
+            }`}
+          ></input>
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${
+                vIsAnimate ? styles.animateMessage : ''
+              }`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    case 'inner':
+      return (
+        <div className={styles.vinput}>
+          <input
+            type="text"
+            {...props}
+            defaultValue={props?.defaultValue ?? ''}
+            className={`${props?.className} ${
+              vState ? vClassName || styles.invalid : ''
+            }`}
+          ></input>
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${styles.innerMessage} ${
+                styles[`innerMessage-${vLocateMessage}`]
+              } ${vIsAnimate ? styles.animateMessage : ''}`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    case 'tooltip':
+      return (
+        <div
+          className={`${styles.vinput} ${
+            styles[`tooltipMessage-${vLocateMessage}`]
+          }`}
+        >
+          <input
+            type="text"
+            {...props}
+            defaultValue={props?.defaultValue ?? ''}
+            className={`${props?.className} ${
+              vState ? vClassName || styles.invalid : ''
+            }`}
+          ></input>
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${styles.tooltipMessage} ${
+                styles[`tooltipMessage-${vLocateMessage}`]
+              } ${vIsAnimate ? styles.animateMessage : ''}`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    default:
+      return <div></div>;
+  }
+}

package/src/{types/vinput.ts → vText/vText.ts}

@@ -1,12 +1,13 @@
-import propsType from './vprops';
+import propsType from '../types/vprops';
 
 // VText 파라미터
 export interface VTEXT_PARAMS {
   readonly vState: boolean; // 유효성 상태 값
+  readonly vType: // 유효성 메시지를 출력할 타입
+  'inner' | 'outer' | 'tooltip';
   vClassName?: string; // 유효성 입힐 class 명
   readonly vShowMessage: boolean; // 유효성 메시지 출력할지
   vMessage?: string; // 유효성 메시지
-  vIsInnerMessage?: boolean; // 유효성 메시지를 element 안에 넣을지 (absolute)
   vLocateMessage?: // 유효성 메시지를 element 어디에 붙일지
   | 'top-left'
     | 'top'

package/src/vURL/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vURL() {
+  return <input type="url" />;
+}

package/src/index.module.css

@@ -1,103 +0,0 @@
-.invalid {
-  border: 2px solid red;
-}
-
-/* 유효성 메시지 locate */
-.vinput {
-  display: flex;
-}
-.vinput-top-left {
-  flex-direction: column-reverse;
-  align-items: flex-start;
-  justify-content: center;
-}
-.vinput-top {
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-}
-.vinput-top-right {
-  flex-direction: column-reverse;
-  align-items: flex-end;
-  justify-content: center;
-}
-.vinput-center-left {
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: center;
-}
-.vinput-center-right {
-  align-items: center;
-  justify-content: center;
-}
-.vinput-bottom-left {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-.vinput-bottom {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.vinput-bottom-right {
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-}
-.innerMessage {
-  position: absolute;
-  font-size: 12px;
-  margin: 0;
-  padding: 2px 5px;
-  display: flex;
-}
-.innerMessage-top-left {
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.innerMessage-top {
-  align-items: flex-start;
-  justify-content: center;
-}
-.innerMessage-top-right {
-  align-items: flex-start;
-  justify-content: flex-end;
-}
-.innerMessage-center-left {
-  align-items: center;
-  justify-content: flex-start;
-}
-.innerMessage-center {
-  align-items: center;
-  justify-content: center;
-}
-.innerMessage-center-right {
-  align-items: center;
-  justify-content: flex-end;
-}
-.innerMessage-bottom-left {
-  align-items: flex-end;
-  justify-content: flex-start;
-}
-.innerMessage-bottom {
-  align-items: flex-end;
-  justify-content: center;
-}
-.innerMessage-bottom-right {
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-.animateMessage {
-  animation: fade-in 1s ease-in-out;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/src/index.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import styles from './index.module.css';
-import { VTEXT_PARAMS } from './types/vinput';
-
-// Text
-export const VText = ({
-  vState = false,
-  vClassName = '',
-  vShowMessage = false,
-  vMessage = '',
-  vIsInnerMessage = false,
-  vLocateMessage = 'bottom',
-  vMessageClass = '',
-  vIsAnimate = false,
-  props = {},
-}: VTEXT_PARAMS) => {
-  const Result: JSX.Element = (
-    <div className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}>
-      <input
-        type="text"
-        {...props}
-        defaultValue={props?.defaultValue ?? ''}
-        className={`${props?.className} ${
-          vState ? vClassName || styles.invalid : ''
-        }`}
-      ></input>
-      {vState && vShowMessage ? (
-        <p
-          className={`${vMessageClass} ${
-            vIsInnerMessage
-              ? `${props?.className} ${styles.innerMessage} ${
-                  styles[`innerMessage-${vLocateMessage}`]
-                }`
-              : ''
-          } ${vIsAnimate ? styles.animateMessage : ''}`}
-        >
-          {vMessage}
-        </p>
-      ) : null}
-    </div>
-  );
-
-  return Result;
-};
-
-// Checkbox
-export const VCheckbox = () => {
-  return <input type="checkbox" />;
-};
-
-// Radio
-export const VRadio = () => {
-  return <input type="radio" />;
-};
-
-// Date
-export const VDate = () => {
-  return <input type="date" />;
-};
-
-// Color
-export const VColor = () => {
-  return <input type="color" />;
-};
-
-// Email
-export const VEmail = () => {
-  return <input type="email" />;
-};
-
-// Range
-export const VRange = () => {
-  return <input type="range" />;
-};
-
-// Url
-export const VUrl = () => {
-  return <input type="url" />;
-};