Add common React components

[meganindya]

Implement the following components in src/common/components/:

• Widgets

  • ⌛️ WIconButton

    • props:
      • size: big/small
      • asset: asset entry (TAsset)
      • handlerClick
    • use SImage component for the image

  • WTextButton

    • props:
      • content: text string
      • handlerClick

  • WToggleSwitch

  • WToggleSwitchRounded (similar to WToggleSwitch)

    • props:
      • active
      • clickHandler

  • WCheckbox (similar to WToggleSwitch)

    • props:
      • active
      • clickHandler

  • ⏸️ WDropdown

  • ⏸️ WSlider

  • ⏸️ WTextbox

• Structural

  • SImageVector

  • SImageRaster (similar to SImageVector)

    • props:
      • content: raster content data URL string

  • ⏸️ SInputField

• Layout

  • ⏸️ LButtonBar

    • collapsible

  • ⏸️ LContainerFlex

  • ⏸️ LContainerScrollable

  • ⏸️ LContainerWithTabs

Items preceded by ⏸️ are on hold, ones preceded by ⌛️ are ready to go, ones preceded by ✅ are done.

See Mockups.

---

• export component definition in src/common/components/index.ts
• see src/common/components/WToggleSwitch to get an idea of the expected code style

[disha1202]

Hi @meganindya, I have created a common component for text button.
But I'm unsure how it should look like.
Can you please share a reference.

[meganindya]

The repo isn't configured to develop individual components independently yet. Until, there is such a setup, you need to try some hacks. What I do is temporarily comment out everything in the entry file (now it's src/app/index.ts), import the component, and put a dummy ReactDOM.render()

[meganindya]

@disha1202 The mockups link is in the description.

[disha1202]

The repo isn't configured to develop individual components independently yet. Until, there is such a setup, you need to try some hacks. What I do is temporarily comment out everything in the entry file (now it's src/app/index.ts), import the component, and put a dummy ReactDOM.render()

@disha1202 The mockups link is in the description.

Thanks for sharing!

[Tushar98644]

@meganindya i came across a textbox which can fit the overall style of the website , the props can be passed as:

placeholder
Default
Sent

below is an image presenting the same :

[vedantiitkgp]

@meganindya which common react components are still available for which I can still contribute.

[Tushar98644]

@meganindya i came across a textbox which can fit the overall style of the website , the props can be passed as:

placeholder Default Sent

below is an image presenting the same :

@meganindya any updates?

[Karan-Palan]

I will start working on it !

[Apurv428]

@meganindya Is WIconButton done? If not, can I work on it? There are pull requests but none of them have been merged, so just confirming. Thanks!