@bitrise/bitkit 10.13.0-alpha-table-new.1 → 10.14.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -133,3 +133,22 @@ export const WithIcon = () => {
     </Dropdown>
   );
 };
+export const WithCustomLabel = () => {
+  const [value, setValue] = useState('custom');
+
+  return (
+    <Dropdown
+      iconName="Calendar"
+      value={value}
+      onChange={(event) => setValue(event.target.value as string)}
+      formLabel={value === 'custom' ? '18 Aug - 19 Aug' : value}
+      search={false}
+    >
+      <DropdownOption value="Last 30 days">Last 30 days</DropdownOption>
+      <DropdownOption value="Last 40 days">Last 45 days</DropdownOption>
+      <DropdownOption value="Last 50 days">Last 60 days</DropdownOption>
+      <DropdownOption value="Last 90 days">Last 90 days</DropdownOption>
+      <DropdownOption value="custom">Custom</DropdownOption>
+    </Dropdown>
+  );
+};

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -549,4 +549,29 @@ describe('Dropdown', () => {
       });
     });
   });
+
+  describe('label', () => {
+    it('renders label associated with the selected option', async () => {
+      render(
+        <Dropdown defaultValue="Test option 2">
+          <DropdownOption value="Test option 1">Test option 1</DropdownOption>
+          <DropdownOption value="Test option 2">Test option 2</DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      expect(button).toHaveTextContent('Test option 2');
+    });
+
+    it('renders custom label if provided', async () => {
+      render(
+        <Dropdown formLabel="Custom label">
+          <DropdownOption>Test option</DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      expect(button).toHaveTextContent('Custom label');
+    });
+  });
 });

package/src/Components/Dropdown/Dropdown.tsx

