@strapi/design-system 1.2.7 → 1.3.0-beta.1

package/src/NumberInput/NumberInput.js

@@ -0,0 +1,253 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import CarretDown from '@strapi/icons/CarretDown';
+import styled from 'styled-components';
+import { sizes } from '../themes/sizes';
+import { NumberFormatter, NumberParser } from '@internationalized/number';
+import { Field, FieldLabel, FieldHint, FieldError, FieldInput } from '../Field';
+import { Stack } from '../Stack';
+import { Icon } from '../Icon';
+import { useId } from '../helpers/useId';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+import { getDefaultLocale } from '../helpers/getDefaultLocale';
+
+const ArrowButton = styled.button`
+  display: flex;
+  height: 1rem;
+  align-items: ${({ reverse }) => (reverse ? 'flex-end' : 'flex-start')};
+  transform: translateY(${({ reverse }) => (reverse ? `-2px` : `2px`)});
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
+  svg {
+    display: block;
+    height: ${4 / 16}rem;
+    transform: ${({ reverse }) => (reverse ? 'rotateX(180deg)' : undefined)};
+  }
+`;
+
+const INITIAL_VALUE = '';
+
+export const NumberInput = React.forwardRef(
+  (
+    {
+      size,
+      startAction,
+      name,
+      hint,
+      error,
+      label,
+      labelAction,
+      locale: defaultLocale,
+      id,
+      onValueChange,
+      value,
+      step,
+      required,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    // inputValue should ALWAYS be a string. value should ALWAYS stay a number
+    const [inputValue, setInputValue] = useState(value === undefined || value === null ? INITIAL_VALUE : String(value));
+    const generatedId = useId('numberinput', id);
+    const locale = defaultLocale || getDefaultLocale();
+    const numberParserRef = useRef(new NumberParser(locale));
+    const numberFormaterRef = useRef(new NumberFormatter(getDefaultLocale(), { maximumFractionDigits: 20 }));
+
+    const handleChange = (e) => {
+      const nextValue = e.target.value;
+
+      if (numberParserRef.current.isValidPartialNumber(nextValue)) {
+        const parsedValue = nextValue === '' ? undefined : numberParserRef.current.parse(nextValue);
+
+        // checking NaN case when only typing a "-" (minus) sign inside the field
+        if (parsedValue === undefined || isNaN(parsedValue)) {
+          onValueChange(undefined);
+        } else {
+          onValueChange(parsedValue);
+        }
+
+        setInputValue(e.target.value);
+      }
+    };
+
+    const increment = (fromKeyBoard) => {
+      if (inputValue === undefined) {
+        onValueChange(step);
+        setInputValue(String(step));
+        return;
+      }
+
+      if (isNaN(inputValue)) {
+        const parsedValue = numberParserRef.current.parse(inputValue);
+
+        // Probably in the minus case
+        const safeValue = isNaN(parsedValue) ? 0 : parsedValue;
+
+        const nextValue = safeValue + step;
+        const formattedValue = numberFormaterRef.current.format(nextValue);
+
+        onValueChange(nextValue);
+        setInputValue(fromKeyBoard ? String(nextValue) : formattedValue);
+
+        return;
+      }
+
+      onValueChange(value + step);
+      setInputValue(String(value + step));
+    };
+
+    const decrement = (fromKeyBoard) => {
+      if (inputValue === undefined) {
+        onValueChange(-step);
+        setInputValue(String(-step));
+        return;
+      }
+
+      if (isNaN(inputValue)) {
+        const parsedValue = numberParserRef.current.parse(inputValue);
+
+        // Probably in the minus case
+        const safeValue = isNaN(parsedValue) ? 0 : parsedValue;
+
+        const nextValue = safeValue - step;
+        const formattedValue = numberFormaterRef.current.format(nextValue);
+
+        onValueChange(nextValue);
+        setInputValue(fromKeyBoard ? String(nextValue) : formattedValue);
+
+        return;
+      }
+
+      onValueChange(value - step);
+      setInputValue(String(value - step));
+    };
+
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+
+      switch (e.key) {
+        case KeyboardKeys.DOWN: {
+          e.preventDefault();
+          decrement(true);
+          break;
+        }
+
+        case KeyboardKeys.UP: {
+          e.preventDefault();
+          increment(true);
+          break;
+        }
+
+        default:
+          break;
+      }
+    };
+
+    const handleFocus = () => {
+      setInputValue(inputValue ?? INITIAL_VALUE);
+    };
+
+    const handleBlur = () => {
+      if (value === undefined) {
+        setInputValue(undefined);
+      } else {
+        setInputValue(numberFormaterRef.current.format(value));
+      }
+    };
+
+    return (
+      <Field name={name} hint={hint} error={error} id={generatedId}>
+        <Stack spacing={1}>
+          {label && (
+            <FieldLabel required={required} action={labelAction}>
+              {label}
+            </FieldLabel>
+          )}
+          <FieldInput
+            ref={ref}
+            startAction={startAction}
+            disabled={disabled}
+            type="text"
+            inputmode="decimal"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            value={inputValue ?? ''}
+            size={size}
+            endAction={
+              <>
+                <ArrowButton
+                  disabled={disabled}
+                  aria-hidden
+                  reverse
+                  onClick={() => {
+                    // increment needs an argument, so we can't remove the parenthesis
+                    increment();
+                  }}
+                  tabIndex={-1}
+                  type="button"
+                  data-testid="ArrowUp"
+                >
+                  <Icon as={CarretDown} color="neutral500" />
+                </ArrowButton>
+                <ArrowButton
+                  disabled={disabled}
+                  aria-hidden
+                  onClick={() => {
+                    // decrement needs an argument, so we can't remove the parenthesis
+                    decrement();
+                  }}
+                  tabIndex={-1}
+                  type="button"
+                  data-testid="ArrowDown"
+                >
+                  <Icon as={CarretDown} color="neutral500" />
+                </ArrowButton>
+              </>
+            }
+            {...props}
+          />
+          <FieldHint />
+          <FieldError />
+        </Stack>
+      </Field>
+    );
+  },
+);
+
+NumberInput.displayName = 'NumberInput';
+
+NumberInput.defaultProps = {
+  'aria-label': undefined,
+  disabled: false,
+  error: undefined,
+  hint: undefined,
+  id: undefined,
+  label: undefined,
+  labelAction: undefined,
+  required: false,
+  size: 'M',
+  startAction: undefined,
+  step: 1,
+  value: undefined,
+};
+
+NumberInput.propTypes = {
+  'aria-label': PropTypes.string,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelAction: PropTypes.element,
+  locale: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  required: PropTypes.bool,
+  size: PropTypes.oneOf(Object.keys(sizes.input)),
+  startAction: PropTypes.element,
+  step: PropTypes.number,
+  value: PropTypes.number,
+};

