@purpurds/text-field 5.10.1 → 5.11.1

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAU,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,mBAAmB,aAAc,CAAC,KAAG,iBAAiB,CAAC,CAEnE,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAU,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,CAAC,KAAG,gBAAgB,CAAC,CAAC,CAEnE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/text-field",
-  "version": "5.10.1",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/text-field.cjs.js",
   "types": "./dist/text-field.d.ts",
@@ -15,36 +15,36 @@
   "source": "src/text-field.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/field-error-text": "5.10.1",
-    "@purpurds/button": "5.10.1",
-    "@purpurds/field-helper-text": "5.10.1",
-    "@purpurds/icon": "5.10.1",
-    "@purpurds/label": "5.10.1",
-    "@purpurds/spinner": "5.10.1",
-    "@purpurds/tokens": "5.10.1"
+    "@purpurds/button": "5.11.1",
+    "@purpurds/field-error-text": "5.11.1",
+    "@purpurds/field-helper-text": "5.11.1",
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/label": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/spinner": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/client-api": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/preview-api": "^8.2.6",
+    "@storybook/react": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
     "@purpurds/component-rig": "1.0.0"
   },

package/src/text-field.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useArgs } from "@storybook/client-api";
+import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/label/styles";
@@ -10,15 +10,25 @@ import "@purpurds/icon/styles";
 import "@purpurds/spinner/styles";
 import { TextField } from "./text-field";
 
-const meta: Meta<typeof TextField> = {
+const meta = {
   title: "Inputs/TextField",
   component: TextField,
-};
-
-export default meta;
-type Story = StoryObj<typeof TextField>;
-
-export const Showcase: Story = {
+  parameters: {
+    docs: {
+      description: {
+        component: `Except for the props below, [all "native" input attributs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) are also valid props. The only exceptions are:
+  - \`type\`- Restricted to \`"email" | "number" | "password" | "search" | "tel" | "text"\`
+  -\`id\`- Required`,
+      },
+    },
+    design: [
+      {
+        name: "TextField",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=1528%3A1886",
+      },
+    ],
+  },
   args: {
     value: "Text field",
     label: "Text field label",
@@ -34,20 +44,16 @@ export const Showcase: Story = {
   },
   argTypes: {
     onChange: { action: "inputChange", table: { disable: true } },
-    type: { options: ["email", "number", "password", "search", "tel", "text"], control: "select" },
+    type: {
+      control: "select",
+      options: ["email", "number", "password", "search", "tel", "text"],
+      table: { type: { summary: '"email" | "number" | "password" | "search" | "tel" | "text"' } },
+    },
     startAdornment: { table: { disable: true } },
     endAdornment: { table: { disable: true } },
     afterField: { table: { disable: true } },
   },
-  parameters: {
-    design: [
-      {
-        name: "TextField",
-        type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=1528%3A1886",
-      },
-    ],
-  },
+
   decorators: [
     (Story) => (
       <div style={{ maxWidth: "18.5rem" }}>
@@ -69,4 +75,9 @@ export const Showcase: Story = {
       />
     );
   },
-};
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Showcase: Story = {};

package/src/text-field.tsx

@@ -3,7 +3,10 @@ import React, {
   ForwardedRef,
   forwardRef,
   HTMLInputTypeAttribute,
+  isValidElement,
+  ReactElement,
   ReactNode,
+  ReactPortal,
   useId,
 } from "react";
 import { Button } from "@purpurds/button";
@@ -256,3 +259,17 @@ const TextFieldComponent = (
 
 export const TextField = forwardRef(TextFieldComponent);
 TextField.displayName = "TextField";
+
+export const isTextField = (
+  child:
+    | ReactElement
+    | Iterable<ReactNode>
+    | ReactPortal
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+): child is ReactElement<TextFieldProps> =>
+  isValidElement<TextFieldProps>(child) &&
+  (child.type as any).displayName === TextField.displayName; // eslint-disable-line @typescript-eslint/no-explicit-any

package/readme.mdx

@@ -1,54 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as TextFieldStories from "./src/text-field.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/TextField" of={TextFieldStories} />
-
-# TextField
-
-<Subtitle>Version {packageInfo.version}</Subtitle>
-
-### Showcase
-
-<Primary />
-
-### Properties
-
-Except for the props below, [all "native" input attributs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) are also valid props. The only exceptions are:
-
-- `type` - Restricted to `"email" | "number" | "password" | "search" | "tel" | "text"`
-- `id` - Required
-
-<ArgTypes />
-
-### Installation
-
-#### Via NPM
-
-Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
-
-In MyApp.tsx
-
-```tsx
-import "@purpurds/purpur/styles";
-```
-
-In MyComponent.tsx
-
-```tsx
-import { TextField } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  const [value, setValue] = useState("");
-
-  return (
-    <TextField
-      value={value}
-      onChange={setValue}
-      onClear={() => setValue("")}
-      clearButtonAllyLabel="Clear"
-    />
-  );
-};
-```