@@ -102,6 +102,7 @@ export interface DropdownProps<T> extends ChakraProps {
   search?: ReactNode;
   children?: ReactNode;
   iconName?: TypeIconName;
+  formLabel?: string;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
@@ -266,7 +267,18 @@ function useDropdown<T>({
 
 const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<string | null>>(
   (
-    { dropdownMaxHeight, dropdownMinHeight, readOnly, onBlur, placeholder, name, search, size = 'medium', ...props },
+    {
+      dropdownMaxHeight,
+      dropdownMinHeight,
+      readOnly,
+      onBlur,
+      placeholder,
+      name,
+      search,
+      size = 'medium',
+      formLabel: customFormLabel,
+      ...props
+    },
     ref,
   ) => {
     const optionsRef = useRef(null);
@@ -316,7 +328,7 @@ const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<strin
             {...props}
             placeholder={placeholder}
             size={size}
-            formLabel={formLabel}
+            formLabel={customFormLabel ?? formLabel}
             blurHandler={blurHandler}
             readOnly={readOnly}
           />

package/src/Components/LightBox/LightBox.stories.tsx

@@ -0,0 +1,36 @@
+import { Story, ComponentMeta } from '@storybook/react';
+import { useDisclosure } from '@chakra-ui/react';
+import Button from '../Button/Button';
+import LightBox, { LightBoxProps } from './LightBox';
+
+export default {
+  title: 'Components/LightBox',
+  component: LightBox,
+} as ComponentMeta<typeof LightBox>;
+
+export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  const getContent = () => {
+    return (
+      <iframe
+        id="ytplayer"
+        title="Intro to Bitrise"
+        width="100%"
+        height="500"
+        src="https://www.youtube.com/embed/JrCn9xWQ7IM"
+        frameBorder="0"
+        allowFullScreen
+      />
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open LightBox</Button>
+      <LightBox padding="0" {...props} isOpen={isOpen} onClose={onClose}>
+        {getContent()}
+      </LightBox>
+    </>
+  );
+};

package/src/Components/LightBox/LightBox.tsx

@@ -0,0 +1,22 @@
+import { Modal, ModalOverlay, ModalContent, usePrefersReducedMotion, HTMLChakraProps } from '@chakra-ui/react';
+
+export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
+  dataTestid?: string;
+  isOpen: boolean;
+  onClose(): void;
+}
+
+const LightBox = ({ children, dataTestid, isOpen, onClose, ...rest }: LightBoxProps) => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  return (
+    <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent borderRadius="0" data-testid={dataTestid} {...rest}>
+        {children}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LightBox;

package/src/index.ts

@@ -160,26 +160,5 @@ export { default as Accordion } from './Components/Accordion/Accordion';
 export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
 export { default as AccordionItem } from './Components/Accordion/AccordionItem';
 
-export type { TableProps } from './Components/Table/Table';
-export { default as Table } from './Components/Table/Table';
-
-export type { TableCaptionProps } from './Components/Table/TableCaption';
-export { default as TableCaption } from './Components/Table/TableCaption';
-
-export type { TableContainerProps } from './Components/Table/TableContainer';
-export { default as TableContainer } from './Components/Table/TableContainer';
-
-export type { TableBodyProps } from './Components/Table/Tbody';
-export { default as Tbody } from './Components/Table/Tbody';
-
-export type { TableCellProps } from './Components/Table/Td';
-export { default as Td } from './Components/Table/Td';
-
-export type { TableColumnHeaderProps } from './Components/Table/Th';
-export { default as Th } from './Components/Table/Th';
-
-export type { TableHeadProps } from './Components/Table/Thead';
-export { default as Thead } from './Components/Table/Thead';
-
-export type { TableRowProps } from './Components/Table/Tr';
-export { default as Tr } from './Components/Table/Tr';
+export type { LightBoxProps } from './Components/LightBox/LightBox';
+export { default as LightBox } from './Components/LightBox/LightBox';

package/src/old.ts

@@ -72,27 +72,27 @@ export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 export type { Props as Status500Props } from './Old/Status/Status500';
 export { default as Status500 } from './Old/Status/Status500';
 
-export type { Props as OldTableProps } from './Old/Table/Table';
-export { default as OldTable } from './Old/Table/Table';
+export type { Props as TableProps } from './Old/Table/Table';
+export { default as Table } from './Old/Table/Table';
 
-export type { Props as OldTableBodyProps } from './Old/Table/TableBody';
-export { default as OldTableBody } from './Old/Table/TableBody';
+export type { Props as TableBodyProps } from './Old/Table/TableBody';
+export { default as TableBody } from './Old/Table/TableBody';
 
-export type { Props as OldTableCellProps } from './Old/Table/TableCell';
-export { default as OldTableCell } from './Old/Table/TableCell';
+export type { Props as TableCellProps } from './Old/Table/TableCell';
+export { default as TableCell } from './Old/Table/TableCell';
 
-export type { Props as OldTableHeaderProps } from './Old/Table/TableHeader';
-export { default as OldTableHeader } from './Old/Table/TableHeader';
+export type { Props as TableHeaderProps } from './Old/Table/TableHeader';
+export { default as TableHeader } from './Old/Table/TableHeader';
 
-export type { Props as OldTableHeaderCellProps } from './Old/Table/TableHeaderCell';
+export type { Props as TableHeaderCellProps } from './Old/Table/TableHeaderCell';
 export type { TypeTableSort } from './Old/Table/TableHeaderCell';
-export { default as OldTableHeaderCell } from './Old/Table/TableHeaderCell';
+export { default as TableHeaderCell } from './Old/Table/TableHeaderCell';
 
-export type { Props as OldTableHeaderRowProps } from './Old/Table/TableHeaderRow';
-export { default as OldTableHeaderRow } from './Old/Table/TableHeaderRow';
+export type { Props as TableHeaderRowProps } from './Old/Table/TableHeaderRow';
+export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
 
-export type { Props as OldTableRowProps } from './Old/Table/TableRow';
-export { default as OldTableRow } from './Old/Table/TableRow';
+export type { Props as TableRowProps } from './Old/Table/TableRow';
+export { default as TableRow } from './Old/Table/TableRow';
 
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';

package/src/theme.ts

@@ -18,7 +18,6 @@ import Input from './Components/Input/Input.theme';
 import Dropdown from './Components/Dropdown/Dropdown.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
-import Table from './Components/Table/Table.theme';
 import Alert from './Foundations/Themes/Alert.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
@@ -77,7 +76,6 @@ const theme = {
     Checkbox,
     ColorButton,
     Divider,
-    Dropdown,
     EmptyState,
     Link,
     List,
@@ -85,7 +83,7 @@ const theme = {
     Modal: Dialog,
     Radio,
     Select,
-    Table,
+    Dropdown,
     Tabs,
     Text,
     Tooltip,