chore: adds import/order eslint rule to demo-store template

[QuintonC]

WHY are these changes introduced?

For the demo-store:

• The current linting configuration deviates from Remix in that it does not utilize the @typescript-eslint/consistent-type-imports rule.
• The @remix-run/eslint-config package is installed in package.json, but was not being used in the eslint configuration.

Regarding import/order additions:

• import/order is considered a Shopify best practice and is introduced here to reiterate and lean on that. shopify/web-configs/esnext

WHAT is this pull request doing?

This pull request adds import/order eslint rules for the demo-store as a start. Instead of adding it for the entire repository in one pull request, it makes the most sense to import this in smaller chunks.

To address the lint violations, a simple npm run lint --fix was used. There were only three additional issues which remained:

➜  demo-store git:(chore/demo-store-lint-configuration) ✗ npm run lint
npm WARN ignoring workspace config at /Users/quintonchester/Repos/hydrogen/templates/demo-store/.npmrc

> [email protected] lint
> eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .

/Users/quintonchester/Repos/hydrogen/templates/demo-store/app/lib/utils.ts
  3:1  error  There should be no empty line within import group  import/order

/Users/quintonchester/Repos/hydrogen/templates/demo-store/app/routes/($locale).account.tsx
  133:10  error  'Account' is already defined  @typescript-eslint/no-redeclare

/Users/quintonchester/Repos/hydrogen/templates/demo-store/app/routes/($locale).products.$productHandle.tsx
  114:25  error  'Product' is already defined  @typescript-eslint/no-redeclare

✖ 3 problems (3 errors, 0 warnings)

Addressing those violations saw the following changes:

• utils.ts 3:1
  • Removed the empty line within the import group.
• ($locale).account.tsx
  • interface Account was updated to interface AccountType. Casted types were updated to reflect this change.
• ($locale).products.$productHandle.tsx
  • The additional Product definition was an imported module which was seemingly unused -- please do check me on this as I was unable to determine the relevance of the import seen here. Diff

HOW to test your changes?

• This should be tested primarily via green CI ✅
• Do a test with the demo-store template from this branch.

Post-merge steps

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[QuintonC]

This was included to ensure that the pre-commit scripts for eslint used the correct import/order definition since the lint configuration at the root of the monorepo will be used for the eslint check.

[QuintonC]

This module has no types, but was somehow passing the typecheck CI step previously. Not entirely sure how that was possible, but this resolves that issue 👍

Here is the failed CI run for those curious

[benjaminsehl]

This is awesome, thanks @QuintonC.

Does import order impact the Skeleton template? I recall your suggested order matching this.

[QuintonC]

This is awesome, thanks @QuintonC.

Does import order impact the Skeleton template? I recall your suggested order matching this.

Not just yet -- I'm planning on addressing other templates after this one. I wanted to tackle them one at a time to prevent from having an extremely large pull request 😅

[frehner]

Looks great, thanks!

One thing before we merge - can you add a patch changeset for the demo-store? We're keeping track of changes to the demo-store and using changesets to do it. Thanks!

[QuintonC]

Looks great, thanks!

One thing before we merge - can you add a patch changeset for the demo-store? We're keeping track of changes to the demo-store and using changesets to do it. Thanks!

Absolutely. Thanks!