@bitrise/bitkit 10.29.0-alpha-input.1 → 10.29.0

package/src/Components/Form/FormLabel/FormLabel.tsx

@@ -1,9 +0,0 @@
-import { FormLabel as ChakraFormLabel, FormLabelProps, forwardRef } from '@chakra-ui/react';
-
-const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
-  return <ChakraFormLabel {...props} ref={ref} />;
-});
-
-export type { FormLabelProps };
-
-export default FormLabel;

package/src/Components/Form/Input/Input.stories.tsx

@@ -1,52 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import IconButton from '@/Components/IconButton/IconButton';
-import Input from './Input';
-
-export default {
-  component: Input,
-  argTypes: {
-    type: {
-      control: 'inline-radio',
-      options: ['number', 'password', 'text'],
-    },
-  },
-  args: {
-    isDisabled: false,
-    isInvalid: false,
-    isLoading: false,
-    isReadOnly: false,
-    label: 'Input',
-    placeholder: 'Placeholder text',
-    type: 'text',
-    width: '400px',
-  },
-} as ComponentMeta<typeof Input>;
-
-export const WithProps = {
-  args: {
-    errorText: '',
-    helperText:
-      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
-    label: 'Input',
-  },
-};
-
-export const WithElement = {
-  args: {
-    isDisabled: true,
-    label: 'With additional element (Like IconButton)',
-    rightElement: (
-      <IconButton aria-label="Copy to clipboard" borderLeftRadius="0" iconName="Duplicate" variant="secondary">
-        eee
-      </IconButton>
-    ),
-    value: '1234567890ABCDE',
-  },
-};
-
-export const WithIcon = {
-  args: {
-    label: 'With Icon on the left and/or right side',
-    leftIconName: 'Magnifier',
-  },
-};

package/src/Components/Form/Input/Input.theme.ts

@@ -1,38 +0,0 @@
-import { defineStyle } from '@chakra-ui/styled-system';
-
-const InputTheme = defineStyle({
-  baseStyle: {
-    field: {
-      width: '100%',
-      padding: '0.6875rem',
-      background: 'neutral.100',
-      border: '1px solid',
-      borderColor: 'neutral.90',
-      borderRadius: '4',
-      boxShadow: 'inner',
-      outline: 0,
-      appearance: 'none',
-      transition: '200ms',
-      _placeholder: {
-        fontStyle: 'italic',
-      },
-      _disabled: {
-        background: 'neutral.93',
-        cursor: 'not-allowed',
-      },
-      _focusVisible: {
-        boxShadow: 'formFocus',
-        borderColor: 'purple.50',
-      },
-      _invalid: {
-        color: 'red.50',
-        borderColor: 'red.50',
-      },
-    },
-    leftElement: {
-      background: 'red',
-    },
-  },
-});
-
-export default InputTheme;

package/src/Components/Form/Input/Input.tsx

