@bitrise/bitkit 9.26.3 → 9.27.0

package/package.json

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

package/src/Components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,56 @@
+import { Story, ComponentMeta } from '@storybook/react';
+import Button from '../Button/Button';
+import Dialog, { DialogProps, useDialog } from './Dialog';
+import DialogBody from './DialogBody';
+import DialogFooter from './DialogFooter';
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+} as ComponentMeta<typeof Dialog>;
+
+const TextContent = () => (
+  <p>
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
+    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
+    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+    PageMaker including versions of Lorem Ipsum.
+  </p>
+);
+
+interface StoryType extends DialogProps {
+  lotsOfContent: boolean;
+}
+
+export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
+  const state = useDialog();
+
+  return (
+    <>
+      <Button onClick={state.onOpen}>Open Dialog</Button>
+
+      <Dialog {...props} state={state}>
+        <DialogBody>
+          {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <TextContent key={index} />
+          ))}
+        </DialogBody>
+        <DialogFooter>
+          <Button marginRight="auto" variant="tertiary">
+            Tertiary
+          </Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button>Primary</Button>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+};
+
+WithProps.args = {
+  ...Dialog.defaultProps,
+  title: 'Title',
+  lotsOfContent: false,
+};

package/src/Components/Dialog/Dialog.theme.ts

@@ -0,0 +1,74 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const DialogTheme: SystemStyleObject = {
+  baseStyle: {
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, .5)',
+    },
+    dialogContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      overflow: 'auto',
+    },
+    dialog: {
+      borderRadius: '8',
+      backgroundColor: 'neutral.100',
+      boxShadow: 'large',
+      marginY: '128',
+    },
+    header: {
+      padding: '24',
+      paddingLeft: '30',
+    },
+    closeButton: {
+      position: 'absolute',
+      top: '22',
+      right: '22',
+      width: '40',
+      height: '40',
+      padding: '8',
+      borderRadius: '8',
+    },
+    body: {
+      flex: 1,
+      paddingX: '32',
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'end',
+      gap: '16',
+      padding: '32',
+      paddingTop: '48',
+    },
+  },
+  sizes: {
+    small: {
+      dialog: {
+        maxWidth: '30rem',
+      },
+    },
+    medium: {
+      dialog: {
+        maxWidth: '40rem',
+      },
+    },
+    large: {
+      dialog: {
+        maxWidth: '50rem',
+      },
+    },
+    full: {
+      dialog: {
+        maxW: '100vw',
+        minH: '100vh',
+        '@supports(min-height: -webkit-fill-available)': {
+          minH: '-webkit-fill-available',
+        },
+        borderRadius: 0,
+      },
+    },
+  },
+};
+
+export default DialogTheme;

package/src/Components/Dialog/Dialog.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  ModalHeader,
+  useBreakpointValue,
+  useDisclosure,
+} from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+
+type DialogState = {
+  isOpen: boolean;
+  onClose(): void;
+  onOpen(): void;
+};
+
+export const useDialog = (): DialogState => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return {
+    isOpen,
+    onClose,
+    onOpen,
+  };
+};
+export interface DialogProps {
+  children: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  state: DialogState;
+  title: string;
+}
+
+const Dialog = ({ children, state, size, title }: DialogProps) => {
+  const dialogSize = useBreakpointValue({ mobile: 'full', desktop: size });
+  return (
+    <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Text as="h1" size="5">
+            {title}
+          </Text>
+        </ModalHeader>
+        <ModalCloseButton>
+          <Icon name="CloseSmall" />
+        </ModalCloseButton>
+        {children}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+Dialog.defaultProps = {
+  size: 'medium',
+} as DialogProps;
+
+export default Dialog;

package/src/Components/Dialog/DialogBody.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalBody, ModalBodyProps } from '@chakra-ui/react';
+
+export type DialogBodyProps = ModalBodyProps;
+
+const DialogBody = (props: DialogBodyProps) => {
+  return <ModalBody {...props} />;
+};
+
+export default DialogBody;

package/src/Components/Dialog/DialogFooter.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalFooter, ModalFooterProps } from '@chakra-ui/react';
+
+export type DialogFooterProps = ModalFooterProps;
+
+const DialogFooter = (props: DialogFooterProps) => {
+  return <ModalFooter {...props} />;
+};
+
+export default DialogFooter;

package/src/index.ts

@@ -85,3 +85,13 @@ export { default as useToast } from './Components/Toast/Toast';
 
 export type { EmptyStateProps } from './Components/EmptyState/EmptyState';
 export { default as EmptyState } from './Components/EmptyState/EmptyState';
+
+export type { DialogProps } from './Components/Dialog/Dialog';
+export { default as Dialog } from './Components/Dialog/Dialog';
+export { useDialog } from './Components/Dialog/Dialog';
+
+export type { DialogBodyProps } from './Components/Dialog/DialogBody';
+export { default as DialogBody } from './Components/Dialog/DialogBody';
+
+export type { DialogFooterProps } from './Components/Dialog/DialogFooter';
+export { default as DialogFooter } from './Components/Dialog/DialogFooter';

package/src/theme.ts

@@ -2,6 +2,7 @@ import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
+import Dialog from './Components/Dialog/Dialog.theme';
 import Divider from './Components/Divider/Divider.theme';
 import EmptyState from './Components/EmptyState/EmptyState.theme';
 import Link from './Components/Link/Link.theme';
@@ -63,6 +64,7 @@ const theme = {
     EmptyState,
     Link,
     Menu,
+    Modal: Dialog,
     Select,
     Tabs,
     Text,