@superdispatch/ui-lab 0.50.5 → 0.50.7

package/src/passwordStepper/PasswordStrength.stories.tsx

@@ -1,95 +0,0 @@
-import { TextField } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Stack } from '@superdispatch/ui';
-import { UseState } from '@superdispatch/ui-docs';
-import { Box } from '../box/Box';
-import { PasswordStrength } from './PasswordStrength';
-
-export default {
-  title: 'Lab/PasswordStrength',
-  component: PasswordStrength,
-  decorators: [
-    (Story) => (
-      <Box maxWidth="400px">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta;
-
-export const basic = () => (
-  <Box>
-    <PasswordStrength value="" />
-  </Box>
-);
-
-export const weakPassword = () => (
-  <Box>
-    <PasswordStrength value="abc" />
-  </Box>
-);
-
-export const averagePassword = () => (
-  <Box>
-    <PasswordStrength value="password123" />
-  </Box>
-);
-
-export const goodPassword = () => (
-  <Box>
-    <PasswordStrength value="Password123" />
-  </Box>
-);
-
-export const strongPassword = () => (
-  <Box>
-    <PasswordStrength value="Password123!!" />
-  </Box>
-);
-
-export const Interactive = () => (
-  <UseState initialState="">
-    {(password, setPassword) => (
-      <Box>
-        <Stack space="medium">
-          <TextField
-            label="Password"
-            type="password"
-            value={password}
-            onChange={(e) => {
-              setPassword(e.target.value);
-            }}
-            placeholder="Type a password to see strength validation"
-            fullWidth={true}
-          />
-          <PasswordStrength value={password} />
-        </Stack>
-      </Box>
-    )}
-  </UseState>
-);
-
-export const ProgressiveExample = () => {
-  const examples = [
-    { label: 'Empty', value: '' },
-    { label: 'Too short', value: 'abc' },
-    { label: 'Weak (only lowercase)', value: 'password' },
-    { label: 'Average (lowercase + number)', value: 'password123' },
-    { label: 'Strong (all requirements)', value: 'Password123!!' },
-  ];
-
-  return (
-    <Box>
-      <Stack space="large">
-        {examples.map((example) => (
-          <div key={example.label}>
-            <h4>
-              {example.label}: &quot;{example.value}&quot;
-            </h4>
-            <PasswordStrength value={example.value} />
-          </div>
-        ))}
-      </Stack>
-    </Box>
-  );
-};

package/src/passwordStepper/PasswordStrength.tsx

@@ -1,107 +0,0 @@
-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';
-import {
-  getPasswordStrength,
-  hasEnoughCharacters,
-  hasLowerCaseAndUpperCase,
-  hasNumber,
-  hasSpecialCharacter,
-  PasswordStrength as PasswordStrengthType,
-} from './PasswordUtils';
-import {
-  CheckPasswordItem,
-  Stepper,
-  StepperItem,
-} from './PasswordValidationComponents';
-
-const 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' },
-};
-
-const passwordStrengthToActiveStepsCount = {
-  weak: 1,
-  average: 2,
-  good: 3,
-  strong: 4,
-};
-
-function steps(passwordStrength: string): boolean[] {
-  return [
-    passwordStrengthToActiveStepsCount[
-      passwordStrength as PasswordStrengthType
-    ] >= 1,
-    passwordStrengthToActiveStepsCount[
-      passwordStrength as PasswordStrengthType
-    ] >= 2,
-    passwordStrengthToActiveStepsCount[
-      passwordStrength as PasswordStrengthType
-    ] >= 3,
-    passwordStrengthToActiveStepsCount[
-      passwordStrength as PasswordStrengthType
-    ] >= 4,
-  ];
-}
-
-const PasswordText = styled(Typography)<{ colorProp?: string }>`
-  color: ${({ colorProp }) => colorProp ?? Color.Dark100};
-`;
-
-interface PasswordStrengthProps {
-  value: string;
-}
-
-export function PasswordStrength({
-  value,
-}: PasswordStrengthProps): JSX.Element {
-  const passwordStrength = useMemo(() => getPasswordStrength(value), [value]);
-
-  return (
-    <Box>
-      <Box>
-        <PasswordText
-          variant="body2"
-          colorProp={
-            passwordStrength && passwordStepperTitle[passwordStrength].textColor
-          }
-        >
-          {passwordStrength
-            ? passwordStepperTitle[passwordStrength].text
-            : 'Password Strength'}
-        </PasswordText>
-        <Stepper>
-          {steps(passwordStrength ?? '').map((isStepActive, index) => (
-            <StepperItem
-              key={index}
-              isActive={isStepActive}
-              passwordStrength={passwordStrength}
-            />
-          ))}
-        </Stepper>
-      </Box>
-      <Box>
-        <Typography variant="body2">It must have:</Typography>
-        <Stack space="xxsmall">
-          <CheckPasswordItem
-            isDone={hasEnoughCharacters(value)}
-            text="At least 8 characters"
-          />
-          <CheckPasswordItem
-            isDone={hasLowerCaseAndUpperCase(value)}
-            text="Upper & lowercase letters"
-          />
-          <CheckPasswordItem isDone={hasNumber(value)} text="A number" />
-          <CheckPasswordItem
-            isDone={hasSpecialCharacter(value)}
-            text="A special character (%, $, #, etc.)"
-          />
-        </Stack>
-      </Box>
-    </Box>
-  );
-}

package/src/passwordStepper/PasswordUtils.tsx

@@ -1,42 +0,0 @@
-export function getPasswordStrength(
-  value: string,
-): PasswordStrength | undefined {
-  const count = [
-    hasEnoughCharacters,
-    hasNumber,
-    hasLowerCaseAndUpperCase,
-    hasSpecialCharacter,
-    hasSeveralSpecialCharacters,
-  ].reduce<number>((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: string): boolean {
-  return text.trim().length > 7;
-}
-
-export function hasNumber(text: string): boolean {
-  return /(?=.*[0-9])/.test(text);
-}
-
-export function hasLowerCaseAndUpperCase(text: string): boolean {
-  return /^(?=.*[a-z])(?=.*[A-Z]).+$/.test(text);
-}
-
-export function hasSpecialCharacter(text: string): boolean {
-  return /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/.test(text);
-}
-
-export function hasSeveralSpecialCharacters(text: string): boolean {
-  const regex = /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/g;
-  const charactersList = text.match(regex);
-  return !!charactersList && charactersList.length > 1;
-}
-
-export type PasswordStrength = 'weak' | 'average' | 'good' | 'strong';

package/src/passwordStepper/PasswordValidationComponents.tsx

@@ -1,95 +0,0 @@
-import { Check } from '@material-ui/icons';
-import { Color, ColorDynamic, Inline } from '@superdispatch/ui';
-import styled from 'styled-components';
-import { Box } from '../box/Box';
-import { PasswordStrength } from './PasswordUtils';
-
-const ListItem = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Dot = styled.div`
-  height: 4px;
-  width: 4px;
-  background-color: ${Color.Blue300};
-  border-radius: 100px;
-`;
-
-const TickBox = styled(Box)`
-  width: 13.33px;
-  height: 13.33px;
-  border-radius: 15px;
-  background-color: ${ColorDynamic.Blue50};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export function CheckPasswordItem({
-  isDone,
-  text,
-}: {
-  isDone: boolean;
-  text: string;
-}): JSX.Element {
-  return (
-    <ListItem>
-      <Box minWidth="16px">
-        <Inline verticalAlign="center" horizontalAlign="center">
-          {isDone ? (
-            <TickBox>
-              <Check style={{ fontSize: '10px', color: Color.Green500 }} />
-            </TickBox>
-          ) : (
-            <Dot />
-          )}
-        </Inline>
-      </Box>
-      {text}
-    </ListItem>
-  );
-}
-
-export const Stepper = styled.div`
-  height: 5px;
-  display: flex;
-  width: 100%;
-  margin-bottom: 8px;
-  margin-top: 4px;
-`;
-
-export const StepperItem = styled.div<{
-  isActive: boolean;
-  passwordStrength?: PasswordStrength;
-}>`
-  height: 2px;
-  background-color: ${({ isActive, passwordStrength }) =>
-    getStepperItemColor(isActive, passwordStrength)};
-  flex: 1;
-  border-radius: 100px;
-  &:not(:last-child) {
-    margin-right: 10px;
-    flex: 1;
-  }
-`;
-
-function getStepperItemColor(
-  isActive: boolean,
-  passwordStrength?: PasswordStrength,
-): string {
-  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;
-  }
-}