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

package/src/NumberInput/NumberInput.js

@@ -1,253 +0,0 @@
-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

@@ -1,319 +0,0 @@
-<!--- 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} />