feat(organizations): add theming/story for Mantine TextInput TASK-1378 #5424

RuthShryock · 2025-01-16T15:24:46Z

🗒️ Checklist

run linter locally
update all related docs (API, README, inline, etc.), if any
draft PR with a title <type>(<scope>)<!>: <title> TASK-1234
tag PR: at least frontend or backend unless it's global
fill in the template below and delete template comments
review thyself: read the diff and repro the preview as written
open PR & confirm that CI passes
request reviewers, if needed
delete this section before merging

📣 Summary

Add theming and storybook for custom TextInput component.

💭 Notes

Mantine has different input types that are all based on the same underlying Input and InputWrapper components. The purpose of this PR is to configure TextInput, but most of the theme work has been done in those two base components so we will hopefully not have to repeat it for other input types.
This pr just includes the basic functionalities for a TextInput to work for in our organization task so more work will be needed in the future.

👀 Preview steps

Check out storybook and make sure that the TextInput is as similar to our TextBox component in terms of visuals and functionalities.

see: https://mantine.dev/guides/storybook/

to make it easier to migrate existing styles

…-setup

…o kalvis/mantine-setup

### 📣 Summary Adds theming and storybook entry for Mantine Menu component. ### 📖 Description Adds basic theming for the Mantine Menu component, primarily aimed at providing necessary style and functionality for use in the organization members list. In this context, the Menu component will be replacing KoboDropdown, but the latter is used, for example, as a building block of KoboSelect, so not all uses of KoboDropdown are under consideration here. ### 👀 Preview steps Run storybook and compare "Dropdown" story to the Actions dropdown (right side icon button) currently used in the organization Member table. --------- Co-authored-by: Paulo Amorim <[email protected]>

…ine-text-input

jsapp/js/components/common/textInput.stories.tsx

jsapp/js/components/common/textInput.tsx

jsapp/js/components/common/textInput.stories.tsx

jsapp/js/components/common/textInput.tsx

jsapp/js/theme/kobo/InputWrapper.ts

jsapp/js/theme/kobo/Input.module.css

pauloamorimbr · 2025-01-23T19:00:21Z

In the docs they suggest to use CSS modules due to performance instead of the vars approach, and also I believe it's clearer to set the CSS directly instead of setting the variables. Just my opinion.

I've created a draft PR with some changes fr us to talk about when possible: https://github.com/kobotoolbox/kpi/pull/5444/files

jsapp/js/components/common/textBox.stories.tsx

jsapp/js/components/common/textInput.tsx

jamesrkiger · 2025-01-28T17:52:49Z

@magicznyleszek @pauloamorimbr I have updated this PR after working with Paulo on a better approach:
4d9a78b

I removed the wrapped component. The main reason I used a wrapped component was for replacing right-side icons with an error icon when the input has errors. But our designs don't actually include that right-side error icon, so I decided to stick with a simpler implementation.

pauloamorimbr

2 really simple fixes and it seems ready to go! 💯

pauloamorimbr · 2025-01-28T23:16:13Z

jsapp/js/theme/kobo/InputWrapper.ts

Seems like this file is not being used anymore! 🤔

jsapp/js/theme/kobo/InputBase.ts

Co-authored-by: Paulo Amorim <[email protected]>

Akuukis and others added 23 commits December 11, 2024 17:48

refactor(frontend): add Mantine Component Library

3105f47

wip(frontend): example mantine usage

453f2c1

refactor(theme): rename theme

15b3557

refactor(theme): style Button

d782e38

wip: TODO before merge

eca5c85

refactor(theme): extend Button with tooltip

cde2874

Merge branch 'main' into kalvis/mantine-setup

7142d55

Fix Checkbox component misaligned element caused by Mantine's CSS Reset

511b407

setup Storybook for Mantine by following official guide

27e8f95

see: https://mantine.dev/guides/storybook/

improve gray color comments from Mantine theme

2df7caa

to make it easier to migrate existing styles

