docs(VariantManagement): add FilterBar example (#4857)

Author: Lukas742

packages/main/src/components/VariantManagement/VariantManagement.mdx

@@ -32,7 +32,7 @@ These props accept props of the `Input` component with which you are able to ove
 
 <Canvas of={ComponentStories.WithCustomValidation} sourceState="none" />
 
-**Code Example**
+### Code Example
 
 <details style={{ marginBlockEnd: "2rem" }}>
 
@@ -114,6 +114,246 @@ export const VariantManagementWithCustomValidation = () => {
 
 </details>
 
+## Basic VariantManagement Implementation
+
+This example shows how a basic implementation of the `VariantManagement` inside a `FilterBar` could look like. For a more in depth documentation you can take a look at the official [Fiori for Web Design Guidelines](https://experience.sap.com/fiori-design-web/variant-management/).
+
+**Note:** All views are applied automatically, so the "Apply Automatically" checkboxes in both dialogs won't be visible.
+
+<Canvas of={ComponentStories.WithFilterBarImplementation} sourceState="none" />
+
+### Code Example
+
+<details style={{ marginBlockEnd: "2rem" }}>
+
+<summary>Show Code</summary>
+
+```tsx
+function FilterBarWithVariantManagement() {
+  const [selectedVariant, setSelectedVariant] = useState('Standard');
+  const [defaultVariant, setDefaultVariant] = useState('Standard');
+  const [customVariants, setCustomVariants] = useState<VariantItemPropTypes[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [checkIfDiry, setCheckIfDirty] = useState(false);
+
+  // this should be persisted (e.g. by the local storage of the browser or on the server)
+  const initialVariantValues = useRef({
+    Standard: {
+      selectedCountry: 'Indonesia',
+      date: '',
+      selectedCodes: {}
+    }
+  });
+
+  const filterReducer = (state, action) => {
+    const { payload, type } = action;
+    setCheckIfDirty(true);
+    switch (type) {
+      case 'selectedCountry':
+        return { ...state, selectedCountry: payload };
+      case 'date':
+        return { ...state, date: payload };
+      case 'selectedCodes':
+        return { ...state, selectedCodes: payload };
+      case 'changeVariant':
+        return payload;
+      default:
+        console.warn('Unknown action type!');
+        return state;
+    }
+  };
+
+  const [filters, dispatchFiltersChange] = useReducer(filterReducer, initialVariantValues.current.Standard);
+  const { selectedCountry, date, selectedCodes } = filters;
+
+  const handleSelectChange = (e) => {
+    const { selectedOption } = e.detail;
+    dispatchFiltersChange({ type: 'selectedCountry', payload: selectedOption.textContent });
+  };
+  const handleDateChange = (e) => {
+    dispatchFiltersChange({ type: 'date', payload: e.detail.value });
+  };
+  const handleSelectedCodesChange = (e) => {
+    dispatchFiltersChange({
+      type: 'selectedCodes',
+      payload: e.detail.items.reduce((acc, cur) => {
+        acc[cur.dataset.code] = true;
+        return acc;
+      }, {})
+    });
+  };
+
+  const handleSaveAs = (e) => {
+    const {
+      variantItem: _omit,
+      selected: _omit2,
+      readOnly: _omit3,
+      labelReadOnly: _omit4,
+      ...variantItemProps
+    } = e.detail;
+    if (variantItemProps.isDefault) {
+      setDefaultVariant(variantItemProps.children);
+    }
+    setCustomVariants((prev) => [...prev, { ...variantItemProps, author: 'Current User' }]);
+    initialVariantValues.current[variantItemProps.children] = filters;
+    setSelectedVariant(variantItemProps.children);
+    setIsDirty(false);
+  };
+
+  const handleSave = (e) => {
+    const { variantItem: _omit, selected: _omit2, ...variantItemProps } = e.detail;
+    initialVariantValues.current[variantItemProps.children] = filters;
+    setIsDirty(false);
+  };
+
+  const handleSaveManageViews = (e) => {
+    const { deletedVariants, updatedVariants } = e.detail;
+    deletedVariants.forEach((variant) => {
+      delete initialVariantValues.current[variant.children];
+      setCustomVariants((prev) => prev.filter((item) => item.children !== variant.children));
+    });
+    updatedVariants.forEach((variant) => {
+      const { variantItem: _omit, selected: _omit2, ...variantItemProps } = variant;
+      initialVariantValues.current[variant.children] = variantItemProps;
+      if (variant.isDefault) {
+        setDefaultVariant(variant.children);
+      }
+      if (variant.selected) {
+        setSelectedVariant(variant.children);
+      }
+      setCustomVariants((prev) => {
+        return prev.map((item) => {
+          if (item.children === variant.prevVariant.children) {
+            return variantItemProps;
+          }
+          return item;
+        });
+      });
+    });
+  };
+
+  const handleSelect = (e) => {
+    const privateSelectedVariant = e.detail.selectedVariant.children;
+    dispatchFiltersChange({
+      type: 'changeVariant',
+      payload: initialVariantValues.current[privateSelectedVariant]
+    });
+    setSelectedVariant(privateSelectedVariant);
+  };
+
+  useEffect(() => {
+    if (checkIfDiry) {
+      const hasChanged = Object.entries(initialVariantValues.current[selectedVariant]).some(([key, val]) => {
+        if (key === 'selectedCodes') {
+          const selectedCodesLength = Object.keys(filters.selectedCodes).length;
+          if (selectedCodesLength > 0 && Object.keys(val).length !== selectedCodesLength) {
+            return true;
+          }
+          return Object.entries(filters.selectedCodes).some(([code, bool]) => {
+            return val[code] !== bool;
+          });
+        }
+        return filters[key] !== val;
+      });
+      setCheckIfDirty(false);
+      setIsDirty(hasChanged);
+    }
+  }, [checkIfDiry, selectedVariant]);
+
+  return (
+    <>
+      <FilterBar
+        header={
+          <VariantManagement
+            hideApplyAutomatically
+            dirtyState={isDirty}
+            onSaveAs={handleSaveAs}
+            onSave={handleSave}
+            onSelect={handleSelect}
+            onSaveManageViews={handleSaveManageViews}
+          >
+            <VariantItem
+              selected={selectedVariant === 'Standard'}
+              global
+              isDefault={defaultVariant === 'Standard'}
+              author="SAP"
+              readOnly
+              labelReadOnly
+            >
+              Standard
+            </VariantItem>
+            {customVariants.map((variantItemProps) => {
+              return (
+                <VariantItem
+                  key={variantItemProps.children}
+                  {...variantItemProps}
+                  selected={selectedVariant === variantItemProps.children}
+                  isDefault={defaultVariant === variantItemProps.children}
+                >
+                  {variantItemProps.children}
+                </VariantItem>
+              );
+            })}
+          </VariantManagement>
+        }
+      >
+        <FilterGroupItem label="Countries">
+          <Select onChange={handleSelectChange}>
+            <Option selected={selectedCountry === 'Indonesia'}>Indonesia</Option>
+            <Option selected={selectedCountry === 'Costa Rica'}>Costa Rica</Option>
+            <Option selected={selectedCountry === 'Slovakia'}>Slovakia</Option>
+            <Option selected={selectedCountry === 'Iceland'}>Iceland</Option>
+            <Option selected={selectedCountry === 'Malta'}>Malta</Option>
+            <Option selected={selectedCountry === 'Guyana'}>Guyana</Option>
+            <Option selected={selectedCountry === 'Spain'}>Spain</Option>
+            <Option selected={selectedCountry === 'Austria'}>Austria</Option>
+          </Select>
+        </FilterGroupItem>
+        <FilterGroupItem label="Date">
+          <DatePicker value={date} onChange={handleDateChange} />
+        </FilterGroupItem>
+        <FilterGroupItem label="Company Code">
+          <MultiComboBox onSelectionChange={handleSelectedCodesChange}>
+            <MultiComboBoxItem text="001" selected={selectedCodes['001']} data-code="001" />
+            <MultiComboBoxItem text="002" selected={selectedCodes['002']} data-code="002" />
+            <MultiComboBoxItem text="003" selected={selectedCodes['003']} data-code="003" />
+            <MultiComboBoxItem text="004" selected={selectedCodes['004']} data-code="004" />
+            <MultiComboBoxItem text="005" selected={selectedCodes['005']} data-code="005" />
+          </MultiComboBox>
+        </FilterGroupItem>
+      </FilterBar>
+      <Form
+        style={{ marginBlockStart: '2rem' }}
+        columnsS={1}
+        columnsM={1}
+        columnsL={1}
+        columnsXL={1}
+        labelSpanM={2}
+        labelSpanL={2}
+        labelSpanXL={2}
+      >
+        <FormItem label="Current View">
+          <Text>{selectedVariant}</Text>
+        </FormItem>
+        <FormGroup titleText="Filters">
+          <FormItem label="Selected Country">
+            <Text>{selectedCountry}</Text>
+          </FormItem>
+          <FormItem label="Selected Date">
+            <Text>{date}</Text>
+          </FormItem>
+          <FormItem label="Selected Company Codes">
+            <Text>{Object.keys(selectedCodes).join(', ')}</Text>
+          </FormItem>
+        </FormGroup>
+      </Form>
+    </>
+  );
+}
+```
+
+</details>
+
 <Markdown>{SubcomponentsSection}</Markdown>
 
 ## VariantItem