SDP Componenet bar

[abhijeets-ht]

No description provided.

[tro9999]

As chakra is also using styled-components ... so you could get rid of the css files ( packages/sdkComponent/src/assets/Css/Component.css). You are already using styled components elsewhere.

Also just to point out... if you need to use !important in css, there is most likely something else wrong in component logic. Typically this shows the need of props configuration... Basically components should never use "!important" as it is then blocking override, when component is actually used.

[abhijeets-ht]

As chakra is also using styled-components ... so you could get rid of the css files ( packages/sdkComponent/src/assets/Css/Component.css). You are already using styled components elsewhere.

Also just to point out... if you need to use !important in css, there is most likely something else wrong in component logic. Typically this shows the need of props configuration... Basically components should never use "!important" as it is then blocking override, when component is actually used.

Hiii @tro9999 , I removed the css and commited a fresh code.Kindly have a look .

[tro9999]

Code looks ok now. Perhaps could from/to range checks and throw error, if invalid range. Also if other similar checks come to your mind, those would be good.
Change .jsx to .js.... so the default webpack config would work for building module.
Remove boilerplate story and code as it is not needed on this package...
Create proper index.js, so the component is exported in package.
Build the package and create test story where you import the package from dist folder.

[tro9999]

One new thing.... you could also think of creating logic for using own theme...
For example colours like this ... background: ${props => (props.position === "Mid" ? "#4CA6CD" : "#B4E4F8")}; could come from theme.
The theme should be created so it is possible to use with other components. Typically there is so called core package, which has own theme and other common components and utilities.

[tro9999]

You missed this.... "Change .jsx to .js.... so the default webpack config would work for building module."

Also the ThemeProvider should not be in component as it is HOC component. What I suggested.... "The theme should be created so it is possible to use with other components. Typically there is so called core package, which has own theme and other common components and utilities."
This means first create new package "core" and make sure theme is properly exported. Build the package and create new story to check it is working (import the package).
After this works check “lerna add”, so you can create the link and use this with other components. As this is not yet published (npmjs), it is not possible to use normal yarn add…