@superdispatch/ui-lab 0.49.4 → 0.50.0

package/dist-src/index.js

@@ -22,6 +22,7 @@ export { useNavbarContext } from "./navbar/NavbarContext.js";
 export * from "./navbar/NavbarItem.js";
 export * from "./navbar/NavbarList.js";
 export * from "./navbar/NavbarMenu.js";
+export * from "./passwordStepper/PasswordStrength.js";
 export * from "./sidebar/Sidebar.js";
 export * from "./sidebar/SidebarBackButton.js";
 export * from "./sidebar/SidebarContainer.js";

package/dist-src/passwordStepper/PasswordStrength.js

@@ -0,0 +1,84 @@
+import { Typography } from '@material-ui/core';
+import { Color, ColorDynamic, Stack } from '@superdispatch/ui';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+import { Box } from "../box/Box.js";
+import { getPasswordStrength, hasEnoughCharacters, hasLowerCaseAndUpperCase, hasNumber, hasSpecialCharacter } from "./PasswordUtils.js";
+import { CheckPasswordItem, Stepper, StepperItem } from "./PasswordValidationComponents.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var passwordStepperTitle = {
+  weak: {
+    textColor: ColorDynamic.Red500,
+    text: 'Weak Password'
+  },
+  average: {
+    textColor: ColorDynamic.Yellow500,
+    text: 'Average Password'
+  },
+  good: {
+    textColor: ColorDynamic.Green500,
+    text: 'Good Password'
+  },
+  strong: {
+    textColor: ColorDynamic.Green500,
+    text: 'Strong Password'
+  }
+};
+var passwordStrengthToActiveStepsCount = {
+  weak: 1,
+  average: 2,
+  good: 3,
+  strong: 4
+};
+function steps(passwordStrength) {
+  return [passwordStrengthToActiveStepsCount[passwordStrength] >= 1, passwordStrengthToActiveStepsCount[passwordStrength] >= 2, passwordStrengthToActiveStepsCount[passwordStrength] >= 3, passwordStrengthToActiveStepsCount[passwordStrength] >= 4];
+}
+var PasswordText = /*#__PURE__*/styled(Typography).withConfig({
+  displayName: "PasswordStrength__PasswordText",
+  componentId: "SD__sc-1ddnv91-0"
+})(["color:", ";"], _ref => {
+  var {
+    colorProp
+  } = _ref;
+  return colorProp !== null && colorProp !== void 0 ? colorProp : Color.Dark100;
+});
+export function PasswordStrength(_ref2) {
+  var {
+    value
+  } = _ref2;
+  var passwordStrength = useMemo(() => getPasswordStrength(value), [value]);
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(PasswordText, {
+        variant: "body2",
+        colorProp: passwordStrength && passwordStepperTitle[passwordStrength].textColor,
+        children: passwordStrength ? passwordStepperTitle[passwordStrength].text : 'Password Strength'
+      }), /*#__PURE__*/_jsx(Stepper, {
+        children: steps(passwordStrength !== null && passwordStrength !== void 0 ? passwordStrength : '').map((isStepActive, index) => /*#__PURE__*/_jsx(StepperItem, {
+          isActive: isStepActive,
+          passwordStrength: passwordStrength
+        }, index))
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        children: "It must have:"
+      }), /*#__PURE__*/_jsxs(Stack, {
+        space: "xxsmall",
+        children: [/*#__PURE__*/_jsx(CheckPasswordItem, {
+          isDone: hasEnoughCharacters(value),
+          text: "At least 8 characters"
+        }), /*#__PURE__*/_jsx(CheckPasswordItem, {
+          isDone: hasLowerCaseAndUpperCase(value),
+          text: "Upper & lowercase letters"
+        }), /*#__PURE__*/_jsx(CheckPasswordItem, {
+          isDone: hasNumber(value),
+          text: "A number"
+        }), /*#__PURE__*/_jsx(CheckPasswordItem, {
+          isDone: hasSpecialCharacter(value),
+          text: "A special character (%, $, #, etc.)"
+        })]
+      })]
+    })]
+  });
+}