Merge branch 'main' into kalvis/mantine-setup

717f080

Merge branch 'main' into kalvis/mantine-setup

b5695da

Merge branch 'main' of github.com:kobotoolbox/kpi into kalvis/mantine…

af2517c

…-setup

Merge branch 'kalvis/mantine-setup' of github.com:kobotoolbox/kpi int…

29c9092

…o kalvis/mantine-setup

Merge branch 'main' into kalvis/mantine-setup

9293760

refactor(SimpleTable): drop BEM, use Mantine TASK-1377 (#5366)

d4dea03

Merge branch 'main' into kalvis/mantine-setup

bafb0be

Remove todo comment

4691dde

Merge branch 'main' of github.com:kobotoolbox/kpi into task-1378-mant…

4df19e6

…ine-text-input

Merge branch 'main' of github.com:kobotoolbox/kpi into task-1378-mant…

fc6fe0c

…ine-text-input

added wrapped mantine TextInput componenet with styling and storybook

047844e

add setValue

3aa2883

RuthShryock added the Front end label Jan 16, 2025

RuthShryock requested a review from magicznyleszek January 16, 2025 15:24

RuthShryock self-assigned this Jan 16, 2025

RuthShryock requested a review from jamesrkiger January 16, 2025 15:36

RuthShryock assigned jamesrkiger Jan 16, 2025

magicznyleszek requested changes Jan 20, 2025

View reviewed changes

Resolve merge conflicts

54f1976

Move theming and configuration to Input and InputWrapper components

11f4c62

jamesrkiger reviewed Jan 22, 2025

View reviewed changes

jsapp/js/theme/kobo/InputWrapper.ts Outdated Show resolved Hide resolved

jamesrkiger reviewed Jan 22, 2025

View reviewed changes

jsapp/js/theme/kobo/Input.module.css Outdated Show resolved Hide resolved

magicznyleszek requested changes Jan 24, 2025

View reviewed changes

jsapp/js/components/common/textBox.stories.tsx Show resolved Hide resolved

jsapp/js/components/common/textInput.tsx Outdated Show resolved Hide resolved

jamesrkiger added 2 commits January 28, 2025 12:06

Remove wrapped TextInput, add theming through InputBase and css module

4d9a78b

Resolve merge conflicts

9073cb0

jamesrkiger requested review from magicznyleszek and pauloamorimbr January 28, 2025 17:53

pauloamorimbr requested changes Jan 28, 2025

View reviewed changes

jamesrkiger and others added 2 commits January 29, 2025 06:26

Update jsapp/js/theme/kobo/InputBase.ts

b3c11a1

Co-authored-by: Paulo Amorim <[email protected]>

Delete outdated input wrapper theming

985bf49

jamesrkiger merged commit f84a9de into main Jan 29, 2025
7 checks passed

jamesrkiger deleted the task-1378-mantine-text-input branch January 29, 2025 11:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(organizations): add theming/story for Mantine TextInput TASK-1378 #5424

feat(organizations): add theming/story for Mantine TextInput TASK-1378 #5424

RuthShryock commented Jan 16, 2025 •

edited by jamesrkiger

Loading

pauloamorimbr commented Jan 23, 2025

jamesrkiger commented Jan 28, 2025

pauloamorimbr left a comment

pauloamorimbr Jan 28, 2025

feat(organizations): add theming/story for Mantine TextInput TASK-1378 #5424

feat(organizations): add theming/story for Mantine TextInput TASK-1378 #5424

Conversation

RuthShryock commented Jan 16, 2025 • edited by jamesrkiger Loading

🗒️ Checklist

📣 Summary

💭 Notes

👀 Preview steps

pauloamorimbr commented Jan 23, 2025

jamesrkiger commented Jan 28, 2025

pauloamorimbr left a comment

Choose a reason for hiding this comment

pauloamorimbr Jan 28, 2025

Choose a reason for hiding this comment

RuthShryock commented Jan 16, 2025 •

edited by jamesrkiger

Loading