@bitrise/bitkit 10.31.1 → 10.32.0-alpha-chakra.1

package/package.json

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

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

@@ -3,9 +3,6 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 const FormTheme = {
   Form: {
     baseStyle: {
-      container: {
-        zIndex: 0,
-      },
       helperText: {
         fontSize: '2',
         lineHeight: '2',

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

@@ -12,6 +12,7 @@ import {
   InputLeftElement,
   InputRightAddon,
   InputRightElement,
+  SystemStyleObject,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 
@@ -105,11 +106,16 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     value,
   };
 
-  const InputWrapper = leftIconName || rightAddon || rightIconName ? InputGroup : Fragment;
+  let InputWrapper: any = Fragment;
+  const inputWrapperProps: SystemStyleObject = {};
+  if (leftIconName || rightAddon || rightIconName) {
+    InputWrapper = InputGroup;
+    inputWrapperProps.zIndex = 0;
+  }
   return (
     <FormControl {...formControlProps}>
       {label && <FormLabel>{label}</FormLabel>}
-      <InputWrapper>
+      <InputWrapper {...inputWrapperProps}>
         {leftIconName && (
           <InputLeftElement margin="12px" pointerEvents="none">
             <Icon name={leftIconName} />

package/src/Components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,18 @@
+import Skeleton, { SkeletonProps } from './Skeleton';
+import SkeletonBox from './SkeletonBox';
+
+export default {
+  component: Skeleton,
+  subComponents: [SkeletonBox],
+};
+
+export const WithProps = {
+  args: {
+    isActive: false,
+  },
+  render: (args: SkeletonProps) => (
+    <Skeleton display="flex" flexDirection="column" gap="8" padding="8" {...args}>
+      <SkeletonBox height="32" /> <SkeletonBox height="32" /> <SkeletonBox height="32" />
+    </Skeleton>
+  ),
+};

package/src/Components/Skeleton/Skeleton.theme.ts

@@ -0,0 +1,34 @@
+import { keyframes } from '@chakra-ui/react';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+
+const animation = keyframes`
+  from { transform: translate3d(-100%, 0, 0); }
+  to { transform: translate3d(100%, 0, 0); }
+`;
+
+const afterStyle = {
+  content: '""',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  pointerEvents: 'none',
+  bgGradient:
+    'linear(to-l, rgba(255,255, 255, 0), rgba(255,255, 255, 0.63) 35%, rgba(255,255, 255, 1) 48%, rgba(255,255, 255, 0.57) 55%, rgba(255,255, 255, 0))',
+  animation: `${animation} infinite 1.5s linear`,
+};
+
+const baseStyle = defineStyle(({ isActive }) => {
+  return {
+    position: 'relative',
+    overflow: 'hidden',
+    _after: isActive ? afterStyle : {},
+  };
+});
+
+const SkeletonTheme = defineStyleConfig({
+  baseStyle,
+});
+
+export default SkeletonTheme;

package/src/Components/Skeleton/Skeleton.tsx

@@ -0,0 +1,18 @@
+import { Box, BoxProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
+
+export interface SkeletonProps extends BoxProps {
+  isActive?: boolean;
+}
+
+/**
+ * Skeleton is used to display the loading state of some component.
+ *
+ * We don't extend Chakra's Skeleton
+ */
+const Skeleton = forwardRef<SkeletonProps, 'div'>((props, ref) => {
+  const { isActive, ...rest } = props;
+  const css = useStyleConfig('Skeleton', { isActive });
+  return <Box __css={css} {...rest} ref={ref} />;
+});
+
+export default Skeleton;

package/src/Components/Skeleton/SkeletonBox.tsx

@@ -0,0 +1,12 @@
+import { Box, BoxProps, forwardRef } from '@chakra-ui/react';
+
+export type { BoxProps as SkeletonBoxProps };
+
+/**
+ * SkeletonBox is just a Box with default background color.
+ */
+const SkeletonBox = forwardRef<BoxProps, 'div'>((props, ref) => {
+  return <Box backgroundColor="neutral.93" {...props} ref={ref} />;
+});
+
+export default SkeletonBox;

package/src/index.ts

@@ -207,3 +207,9 @@ export { default as Fade } from './Components/Fade/Fade';
 
 export type { InputProps } from './Components/Form/Input/Input';
 export { default as Input } from './Components/Form/Input/Input';
+
+export type { SkeletonProps } from './Components/Skeleton/Skeleton';
+export { default as Skeleton } from './Components/Skeleton/Skeleton';
+
+export type { SkeletonBoxProps } from './Components/Skeleton/SkeletonBox';
+export { default as SkeletonBox } from './Components/Skeleton/SkeletonBox';

package/src/old.ts

@@ -26,9 +26,3 @@ export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
-
-export type { Props as SkeletonProps } from './Old/Skeleton/Skeleton';
-export { default as Skeleton } from './Old/Skeleton/Skeleton';
-
-export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
-export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';

package/src/theme.ts

@@ -26,6 +26,7 @@ import Popover from './Components/Popover/Popover.theme';
 import Toggle from './Components/Toggle/Toggle.theme';
 import Textarea from './Components/Form/Textarea/Textarea.theme';
 import Form from './Components/Form/Form.theme';
+import Skeleton from './Components/Skeleton/Skeleton.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -99,6 +100,7 @@ const theme = {
     Popover,
     Switch: Toggle,
     Textarea,
+    Skeleton,
   },
 };