@firedesktop/react-base 1.17.3 → 1.18.0

package/dist/components/AppInput.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type AppInputType_Type = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'url' | 'week';
+declare type Proptype = {
+    appIcon: any;
+    ariadescribedby?: string;
+    autoComplete?: boolean;
+    className?: string;
+    classNameWrapper?: string;
+    id?: string;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    type?: AppInputType_Type;
+    value?: string | number;
+};
+declare function AppInput({ appIcon, ariadescribedby, autoComplete, className, classNameWrapper, id, name, onChange, placeholder, type, value }: Proptype): JSX.Element;
+export default AppInput;

package/dist/components/AppInput.js

@@ -0,0 +1,10 @@
+import React from 'react';
+function AppInput(_a) {
+    var appIcon = _a.appIcon, ariadescribedby = _a.ariadescribedby, _b = _a.autoComplete, autoComplete = _b === void 0 ? true : _b, className = _a.className, classNameWrapper = _a.classNameWrapper, id = _a.id, name = _a.name, onChange = _a.onChange, placeholder = _a.placeholder, _c = _a.type, type = _c === void 0 ? 'text' : _c, value = _a.value;
+    var classWrap = classNameWrapper ? "form-group AppInput_form " + classNameWrapper : 'form-group AppInput_form';
+    return (React.createElement("div", { className: classWrap },
+        React.createElement("input", { autoComplete: autoComplete ? 'on' : 'off', "aria-describedby": ariadescribedby, className: "form-control " + (className !== null && className !== void 0 ? className : ''), id: id, name: name, onChange: onChange, placeholder: placeholder, type: type, value: value }),
+        appIcon));
+}
+export default AppInput;
+//# sourceMappingURL=AppInput.js.map

package/dist/components/AppInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppInput.js","sourceRoot":"","sources":["../../src/lib/components/AppInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwC1B,SAAS,QAAQ,CAAC,EAA+I;QAA7I,OAAO,aAAA,EAAE,eAAe,qBAAA,EAAE,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EAAE,SAAS,eAAA,EAAE,gBAAgB,sBAAA,EAAE,EAAE,QAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,YAAa,EAAb,IAAI,mBAAG,MAAM,KAAA,EAAE,KAAK,WAAA;IACnJ,IAAM,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,8BAA4B,gBAAkB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IACjH,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,+BACE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,sBACvB,eAAe,EACjC,SAAS,EAAE,mBAAgB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,EAC5C,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GAAI;QACjB,OAAO,CACJ,CACP,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 import AppIcon from './AppIcon';
+import AppInput from './AppInput';
 import Spin from './Spin';
 import Toaster from './Toaster/Toaster';
 import * as Toaster_Types from './Toaster/Types';
-export { AppIcon, Spin, Toaster, Toaster_Types };
+export { AppIcon, AppInput, Spin, Toaster, Toaster_Types };

package/dist/components/index.js

@@ -1,6 +1,7 @@
 import AppIcon from './AppIcon';
+import AppInput from './AppInput';
 import Spin from './Spin';
 import Toaster from './Toaster/Toaster';
 import * as Toaster_Types from './Toaster/Types';
-export { AppIcon, Spin, Toaster, Toaster_Types };
+export { AppIcon, AppInput, Spin, Toaster, Toaster_Types };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/styles/base.css

@@ -41,7 +41,7 @@
   }
   
   body {
-    background: #f7f7f7 !important;
+    background: #f7f7f7;
     font-family: var(--font-Roboto);
     overflow-x: hidden;
   }
@@ -344,4 +344,25 @@
   
   .MuiAutocomplete-proper *{
     transition: none !important;
-  }
+  }
+
+  /*******************************************************************************/
+  /*  AppInput    */
+  .AppInput_form {
+    position: relative;
+  }
+  
+  .AppInput_form input {
+    padding: 10px 0px 10px 10px;
+    border: 2px solid var(--primary-color);
+    box-sizing: border-box;
+    border-radius: 15px;
+    font-size: 17px;
+    height: 42px;
+    width: 100%;
+  }
+  
+  .AppInput_form svg{
+    position: absolute;
+  }
+  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firedesktop/react-base",
-  "version": "1.17.3",
+  "version": "1.18.0",
   "license": "ISC",
   "main": "dist/index.js",
   "description": "This is the FireDesktop base package used to support every React Project in this Company.",
@@ -34,7 +34,11 @@
     "typescript": "^4.0.5",
     "web-vitals": "^1.0.1"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "react": ">=16.8.*",
+    "react-dom": ">=16.8.*",
+    "react-redux": ">=7.*"
+  },
   "scripts": {
     "distribute_not_working": "rmdir /s /q dist & mkdir dist && npx babel src/lib --out-dir dist --extensions \".js,.ts,.tsx\" --source-maps inline",
     "start": "react-scripts start",
@@ -58,4 +62,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

package/src/App.tsx

@@ -91,6 +91,12 @@ function App() {
       {options ? options.map((x: any) => {
         return (<li key={x.value}>ID: {x.value} Post: {x.label}</li>);
       }) : ''}
+
+      <br />
+      <Components.AppInput appIcon={<Components.AppIcon name={'user'} className={'tertiary-svg'} iconClassName='login_form_svg' />}
+        type='text'
+        placeholder='username---'
+        name='username' />
     </Provider >
   );
 }

package/src/lib/components/AppInput.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+
+type AppInputType_Type =
+  'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'url'
+  | 'week';
+
+type Proptype = {
+  appIcon: any;
+  ariadescribedby?: string;
+  autoComplete?: boolean,
+  className?: string;
+  classNameWrapper?: string,
+  id?: string;
+  name?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  type?: AppInputType_Type;
+  value?: string | number;
+};
+
+function AppInput({ appIcon, ariadescribedby, autoComplete = true, className, classNameWrapper, id, name, onChange, placeholder, type = 'text', value }: Proptype) {
+  const classWrap = classNameWrapper ? `form-group AppInput_form ${classNameWrapper}` : 'form-group AppInput_form';
+  return (
+    <div className={classWrap}>
+      <input
+        autoComplete={autoComplete ? 'on' : 'off'}
+        aria-describedby={ariadescribedby}
+        className={`form-control ${className ?? ''}`}
+        id={id}
+        name={name}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type}
+        value={value} />
+      {appIcon}
+    </div>
+  );
+}
+
+export default AppInput;

package/src/lib/components/index.ts

@@ -1,6 +1,7 @@
 import AppIcon from './AppIcon';
+import AppInput from './AppInput';
 import Spin from './Spin';
 import Toaster from './Toaster/Toaster';
 import * as Toaster_Types from './Toaster/Types';
 
-export { AppIcon, Spin, Toaster, Toaster_Types };
+export { AppIcon, AppInput, Spin, Toaster, Toaster_Types };

package/src/lib/styles/base.css

@@ -41,7 +41,7 @@
   }
   
   body {
-    background: #f7f7f7 !important;
+    background: #f7f7f7;
     font-family: var(--font-Roboto);
     overflow-x: hidden;
   }
@@ -344,4 +344,25 @@
   
   .MuiAutocomplete-proper *{
     transition: none !important;
-  }
+  }
+
+  /*******************************************************************************/
+  /*  AppInput    */
+  .AppInput_form {
+    position: relative;
+  }
+  
+  .AppInput_form input {
+    padding: 10px 0px 10px 10px;
+    border: 2px solid var(--primary-color);
+    box-sizing: border-box;
+    border-radius: 15px;
+    font-size: 17px;
+    height: 42px;
+    width: 100%;
+  }
+  
+  .AppInput_form svg{
+    position: absolute;
+  }
+