feat(organizations): add theming/story for Mantine Loader and Loading…

…Overlay TASK-1464 (#5425)

### 📣 Summary
Theming for Mantine's Loader and LoadingOverlay was added to match
Kobo's current LoadingSpinner for general purpose.

### 📖 Description
Both 'regular' and 'big' variant were added with its respective type
names to be used with Mantine's `Loader` and `LoadingOverlay`
components.
To simplify the implementation I decided to simply use the existing
`LoadingSpinner` component instead of extracting it's contents.
Since Mantine's `Loader` doesn't have the `message` parameter, right now
I'm fixing it on `false` so it won't appear. We may need to implement a
Wrapper in the future to add a message, depending on our future needs.

* `LoadingOverlay` is already in use at
#5414


### 👀 Preview steps
- Use storybook to check the visual of the component and compare with
the existing loader in use in the app.

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

@@ -0,0 +1,46 @@
+import {Center, Loader} from '@mantine/core';
+import type {Meta, StoryObj} from '@storybook/react';
+
+/**
+ * Mantine [Loader](https://mantine.dev/core/loader/) component stories.
+ */
+const meta: Meta<typeof Loader> = {
+  title: 'Common/Loader',
+  component: Loader,
+  decorators: [
+    (Story) => (
+      <Center w='400' p='md'>
+        <Story />
+      </Center>
+    ),
+  ],
+  argTypes: {
+    type: {
+      description: 'Select loader type',
+      options: ['regular', 'big'],
+      control: 'radio',
+    },
+  },
+};
+
+type Story = StoryObj<typeof Loader>;
+
+/**
+ * Regular variant
+ */
+export const Regular: Story = {
+  args: {
+    type: 'regular',
+  },
+};
+
+/**
+ * Big variant
+ */
+export const Big: Story = {
+  args: {
+    type: 'big',
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,77 @@
+import {
+  Button,
+  Card,
+  Center,
+  LoadingOverlay,
+  PasswordInput,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import type {Meta, StoryObj} from '@storybook/react';
+
+/**
+ * Mantine [LoadingOverlay](https://mantine.dev/core/loading-overlay/) component stories.
+ *
+ * Component used to display an overlay  over the sibling content containing the Loader component
+ */
+const meta: Meta<typeof LoadingOverlay> = {
+  title: 'Common/LoadingOverlay',
+  component: LoadingOverlay,
+  decorators: [
+    (Story) => (
+      <Center w='400' p='md'>
+        <Stack gap='md'>
+          <Card w='300' p='md' withBorder>
+            <Stack gap='md'>
+              <Story />
+              <Text>Sibling components...</Text>
+              <TextInput label='User' placeholder='Type something...' />
+              <PasswordInput label='Password' placeholder='Type something...' />
+              <Button>Submit</Button>
+            </Stack>
+          </Card>
+          <Button>Button not sibling</Button>
+        </Stack>
+      </Center>
+    ),
+  ],
+  argTypes: {
+    visible: {
+      description: 'Controls overlay visibility',
+      control: 'boolean',
+    },
+  },
+};
+
+type Story = StoryObj<typeof LoadingOverlay>;
+
+/**
+ * LoadingOverlay component visible
+ */
+export const Visible: Story = {
+  args: {
+    visible: true,
+  },
+};
+
+/**
+ * LoadingOverlay component not visible
+ */
+export const NotVisible: Story = {
+  args: {
+    visible: false,
+  },
+};
+
+/**
+ * Using 'big' variant
+ */
+export const Big: Story = {
+  args: {
+    visible: true,
+    loaderProps: {type: 'big'},
+  },
+};
+
+export default meta;

jsapp/js/theme/kobo/Loader.tsx

@@ -0,0 +1,29 @@
+import type {MantineLoaderComponent} from '@mantine/core';
+import {Box, Loader} from '@mantine/core';
+import LoadingSpinner from 'jsapp/js/components/common/loadingSpinner';
+import {forwardRef} from 'react';
+
+const KoboLoaderRegular: MantineLoaderComponent = forwardRef(
+  ({...others}, ref) => (
+    <Box component='span' {...others} ref={ref}>
+      <LoadingSpinner message={false} />
+    </Box>
+  )
+);
+
+const KoboLoaderBig: MantineLoaderComponent = forwardRef(({...others}, ref) => (
+  <Box component='span' {...others} ref={ref}>
+    <LoadingSpinner message={false} type='big' />
+  </Box>
+));
+
+export const LoaderThemeKobo = Loader.extend({
+  defaultProps: {
+    loaders: {
+      ...Loader.defaultLoaders,
+      regular: KoboLoaderRegular,
+      big: KoboLoaderBig,
+    },
+    type: 'regular',
+  },
+});

jsapp/js/theme/kobo/index.ts

@@ -6,6 +6,7 @@ import {TooltipThemeKobo} from './Tooltip';
 import {MenuThemeKobo} from './Menu';
 import {AlertThemeKobo} from './Alert';
 import {SelectThemeKobo} from './Select';
+import {LoaderThemeKobo} from './Loader';
 
 export const themeKobo = createTheme({
   primaryColor: 'blue',
@@ -83,8 +84,7 @@ export const themeKobo = createTheme({
     lg: rem(16),
     xl: rem(18),
   },
-  lineHeights: {
-  },
+  lineHeights: {},
   headings: {
     fontWeight: '500',
   },
@@ -109,5 +109,6 @@ export const themeKobo = createTheme({
     Tooltip: TooltipThemeKobo,
     Table: TableThemeKobo,
     Select: SelectThemeKobo,
+    Loader: LoaderThemeKobo,
   },
 });