@bitrise/bitkit 12.101.1-alpha.1 → 12.103.0

package/src/tokens/tokens.ts

@@ -1,20 +1,49 @@
 import tokensJson from './tokens.json';
-import { getFontSizes, looper } from './tokensUtils';
+import { looper } from './tokensUtils';
 
-const tokens = {
-  fonts: {
-    body: `"Figtree", sans-serif`,
-    mono: `"Source Code Pro", monospace`,
+const legacyTokens = {
+  brand: {
+    primary: 'pal.purple.30',
   },
-  fontSizes: getFontSizes(tokensJson.core.fontSizes),
-  fontWeights: {
-    bold: 700,
-    demiBold: 600,
-    normal: 400,
-    semibold: 600,
+  separator: {
+    primary: 'pal.neutral.90',
   },
-  letterSpacings: looper(tokensJson.core.letterSpacings),
-  lineHeights: looper(tokensJson.core.lineHeights),
+  text: {
+    body: 'pal.neutral.10',
+    link: 'pal.purple.50',
+    linkHover: 'pal.purple.30',
+    secondary: 'pal.neutral.40',
+  },
+};
+
+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 default tokens;
+export const semanticTokens = {
+  colors: {
+    ...legacyTokens,
+    sys: looper(tokensJson.system.color.sys),
+    ...looper(commonColors),
+  },
+};
+
+export type TypeColors = `${
+  | 'neutral'
+  | 'purple'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'turquoise'
+  | 'purple'
+  | 'blue'}.${'10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '93' | '95' | '100'}`;
+
+export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';

package/src/tokens/tokensUtils.ts

@@ -3,61 +3,18 @@ type JsonValue = {
   value: string;
 };
 
-const VALUE_REGEXPS = {
-  color: /\{color\.(.*)\}/,
-  typography: /\{typography\.(.*)\}/,
+const valueFormatter = (obj: JsonValue) => {
+  return obj.value.replace(/\{color\.(.*)\}/, '$1');
 };
 
-const VALUE_FORMATTERS = {
-  color: (value: string) => value.replace(VALUE_REGEXPS.color, '$1'),
-  fontSize: (value: string) => {
-    const number = value.split('*')[1] || '1';
-    return `${number.trim()}rem`;
-  },
-  typography: (value: string) => {
-    if (!value) {
-      return value;
-    }
-    return value.replace(VALUE_REGEXPS.typography, '$1').replace(/\{(.*)\}/, '$1');
-  },
-};
-
-export const looper = (
-  obj: any,
-  formatterType?: keyof typeof VALUE_FORMATTERS,
-  formatterFunction?: (key: string, value: string) => any,
-) => {
-  const returnObject: any = {};
-  Object.keys(obj).forEach((key) => {
-    const val: JsonValue | string = obj[key];
-    let finalValue = typeof val === 'string' ? val : val.value;
-    if (formatterType) {
-      finalValue = VALUE_FORMATTERS[formatterType](finalValue);
-    }
-    if (formatterFunction) {
-      finalValue = formatterFunction(key, finalValue);
-    }
-    if (finalValue) {
-      returnObject[key] = finalValue;
-    }
-  });
-  return returnObject;
-};
-
-export const colorLooper = (obj: any) => {
+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] = VALUE_FORMATTERS.color(valueObj.value);
+      returnObject[color][key] = valueFormatter(valueObj);
     });
   });
   return returnObject;
 };
-
-export const getFontSizes = (json: any) => {
-  const returnObj: Record<string, string> = looper(json, 'fontSize');
-
-  return returnObj;
-};

package/src/utils/utils.ts

@@ -36,17 +36,3 @@ export function useDebounce<T>(value: T, delay?: number): T {
 
   return debouncedValue;
 }
