@bitrise/bitkit 12.26.0 → 12.27.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.26.0",
+  "version": "12.27.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -34,7 +34,9 @@
     "luxon": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.1"
+    "react-focus-lock": "^2.9.1",
+    "react-markdown": "^8.0.7",
+    "rehype-sanitize": "^5.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/Components/Code/Code.theme.ts

@@ -0,0 +1,14 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+
+const baseStyle = defineStyle({
+  py: '8',
+  px: '12',
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'separator.primary',
+  borderRadius: '8',
+});
+
+export default defineStyleConfig({
+  baseStyle,
+});

package/src/Components/Icons/16x16/Replace.tsx

@@ -5,7 +5,7 @@ const Replace = forwardRef<IconProps, 'svg'>((props, ref) => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M2.00001 0.666586H0.666672L0.666672 4.66659H0.834695H2.22761H4.66667V3.33325H3.01853C3.75096 2.51492 4.81534 1.99992 6 1.99992C8.20914 1.99992 10 3.79078 10 5.99992H11.3333C11.3333 3.0544 8.94552 0.666586 6 0.666586C4.40708 0.666586 2.97726 1.36493 2.00001 2.47215L2.00001 0.666586ZM9.7724 7.33325H7.33334V8.66659H8.98148C8.24905 9.48492 7.18467 9.99992 6 9.99992C3.79087 9.99992 2.00001 8.20906 2.00001 5.99992H0.666672C0.666672 8.94544 3.05449 11.3333 6 11.3333C7.59293 11.3333 9.02275 10.6349 10 9.52768V11.3333H11.3333V7.33325H11.1653H9.7724Z"
+      d="M4.00001 2.66659H2.66667V6.66659H2.8347H4.22761H6.66667V5.33325H5.01853C5.75096 4.51492 6.81534 3.99992 8 3.99992C10.2091 3.99992 12 5.79078 12 7.99992H13.3333C13.3333 5.0544 10.9455 2.66659 8 2.66659C6.40708 2.66659 4.97726 3.36493 4.00001 4.47215L4.00001 2.66659ZM11.7724 9.33325H9.33334V10.6666H10.9815C10.2491 11.4849 9.18467 11.9999 8 11.9999C5.79087 11.9999 4.00001 10.2091 4.00001 7.99992H2.66667C2.66667 10.9454 5.05449 13.3333 8 13.3333C9.59293 13.3333 11.0227 12.6349 12 11.5277V13.3333H13.3333V9.33325H13.1653H11.7724Z"
       fill="currentColor"
     />
   </Icon>

package/src/Components/Icons/24x24/Replace.tsx

@@ -5,7 +5,7 @@ const Replace = forwardRef<IconProps, 'svg'>((props, ref) => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M2 0H0L0 6H0.252035H2.34141H6V4H3.52779C4.62643 2.7725 6.223 2 8 2C11.3137 2 14 4.68629 14 8H16C16 3.58172 12.4183 0 8 0C5.61061 0 3.46589 1.04751 2 2.70835V0ZM13.6586 10H10V12H12.4722C11.3736 13.2275 9.777 14 8 14C4.68629 14 2 11.3137 2 8H0C0 12.4183 3.58172 16 8 16C10.3894 16 12.5341 14.9525 14 13.2916V16H16V10H15.748H13.6586Z"
+      d="M6 4H4V10H4.25203H6.34141H10V8H7.52779C8.62643 6.7725 10.223 6 12 6C15.3137 6 18 8.68629 18 12H20C20 7.58172 16.4183 4 12 4C9.61061 4 7.46589 5.04751 6 6.70835V4ZM17.6586 14H14V16H16.4722C15.3736 17.2275 13.777 18 12 18C8.68629 18 6 15.3137 6 12H4C4 16.4183 7.58172 20 12 20C14.3894 20 16.5341 18.9525 18 17.2916V20H20V14H19.748H17.6586Z"
       fill="currentColor"
     />
   </Icon>

package/src/Components/Note/Note.theme.ts

@@ -0,0 +1,60 @@
+import { Status } from './Note';
+
+const borderColor = {
+  info: 'separator.primary',
+  error: 'red.80',
+  warning: 'yellow.80',
+  success: 'green.80',
+};
+
+const decorationBackground = {
+  info: 'neutral.95',
+  error: 'red.95',
+  warning: 'yellow.95',
+  success: 'green.95',
+};
+
+const decorationColor = {
+  info: 'neutral.40',
+  error: 'red.50',
+  warning: 'yellow.50',
+  success: 'green.50',
+};
+const NoteTheme = {
+  parts: ['container', 'icon', 'body'],
+  baseStyle({ status }: { status: Status }) {
+    return {
+      wrapper: {
+        display: 'flex',
+        boxShadow: 'medium',
+      },
+      decoration: {
+        color: decorationColor[status],
+        display: 'flex',
+        width: '40',
+        borderTopLeftRadius: '8',
+        borderBottomLeftRadius: '8',
+        borderWidth: '1px',
+        borderRight: 'none',
+        px: '8',
+        py: '12',
+        borderColor: borderColor[status],
+        bg: decorationBackground[status],
+      },
+      container: {
+        flexGrow: 1,
+        paddingTop: '24',
+        paddingRight: '24',
+        paddingBottom: '32',
+        paddingLeft: '16',
+        borderTopRightRadius: '8',
+        borderBottomRightRadius: '8',
+        borderWidth: '1px',
+        borderLeft: 'none',
+        borderColor: borderColor[status],
+      },
+    };
+  },
+};
+
+export default NoteTheme;

package/src/Components/Note/Note.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Icon from '../Icon/Icon';
+
+export type Status = 'info' | 'success' | 'error' | 'warning';
+const iconNames = {
+  info: 'Info',
+  success: 'Tick',
+  error: 'ErrorGeneral',
+  warning: 'Warning',
+} as const;
+const Note = ({ children, status }: { children: ReactNode; status: Status }) => {
+  const { container, decoration, wrapper } = useMultiStyleConfig('Note', { status });
+  return (
+    <Box __css={wrapper}>
+      <Box __css={decoration}>
+        <Icon size="24" name={iconNames[status]} />
+      </Box>
+      <Box __css={container}>{children}</Box>
+    </Box>
+  );
+};
+
+export default Note;

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -0,0 +1,48 @@
+import ReactMarkdown, { Components } from 'react-markdown';
+import rehypeSanitize from 'rehype-sanitize';
+import { Code } from '@chakra-ui/react';
+
+import List from '../List/List';
+import ListItem from '../List/ListItem';
+import Box from '../Box/Box';
+import Divider from '../Divider/Divider';
+import Text from '../Text/Text';
+
+const components: Components = {
+  h1: ({ node, ...props }) => <Text size="6" {...props} />,
+  h2: ({ node, ...props }) => <Text paddingTop="12" size="5" {...props} />,
+  h3: ({ node, ...props }) => <Text paddingTop="12" size="4" fontWeight="bold" {...props} />,
+  h4: ({ node, ...props }) => <Text paddingTop="12" size="3" fontWeight="bold" {...props} />,
+  h5: ({ node, ...props }) => <Text paddingTop="12" size="2" fontWeight="bold" {...props} />,
+  h6: ({ node, ...props }) => <Text paddingTop="12" size="1" fontWeight="bold" {...props} />,
+  p: ({ node, ...props }) => <Text {...props} />,
+  hr: () => <Divider my="16" borderColor="separator.primary" size="2" />,
+  pre: ({ node, ...props }) => <Code {...props} />,
+  ul: ({ node, ordered, ...props }) => <List paddingBottom="8" {...props} />,
+  ol: ({ node, ordered, ...props }) => <List paddingBottom="8" isOrdered {...props} />,
+  li: ({ node, ordered, ...props }) => <ListItem {...props} />,
+  blockquote: ({ children }) => (
+    <Box
+      py="8"
+      as="blockquote"
+      paddingLeft="16"
+      borderLeftStyle="solid"
+      borderLeftWidth="2px"
+      borderColor="separator.primary"
+      color="text.secondary"
+    >
+      {children}
+    </Box>
+  ),
+};
+const NoteMarkdownContent = ({ md }: { md: string }) => {
+  return (
+    <Box display="flex" flexDirection="column" gap="16">
+      <ReactMarkdown rehypePlugins={[rehypeSanitize]} components={components}>
+        {md}
+      </ReactMarkdown>
+    </Box>
+  );
+};
+
+export default NoteMarkdownContent;

package/src/index.ts

@@ -285,3 +285,6 @@ export { default as SelectableRow } from './Components/Table/SelectableRow';
 
 export type { TagProps } from './Components/Tag/Tag';
 export { default as Tag } from './Components/Tag/Tag';
+
+export { default as Note } from './Components/Note/Note';
+export { default as MarkdownContent } from './Components/Note/NoteMarkdownContent';

package/src/theme.ts

@@ -36,6 +36,8 @@ 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 Code from './Components/Code/Code.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -119,6 +121,8 @@ const theme = {
     Slider,
     SegmentedControl,
     Tag,
+    Note,
+    Code,
   },
 };