package/src/NumberInput/NumberInput.stories.mdx

@@ -0,0 +1,319 @@
+<!--- NumberInput.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Information from '@strapi/icons/Information';
+import { NumberInput } from './NumberInput';
+import { Box } from '../Box';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+
+<Meta title="Design System/Components/NumberInput" component={NumberInput} />
+
+# NumberInput
+
+NumberInputs are inputs that allow users to add or edit numbers. They support several number formats.
+
+**Best practices**
+
+- Icons are always on the right side within the input (writing area) itself, never on the left side.
+- Labels should be clear and concise. A few words only and without punctuation.
+- Use description line as a help to give more details about the required action.
+- Make sure to use the placeholder feature whenever clarification are helpful on how to use the input.
+- Make sure to use to define the input as required whenever it is absolutely mandatory.
+- The error message will replace the description line. The two of them cannot be on top of each other.
+- The error message can be customized, make sure to write actionable information within it to help resolve an issue.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/NumberInput)
+
+## Imports
+
+```js
+import { NumberInput } from '@strapi/design-system/NumberInput';
+```
+
+## Usage
+
+NumberInputs are always found in forms. They give users the possibility to add or edit numbers.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [content, setContent] = useState(3.14159265359);
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            labelAction={
+              <Tooltip description="Content of the tooltip">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+          <button>
+            <Typography>Escape</Typography>
+          </button>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Without label
+
+NumberInputs can be used without a label.
+
+<Canvas>
+  <Story name="withoutLabel">
+    {() => {
+      const [content, setContent] = useState(0);
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            aria-label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            labelAction={
+              <Tooltip description="Content of the tooltip">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+          <button>
+            <Typography>Escape</Typography>
+          </button>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Size S
+
+NumberInputs are always found in forms. They give users the possibility to add or edit numbers.
+
+<Canvas>
+  <Story name="size S">
+    {() => {
+      const [content, setContent] = useState();
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            size="S"
+            labelAction={
+              <Tooltip description="Content of the tooltip">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+          <button>
+            <Typography>Escape</Typography>
+          </button>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Required
+
+NumberInputs required field.
+
+<Canvas>
+  <Story name="required">
+    {() => {
+      const [content, setContent] = useState();
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            required={true}
+          />
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Disabled
+
+NumberInputs disabled field.
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [content, setContent] = useState();
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            disabled={true}
+          />
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## With initial 0
+
+NumberInputs are always found in forms. They give users the possibility to add or edit numbers.
+
+<Canvas>
+  <Story name="with initial 0">
+    {() => {
+      const [content, setContent] = useState(0);
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            labelAction={
+              <Tooltip description="Content of the tooltip">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+          <button>
+            <Typography>Escape</Typography>
+          </button>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## With initial empty value
+
+<Canvas>
+  <Story name="with initial empty">
+    {() => {
+      const [content, setContent] = useState('');
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={undefined}
+            onValueChange={(value) => setContent(value)}
+            value={content}
+            labelAction={
+              <Tooltip description="Content of the tooltip">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+          <button>
+            <Typography>Escape</Typography>
+          </button>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## With locale
+
+<Canvas>
+  <Story name="locale">
+    {() => {
+      const [content, setContent] = useState();
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            locale="de"
+            onValueChange={(value) => setContent(value)}
+            value={content}
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={NumberInput} />