docs: generate missing bits of text input for docs react and css (#819)

Co-authored-by: Charlotte Gieltjes <charlotte.gieltjes@rebels.io>

Author: eslook

.changeset/eighty-aliens-lose.md

@@ -0,0 +1,2 @@
+---
+---

packages/components-react/text-input-react/src/text-input.tsx

@@ -2,7 +2,7 @@ import type { ReactNode, HTMLAttributes } from 'react';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
-export interface TextInputProps extends HTMLAttributes<HTMLElement> {
+export interface TextInputProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode; // Needed in template file, feel free to remove
 }
 

packages/docs/text-input-docs/docs/description.md

@@ -0,0 +1 @@
+Biedt de mogelijkheid om één regel aan tekens in te vullen.

packages/docs/text-input-docs/package.json

@@ -11,7 +11,8 @@
     "text-input-component"
   ],
   "files": [
-    "./docs/"
+    "./docs/",
+    "./stories/"
   ],
   "repository": {
     "type": "git+ssh",
@@ -22,5 +23,11 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
+  },
+  "devDependencies": {
+    "@nl-design-system-candidate/text-input-react": "workspace:*",
+    "@storybook/react-vite": "9.1.5",
+    "@types/react": "19.2.7",
+    "react": "19.2.3"
   }
 }

packages/docs/text-input-docs/stories/text-input.css.meta.tsx

@@ -0,0 +1,25 @@
+import type { Meta } from '@storybook/react-vite';
+import { TextInput } from '@nl-design-system-candidate/text-input-react/css';
+
+const CLASSES = 'classes';
+
+const meta = {
+  argTypes: {
+    nlTextInput: {
+      name: 'nl-text-input',
+      description: 'De basis class van dit component',
+      control: false,
+      type: { name: 'other', value: 'string', required: true },
+      table: {
+        category: CLASSES,
+        type: { summary: undefined },
+      },
+    },
+    children: {
+      table: { disable: true },
+    },
+  },
+  component: (props) => <TextInput {...props} />,
+} satisfies Meta;
+
+export default meta;

packages/docs/text-input-docs/stories/text-input.react.meta.tsx

@@ -0,0 +1,11 @@
+import type { Meta } from '@storybook/react-vite';
+import { TextInput } from '@nl-design-system-candidate/text-input-react/css';
+
+const meta = {
+  argTypes: {
+    children: { control: 'text', table: { category: 'API' } },
+  },
+  component: TextInput,
+} satisfies Meta<typeof TextInput>;
+
+export default meta;

packages/docs/text-input-docs/stories/text-input.stories.tsx

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react-vite';
+import type { TextInputProps } from '@nl-design-system-candidate/text-input-react';
+
+type Story = StoryObj<TextInputProps>;
+
+export const TextInput: Story = {
+  name: 'Text Input',
+  args: {
+    children: `Text Input`,
+  },
+};