@pingux/astro 2.117.0 → 2.118.0-alpha.1

package/lib/components/SliderField/SliderField.stories.js

@@ -0,0 +1,131 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Label, SliderField } from '../../index';
+import SliderFieldReadme from './SliderField.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/SliderField',
+  component: SliderField,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SliderFieldReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: {
+    defaultValue: {
+      control: {
+        type: 'number'
+      }
+    },
+    orientation: {
+      control: {
+        type: 'select',
+        options: ['vertical', 'horizontal']
+      }
+    },
+    step: {
+      control: {
+        type: 'number'
+      }
+    },
+    minValue: {
+      control: {
+        type: 'number'
+      }
+    },
+    maxValue: {
+      control: {
+        type: 'number'
+      }
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  args: {
+    defaultValue: 40,
+    step: 10,
+    minValue: 0,
+    maxValue: 100,
+    label: 'Lorem ipsum',
+    helperText: 'Lorem ipsum...'
+  }
+};
+var loremText = 'Lorem ipsum';
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX(SliderField, _extends({
+    label: loremText,
+    defaultValue: 40
+  }, args));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return ___EmotionJSX(SliderField, {
+    value: value,
+    onChange: setValue,
+    displayValue: "(".concat(value, "px)"),
+    label: loremText
+  });
+};
+export var Vertical = function Vertical() {
+  return ___EmotionJSX(SliderField, {
+    label: loremText,
+    orientation: "vertical",
+    size: "150px"
+  });
+};
+export var MultiThumb = function MultiThumb() {
+  return ___EmotionJSX(SliderField, {
+    label: loremText,
+    isMultiThumb: true
+  });
+};
+export var ControlledMultiThumb = function ControlledMultiThumb() {
+  var _useState3 = useState([0, 50]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  return ___EmotionJSX(SliderField, {
+    label: loremText,
+    isMultiThumb: true,
+    onChange: setValue,
+    value: value
+  });
+};
+export var CustomProps = function CustomProps() {
+  var CustomLabel = function CustomLabel() {
+    return ___EmotionJSX(Label, {
+      hintText: loremText
+    }, loremText);
+  };
+  return ___EmotionJSX(SliderField, {
+    size: "1000px",
+    label: ___EmotionJSX(CustomLabel, null),
+    thumbProps: {
+      bg: 'orange'
+    },
+    activeTrackProps: {
+      bg: 'cyan'
+    },
+    trackProps: {
+      bg: 'magenta'
+    },
+    helperText: "Helper text"
+  });
+};

package/lib/components/SliderField/SliderField.test.js

@@ -0,0 +1,354 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
+import SliderField from './SliderField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var thumbId = 'thumb';
+var outputId = 'output';
+var wrapperId = 'wrapper';
+var labelId = 'label';
+var trackId = 'track-id';
+var activeTrackId = 'active-track-id';
+var labelClassName = 'labelClass';
+var wrapperClassName = 'wrapperClass';
+var testLabel = 'Slider Field';
+var wrapperProps = {
+  'data-testid': wrapperId,
+  className: wrapperClassName
+};
+var labelProps = {
+  'data-testid': labelId,
+  className: labelClassName
+};
+var sliderTestId = 'slider-id';
+var outputProps = {
+  'data-testid': outputId
+};
+var defaultProps = {
+  thumbProps: {
+    'data-testid': thumbId
+  },
+  outputProps: outputProps,
+  label: testLabel,
+  'data-testid': sliderTestId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SliderField, _extends({}, defaultProps, props)));
+};
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SliderField, _extends({}, props, defaultProps));
+  }
+});
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SliderField, _extends({}, defaultProps, props));
+  },
+  testValue: 50,
+  testLabel: testLabel,
+  componentType: 'SliderField'
+});
+describe('SliderField Component', function () {
+  test('renders SliderField with default props', function () {
+    getComponent({
+      label: 'Slider Field',
+      defaultValue: 50
+    });
+    expect(screen.getByText('Slider Field')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveValue('50');
+  });
+  test('renders SliderField with custom value', function () {
+    getComponent({
+      label: 'Custom Slider',
+      value: 30
+    });
+    expect(screen.getByText('Custom Slider')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveValue('30');
+  });
+  test('calls onChange when slider value changes', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Slider Field',
+      onChange: onChangeMock,
+      defaultValue: 40
+    });
+    var slider = screen.getByRole('slider');
+    fireEvent.change(slider, {
+      target: {
+        value: 60
+      }
+    });
+    expect(onChangeMock).toHaveBeenCalledWith(60);
+  });
+  test('renders vertical orientation', function () {
+    getComponent({
+      label: 'Vertical Slider',
+      orientation: 'vertical',
+      defaultValue: 20
+    });
+    expect(screen.getByText('Vertical Slider')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-orientation', 'vertical');
+  });
+  test('disables the slider when isDisabled is true', function () {
+    getComponent({
+      label: 'Disabled Slider',
+      isDisabled: true
+    });
+    var slider = screen.getByRole('slider');
+    expect(slider).toBeDisabled();
+  });
+  test('renders display value correctly', function () {
+    getComponent({
+      label: 'Slider with Display',
+      defaultValue: 70,
+      displayValue: '70%'
+    });
+    expect(screen.getByText('70%')).toBeInTheDocument();
+  });
+  test('hides display value when isDisplayValueHidden is true', function () {
+    getComponent({
+      label: 'Hidden Display Slider',
+      defaultValue: 50,
+      isDisplayValueHidden: true
+    });
+    expect(screen.queryByText('50')).not.toBeInTheDocument();
+  });
+  test('calls onChangeEnd when slider interaction ends', function () {
+    var onChangeEndMock = jest.fn();
+    getComponent({
+      label: 'Slider Field',
+      onChangeEnd: onChangeEndMock,
+      defaultValue: 40
+    });
+    var slider = screen.getByRole('slider');
+    fireEvent.mouseDown(slider);
+    fireEvent.mouseUp(slider);
+    expect(onChangeEndMock).toHaveBeenCalled();
+  });
+  test('handles keyboard functionality', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Keyboard Slider',
+      onChange: onChangeMock,
+      defaultValue: 50,
+      step: 10
+    });
+    var slider = screen.getByRole('slider');
+    var output = screen.getByTestId(outputId);
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowRight'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('60');
+    fireEvent.keyDown(slider, {
+      key: 'ArrowLeft'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowLeft'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('50');
+    fireEvent.keyDown(slider, {
+      key: 'Home'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'Home'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(3);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('0');
+    fireEvent.keyDown(slider, {
+      key: 'End'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'End'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('100');
+  });
+  test('handles minValue and maxValue', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Keyboard Slider',
+      onChange: onChangeMock,
+      defaultValue: 50,
+      step: 10,
+      minValue: 10,
+      maxValue: 190
+    });
+    var slider = screen.getByRole('slider');
+    var output = screen.getByTestId(outputId);
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'Home'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'Home'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('10');
+    fireEvent.keyDown(slider, {
+      key: 'End'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'End'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('190');
+  });
+  test('handles vertical slider keyboard functionality', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Vertical Slider',
+      onChange: onChangeMock,
+      defaultValue: 50,
+      step: 10,
+      orientation: 'vertical'
+    });
+    var slider = screen.getByRole('slider');
+    var output = screen.getByTestId(outputId);
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'ArrowUp'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowUp'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('60');
+    fireEvent.keyDown(slider, {
+      key: 'ArrowDown'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowDown'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('50');
+  });
+  test('handles multi-thumb slider functionality', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Multi Thumb Slider',
+      onChange: onChangeMock,
+      defaultValue: [20, 80],
+      isMultiThumb: true
+    });
+    var thumbs = screen.getAllByTestId(thumbId);
+    expect(thumbs).toHaveLength(2);
+    var _thumbs = _slicedToArray(thumbs, 2),
+      thumb1 = _thumbs[0],
+      thumb2 = _thumbs[1];
+    fireEvent.keyDown(thumb1, {
+      key: 'ArrowRight'
+    });
+    fireEvent.keyUp(thumb1, {
+      key: 'ArrowRight'
+    });
+    expect(onChangeMock).toHaveBeenCalledWith([30, 80]);
+    fireEvent.keyDown(thumb2, {
+      key: 'ArrowLeft'
+    });
+    fireEvent.keyUp(thumb2, {
+      key: 'ArrowLeft'
+    });
+    expect(onChangeMock).toHaveBeenCalledWith([30, 70]);
+  });
+  test('adds custom class names to trackProps and activeTrackProps', function () {
+    var trackClassName = 'custom-track-class';
+    var activeTrackClassName = 'custom-active-track-class';
+    getComponent(_objectSpread({
+      trackProps: {
+        className: trackClassName,
+        'data-testid': trackId
+      },
+      activeTrackProps: {
+        className: activeTrackClassName,
+        'data-testid': activeTrackId
+      }
+    }, defaultProps));
+    var track = screen.getByTestId(trackId);
+    var activeTrack = screen.getByTestId(activeTrackId);
+    var slider = screen.getByRole('slider');
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowRight'
+    });
+    expect(track).toBeInTheDocument();
+    expect(track).toHaveClass(trackClassName);
+    expect(activeTrack).toBeInTheDocument();
+    expect(activeTrack).toHaveClass(activeTrackClassName);
+  });
+  test('adds custom class names to labelProps and wrapperProps', function () {
+    getComponent(_objectSpread({
+      labelProps: labelProps,
+      wrapperProps: wrapperProps
+    }, defaultProps));
+    var label = screen.getByText('Slider Field');
+    var wrapper = screen.getByTestId(wrapperId);
+    userEvent.tab();
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass(labelClassName);
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveClass(wrapperClassName);
+  });
+  test('changes size property', function () {
+    var _getComponent = getComponent({
+        size: '300px'
+      }),
+      rerender = _getComponent.rerender;
+    var container = screen.getByTestId(sliderTestId);
+    expect(container).toHaveStyle({
+      width: '300px'
+    });
+    rerender(___EmotionJSX(SliderField, _extends({}, defaultProps, {
+      size: "500px"
+    })));
+    expect(container).toHaveStyle({
+      width: '500px'
+    });
+  });
+  test('applies custom styles via sx prop', function () {
+    var customStyles = {
+      backgroundColor: 'red',
+      padding: '20px'
+    };
+    getComponent({
+      sx: customStyles
+    });
+    var container = screen.getByTestId(sliderTestId);
+    expect(container).toHaveStyle({
+      backgroundColor: 'red',
+      padding: '20px'
+    });
+  });
+});

