React-calendar-timeline: Rework how styling is handled in this library

[mcMickJuice]

There are complications with build steps and including stylesheets and appropriate loaders when using this library. I think that replacing the current css solution with a CSS in JS solution removes a lot of friction related to style. I think we should strive for the following characteristics:

• completely remove css/sass in build
• provide default theme (same as current theme)
• allow extensibility through "themes". This would supplant users providing their own css sheet targeting internal classes.
• have deprecation step so that users utilizing css overrides have time to transition over...or not?
• expose js in css api when using groupRenderer, item renderer etc (similar to material-ui)

[mcMickJuice]

I'd be looking at JSS as the library to use here: https://github.com/cssinjs/jss

[educastellano]

I think the CSS should be imported outside the component (already transpiled from SCSS to CSS), so the user can import it in whatever bundler is using:

import Timeline from 'react-calendar-timeline'
import 'react-calendar-timeline/lib/Timeline.css'

ReactDOM.render(
  <Timeline />,
  document.getElementById('root')
);

[mcMickJuice]

this is a great idea and would take like...5 minutes to do (just update the docs, remove import from the code). Next release is gonna be a major bump, prob just go to 1.0 so this will definitely be in there.

[narmadham]

@mcMickJuice. That would be great. This will ease theme customization. When is v1.0 planned to be released?

[vasdee]

is this making it into the next release or available in the dev branch?

[mcMickJuice]

hey @vasdee i havent looked at this yet (not importing CSS in library code). I can try to get it into the next release but I've lately been focusing on performance improvements.

Can follow https://github.com/namespace-ee/react-calendar-timeline/issues/274 for this change

If you're asking about CSS in JS solution, I'm not sure if thats the right approach or even what the API for this would look like...

[mcMickJuice]

Closing. Might address this once we do an API redesign.