feat(parser): new style parser

.changeset/olive-ants-remember.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+A brand new style parser that supports all kinds of css syntax and nested custom tasty syntax.

.cursor/rules/parser.mdc

@@ -0,0 +1,8 @@
+---
+description: If the task requires information about how styles are parsed in `tasty`.
+globs: 
+alwaysApply: false
+---
+The specification of the style parser is described in [parser.md](mdc:src/parser/parser.md)
+This part of the styles handling only covers the parsing of string values. Though, boolean and number styles can be converted to string.
+Style-2-state mapping and responsive values are handled separately in [styles.ts](mdc:src/tasty/utils/styles.ts) and [responsive.ts](mdc:src/tasty/utils/responsive.ts)

.github/workflows/codeql-analysis.yml

@@ -38,11 +38,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v3

.github/workflows/main.yml

@@ -21,15 +21,15 @@ jobs:
     outputs:
       published: ${{ steps.changesets.outputs.published }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -59,16 +59,16 @@ jobs:
       NODE_OPTIONS: --max-old-space-size=4096
       CHROMATIC_RETRIES: 5
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Download storybook cache
         with:
           path: |
@@ -77,7 +77,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-storybook
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/pull-request.yml

@@ -25,14 +25,14 @@ jobs:
       name: Canary package in NPM
       url: https://www.npmjs.com/package/@cube-dev/ui-kit/v/${{ steps.publish.outputs.version }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -79,21 +79,21 @@ jobs:
     name: 'Tests & lint'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Download eslint cache
         with:
           path: |
             **/.eslintcache
           key: ${{ runner.os }}-eslint
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -105,7 +105,7 @@ jobs:
         run: pnpm lint
 
       - name: Run the tests
-        run: pnpm test -- --no-cache
+        run: pnpm test:no-cache
 
   deploy-chromatic:
     name: 'Prepare Storybook for review & tests'
@@ -117,16 +117,16 @@ jobs:
       CHROMATIC_RETRIES: 5
       LOG_LEVEL: 'error'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Download storybook cache
         with:
           path: |
@@ -135,7 +135,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-storybook
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/size-limit.yml

@@ -23,14 +23,14 @@ jobs:
       REPORT_FOLDER: './size-limit-report'
       NODE_OPTIONS: --max-old-space-size=4096
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.2
+          version: 10.14.0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.nvmrc

@@ -1 +1 @@
-18.19.1
+20.19.2

.size-limit.cjs

@@ -20,20 +20,20 @@ module.exports = [
         }),
       );
     },
-    limit: '281kB',
+    limit: '282kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '23 kB',
+    limit: '24 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '12 kB',
+    limit: '13 kB',
   },
 ];

package.json

@@ -10,7 +10,7 @@
   "module": "dist/es/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "packageManager": "pnpm@9.12.2",
+  "packageManager": "pnpm@10.14.0",
   "exports": {
     ".": {
       "import": "./dist/es/index.js",
@@ -28,6 +28,7 @@
     "build:esm": "tsc -p tsconfig.es.json",
     "watch": "pnpm build:esm --watch",
     "test": "jest",
+    "test:no-cache": "jest --no-cache",
     "test-cover": "jest --coverage",
     "test-watch": "jest --watch",
     "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -102,6 +103,7 @@
   },
   "devDependencies": {
     "@actions/core": "^1.11.1",
+    "@eslint/js": "^9.25.1",
     "@actions/exec": "^1.1.1",
     "@actions/github": "^6.0.0",
     "@changesets/changelog-github": "^0.4.4",
@@ -182,7 +184,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=18.19.1",
-    "pnpm": "^9.0.0"
+    "node": ">=20.19.2",
+    "pnpm": "^10.0.0"
   }
 }

src/components/fields/ComboBox/ComboBox.tsx

