@gechiui/components/src/unit-control/stories/index.js

UI components for GeChiUI.

/**
 * External dependencies
 */
import { boolean, number, select, text, object } from '@storybook/addon-knobs';
import styled from '@emotion/styled';

/**
 * GeChiUI dependencies
 */
import { useState } from '@gechiui/element';

/**
 * Internal dependencies
 */
import UnitControl from '../';
import { CSS_UNITS } from '../utils';

export default {
	title: 'Components/UnitControl',
	component: UnitControl,
	parameters: {
		knobs: { disabled: false },
	},
};

const ControlWrapperView = styled.div`
	max-width: 80px;
`;

function Example() {
	const [ value, setValue ] = useState( '10px' );

	const props = {
		disableUnits: boolean( 'disableUnits', false ),
		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
		isPressEnterToChange: boolean( 'isPressEnterToChange', true ),
		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
		isUnitSelectTabbable: boolean( 'isUnitSelectTabbable', true ),
		label: text( 'label', 'Value' ),
		min: number( 'min', 0 ),
		max: number( 'max', 100 ),
		shiftStep: number( 'shiftStep', 10 ),
		size: select(
			'size',
			{
				default: 'default',
				small: 'small',
			},
			'default'
		),
		step: number( 'step', 1 ),
		units: object( 'units', CSS_UNITS ),
	};

	return (
		<ControlWrapperView>
			<UnitControl
				{ ...props }
				value={ value }
				onChange={ ( v ) => setValue( v ) }
			/>
		</ControlWrapperView>
	);
}

export const _default = () => {
	return <Example />;
};

export function WithCustomUnits() {
	const [ value, setValue ] = useState( '10km' );

	const props = {
		isResetValueOnUnitChange: boolean( 'isResetValueOnUnitChange', true ),
		label: text( 'label', 'Distance' ),
		units: object( 'units', [
			{
				value: 'km',
				label: 'km',
				default: 1,
			},
			{
				value: 'mi',
				label: 'mi',
				default: 1,
			},
			{
				value: 'm',
				label: 'm',
				default: 1000,
			},
			{
				value: 'yd',
				label: 'yd',
				default: 1760,
			},
		] ),
	};

	return (
		<ControlWrapperView>
			<UnitControl
				{ ...props }
				value={ value }
				onChange={ ( v ) => setValue( v ) }
			/>
		</ControlWrapperView>
	);
}