@datability/8ui 0.1.5

package/README.md

@@ -0,0 +1,178 @@
+<br />
+<div align="center">
+  <img src="https://s3.ap-southeast-1.amazonaws.com/datability.info/logo-datability.svg" alt="Logo" width="350">
+  <br />
+  <br />
+  <h1>Datability UI</h1>
+</div>
+
+## Problem that caused this project
+
+Datability Team `[frontend]` every time they start a project they have a page that has a `collection of components` to use within the project , and then there's a components called `Base - components` that's not complicated. But when doing this in many projects , and the `Base - components is edited` , it must be followed up and edited in every project for `[frontend]` , causing difficulty and the information is not consistent
+
+Nuk Supagorn 😎 said :
+
+- It would be very helpful if we could make the `frontend components` we use more flexible. It becomes a `npm package` that can be downloaded from the same place
+
+- Because if corrections occur, they will be able Can be `edited in one spot`
+
+<br>
+
+## About the project
+
+Building and publishing frontend components to `Node Package Manager(NPM)` easy to share and reuse code useful in projects , this article will guide you through the steps of building and `publishing` NPM package.
+
+<br>
+
+## Prerequisites
+
+- [NPM account](https://www.npmjs.com)
+- Docker
+- NodeJS
+- GitHub for clone , push and others
+- Basic understanding of JavaScript / TypeScript
+
+<br>
+
+## Project structure
+
+```sh
+    .
+    ├── dist                          # compiled folder for `publish` to npm
+    ├── node_modules                  # package to use in project
+    ├── public                        # keep index.html for react start
+    ├── src                           # important folder
+    │   ├── components                # components folder for usage
+    │   │   ├── Button                # example `Button` component
+    │   │   │   ├── index.scss # - style css
+    │   │   │   ├── index.tsx         # - button usage
+    │   │   ├── DatePicker            # example `DatePicker` component
+    │   │   │   ├── index.scss # - style css
+    │   │   │   ├── index.tsx         # - button usage
+    │   │   ├── ...                   # other components will append here
+    │   │   ├── index.ts              # file to import all components and export
+    │   ├── App.tsx                   # calling component to display
+    │   └── index.tsx                 # calling component to display
+    ├── docker-compose.yml            # docker compose file to start project
+    ├── package.json                  # package.json to script command
+    ├── tsconfig.json                 # tsconfig.json to setting script command
+    └──
+```
+
+<br>
+
+## 📢 Getting started - `Building & Publishing` NPM Package
+
+1.) Clone the repo
+
+```sh
+git clone git@github.com:datability-th/npm-components-fe.git
+```
+
+2.) Open 2 terminals
+
+- 2.1 ) Terminal 1 : keep running `npm run start`
+
+```sh
+$ docker compose up
+```
+
+- 2.2 ) Terminal 2 : bash in to `npm-fe` container for use npm & script command
+
+```sh
+$ sudo docker exec -it npm-fe bash
+```
+
+3.) Register new component in
+
+```sh
+    ├── src                           # important folder
+    │   ├── components                # components folder for usage
+    │   │   ├── Button                # example `Button` component
+    │   │   │   ├── index.scss # - style css
+    │   │   │   ├── index.tsx         # - button usage
+    │   │   ├── DatePicker            # example `DatePicker` component
+    │   │   │   ├── index.scss # - style css
+    │   │   │   ├── index.tsx         # - button usage
+    │   │   ├── 📌  # <= Declare here & register in `index.ts` below
+    │   │   ├── index.ts              # file to import all components and export
+```
+
+4.) Use command to create compiled folder `dist` to publish to `NPM`
+
+```sh
+npm run build
+```
+
+5.) Before publish to `NPM` you need to login in command
+
+- Login into Gmail : databilitynpm@gmail.com , `Password ask (Top & P'Nuk) 📢`
+- Promp command below `npm login` . . . it will return url to replace digit code
+- Open Gmail copy _digit code_ and replace in website
+- And press enter , command will say ( Logged in ✔ )
+
+```sh
+npm login
+```
+
+6.) Use command to publish `NPM` package
+
+```sh
+npm publish --access public
+```
+
+7.) Let check in
+https://www.npmjs.com/settings/databilitynpm/packages
+
+<br>
+
+## ⚙ Getting started - `Using` NPM Package
+
+1.) Download `NPM` Package
+
+```sh
+npm i npm-components-fe
+```
+
+2.) Calling tools from package that we did
+
+```sh
+import './App.css';
+import { All, Button, DatePicker } from 'npm-components-fe' // 👈
+
+function App() {
+  return (
+    <div className="App">
+      <p>This is the result after calling component from npm </p>
+
+      <All /> // 👈
+    </div>
+  );
+}
+
+export default App;
+```
+
+<br>
+
+## Contact
+
+Top & Nuk at `Datability` 🏠
+
+<br>
+
+## Acknowledgments
+
+Thankyou for all tutorials
+
+- [Build & Publish React component as NPM package using Typescript compiler](https://blog.anoopjadhav.in/part-1-build-publish-react-component-as-npm-package-using-typescript-compiler)
+
+- [A Step-by-Step Guide to Publishing Your Own React NPM Package](https://blog.nonstopio.com/a-step-by-step-guide-to-publishing-your-own-react-npm-package-fa2b7f1d149)
+
+- [How to Build and Publish Your First React NPM Package](https://dev.to/femi_akinyemi/how-to-build-and-publish-your-first-react-npm-package-24o3)
+
+- [How to package your React Component for distribution via NPM](https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f)
+
+- [How to Publish a React Component as a Package to Npm](https://hackernoon.com/how-to-publish-a-react-component-as-a-package-to-npm)
+
+- [Quick and simple create and publish React component on npm](https://medium.com/@irekrog/quick-and-simple-create-and-publish-react-component-on-npm-df528cd26b0)

package/dist/components/Blackdrop/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import type { PropsBlackdrop } from './index.type';
+declare const Blackdrop: React.FC<PropsBlackdrop>;
+export default Blackdrop;

package/dist/components/Blackdrop/index.js

@@ -0,0 +1,11 @@
+// Lib
+import React from 'react';
+// Images
+// Include in project
+import './index.scss';
+var Blackdrop = function (_a) {
+    var children = _a.children, open = _a.open;
+    return (React.createElement("div", { className: "DBui-blackdrop", "aria-hidden": !open }, children));
+};
+export default Blackdrop;
+//# sourceMappingURL=index.js.map

package/dist/components/Blackdrop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Blackdrop/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,SAAS,GAA6B,UAAC,EAAkB;QAAhB,QAAQ,cAAA,EAAE,IAAI,UAAA;IAC3D,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,iBAAc,CAAC,IAAI,IAC/C,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/Blackdrop/index.scss

@@ -0,0 +1,16 @@
+.DBui-blackdrop {
+  opacity: 1;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  position: fixed;
+  z-index: var(--z-index-backdrop);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  &[aria-hidden='true'] {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/dist/components/Blackdrop/index.type.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type PropsBlackdrop = {
+    children: JSX.Element | JSX.Element[];
+    open: boolean;
+};

package/dist/components/Blackdrop/index.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.type.js.map

package/dist/components/Blackdrop/index.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.type.js","sourceRoot":"","sources":["../../../src/components/Blackdrop/index.type.ts"],"names":[],"mappings":""}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import type { PropsButton } from './index.type';
+declare const Button: React.FC<PropsButton>;
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,14 @@
+// Lib
+import React from 'react';
+// Images
+// Include in project
+import './index.scss';
+var Button = function (_a) {
+    var name = _a.name, _b = _a.type, type = _b === void 0 ? 'button' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, startIcon = _a.startIcon, endIcon = _a.endIcon, className = _a.className, style = _a.style;
+    return (React.createElement("button", { type: type, className: "DBui-button ".concat(className ? className : ''), onClick: onClick && onClick, disabled: disabled, style: style ? style : {} },
+        startIcon && React.createElement("img", { src: startIcon, alt: "startIcon" }),
+        name,
+        endIcon && React.createElement("img", { src: endIcon, alt: "endIcon" })));
+};
+export default Button;
+//# sourceMappingURL=index.js.map

package/dist/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,MAAM,GAA0B,UAAC,EAStC;QARC,IAAI,UAAA,EACJ,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,gCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,sBAAe,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QAExB,SAAS,IAAI,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,WAAW,GAAG;QACpD,IAAI;QACJ,OAAO,IAAI,6BAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,SAAS,GAAG,CACxC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/Button/index.scss

@@ -0,0 +1,22 @@
+.DBui-button {
+  transition: opacity 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  cursor: pointer;
+  padding: 0.4em 1em;
+  border-radius: 0.3em;
+  border: 1px solid #03287E;
+  background-color: #03287E;
+  color: #FFFFFF;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/dist/components/Button/index.type.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export type PropsButton = {
+    name?: string;
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    onClick?: () => void;
+    startIcon?: string;
+    endIcon?: string;
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/components/Button/index.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.type.js.map

package/dist/components/Button/index.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.type.js","sourceRoot":"","sources":["../../../src/components/Button/index.type.ts"],"names":[],"mappings":""}

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PropsChip } from './index.type';
+import './index.scss';
+declare const Chip: React.FC<PropsChip>;
+export default Chip;

package/dist/components/Chip/index.js

@@ -0,0 +1,14 @@
+// Lib
+import React from 'react';
+//Images
+import closedSVG from '../assets/closed.svg';
+// Include in project
+import './index.scss';
+var Chip = function (_a) {
+    var label = _a.label, onDelete = _a.onDelete, onClick = _a.onClick, icon = _a.icon, className = _a.className, style = _a.style;
+    return (React.createElement("div", { className: "DBui-chip ".concat(className ? className : ''), style: style ? style : {}, "aria-checked": Boolean(onClick), onClick: onClick && onClick },
+        label,
+        (onDelete || icon) && (React.createElement("img", { src: icon || closedSVG, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete && onDelete }))));
+};
+export default Chip;
+//# sourceMappingURL=index.js.map

package/dist/components/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,QAAQ;AACR,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAE5C,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,IAAI,GAAwB,UAAC,EAAoD;QAAlD,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACnF,OAAO,CACL,6BACE,SAAS,EAAE,oBAAa,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EACpD,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,kBACX,OAAO,CAAC,OAAO,CAAC,EAC9B,OAAO,EAAE,OAAO,IAAI,OAAO;QAE1B,KAAK;QACL,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CACrB,6BACE,GAAG,EAAE,IAAI,IAAI,SAAS,EACtB,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,eAAe,kBACX,OAAO,CAAC,QAAQ,CAAC,EAC/B,OAAO,EAAE,QAAQ,IAAI,QAAQ,GAC7B,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Chip/index.scss

@@ -0,0 +1,32 @@
+.DBui-chip {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: 0.4em 0.5em;
+  border-radius: 0.3em;
+  border: 1px solid #03287E;
+  background-color: #618aea;
+  gap: 0.5em;
+
+  &[aria-checked='true'] {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  .DBui-chipIcon {
+    width: 20px;
+    height: 20px;
+
+    &[aria-checked='true'] {
+      cursor: pointer;
+      
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+

package/dist/components/Chip/index.type.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+export type PropsChip = {
+    label: string;
+    onDelete?: () => void;
+    onClick?: () => void;
+    icon?: string;
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/components/Chip/index.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.type.js.map

package/dist/components/Chip/index.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.type.js","sourceRoot":"","sources":["../../../src/components/Chip/index.type.ts"],"names":[],"mappings":""}

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+declare const Divider: React.FC;
+export default Divider;

package/dist/components/Divider/index.js

@@ -0,0 +1,10 @@
+// Lib
+import React from 'react';
+// Images
+// Include in project
+import './index.scss';
+var Divider = function () {
+    return React.createElement("hr", { className: "DBui-divider" });
+};
+export default Divider;
+//# sourceMappingURL=index.js.map

package/dist/components/Divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Divider/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAErB,IAAM,OAAO,GAAa;IACxB,OAAO,4BAAI,SAAS,EAAC,cAAc,GAAG,CAAA;AACxC,CAAC,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/components/Divider/index.scss

@@ -0,0 +1,4 @@
+.DBui-divider {
+    border: 1px solid #9E9E9E;
+    width: 100%;
+}

package/dist/components/Input/InputAutoComplete/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import type { PropsInputAutoComplete } from './index.type';
+declare const InputAutoComplete: React.FC<PropsInputAutoComplete>;
+export default InputAutoComplete;

package/dist/components/Input/InputAutoComplete/index.js

@@ -0,0 +1,62 @@
+import { __spreadArray } from "tslib";
+// Lib
+import React, { useState } from 'react';
+import { getIn, useFormikContext } from 'formik';
+//Images
+import closedSVG from '../../assets/closed.svg';
+// Include in project
+import './index.scss';
+import InputBase from '../InputBase';
+import Menu from '../../Menu';
+import { Chip } from '../..';
+var InputAutoComplete = function (_a) {
+    var name = _a.name, label = _a.label, placeholder = _a.placeholder, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.require, require = _c === void 0 ? false : _c, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, options = _a.options, _e = _a.isMultiple, isMultiple = _e === void 0 ? false : _e;
+    var _f = useFormikContext(), values = _f.values, touched = _f.touched, errors = _f.errors, setFieldValue = _f.setFieldValue;
+    var _g = useState(''), searchText = _g[0], setSearchText = _g[1];
+    var suggestions = options.filter(function (ele) { return ele.label.toLocaleLowerCase().search(searchText.toLocaleLowerCase()) >= 0; });
+    var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
+    var handleClickSelectOption = function (data) {
+        // Clear Search
+        setSearchText('');
+        if (!isMultiple) {
+            // Is max one chip
+            setFieldValue(name, [data]);
+        }
+        else {
+            // Is more than one chip
+            setFieldValue(name, __spreadArray(__spreadArray([], getIn(values, name), true), [data], false));
+        }
+    };
+    var handleChange = function (value) {
+        setSearchText(value);
+        if (!isMultiple) {
+            setFieldValue(name, [value]);
+        }
+    };
+    var handleClearState = function (e, target) {
+        e.stopPropagation();
+        setSearchText('');
+        setFieldValue(name, getIn(values, name).filter(function (ele) { return ele !== target.value; }));
+    };
+    return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
+        React.createElement(Menu, { disabled: disabled, trigger: function () {
+                var _a;
+                return (React.createElement("div", { className: "DBui-wrapInputAutoComplete", "aria-invalid": isInvalid, "aria-disabled": disabled },
+                    isMultiple &&
+                        getIn(values, name).map(function (data, index) {
+                            var selected = options.find(function (e) { return e.value === data; });
+                            if (disabled)
+                                return React.createElement(Chip, { key: index, label: selected.label });
+                            return (React.createElement("div", { key: index, className: "DBui-wrapSelectValueInputAutoComplete" },
+                                React.createElement("p", null,
+                                    React.createElement("small", null, (selected === null || selected === void 0 ? void 0 : selected.label) || data)),
+                                React.createElement("img", { src: closedSVG, className: "DBui-iconInputAutoComplete", onClick: function (e) { return handleClearState(e, selected); } })));
+                        }),
+                    React.createElement("input", { className: "DBui-inputAutoComplete", type: "text", placeholder: !((_a = getIn(values, name)) === null || _a === void 0 ? void 0 : _a.length) ? placeholder : '', disabled: disabled, name: name, value: isMultiple ? searchText : getIn(values, name)[0] || '', onChange: function (e) { return handleChange(e.target.value); } })));
+            } }, suggestions.map(function (data, index) {
+            var isChecked = Boolean(getIn(values, name).find(function (ele) { return ele === data.value; }));
+            return (React.createElement("p", { key: index, className: "DBui-menuItemInputAutoComplete", onClick: function () { return !isChecked && handleClickSelectOption(data.value); }, "aria-checked": isChecked }, data.label));
+        }))));
+};
+export default InputAutoComplete;
+//# sourceMappingURL=index.js.map

package/dist/components/Input/InputAutoComplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Input/InputAutoComplete/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/InputAutoComplete/index.scss

@@ -0,0 +1,53 @@
+@import '../extend.scss';
+
+.DBui-wrapInputAutoComplete {
+  @extend .DBui-input;
+
+  padding: 0.4em 0.5em;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+  height: 36px;
+
+  &[aria-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-wrapSelectValueInputAutoComplete {
+    display: flex;
+    align-items: center;
+
+    .DBui-iconInputAutoComplete {
+      width: 20px;
+      color: #E3E3E8;
+      cursor: pointer;
+    }
+  }
+
+  .DBui-inputAutoComplete {
+    border: none;
+    background-color: #FFFFFF;
+    align-items: center;
+    width: 100%;
+
+    &:disabled {
+      @extend .DBui-disabled;
+    }
+  }
+}
+
+.DBui-menuItemInputAutoComplete {
+  background-color: #FFFFFF;
+  color: #000000;
+  padding: 0.3em 0.5em;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #FAFAFA;
+  }
+
+  &[aria-checked='true'] {
+    background-color: #6F5EE0;
+    color: #FFFFFF;
+  }
+}

package/dist/components/Input/InputAutoComplete/index.type.d.ts

@@ -0,0 +1,11 @@
+import { TOption } from "../..";
+export type PropsInputAutoComplete = {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    require?: boolean;
+    fullWidth?: boolean;
+    options: TOption[];
+    isMultiple?: boolean;
+};

package/dist/components/Input/InputAutoComplete/index.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.type.js.map

package/dist/components/Input/InputAutoComplete/index.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.type.js","sourceRoot":"","sources":["../../../../src/components/Input/InputAutoComplete/index.type.tsx"],"names":[],"mappings":""}

package/dist/components/Input/InputBase/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import type { PropsInputBase } from './index.type';
+declare const InputBase: React.FC<PropsInputBase>;
+export default InputBase;

package/dist/components/Input/InputBase/index.js

@@ -0,0 +1,23 @@
+// Lib
+import React from 'react';
+import { getIn, useFormikContext } from 'formik';
+// Images
+// Include in project
+import './index.scss';
+var InputBase = function (_a) {
+    var name = _a.name, label = _a.label, _b = _a.require, require = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, children = _a.children, isInvalid = _a.isInvalid;
+    var _d = useFormikContext(), touched = _d.touched, errors = _d.errors;
+    var styleDiv = {
+        width: !fullWidth ? 'fit-content' : '100%'
+    };
+    return (React.createElement("div", { className: "DBui-inputBase", style: styleDiv, "aria-invalid": isInvalid },
+        label && (React.createElement("p", { className: "DBui-inputLabel" },
+            React.createElement("small", null, label),
+            " ",
+            React.createElement("span", { className: "DBui-ariaInvalid" }, require && '*'))),
+        children,
+        getIn(touched, name) && getIn(errors, name) && (React.createElement("p", { className: "DBui-ariaInvalid" },
+            React.createElement("small", null, getIn(errors, name))))));
+};
+export default InputBase;
+//# sourceMappingURL=index.js.map

package/dist/components/Input/InputBase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Input/InputBase/index.tsx"],"names":[],"mappings":"AAAA,MAAM;AACN,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAEhD,SAAS;AAET,qBAAqB;AACrB,OAAO,cAAc,CAAA;AAGrB,IAAM,SAAS,GAA6B,UAAC,EAO5C;QANC,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAsB,gBAAgB,EAAE,EAAtC,OAAO,aAAA,EAAE,MAAM,YAAuB,CAAA;IAE9C,IAAM,QAAQ,GAAG;QACf,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;KAC3C,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,QAAQ,kBAAgB,SAAS;QACrE,KAAK,IAAI,CACR,2BAAG,SAAS,EAAC,iBAAiB;YAC5B,mCAAQ,KAAK,CAAS;;YAAC,8BAAM,SAAS,EAAC,kBAAkB,IAAE,OAAO,IAAI,GAAG,CAAQ,CAC/E,CACL;QAEA,QAAQ;QAER,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAC9C,2BAAG,SAAS,EAAC,kBAAkB;YAC7B,mCAAQ,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,CAAS,CAClC,CACL,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/Input/InputBase/index.scss

@@ -0,0 +1,14 @@
+.DBui-inputBase {
+    display: flex;
+    flex-direction: column;
+
+    &[aria-invalid='true'] {
+        .DBui-inputLabel {
+            color: #EB5757;
+        }
+    }
+
+    .DBui-ariaInvalid {
+        color: #EB5757;
+    }
+}

package/dist/components/Input/InputBase/index.type.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type PropsInputBase = {
+    name: string;
+    label?: string;
+    require?: boolean;
+    fullWidth?: boolean;
+    children: JSX.Element | JSX.Element[];
+    isInvalid: boolean;
+};

package/dist/components/Input/InputBase/index.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.type.js.map

package/dist/components/Input/InputBase/index.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.type.js","sourceRoot":"","sources":["../../../../src/components/Input/InputBase/index.type.tsx"],"names":[],"mappings":""}

package/dist/components/Input/InputBasic/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import type { PropsInputBasic } from './index.type';
+declare const Input: React.FC<PropsInputBasic>;
+export default Input;