Feature/password component

packages/components/.storybook/main.ts

@@ -21,10 +21,6 @@ const config: StorybookConfig = {
       // no options
     },
   },
-  core: {},
-  docs: {
-    autodocs: "tag",
-  },
   viteFinal: async (conf) => {
     // See why dynamic import: see https://github.com/storybookjs/storybook/issues/26291#issuecomment-1978193283
     const { mergeConfig } = await import("vite");

packages/components/.storybook/preview.tsx

@@ -3,6 +3,7 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 
 const preview: Preview = {
+  tags: ["autodocs"],
   decorators: [
     (Story) => {
       document.body.classList.add("flow");

packages/components/package.json

@@ -272,6 +272,10 @@
       "types": "./dist/js/types/components/NumberField/index.d.ts",
       "import": "./dist/js/NumberField.js"
     },
+    "./PasswordCreationField": {
+      "types": "./dist/js/types/components/PasswordCreationField/index.d.ts",
+      "import": "./dist/js/PasswordCreationField.js"
+    },
     "./Popover/styles.css": "./dist/css/Popover.css",
     "./Popover": {
       "types": "./dist/js/types/components/Popover/index.d.ts",
@@ -452,11 +456,13 @@
     "react-syntax-highlighter": "^15.6.1",
     "remeda": "^2.17.4",
     "use-callback-ref": "^1.3.2",
+    "usehooks-ts": "^3.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
     "@mittwald/flow-design-tokens": "workspace:^",
+    "@mittwald/password-tools-js": "^2.1.2",
     "@mittwald/react-use-promise": "^2.6.0",
     "@nx/storybook": "^20.1.3",
     "@storybook/addon-a11y": "^8.4.5",
@@ -493,6 +499,7 @@
     "happy-dom": "^15.11.7",
     "next": "^14.2.18",
     "nx": "^20.1.3",
+    "p-queue": "^8.0.1",
     "postcss": "^8.4.49",
     "postcss-nested-import": "^1.3.0",
     "postcss-nesting": "^13.0.1",
@@ -520,13 +527,17 @@
     "yaml": "^2.6.1"
   },
   "peerDependencies": {
+    "@mittwald/password-tools-js": "^2.1.2",
     "@mittwald/react-use-promise": "^2.3.12",
     "next": "*",
     "react": "~18.3.0",
     "react-dom": "~18.3.0",
     "react-hook-form": "*"
   },
   "peerDependenciesMeta": {
+    "@mittwald/password-tools-js": {
+      "optional": true
+    },
     "@mittwald/react-use-promise": {
       "optional": true
     },

packages/components/src/components/FormField/FormField.module.scss

@@ -4,7 +4,6 @@
   min-width: 0;
 
   /* Elements */
-
   .label {
     order: 1;
     margin-bottom: var(--form-control--label-to-control-spacing);

packages/components/src/components/Label/Label.module.scss

@@ -10,4 +10,13 @@
   &.disabled {
     color: var(--label--color--disabled);
   }
+
+  > div {
+    display: inline-flex;
+    order: 1;
+  }
+
+  & .optional {
+    order: 0;
+  }
 }

packages/components/src/components/Label/Label.tsx

@@ -37,7 +37,11 @@ export const Label = flowComponent("Label", (props) => {
     ? className
     : clsx(styles.label, isDisabled && styles.disabled, className);
 
-  const optionalMarker = " " + stringFormatter.format("label.optional");
+  const optionalMarker = (
+    <div className={styles.optional}>
+      {stringFormatter.format("label.optional")}
+    </div>
+  );
 
   return (
     <ClearPropsContext>

packages/components/src/components/PasswordCreationField/PasswordCreationField.module.scss

@@ -0,0 +1,54 @@
+@use "@/styles/mixins/formControl";
+@use "./components/ComplexityIndicator/complexity";
+
+.inputGroup {
+  display: flex;
+
+  position: relative;
+  flex-direction: row;
+  min-width: fit-content;
+
+  @include formControl.formControl;
+  padding-inline-end: 0;
+  padding-top: 0;
+
+  @include complexity.animation-in("padding-bottom");
+
+  &:has([data-complexity-visible="false"]) {
+    transition-duration: #{complexity.$animation-out-duration};
+    padding-bottom: 0;
+  }
+
+  .input {
+    flex-grow: 1;
+
+    background-color: unset;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-width: 0;
+
+    /* Hovered */
+    &:hover {
+      background-color: unset;
+    }
+
+    /* Focused */
+    &:focus-within {
+      border-color: unset;
+      background-color: unset;
+    }
+    &:focus-visible,
+    &:focus {
+      outline: unset;
+    }
+  }
+
+  .buttonContainer {
+    display: flex;
+
+    & .button {
+      flex-shrink: 0;
+      outline-offset: calc(var(--size-px--xxs) * -1);
+    }
+  }
+}