From c309a778026da541fe2686a1ffa6bf6760fa47ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalvis=20Kalni=C5=86=C5=A1?= Date: Wed, 11 Dec 2024 17:48:30 +0200 Subject: [PATCH 01/15] refactor(frontend): add Mantine Component Library --- jsapp/js/app.jsx | 23 +++++++++-------------- jsapp/js/theme/themeDefault.ts | 5 +++++ 2 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 jsapp/js/theme/themeDefault.ts diff --git a/jsapp/js/app.jsx b/jsapp/js/app.jsx index 1685113ef0..b41d82f9e9 100644 --- a/jsapp/js/app.jsx +++ b/jsapp/js/app.jsx @@ -30,13 +30,13 @@ import {isAnyProcessingRouteActive} from 'js/components/processing/routes.utils' import pageState from 'js/pageState.store'; import '@mantine/core/styles.css'; -import { MantineProvider } from '@mantine/core'; +import {MantineProvider} from '@mantine/core'; // Query-related -import { QueryClientProvider } from '@tanstack/react-query'; -import { queryClient } from './query/queryClient.ts'; -import { RequireOrg } from './router/RequireOrg'; -import { themeKobo } from './theme'; +import {QueryClientProvider} from '@tanstack/react-query'; +import {queryClient} from './query/queryClient.ts'; +import {RequireOrg} from './router/RequireOrg'; +import {themeKobo} from './theme'; class App extends React.Component { constructor(props) { @@ -98,9 +98,8 @@ class App extends React.Component { }; if (typeof this.state.pageState.modal === 'object') { - pageWrapperModifiers[ - `is-modal-${this.state.pageState.modal.type}` - ] = true; + pageWrapperModifiers[`is-modal-${this.state.pageState.modal.type}`] = + true; } // TODO: We have multiple routes that shouldn't display `MainHeader`, @@ -116,9 +115,9 @@ class App extends React.Component { - {this.shouldDisplayMainLayoutElements() && + {this.shouldDisplayMainLayoutElements() && (
- } + )} - {/* React Query Devtools - GUI for inspecting and modifying query status (https://tanstack.com/query/latest/docs/framework/react/devtools) They only show up in dev server (NODE_ENV==='development') @@ -166,15 +164,12 @@ class App extends React.Component { */} - - ); } } - reactMixin(App.prototype, Reflux.connect(pageState, 'pageState')); reactMixin(App.prototype, mixins.contextRouter); diff --git a/jsapp/js/theme/themeDefault.ts b/jsapp/js/theme/themeDefault.ts new file mode 100644 index 0000000000..f0178a73fd --- /dev/null +++ b/jsapp/js/theme/themeDefault.ts @@ -0,0 +1,5 @@ +import {createTheme} from '@mantine/core'; + +export const themeDefault = createTheme({ + /** Put your mantine theme override here */ +}); From 1077ac0de88f5796a9ebbd2c3b814ef576916d7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalvis=20Kalni=C5=86=C5=A1?= Date: Wed, 11 Dec 2024 17:48:47 +0200 Subject: [PATCH 02/15] wip(frontend): example mantine usage --- jsapp/js/components/drawer.es6 | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/jsapp/js/components/drawer.es6 b/jsapp/js/components/drawer.es6 index b4288d190d..f096bbcfe9 100644 --- a/jsapp/js/components/drawer.es6 +++ b/jsapp/js/components/drawer.es6 @@ -52,12 +52,12 @@ const FormSidebar = observer( // in dev environment. Unfortunately `router.subscribe` doesn't return // a cancel function, so we can't make it stop. // TODO: when refactoring this file, make sure not to use the legacy code. - this.unlisteners.push( - router.subscribe(this.onRouteChange.bind(this)) - ); + this.unlisteners.push(router.subscribe(this.onRouteChange.bind(this))); } componentWillUnmount() { - this.unlisteners.forEach((clb) => {clb();}); + this.unlisteners.forEach((clb) => { + clb(); + }); } newFormModal(evt) { evt.preventDefault(); @@ -73,7 +73,9 @@ const FormSidebar = observer( fullWidth disabled={!sessionStore.isLoggedIn} onClick={this.newFormModal.bind(this)} - >{t('new').toUpperCase()} + > + {t('new').toUpperCase()} + From 5651b483900ab4e57579ad45458ab19f226a37eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalvis=20Kalni=C5=86=C5=A1?= Date: Thu, 12 Dec 2024 22:56:54 +0200 Subject: [PATCH 03/15] refactor(theme): rename theme --- jsapp/js/theme/themeDefault.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 jsapp/js/theme/themeDefault.ts diff --git a/jsapp/js/theme/themeDefault.ts b/jsapp/js/theme/themeDefault.ts deleted file mode 100644 index f0178a73fd..0000000000 --- a/jsapp/js/theme/themeDefault.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createTheme} from '@mantine/core'; - -export const themeDefault = createTheme({ - /** Put your mantine theme override here */ -}); From be66c2e020ce37483f52c12ccafd40b124a157c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalvis=20Kalni=C5=86=C5=A1?= Date: Thu, 12 Dec 2024 23:02:33 +0200 Subject: [PATCH 04/15] refactor(theme): style Button --- jsapp/js/components/common/button.stories.tsx | 162 ++++++++++++++---- jsapp/js/theme/kobo/index.ts | 3 +- 2 files changed, 127 insertions(+), 38 deletions(-) diff --git a/jsapp/js/components/common/button.stories.tsx b/jsapp/js/components/common/button.stories.tsx index 69b0e0ae85..d49c94eec8 100644 --- a/jsapp/js/components/common/button.stories.tsx +++ b/jsapp/js/components/common/button.stories.tsx @@ -2,7 +2,11 @@ import React from 'react'; import type {ComponentStory, ComponentMeta} from '@storybook/react'; import {IconNames} from 'jsapp/fonts/k-icons'; import type {IconName} from 'jsapp/fonts/k-icons'; -import type {MantineSize, PolymorphicComponentProps, TooltipProps} from '@mantine/core'; +import type { + MantineSize, + PolymorphicComponentProps, + TooltipProps, +} from '@mantine/core'; import Icon from './icon'; import '@mantine/core/styles.css'; import Button, {type ButtonProps} from './ButtonNew'; @@ -31,7 +35,20 @@ const buttonSizes: MantineSize[] = [ // 'xl', ]; -const tooltipPositions: Array> = ['top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'] as const; +const tooltipPositions: Array> = [ + 'top', + 'right', + 'bottom', + 'left', + 'top-end', + 'top-start', + 'right-end', + 'right-start', + 'bottom-end', + 'bottom-start', + 'left-end', + 'left-start', +] as const; export default { title: 'common/Button', @@ -50,53 +67,102 @@ export default { leftSectionS: { description: 'Icon on the beginning', options: Object.keys(IconNames), - mapping: Object.keys(IconNames).map((key) => [key, ] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: {type: 'select'}, if: {arg: 'size', eq: 'sm'}, }, leftSectionM: { description: 'Icon on the beginning', options: Object.keys(IconNames), - mapping: Object.keys(IconNames).map((key) => [key, ] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: {type: 'select'}, if: {arg: 'size', eq: 'md'}, }, leftSectionL: { description: 'Icon on the beginning', options: Object.keys(IconNames), - mapping: Object.keys(IconNames).map((key) => [key, ] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: {type: 'select'}, if: {arg: 'size', eq: 'lg'}, }, rightSectionS: { description: 'Icon on the end', options: Object.keys(IconNames), - mapping: Object.keys(IconNames).map((key) => [key, ] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: {type: 'select'}, if: {arg: 'size', eq: 'sm'}, }, rightSectionM: { description: 'Icon on the end', options: Object.keys(IconNames), - mapping: Object.keys(IconNames).map((key) => [key, ] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: {type: 'select'}, if: {arg: 'size', eq: 'md'}, }, rightSectionL: { description: 'Icon on the end', options: Object.keys(IconNames), - mapping: Object.keys(IconNames).map((key) => [key, ] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: {type: 'select'}, if: {arg: 'size', eq: 'lg'}, }, - tooltip: { - description: 'Tooltip text', - control: 'text', + rightSectionS: { + description: 'Icon on the end', + options: Object.keys(IconNames), + mapping: Object.keys(IconNames) + .map( + (key) => [key, ] as const + ) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), + control: {type: 'select'}, + if: {arg: 'size', eq: 'sm'}, }, tooltipProps: { description: 'Position of the tooltip (optional)', options: tooltipPositions, - mapping: tooltipPositions.map((position) => [position, {position}] as const).reduce((o, [k, v]) => {return {...o, [k]: v};}, {}), + mapping: tooltipPositions + .map((position) => [position, {position}] as const) + .reduce((o, [k, v]) => { + return {...o, [k]: v}; + }, {}), control: 'radio', }, disabled: {control: 'boolean'}, @@ -108,8 +174,23 @@ export default { }, } as ComponentMeta; -const Template: ComponentStory = ({leftSectionS, leftSectionM, leftSectionL, rightSectionS, rightSectionM, rightSectionL, ...args}: any) => - - - + + ); }) - )) - ))} + ) + )}
); diff --git a/jsapp/js/theme/kobo/index.ts b/jsapp/js/theme/kobo/index.ts index 6a485c558d..bbf255fe29 100644 --- a/jsapp/js/theme/kobo/index.ts +++ b/jsapp/js/theme/kobo/index.ts @@ -82,8 +82,7 @@ export const themeKobo = createTheme({ lg: rem(16), xl: rem(18), }, - lineHeights: { - }, + lineHeights: {}, headings: { fontWeight: '500', }, From 6a123c7a3c2f6f4524c266c5940461791e76f9f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalvis=20Kalni=C5=86=C5=A1?= Date: Thu, 12 Dec 2024 23:34:09 +0200 Subject: [PATCH 05/15] wip: TODO before merge --- jsapp/js/components/drawer.es6 | 1 + 1 file changed, 1 insertion(+) diff --git a/jsapp/js/components/drawer.es6 b/jsapp/js/components/drawer.es6 index f096bbcfe9..ba206611a8 100644 --- a/jsapp/js/components/drawer.es6 +++ b/jsapp/js/components/drawer.es6 @@ -68,6 +68,7 @@ const FormSidebar = observer( render() { return ( <> + {/* TODO: undo before merge! */} - - + + ); }) - ) - )} + )) + ))} ); diff --git a/jsapp/js/components/drawer.es6 b/jsapp/js/components/drawer.es6 index ba206611a8..b4288d190d 100644 --- a/jsapp/js/components/drawer.es6 +++ b/jsapp/js/components/drawer.es6 @@ -52,12 +52,12 @@ const FormSidebar = observer( // in dev environment. Unfortunately `router.subscribe` doesn't return // a cancel function, so we can't make it stop. // TODO: when refactoring this file, make sure not to use the legacy code. - this.unlisteners.push(router.subscribe(this.onRouteChange.bind(this))); + this.unlisteners.push( + router.subscribe(this.onRouteChange.bind(this)) + ); } componentWillUnmount() { - this.unlisteners.forEach((clb) => { - clb(); - }); + this.unlisteners.forEach((clb) => {clb();}); } newFormModal(evt) { evt.preventDefault(); @@ -68,15 +68,12 @@ const FormSidebar = observer( render() { return ( <> - {/* TODO: undo before merge! */} + >{t('new').toUpperCase()} diff --git a/jsapp/js/theme/kobo/index.ts b/jsapp/js/theme/kobo/index.ts index 6c2b67ea4e..30167bd159 100644 --- a/jsapp/js/theme/kobo/index.ts +++ b/jsapp/js/theme/kobo/index.ts @@ -83,7 +83,8 @@ export const themeKobo = createTheme({ lg: rem(16), xl: rem(18), }, - lineHeights: {}, + lineHeights: { + }, headings: { fontWeight: '500', }, From 9c624e9823a906a688c8093dd45af7d84f0a7308 Mon Sep 17 00:00:00 2001 From: Paulo Amorim Date: Thu, 16 Jan 2025 18:30:25 -0300 Subject: [PATCH 14/15] Fix cell size --- jsapp/js/account/organization/MembersRoute.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jsapp/js/account/organization/MembersRoute.tsx b/jsapp/js/account/organization/MembersRoute.tsx index 916ed22aa1..71c0aaa7c9 100644 --- a/jsapp/js/account/organization/MembersRoute.tsx +++ b/jsapp/js/account/organization/MembersRoute.tsx @@ -68,7 +68,7 @@ export default function MembersRoute() { { key: 'role', label: t('Role'), - size: 120, + size: 140, cellFormatter: (member: OrganizationMember) => { if ( member.role === OrganizationUserRole.owner || From 13bd3832c5facfd49b4c17cd8efbebb97a49d943 Mon Sep 17 00:00:00 2001 From: Paulo Amorim Date: Tue, 21 Jan 2025 17:31:59 -0300 Subject: [PATCH 15/15] deprecate koboSelect --- jsapp/js/components/common/koboSelect.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jsapp/js/components/common/koboSelect.stories.tsx b/jsapp/js/components/common/koboSelect.stories.tsx index a097c8f044..7ba9bce701 100644 --- a/jsapp/js/components/common/koboSelect.stories.tsx +++ b/jsapp/js/components/common/koboSelect.stories.tsx @@ -3,7 +3,7 @@ import type {ComponentStory, ComponentMeta} from '@storybook/react'; import KoboSelect from 'js/components/common/koboSelect'; export default { - title: 'common/KoboSelect', + title: 'commonDeprecated/KoboSelect', component: KoboSelect, argTypes: { selectedOption: {