FEATURE: TS Rewrite

[Sebobo]

• Convert code to TypeScript
• Replace ReactCSS with CSS modules
• Use functional components
• Resolve Hide alpha value in hex mode #65
• Resolve Option to reset presetColors #53
• Resolve Allow setting string values via the preset color selector to choose theme colors #6
• Reduce bundle size (currently 123KB -> 112KB)

[Sebobo]

@jonnitto would love to have you as reviewer of this PR 🙂

[jonnitto]

The preset mode doesn't seem to work correctly:

presethex:
      type: string
      ui:
        label: 'Preset mode with hex values'
        inspector:
          editor: 'Shel.Neos.ColorPicker/ColorPickerEditor'
          editorOptions:
            mode: preset
            presetColors:
              - '#ff0000'
              - '#00ff00'
            allowEmpty: true

CleanShot.2022-10-27.at.17.02.43.mp4

[jonnitto]

Also, the preset mode with non-hex values doesn't work correctly:

preset:
      type: string
      ui:
        label: 'Preset mode with objects'
        inspector:
          editor: 'Shel.Neos.ColorPicker/ColorPickerEditor'
          editorOptions:
            mode: preset
            presetColors:
              - color: rgb(var(--color-main-theme))
                label: 'Main'
                value: 'main'
              - color: green
                label: 'Grün'
                value: 'minor'
              - color: '#ff0000'
                label: 'Rot'
                value: red
            allowEmpty: true

[jonnitto]

The hsla field show the fields with rgba values, but in this mode, I would expect the hsla values

[jonnitto]

With alpha hidden, you could make the height of the color bar higher:

[jonnitto]

The color bar is missing the drag handle:

[Sebobo]

Thx for testing everything !!!

The preset mode doesn't seem to work correctly:

• Fixed (only affected string only presets)

Also, the preset mode with non-hex values doesn't work correctly:

⚠️ This is currently not supported due to the used color plugin. I adjusted the readme to show this limitation. But of course one can set any color value in the value field.

With alpha hidden, you could make the height of the color bar higher:

• Adjusted the styles

The color bar is missing the drag handle:

• Fixed

The hsla field show the fields with rgba values, but in this mode, I would expect the hsla values

• The fields component needs to be adapted for that