@bitrise/bitkit 12.52.4 → 12.52.6

package/package.json

@@ -1,94 +1,94 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.52.4",
+  "version": "12.52.6",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
-    "build:icons": "ts-node ./scripts/build-icons.ts",
     "commitlint": "commitlint",
     "lint": "eslint src --ext ts,tsx",
     "semantic-release": "semantic-release",
     "start": "yarn storybook",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "alias": {
     "@bitrise/bitkit": "./src",
     "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.0",
+    "@chakra-ui/react": "^2.8.1",
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/styled-system": "^2.9.1",
-    "@chakra-ui/theme": "^2.3.0",
-    "@chakra-ui/theme-tools": "^2.1.0",
+    "@chakra-ui/theme": "^3.3.0",
+    "@chakra-ui/theme-tools": "^2.1.1",
     "@chakra-ui/utils": "^2.0.15",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "ast-types": "npm:@gkz/ast-types",
-    "framer-motion": "^7.6.5",
-    "luxon": "^3.1.0",
+    "framer-motion": "^10.16.4",
+    "luxon": "^3.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.1",
-    "react-markdown": "^8.0.7"
+    "react-focus-lock": "^2.9.6",
+    "react-markdown": "^9.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@bitrise/eslint-plugin": "^2.2.0",
-    "@commitlint/cli": "^16.3.0",
-    "@commitlint/config-conventional": "^16.2.4",
-    "@google-cloud/storage": "^5.20.5",
-    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@bitrise/eslint-plugin": "^2.3.0",
+    "@commitlint/cli": "^17.8.0",
+    "@commitlint/config-conventional": "^17.8.0",
+    "@google-cloud/storage": "^7.3.0",
+    "@semantic-release/commit-analyzer": "^11.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.15",
-    "@testing-library/dom": "^8.19.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.2",
-    "@types/luxon": "^3.1.0",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "axios": "^0.27.2",
-    "eslint": "^8.27.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.6.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "@storybook/addon-actions": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addons": "^7.5.0",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.0",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/luxon": "^3.3.2",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "axios": "^1.5.1",
+    "eslint": "^8.51.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.10",
-    "eslint-plugin-testing-library": "^5.9.1",
-    "glob": "^8.0.3",
-    "husky": "^7.0.4",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^28.1.3",
-    "jsdom": "^20.0.2",
-    "prettier": "^2.7.1",
-    "react-hook-form": "^7.39.2",
-    "semantic-release": "^19.0.5",
-    "ts-jest": "^29.0.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.1.0",
+    "glob": "^10.3.10",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.0.3",
+    "react-hook-form": "^7.47.0",
+    "semantic-release": "^22.0.5",
+    "storybook": "^7.5.0",
+    "ts-jest": "^29.1.1",
     "typescript": "^4.8.4"
   },
   "files": [
@@ -98,8 +98,5 @@
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
-  },
-  "resolutions": {
-    "**/ast-types": "npm:@gkz/ast-types"
   }
 }

package/src/Components/Accordion/Accordion.tsx

