@bitrise/bitkit 12.77.0 → 12.79.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.77.0",
+  "version": "12.79.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -11,6 +11,7 @@
   "scripts": {
     "build-storybook": "storybook build",
     "lint": "eslint src --ext ts,tsx",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
     "release": "release-it minor --ci",
     "release-alpha": "release-it --preRelease=alpha --ci",
     "start": "npm run storybook",

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DateTime } from 'luxon';
 import FocusLock from 'react-focus-lock';
 import { PopoverAnchor } from '@chakra-ui/react';
@@ -7,6 +7,7 @@ import Popover from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import Box from '../Box/Box';
 import useResponsive from '../../hooks/useResponsive';
+import Button from '../Button/Button';
 import DatePickerMonth from './DatePickerMonth';
 import { DatePickerContext } from './DatePicker.context';
 import DatePickerMonthSelector from './DatePickerMonthSelector';
@@ -22,6 +23,7 @@ export type DatePickerProps = {
   onClose: () => void;
   onClear?: () => void;
   visible: boolean;
+  variant?: 'default' | 'filter';
 } & (
   | {
       selected?: DateRange;
@@ -40,7 +42,9 @@ export type DatePickerProps = {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, onApply, onClose, onClear, visible, selectable, selected, mode } = props;
+  const { children, onApply, onClose, onClear, visible, selectable, selected, mode, variant = 'default' } = props;
+
+  const isSelectionHappened = useRef(false);
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
@@ -89,6 +93,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);
   const [isMonthSelector, setIsMonthSelector] = useState<'left' | 'right' | undefined>(undefined);
+
   const handlePreview = useCallback(
     (date: DateTime) => {
       if (!preview) {
@@ -105,8 +110,11 @@ const DatePicker = (props: DatePickerProps) => {
     },
     [preview, dateFrom, dateTo],
   );
+
   const handleSelect = useCallback(
     (date: DateTime) => {
+      isSelectionHappened.current = true;
+
       setPreview(undefined);
       if (mode === 'day') {
         setDateFrom(date);
@@ -131,6 +139,21 @@ const DatePicker = (props: DatePickerProps) => {
     },
     [dateFrom, dateTo, preview],
   );
+
+  useEffect(() => {
+    if (variant === 'default') {
+      if (!dateFrom || !isSelectionHappened.current || preview) {
+        return;
+      }
+
+      if (mode !== 'day' && !dateTo) {
+        return;
+      }
+
+      handleApply();
+    }
+  }, [dateFrom, dateTo, preview, isSelectionHappened.current]);
+
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
     selectable,
@@ -188,13 +211,22 @@ const DatePicker = (props: DatePickerProps) => {
                       />
                     )}
                   </Box>
-                  <DatePickerFooter
-                    onApply={handleApply}
-                    onClose={handleClose}
-                    onClear={onClear}
-                    selected={currentSelected}
-                    mode={mode || 'range'}
-                  />
+                  {variant === 'filter' && (
+                    <DatePickerFooter
+                      onApply={handleApply}
+                      onClose={handleClose}
+                      onClear={onClear}
+                      selected={currentSelected}
+                      mode={mode || 'range'}
+                    />
+                  )}
+                  {variant === 'default' && mode === 'day' && (
+                    <Box display="flex" justifyContent="space-around">
+                      <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
+                        Today
+                      </Button>
+                    </Box>
+                  )}
                 </>
               )}
             </Box>

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -22,12 +22,14 @@ const DatePickerFooter = ({
 
   const styleGrid = (mobile: string, desktop: string) => (mode === 'day' ? mobile : [mobile, desktop]);
 
+  const displayDate = selected?.from || selected?.to;
+
   return (
     <Box
       display="grid"
       gridTemplateColumns="1fr auto 1fr"
-      gridTemplateRows={styleGrid(selected ? '1.25rem 2rem' : '0 2rem', 'unset')}
-      gap={selected ? 24 : 0}
+      gridTemplateRows={styleGrid(displayDate ? '1.25rem 2rem' : '0 2rem', 'unset')}
+      gap={displayDate ? 24 : 0}
       data-testid="footer"
     >
       {!!onClear && (

package/src/Foundations/Colors/Colors.tsx

@@ -2,16 +2,19 @@
 import { Unstyled } from '@storybook/blocks';
 import Provider from '../../Components/Provider/Provider';
 import Divider from '../../Components/Divider/Divider';
-import Palette from './Palette';
+import CommonTokens from './CommonTokens';
 import SystemTokens from './SystemTokens';
+import Palette from './Palette';
 
 const Colors = () => {
   return (
     <Unstyled>
       <Provider>
-        <Palette />
+        <CommonTokens />
         <Divider marginTop="48" marginBottom="32" size="1" />
         <SystemTokens />
+        <Divider marginTop="48" marginBottom="32" size="1" />
+        <Palette />
       </Provider>
     </Unstyled>
   );

package/src/Foundations/Colors/CommonTokens.tsx

@@ -0,0 +1,21 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const commonColorKeys = ['background', 'border', 'icon', 'text'];
+
+const CommonTokens = () => (
+  <>
+    <Text as="h2" size="8" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8">
+      Common Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {commonColorKeys.map((groupName) => (
+        <TokenTable data={semanticTokens.colors[groupName]} groupName={groupName} key={groupName} marginBottom="24" />
+      ))}
+    </Card>
+  </>
+);
+
+export default CommonTokens;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -3,7 +3,7 @@ import Card from '../../Components/Card/Card';
 import Text from '../../Components/Text/Text';
 import TokenTable from '../docComponents/TokenTable';
 
-const SystemColorKeys = Object.keys(semanticTokens.colors.sys);
+const systemColorKeys = Object.keys(semanticTokens.colors.sys);
 
 const SystemTokens = () => (
   <>
@@ -11,12 +11,13 @@ const SystemTokens = () => (
       System Tokens
     </Text>
     <Card boxShadow="medium" padding="24">
-      {SystemColorKeys.map((groupName) => (
+      {systemColorKeys.map((groupName) => (
         <TokenTable
           data={semanticTokens.colors.sys[groupName]}
           groupName={groupName}
           key={groupName}
           marginBottom="24"
+          tokenPrefix="sys."
         />
       ))}
     </Card>

package/src/Foundations/docComponents/TokenTable.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect, useRef, useState } from 'react';
 import { useToken } from '@chakra-ui/react';
 import CodeSnippet from '../../Components/CodeSnippet/CodeSnippet';
 import Dot from '../../Components/Dot/Dot';
@@ -12,7 +14,17 @@ import Thead from '../../Components/Table/Thead';
 import Tr from '../../Components/Table/Tr';
 
 const Row = ({ token, value }: { token: string; value: string }) => {
-  const finalValue = useToken('colors', value);
+  const themeValue = useToken('colors', value);
+  const [hexa, setHexa] = useState(themeValue);
+
+  const dotRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (dotRef.current && hexa.includes('var(')) {
+      setHexa(getComputedStyle(dotRef.current).getPropertyValue(hexa.replace('var(', '').replace(')', '')));
+    }
+  }, []);
+
   return (
     <Tr role="group">
       <Td>
@@ -21,13 +33,13 @@ const Row = ({ token, value }: { token: string; value: string }) => {
       <Td>
         <>
           <Text marginBottom="8" size="2">
-            {finalValue}
+            {hexa}
           </Text>
           <Text size="2">({value})</Text>
         </>
       </Td>
       <Td>
-        <Dot backgroundColor={token.replace('colors.', '')} size="48" />
+        <Dot backgroundColor={value} border="1px solid" ref={dotRef} size="48" />
       </Td>
     </Tr>
   );
@@ -36,10 +48,11 @@ const Row = ({ token, value }: { token: string; value: string }) => {
 export interface TokenTableProps extends TableContainerProps {
   data: Record<string, string>;
   groupName: string;
+  tokenPrefix?: string;
 }
 
 const TokenTable = (props: TokenTableProps) => {
-  const { data, groupName, ...rest } = props;
+  const { data, groupName, tokenPrefix = '', ...rest } = props;
   return (
     <TableContainer {...rest}>
       <Table>
@@ -53,7 +66,7 @@ const TokenTable = (props: TokenTableProps) => {
         </Thead>
         <Tbody>
           {Object.entries(data).map(([token, value]) => (
-            <Row key={token} token={`colors.sys.${groupName}.${token}`} value={`colors.pal.${value}`} />
+            <Row key={token} token={`${tokenPrefix}${groupName}.${token}`} value={`${value}`} />
           ))}
         </Tbody>
       </Table>

package/src/tokens/tokens.json

@@ -2038,7 +2038,7 @@
             "type": "color"
           },
           "border": {
-            "value": "{color.border.strong}",
+            "value": "{color.sys.border.strong}",
             "type": "color"
           },
           "border-hover": {
@@ -2543,14 +2543,6 @@
             "value": "{typography.font.sans.size-2.semibold}",
             "type": "typography"
           },
-          "placeholder": {
-            "value": "{typography.font.sans.size-3.normal}",
-            "type": "typography"
-          },
-          "inputText": {
-            "value": "{typography.font.sans.size-3.normal}",
-            "type": "typography"
-          },
           "helperText": {
             "value": "{typography.font.sans.size-1.normal}",
             "type": "typography"
@@ -3255,7 +3247,6 @@
         "typography.body.lg.regular": "S:761ca424abf734733758e62320deb038f5e88885,",
         "color.border.regular": "S:b1ef812dec0b5b963251cc48508c80b3e97b245b,",
         "typography.comp.input.label": "S:87701688b92f359799411878297f10d6c1da47c3,",
-        "typography.comp.input.placeholder": "S:437580d08e3247d2c795945eed9d21f63887d3aa,",
         "typography.comp.link.md": "S:327fca25b0d32f4948307ab84bc2db8ded39c0cb,",
         "typography.comp.link.md-hover": "S:3b782ebd3d90936152fec66173dbe656fb4a4918,",
         "typography.comp.link.lg": "S:38f56a952cdae2cb4bd7957979665b9c7597b351,",
@@ -3271,7 +3262,6 @@
         "typography.comp.badge.sm": "S:3f60adbdc0ff523f2a6c1188ff302ff5850161ae,",
         "typography.comp.dialog.title": "S:8e6cc40095c9c98726e0c6c155293cd43576af80,",
         "typography.comp.dialog.label": "S:230bbdcc7e7ea1b7dfc0809e0c83ee0a198eb7f9,",
-        "typography.comp.input.inputText": "S:b425a2b3d5a6886083fec7efc720d17d2e6c8c4a,",
         "typography.comp.input.helperText": "S:d9657de25ff4b6edc66af3a13a0c8294b1f6a2f2,"
       },
       "$figmaCollectionId": "VariableCollectionId:996:4339",

package/src/tokens/tokens.ts

@@ -1,29 +1,37 @@
 import tokensJson from './tokens.json';
+import { looper } from './tokensUtils';
 
-const paletteColors: any = {
-  ...tokensJson.core.color.pal,
-};
-
-Object.keys(paletteColors).forEach((color) => {
-  Object.entries(paletteColors[color]).forEach(([shade, { value }]: any) => {
-    paletteColors[color][shade] = value;
-  });
-});
-
-export const colors = {
-  ...paletteColors,
-  pal: paletteColors,
+const legacyTokens = {
   brand: {
-    primary: '#5C2A7E', // purple.30
+    primary: 'pal.purple.30',
   },
   text: {
-    body: '#201B22', // neutral.10
-    secondary: '#6B6071', // neutral.40
-    link: '#9247C2', // purple.50
-    linkHover: '#5C2A7E', // purple.30
+    body: 'pal.neutral.10',
+    secondary: 'pal.neutral.40',
+    link: 'pal.purple.50',
+    linkHover: 'pal.purple.30',
   },
   separator: {
-    primary: '#DFDAE1', // neutral.90,
+    primary: 'pal.neutral.90',
+  },
+};
+
+const commonColors = (({ background, border, icon, text }) => ({ background, border, icon, text }))(
+  tokensJson.comp.color,
+);
+
+const paletteColors = looper(tokensJson.core.color.pal);
+
+export const colors = {
+  pal: paletteColors,
+  ...paletteColors,
+};
+
+export const semanticTokens = {
+  colors: {
+    ...looper(commonColors),
+    ...legacyTokens,
+    sys: looper(tokensJson.system.color.sys),
   },
 };
 
@@ -39,19 +47,3 @@ export type TypeColors = `${
   | 'blue'}.${'10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '93' | '95' | '100'}`;
 
 export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';
-
-const sysColors: any = {
-  ...tokensJson.system.color.sys,
-};
-
-Object.keys(sysColors).forEach((color) => {
-  Object.entries(sysColors[color]).forEach(([shade, { value }]: any) => {
-    sysColors[color][shade] = value.replace(/\{color\.pal\.(.*)\}/, '$1');
-  });
-});
-
-export const semanticTokens = {
-  colors: {
-    sys: sysColors,
-  },
-};

package/src/tokens/tokensUtils.ts

@@ -0,0 +1,20 @@
+type JsonValue = {
+  type: string;
+  value: string;
+};
+
+const valueFormatter = (obj: JsonValue) => {
+  return obj.value.replace(/\{color\.(.*)\}/, '$1');
+};
+
+export const looper = (obj: any) => {
+  const returnObject: any = {};
+  Object.keys(obj).forEach((color) => {
+    returnObject[color] = {};
+    Object.keys(obj[color]).forEach((key: string) => {
+      const valueObj: JsonValue = obj[color][key];
+      returnObject[color][key] = valueFormatter(valueObj);
+    });
+  });
+  return returnObject;
+};