@douglasneuroinformatics/libui 2.7.0 → 2.8.1

package/dist/components/Form/StringField/StringFieldPassword.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { BaseFieldComponentProps } from '../types.js';
-export type StringFieldPasswordProps = BaseFieldComponentProps<string> & StringFormField;
-export declare const StringFieldPassword: ({ description, error, label, name, readOnly, setValue, value }: StringFieldPasswordProps) => React.JSX.Element;
+export type PasswordStrengthValue = 0 | 1 | 2 | 3 | 4;
+export type StringFieldPasswordProps = BaseFieldComponentProps<string> & Extract<StringFormField, {
+    variant: 'password';
+}>;
+export declare const StringFieldPassword: ({ calculateStrength, description, error, label, name, readOnly, setValue, value }: StringFieldPasswordProps) => React.JSX.Element;
 //# sourceMappingURL=StringFieldPassword.d.ts.map

package/dist/components/Form/StringField/StringFieldPassword.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringFieldPassword.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAQjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AAEzF,eAAO,MAAM,mBAAmB,mEAQ7B,wBAAwB,sBA+B1B,CAAC"}
+{"version":3,"file":"StringFieldPassword.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AASjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEtD,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GACpE,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AAEpD,eAAO,MAAM,mBAAmB,sFAS7B,wBAAwB,sBAuD1B,CAAC"}

package/dist/components/Form/StringField/StringFieldPassword.js

@@ -1,11 +1,18 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
 import { EyeIcon, EyeOffIcon } from 'lucide-react';
 import { cn } from '../../../utils.js';
 import { Input } from '../../Input/Input.js';
 import { Label } from '../../Label/Label.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-export const StringFieldPassword = ({ description, error, label, name, readOnly, setValue, value }) => {
+export const StringFieldPassword = ({ calculateStrength, description, error, label, name, readOnly, setValue, value }) => {
+    const [strength, setStrength] = useState(calculateStrength ? 0 : null);
     const [show, setShow] = useState(false);
+    useEffect(() => {
+        if (calculateStrength) {
+            setStrength(value ? calculateStrength(value) : 0);
+        }
+    }, [value]);
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, { htmlFor: name }, label),
@@ -15,5 +22,7 @@ export const StringFieldPassword = ({ description, error, label, name, readOnly,
             React.createElement("button", { className: "absolute right-0 flex h-full w-8 items-center justify-center text-muted-foreground", disabled: readOnly, tabIndex: -1, type: "button", onClick: () => setShow(!show) },
                 React.createElement(EyeIcon, { className: cn('absolute transition-all', show ? '-rotate-90 scale-0' : 'rotate-0 scale-100') }),
                 React.createElement(EyeOffIcon, { className: cn('absolute transition-all', !show ? 'rotate-90 scale-0' : 'rotate-0 scale-100') }))),
+        strength !== null && (React.createElement(motion.div, { animate: { width: `${Math.max(strength, value?.length ? 1 : 0) * 25}%` }, className: "h-1 w-full overflow-hidden rounded", initial: { width: '0%' }, transition: { duration: 0.5 } },
+            React.createElement("div", { className: cn('h-full w-full bg-destructive transition-colors duration-500', strength === 2 && 'bg-yellow-500 dark:bg-yellow-700', strength === 3 && 'bg-sky-500 dark:bg-sky-700', strength === 4 && 'bg-green-500 dark:bg-green-700') }))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "packageManager": "pnpm@9.3.0",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.8.0",
+    "@douglasneuroinformatics/libui-form-types": "^0.9.0",
     "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-accordion": "^1.1.2",

package/src/components/Form/Form.stories.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { FormFields } from '@douglasneuroinformatics/libui-form-types';
 import type { Meta, StoryObj } from '@storybook/react';
+import type { IntRange } from 'type-fest';
 import { z } from 'zod';
 
 import { Heading } from '../Heading/Heading.js';
@@ -165,7 +166,10 @@ const stringFields: FormFields<
   stringPassword: {
     kind: 'string',
     label: 'Password',
-    variant: 'password'
+    variant: 'password',
+    calculateStrength: (password: string) => {
+      return Math.min(password.length, 4) as IntRange<0, 5>;
+    }
   },
   stringInput: {
     description: 'This is a string field',

package/src/components/Form/StringField/StringField.stories.tsx

@@ -4,6 +4,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { StringField } from './StringField.js';
 
+import type { PasswordStrengthValue } from './StringFieldPassword.js';
+
 type Story = StoryObj<typeof StringField>;
 
 export default { component: StringField } as Meta<typeof StringField>;
@@ -68,6 +70,29 @@ export const Password: Story = {
   ]
 };
 
+export const PasswordWithStrength: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<string | undefined>();
+      return (
+        <Story
+          args={{
+            calculateStrength: (password: string) => {
+              return Math.min(password.length, 4) as PasswordStrengthValue;
+            },
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Password',
+            name: 'text',
+            setValue,
+            value,
+            variant: 'password'
+          }}
+        />
+      );
+    }
+  ]
+};
+
 export const Select: Story = {
   decorators: [
     (Story) => {

package/src/components/Form/StringField/StringFieldPassword.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
+import { motion } from 'framer-motion';
 import { EyeIcon, EyeOffIcon } from 'lucide-react';
 
 import { cn } from '../../../utils.js';
@@ -10,9 +11,13 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 
 import type { BaseFieldComponentProps } from '../types.js';
 
-export type StringFieldPasswordProps = BaseFieldComponentProps<string> & StringFormField;
+export type PasswordStrengthValue = 0 | 1 | 2 | 3 | 4;
+
+export type StringFieldPasswordProps = BaseFieldComponentProps<string> &
+  Extract<StringFormField, { variant: 'password' }>;
 
 export const StringFieldPassword = ({
+  calculateStrength,
   description,
   error,
   label,
@@ -21,7 +26,14 @@ export const StringFieldPassword = ({
   setValue,
   value
 }: StringFieldPasswordProps) => {
+  const [strength, setStrength] = useState<PasswordStrengthValue | null>(calculateStrength ? 0 : null);
   const [show, setShow] = useState(false);
+  useEffect(() => {
+    if (calculateStrength) {
+      setStrength(value ? calculateStrength(value) : 0);
+    }
+  }, [value]);
+
   return (
     <FieldGroup>
       <FieldGroup.Row>
@@ -48,6 +60,23 @@ export const StringFieldPassword = ({
           <EyeOffIcon className={cn('absolute transition-all', !show ? 'rotate-90 scale-0' : 'rotate-0 scale-100')} />
         </button>
       </FieldGroup.Row>
+      {strength !== null && (
+        <motion.div
+          animate={{ width: `${Math.max(strength, value?.length ? 1 : 0) * 25}%` }}
+          className="h-1 w-full overflow-hidden rounded"
+          initial={{ width: '0%' }}
+          transition={{ duration: 0.5 }}
+        >
+          <div
+            className={cn(
+              'h-full w-full bg-destructive transition-colors duration-500',
+              strength === 2 && 'bg-yellow-500 dark:bg-yellow-700',
+              strength === 3 && 'bg-sky-500 dark:bg-sky-700',
+              strength === 4 && 'bg-green-500 dark:bg-green-700'
+            )}
+          />
+        </motion.div>
+      )}
       <FieldGroup.Error error={error} />
     </FieldGroup>
   );