@create-figma-plugin/ui/lib/components/textbox/textbox-numeric/stories/textbox-numeric.stories.js

Production-grade Preact components that replicate the Figma UI design

import { MIXED_STRING } from '@create-figma-plugin/utilities';
import { h } from 'preact';
import { useRef, useState } from 'preact/hooks';
import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js';
import { IconAutoLayoutPaddingHorizontal24 } from '../../../../icons/icon-24/icon-auto-layout-padding-horizontal-24.js';
import { TextboxNumeric } from '../textbox-numeric.js';
export default {
    parameters: {
        fixedWidth: true
    },
    tags: ['1'],
    title: 'Components/Textbox Numeric'
};
export const Empty = function () {
    const [value, setValue] = useState('');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return h(TextboxNumeric, { onInput: handleInput, value: value });
};
export const Focused = function () {
    const [value, setValue] = useState('');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { ...useInitialFocus(), onInput: handleInput, value: value }));
};
export const Placeholder = function () {
    const [value, setValue] = useState('');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { onInput: handleInput, placeholder: "Placeholder", value: value }));
};
export const Filled = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return h(TextboxNumeric, { onInput: handleInput, value: value });
};
export const Icon = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { icon: h(IconAutoLayoutPaddingHorizontal24, null), onInput: handleInput, value: value }));
};
export const TextIcon = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return h(TextboxNumeric, { icon: "W", onInput: handleInput, value: value });
};
export const Disabled = function () {
    function handleInput() {
        throw new Error('This function should not be called');
    }
    return h(TextboxNumeric, { disabled: true, onInput: handleInput, value: "42" });
};
export const DisabledIcon = function () {
    function handleInput() {
        throw new Error('This function should not be called');
    }
    return (h(TextboxNumeric, { disabled: true, icon: h(IconAutoLayoutPaddingHorizontal24, null), onInput: handleInput, value: "42" }));
};
export const Mixed = function () {
    const [value, setValue] = useState(MIXED_STRING);
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return h(TextboxNumeric, { onInput: handleInput, value: value });
};
export const RevertOnEscapeKeyDown = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { onInput: handleInput, revertOnEscapeKeyDown: true, value: value }));
};
export const ValidateOnBlur = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    function validateOnBlur(value) {
        console.log(value);
        return value !== null;
    }
    return (h(TextboxNumeric, { onInput: handleInput, validateOnBlur: validateOnBlur, value: value }));
};
export const IntegerOnly = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return h(TextboxNumeric, { integer: true, onInput: handleInput, value: value });
};
export const CustomIncrements = function () {
    const [value, setValue] = useState('42');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { incrementBig: 100, incrementSmall: 10, onInput: handleInput, value: value }));
};
export const CustomSmallIncrements = function () {
    const [value, setValue] = useState('0');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { incrementBig: 0.5, incrementSmall: 0.1, onInput: handleInput, value: value }));
};
export const MinimumMaximum = function () {
    const [value, setValue] = useState('0');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { maximum: 10, minimum: 0, onInput: handleInput, value: value }));
};
export const Suffix = function () {
    const [value, setValue] = useState('100%');
    function handleInput(event) {
        const newValue = event.currentTarget.value;
        console.log(newValue);
        setValue(newValue);
    }
    return (h(TextboxNumeric, { maximum: 100, minimum: 0, onInput: handleInput, suffix: "%", value: value }));
};
export const Ref = function () {
    const ref = useRef(null);
    const [value, setValue] = useState('42');
    function handleInput() {
        if (ref.current === null) {
            throw new Error('`ref.current` is `null`');
        }
        console.log(ref.current);
        const newValue = ref.current.value;
        console.log(newValue);
        setValue(newValue);
    }
    return h(TextboxNumeric, { ref: ref, onInput: handleInput, value: value });
};
export const OnValueInput = function () {
    const [value, setValue] = useState('42');
    function handleValueInput(newValue) {
        console.log(newValue);
        setValue(newValue);
    }
    function handleNumericValueInput(newNumericValue) {
        console.log(newNumericValue);
    }
    return (h(TextboxNumeric, { onNumericValueInput: handleNumericValueInput, onValueInput: handleValueInput, value: value }));
};
//# sourceMappingURL=textbox-numeric.stories.js.map