feat(staking): stake pools add sort & filter LW-9250

packages/staking/.storybook/preview.tsx

@@ -14,6 +14,7 @@ const wrapWith =
 
 const preview: Preview = {
   parameters: {
+    chromatic: { pauseAnimationAtEnd: true },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

packages/staking/package.json

@@ -32,7 +32,7 @@
   ],
   "scripts": {
     "build": "tsc && tsup",
-    "build:storybook": "NODE_OPTIONS=--openssl-legacy-provider; storybook build",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider; storybook build",
     "cleanup": "yarn exec rm -rf dist node_modules && yarn exec rm -rf ../../.cache/eslintcache",
     "dev": "NODE_OPTIONS=--openssl-legacy-provider; storybook dev -p 6006",
     "eslint:check": "yarn run -T eslint --cache --cache-location ../../.cache/eslintcache --cache-strategy metadata --ignore-path '../../.eslintignore' '**/*.{cjs,mjs,js,ts,tsx}'",
@@ -50,6 +50,11 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@lace/cardano": "^0.1.0",
+    "@lace/common": "^0.1.0",
+    "@lace/core": "0.1.0",
+    "@lace/icons": "0.1.0",
+    "@lace/ui": "^0.1.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@vanilla-extract/css": "^1.11.1",
     "classnames": "^2.3.2",
@@ -71,11 +76,6 @@
     "@cardano-sdk/input-selection": "0.12.20",
     "@cardano-sdk/tx-construction": "0.17.10",
     "@cardano-sdk/util": "0.15.0",
-    "@lace/cardano": "^0.1.0",
-    "@lace/common": "^0.1.0",
-    "@lace/core": "0.1.0",
-    "@lace/icons": "0.1.0",
-    "@lace/ui": "^0.1.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",

packages/staking/src/features/BrowsePools/SortAndFilter/SortAndFilter.css.ts

@@ -0,0 +1,27 @@
+import { style, sx } from '@lace/ui';
+import { theme } from 'features/theme';
+
+export const textBoxLeft = style({
+  borderBottomRightRadius: 0,
+  borderRightColor: theme.colors.$browsePoolsFilterInputRightBorderColor,
+  borderRightStyle: 'solid',
+  borderRightWidth: 2,
+  borderTopRightRadius: 0,
+});
+
+export const textBoxRight = style({
+  borderBottomLeftRadius: 0,
+  borderTopLeftRadius: 0,
+});
+
+export const radioGroup = sx({
+  width: '$fill',
+});
+
+export const selectGroup = sx({
+  width: '$fill',
+});
+
+export const card = sx({
+  width: '$342',
+});

packages/staking/src/features/BrowsePools/SortAndFilter/SortAndFilter.stories.tsx

@@ -0,0 +1,108 @@
+import { Box, Cell, Flex, Grid, LocalThemeProvider, Section, ThemeColorScheme, Variants } from '@lace/ui';
+import { action } from '@storybook/addon-actions';
+import { SortDirection, SortField, StakePoolSortOptions } from 'features/BrowsePools';
+import { useCallback, useState } from 'react';
+import type { Meta } from '@storybook/react';
+
+import { SortAndFilter } from './SortAndFilter';
+import { FilterValues, PoolsFilter, SortAndFilterTab } from './types';
+
+export default {
+  title: 'Cards/Stake Pool Sorting & Filter',
+} as Meta;
+
+const Wrapper = ({ defaultTab }: { defaultTab: SortAndFilterTab }) => {
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  const [sort, setSort] = useState<StakePoolSortOptions>({
+    field: SortField.saturation,
+    order: SortDirection.asc,
+  });
+  const [filter, setFilter] = useState<FilterValues>({
+    [PoolsFilter.Saturation]: ['', ''],
+    [PoolsFilter.ProfitMargin]: ['', ''],
+    [PoolsFilter.Performance]: ['', ''],
+    [PoolsFilter.Ros]: ['lastepoch'],
+  });
+
+  const handleSortChange = useCallback(
+    (options: StakePoolSortOptions) => {
+      action('SortChange')(options);
+      setSort(options);
+    },
+    [setSort]
+  );
+
+  const handleFilterChange = useCallback(
+    (options: FilterValues) => {
+      action('FilterChange')(options);
+      setFilter(options);
+    },
+    [setFilter]
+  );
+
+  return (
+    <SortAndFilter
+      activeTab={activeTab}
+      sort={sort}
+      filter={filter}
+      onTabChange={setActiveTab}
+      onSortChange={handleSortChange}
+      onFilterChange={handleFilterChange}
+    />
+  );
+};
+
+const CardsGroup = () => (
+  <Flex
+    style={{
+      flexWrap: 'wrap',
+      rowGap: 10,
+    }}
+    gap="$20"
+  >
+    <Box w="$342">
+      <Wrapper defaultTab={SortAndFilterTab.sort} />
+    </Box>
+    <Box w="$342">
+      <Wrapper defaultTab={SortAndFilterTab.filter} />
+    </Box>
+  </Flex>
+);
+
+export const Overview = (): JSX.Element => (
+  <>
+    <Grid columns="$2">
+      <Cell w="$fill" style={{ display: 'inline-flex', justifyContent: 'center' }}>
+        <Wrapper defaultTab={SortAndFilterTab.sort} />
+      </Cell>
+      <Cell style={{ display: 'inline-flex', justifyContent: 'center' }}>
+        <Wrapper defaultTab={SortAndFilterTab.filter} />
+      </Cell>
+    </Grid>
+
+    <Section title="Main component">
+      <Grid columns="$1">
+        <Cell>
+          <Variants.Table headers={['Default']}>
+            <Variants.Row>
+              <Variants.Cell>
+                <CardsGroup />
+              </Variants.Cell>
+            </Variants.Row>
+          </Variants.Table>
+        </Cell>
+        <Cell>
+          <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
+            <Variants.Table headers={['Dark Mode']}>
+              <Variants.Row>
+                <Variants.Cell>
+                  <CardsGroup />
+                </Variants.Cell>
+              </Variants.Row>
+            </Variants.Table>
+          </LocalThemeProvider>
+        </Cell>
+      </Grid>
+    </Section>
+  </>
+);