@bitrise/bitkit 12.67.0 → 12.69.0-alpha-filter.1

package/package.json

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

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

@@ -45,6 +45,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   infoTooltipProps?: TooltipProps;
   isLoading?: boolean;
   helperText?: ReactNode;
+  inputHeight?: number;
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
   label?: ReactNode;
@@ -69,6 +70,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     isDisabled,
     infoText,
     infoTooltipProps,
+    inputHeight,
     inputRef,
     inputStyle,
     isInvalid,
@@ -117,7 +119,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     ref: inputRef,
     role,
     step,
-    sx: inputStyle,
+    sx: { height: inputHeight, ...inputStyle },
     type,
     value,
   };
@@ -141,9 +143,12 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     }
   };
 
+  const showLabel = label || !!infoText || (withCounter && maxLength);
+  const iconSize = inputHeight && inputHeight < 40 ? 16 : 24;
+
   return (
     <FormControl {...formControlProps}>
-      <Box display="flex" gap="4" alignItems="center" marginBlockEnd="4">
+      <Box display={showLabel ? 'flex' : 'none'} gap="4" alignItems="center" marginBlockEnd="4">
         {label && (
           <FormLabel
             requiredIndicator={null as any}
@@ -177,20 +182,30 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
 
       <InputWrapper {...inputWrapperProps}>
         {leftIconName && (
-          <InputLeftElement margin="12px" pointerEvents="none">
-            <Icon color={leftIconColor} name={leftIconName} />
+          <InputLeftElement
+            marginLeft={inputHeight ? (inputHeight - iconSize) / 2 : 12}
+            top="50%"
+            transform="translateY(-50%)"
+            pointerEvents="none"
+          >
+            <Icon color={leftIconColor} name={leftIconName} size={`${iconSize}`} />
           </InputLeftElement>
         )}
         <ChakraInput
-          paddingLeft={leftIconName ? '43px' : '11px'}
+          paddingLeft={leftIconName ? (inputHeight ? (inputHeight - iconSize) / 2 : 12) + iconSize + 4 : '11px'}
           paddingRight={inputRightPadding}
           {...inputProps}
           onChange={onInputChange}
         />
         {rightAddon && <RightContentWrapper>{rightAddon}</RightContentWrapper>}
         {!rightAddon && rightIconName && (
-          <InputRightElement margin="12px" pointerEvents="none">
-            <Icon name={rightIconName} />
+          <InputRightElement
+            marginRight={inputHeight ? (inputHeight - iconSize) / 2 : 12}
+            top="50%"
+            transform="translateY(-50%)"
+            pointerEvents="none"
+          >
+            <Icon name={rightIconName} size={`${iconSize}`} />
           </InputRightElement>
         )}
       </InputWrapper>

package/src/Components/Icons/Icons.tsx

@@ -0,0 +1,363 @@
+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 '../Form/FilterSwitch/FilterSwitchGroup';
+import FilterSwitch from '../Form/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/Components/Icons/figmaIcons.ts

@@ -1,9 +1,11 @@
+import { SystemStyleObject } from '@chakra-ui/styled-system';
 import { TypeIconName } from '../Icon/Icon';
 
 export type FigmaIcon = {
   iconName: TypeIconName | '';
   figmaToken: string;
   tags?: string;
+  css?: SystemStyleObject;
 };
 
 export const figmaIcons: {
@@ -269,10 +271,48 @@ export const figmaIcons: {
     { iconName: 'Wow', figmaToken: 'wow' },
   ],
   'UI Components': [
-    { iconName: '', figmaToken: 'table-sort: Not sorted' },
-    { iconName: 'Sort', figmaToken: 'table-sort: Hover' },
-    { iconName: '', figmaToken: 'table-sort: Up' },
-    { iconName: '', figmaToken: 'table-sort: Descending' },
+    {
+      iconName: 'Sort',
+      figmaToken: 'table-sort: Not sorted',
+      css: {
+        path: {
+          fill: 'neutral.80',
+        },
+      },
+    },
+    {
+      iconName: 'Sort',
+      figmaToken: 'table-sort: Hover',
+      css: {
+        path: {
+          fill: 'neutral.10',
+        },
+      },
+    },
+    {
+      iconName: 'Sort',
+      figmaToken: 'table-sort: Up',
+      css: {
+        path: {
+          fill: 'neutral.80',
+        },
+        'path:first-of-type': {
+          fill: 'neutral.10',
+        },
+      },
+    },
+    {
+      iconName: 'Sort',
+      figmaToken: 'table-sort: Descending',
+      css: {
+        path: {
+          fill: 'neutral.80',
+        },
+        'path:last-of-type': {
+          fill: 'neutral.10',
+        },
+      },
+    },
     { iconName: 'DropdownArrows', figmaToken: 'dropdown-arrows' },
   ],
 };