Merge pull request #13 from jtiala/form-components

New components: Button, Input, Textarea

apps/docs/package.json

@@ -19,7 +19,7 @@
     "storybook-static",
     "CHANGELOG.md"
   ],
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.7.1",
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "build": "storybook build",
@@ -49,25 +49,25 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "7.1.1",
-    "@storybook/addon-essentials": "7.1.1",
-    "@storybook/addon-interactions": "7.1.1",
-    "@storybook/addon-links": "7.1.1",
-    "@storybook/blocks": "7.1.1",
-    "@storybook/react-vite": "7.1.1",
-    "@storybook/react": "7.1.1",
-    "@storybook/test-runner": "0.12.0",
+    "@storybook/addon-a11y": "7.4.1",
+    "@storybook/addon-essentials": "7.4.1",
+    "@storybook/addon-interactions": "7.4.1",
+    "@storybook/addon-links": "7.4.1",
+    "@storybook/blocks": "7.4.1",
+    "@storybook/react-vite": "7.4.1",
+    "@storybook/react": "7.4.1",
+    "@storybook/test-runner": "0.13.0",
     "@storybook/testing-library": "0.2.0",
     "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
     "@types/react-dom": "18.2.7",
-    "@types/react": "18.2.17",
+    "@types/react": "18.2.21",
     "axe-playwright": "1.2.3",
-    "concurrently": "8.2.0",
-    "eslint": "8.46.0",
-    "serve": "14.2.0",
-    "storybook": "7.1.1",
-    "typescript": "5.1.6",
-    "vite": "4.4.7"
+    "concurrently": "8.2.1",
+    "eslint": "8.49.0",
+    "serve": "14.2.1",
+    "storybook": "7.4.1",
+    "typescript": "5.2.2",
+    "vite": "4.4.9"
   }
 }

apps/docs/stories/Form/Button.stories.tsx

@@ -16,3 +16,10 @@ export const Primary: Story = {
     children: "Button",
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Button",
+  },
+};

apps/docs/stories/Form/Input.stories.tsx

@@ -0,0 +1,63 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { Button, Input, Stack } from "@themeless-ui/react";
+
+const meta = {
+  title: "Form/Input",
+  component: Input,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const labelDecorator: Decorator = (Story) => (
+  <Stack>
+    <label htmlFor="input">Label</label>
+    <Story />
+  </Stack>
+);
+
+export const Primary: Story = {
+  args: {
+    id: "input",
+  },
+  decorators: [labelDecorator],
+};
+
+export const Disabled: Story = {
+  args: {
+    id: "input",
+    value: "Input",
+    disabled: true,
+  },
+  decorators: [labelDecorator],
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: "input",
+    value: "Input",
+    readOnly: true,
+  },
+  decorators: [labelDecorator],
+};
+
+export const Placeholder: Story = {
+  args: {
+    id: "input",
+    placeholder: "Input",
+  },
+  decorators: [labelDecorator],
+};
+
+export const UsingWithButton = {
+  render: () => (
+    <Stack direction="horizontal">
+      <Stack>
+        <label htmlFor="input">Label</label>
+        <Input id="input" placeholder="Enter keyword..." />
+      </Stack>
+      <Button type="submit">Search</Button>
+    </Stack>
+  ),
+};

apps/docs/stories/Form/Textarea.stories.tsx

@@ -0,0 +1,63 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { Button, Stack, Textarea } from "@themeless-ui/react";
+
+const meta = {
+  title: "Form/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const labelDecorator: Decorator = (Story) => (
+  <Stack>
+    <label htmlFor="textarea">Label</label>
+    <Story />
+  </Stack>
+);
+
+export const Primary: Story = {
+  args: {
+    id: "textarea",
+  },
+  decorators: [labelDecorator],
+};
+
+export const Disabled: Story = {
+  args: {
+    id: "textarea",
+    value: "Textarea",
+    disabled: true,
+  },
+  decorators: [labelDecorator],
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: "textarea",
+    value: "Textarea",
+    readOnly: true,
+  },
+  decorators: [labelDecorator],
+};
+
+export const Placeholder: Story = {
+  args: {
+    id: "textarea",
+    placeholder: "Textarea",
+  },
+  decorators: [labelDecorator],
+};
+
+export const UsingWithButton = {
+  render: () => (
+    <Stack>
+      <Stack>
+        <label htmlFor="textarea">Label</label>
+        <Textarea id="textarea" placeholder="Write your comment here..." />
+      </Stack>
+      <Button type="submit">Send</Button>
+    </Stack>
+  ),
+};

apps/nextjs-example/package.json

