react-validate-component 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 JongGeun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+# TSDX React User Guide
+
+Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
+
+> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
+
+> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
+
+## Commands
+
+TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+
+The recommended workflow is to run TSDX in one terminal:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+Then run the example inside another:
+
+```bash
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`.
+
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```txt
+/example
+  index.html
+  index.tsx       # test your component here in a demo app
+  package.json
+  tsconfig.json
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+#### React Testing Library
+
+We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+
+### Rollup
+
+TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Continuous Integration
+
+### GitHub Actions
+
+Two actions are added by default:
+
+- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
+- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+  console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
+
+## Deploying the Example Playground
+
+The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
+
+```bash
+cd example # if not already in the example folder
+npm run build # builds to dist
+netlify deploy # deploy the dist folder
+```
+
+Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
+
+```bash
+netlify init
+# build command: yarn build && cd example && yarn && yarn build
+# directory to deploy: example/dist
+# pick yes for netlify.toml
+```
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using [np](https://github.com/sindresorhus/np).
+
+## Usage with Lerna
+
+When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
+
+The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
+
+Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
+
+```diff
+   "alias": {
+-    "react": "../node_modules/react",
+-    "react-dom": "../node_modules/react-dom"
++    "react": "../../../node_modules/react",
++    "react-dom": "../../../node_modules/react-dom"
+   },
+```
+
+An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { VINPUT_PARAMS } from './types/vinput';
+export declare const VText: ({ maxLength, value, className, props, }: VINPUT_PARAMS) => React.JSX.Element;
+export declare const VCheckbox: () => React.JSX.Element;
+export declare const VRadio: () => React.JSX.Element;
+export declare const VDate: () => React.JSX.Element;
+export declare const VColor: () => React.JSX.Element;
+export declare const VEmail: () => React.JSX.Element;
+export declare const VRange: () => React.JSX.Element;
+export declare const VUrl: () => React.JSX.Element;

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react-validate-component.cjs.production.min.js')
+} else {
+  module.exports = require('./react-validate-component.cjs.development.js')
+}

package/dist/react-validate-component.cjs.development.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// Text
+var VText = function VText(_ref) {
+  var maxLength = _ref.maxLength,
+    value = _ref.value,
+    className = _ref.className,
+    props = _ref.props;
+  return React.createElement("input", Object.assign({
+    type: "text"
+  }, props, {
+    className: className,
+    maxLength: maxLength,
+    value: value
+  }));
+};
+// Checkbox
+var VCheckbox = function VCheckbox() {
+  return React.createElement("input", {
+    type: "checkbox"
+  });
+};
+// Radio
+var VRadio = function VRadio() {
+  return React.createElement("input", {
+    type: "radio"
+  });
+};
+// Date
+var VDate = function VDate() {
+  return React.createElement("input", {
+    type: "date"
+  });
+};
+// Color
+var VColor = function VColor() {
+  return React.createElement("input", {
+    type: "color"
+  });
+};
+// Email
+var VEmail = function VEmail() {
+  return React.createElement("input", {
+    type: "email"
+  });
+};
+// Range
+var VRange = function VRange() {
+  return React.createElement("input", {
+    type: "range"
+  });
+};
+// Url
+var VUrl = function VUrl() {
+  return React.createElement("input", {
+    type: "url"
+  });
+};
+
+exports.VCheckbox = VCheckbox;
+exports.VColor = VColor;
+exports.VDate = VDate;
+exports.VEmail = VEmail;
+exports.VRadio = VRadio;
+exports.VRange = VRange;
+exports.VText = VText;
+exports.VUrl = VUrl;
+//# sourceMappingURL=react-validate-component.cjs.development.js.map

package/dist/react-validate-component.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-validate-component.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { VINPUT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  maxLength,\n  value,\n  className,\n  props,\n}: VINPUT_PARAMS) => {\n  return (\n    <input\n      type=\"text\"\n      {...props}\n      className={className}\n      maxLength={maxLength}\n      value={value}\n    />\n  );\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["VText","_ref","maxLength","value","className","props","React","type","VCheckbox","VRadio","VDate","VColor","VEmail","VRange","VUrl"],"mappings":";;;;;;AAGA;IACaA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA;MAChBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,KAAK,GAAAJ,IAAA,CAALI,KAAK;EAEL,OACEC;IACEC,IAAI,EAAC;KACDF,KAAK;IACTD,SAAS,EAAEA,SAAS;IACpBF,SAAS,EAAEA,SAAS;IACpBC,KAAK,EAAEA;KACP;AAEN;AAEA;IACaK,SAAS,GAAG,SAAZA,SAASA;EACpB,OAAOF;IAAOC,IAAI,EAAC;IAAa;AAClC;AAEA;IACaE,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOH;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaG,KAAK,GAAG,SAARA,KAAKA;EAChB,OAAOJ;IAAOC,IAAI,EAAC;IAAS;AAC9B;AAEA;IACaI,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOL;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaK,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAON;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaM,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOP;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaO,IAAI,GAAG,SAAPA,IAAIA;EACf,OAAOR;IAAOC,IAAI,EAAC;IAAQ;AAC7B;;;;;;;;;;;"}

package/dist/react-validate-component.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.VCheckbox=function(){return e.createElement("input",{type:"checkbox"})},exports.VColor=function(){return e.createElement("input",{type:"color"})},exports.VDate=function(){return e.createElement("input",{type:"date"})},exports.VEmail=function(){return e.createElement("input",{type:"email"})},exports.VRadio=function(){return e.createElement("input",{type:"radio"})},exports.VRange=function(){return e.createElement("input",{type:"range"})},exports.VText=function(t){return e.createElement("input",Object.assign({type:"text"},t.props,{className:t.className,maxLength:t.maxLength,value:t.value}))},exports.VUrl=function(){return e.createElement("input",{type:"url"})};
+//# sourceMappingURL=react-validate-component.cjs.production.min.js.map

package/dist/react-validate-component.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-validate-component.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { VINPUT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  maxLength,\n  value,\n  className,\n  props,\n}: VINPUT_PARAMS) => {\n  return (\n    <input\n      type=\"text\"\n      {...props}\n      className={className}\n      maxLength={maxLength}\n      value={value}\n    />\n  );\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["React","type","_ref","props","className","maxLength","value"],"mappings":"6GAsByB,WACvB,OAAOA,yBAAOC,KAAK,6BAcC,WACpB,OAAOD,yBAAOC,KAAK,yBANA,WACnB,OAAOD,yBAAOC,KAAK,yBASC,WACpB,OAAOD,yBAAOC,KAAK,0BAhBC,WACpB,OAAOD,yBAAOC,KAAK,0BAmBC,WACpB,OAAOD,yBAAOC,KAAK,yBA5CA,SAAHC,GAMhB,OACEF,uCACEC,KAAK,QAJJC,EAALC,OAMIC,UAPKF,EAATE,UAQIC,UAVKH,EAATG,UAWIC,MAVCJ,EAALI,uBA8CkB,WAClB,OAAON,yBAAOC,KAAK"}

package/dist/react-validate-component.esm.js

@@ -0,0 +1,61 @@
+import { createElement } from 'react';
+
+// Text
+var VText = function VText(_ref) {
+  var maxLength = _ref.maxLength,
+    value = _ref.value,
+    className = _ref.className,
+    props = _ref.props;
+  return createElement("input", Object.assign({
+    type: "text"
+  }, props, {
+    className: className,
+    maxLength: maxLength,
+    value: value
+  }));
+};
+// Checkbox
+var VCheckbox = function VCheckbox() {
+  return createElement("input", {
+    type: "checkbox"
+  });
+};
+// Radio
+var VRadio = function VRadio() {
+  return createElement("input", {
+    type: "radio"
+  });
+};
+// Date
+var VDate = function VDate() {
+  return createElement("input", {
+    type: "date"
+  });
+};
+// Color
+var VColor = function VColor() {
+  return createElement("input", {
+    type: "color"
+  });
+};
+// Email
+var VEmail = function VEmail() {
+  return createElement("input", {
+    type: "email"
+  });
+};
+// Range
+var VRange = function VRange() {
+  return createElement("input", {
+    type: "range"
+  });
+};
+// Url
+var VUrl = function VUrl() {
+  return createElement("input", {
+    type: "url"
+  });
+};
+
+export { VCheckbox, VColor, VDate, VEmail, VRadio, VRange, VText, VUrl };
+//# sourceMappingURL=react-validate-component.esm.js.map

package/dist/react-validate-component.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-validate-component.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { VINPUT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  maxLength,\n  value,\n  className,\n  props,\n}: VINPUT_PARAMS) => {\n  return (\n    <input\n      type=\"text\"\n      {...props}\n      className={className}\n      maxLength={maxLength}\n      value={value}\n    />\n  );\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["VText","_ref","maxLength","value","className","props","React","type","VCheckbox","VRadio","VDate","VColor","VEmail","VRange","VUrl"],"mappings":";;AAGA;IACaA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA;MAChBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,KAAK,GAAAJ,IAAA,CAALI,KAAK;EAEL,OACEC;IACEC,IAAI,EAAC;KACDF,KAAK;IACTD,SAAS,EAAEA,SAAS;IACpBF,SAAS,EAAEA,SAAS;IACpBC,KAAK,EAAEA;KACP;AAEN;AAEA;IACaK,SAAS,GAAG,SAAZA,SAASA;EACpB,OAAOF;IAAOC,IAAI,EAAC;IAAa;AAClC;AAEA;IACaE,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOH;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaG,KAAK,GAAG,SAARA,KAAKA;EAChB,OAAOJ;IAAOC,IAAI,EAAC;IAAS;AAC9B;AAEA;IACaI,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOL;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaK,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAON;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaM,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOP;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaO,IAAI,GAAG,SAAPA,IAAIA;EACf,OAAOR;IAAOC,IAAI,EAAC;IAAQ;AAC7B;;;;"}

package/dist/types/vinput.d.ts

@@ -0,0 +1,6 @@
+export interface VINPUT_PARAMS {
+    maxLength: number;
+    value: string;
+    className: string;
+    props: object;
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "react-validate-component",
+  "author": "JongGeun",
+  "module": "dist/react-validate-component.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/react-validate-component.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/react-validate-component.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.1.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "husky": "^9.1.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.1.4",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.6.3",
+    "typescript": "^3.9.10"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { VINPUT_PARAMS } from './types/vinput';
+
+// Text
+export const VText = ({
+  maxLength,
+  value,
+  className,
+  props,
+}: VINPUT_PARAMS) => {
+  return (
+    <input
+      type="text"
+      {...props}
+      className={className}
+      maxLength={maxLength}
+      value={value}
+    />
+  );
+};
+
+// 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" />;
+};

package/src/types/vinput.ts

@@ -0,0 +1,7 @@
+// VInput 파라미터
+export interface VINPUT_PARAMS {
+  maxLength: number;
+  value: string;
+  className: string;
+  props: object;
+}