@@ -33,7 +33,6 @@ import {
 import { generateRandomId } from '../../../utils/random';
 import {
   mergeProps,
-  modAttrs,
   useCombinedRefs,
   useLayoutEffect,
 } from '../../../utils/react';
@@ -430,7 +429,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     <ComboBoxWrapperElement
       ref={wrapperRef}
       qa={qa || 'ComboBox'}
-      {...modAttrs(mods)}
+      mods={mods}
       styles={wrapperStyles}
       style={{
         zIndex: isFocused ? 1 : 'initial',
@@ -446,7 +445,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         {...allInputProps}
         autoComplete={autoComplete}
         styles={inputStyles}
-        {...modAttrs(mods)}
+        mods={mods}
         data-size={size}
       />
       <div data-element="Suffix">
@@ -463,14 +462,14 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
             data-menu-trigger
             qa="ComboBoxTrigger"
             {...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps)}
-            {...modAttrs({
+            ref={triggerRef}
+            mods={{
               pressed: isTriggerPressed,
               focused: isTriggerFocused,
               hovered: isTriggerHovered,
               disabled: isDisabled,
               loading: isLoading,
-            })}
-            ref={triggerRef}
+            }}
             data-size={size}
             isDisabled={isDisabled}
             styles={triggerStyles}

src/components/fields/Slider/RangeSlider.stories.tsx

@@ -42,3 +42,9 @@ WithoutValue.args = {
   label: 'Slider',
   showValueLabel: false,
 };
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  label: 'Slider',
+  orientation: 'vertical',
+};

src/components/fields/Slider/RangeSlider.tsx

@@ -1,11 +1,11 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 
 import { Gradation } from './Gradation';
 import { SliderBase, SliderBaseChildArguments } from './SliderBase';
 import { SliderThumb } from './SliderThumb';
 import { SliderTrack } from './SliderTrack';
 
-import type { DOMRef } from '@react-types/shared';
+import type { FocusableRef } from '@react-types/shared';
 import type { RangeValue } from '../../../shared';
 import type { CubeSliderBaseProps } from './types';
 
@@ -19,29 +19,40 @@ const INTL_MESSAGES = {
   maximum: 'Maximum',
 };
 
-function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
+function RangeSlider(
+  props: CubeRangeSliderProps,
+  ref: FocusableRef<HTMLDivElement>,
+) {
   let { isDisabled, styles, gradation, ...otherProps } = props;
 
+  // Create separate refs for each thumb to enable proper focus management
+  const minThumbInputRef = useRef<HTMLInputElement>(null);
+  const maxThumbInputRef = useRef<HTMLInputElement>(null);
+
   return (
-    <SliderBase {...(otherProps as CubeSliderBaseProps<number[]>)}>
+    <SliderBase ref={ref} {...(otherProps as CubeSliderBaseProps<number[]>)}>
       {({ trackRef, inputRef, state }: SliderBaseChildArguments) => {
         return (
           <>
             <Gradation state={state} ranges={[0, 1]} values={gradation} />
-            <SliderTrack state={state} isDisabled={isDisabled} />
+            <SliderTrack
+              state={state}
+              isDisabled={isDisabled}
+              orientation={props.orientation}
+            />
             <SliderThumb
               index={0}
               aria-label={INTL_MESSAGES['minimum']}
               state={state}
-              inputRef={inputRef}
+              inputRef={minThumbInputRef}
               trackRef={trackRef}
               isDisabled={isDisabled}
             />
             <SliderThumb
               index={1}
               aria-label={INTL_MESSAGES['maximum']}
               state={state}
-              inputRef={inputRef}
+              inputRef={maxThumbInputRef}
               trackRef={trackRef}
               isDisabled={isDisabled}
             />

src/components/fields/Slider/SliderTrack.tsx

@@ -34,7 +34,9 @@ export function SliderTrack(props: SliderTrackProps) {
               '--slider-range-start': `${selectedTrack[0] * 100}%`,
               '--slider-range-end': `${selectedTrack[1] * 100}%`,
             }
-          : {}
+          : {
+              '--slider-value': `${selectedTrack[0] * 100}%`,
+            }
       }
     />
   );