package/dist-src/passwordStepper/PasswordUtils.js

@@ -0,0 +1,26 @@
+export function getPasswordStrength(value) {
+  var count = [hasEnoughCharacters, hasNumber, hasLowerCaseAndUpperCase, hasSpecialCharacter, hasSeveralSpecialCharacters].reduce((acc, check) => check(value) ? acc += 1 : acc, 0);
+  if (count === 1 || count === 2) return 'weak';
+  if (count === 3) return 'average';
+  if (count >= 4) {
+    return value.length > 11 ? 'strong' : 'good';
+  }
+  return undefined;
+}
+export function hasEnoughCharacters(text) {
+  return text.trim().length > 7;
+}
+export function hasNumber(text) {
+  return /(?=.*[0-9])/.test(text);
+}
+export function hasLowerCaseAndUpperCase(text) {
+  return /^(?=.*[a-z])(?=.*[A-Z]).+$/.test(text);
+}
+export function hasSpecialCharacter(text) {
+  return /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/.test(text);
+}
+export function hasSeveralSpecialCharacters(text) {
+  var regex = /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/g;
+  var charactersList = text.match(regex);
+  return !!charactersList && charactersList.length > 1;
+}

package/dist-src/passwordStepper/PasswordValidationComponents.js

@@ -0,0 +1,69 @@
+import { Check } from '@material-ui/icons';
+import { Color, ColorDynamic, Inline } from '@superdispatch/ui';
+import styled from 'styled-components';
+import { Box } from "../box/Box.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ListItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__ListItem",
+  componentId: "SD__sc-ikou1j-0"
+})(["display:flex;align-items:center;"]);
+var Dot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__Dot",
+  componentId: "SD__sc-ikou1j-1"
+})(["height:4px;width:4px;background-color:", ";border-radius:100px;"], Color.Blue300);
+var TickBox = /*#__PURE__*/styled(Box).withConfig({
+  displayName: "PasswordValidationComponents__TickBox",
+  componentId: "SD__sc-ikou1j-2"
+})(["width:13.33px;height:13.33px;border-radius:15px;background-color:", ";display:flex;align-items:center;justify-content:center;"], ColorDynamic.Blue50);
+export function CheckPasswordItem(_ref) {
+  var {
+    isDone,
+    text
+  } = _ref;
+  return /*#__PURE__*/_jsxs(ListItem, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      minWidth: "16px",
+      children: /*#__PURE__*/_jsx(Inline, {
+        verticalAlign: "center",
+        horizontalAlign: "center",
+        children: isDone ? /*#__PURE__*/_jsx(TickBox, {
+          children: /*#__PURE__*/_jsx(Check, {
+            style: {
+              fontSize: '10px',
+              color: Color.Green500
+            }
+          })
+        }) : /*#__PURE__*/_jsx(Dot, {})
+      })
+    }), text]
+  });
+}
+export var Stepper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__Stepper",
+  componentId: "SD__sc-ikou1j-3"
+})(["height:5px;display:flex;width:100%;margin-bottom:8px;margin-top:4px;"]);
+export var StepperItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__StepperItem",
+  componentId: "SD__sc-ikou1j-4"
+})(["height:2px;background-color:", ";flex:1;border-radius:100px;&:not(:last-child){margin-right:10px;flex:1;}"], _ref2 => {
+  var {
+    isActive,
+    passwordStrength
+  } = _ref2;
+  return getStepperItemColor(isActive, passwordStrength);
+});
+function getStepperItemColor(isActive, passwordStrength) {
+  if (!isActive || !passwordStrength) return ColorDynamic.Silver400;
+  switch (isActive) {
+    case passwordStrength === 'strong':
+      return ColorDynamic.Green500;
+    case passwordStrength === 'weak':
+      return ColorDynamic.Red500;
+    case passwordStrength === 'average':
+      return ColorDynamic.Yellow500;
+    case passwordStrength === 'good':
+      return ColorDynamic.Green500;
+    default:
+      return ColorDynamic.Silver400;
+  }
+}

package/dist-types/index.d.ts