package/lib/components/SliderField/SliderLabelContainer.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import { Box, Label, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SliderLabelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var displayValue = props.displayValue,
+    label = props.label,
+    labelProps = props.labelProps,
+    isDisplayValueHidden = props.isDisplayValueHidden,
+    outputProps = props.outputProps,
+    className = props.className;
+  return ___EmotionJSX(Box, {
+    ref: ref,
+    className: className,
+    variant: "slider.labelContainer"
+  }, label && ___EmotionJSX(Box, {
+    sx: {
+      gap: '0px'
+    }
+  }, ___EmotionJSX(Label, _extends({}, labelProps, {
+    sx: {
+      mb: '0px'
+    }
+  }), label)), !isDisplayValueHidden && ___EmotionJSX(Box, {
+    className: className,
+    variant: "slider.outputContainer"
+  }, ___EmotionJSX(Text, outputProps, displayValue)));
+});
+export default SliderLabelContainer;

package/lib/components/SliderField/SliderThumb.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "index", "inputProps", "isHorizontal", "isVertical", "name", "onFocus", "onFocusChange", "onPress", "state", "trackRef"];
+import React, { forwardRef, useRef } from 'react';
+import { mergeProps, useFocusRing, useSliderThumb, VisuallyHidden } from 'react-aria';
+import { useHover, usePress } from '@react-aria/interactions';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import Box from '../Box';
+import Input from '../Input';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SliderThumb = /*#__PURE__*/forwardRef(function (props, ref) {
+  var inputRef = useRef(null);
+  var thumbRef = useLocalOrForwardRef(ref);
+  var className = props.className,
+    index = props.index,
+    inputProps = props.inputProps,
+    isHorizontal = props.isHorizontal,
+    isVertical = props.isVertical,
+    name = props.name,
+    onFocus = props.onFocus,
+    onFocusChange = props.onFocusChange,
+    onPress = props.onPress,
+    state = props.state,
+    trackRef = props.trackRef,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useSliderThumb = useSliderThumb({
+      index: index,
+      trackRef: trackRef,
+      inputRef: inputRef,
+      name: name
+    }, state),
+    thumbProps = _useSliderThumb.thumbProps,
+    raInputProps = _useSliderThumb.inputProps,
+    isDragging = _useSliderThumb.isDragging;
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress({
+      ref: thumbRef,
+      onPress: onPress
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useStatusClasses = useStatusClasses(className, {
+      isDragging: isDragging,
+      isFocused: isFocusVisible,
+      isHorizontal: isHorizontal,
+      isVertical: isVertical,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedThumbProps = mergeProps(pressProps, others, hoverProps, thumbProps);
+  return ___EmotionJSX(Box, _extends({
+    className: classNames,
+    variant: "slider.thumb",
+    "data-testid": "thumb"
+  }, mergedThumbProps), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Input, _extends({
+    ref: inputRef,
+    "data-testid": "input"
+  }, mergeProps(inputProps, raInputProps, focusProps), {
+    name: name
+  }))));
+});
+export default SliderThumb;

package/lib/components/SliderField/index.js

@@ -0,0 +1 @@
+export { default } from './SliderField';

package/lib/hooks/index.js

@@ -19,5 +19,6 @@ export { default as useProgressiveState } from './useProgressiveState';
 export { default as usePropWarning } from './usePropWarning';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';
+export { default as useSliderField } from './useSliderField';
 export { default as useStatusClasses } from './useStatusClasses';
 export { default as useTShirtSize } from './useTShirtSize';

package/lib/hooks/useSliderField/index.js

@@ -0,0 +1 @@
+export { default } from './useSliderField';