diff --git a/docs/general/Architecture/ShareComponents12.png b/docs/general/Architecture/ShareComponents12.png new file mode 100644 index 0000000000000000000000000000000000000000..9842d9ee998e4c2f4d4dfcb212effbb27ad1f1b7 Binary files /dev/null and b/docs/general/Architecture/ShareComponents12.png differ diff --git a/docs/general/Architecture/ShareComponents13.png b/docs/general/Architecture/ShareComponents13.png new file mode 100644 index 0000000000000000000000000000000000000000..3f56496b0e050e65b13af25dea72cc14400cbb83 Binary files /dev/null and b/docs/general/Architecture/ShareComponents13.png differ diff --git a/docs/general/Architecture/ShareComponents14.png b/docs/general/Architecture/ShareComponents14.png new file mode 100644 index 0000000000000000000000000000000000000000..d2e06fafdc0dc51658520e895b745b75f19a9aa8 Binary files /dev/null and b/docs/general/Architecture/ShareComponents14.png differ diff --git a/docs/general/Architecture/SharedComponents.md b/docs/general/Architecture/SharedComponents.md index cdb6b756c78d67a4f3f34274db4de98a3f5fc701..f4703c65ca7d662ffd18b7581ee01e9ed4df0a3f 100644 --- a/docs/general/Architecture/SharedComponents.md +++ b/docs/general/Architecture/SharedComponents.md @@ -53,12 +53,26 @@ The Button component creates customizable buttons with different visual styles a Options: - className (string): Additional CSS classes to apply to the button. -- variantStyles (string): Specifies the visual style of the button. Options include 'primary', 'secondary', 'ghost', or 'quiet'. Default is 'primary'. +- variantStyles (string): Specifies the visual style of the button. Options include 'primary', 'secondary', 'ghost', 'quiet' or 'remove'. Default is 'primary'. - icon (string): Specifies the icon to be displayed inside the button. Default is 'chevron-right'. - isIcon (boolean): If true, an icon will be displayed inside the button. Default is false. - isFrontIcon (boolean): If true, the icon will be displayed before the button text. Default is false. ![][image2] +## **ColorPicker** + +[url](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/shared/ColorPicker) +The ColorTilePicker component allows the selection of a color from the palette, including support for transparency (alpha). + +Options: + +- initialColor (Color): The initial color of the component, defined as object with an RGB integer value and an alpha transparency level (0-255). Default initial color is #000000 with full opacity. +- colorChange ((color: string): void): A callback function triggered when the color changes. It receives the new color in HEX format, including alpha transparency. +- height (string): Defines the height of the color selection button. Default is 40px. +- testId (string): A test identifier for selecting the component in tests. Default is 'color-tile-picker'. + +![][image12] + ## **DrawerHeading** [url](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/shared/DrawerHeading) @@ -148,6 +162,46 @@ Options: ![][image9] +## **OutsideClickWrapper** + +[url](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/shared/OutsideClickWrapper) +The OutsideClickWrapper component detects clicks outside its child elements and triggers a callback function. It is useful for closing context menu, dropdown, or any other interactive element when clicking outside. + +Options: + +- onOutsideClick ((): void): A callback function triggered when a click occurs outside the component’s children. +- children (React.ReactNode): The child elements wrapped inside the component. + +## **Select** + +[url](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/shared/Select) +The Select component provides a customizable dropdown menu that allows users to select an option from a list. It supports dynamic options, keyboard navigation, and highlights the selected item. + +Options: + +- options ({ id: number | string; name: string }[]): The list of selectable options, each containing an id and a name. +- selectedId (number | string | null): The id of the currently selected option. If null, no option is selected by default. +- onChange ((selectedId: number | string): void): A callback function triggered when a new option is selected. +- width: (string | number): Defines the dropdown width. Accepts a numeric pixel value or a CSS width string (e.g., '100%'). Default is '100%'. +- listClassName: (string): Additional CSS classes for styling the dropdown list. +- testId: (string): A test identifier for selecting the component in tests. Default is 'select-component'. + +![][image13] + +## **Switch** + +[url](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/shared/Switch) +The Switch component is a customizable toggle switch that allows users to enable or disable a setting. It supports different visual styles and can be controlled programmatically. + +Options: + +- variantStyles (string): Specifies the visual style of the switch. Options include 'primary', 'secondary', 'ghost' or 'quiet'. Default is 'primary'. +- isChecked (boolean): Determines whether the switch is initially checked (enabled). Default is false. +- onToggle ((checked: boolean): void): A callback function triggered when the switch state changes. Receives the new checked state (true or false) as an argument. +- id: (string): An optional id for the switch element. + +![][image14] + ## **Textarea** [url](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/shared/Textarea) @@ -186,3 +240,6 @@ Options: [image9]: ShareComponents9.png [image10]: ShareComponents10.png [image11]: ShareComponents11.png +[image12]: ShareComponents12.png +[image13]: ShareComponents13.png +[image14]: ShareComponents14.png diff --git a/src/components/SPA/MinervaSPA.component.tsx b/src/components/SPA/MinervaSPA.component.tsx index f086919b6aefbb458cd037d06c64459aacad5c8b..8af6072ea77481f39d42e155576dac53c629e312 100644 --- a/src/components/SPA/MinervaSPA.component.tsx +++ b/src/components/SPA/MinervaSPA.component.tsx @@ -6,7 +6,6 @@ import { twMerge } from 'tailwind-merge'; import { useEffect } from 'react'; import { PluginsManager } from '@/services/pluginsManager'; import { useInitializeStore } from '../../utils/initialize/useInitializeStore'; -// import { Modal } from '../FunctionalArea/Modal'; import { ContextMenu } from '../FunctionalArea/ContextMenu'; import { CookieBanner } from '../FunctionalArea/CookieBanner';