@@ -20,7 +20,7 @@
     "dist",
     "CHANGELOG.md"
   ],
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.7.1",
   "scripts": {
     "dev": "next dev -p 8011",
     "build": "next build",
@@ -50,21 +50,21 @@
     "@themeless-ui/style": "workspace:*",
     "contentlayer": "0.3.4",
     "date-fns": "2.30.0",
-    "next": "13.4.12",
+    "next": "13.4.19",
     "next-contentlayer": "0.3.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.36.2",
+    "@playwright/test": "1.38.0",
     "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/stylelint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
-    "@types/mdx": "2.0.5",
-    "@types/react": "18.2.17",
+    "@types/mdx": "2.0.7",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "eslint": "8.46.0",
-    "stylelint": "15.10.2",
-    "typescript": "5.1.6"
+    "eslint": "8.49.0",
+    "stylelint": "15.10.3",
+    "typescript": "5.2.2"
   }
 }

apps/nextjs-example/test/about.spec.ts

@@ -3,6 +3,6 @@ import { expect, test } from "@playwright/test";
 test("should render the about page", async ({ page }) => {
   await page.goto("/");
   await page.click("text=About");
-  await expect(page).toHaveURL("/");
+  await expect(page).toHaveURL("/about");
   await expect(page.locator("h1")).toContainText("About");
 });

apps/react-example/package.json

@@ -18,7 +18,7 @@
     "dist",
     "CHANGELOG.md"
   ],
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.7.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -44,32 +44,32 @@
     "publish:npm": "pnpm publish --access public"
   },
   "dependencies": {
-    "@fontsource/fira-mono": "5.0.5",
-    "@fontsource/karma": "5.0.5",
-    "@fontsource/open-sans": "5.0.5",
+    "@fontsource/fira-mono": "5.0.8",
+    "@fontsource/karma": "5.0.8",
+    "@fontsource/open-sans": "5.0.12",
     "@themeless-ui/react": "workspace:*",
     "@themeless-ui/style": "workspace:*",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/user-event": "14.5.0",
     "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/stylelint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
-    "@types/react": "18.2.17",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@types/react-test-renderer": "18.0.0",
-    "@vitejs/plugin-react": "4.0.3",
-    "@vitest/coverage-v8": "0.33.0",
-    "eslint": "8.46.0",
+    "@types/react-test-renderer": "18.0.1",
+    "@vitejs/plugin-react": "4.0.4",
+    "@vitest/coverage-v8": "0.34.4",
+    "eslint": "8.49.0",
     "jsdom": "22.1.0",
     "react-test-renderer": "18.2.0",
-    "stylelint": "15.10.2",
-    "typescript": "5.1.6",
-    "vite": "4.4.7",
-    "vitest": "0.33.0"
+    "stylelint": "15.10.3",
+    "typescript": "5.2.2",
+    "vite": "4.4.9",
+    "vitest": "0.34.4"
   }
 }

apps/react-example/test/setup.ts

@@ -1,5 +1,4 @@
-import "@testing-library/jest-dom";
-import matchers from "@testing-library/jest-dom/matchers";
+import "@testing-library/jest-dom/vitest";
 import {
   cleanup,
   render,
@@ -8,8 +7,6 @@ import {
 } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-expect.extend(matchers);
-
 afterEach(() => {
   cleanup();
 });

package.json

@@ -17,7 +17,7 @@
   "files": [
     "CHANGELOG.md"
   ],
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.7.1",
   "scripts": {
     "dev": "turbo run dev --no-cache --continue --concurrency=12",
     "build": "turbo run build",
@@ -35,15 +35,15 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.7",
-    "@commitlint/config-conventional": "17.6.7",
-    "@playwright/test": "1.36.2",
+    "@commitlint/cli": "17.7.1",
+    "@commitlint/config-conventional": "17.7.0",
+    "@playwright/test": "1.38.0",
     "@themeless-ui/eslint-config": "workspace:*",
-    "eslint": "8.46.0",
+    "eslint": "8.49.0",
     "husky": "8.0.3",
-    "lint-staged": "13.2.3",
-    "npm-check-updates": "16.10.17",
-    "prettier": "3.0.0",
-    "turbo": "1.10.12"
+    "lint-staged": "14.0.1",
+    "npm-check-updates": "16.14.2",
+    "prettier": "3.0.3",
+    "turbo": "1.10.13"
   }
 }

packages/eslint-config/package.json

@@ -19,18 +19,18 @@
     "*.json",
     "CHANGELOG.md"
   ],
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.7.1",
   "scripts": {
     "publish:npm": "pnpm publish --access public"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "6.2.0",
-    "@typescript-eslint/parser": "6.2.0",
-    "eslint-config-next": "13.4.12",
-    "eslint-config-prettier": "8.9.0",
-    "eslint-config-turbo": "1.10.12",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
+    "eslint-config-next": "13.4.19",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-config-turbo": "1.10.13",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.33.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.13"
   }