@bitrise/bitkit 12.105.0 → 12.107.0

package/src/Foundations/Typography/Typography.tsx

@@ -0,0 +1,25 @@
+// 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 { textStyles } from '../../tokens/tokensToTheme.json';
+
+const getStyles = (filterString: string) => {
+  return Object.fromEntries(Object.entries(textStyles).filter(([key]) => key.includes(filterString)));
+};
+
+const Typography = () => {
+  return (
+    <Unstyled>
+      <Provider>
+        <DocTitle>Text Styles</DocTitle>
+        <TokenTable data={getStyles('heading/')} groupName="heading" marginBottom="24" type="text" />
+        <TokenTable data={getStyles('body/')} groupName="body" marginBottom="24" type="text" />
+        <TokenTable data={getStyles('code/')} groupName="code" type="text" />
+      </Provider>
+    </Unstyled>
+  );
+};
+
+export default Typography;

package/src/Foundations/docComponents/DocTitle.tsx

@@ -0,0 +1,11 @@
+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/Foundations/docComponents/TokenTable.tsx

@@ -12,13 +12,24 @@ import Text from '../../Components/Text/Text';
 import Th from '../../Components/Table/Th';
 import Thead from '../../Components/Table/Thead';
 import Tr from '../../Components/Table/Tr';
+import { textStyles } from '../../tokens/tokensToTheme.json';
 