-
-export function isObject(value: any): boolean {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-export function getTokenValue(tokenString: string, tokenObject: any) {
-  let returnValue = {};
-  try {
-    returnValue = tokenString.split('.').reduce((o, i) => o[i], tokenObject);
-  } catch (e) {
-    returnValue = {};
-  }
-  return isObject(returnValue) ? returnValue : {};
-}

package/src/Components/components.theme.ts

@@ -1,103 +0,0 @@
-import Alert from '../Foundations/Themes/Alert.theme';
-import Accordion from './AccordionLegacy/Accordion.theme';
-import Avatar from './Avatar/Avatar.theme';
-import Badge from './Badge/Badge.theme';
-import Breadcrumb from './Breadcrumb/Breadcrumb.theme';
-import Button from './Button/Button.theme';
-import Card from './Card/Card.theme';
-import Checkbox from './Form/Checkbox/Checkbox.theme';
-import ColorButton from './ColorButton/ColorButton.theme';
-import Dialog from './Dialog/Dialog.theme';
-import Divider from './Divider/Divider.theme';
-import Drawer from './Drawer/Drawer.theme';
-import EmptyState from './EmptyState/EmptyState.theme';
-import Link from './Link/Link.theme';
-import List from './List/List.theme';
-import Menu from './Menu/Menu.theme';
-import Radio from './Form/Radio/Radio.theme';
-import Select from './Select/Select.theme';
-import Input from './Form/Input/Input.theme';
-import Dropdown from './Dropdown/Dropdown.theme';
-import Tabs from './Tabs/Tabs.theme';
-import Text from './Text/Text.theme';
-import Table from './Table/Table.theme';
-import Tooltip from './Tooltip/Tooltip.theme';
-import CloseButton from './CloseButton/CloseButton.theme';
-import Popover from './Popover/Popover.theme';
-import Toggle from './Toggle/Toggle.theme';
-import Textarea from './Form/Textarea/Textarea.theme';
-import Form from './Form/Form.theme';
-import DatePickerDay from './DatePicker/DatePickerDay.theme';
-import NumberInput from './NumberInput/NumberInput.theme';
-import Skeleton from './Skeleton/Skeleton.theme';
-import ProgressBar from './ProgressBar/ProgressBar.theme';
-import ProgressIndicator from './ProgressIndicator/ProgressIndicator.theme';
-import Slider from './Slider/Slider.theme';
-import Sidebar from './Sidebar/Sidebar.theme';
-import SidebarItem from './Sidebar/SidebarItem.theme';
-import SegmentedControl from './SegmentedControl/SegmentedControl.theme';
-import Tag from './Tag/Tag.theme';
-import Note from './Note/Note.theme';
-import CodeBlock from './CodeBlock/CodeBlock.theme';
-import CodeSnippet from './CodeSnippet/CodeSnippet.theme';
-import DefinitionTooltip from './DefinitionTooltip/DefinitionTooltip.theme';
-import ExpandableCard from './ExpandableCard/ExpandableCard.theme';
-import FileInput from './Form/FileInput/FileInput.theme';
-import Filter from './Filter/Filter.theme';
-import Toggletip from './Toggletip/Toggletip.theme';
-import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
-import TagsInput from './Form/TagsInput/TagsInput.theme';
-
-const components = {
-  Accordion,
-  Avatar,
-  Badge,
-  Breadcrumb,
-  Button,
-  Card,
-  Checkbox,
-  ColorButton,
-  Divider,
-  Drawer,
-  Dropdown,
-  EmptyState,
-  FilterSwitch,
-  ...Form,
-  Alert,
-  CloseButton,
-  CodeBlock,
-  CodeSnippet,
-  DatePickerDay,
-  DefinitionTooltip,
-  ExpandableCard,
-  FileInput,
-  Filter,
-  Input,
-  Link,
-  List,
-  Menu,
-  Modal: Dialog,
-  Note,
-  NumberInput,
-  Popover,
-  Progress: ProgressBar,
-  ProgressIndicator,
-  Radio,
-  SegmentedControl,
-  Select,
-  Sidebar,
-  SidebarItem,
-  Skeleton,
-  Slider,
-  Switch: Toggle,
-  Table,
-  Tabs,
-  Tag,
-  TagsInput,
-  Text,
-  Textarea,
-  Toggletip,
-  Tooltip,
-};
-
-export default components;

package/src/Foundations/Typography/Typography.tsx

@@ -1,30 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Unstyled } from '@storybook/blocks';
-import Provider from '../../Components/Provider/Provider';
-import DocTitle from '../docComponents/DocTitle';
-import TokenTable from '../docComponents/TokenTable';
-import textTokens, { getTextToken } from '../../tokens/textTokens';
-import { TOKEN_STRINGS } from '../../types/typography';
-
-const bodyStyles = TOKEN_STRINGS.filter((token) => token.includes('body')).reduce(
-  (obj, current) => {
-    obj[current.replace('body.', '')] = getTextToken(current);
-    return obj;
-  },
-  {} as Record<string, Record<string, string>>,
-);
-
-const Typography = () => {
-  return (
-    <Unstyled>
-      <Provider>
-        <DocTitle>Text Tokens</DocTitle>
-        <TokenTable data={textTokens.heading} groupName="heading" marginBottom="24" type="text" />
-        <TokenTable data={bodyStyles} groupName="body" marginBottom="24" type="text" />
-        <TokenTable data={textTokens.code} groupName="code" type="text" />
-      </Provider>
-    </Unstyled>
-  );
-};
-
-export default Typography;

package/src/Foundations/docComponents/DocTitle.tsx

@@ -1,11 +0,0 @@
-import Text from '../../Components/Text/Text';
-
-const DocTitle = ({ children }: { children: string }) => {
-  return (
-    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
-      {children}
-    </Text>
-  );
-};
-
-export default DocTitle;

package/src/tokens/colorTokens.ts

@@ -1,9 +0,0 @@
-import tokensJson from './tokens.json';
-import { colorLooper } from './tokensUtils';
-
-const paletteColors = colorLooper(tokensJson.core.color.pal);
-
-export const colors = {
-  pal: paletteColors,
-  ...paletteColors,
-};

package/src/tokens/semanticTokens.ts

