We want to build a component for editing CSS properties which is similar to the devtools panel in which one can view and edit the styles on an element (check photos and videos). The component should work standalone and the set of properties to display will be provided as an input. We want to build this component in SolidJS preferably, otherwise with ReactJS with Hooks.
In brief, one should be able to
1. Enable or disable a property
2. Edit a property
3. Add a property to a class
4. When editing a property gives suggestions for possible set of applicable values for that property
5. One is able to increase or decrease values or shuffle through different values using the arrow buttons
6. When adding a new property gives suggestions for valid properties
7. On hover can give a small tooltip help for the CSS property
8. Can have syntax highlighting using prismjs
One can play around with the devtools component to get a better idea .
The ask is
1. To first draft the specifications and functionalities in detail and get a mutual agreement on them
2. Provide storybook for all components and sub components
3. Use CSS modules and SolidJS only.
4. Get the code reviewed at the correct stages.
5. Provide support and help (should be very limited) later if required.
6. Do not use any third party libraries other than SolidJS and Prism.
Here is a video description - [login to view URL]
Kindly go through it
The work should be delivered in three milestones
1. Specification of Component definitions and their props.
2. All presentational UI components and sub components
3. Fully functional compon