@@ -16,13 +16,7 @@ const Accordion = (props: AccordionProps) => {
   const { children, defaultIndex, ...rest } = props;
 
   return (
-    <ChakraAccordion
-      allowMultiple
-      allowToggle
-      reduceMotion={prefersReducedMotion}
-      defaultIndex={defaultIndex}
-      {...rest}
-    >
+    <ChakraAccordion allowMultiple reduceMotion={prefersReducedMotion} defaultIndex={defaultIndex} {...rest}>
       {children}
     </ChakraAccordion>
   );

package/src/Components/AccordionLegacy/LegacyAccordion.tsx

@@ -44,7 +44,6 @@ const LegacyAccordion = (props: LegacyAccordionProps) => {
   return (
     <ChakraAccordion
       allowMultiple
-      allowToggle
       colorScheme={colorScheme}
       variant={variant}
       reduceMotion={prefersReducedMotion}

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -1,11 +1,20 @@
 import { ReactNode, useCallback } from 'react';
-import { DateTime } from 'luxon';
+import { DateTime, Settings } from 'luxon';
 import { BoxProps, useMultiStyleConfig } from '@chakra-ui/react';
 import { createContext } from '@chakra-ui/react-utils';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import { useDatePickerContext } from './DatePicker.context';
 
+// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64995
+Settings.throwOnInvalid = true;
+
+declare module 'luxon' {
+  export interface TSSettings {
+    throwOnInvalid: true;
+  }
+}
+
 interface Context {
   onPreviousMonth: () => void;
   onNextMonth: () => void;

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

@@ -1,6 +1,4 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-
-const CheckboxTheme: ComponentStyleConfig = {
+const CheckboxTheme = {
   baseStyle: {
     icon: {
       color: 'neutral.100',

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

@@ -1,6 +1,4 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-
-const FilterSwitch: ComponentStyleConfig = {
+const FilterSwitch = {
   baseStyle: () => {
     return {
       container: {

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

@@ -1,6 +1,4 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-
-const RadioTheme: ComponentStyleConfig = {
+const RadioTheme = {
   baseStyle: {
     icon: {
       color: 'neutral.100',

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -9,23 +9,19 @@ import Text from '../Text/Text';
 import CodeBlock from '../CodeBlock/CodeBlock';
 
 const defaultComponents: Components = {
-  h1: ({ node, ...props }) => <Text size="6" {...props} />,
-  h2: ({ node, ...props }) => <Text paddingTop="12" size="5" {...props} />,
-  h3: ({ node, ...props }) => <Text paddingTop="12" size="4" fontWeight="bold" {...props} />,
-  h4: ({ node, ...props }) => <Text paddingTop="12" size="3" fontWeight="bold" {...props} />,
-  h5: ({ node, ...props }) => <Text paddingTop="12" size="2" fontWeight="bold" {...props} />,
-  h6: ({ node, ...props }) => <Text paddingTop="12" size="1" fontWeight="bold" {...props} />,
+  h1: ({ node, ...props }) => <Text as="h1" size="6" {...props} />,
+  h2: ({ node, ...props }) => <Text as="h2" size="5" {...props} />,
+  h3: ({ node, ...props }) => <Text as="h3" size="4" fontWeight="bold" {...props} />,
+  h4: ({ node, ...props }) => <Text as="h4" size="3" fontWeight="bold" {...props} />,
+  h5: ({ node, ...props }) => <Text as="h5" size="2" fontWeight="bold" {...props} />,
+  h6: ({ node, ...props }) => <Text as="h6" size="1" fontWeight="bold" {...props} />,
   p: ({ node, ...props }) => <Text {...props} />,
   hr: () => <Divider my="16" borderColor="separator.primary" size="2" />,
-  ul: ({ node, ordered, ...props }) => <List paddingBottom="8" {...props} />,
-  ol: ({ node, ordered, ...props }) => <List paddingBottom="8" isOrdered {...props} />,
-  code: ({ node, inline, ...props }) => {
-    if (inline) {
-      return <code {...props} />;
-    }
-    return <CodeBlock {...props} />;
-  },
-  li: ({ node, ordered, ...props }) => <ListItem {...props} />,
+  ul: ({ node, ...props }) => <List {...props} />,
+  ol: ({ node, ...props }) => <List isOrdered {...props} />,
+  li: ({ node, ...props }) => <ListItem {...props} />,
+  code: ({ node, ...props }) => <code {...props} />,
+  pre: ({ node, ...props }) => <CodeBlock>{props.children}</CodeBlock>,
   blockquote: ({ children }) => (
     <Box
       py="8"

package/src/Components/Tag/Tag.theme.ts

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
+import { TagProps } from './Tag';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
   'container',
@@ -10,35 +11,46 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
 ]);
 
 const sizes = {
-  sm: definePartsStyle({
-    container: {
-      paddingX: rem(7),
-      paddingY: rem(1),
-    },
-    label: {
-      fontSize: '1',
-      lineHeight: rem(16),
-    },
-    closeButton: {
-      height: '20',
-      width: '20',
-      marginRight: rem(-6),
-    },
+  sm: definePartsStyle((props) => {
+    const { onClose, iconName, withIcon } = props as TagProps;
+    const leftIcon = iconName || withIcon;
+
+    return {
+      container: {
+        paddingLeft: leftIcon ? rem(4) : rem(8),
+        paddingRight: onClose ? rem(2) : rem(8),
+        paddingY: onClose ? rem(2) : rem(4),
+      },
+      label: {
+        fontSize: rem(12),
+        lineHeight: rem(16),
+      },
+      closeButton: {
+        height: '20',
+        width: '20',
+      },
+    };
   }),
-  md: definePartsStyle({
-    container: {
-      paddingX: rem(11),
-      paddingY: rem(3),
-    },
-    label: {
-      fontSize: '2',
-      lineHeight: rem(24),
-    },
-    closeButton: {
-      height: '24',
-      width: '24',
-      marginRight: rem(-7),
-    },
+  md: definePartsStyle((props) => {
+    const { onClose, iconName, withIcon } = props as TagProps;
+    const leftIcon = iconName || withIcon;
+
+    return {
+      container: {
+        paddingLeft: leftIcon ? rem(6) : rem(12),
+        paddingRight: onClose ? rem(4) : rem(12),
+        paddingY: leftIcon || onClose ? rem(4) : rem(6),
+      },
+      label: {
+        fontSize: '2',
+        lineHeight: rem(20),
+      },
+      closeButton: {
+        height: '24',
+        width: '24',
+        marginLeft: '8',
+      },
+    };
   }),
 };
 
@@ -48,9 +60,7 @@ const baseStyle = definePartsStyle(({ colorScheme }) => {
     backgroundColor: `${colorScheme}.93`,
     borderColor: `${colorScheme}.80`,
   };
-  if (colorScheme === 'neutral') {
-    scheme.color = 'purple.10';
-  }
+
   return {
     container: {
       border: '1px solid',

package/src/Components/Tag/Tag.tsx

@@ -21,7 +21,7 @@ export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' |
 const Tag = (props: TagProps) => {
   const { children, closeButtonTooltip, iconColor, iconName, isDisabled, isLoading, onClose, withIcon, ...tagProps } =
     props;
-  const style = useMultiStyleConfig('Tag', tagProps);
+  const style = useMultiStyleConfig('Tag', props);
 
   return (
     <ChakraTag
@@ -29,6 +29,7 @@ const Tag = (props: TagProps) => {
       data-disabled={isDisabled || undefined}
       aria-busy={isLoading}
       data-loading={isLoading || undefined}
+      sx={style.container}
       {...tagProps}
     >
       {(withIcon || !!iconName) && (

package/src/Components/Toast/Toast.tsx

@@ -29,7 +29,7 @@ const useToast = () => {
         <Notification
           boxShadow="large"
           maxW="437px"
-          status={opts.status}
+          status={opts.status || 'info'}
           onClose={opts.isClosable ? onClose : undefined}
         >
           <Box display="flex" flexDirection="column">

package/src/Foundations/Colors/DesignTokens.tsx

@@ -1,4 +1,5 @@
-// import { ReactNode } from 'react';
+/* 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';
@@ -20,44 +21,46 @@ const DesignTokens = () => {
     maxWidth: '31.25rem',
   };
   return (
-    <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>
+      <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>
   );
 };
 

package/src/Foundations/Colors/Palette.tsx

@@ -1,4 +1,6 @@
+/* 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';
@@ -72,71 +74,73 @@ const Item = ({ backgroundColor, children }: { backgroundColor: string; children
 };
 
 const Palette = () => (
-  <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',
-              }}
+  <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"
             />
-            {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>
+          {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;

package/tsconfig.json

@@ -18,6 +18,7 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "target": "es5",
+    "types": ["node", "jest", "@testing-library/jest-dom"],
   }
 }