@@ -340,6 +340,11 @@ interface NavbarMenuProps {
 }
 declare function NavbarMenu({ items, children }: NavbarMenuProps): ReactElement;
 
+interface PasswordStrengthProps {
+    value: string;
+}
+declare function PasswordStrength({ value, }: PasswordStrengthProps): JSX.Element;
+
 interface SidebarProps {
     id?: string;
     title?: ReactNode;
@@ -430,4 +435,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, EmailAutocomplete, EmailAutocompleteProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, EmailAutocomplete, EmailAutocompleteProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, PasswordStrength, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/dist-web/index.js

@@ -1,4 +1,4 @@
-import { CheckCircle, Info, Error as Error$1, WarningRounded, Image, Refresh, Delete, Warning, Flag, Help, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error as Error$1, WarningRounded, Image, Refresh, Delete, Warning, Flag, Help, Menu, ExpandMore, MenuOpen, Check, ArrowBack, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1, Autocomplete } from '@material-ui/lab';
 import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Tag, CardButton, useResponsiveValue, ColorDark, useCollapseBreakpoint } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
@@ -1866,6 +1866,175 @@ function NavbarMenu(_ref2) {
   });
 }
 
+function getPasswordStrength(value) {
+  var count = [hasEnoughCharacters, hasNumber, hasLowerCaseAndUpperCase, hasSpecialCharacter, hasSeveralSpecialCharacters].reduce((acc, check) => check(value) ? acc += 1 : acc, 0);
+  if (count === 1 || count === 2) return 'weak';
+  if (count === 3) return 'average';
+  if (count >= 4) {
+    return value.length > 11 ? 'strong' : 'good';
+  }
+  return undefined;
+}
+function hasEnoughCharacters(text) {
+  return text.trim().length > 7;
+}
+function hasNumber(text) {
+  return /(?=.*[0-9])/.test(text);
+}
+function hasLowerCaseAndUpperCase(text) {
+  return /^(?=.*[a-z])(?=.*[A-Z]).+$/.test(text);
+}
+function hasSpecialCharacter(text) {
+  return /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/.test(text);
+}
+function hasSeveralSpecialCharacters(text) {
+  var regex = /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/g;
+  var charactersList = text.match(regex);
+  return !!charactersList && charactersList.length > 1;
+}
+
+var ListItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__ListItem",
+  componentId: "SD__sc-ikou1j-0"
+})(["display:flex;align-items:center;"]);
+var Dot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__Dot",
+  componentId: "SD__sc-ikou1j-1"
+})(["height:4px;width:4px;background-color:", ";border-radius:100px;"], Color.Blue300);
+var TickBox = /*#__PURE__*/styled(Box).withConfig({
+  displayName: "PasswordValidationComponents__TickBox",
+  componentId: "SD__sc-ikou1j-2"
+})(["width:13.33px;height:13.33px;border-radius:15px;background-color:", ";display:flex;align-items:center;justify-content:center;"], ColorDynamic.Blue50);
+function CheckPasswordItem(_ref) {
+  var {
+    isDone,
+    text
+  } = _ref;
+  return /*#__PURE__*/jsxs(ListItem, {
+    children: [/*#__PURE__*/jsx(Box, {
+      minWidth: "16px",
+      children: /*#__PURE__*/jsx(Inline, {
+        verticalAlign: "center",
+        horizontalAlign: "center",
+        children: isDone ? /*#__PURE__*/jsx(TickBox, {
+          children: /*#__PURE__*/jsx(Check, {
+            style: {
+              fontSize: '10px',
+              color: Color.Green500
+            }
+          })
+        }) : /*#__PURE__*/jsx(Dot, {})
+      })
+    }), text]
+  });
+}
+var Stepper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__Stepper",
+  componentId: "SD__sc-ikou1j-3"
+})(["height:5px;display:flex;width:100%;margin-bottom:8px;margin-top:4px;"]);
+var StepperItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordValidationComponents__StepperItem",
+  componentId: "SD__sc-ikou1j-4"
+})(["height:2px;background-color:", ";flex:1;border-radius:100px;&:not(:last-child){margin-right:10px;flex:1;}"], _ref2 => {
+  var {
+    isActive,
+    passwordStrength
+  } = _ref2;
+  return getStepperItemColor(isActive, passwordStrength);
+});
+function getStepperItemColor(isActive, passwordStrength) {
+  if (!isActive || !passwordStrength) return ColorDynamic.Silver400;
+  switch (isActive) {
+    case passwordStrength === 'strong':
+      return ColorDynamic.Green500;
+    case passwordStrength === 'weak':
+      return ColorDynamic.Red500;
+    case passwordStrength === 'average':
+      return ColorDynamic.Yellow500;
+    case passwordStrength === 'good':
+      return ColorDynamic.Green500;
+    default:
+      return ColorDynamic.Silver400;
+  }
+}
+
+var passwordStepperTitle = {
+  weak: {
+    textColor: ColorDynamic.Red500,
+    text: 'Weak Password'
+  },
+  average: {
+    textColor: ColorDynamic.Yellow500,
+    text: 'Average Password'
+  },
+  good: {
+    textColor: ColorDynamic.Green500,
+    text: 'Good Password'
+  },
+  strong: {
+    textColor: ColorDynamic.Green500,
+    text: 'Strong Password'
+  }
+};
+var passwordStrengthToActiveStepsCount = {
+  weak: 1,
+  average: 2,
+  good: 3,
+  strong: 4
+};
+function steps(passwordStrength) {
+  return [passwordStrengthToActiveStepsCount[passwordStrength] >= 1, passwordStrengthToActiveStepsCount[passwordStrength] >= 2, passwordStrengthToActiveStepsCount[passwordStrength] >= 3, passwordStrengthToActiveStepsCount[passwordStrength] >= 4];
+}
+var PasswordText = /*#__PURE__*/styled(Typography).withConfig({
+  displayName: "PasswordStrength__PasswordText",
+  componentId: "SD__sc-1ddnv91-0"
+})(["color:", ";"], _ref => {
+  var {
+    colorProp
+  } = _ref;
+  return colorProp !== null && colorProp !== void 0 ? colorProp : Color.Dark100;
+});
+function PasswordStrength(_ref2) {
+  var {
+    value
+  } = _ref2;
+  var passwordStrength = useMemo(() => getPasswordStrength(value), [value]);
+  return /*#__PURE__*/jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(PasswordText, {
+        variant: "body2",
+        colorProp: passwordStrength && passwordStepperTitle[passwordStrength].textColor,
+        children: passwordStrength ? passwordStepperTitle[passwordStrength].text : 'Password Strength'
+      }), /*#__PURE__*/jsx(Stepper, {
+        children: steps(passwordStrength !== null && passwordStrength !== void 0 ? passwordStrength : '').map((isStepActive, index) => /*#__PURE__*/jsx(StepperItem, {
+          isActive: isStepActive,
+          passwordStrength: passwordStrength
+        }, index))
+      })]
+    }), /*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(Typography, {
+        variant: "body2",
+        children: "It must have:"
+      }), /*#__PURE__*/jsxs(Stack, {
+        space: "xxsmall",
+        children: [/*#__PURE__*/jsx(CheckPasswordItem, {
+          isDone: hasEnoughCharacters(value),
+          text: "At least 8 characters"
+        }), /*#__PURE__*/jsx(CheckPasswordItem, {
+          isDone: hasLowerCaseAndUpperCase(value),
+          text: "Upper & lowercase letters"
+        }), /*#__PURE__*/jsx(CheckPasswordItem, {
+          isDone: hasNumber(value),
+          text: "A number"
+        }), /*#__PURE__*/jsx(CheckPasswordItem, {
+          isDone: hasSpecialCharacter(value),
+          text: "A special character (%, $, #, etc.)"
+        })]
+      })]
+    })]
+  });
+}
+
 var SidebarRoot = /*#__PURE__*/styled.aside.withConfig({
   displayName: "Sidebar__SidebarRoot",
   componentId: "SD__sc-b77o22-0"
@@ -2348,5 +2517,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, EmailAutocomplete, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, EmailAutocomplete, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, PasswordStrength, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map