feat(sort-interfaces): add `optionalityOrder` option

[chirokas]

Description

This PR adds the optionalityOrder option to the sort-interfaces rule.

This option has three possible values: ignore, optional-first, required-first.

If the required-first option is selected, then before any sorting/grouping configurations, we ensure that the members array has all its required elements first and all its optional elements second. We then perform the remaining sorting/grouping checks on the required subset and the optional subset.

Additional context

// .eslintrc.json
{
  "custom-groups": {
    "callback": "on*"
  },
  "groups": ["unknown", "callback"],
  "optionalityOrder": "required-first"
}

❌ Incorrect

interface ButtonProps {
  backgroundColor?: string
  label: string
  primary?: boolean
  size?: 'large' | 'medium' | 'small'
  onClick?(): void
}

✅ Correct

interface ButtonProps {
  label: string
  backgroundColor?: string
  primary?: boolean
  size?: 'large' | 'medium' | 'small'
  onClick?(): void
}

---

What is the purpose of this pull request?

• [ ] Bug fix
• [X] New Feature
• [ ] Documentation update
• [ ] Other

Before submitting the PR, please make sure you do the following

• [X] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [X] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• [X] Ideally, include relevant tests that fail without this PR but pass with it.
• [X] Read contribution guidelines.

[azat-io]

Thanks for the PR. It's a really good and needed feature. What do you think about using groups? Or do you think it would be better to implement a new optionalityOrder?

[chirokas]

Thanks for the PR. It's a really good and needed feature. What do you think about using groups? Or do you think it would be better to implement a new optionalityOrder?

I think it would be better to implement a new optionalityOrder.

Example :

// .eslintrc.json
{
  "custom-groups": {
    "callback": "on*"
  },
  "groups": ["unknown", "optional", "callback"]
}

interface ButtonProps {
  label: string
  backgroundColor?: string
  primary?: boolean
  size?: 'large' | 'medium' | 'small'
  onClick?(): void
}

Using the defineGroup function on the onClick property causes some problems because the onClick property itself is both an optional property and a callback function.

[azat-io]

Sorry for the long reply.

Okay, I agree with you. And what can you say about group priority and optionalityOrder?

For example, these are my settings:

{
  "rules": {
    "perfectionist/sort-interfaces": [
      "error",
      {
        "type": "natural",
        "order": "asc",
        "custom-groups": {
          "name": "name"
        },
        "groups": ["name", "unknown"],
        "optionalityOrder": "required-first"
      }
    ]
  }
}

How would that work here?

interface Props {
  name?: string
  age: number
}

[azat-io]

Another issue is the naming convention of options.

You're using camelCase in optionalityOrder. But we use kebab-case in 'custom-groups'.

[chirokas]

In my plan, it performs the following steps when called:

1. Perform sorting/grouping on a required subset and an optional subset.
2. Put all required members first (or all optional members first).

Correct:

interface Props {
  age: number
  name?: string
}

[azat-io]

Okay, thank you!