@bitrise/bitkit 12.71.0 → 12.71.2

package/package.json

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

package/src/Components/AccordionLegacy/Accordion.theme.ts

@@ -1,6 +1,5 @@
-import { StyleFunctionProps } from '@chakra-ui/styled-system';
+import { StyleFunctionProps, SystemStyleObject } from '@chakra-ui/styled-system';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import { CSSObject } from '@emotion/react';
 
 type ColorObj = {
   [key: string]: {
@@ -74,10 +73,10 @@ const variants: VariantObj = {
   },
 };
 
-const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colorScheme' | 'variant'>) => CSSObject = ({
+const LegacyBaseStyle: ({
   colorScheme,
   variant,
-}) => ({
+}: Pick<StyleFunctionProps, 'colorScheme' | 'variant'>) => SystemStyleObject = ({ colorScheme, variant }) => ({
   item: {
     border: variants[variant].border ?? '1px solid',
     borderColor: colors[colorScheme].border,
@@ -122,7 +121,7 @@ const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colo
   },
 });
 
-const BaseStyle: () => CSSObject = () => ({
+const BaseStyle: () => SystemStyleObject = () => ({
   item: {
     borderTop: '1px solid',
     borderTopColor: 'neutral.90',

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -69,7 +69,12 @@ const FilterAdd = (props: FilterAddProps) => {
         zIndex={isOpen ? 'dialog' : undefined}
       >
         {selectedCategory ? (
-          <FilterForm category={selectedCategory} onChange={onFilterChange} onCancel={onClose} />
+          <FilterForm
+            category={selectedCategory}
+            categoryName={data[selectedCategory].categoryName}
+            onChange={onFilterChange}
+            onCancel={onClose}
+          />
         ) : (
           categoryList.map((category) => {
             const { categoryName, dependsOn } = data[category];

package/src/{Components → Foundations}/Icons/figmaIcons.ts

@@ -1,5 +1,5 @@
 import { SystemStyleObject } from '@chakra-ui/styled-system';
-import { TypeIconName } from '../Icon/Icon';
+import { TypeIconName } from '../../Components/Icon/Icon';
 
 export type FigmaIcon = {
   iconName: TypeIconName | '';

package/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../tsconfig.json",
-  "include": [
-    "**/*"
-  ]
+  "compilerOptions": {
+    "rootDir": ".."
+  }
 }

package/tsconfig.json

@@ -19,6 +19,6 @@
     "sourceMap": true,
     "strict": true,
     "target": "es5",
-    "types": ["node", "jest", "@testing-library/jest-dom"],
-  }
+  },
+  "include": ["./src/**/*", "./spec/jest.setup.ts"],
 }

package/src/Components/Icons/Icons.tsx

@@ -1,363 +0,0 @@
-import { Fragment, useState } from 'react';
-import { Grid, GridItem, SystemStyleObject, Tooltip, useClipboard, useToast } from '@chakra-ui/react';
-/* eslint-disable import/no-extraneous-dependencies */
-import { Unstyled } from '@storybook/blocks';
-import Box from '../Box/Box';
-import Card from '../Card/Card';
-import Icon, { TypeIconName } from '../Icon/Icon';
-import Text from '../Text/Text';
-import Table from '../Table/Table';
-import Tbody from '../Table/Tbody';
-import Td from '../Table/Td';
-import Tr from '../Table/Tr';
-import Th from '../Table/Th';
-import Thead from '../Table/Thead';
-import Provider from '../Provider/Provider';
-import Input from '../Form/Input/Input';
-import FilterSwitchGroup from '../Filter/FilterSwitch/FilterSwitchGroup';
-import FilterSwitch from '../Filter/FilterSwitch/FilterSwitch';
-import * as bigIcons from './24x24';
-import { FigmaIcon, figmaIcons } from './figmaIcons';
-
-const iconSizeTooltipSytle: SystemStyleObject = {
-  backgroundColor: 'purple.50',
-  color: 'neutral.100',
-  borderRadius: '3px',
-  position: 'absolute',
-  fontSize: '8px',
-  padding: '2px 4px',
-  lineHeight: '8px',
-  display: 'none',
-};
-
-const iconSizeTooltipHoverStyle: SystemStyleObject = {
-  svg: {
-    border: '1px dotted transparent',
-  },
-  '&:hover svg.icon-preview': {
-    borderColor: 'purple.50',
-  },
-  '&:hover .icon-size-tooltip': {
-    display: 'block',
-  },
-};
-
-const IconSizeTooltip = ({ size }: { size: '24' | '16' }) => {
-  return (
-    <Box
-      className="icon-size-tooltip"
-      sx={{
-        ...iconSizeTooltipSytle,
-        marginLeft: size === '24' ? '-1px' : '-5px',
-        marginTop: size === '24' ? '2px' : '0px',
-      }}
-    >
-      {`${size}px`}
-    </Box>
-  );
-};
-
-const IconCard = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObject }) => {
-  const { onCopy } = useClipboard(figmaIcon.iconName, {});
-  const toast = useToast();
-  const name = (figmaIcon.iconName === '' ? 'WarningColored' : figmaIcon.iconName) as TypeIconName;
-  return (
-    <Tooltip
-      label={
-        <Text textAlign="center">
-          {figmaIcon.iconName || 'Missing!'}
-          <br />
-          click to copy <Icon size="16" color="white" name="Duplicate" />
-        </Text>
-      }
-    >
-      <Card
-        float="left"
-        width={150}
-        marginRight={8}
-        marginBottom={8}
-        color={name.match(/White$/) ? 'neutral.100' : 'text.body'}
-        background={name.match(/White$/) ? 'brand.primary' : 'neutral.100'}
-        sx={{
-          '&:hover': {
-            borderColor: 'purple.50',
-          },
-          ...iconSizeTooltipHoverStyle,
-          ...sx,
-        }}
-      >
-        <Grid
-          onClick={() => {
-            onCopy();
-            toast.closeAll();
-            toast({
-              title: (
-                <>
-                  Copied <code>{figmaIcon.iconName}</code>!
-                </>
-              ),
-            });
-          }}
-          cursor="pointer"
-          alignContent="space-around"
-          gridTemplateColumns="1f 1f"
-          padding={8}
-          paddingTop={16}
-          gap="16"
-          alignItems="center"
-        >
-          <Box marginX="auto" opacity={figmaIcon.iconName === '' ? 0 : 1}>
-            <Icon className="icon-preview" name={name} size="24" />
-            <IconSizeTooltip size="24" />
-          </Box>
-          <Box marginX="auto" opacity={figmaIcon.iconName === '' ? 0 : 1}>
-            <Icon className="icon-preview" name={name} size="16" />
-            <IconSizeTooltip size="16" />
-          </Box>
-          <GridItem as={Text} hasEllipsis textAlign="center" fontSize="2" lineHeight="1.25rem" colSpan={2}>
-            {figmaIcon.iconName || '???'}
-            {figmaIcon.figmaToken && (
-              <>
-                <br />
-                <Box as="span" textAlign="center" fontSize="2" lineHeight="1.25rem" opacity={0.5}>
-                  {figmaIcon.figmaToken}
-                </Box>
-              </>
-            )}
-          </GridItem>
-        </Grid>
-      </Card>
-    </Tooltip>
-  );
-};
-
-const IconGrid = ({ categoryName, icons }: { categoryName: string; icons: FigmaIcon[] }) => (
-  <>
-    <Box fontSize="small" opacity={0.5}>
-      {categoryName}
-    </Box>
-    <Box marginBottom="16" overflow="auto">
-      {icons.map((figmaIcon) => {
-        return (
-          <Fragment key={figmaIcon.figmaToken !== '???' ? figmaIcon.figmaToken : figmaIcon.iconName}>
-            <IconCard figmaIcon={figmaIcon} sx={figmaIcon.css || {}} />
-          </Fragment>
-        );
-      })}
-    </Box>
-  </>
-);
-
-const IconRow = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObject }) => {
-  const { onCopy } = useClipboard(figmaIcon.iconName, {});
-  const toast = useToast();
-  const name = (figmaIcon.iconName === '' ? 'WarningColored' : figmaIcon.iconName) as TypeIconName;
-
-  const cellStyle = {
-    color: name.match(/White$/) ? 'neutral.100' : 'text.body',
-    backgroundColor: name.match(/White$/) ? 'purple.10' : 'neutral.100',
-    ...sx,
-  };
-  const cellStyleHover = {
-    backgroundColor: name.match(/White$/) ? 'purple.20' : 'neutral.95',
-  };
-
-  return (
-    <Tr
-      className="icon-row"
-      sx={{
-        ...iconSizeTooltipHoverStyle,
-        '&.icon-row:hover td': cellStyleHover,
-      }}
-    >
-      <Td sx={cellStyle} width={32}>
-        <Icon className="icon-preview" name={name} size="24" opacity={figmaIcon.iconName === '' ? 0 : 1} />
-        {figmaIcon.iconName !== '' && <IconSizeTooltip size="24" />}
-      </Td>
-      <Td sx={cellStyle} width={32}>
-        <Icon className="icon-preview" name={name} size="16" opacity={figmaIcon.iconName === '' ? 0 : 1} />
-        {figmaIcon.iconName !== '' && <IconSizeTooltip size="16" />}
-      </Td>
-      <Td sx={cellStyle} width="20%">
-        {figmaIcon.iconName || '???'}
-        <Icon
-          cursor="pointer"
-          onClick={() => {
-            onCopy();
-            toast.closeAll();
-            toast({
-              title: (
-                <>
-                  Copied <code>{figmaIcon.iconName}</code>!
-                </>
-              ),
-            });
-          }}
-          marginLeft="8"
-          name="Duplicate"
-          size="16"
-          sx={{
-            path: {
-              fill: 'neutral.80',
-            },
-          }}
-        />
-      </Td>
-      <Td sx={cellStyle} width="20%">
-        <Box opacity={0.5}>{figmaIcon.figmaToken || '???'}</Box>
-      </Td>
-      <Td fontSize={2} sx={cellStyle}>
-        {figmaIcon.tags || ''}
-      </Td>
-    </Tr>
-  );
-};
-
-const IconTable = ({ categoryName, icons }: { categoryName: string; icons: FigmaIcon[] }) => (
-  <Fragment key={categoryName}>
-    <Thead>
-      <Tr>
-        <Th colSpan={5}>
-          <Box fontSize="small" opacity={0.5}>
-            {categoryName}
-          </Box>
-        </Th>
-      </Tr>
-    </Thead>
-    <Tbody>
-      {icons.map((figmaIcon) => {
-        return (
-          <Fragment key={figmaIcon.figmaToken !== '???' ? figmaIcon.figmaToken : figmaIcon.iconName}>
-            <IconRow figmaIcon={figmaIcon} sx={figmaIcon.css || {}} />
-          </Fragment>
-        );
-      })}
-    </Tbody>
-  </Fragment>
-);
-
-const findToken = (iconName: TypeIconName) => {
-  const filteredIcons = Object.values(figmaIcons)
-    .reduce((accumulator, value) => accumulator.concat(value), [])
-    .filter((icon) => icon.iconName === iconName);
-  if (filteredIcons.length > 0) return filteredIcons[0];
-  return null;
-};
-
-const getOldIcons = () =>
-  Object.keys(bigIcons)
-    .filter((icon) => {
-      const iconName = icon as TypeIconName;
-      const figmaToken = findToken(iconName);
-      if (figmaToken) return false;
-      return true;
-    })
-    .map((icon) => {
-      const iconName = icon as TypeIconName;
-      return {
-        iconName,
-        figmaToken: '???',
-      };
-    });
-
-const searchIcons = (search: string) => {
-  const searchRegExp = new RegExp(`${search}`, 'im');
-  return Object.values(figmaIcons)
-    .reduce((accumulator, value) => accumulator.concat(value), [])
-    .concat(getOldIcons())
-    .filter((icon) => {
-      if (icon.iconName.match(searchRegExp)) return true;
-      if (icon.figmaToken.match(searchRegExp)) return true;
-      if (icon.tags && icon.tags.match(searchRegExp)) return true;
-      return false;
-    });
-};
-
-export const GridView = (args: { search: string }) => {
-  const { search } = args;
-
-  if (search) {
-    return <IconGrid key="Search" categoryName="Search results" icons={searchIcons(search)} />;
-  }
-
-  const figmaIconGrids = Object.keys(figmaIcons).map((categoryName) => (
-    <IconGrid key={categoryName} categoryName={categoryName} icons={figmaIcons[categoryName]} />
-  ));
-  const oldIconGrid = <IconGrid key="Uncategorized" categoryName="Uncategorized" icons={getOldIcons()} />;
-
-  return (
-    <>
-      {figmaIconGrids}
-      {oldIconGrid}
-    </>
-  );
-};
-
-export const TableView = (args: { search: string }) => {
-  const { search } = args;
-
-  if (search) {
-    return (
-      <Table>
-        <IconTable key="Search" categoryName="Search results" icons={searchIcons(search)} />
-      </Table>
-    );
-  }
-
-  const figmaIconTable = Object.keys(figmaIcons).map((categoryName) => (
-    <IconTable key={categoryName} categoryName={categoryName} icons={figmaIcons[categoryName]} />
-  ));
-  const oldIconTable = <IconTable key="Uncategorized" categoryName="Uncategorized" icons={getOldIcons()} />;
-
-  return (
-    <Table>
-      {figmaIconTable}
-      {oldIconTable}
-    </Table>
-  );
-};
-
-export const Icons = () => {
-  const [search, setSearch] = useState('');
-  const [layout, setLayout] = useState('grid');
-
-  const textWrapperStyle = {
-    marginBottom: '32',
-    maxWidth: '31.25rem',
-  };
-  return (
-    <Unstyled>
-      <Provider>
-        <Box sx={textWrapperStyle}>
-          <Text as="h2" size="8" sx={{ marginBottom: '24' }}>
-            Icons
-          </Text>
-        </Box>
-        <Box display="flex" alignItems="top">
-          <Box>
-            <FilterSwitchGroup value={layout} onChange={setLayout}>
-              <FilterSwitch value="grid">
-                <Icon name="MenuGrid" size="16" />
-              </FilterSwitch>
-              <FilterSwitch value="table">
-                <Icon name="MenuHamburger" size="16" />
-              </FilterSwitch>
-            </FilterSwitchGroup>
-          </Box>
-          <Box width="100%" marginLeft={16}>
-            <Input
-              leftIconName="Magnifier"
-              placeholder="Search icons..."
-              value={search}
-              inputHeight={38}
-              onChange={(event) => setSearch(event.target.value)}
-            />
-          </Box>
-        </Box>
-        <br />
-        {layout === 'grid' ? <GridView search={search} /> : null}
-        {layout === 'table' ? <TableView search={search} /> : null}
-      </Provider>
-    </Unstyled>
-  );
-};

package/src/Foundations/Colors/DesignTokens.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { Unstyled } from '@storybook/blocks';
-import { HStack, VStack } from '@chakra-ui/react';
-import Box from '../../Components/Box/Box';
-import Card from '../../Components/Card/Card';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-
-const TOKENS = {
-  'brand.primary': 'Primary brand color',
-  'text.body': 'Default body text color',
-  'text.secondary': 'Secondary text color, for inline help and less important text',
-  'text.link': 'Default text link color',
-  'text.linkHover': 'Default text link hover color',
-  'separator.primary': 'Default color for separator lines',
-} as any;
-
-const DesignTokens = () => {
-  const textWrapperStyle = {
-    marginBottom: '32',
-    maxWidth: '31.25rem',
-  };
-  return (
-    <Unstyled>
-      <Provider>
-        <Box sx={textWrapperStyle}>
-          <Text as="h2" size="8" sx={{ marginBottom: '24' }}>
-            Design tokens
-          </Text>
-          <Text>
-            Most of our color usage is defined in the Bitkit components themselves, but we also have some additional
-            colors that we frequently re-use outside of components too. We have defined these colors as design tokens.
-          </Text>
-          <Text color="secondary" size="2" sx={{ marginTop: '16' }}>
-            Design tokens are implemented as styles, which reference the color styles. They are managed by the Figma
-            plugin called “Theemo”.
-          </Text>
-        </Box>
-        <Card boxShadow="medium" marginBottom="96" padding="24">
-          <VStack align="flex-start" as="ul" spacing="32">
-            {Object.keys(TOKENS).map((token: string) => (
-              <HStack as="li" key={token} spacing="32">
-                <Box
-                  sx={{
-                    backgroundColor: token,
-                    height: '64',
-                    width: '10rem',
-                  }}
-                />
-                <VStack align="flex-start">
-                  <Text fontWeight="bold" size="4">
-                    {token}
-                  </Text>
-                  <Text color="secondary" size="2">
-                    {TOKENS[token]}
-                  </Text>
-                </VStack>
-              </HStack>
-            ))}
-          </VStack>
-        </Card>
-      </Provider>
-    </Unstyled>
-  );
-};
-
-export default DesignTokens;

package/src/Foundations/Colors/Palette.tsx

@@ -1,146 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { ReactNode } from 'react';
-import { Unstyled } from '@storybook/blocks';
-import { HStack, SystemStyleObject, VStack } from '@chakra-ui/react';
-import Box from '../../Components/Box/Box';
-import Card from '../../Components/Card/Card';
-import Divider from '../../Components/Divider/Divider';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-import colors from './Colors';
-
-const paletteKeys = ['neutral', 'purple', 'red', 'orange', 'yellow', 'green', 'turquoise', 'blue'] as Array<
-  keyof typeof colors
->;
-
-const getTextColorFromShade = (backgroundColor: string, darkColor = 'text.body', lightColor = 'neutral.100') => {
-  const shade = Number(backgroundColor.split('.')[1]);
-  return shade < 70 ? lightColor : darkColor;
-};
-
-const Shade = ({ children }: { children: number }) => {
-  const style = { paddingRight: '24', width: '6rem', height: '6rem', lineHeight: '6rem' };
-  return (
-    <Text align="right" sx={style}>
-      {children}
-    </Text>
-  );
-};
-
-type InfoHeaderProps = { description: string; shades: number[]; style?: any; title: string };
-
-const InfoHeader = ({ description, shades, style, title }: InfoHeaderProps) => (
-  <HStack
-    sx={{
-      color: getTextColorFromShade(style.backgroundColor),
-      ...style,
-    }}
-  >
-    <Box sx={{ paddingLeft: '24' }}>
-      <Text fontWeight="bold" size="4" sx={{ marginBottom: '8' }}>
-        {title}
-      </Text>
-      <Text
-        size="3"
-        sx={{ color: getTextColorFromShade(style.backgroundColor, 'text.secondary'), maxWidth: '11.875rem' }}
-      >
-        {description}
-      </Text>
-    </Box>
-    <VStack spacing="0">
-      {shades.map((s) => (
-        <Shade key={s}>{s}</Shade>
-      ))}
-    </VStack>
-  </HStack>
-);
-
-const Item = ({ backgroundColor, children }: { backgroundColor: string; children: ReactNode }) => {
-  const style = {
-    backgroundColor,
-    color: 'transparent',
-    padding: '8',
-    height: '6rem',
-    width: '6rem',
-    _hover: { boxShadow: 'large', color: getTextColorFromShade(backgroundColor), transform: 'scale(1.1)' },
-  } as SystemStyleObject;
-  return (
-    <Box sx={style}>
-      <Text size="2" textTransform="lowercase">
-        {children}
-      </Text>
-    </Box>
-  );
-};
-
-const Palette = () => (
-  <Unstyled>
-    <Provider>
-      <Text as="h2" size="8">
-        Full palette
-      </Text>
-      <Card boxShadow="medium" marginTop="24" padding="24">
-        <HStack spacing="0" sx={{ alignItems: 'flex-start', marginBottom: '16' }}>
-          <VStack spacing="0">
-            <InfoHeader
-              description="These colors have sufficient contrast with any dark color."
-              shades={[100, 95, 93]}
-              style={{ backgroundColor: 'neutral.95', marginTop: '1.75rem' }}
-              title="Light colors"
-            />
-            <InfoHeader
-              description="Avoid using these colors for text. If you do, check if they have a high enough contrast."
-              shades={[90, 80, 70, 60, 50]}
-              style={{ backgroundColor: 'neutral.100' }}
-              title="Decorative colors"
-            />
-            <InfoHeader
-              description="These colors have sufficient contrast with any light color."
-              shades={[40, 30, 20, 10]}
-              style={{ backgroundColor: 'neutral.10' }}
-              title="Dark colors"
-            />
-          </VStack>
-          {paletteKeys.map((colorName) => (
-            <VStack key={colorName} spacing="0">
-              <Text
-                as="span"
-                size="1"
-                sx={{
-                  color: 'text.primary',
-                  marginBottom: '12',
-                }}
-                textTransform="uppercase"
-              >
-                {colorName}
-              </Text>
-              <Divider
-                size="1"
-                sx={{
-                  borderColor: 'neutral.95',
-                }}
-              />
-              {Object.keys(colors[colorName])
-                .reverse()
-                .map((shade) => {
-                  const backgroundColor = `${colorName}.${shade}`;
-                  return (
-                    <Item backgroundColor={backgroundColor} key={backgroundColor}>
-                      {backgroundColor}
-                      <br />
-                      <br />
-                      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                      {/* @ts-ignore */}
-                      {colors[colorName][shade]}
-                    </Item>
-                  );
-                })}
-            </VStack>
-          ))}
-        </HStack>
-      </Card>
-    </Provider>
-  </Unstyled>
-);
-
-export default Palette;