fix(style): imports grouping, trivial

[dreglad]

This is a trivial style fix. Third party library imports are grouped apart from local imports throughout the project, I guess this file shouldn't be an exception.

✅ Checklist

I assume this change is too trivial to require anything from the checklist other than following the commit convention

• I have followed every step in the contributing guide (updated 2022-10-06).
• The PR title follows the convention we established conventional-commit
• Not required I performed a functional test on my final commit.

---

Changelog

[Not required]

---

Screenshots

[Not required]

💯

[changeset-bot]

⚠️ No Changeset found

Latest commit: 40e89e4

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]

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

1 Ignored Deployment

Name	Status	Preview	Updated
create-t3-app	⬜️ Ignored (Inspect)		Nov 22, 2022 at 0:15AM (UTC)

[c-ehrlich]

Looks good. I think this file just hadn't been worked in since this style of importing was implemented

[dreglad]

An additional thought on the topic

What about having imports sorted/grouped by the linter?

Something like prettier-plugin-sort-imports would do the job with minimal boilerplate.

I wouldn't disagree if some consider that grouping imports by default may be too opinionated, but I don't think anyone could reasonably argue against enforcing import order by default.. Much like prettier-plugin-tailwindcss already does for Tailwind classes

[bai]

prettier-plugin-tailwindcss and @trivago/prettier-plugin-sort-imports are not working together nicely, e.g. Cal.com does this sort of hacking: https://github.com/calcom/cal.com/blob/main/packages/config/merged-prettier-plugin.js

There's now Organize Imports in VS Code — wonder if it's something that could be unsed instead of prettier plugin hackery?

[wyattades]

Hey all, I know there's a lot of solutions/packages out there for "sortings imports", but I think one in particular is the best fit for the prettier + typescript philosophies: https://github.com/simonhaenisch/prettier-plugin-organize-imports

From there docs:

A plugin that makes Prettier organize your imports (i. e. sorts, combines and removes unused ones) using the organizeImports feature of the TypeScript language service API. This is the same as using the "Organize Imports" action in VS Code.

In other words, developers should not have to care about how imports are grouped. The plugin itself doesn't even know. Just let the typescript compiler decide.

---

Also, prettier-plugin-tailwindcss@0.2.0 supposedly fixes compatibility with the other prettier plugins.