refactor(FilterBar): support SSR

packages/main/src/components/FilterBar/FilterBar.mdx

@@ -0,0 +1,154 @@
+import { ArgsTableWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
+import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import { FilterGroupItem } from '../FilterGroupItem';
+import * as ComponentStories from './FilterBar.stories';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader />
+
+<br />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+<br />
+
+# More Examples
+
+## FilterBar with logic
+
+This is a basic example of how the FilterBar could be used inside an app.
+
+<Canvas of={ComponentStories.WithLogic} />
+
+### Code
+
+<details>
+
+<summary>Show Code</summary>
+
+```jsx
+const FilterBarComponent = (args) => {
+  const [age, setAge] = useState(37);
+  const [countries, setCountries] = useState({});
+  const [currency, setCurrency] = useState('USD');
+  const [date, setDate] = useState('');
+  const [dateRange, setDateRange] = useState('');
+  const handleAgeChange = (e) => {
+    setAge(e.target.value);
+  };
+  const handleCountriesChange = (e) => {
+    setCountries(
+      e.detail.items.reduce((acc, cur) => {
+        return { ...acc, [cur.getAttribute('text').toLowerCase()]: true };
+      }, {})
+    );
+  };
+  const handleCurrencyChange = (e) => {
+    setCurrency(e.detail.selectedOption.textContent);
+  };
+  const handleDateChange = (e) => {
+    if (e.detail.valid) {
+      setDate(e.detail.value);
+    }
+  };
+  const handleDateRangeChange = (e) => {
+    if (e.detail.valid) {
+      setDateRange(e.detail.value);
+    }
+  };
+  return (
+    <>
+      <FilterBar>
+        <FilterGroupItem label="Age" active={!!age} required>
+          <StepInput value={age} onChange={handleAgeChange} required />
+        </FilterGroupItem>
+        <FilterGroupItem label="Countries" active={Object.keys(countries).length > 0}>
+          <MultiComboBox onSelectionChange={handleCountriesChange}>
+            <MultiComboBoxItem text="Argentina" selected={countries.argentina} />
+            <MultiComboBoxItem text="Bulgaria" selected={countries.bulgaria} />
+            <MultiComboBoxItem text="Finland" selected={countries.finland} />
+            <MultiComboBoxItem text="Germany" selected={countries.germany} />
+            <MultiComboBoxItem text="Ireland" selected={countries.ireland} />
+            <MultiComboBoxItem text="Ukraine" selected={countries.ukraine} />
+            <MultiComboBoxItem text="USA" selected={countries.usa} />
+          </MultiComboBox>
+        </FilterGroupItem>
+        <FilterGroupItem label="Currency" active={!!currency}>
+          <Select onChange={handleCurrencyChange}>
+            <Option additionalText="€" selected={currency === 'EUR'}>
+              EUR
+            </Option>
+            <Option additionalText="$" selected={currency === 'USD'}>
+              USD
+            </Option>
+            <Option additionalText="£" selected={currency === 'GBP'}>
+              GBP
+            </Option>
+            <Option additionalText="₺" selected={currency === 'TRY'}>
+              TRY
+            </Option>
+            <Option additionalText="¥" selected={currency === 'JPY'}>
+              JPY
+            </Option>
+          </Select>
+        </FilterGroupItem>
+        <FilterGroupItem label="Date" active={!!date}>
+          <DatePicker value={date} onChange={handleDateChange} style={{ minWidth: 'auto' }} on />
+        </FilterGroupItem>
+        <FilterGroupItem label="Date Range" active={!!dateRange} visibleInFilterBar={false}>
+          <DateRangePicker value={dateRange} onChange={handleDateRangeChange} style={{ minWidth: 'auto' }} on />
+        </FilterGroupItem>
+      </FilterBar>
+      <FlexBox direction={FlexBoxDirection.Column}>
+        <FlexBox>
+          <Label showColon>Age</Label>
+          <Text>{age}</Text>
+        </FlexBox>
+        <FlexBox>
+          <Label showColon>Countries</Label>
+          <Text>{JSON.stringify(countries)}</Text>
+        </FlexBox>
+        <FlexBox>
+          <Label showColon>Currency</Label>
+          <Text>{currency}</Text>
+        </FlexBox>
+        <FlexBox>
+          <Label showColon>Date</Label>
+          <Text>{date}</Text>
+        </FlexBox>
+        <FlexBox>
+          <Label showColon>Date Range</Label>
+          <Text>{dateRange}</Text>
+        </FlexBox>
+      </FlexBox>
+    </>
+  );
+};
+```
+
+</details>
+
+## FilterBar in a DynamicPage
+
+When a FilterBar is used inside e.g. a DynamicPage, `hideToolbar` should be set to `true`, since the `VariantManagement` of
+the page is then responsible for the different views.
+
+<Canvas of={ComponentStories.InDynamicPage} />
+
+<Markdown>{SubcomponentsSection}</Markdown>
+
+## FilterGroupItem
+
+<Description of={FilterGroupItem} />
+
+<ArgsTableWithNote of={FilterGroupItem} />
+
+<Footer />