Feat/filters (#81)

* feat(redmine 1245005): add filters component in searchResultPage

* feat(redmine 1245005): add number counter fo actif filters

* feat(redmine 1245005): add indentation without line style for collapseButton

* feat(redmine 1245005): add new fonctionality Button remove location and active filters collapse

* feat(redmine 1245005): add button close all +  open all + add function getFiltersMenuId

* feat(redmine 1245005): add line for between button open and close

* feat(redmine 1245005): use flat() for collapse menu active

* feat(redmine 1245005): modify story and rename Fiters to filtersBar component

* feat(redmine 1245005): modify story and rename Fiters to filtersBar component

* feat(redmine 1245005): add dynamique data for search results

* feat(redmine 1245005): fix no-wrap error for badge in filters active section

* feat(redmine 1245005): add filters numbers active value on searchbar

* feat(redmine 1245005): fixe test mantine ids test error

* feat(redmine 1245005): fixe intégration error

* feat(redmine 1245005): fixe pr review by Quentin

* feat(redmine 1245005): fixe pr review by Quentin

* feat(redmine 1245005): fix pr conflicts

.changeset/slow-rivers-confess.md

@@ -0,0 +1,6 @@
+---
+'@smile/react-front-kit': minor
+'storybook-pages': minor
+---
+
+Add the filtersBar component and add it to the searchResult page

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
+  // Pointez pour afficher la description des attributs existants.
+  // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

packages/react-front-kit/src/Components/CollapseButton/CollapseButton.stories.tsx

@@ -14,6 +14,10 @@ const meta = {
     id: {
       control: 'text',
     },
+    indentation: {
+      control: 'select',
+      options: ['line', 'simple'],
+    },
     label: {
       control: 'text',
     },
@@ -49,11 +53,11 @@ export const CollapseButton: IStory = {
     children,
     fullWidth: true,
     id: '',
+    indentation: 'simple',
     isOpenOnSelect: false,
     label: 'Home',
     leftIcon: iconsElements.HouseLine,
     level: 0,
-    line: false,
     radius: 0,
     selected: false,
     variant: 'white',
@@ -80,11 +84,11 @@ export const Nested: IStory = {
     ),
     fullWidth: true,
     id: '',
+    indentation: 'line',
     isOpenOnSelect: false,
     label: 'Pull Requests',
     leftIcon: iconsElements.User,
     level: 0,
-    line: true,
     radius: 0,
     selected: false,
   },
@@ -101,7 +105,6 @@ export const WithLink: IStory = {
     label: 'Home',
     leftIcon: iconsElements.HouseLine,
     level: 0,
-    line: false,
     radius: 0,
     selected: false,
     variant: 'white',

packages/react-front-kit/src/Components/CollapseButton/CollapseButton.tsx

@@ -24,10 +24,10 @@ export interface ICollapseButtonProps<
   componentProps?: ComponentPropsWithoutRef<C>;
   defaultOpened?: boolean;
   id?: T;
+  indentation?: 'line' | 'simple';
   isOpenOnSelect?: boolean;
   label?: ReactNode;
   level?: number;
-  line?: boolean;
   onSelect?: (id?: T) => void;
   selected?: boolean;
 }

packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx

@@ -27,6 +27,16 @@ const useStyles = createStyles((theme) => ({
     background:
       theme.colorScheme === 'light' ? theme.white : theme.colors.dark[7],
   },
+  indentationLine: {
+    borderLeft:
+      theme.colorScheme === 'light'
+        ? `1px solid ${theme.colors.gray[1]}`
+        : `1px solid ${theme.colors.gray[8]}`,
+    marginLeft: 30,
+  },
+  indentationSimple: {
+    paddingLeft: 30,
+  },
   label: {
     color:
       theme.colorScheme === 'light'
@@ -41,13 +51,6 @@ const useStyles = createStyles((theme) => ({
   labelLevel1: {
     fontSize: theme.fontSizes.md,
   },
-  line: {
-    borderLeft:
-      theme.colorScheme === 'light'
-        ? `1px solid ${theme.colors.gray[1]}`
-        : `1px solid ${theme.colors.gray[8]}`,
-    marginLeft: 30,
-  },
   rightIcon: {
     color:
       theme.colorScheme === 'light'
@@ -89,10 +92,10 @@ export function CollapseButtonControlled<
     fullWidth = true,
     id,
     isOpenOnSelect = false,
+    indentation,
     label,
     leftIcon,
     level = 0,
-    line,
     onCollapseChange,
     onSelect,
     opened = false,
@@ -129,6 +132,14 @@ export function CollapseButtonControlled<
     rootClasses.push(classes.rootDeepLevel);
     labelClasses.push(classes.labelDeepLevel);
   }
+
+  const indentationStyle =
+    indentation === 'simple'
+      ? classes.indentationSimple
+      : indentation === 'line'
+        ? classes.indentationLine
+        : '';
+
   return (
     <>
       <Button
@@ -184,7 +195,7 @@ export function CollapseButtonControlled<
       </Button>
       {Boolean(children) && (
         <Collapse
-          className={line ? classes.line : ''}
+          className={indentationStyle}
           data-testid="content"
           in={opened}
           {...collapseProps}