@bitrise/bitkit 10.24.2-alpha-chakra.1 → 10.25.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.24.2-alpha-chakra.1",
+  "version": "10.25.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useForm } from 'react-hook-form';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Select from './Select';
 
@@ -54,6 +55,22 @@ export const Controlled = () => {
   );
 };
 
+export const ControlledWithReactHookForm = () => {
+  const form = useForm({
+    defaultValues: {
+      field: undefined,
+    },
+  });
+
+  const props = form.register('field');
+
+  return (
+    <Select w="300px" placeholder="Test holder" {...props} isRequired>
+      {children}
+    </Select>
+  );
+};
+
 export const WithLoading = () => (
   <>
     <Select w="300px" isDisabled placeholder="Test holder">

package/src/Components/Select/Select.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import Select from './Select';
+
+const WithReactHookForm = ({ placeholder }: { placeholder?: string }) => {
+  const form = useForm({ defaultValues: { rating: undefined } });
+  const props = form.register('rating');
+
+  return (
+    <Select placeholder={placeholder} {...props}>
+      <option value="bad">Bad</option>
+      <option value="good">Good</option>
+    </Select>
+  );
+};
+
+const placeholder = 'What was your impression?';
+
+describe('Select', () => {
+  it('renders placeholder option', async () => {
+    render(
+      <Select placeholder={placeholder}>
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const placeholderOption = screen.queryByRole('option', { name: placeholder });
+    expect(placeholderOption).toBeInTheDocument();
+  });
+
+  it('renders placeholder option as disabled', async () => {
+    render(
+      <Select placeholder={placeholder}>
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const placeholderOption = screen.queryByRole('option', { name: placeholder });
+    expect(placeholderOption).toBeDisabled();
+  });
+
+  it('placeholder option is selected if no value is set', async () => {
+    render(
+      <Select placeholder={placeholder}>
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    expect(select).toHaveValue('');
+  });
+
+  it('updates selected option without placeholder', async () => {
+    render(<WithReactHookForm />);
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    await userEvent.selectOptions(select, 'good');
+    expect(select).toHaveValue('good');
+  });
+
+  it('updates selected option with placeholder', async () => {
+    render(<WithReactHookForm placeholder="What was your impression?" />);
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    await userEvent.selectOptions(select, 'good');
+    expect(select).toHaveValue('good');
+  });
+
+  it('handles defaultValue correctly without placeholder', async () => {
+    render(
+      <Select defaultValue="good">
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    expect(select).toHaveValue('good');
+  });
+
+  it('handles defaultValue correctly with placeholder', async () => {
+    render(
+      <Select placeholder="What was your impression?" defaultValue="good">
+        <option value="bad">Bad</option>
+        <option value="good">Good</option>
+      </Select>,
+    );
+
+    const select = await screen.findByRole<HTMLInputElement>('combobox');
+    expect(select).toHaveValue('good');
+  });
+});

package/src/Components/Select/Select.tsx

@@ -41,6 +41,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     placeholder,
     size,
     value,
+    defaultValue,
     ...rest
   } = props;
   const iconSize = size === 'medium' ? '24' : '16';
@@ -48,7 +49,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
     ...rest,
-    ref,
   };
   const selectProperties: ChakraSelectProps = {
     icon: isLoading ? (
@@ -61,21 +61,23 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     onChange,
     size,
     value,
+    defaultValue,
     variant: 'select',
   };
   if (placeholder) {
-    if ('value' in selectProperties) {
-      selectProperties.value = selectProperties.value || '';
+    if ('value' in props) {
+      selectProperties.value = selectProperties.value ?? '';
     } else {
-      selectProperties.defaultValue = '';
+      selectProperties.defaultValue = props.defaultValue ?? '';
     }
   }
+
   return (
     <FormControl {...formControlProps}>
       {label && <FormLabel>{label}</FormLabel>}
       <ChakraSelect data-testid={dataTestid} ref={ref} {...selectProperties}>
         {placeholder && (
-          <option hidden disabled value="">
+          <option disabled value="">
             {placeholder}
           </option>
         )}

package/src/Components/Text/Text.stories.tsx

@@ -17,5 +17,6 @@ WithProps.args = sortObjectByKey({
   children: 'The quick brown fox jumps over the lazy dog.',
   fontWeight: 'normal',
   letterSpacing: 'normal',
+  size: ['5', '3'],
   textTransform: 'none',
 });

package/src/Components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef } from '@chakra-ui/react';
+import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef, ResponsiveValue } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 type TextTags =
@@ -37,21 +37,20 @@ type TextTags =
   | 'var';
 
 export interface TextProps extends ChakraTextProps {
-  align?: 'center' | 'justify' | 'left' | 'right';
+  align?: ResponsiveValue<'center' | 'justify' | 'left' | 'right'>;
   /**
    * Any valid HTML text tag
    */
   as?: TextTags;
-  className?: string;
   /**
    * Font weight
    */
-  fontWeight?: 'bold' | 'normal' | string[];
+  fontWeight?: ResponsiveValue<'bold' | 'normal'>;
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
-  size?: TextSizes;
-  textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
+  size?: ResponsiveValue<TextSizes>;
+  textTransform?: ResponsiveValue<'capitalize' | 'lowercase' | 'none' | 'uppercase'>;
   hasEllipsis?: boolean;
 }
 

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,13 +1,15 @@
 export const BREAKPOINTS = {
   MOBILE: 'base',
+  TABLET: 'tablet',
   DESKTOP: 'desktop',
-  WIDE: 'wide',
+  WIDEDESKTOP: 'wideDesktop',
 };
 
 const breakpoints = {
   [BREAKPOINTS.MOBILE]: '0rem',
-  [BREAKPOINTS.DESKTOP]: '53rem', // 848px
-  [BREAKPOINTS.WIDE]: '101rem', // 1616px
+  [BREAKPOINTS.TABLET]: '53rem', // 848px
+  [BREAKPOINTS.DESKTOP]: '80rem', // 1280px
+  [BREAKPOINTS.WIDEDESKTOP]: '101rem', // 1616px
 };
 
 export default breakpoints;

package/src/Foundations/Responsive/Responsive.examples.tsx

@@ -0,0 +1,95 @@
+import { Code } from '@chakra-ui/react';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import CardContent from '../../Components/Card/CardContent';
+import Link from '../../Components/Link/Link';
+import List from '../../Components/List/List';
+import ListItem from '../../Components/List/ListItem';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
+
+import useResponsive from '../../hooks/useResponsive';
+
+export const Responsive = () => {
+  const { isMobile, isTablet, isDesktop, isWideDesktop } = useResponsive();
+  return (
+    <Provider>
+      <Text as="h2" size="8" marginBottom="24">
+        Responsive solutions
+      </Text>
+
+      <Card boxShadow="medium" marginBottom="48" padding="24">
+        <CardContent>
+          <Text as="h3" size="6" marginBottom="12">
+            With responsive style props
+          </Text>
+          <Text marginBottom="32">
+            Use the array syntax on style props, when the element should be always visible, but you want to change
+            margin, padding, etc on it.
+            <br />
+            <Link
+              colorScheme="purple"
+              href="https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax"
+              isExternal
+              isUnderlined
+            >
+              https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax
+            </Link>
+          </Text>
+          <Text marginBottom="8">We have 4 breakpoints:</Text>
+          <Box
+            backgroundColor={['green.40', 'purple.30', 'red.40', 'neutral.40']}
+            color="neutral.93"
+            paddingX="24"
+            paddingY="16"
+            transition="200ms"
+          >
+            This Box is
+            <List>
+              <ListItem>green below 848px (53rem)</ListItem>
+              <ListItem>purple from 848px (53rem) but below 1280px (80rem)</ListItem>
+              <ListItem>red from 1280px (80rem) but below 1616px (101rem)</ListItem>
+              <ListItem>gray from 1616px (101rem)</ListItem>
+            </List>
+          </Box>
+        </CardContent>
+      </Card>
+
+      <Card boxShadow="medium" marginBottom="24" padding="24">
+        <CardContent>
+          <Text as="h3" size="6" marginBottom="12">
+            With useResponsive hook
+          </Text>
+          <Text marginBottom="24">
+            Use this hook when you want to render something conditionally. It will return an object with 1-4 booleans,
+            like:
+            <br />
+            <Code backgroundColor="neutral.20" color="neutral.93" paddingY="4" paddingX="8">
+              const &#123; isMobile, isTablet, isDesktop, isWideDesktop &#125; = useResponsive();
+            </Code>
+          </Text>
+          {isMobile && (
+            <Box backgroundColor="green.40" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered below 848px (53rem), because isMobile is true.
+            </Box>
+          )}
+          {isTablet && (
+            <Box backgroundColor="purple.30" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered from 848px (53rem) but below 1280px (80rem), because isTablet is true.
+            </Box>
+          )}
+          {isDesktop && (
+            <Box backgroundColor="red.40" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered from 1280px (80rem) but below 1616px, because isDesktop is true.
+            </Box>
+          )}
+          {isWideDesktop && (
+            <Box backgroundColor="neutral.40" color="neutral.93" paddingX="24" paddingY="16">
+              This Box is rendered from 1616px (101rem), because isWideDesktop is true.
+            </Box>
+          )}
+        </CardContent>
+      </Card>
+    </Provider>
+  );
+};

package/src/Foundations/Responsive/Responsive.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs';
+import { Responsive } from './Responsive.examples';
+
+<Meta title="Foundations/Responsive" />
+
+<Responsive />

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { default as useHistory } from './useHistory';
+export { default as useResponsive } from './useResponsive';
 export { useDisclosure } from '@chakra-ui/react';

package/src/hooks/useResponsive.ts

@@ -0,0 +1,23 @@
+import { useMediaQuery } from '@chakra-ui/react';
+import breakpoints, { BREAKPOINTS } from '../Foundations/Breakpoints/Breakpoints';
+
+const minusOnePixel = (value: string) => {
+  const valueInPixels = parseInt(value, 10) * 16;
+  return `${valueInPixels - 1}px`;
+};
+
+const mediaQueries = [
+  `(min-width: ${breakpoints[BREAKPOINTS.MOBILE]}) and (max-width: ${minusOnePixel(breakpoints[BREAKPOINTS.TABLET])})`,
+  `(min-width: ${breakpoints[BREAKPOINTS.TABLET]}) and (max-width: ${minusOnePixel(breakpoints[BREAKPOINTS.DESKTOP])})`,
+  `(min-width: ${breakpoints[BREAKPOINTS.DESKTOP]}) and (max-width: ${minusOnePixel(
+    breakpoints[BREAKPOINTS.WIDEDESKTOP],
+  )})`,
+  `(min-width: ${breakpoints[BREAKPOINTS.WIDEDESKTOP]})`,
+];
+
+const useResponsive = () => {
+  const [isMobile, isTablet, isDesktop, isWideDesktop] = useMediaQuery(mediaQueries);
+  return { isMobile, isTablet, isDesktop, isWideDesktop };
+};
+
+export default useResponsive;