fix(staking): [LW-9583] storybook LocalThemeProvider, vanilla-extract usage and new linter rules (#1030)

Author: przemyslaw-wlodek

.github/shared/build/action.yml

@@ -45,6 +45,7 @@ runs:
     - name: Build dist version
       shell: bash
       env:
+        NODE_OPTIONS: '--max_old_space_size=8192'
         BUILD_DEV_PREVIEW: ${{ inputs.BUILD_DEV_PREVIEW }}
         LACE_EXTENSION_KEY: ${{ inputs.LACE_EXTENSION_KEY }}
         POSTHOG_PRODUCTION_TOKEN_MAINNET: ${{ inputs.POSTHOG_PRODUCTION_TOKEN_MAINNET }}

.github/workflows/packages-staking.yml

@@ -45,4 +45,6 @@ jobs:
       - name: Run tests
         run: yarn workspace @lace/staking test:unit
       - name: Build Staking dist
+        env:
+          NODE_OPTIONS: '--max_old_space_size=8192'
         run: yarn workspace @lace/staking build

packages/staking/.eslintignore

@@ -37,6 +37,18 @@ module.exports = {
         groups: ['builtin', 'external', 'type', 'internal', 'parent', 'sibling', 'index'],
       },
     ],
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            importNames: ['sx', 'style', 'recipe', 'vars', 'LocalThemeProvider'],
+            message: "Please import from 'features/theme' or directly e.g. '@vanilla-extract/css'.",
+            name: '@lace/ui',
+          },
+        ],
+      },
+    ],
     'promise/avoid-new': 'off',
     'react/jsx-curly-brace-presence': 2,
     'react/jsx-handler-names': 'off',

packages/staking/.eslintrc.cjs

@@ -1,3 +1,4 @@
 dist
 build
 node_modules
+storybook-static

packages/staking/.prettierignore

@@ -56,6 +56,8 @@
     "@lace/ui": "^0.1.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@vanilla-extract/css": "^1.11.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/sprinkles": "^1.5.1",
     "classnames": "^2.3.2",
     "i18next": "^22.5.1",
     "immer": "^10.0.2",
@@ -93,8 +95,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@tsconfig/create-react-app": "^1.0.3",
     "@vanilla-extract/esbuild-plugin": "^2.2.2",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^3.9.3",
+    "@vanilla-extract/vite-plugin": "^3.9.5",
     "@vitest/coverage-c8": "^0.31.0",
     "antd": "^4.24.10",
     "babel-loader": "^8.3.0",

packages/staking/package.json

@@ -1,4 +1,4 @@
-import { sx } from '@lace/ui';
+import { sx } from 'features/theme';
 
 export const browsePools = sx({
   alignItems: 'stretch',

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

@@ -1,6 +1,5 @@
-import { style } from '@lace/ui';
-import { theme } from 'features/theme';
+import { sx } from 'features/theme';
 
-export const title = style({
-  color: theme.colors.$titleColor,
+export const title = sx({
+  color: '$titleColor',
 });

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

@@ -1,13 +1,17 @@
-import { style, sx } from '@lace/ui';
-import { theme } from 'features/theme';
+import { style } from '@vanilla-extract/css';
+import { sx } from 'features/theme';
 
-export const textBoxLeft = style({
-  borderBottomRightRadius: 0,
-  borderRightColor: theme.colors.$browsePoolsFilterInputRightBorderColor,
-  borderRightStyle: 'solid',
-  borderRightWidth: 2,
-  borderTopRightRadius: 0,
-});
+export const textBoxLeft = style([
+  sx({
+    borderRightColor: '$browsePoolsFilterInputRightBorderColor',
+  }),
+  {
+    borderBottomRightRadius: 0,
+    borderRightStyle: 'solid',
+    borderRightWidth: 2,
+    borderTopRightRadius: 0,
+  },
+]);
 
 export const textBoxRight = style({
   borderBottomLeftRadius: 0,

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

@@ -1,7 +1,8 @@
-import { Box, Cell, Flex, Grid, LocalThemeProvider, Section, ThemeColorScheme, Variants } from '@lace/ui';
+import { Box, Cell, Flex, Grid, Section, ThemeColorScheme, Variants } from '@lace/ui';
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { LocalThemeProvider } from 'features/theme';
 import { useCallback, useState } from 'react';
 import type { StakePoolSortOptions } from '../types';
 import type { Meta, StoryObj } from '@storybook/react';