docs: Update TSS docs and example

juraj98 commented 1 month ago

Docs:

~~Changed api/uploadthing.ts to pass correct object into req.~~ Reverted because behavior was changed in #1017
Removed now unnecessary // @ts-expect-error when importing CSS from ?url path

Other:

Updated TSS minimal example according to latest TSS guide.

Summary by CodeRabbit

New Features
- Introduced a comprehensive guide for setting up a Tanstack/Start project with UploadThing.
- Added instructions for installing UploadThing packages and configuring environment variables, including the UPLOADTHING_TOKEN.
- Expanded example for creating a FileRouter to handle file uploads, including authentication and file type specifications.
- Included code snippets for generating upload components and integrating styles with Tailwind CSS.
Documentation
- Enhanced documentation with detailed steps and examples for users to effectively utilize UploadThing, including customization options and additional resources.
- Updated TypeScript references and improved error handling in example files for better compatibility.
Chores
- Updated dependencies in package.json for improved compatibility and features.
- Added stricter null checking in TypeScript configuration for enhanced type safety.

changeset-bot[bot] commented 1 month ago

⚠️ No Changeset found

Latest commit: 2d109ecc7ddb6004c2ff085bce39137ae58cc4bd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-uploadthing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 8:14am

1 Skipped Deployment

coderabbitai[bot] commented 1 month ago

Walkthrough

This pull request introduces a comprehensive guide for setting up a Tanstack/Start project with UploadThing. It covers the installation of necessary packages, configuration of environment variables, and creation of a FileRouter for file uploads. The documentation includes metadata exports, warnings about obtaining an UploadThing token, and detailed examples for implementing UploadThing components and styles, including Tailwind CSS integration.

Changes

File Path	Change Summary
docs/src/app/(docs)/getting-started/tanstack-start/page.mdx	Enhanced documentation for setting up a Tanstack/Start project with UploadThing, including installation instructions, environment variable setup, and FileRouter creation. Added metadata export and UploadRouter type.
examples/minimal-tanstack-start/app/client.tsx	Added TypeScript reference directive for Vinxi types.
examples/minimal-tanstack-start/app/routes/__root.tsx	Modified CSS import statement for `@uploadthing/react` to resolve TypeScript error suppression.
examples/minimal-tanstack-start/app/routes/api/uploadthing.ts	Updated Route export to wrap handlers in an arrow function, allowing explicit request handling.
examples/minimal-tanstack-start/app/ssr.tsx	Introduced TypeScript reference directive for `vinxi/types/server` and modified export statement.
examples/minimal-tanstack-start/package.json	Updated versions of several dependencies and added a new dependency for `@vitejs/plugin-react`.
examples/minimal-tanstack-start/tsconfig.json	Added `"strictNullChecks": true` to enhance type safety in TypeScript.

Possibly related PRs

#973: This PR introduces a detailed guide for setting up a Tanstack/Start project with UploadThing, which directly relates to the main PR's comprehensive guide for the same setup.
#979: This PR fixes the export statements for the UploadButton and UploadDropzone components in the Tanstack/Start documentation, which is relevant to the changes made in the main PR regarding the FileRouter and component exports.
#982: This PR improves the getting started documentation for Tanstack/Start, including updates to import paths and CSS integration, which aligns with the main PR's focus on setting up UploadThing components.
#988: This PR makes several changes to the Tanstack/Start documentation, including updates to error handling and component types, which are directly related to the modifications in the main PR.
#991: This PR enhances the file type handling logic in the UploadThing library, which is related to the overall functionality discussed in the main PR regarding file uploads and the associated documentation.

Suggested reviewers

juliusmarminge

🐰 In the garden where the uploads flow,
A guide was crafted, now we know!
With UploadThing, our files take flight,
Setting up is now a delight!
So hop along, and join the fun,
With every upload, we’ve just begun! 🌼

📜 Recent review details

**Configuration used: CodeRabbit UI** **Review profile: CHILL**

📥 Commits

Files that changed from the base of the PR and between bcb34df4d91c6f5108be1a77ac0d32ca206a1ea5 and 56c751dffce54945016217ca2fd62a5ad3995e18.

⛔ Files ignored due to path filters (1)

* `pnpm-lock.yaml` is excluded by `!**/pnpm-lock.yaml`

📒 Files selected for processing (1)

* examples/minimal-tanstack-start/package.json (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

* examples/minimal-tanstack-start/package.json

--- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

pingdotgg / uploadthing