@bitrise/bitkit 10.31.2 → 10.32.0

package/package.json

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

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`,
+};
+
+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,
   },
 };