TODO Oli Call Alle MUI components auf eine Seite loopen. No, just do it manually

TODO Test shadow DOM and theme in our repo TODO Show all components and with and without theme. Map all imports. TODO Write reasons why choosing MUI. GOals etc. TODO Commit message Contributing.MD Release notes

• tree shaking works
• pro plan https://mui.com/pricing/
  • https://mui.com/x/introduction/licensing/

TODO New datepicker

• https://mui.com/x/react-date-pickers/shortcuts/#range-shortcuts TODO Add example repo. Just use this repo's src directory? How to use theme etc.

TODO Figma import.

• Ask these questions to the person mentioned in helios Jira ticket

• Is this still working?

• How often do the colors, icon, illustrations change? Last release 6 months ago: npm view @trustedshops/helios-style-dictionary

• Figma links to colors, icons, illustrations?

• https://github.com/trustedshops/helios-style-dictionary

  • Has icons, color and illustrations
  • https://docs.trustedshops.dev/docs/color-palette
  • https://docs.trustedshops.dev/docs/helios-icons
  • https://docs.trustedshops.dev/docs/helios-illustrations

• Alternatives to us doing it custom

  • https://www.figma.com/community/plugin/1143682832255826428/color-import-export

• Custom components

  • Have same props as MUI, but map them to a function, that receives the props that we set and then consumer can replace, add, remove.
    • e.g. date picker presets

TODO CSS utils like spaicng etc from MUI?

• https://mui.com/system/getting-started/usage/
• Con: runtime cost https://mui.com/system/getting-started/usage/#:~:text=Runtime%20performance%20takes%20a%20hit.

TODO LInk in this README to: https://emotion.sh/docs/best-practices#use-the-style-prop-for-dynamic-styles https://github.com/emotion-js/emotion/discussions/2857

API

{/* heliosDateRangePickerConfig = {/} {/ container: /} {/ presetComponent: MuiButton,/} {/ }/} {/}*/}

<DateRangePicker localeText={{start: 'Check-in', end: 'Check-out'}} slots={{ shortcuts: () => { return ( <heliosDateRangePickerConfig.layout> {heliosDateRangePickerConfig.presets.map(90 => {<heliosDateRangePickerConfig.presetComponent>})} </heliosDateRangePickerConfig.layout> ) } }}/>

If button should be outline by default also have heliosButtonConfig.props.variant. Dann kann man auch heliosButtonConfig.props spreaden