react-core-ts 1.0.2 → 1.0.4

package/.babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

package/.npmingnore

@@ -0,0 +1,3 @@
+src/
+node_modules/
+docs

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import './styles/global.css';
 export { default as AutoComplete } from './AutoComplete';
 export { default as CustomAutoComplete } from './AutoComplete';
+export { default as ToolTip } from './utilities/tooltip';
+export { deepEqual } from './utilities/deepEqual';
 export type { AutoSuggestionInputProps } from './commontypes';

package/dist/index.js

@@ -3,10 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomAutoComplete = exports.AutoComplete = void 0;
+exports.deepEqual = exports.ToolTip = exports.CustomAutoComplete = exports.AutoComplete = void 0;
 require("./styles/global.css");
 var AutoComplete_1 = require("./AutoComplete");
 Object.defineProperty(exports, "AutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_1).default; } });
 var AutoComplete_2 = require("./AutoComplete");
 Object.defineProperty(exports, "CustomAutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_2).default; } });
+var tooltip_1 = require("./utilities/tooltip");
+Object.defineProperty(exports, "ToolTip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });
+var deepEqual_1 = require("./utilities/deepEqual");
+Object.defineProperty(exports, "deepEqual", { enumerable: true, get: function () { return deepEqual_1.deepEqual; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB;AAChC,+CAA+D;AAAtD,mIAAA,OAAO,OAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB;AAChC,+CAA+D;AAAtD,mIAAA,OAAO,OAAsB;AACtC,+CAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA"}

package/dist/styles/components/autocomplete.css

@@ -241,7 +241,7 @@ ul {
   list-style-type: none;
 }
 
-.react-ts-core-search-container {
+.react-core-ts-search-container {
   display: flex;
   align-items: center;
   gap: var(--spacing-4, 4px);

package/dist/styles/styles/components/autocomplete.css

@@ -310,7 +310,7 @@ ul {
   margin: 0;
   cursor: pointer;
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   padding: 8px;
 }
 .loadMoreSection p {

package/dist/utilities/tooltip.js

@@ -1,13 +1,4 @@
 "use strict";
-// import React from 'react';
-// const Tooltip: React.FC<any> = ({ children, title }) => {
-//   return (
-//     <div className="tooltip-wrapper">
-//       {children}
-//       <div className="tooltip-content">{title}</div>
-//     </div>
-//   );
-// };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,7 +23,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// export default Tooltip;
 var react_1 = __importStar(require("react"));
 var ToolTip = function (_a) {
     var title = _a.title, children = _a.children;

package/dist/utilities/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/utilities/tooltip.tsx"],"names":[],"mappings":";AAAA,6BAA6B;AAC7B,4DAA4D;AAC5D,aAAa;AACb,wCAAwC;AACxC,mBAAmB;AACnB,uDAAuD;AACvD,aAAa;AACb,OAAO;AACP,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;AAEL,0BAA0B;AAC1B,6CAAgD;AAEhD,IAAM,OAAO,GAAkB,UAAC,EAAmB;QAAjB,KAAK,WAAA,EAAE,QAAQ,cAAA;IACzC,IAAA,KAA0C,IAAA,gBAAQ,EAAC,iBAAiB,CAAC,EAApE,gBAAgB,QAAA,EAAE,mBAAmB,QAA+B,CAAC;IAC5E,IAAM,OAAO,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC7B,IAAM,aAAa,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAChD,IAAM,sBAAsB,GAAG;;QAC7B,IAAI,aAAa,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YAC5C,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YACpE,IAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;YAE1C,IAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC;YACpC,IAAM,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC,MAAM,CAAC;YACxD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YACpC,IAAI,UAAU,GAAG,UAAU,EAAE;gBAC3B,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,GAAG,EAAE;oBACvC,mBAAmB,CAAC,cAAc,CAAC,CAAC;iBACrC;qBAAM;oBACL,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;iBACxC;aACF;iBAAM;gBACL,IAAM,IAAI,GAAW,UAAU,GAAG,UAAU,CAAC;gBAC7C,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,EAAE;oBACnD,mBAAmB,CAAC,cAAc,CAAC,CAAC;iBACrC;qBAAM;oBACL,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;iBACxC;aACF;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,uCACE,SAAS,EAAE,4BACT,gBAAgB,IAAI,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MACpD;QAEH,wCACE,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,YAAY,EAAE,cAAM,OAAA,sBAAsB,EAAE,EAAxB,CAAwB,IAE3C,QAAQ,CACJ;QACP,wCAAM,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,IAC1C,KAAK,CACD,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/utilities/tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgD;AAEhD,IAAM,OAAO,GAAkB,UAAC,EAAmB;QAAjB,KAAK,WAAA,EAAE,QAAQ,cAAA;IACzC,IAAA,KAA0C,IAAA,gBAAQ,EAAC,iBAAiB,CAAC,EAApE,gBAAgB,QAAA,EAAE,mBAAmB,QAA+B,CAAC;IAC5E,IAAM,OAAO,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC7B,IAAM,aAAa,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAChD,IAAM,sBAAsB,GAAG;;QAC7B,IAAI,aAAa,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YAC5C,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YACpE,IAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;YAE1C,IAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC;YACpC,IAAM,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC,MAAM,CAAC;YACxD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YACpC,IAAI,UAAU,GAAG,UAAU,EAAE;gBAC3B,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,GAAG,EAAE;oBACvC,mBAAmB,CAAC,cAAc,CAAC,CAAC;iBACrC;qBAAM;oBACL,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;iBACxC;aACF;iBAAM;gBACL,IAAM,IAAI,GAAW,UAAU,GAAG,UAAU,CAAC;gBAC7C,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,EAAE;oBACnD,mBAAmB,CAAC,cAAc,CAAC,CAAC;iBACrC;qBAAM;oBACL,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;iBACxC;aACF;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,uCACE,SAAS,EAAE,4BACT,gBAAgB,IAAI,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MACpD;QAEH,wCACE,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,YAAY,EAAE,cAAM,OAAA,sBAAsB,EAAE,EAAxB,CAAwB,IAE3C,QAAQ,CACJ;QACP,wCAAM,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,IAC1C,KAAK,CACD,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}

package/docs/App.tsx

@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+
+import AutoComplete from '../src/AutoComplete';
+
+import '../src/styles/global.css';
+
+export default function App() {
+  const [dropData, setDropData] = useState();
+  const [nexBlock, setNexBlock] = useState(1);
+  const [prev, setPrev] = useState(1);
+
+  const getData = (keyName?: string, next?: number) => {
+    return fetch(
+      keyName
+        ? `https://jsonplaceholder.typicode.com/posts?_page=${next}&_limit=10&title_like=${keyName}`
+        : `https://jsonplaceholder.typicode.com/posts?_page=${next}&_limit=10`
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        setNexBlock(nexBlock + 1);
+        const result = res.map((item: any) => {
+          return { ...item, ['name']: item?.title, id: item?.id.toString() };
+        });
+        return result;
+      });
+  };
+  const getDatas = (keyName?: string) => {
+    return fetch(
+      keyName
+        ? `https://jsonplaceholder.typicode.com/posts?title_like=${keyName}`
+        : `https://jsonplaceholder.typicode.com/posts`
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        setPrev(prev + 1);
+        const result = res.map((item: any) => {
+          return { ...item, ['name']: item?.title, id: item?.id.toString() };
+        });
+        return result;
+      });
+  };
+  return (
+    <React.Fragment>
+      <div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 20,
+            padding: 20,
+            maxWidth: 700,
+          }}
+        >
+          <div className="autocomplete-section">
+            <h2>Custom Select</h2>
+            <p>
+              Select an option from a predefined static list. Ideal for a
+              scenario when the available options are limited and known.
+            </p>
+          </div>
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="Custom Select"
+              name="sample"
+              placeholder="Custom Select"
+              desc="name"
+              descId="id"
+              type="custom_select"
+              data={[
+                { name: 'test', id: '1' },
+                { name: 'test1', id: '2' },
+
+                { name: 'test2', id: '3' },
+
+                { name: 'test3', id: '4' },
+              ]}
+              // getData={getData}
+              onChange={() => console.log('onchange')}
+            />
+          </div>
+          <div className="autocomplete-section">
+            <h2>Auto Complete</h2>
+            <p>
+              Type in the input field and get real-time suggestions from
+              dynamically fetched data. Useful for selecting from large datasets
+              where displaying all available options is impractical.
+            </p>
+          </div>
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="Auto Complete"
+              name="sample"
+              desc="name"
+              paginationEnabled={true}
+              nextBlock={nexBlock}
+              descId="id"
+              async={true}
+              type="auto_complete"
+              placeholder="Auto Complete"
+              // data={[{ name: 'test', id: '1' }]}
+              getData={getData}
+              onChange={() => console.log('onchange')}
+            />
+          </div>
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="Auto Complete"
+              name="sample"
+              desc="name"
+              descId="id"
+              async={false}
+              type="auto_complete"
+              placeholder="Auto Complete"
+              // data={[{ name: 'test', id: '1' }]}
+              getData={getDatas}
+              onChange={() => console.log('onchange')}
+            />
+          </div>
+          <div className="autocomplete-section">
+            <h2>Custom Search Select</h2>
+            <p>
+              This allows you to search through static data, providing a
+              filtered list based on your query or select from available items.
+              Optimal for scenarios where you might have predefined options but
+              also want to enable users to quickly narrow down their choices.
+            </p>
+          </div>
+
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="Custom Search Select"
+              name="sample"
+              placeholder="Custom Search Select"
+              desc="name"
+              descId="id"
+              type="custom_search_select"
+              data={[
+                { name: 'Apple', id: '1' },
+                { name: 'Banana', id: '2' },
+                { name: 'Cherry', id: '3' },
+                { name: 'Date', id: '4' },
+                { name: 'Fig', id: '5' },
+                { name: 'Grape', id: '6' },
+                { name: 'Honeydew', id: '7' },
+                { name: 'Kiwi', id: '8' },
+                { name: 'Lemon', id: '9' },
+                { name: 'Mango', id: '10' },
+              ]}
+              onChange={() => console.log('onchange')}
+            />
+          </div>
+          <div className="autocomplete-section">
+            <h2>Auto Suggestion</h2>
+            <p>
+              As you type, suggestions will appear based on your input, aiding
+              in quicker and potentially more accurate data entry. This mode
+              supports both listed and non-listed input, providing flexibility
+              in user input while still offering assistance.
+            </p>
+          </div>
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="select Auto Suggestion"
+              name="sample"
+              type="auto_suggestion"
+              desc="name"
+              descId="id"
+              async
+              placeholder="Auto Suggestion"
+              // data={[{ name: 'test', id: '1' }]}
+              getData={getData}
+              onChange={() => console.log('onchange')}
+            />
+          </div>
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="Auto Suggestion"
+              name="sample"
+              type="auto_suggestion"
+              required
+              desc="name"
+              async
+              isMultiple
+              descId="id"
+              placeholder="Auto Suggestion"
+              selectedItems={[{ name: 'test', id: '1' }]}
+              // data={[{ name: 'test', id: '1' }]}
+              getData={getData}
+              onChange={(value) => console.log(value, 'onchange')}
+            />
+          </div>
+          <div style={{ width: 300 }}>
+            <AutoComplete
+              label="Auto Suggestion"
+              name="sample"
+              type="auto_suggestion"
+              // async
+              desc="name"
+              singleSelect
+              descId="id"
+              paginationEnabled={false}
+              initialLoad={true}
+              // nextBlock={nexBlock}
+              placeholder="Auto Suggestion"
+              selectedItems={[{ name: 'test', id: '1' }]}
+              getData={getData}
+              onChange={(e) => console.log(e, 'onchange')}
+            />
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}

package/docs/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/docs/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/docs/style.css

@@ -0,0 +1,4 @@
+.autocomplete-section {
+  display: flex;
+  flex-direction: column;
+}

package/package.json

@@ -1,13 +1,9 @@
 {
   "name": "react-core-ts",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
   "scripts": {
     "start": "webpack serve --open --mode development",
     "build": "tsc && cp -R src/styles dist/styles",

package/postcss.config.js

@@ -0,0 +1,7 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};