@@ -1,133 +0,0 @@
-import { ReactNode, Ref } from 'react';
-import {
-  FormControl,
-  FormControlProps,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  Input as ChakraInput,
-  InputProps as ChakraInputProps,
-  forwardRef,
-  InputGroup,
-  InputLeftElement,
-  InputRightElement,
-} from '@chakra-ui/react';
-import Icon, { TypeIconName } from '../../Icon/Icon';
-
-type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
-type UsedChakraInputProps = Pick<
-  ChakraInputProps,
-  | 'onBlur'
-  | 'onChange'
-  | 'role'
-  | 'name'
-  | 'type'
-  | 'value'
-  | 'autoComplete'
-  | 'autoFocus'
-  | 'max'
-  | 'maxLength'
-  | 'min'
-  | 'minLength'
-  | 'pattern'
-  | 'step'
->;
-export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
-  'data-testid'?: string;
-  errorText?: ReactNode;
-  isLoading?: boolean;
-  helperText?: ReactNode;
-  inputRef?: Ref<HTMLInputElement>;
-  label?: ReactNode;
-  leftIconName?: TypeIconName;
-  rightElement?: ReactNode;
-  rightIconName?: TypeIconName;
-}
-
-/**
- * Input component is a component that is used to get user input in a text field.
- */
-const Input = forwardRef<InputProps, 'div'>((props, ref) => {
-  const {
-    'data-testid': dataTestid,
-    autoComplete,
-    autoFocus,
-    errorText,
-    helperText,
-    isDisabled,
-    inputRef,
-    isInvalid,
-    isLoading,
-    label,
-    leftIconName,
-    max,
-    maxLength,
-    min,
-    minLength,
-    pattern,
-    placeholder,
-    step,
-    onBlur,
-    onChange,
-    rightElement,
-    rightIconName,
-    name,
-    role,
-    type,
-    value,
-    ...rest
-  } = props;
-
-  const formControlProps = {
-    isDisabled: isDisabled || isLoading,
-    isInvalid: isInvalid || !!errorText,
-    ...rest,
-    ref,
-  };
-  const inputProps = {
-    autoComplete,
-    autoFocus,
-    'data-testid': dataTestid,
-    onBlur,
-    onChange,
-    name,
-    max,
-    maxLength,
-    min,
-    minLength,
-    pattern,
-    placeholder,
-    ref: inputRef,
-    role,
-    step,
-    type,
-    value,
-  };
-  return (
-    <FormControl {...formControlProps}>
-      {label && <FormLabel>{label}</FormLabel>}
-      <InputGroup>
-        {leftIconName && (
-          <InputLeftElement margin="12px" pointerEvents="none">
-            <Icon name={leftIconName} />
-          </InputLeftElement>
-        )}
-        <ChakraInput
-          paddingLeft={leftIconName ? '43px' : '11px'}
-          paddingRight={rightIconName ? '43px' : '11px'}
-          {...inputProps}
-        />
-        {rightElement && <InputRightElement>{rightElement}</InputRightElement>}
-        {!rightElement && rightIconName && (
-          <InputRightElement margin="12px" pointerEvents="none">
-            <Icon name={rightIconName} />
-          </InputRightElement>
-        )}
-      </InputGroup>
-      {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
-      {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
-    </FormControl>
-  );
-});
-
-export default Input;

package/src/Old/Visibility/Visibility.css

@@ -1,13 +0,0 @@
-.Visibility {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-  pointer-events: none;
-}
-
-.Visibility__container--enabled:hover .Visibility--uncontrolled,
-.Visibility--visible {
-  opacity: 1;
-  pointer-events: all;
-}

package/src/Old/Visibility/Visibility.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Visibility.css';
-
-export interface Props extends FlexProps {
-  /**
-   * Flag that makes the component work independently from
-   * the container, and controls the visibility.
-   */
-  visible?: boolean;
-}
-
-/**
- * A component to fade content in when the child component
- * is hovered on, or can be used standalone as a controlled component with the
- * visibility prop.
- */
-const Visibility: React.FunctionComponent<Props> = (props: Props) => {
-  const { visible, ...rest } = props;
-  const classes = classnames('Visibility', {
-    'Visibility--uncontrolled': visible === undefined,
-    'Visibility--visible': visible,
-  });
-
-  return <Flex className={classes} {...rest} />;
-};
-
-export default Visibility;

package/src/Old/Visibility/VisibilityContainer.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-
-export interface Props extends FlexProps {
-  /**
-   * Flag that controls if the enabled
-   * state for controlling the child Visibility state.
-   */
-  enabled?: boolean;
-}
-
-/** Container that controls the visibility state on hover. */
-const VisibilityContainer: React.FunctionComponent<Props> = (props: Props) => {
-  const { className, enabled, ...rest } = props;
-  const classes = classnames(className, 'Visibility__container', {
-    'Visibility__container--enabled': enabled,
-  });
-
-  return <Flex className={classes} {...rest} />;
-};
-
-VisibilityContainer.defaultProps = {
-  enabled: true,
-};
-
-export default VisibilityContainer;