@bitrise/bitkit 12.26.1 → 12.27.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.26.1",
+  "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/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,
   },
 };