New documentation (#673)

Author: tenphi

.changeset/proud-pugs-design.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add `scrollbar` style deprecating `styledScrollbar` style.

.changeset/quiet-coats-lick.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add support for the `offset` value in the `outline` style.

.changeset/thin-penguins-exist.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add support for default container props in `useDialogContainer`.

.size-limit.cjs

@@ -27,7 +27,7 @@ module.exports = [
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '22 kB',
+    limit: '23 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',

src/components/overlays/Dialog/DialogTrigger.tsx

@@ -297,7 +297,7 @@ function PopoverTrigger(allProps) {
 
 function DialogTriggerBase(props) {
   const ref = useCombinedRefs(props.ref);
-  const isFirstRender = useIsFirstRender();
+  const wasOpenRef = useRef(false);
 
   let {
     type,
@@ -320,10 +320,13 @@ function DialogTriggerBase(props) {
 
   // Restore focus manually when the dialog closes
   useEffect(() => {
-    if (!state.isOpen && !isFirstRender) {
+    if (!state.isOpen && wasOpenRef.current) {
+      wasOpenRef.current = false;
       ref.current?.focus();
+    } else if (state.isOpen) {
+      wasOpenRef.current = true;
     }
-  }, [state.isOpen, ref.current]);
+  }, [state.isOpen]);
 
   return (
     <Fragment>

src/components/overlays/Dialog/dialog-container.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react';
 
 import { useEvent } from '../../../_internal/index';
+import { mergeProps } from '../../../utils/react/index';
 
 import { DialogContainer } from './DialogContainer';
 
@@ -19,7 +20,10 @@ import { DialogContainer } from './DialogContainer';
 export function useDialogContainer<
   P,
   E = ComponentProps<typeof DialogContainer>,
->(Component: ComponentType<P>) {
+>(
+  Component: ComponentType<P>,
+  defaultContainerProps?: ComponentProps<typeof DialogContainer>,
+) {
   const [isOpen, setIsOpen] = useState(false);
   const [componentProps, setComponentProps] = useState<P | null>(null);
   const [containerProps, setContainerProps] = useState<E | null>(null);
@@ -63,7 +67,7 @@ export function useDialogContainer<
         onDismiss={close}
         {...(containerProps ?? {})}
       >
-        <Component {...componentProps} />
+        <Component {...mergeProps(defaultContainerProps, componentProps)} />
       </DialogContainer>
     );
   }, [componentProps, containerProps, isOpen]);

src/tasty/styles.test.ts

@@ -0,0 +1,184 @@
+import { borderStyle } from './styles/border';
+import { flowStyle } from './styles/flow';
+import { gapStyle } from './styles/gap';
+import { insetStyle } from './styles/inset';
+import { marginStyle } from './styles/margin';
+import { outlineStyle } from './styles/outline';
+import { paddingStyle } from './styles/padding';
+import { presetStyle } from './styles/preset';
+import { radiusStyle } from './styles/radius';
+import { scrollbarStyle } from './styles/scrollbar';
+
+describe('Tasty style tests', () => {
+  it('should handle border styles', () => {
+    expect(borderStyle({ border: '1px solid #000' })).toEqual({
+      border: '1px solid var(--000-color, rgb(0 0 0))',
+    });
+  });
+
+  it('should handle outline styles', () => {
+    expect(outlineStyle({ outline: '2px dashed #f00' })).toEqual({
+      outline: '2px dashed var(--f00-color, rgb(255 0 0))',
+    });
+  });
+
+  it('should handle padding styles', () => {
+    expect(
+      paddingStyle({
+        padding: '10px',
+      }),
+    ).toEqual({
+      'padding-top': '10px',
+      'padding-right': '10px',
+      'padding-bottom': '10px',
+      'padding-left': '10px',
+    });
+  });
+
+  it('should handle margin styles', () => {
+    expect(
+      marginStyle({
+        margin: '5px',
+      }),
+    ).toEqual({
+      'margin-top': '5px',
+      'margin-right': '5px',
+      'margin-bottom': '5px',
+      'margin-left': '5px',
+    });
+  });
+
+  it('should handle inset styles', () => {
+    expect(insetStyle({ inset: '0 10px 20px 30px' })).toEqual({
+      top: '0',
+      right: '10px',
+      bottom: '20px',
+      left: '30px',
+    });
+  });
+
+  it('should handle radius styles', () => {
+    expect(radiusStyle({ radius: '50%' })).toEqual([
+      { '--local-radius': '50%', 'border-radius': 'var(--local-radius)' },
+      { $: '>*', '--context-radius': '50%' },
+    ]);
+  });
+
+  it('should handle preset styles', () => {
+    expect(
+      presetStyle({
+        preset: 't3',
+      }),
+    ).toEqual({
+      '--font-size': 'var(--t3-font-size, var(--default-font-size, inherit))',
+      '--font-style':
+        'var(--t3-font-style, var(--default-font-style, inherit))',
+      '--font-weight':
+        'var(--t3-font-weight, var(--default-font-weight, inherit))',
+      '--letter-spacing':
+        'var(--t3-letter-spacing, var(--default-letter-spacing, inherit))',
+      '--line-height':
+        'var(--t3-line-height, var(--default-line-height, inherit))',
+      '--bold-font-weight':
+        'var(--t3-bold-font-weight, var(--default-bold-font-weight, inherit))',
+      '--font-family':
+        'var(--t3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif)',
+      '--icon-size': 'var(--t3-icon-size, var(--default-icon-size, inherit))',
+      '--text-transform':
+        'var(--t3-text-transform, var(--default-text-transform, inherit))',
+      'font-size': 'var(--t3-font-size, var(--default-font-size, inherit))',
+      'font-style': 'var(--t3-font-style, var(--default-font-style, inherit))',
+      'font-weight':
+        'var(--t3-font-weight, var(--default-font-weight, inherit))',
+      'letter-spacing':
+        'var(--t3-letter-spacing, var(--default-letter-spacing, inherit))',
+      'line-height':
+        'var(--t3-line-height, var(--default-line-height, inherit))',
+      'font-family':
+        'var(--t3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif)',
+      'text-transform':
+        'var(--t3-text-transform, var(--default-text-transform, inherit))',
+    });
+  });
+
+  it('should handle flow styles', () => {
+    expect(flowStyle({ flow: 'row nowrap' })).toEqual(null);
+  });
+
+  it('should handle gap styles', () => {
+    expect(
+      gapStyle({
+        gap: '1rem',
+      }),
+    ).toEqual({
+      $: '& > *:not(:last-child)',
+      'margin-bottom': '1rem',
+    });
+  });
+
+  it('should return undefined for undefined scrollbar', () => {
+    expect(scrollbarStyle({})).toBeUndefined();
+  });
+
+  it('should return correct styles for two colors', () => {
+    expect(scrollbarStyle({ scrollbar: '#dark #clear' })).toEqual({
+      'scrollbar-color': 'var(--dark-color) var(--clear-color)',
+      '&::-webkit-scrollbar-corner': {
+        background: 'var(--clear-color)',
+      },
+    });
+  });
+
+  it('should return correct styles for `thin` scrollbar', () => {
+    expect(scrollbarStyle({ scrollbar: 'thin' })).toEqual({
+      'scrollbar-width': 'thin',
+      'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
+    });
+  });
+
+  it('should return correct styles for `none` scrollbar', () => {
+    expect(scrollbarStyle({ scrollbar: 'none' })).toEqual({
+      'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
+      '&::-webkit-scrollbar': {
+        width: 'none',
+        height: 'none',
+      },
+    });
+  });
+
+  it('should handle custom overflow with scrollbar', () => {
+    expect(scrollbarStyle({ scrollbar: 'always', overflow: 'scroll' })).toEqual(
+      {
+        overflow: 'scroll',
+        'scrollbar-gutter': 'always',
+        'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
+      },
+    );
+  });
+
+  it('should handle styled scrollbar', () => {
+    expect(scrollbarStyle({ scrollbar: 'styled' })).toEqual({
+      'scrollbar-width': 'thin',
+      'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
+      '&::-webkit-scrollbar': {
+        width: '8px',
+        height: '8px',
+        background: 'var(--scrollbar-track-color)',
+        transition:
+          'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: 'var(--scrollbar-thumb-color)',
+        borderRadius: '8px',
+        minHeight: '24px',
+        transition:
+          'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
+      },
+      '&::-webkit-scrollbar-corner': {
+        background: 'var(--scrollbar-track-color)',
+        transition:
+          'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
+      },
+    });
+  });
+});

src/tasty/styles/border.ts

@@ -23,14 +23,14 @@ export function borderStyle({ border }) {
 
   if (border === true) border = '1bw';
 
-  const { values, mods, color } = parseStyle(String(border));
+  const { values, mods, colors } = parseStyle(String(border));
 
   const directions = filterMods(mods, DIRECTIONS);
   const typeMods = filterMods(mods, BORDER_STYLES);
 
   const value = values[0] || 'var(--border-width)';
   const type = typeMods[0] || 'solid';
-  const borderColor = color || 'var(--border-color)';
+  const borderColor = (colors && colors[0]) || 'var(--border-color)';
 
   const styleValue = [value, type, borderColor].join(' ');
 

src/tasty/styles/color.ts

@@ -5,7 +5,7 @@ export function colorStyle({ color }) {
 
   if (color === true) color = 'currentColor';
 
-  if (color.startsWith('#')) {
+  if (typeof color === 'string' && color.startsWith('#')) {
     color = parseColor(color).color || color;
   }
 

src/tasty/styles/fill.ts

@@ -4,7 +4,7 @@ export function fillStyle({ fill }) {
   if (!fill) return '';
 
   if (fill.startsWith('#')) {
-    fill = parseStyle(fill).color || fill;
+    fill = parseStyle(fill).colors[0] || fill;
   }
 
   const match = fill.match(/var\(--(.+?)-color/);

src/tasty/styles/gap.ts

@@ -1,6 +1,14 @@
 import { parseStyle } from '../utils/styles';
 
-export function gapStyle({ display = 'block', flow, gap }) {
+export function gapStyle({
+  display = 'block',
+  flow,
+  gap,
+}: {
+  display?: string;
+  flow?: string;
+  gap?: string | number | boolean;
+}) {
   if (typeof gap === 'number') {
     gap = `${gap}px`;
   }
@@ -31,7 +39,7 @@ export function gapStyle({ display = 'block', flow, gap }) {
     return { gap };
   }
 
-  const gapDir = flow.includes('row') ? 'right' : 'bottom';
+  const gapDir = flow?.includes('row') ? 'right' : 'bottom';
 
   return isWrap
     ? [

src/tasty/styles/margin.ts

@@ -8,6 +8,14 @@ export function marginStyle({
   marginRight,
   marginBottom,
   marginLeft,
+}: {
+  margin?: string | number | boolean;
+  marginBlock?: string;
+  marginInline?: string;
+  marginTop?: string;
+  marginRight?: string;
+  marginBottom?: string;
+  marginLeft?: string;
 }) {
   if (typeof margin === 'number') {
     margin = `${margin}px`;

src/tasty/styles/outline.ts

@@ -23,16 +23,23 @@ export function outlineStyle({ outline }) {
 
   if (outline === true) outline = '1ow';
 
-  const { values, mods, color } = parseStyle(String(outline));
+  const { values, mods, colors } = parseStyle(String(outline));
 
   const typeMods = filterMods(mods, BORDER_STYLES);
 
   const value = values[0] || 'var(--outline-width)';
   const type = typeMods[0] || 'solid';
-  const outlineColor = color || 'var(--outline-color)';
+  const outlineColor = colors?.[0] || 'var(--outline-color)';
 
   const styleValue = [value, type, outlineColor].join(' ');
 
+  if (values.length > 1) {
+    return {
+      outline: styleValue,
+      'outline-offset': values[1],
+    };
+  }
+
   return { outline: styleValue };
 }
 

src/tasty/styles/padding.ts

@@ -8,7 +8,24 @@ export function paddingStyle({
   paddingRight,
   paddingBottom,
   paddingLeft,
+}: {
+  padding?: string | number | boolean | string[];
+  paddingBlock?: string;
+  paddingInline?: string;
+  paddingTop?: string;
+  paddingRight?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
 }) {
+  if (Array.isArray(padding)) {
+    return {
+      'padding-top': padding[0],
+      'padding-right': padding[1] || padding[0],
+      'padding-bottom': padding[2] || padding[0],
+      'padding-left': padding[3] || padding[1] || padding[0],
+    };
+  }
+
   if (typeof padding === 'number') {
     padding = `${padding}px`;
   }