Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
321 changes: 321 additions & 0 deletions docs/framework/react/guides/reusable-styled-form-component.md

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions examples/react/reusable-styled-form-component/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// @ts-check

/** @type {import('eslint').Linter.Config} */
const config = {
extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
parserOptions: {
tsconfigRootDir: __dirname,
project: './tsconfig.json',
},
rules: {
'react/no-children-prop': 'off',
},
}

module.exports = config
27 changes: 27 additions & 0 deletions examples/react/reusable-styled-form-component/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

pnpm-lock.yaml
yarn.lock
package-lock.json

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
6 changes: 6 additions & 0 deletions examples/react/reusable-styled-form-component/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Example

To run this example:

- `npm install`
- `npm run dev`
14 changes: 14 additions & 0 deletions examples/react/reusable-styled-form-component/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html class="h-full w-full" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TanStack Reusable Styled Form Component</title>
<link rel="stylesheet" href="/src/index.css" />
</head>
<body class="h-full w-full bg-white dark:bg-black text-black dark:text-white">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="h-full w-full" id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
29 changes: 29 additions & 0 deletions examples/react/reusable-styled-form-component/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "@tanstack/reusable-styled-form-component",
"version": "0.0.1",
"main": "src/index.tsx",
"scripts": {
"dev": "vite --port=3001",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@heroicons/react": "^2.1.1",
"@tanstack/react-form": "<1.0.0",
"@tanstack/zod-form-adapter": "<1.0.0",
"cva": "1.0.0-beta.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-phone-number-input": "^3.3.8",
"zod": "^3.21.4"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"postcss": "8.4.32",
"tailwind-merge": "^2.2.0",
"tailwindcss": "^3.4.1",
"vite": "^5.0.10"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
22 changes: 22 additions & 0 deletions examples/react/reusable-styled-form-component/src/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react'

import { type buttonVariantProps, buttonVariants } from './variants'

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
buttonVariantProps

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, base = true, variant, size, ...props }, ref) => {
return (
<button
className={buttonVariants({ className, base, variant, size })}
ref={ref}
{...props}
/>
)
},
)

Button.displayName = 'Button'

export { Button, type ButtonProps }
Loading