@@ -1,29 +0,0 @@
-import tokensJson from './tokens.json';
-import { colorLooper } from './tokensUtils';
-
-const legacyColorTokens = {
-  brand: {
-    primary: 'pal.purple.30',
-  },
-  separator: {
-    primary: 'pal.neutral.90',
-  },
-  text: {
-    body: 'pal.neutral.10',
-    link: 'pal.purple.50',
-    linkHover: 'pal.purple.30',
-    secondary: 'pal.neutral.40',
-  },
-};
-
-const commonColors = (({ background, border, icon, text }) => ({ background, border, icon, text }))(
-  tokensJson.comp.color,
-);
-
-export const semanticTokens = {
-  colors: {
-    ...legacyColorTokens,
-    sys: colorLooper(tokensJson.system.color.sys),
-    ...colorLooper(commonColors),
-  },
-};

package/src/tokens/textTokens.ts

@@ -1,96 +0,0 @@
-import { getTokenValue } from '../utils/utils';
-import tokensJson from './tokens.json';
-import { looper } from './tokensUtils';
-
-const textTokens: Record<string, any> = {
-  comp: {},
-  fonts: { mono: {}, sans: {} },
-};
-
-const textValueFormatter = (property: string, value: string) => {
-  let finalProperty = property;
-  let finalValue = value.replace(/\{(.+)\}/, '$1').split('.')[1] || '';
-  if (property === 'fontFamily' && finalValue === 'font-mono') {
-    finalValue = 'mono';
-  }
-  if (
-    (property === 'fontFamily' && finalValue === 'font-sans') ||
-    (property === 'fontWeight' && finalValue === 'normal') ||
-    (property === 'letterSpacing' && finalValue === '0') ||
-    property === 'paragraphSpacing' ||
-    (property === 'textCase' && finalValue === 'none') ||
-    (property === 'textDecoration' && finalValue === 'none')
-  ) {
-    return;
-  }
-  if (property === 'textCase') {
-    finalProperty = 'textTransform';
-  }
-
-  return { finalProperty, finalValue };
-};
-
-Object.entries(tokensJson.core.typography.fonts.mono).forEach(([name, { value: ruleObj }]) => {
-  textTokens.fonts.mono[name] = {};
-  Object.entries(ruleObj).forEach(([property, value]) => {
-    const textRules = textValueFormatter(property, value);
-    if (textRules) {
-      const { finalProperty, finalValue } = textRules;
-      textTokens.fonts.mono[name][finalProperty] = finalValue;
-    }
-  });
-});
-
-Object.entries(tokensJson.core.typography.fonts.sans).forEach(([size, variant]) => {
-  textTokens.fonts.sans[size] = {};
-  Object.entries(variant).forEach(([name, { value: ruleObj }]) => {
-    textTokens.fonts.sans[size][name] = {};
-    Object.entries(ruleObj).forEach(([property, value]) => {
-      const textRules = textValueFormatter(property, value);
-      if (textRules) {
-        const { finalProperty, finalValue } = textRules;
-        textTokens.fonts.sans[size][name][finalProperty] = finalValue;
-      }
-    });
-  });
-});
-
-Object.entries(tokensJson.system.typography).forEach(([type, sizes]) => {
-  textTokens[type] = {};
-  if (type === 'body') {
-    Object.entries(sizes).forEach(([size, variants]) => {
-      textTokens[type][size] = looper(variants, 'typography', (_k: string, v: string) => {
-        return getTokenValue(v, textTokens);
-      });
-    });
-  } else {
-    textTokens[type] = looper(sizes, 'typography', (_k: string, v: string) => {
-      return getTokenValue(v, textTokens);
-    });
-  }
-});
-
-Object.entries(tokensJson.comp.typography.comp).forEach(([component, keys]) => {
-  textTokens.comp[component] = {};
-  if (component === 'link' || component === 'tabs') {
-    Object.entries(keys).forEach(([key, { value }]) => {
-      textTokens.comp[component][key] = looper(value, 'typography', (k: string, v: string) => {
-        const finalValue = textValueFormatter(k, v)?.finalValue;
-        return finalValue;
-      });
-    });
-  } else {
-    textTokens.comp[component] = looper(keys, 'typography', (_k: string, v: string) => {
-      return getTokenValue(v, textTokens);
-    });
-  }
-});
-
-export const getTextToken = (token?: string) => {
-  if (!token) {
-    return {};
-  }
-  return getTokenValue(token, textTokens);
-};
-
-export default textTokens;

package/src/types/colors.ts

@@ -1,12 +0,0 @@
-export type TypeColors = `${
-  | 'neutral'
-  | 'purple'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'turquoise'
-  | 'purple'
-  | 'blue'}.${'10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '93' | '95' | '100'}`;
-
-export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';

package/src/types/typography.ts

@@ -1,21 +0,0 @@
-export const TOKEN_STRINGS = [
-  'heading.h1',
-  'heading.h2',
-  'heading.h3',
-  'heading.h4',
-  'heading.h5',
-  'heading.h6',
-  'body.lg.regular',
-  'body.lg.semibold',
-  'body.lg.underline',
-  'body.md.regular',
-  'body.md.semibold',
-  'body.sm.regular',
-  'body.sm.semibold',
-  'code.lg',
-  'code.md',
-] as const;
-
-export type TokenStrings = (typeof TOKEN_STRINGS)[number];
-
-export type TextSizes = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';