quicksnack 3.27.0 → 3.28.1

package/dist/form/PasswordStrengthField/PasswordStrenghField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare type Props = Omit<React.InputHTMLAttributes<any>, 'type'>;
+export declare const passwordMinLength: (val: string) => boolean;
+export declare const passwordHasNumbers: (val: string) => boolean;
+export declare const passwordHasLowerAndUppercase: (val: string) => boolean;
+export declare const passwordHasSpecialChars: (val: string) => boolean;
+export declare const calculatePasswordScore: (val: string) => number;
+export declare const PasswordStrengthField: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export {};

package/dist/form/PasswordStrengthField/PasswordStrenghField.js

@@ -0,0 +1,85 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordStrengthField = exports.calculatePasswordScore = exports.passwordHasSpecialChars = exports.passwordHasLowerAndUppercase = exports.passwordHasNumbers = exports.passwordMinLength = void 0;
+var react_1 = __importStar(require("react"));
+var TextField_1 = require("../TextField/TextField");
+var styled_components_1 = __importDefault(require("styled-components"));
+var passwordMinLength = function (val) { return val.length >= 8; };
+exports.passwordMinLength = passwordMinLength;
+var passwordHasNumbers = function (val) { return /\d/.test(val); };
+exports.passwordHasNumbers = passwordHasNumbers;
+var passwordHasLowerAndUppercase = function (val) { return /[a-z]/.test(val) && /[A-Z]/.test(val); };
+exports.passwordHasLowerAndUppercase = passwordHasLowerAndUppercase;
+var passwordHasSpecialChars = function (val) { return /[-’/`~!#*$@_%+=.,^&(){}[\]|;:”<>?\\]/.test(val); };
+exports.passwordHasSpecialChars = passwordHasSpecialChars;
+var checks = [exports.passwordMinLength, exports.passwordHasNumbers, exports.passwordHasLowerAndUppercase, exports.passwordHasSpecialChars];
+var maxScore = checks.length + 1;
+var calculatePasswordScore = function (val) { return checks
+    .map(function (check) { return check(val); })
+    .reduce(function (acc, value) {
+    return value
+        ? acc + 1
+        : acc;
+}, 1); };
+exports.calculatePasswordScore = calculatePasswordScore;
+var Progress = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-top: ", ";\n    height: 3px;\n    background-color: #f5f5f5;\n    border-radius: 4px;\n    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);\n"], ["\n    margin-top: ", ";\n    height: 3px;\n    background-color: #f5f5f5;\n    border-radius: 4px;\n    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);\n"])), function (props) { return props.theme.spacing(1); });
+var ProgressBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", "%;\n    height: 100%;\n    background-color: ", " ;\n    transition: width .6s ease, background-color .6s ease;\n"], ["\n    width: ", "%;\n    height: 100%;\n    background-color: ", " ;\n    transition: width .6s ease, background-color .6s ease;\n"])), function (props) { return props.score ? (props.score / maxScore) * 100 : 0; }, function (props) { return props.score <= 2 ? '#e90f10' : props.score <= 3 ? '#ffad00' : '#02b502'; });
+exports.PasswordStrengthField = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = (0, react_1.useState)(0), score = _a[0], setScore = _a[1];
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        var target = e.target;
+        setScore(target.value ? (0, exports.calculatePasswordScore)(target.value) : 0);
+    }, []);
+    var extendedRef = (0, react_1.useMemo)(function () { return function (el) {
+        el === null || el === void 0 ? void 0 : el.addEventListener('keyup', handleChange);
+        if (typeof ref === 'function') {
+            ref === null || ref === void 0 ? void 0 : ref(el);
+        }
+    }; }, [ref, handleChange]);
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TextField_1.TextField, __assign({}, props, { type: "password", ref: extendedRef })),
+        react_1.default.createElement(Progress, null,
+            react_1.default.createElement(ProgressBar, { score: score })));
+});
+var templateObject_1, templateObject_2;

package/dist/form/ScaffoldForm/ScaffoldField.js

@@ -34,6 +34,7 @@ var Checkbox_1 = require("../Checkbox/Checkbox");
 var Select_1 = require("../Select/Select");
 var FileField_1 = require("../FileField/FileField");
 var useScaffoldFormContext_1 = require("./hooks/useScaffoldFormContext");
+var PasswordStrenghField_1 = require("../PasswordStrengthField/PasswordStrenghField");
 var getComponent = function (field) {
     switch (field.type) {
         case "Button":
@@ -44,6 +45,8 @@ var getComponent = function (field) {
             return Select_1.Select;
         case "FileField":
             return FileField_1.FileField;
+        case "PasswordStrengthField":
+            return PasswordStrenghField_1.PasswordStrengthField;
         case "TextField":
         default:
             return TextField_1.TextField;

package/dist/form/ScaffoldForm/{scaffoldProps.d.ts → scaffoldFormProps.d.ts}

@@ -1,4 +1,4 @@
-export declare const scaffoldProps: {
+export declare const scaffoldFormProps: {
     fields: {
         firstName: {
             type: "TextField";

package/dist/form/ScaffoldForm/{scaffoldProps.js → scaffoldFormProps.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scaffoldProps = void 0;
+exports.scaffoldFormProps = void 0;
 var FormPositioner_1 = require("./utils/FormPositioner");
-exports.scaffoldProps = new FormPositioner_1.FormPositioner({
+exports.scaffoldFormProps = new FormPositioner_1.FormPositioner({
     firstName: {
         type: "TextField",
         props: {

package/dist/form/ScaffoldForm/scaffoldPasswordProps.d.ts

@@ -0,0 +1,19 @@
+export declare const scaffoldPasswordProps: {
+    fields: {
+        password: {
+            type: "PasswordStrengthField";
+            props: {
+                type: string;
+                label: string;
+            };
+        };
+        prefix: {
+            type: "TextField";
+            props: {
+                type: "password";
+                label: string;
+            };
+        };
+    };
+    columns: import("../..").Responsive<string>;
+};

package/dist/form/ScaffoldForm/scaffoldPasswordProps.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaffoldPasswordProps = void 0;
+var FormPositioner_1 = require("./utils/FormPositioner");
+exports.scaffoldPasswordProps = new FormPositioner_1.FormPositioner({
+    password: {
+        type: "PasswordStrengthField",
+        props: {
+            type: 'password',
+            label: "Password",
+        }
+    },
+    prefix: {
+        type: "TextField",
+        props: {
+            type: 'password',
+            label: "Repeat password",
+        }
+    },
+})
+    .setVertical('mobile')
+    .getScaffoldProps();

package/dist/form/ScaffoldForm/types.d.ts

@@ -5,10 +5,15 @@ import { Button } from "../Button/Button";
 import { Checkbox } from "../Checkbox/Checkbox";
 import { Select } from "../Select/Select";
 import { FileField } from "../FileField/FileField";
+import { PasswordStrengthField } from "../PasswordStrengthField/PasswordStrenghField";
 export declare type ScaffoldTextFieldProps = {
     type: "TextField";
     props: React.ComponentPropsWithRef<typeof TextField> & FormGridWrapperProps;
 };
+export declare type ScaffoldPasswordStrengthFieldProps = {
+    type: "PasswordStrengthField";
+    props: React.ComponentPropsWithRef<typeof PasswordStrengthField> & FormGridWrapperProps;
+};
 export declare type ScaffoldButtonProps = {
     type: "Button";
     props: React.ComponentPropsWithRef<typeof Button> & FormGridWrapperProps;
@@ -25,5 +30,5 @@ export declare type ScaffoldFileField = {
     type: "FileField";
     props: React.ComponentPropsWithRef<typeof FileField> & FormGridWrapperProps;
 };
-export declare type ScaffoldAvailableFields = ScaffoldTextFieldProps | ScaffoldButtonProps | ScaffoldCheckboxProps | ScaffoldSelectProps | ScaffoldFileField;
+export declare type ScaffoldAvailableFields = ScaffoldTextFieldProps | ScaffoldPasswordStrengthFieldProps | ScaffoldButtonProps | ScaffoldCheckboxProps | ScaffoldSelectProps | ScaffoldFileField;
 export declare type Fields = Record<string, ScaffoldAvailableFields>;

package/dist/form/TextField/TextField.d.ts

@@ -5,5 +5,5 @@ declare type Props = React.InputHTMLAttributes<any> & {
 } | React.TextareaHTMLAttributes<any> & {
     multiline: true;
 };
-export declare const TextField: React.FC<React.PropsWithChildren<Props>>;
+export declare const TextField: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
 export {};

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from './form/Checkbox/Checkbox';
 export * from './form/FileField/FileField';
 export * from './form/Select/Select';
 export * from './form/TextField/TextField';
+export * from './form/PasswordStrengthField/PasswordStrenghField';
 export * from './form/ScaffoldForm/FormGrid/FormGridWrapper';
 export { FormGrid } from './form/ScaffoldForm/FormGrid/FormGrid';
 export * from './layouts/BasicLayout/BasicLayout';

package/dist/index.js

@@ -55,6 +55,7 @@ __exportStar(require("./form/Checkbox/Checkbox"), exports);
 __exportStar(require("./form/FileField/FileField"), exports);
 __exportStar(require("./form/Select/Select"), exports);
 __exportStar(require("./form/TextField/TextField"), exports);
+__exportStar(require("./form/PasswordStrengthField/PasswordStrenghField"), exports);
 __exportStar(require("./form/ScaffoldForm/FormGrid/FormGridWrapper"), exports);
 var FormGrid_1 = require("./form/ScaffoldForm/FormGrid/FormGrid");
 Object.defineProperty(exports, "FormGrid", { enumerable: true, get: function () { return FormGrid_1.FormGrid; } });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.27.0",
+  "version": "3.28.1",
   "private": false,
   "files": [
     "dist/**"