-const Row = ({ token, value }: { token: string; value: string }) => {
+type RowType = {
+  groupName: string;
+  token: string;
+  tokenPrefix?: string;
+  type?: 'color' | 'text';
+  value: string;
+};
+
+const Row = ({ groupName, token, tokenPrefix, type, value }: RowType) => {
   const themeValue = useToken('colors', value);
   const [hexa, setHexa] = useState(themeValue);
 
   const dotRef = useRef<HTMLDivElement>(null);
 
+  const tokenKey = type === 'color' ? [tokenPrefix, groupName, token].filter(Boolean).join('.') : token;
+
   useEffect(() => {
     if (dotRef.current && hexa.includes('var(')) {
       setHexa(getComputedStyle(dotRef.current).getPropertyValue(hexa.replace('var(', '').replace(')', '')));
@@ -28,45 +39,63 @@ const Row = ({ token, value }: { token: string; value: string }) => {
   return (
     <Tr role="group">
       <Td>
-        <CodeSnippet _groupHover={{ backgroundColor: 'neutral.93' }}>{token}</CodeSnippet>
+        <CodeSnippet _groupHover={{ backgroundColor: 'neutral.93' }}>{tokenKey}</CodeSnippet>
       </Td>
       <Td>
         <>
-          <Text marginBottom="8" size="2">
-            {hexa}
-          </Text>
-          <Text size="2">({value})</Text>
+          {type === 'color' && (
+            <>
+              <Text marginBottom="8" size="2">
+                {hexa}
+              </Text>
+              <Text size="2">({value})</Text>
+            </>
+          )}
+          {type === 'text' && (
+            <Text as="pre" textStyle="code/lg" whiteSpace="normal">
+              {JSON.stringify(textStyles[tokenKey as keyof typeof textStyles]).replace(/,/, ', ')}
+            </Text>
+          )}
         </>
       </Td>
       <Td>
-        <Dot ref={dotRef} backgroundColor={value} border="1px solid" size="48" />
+        {type === 'color' && <Dot ref={dotRef} backgroundColor={value} border="1px solid" size="48" />}
+        {type === 'text' && <Text textStyle={tokenKey}>{tokenKey}</Text>}
       </Td>
     </Tr>
   );
 };
 
 export interface TokenTableProps extends TableContainerProps {
-  data: Record<string, string>;
+  data: any;
   groupName: string;
   tokenPrefix?: string;
+  type?: 'color' | 'text';
 }
 
 const TokenTable = (props: TokenTableProps) => {
-  const { data, groupName, tokenPrefix = '', ...rest } = props;
+  const { data, groupName, tokenPrefix, type = 'color', ...rest } = props;
   return (
     <TableContainer {...rest}>
-      <Table>
+      <Table isFixed>
         <TableCaption>{groupName}</TableCaption>
         <Thead>
           <Tr>
-            <Th>Token</Th>
+            <Th width="30%">Token</Th>
             <Th>Value</Th>
-            <Th>Example</Th>
+            <Th width="20%">Example</Th>
           </Tr>
         </Thead>
         <Tbody>
           {Object.entries(data).map(([token, value]) => (
-            <Row key={token} token={`${tokenPrefix}${groupName}.${token}`} value={`${value}`} />
+            <Row
+              key={token}
+              groupName={groupName}
+              token={token}
+              tokenPrefix={tokenPrefix}
+              type={type}
+              value={`${value}`}
+            />
           ))}
         </Tbody>
       </Table>

package/src/index.ts

@@ -1,10 +1,9 @@
+export * from './types/bitkit';
 export * from './types/chakra';
 export * from './utils/reexports';
 export * from './hooks';
 
 export { default as theme } from './theme';
-export type { TypeColors } from './tokens/tokens';
-export type { TypeSizes } from './Foundations/Sizes/Sizes';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';

package/src/theme.ts

@@ -1,124 +1,25 @@
-import Accordion from './Components/AccordionLegacy/Accordion.theme';
-import Avatar from './Components/Avatar/Avatar.theme';
-import Badge from './Components/Badge/Badge.theme';
-import Breadcrumb from './Components/Breadcrumb/Breadcrumb.theme';
-import Button from './Components/Button/Button.theme';
-import Card from './Components/Card/Card.theme';
-import Checkbox from './Components/Form/Checkbox/Checkbox.theme';
-import ColorButton from './Components/ColorButton/ColorButton.theme';
-import Dialog from './Components/Dialog/Dialog.theme';
-import Divider from './Components/Divider/Divider.theme';
-import Drawer from './Components/Drawer/Drawer.theme';
-import EmptyState from './Components/EmptyState/EmptyState.theme';
-import Link from './Components/Link/Link.theme';
-import List from './Components/List/List.theme';
-import Menu from './Components/Menu/Menu.theme';
-import Radio from './Components/Form/Radio/Radio.theme';
-import Select from './Components/Select/Select.theme';
-import Input from './Components/Form/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';
-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 DatePickerDay from './Components/DatePicker/DatePickerDay.theme';
-import NumberInput from './Components/NumberInput/NumberInput.theme';
-import Skeleton from './Components/Skeleton/Skeleton.theme';
-import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
-import ProgressIndicator from './Components/ProgressIndicator/ProgressIndicator.theme';
-import Slider from './Components/Slider/Slider.theme';
-import Sidebar from './Components/Sidebar/Sidebar.theme';
-import SidebarItem from './Components/Sidebar/SidebarItem.theme';
-import SegmentedControl from './Components/SegmentedControl/SegmentedControl.theme';
-import Tag from './Components/Tag/Tag.theme';
-import Note from './Components/Note/Note.theme';
-import CodeBlock from './Components/CodeBlock/CodeBlock.theme';
-import CodeSnippet from './Components/CodeSnippet/CodeSnippet.theme';
-import DefinitionTooltip from './Components/DefinitionTooltip/DefinitionTooltip.theme';
-import ExpandableCard from './Components/ExpandableCard/ExpandableCard.theme';
-import FileInput from './Components/Form/FileInput/FileInput.theme';
-import Filter from './Components/Filter/Filter.theme';
+import '@fontsource/figtree/400.css';
+import '@fontsource/figtree/600.css';
+import '@fontsource/figtree/700.css';
+import '@fontsource/source-code-pro/400.css';
+
+import tokens from './tokens/tokensToTheme.json';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
-import radii from './Foundations/Radii/Radii';
 import shadows from './Foundations/Shadows/Shadows';
-import sizes from './Foundations/Sizes/Sizes';
-import typography from './Foundations/Typography/Typography';
 import zIndices from './Foundations/Zindex/Zindex';
-import Toggletip from './Components/Toggletip/Toggletip.theme';
-import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
-import { colors, semanticTokens } from './tokens/tokens';
-import TagsInput from './Components/Form/TagsInput/TagsInput.theme';
+
+import components from './Components/components.theme';
 
 const theme = {
+  ...tokens,
   breakpoints,
-  colors,
+  components,
   config: {
     cssVarPrefix: '',
   },
-  ...typography,
-  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,
-  },
-  radii,
-  semanticTokens,
   shadows,
-  sizes,
-  space: sizes,
+  space: tokens.sizes,
   styles: {
     global: {
       '*:focus-visible': {
@@ -129,10 +30,10 @@ const theme = {
         textDecoration: 'none',
       },
       body: {
-        color: 'text.body',
+        color: 'text.primary',
         fontFamily: 'body',
         fontSize: '3',
-        lineHeight: '1.5rem',
+        lineHeight: 'size-3',
       },
       hr: {
         borderTopWidth: 0,