Merge remote-tracking branch 'origin/main' into feat/kadena-tools/sid…

…ebar-account-transactions
kadena-community · Aug 14, 2023 · c04da03 · c04da03
2 parents ae6e364 + f05c95e
commit c04da03
Show file tree

Hide file tree

Showing 45 changed files with 789 additions and 625 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -2,10 +2,9 @@ name: Chromatic
 # All pull requests, and
 # Workflow dispatch allows you to run this workflow manually from the Actions tab
 on:
-  pull_request:
+  push:
     paths:
       - packages/libs/react-ui/**
-  workflow_dispatch:
 
 jobs:
   chromatic:
@@ -31,3 +30,4 @@ jobs:
           buildScriptName: "build:storybook"
           projectToken: ${{ secrets.REACT_UI_CHROMATIC_TOKEN }}
           workingDir: /packages/libs/react-ui
+          autoAcceptChanges: 'main'
diff --git a/packages/apps/docs/src/components/Markdown/Code/Code.tsx b/packages/apps/docs/src/components/Markdown/Code/Code.tsx
@@ -1,4 +1,4 @@
-import { StyledCode, StyledInlineCode } from './styles';
+import { code, codeLine, inlineCode } from './style.css';
 
 import React, { FC, ReactNode } from 'react';
 
@@ -8,8 +8,21 @@ interface IProp {
 
 export const Code: FC<IProp> = ({ children, ...props }) => {
   if (typeof children === 'string') {
-    return <StyledInlineCode>{children}</StyledInlineCode>;
+    return <code className={inlineCode}>{children}</code>;
   }
 
-  return <StyledCode {...props}>{children}</StyledCode>;
+  return (
+    <code className={code} {...props}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child) || !child) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          ...child.props,
+          className: codeLine,
+        });
+      })}
+    </code>
+  );
 };
diff --git a/packages/apps/docs/src/components/Markdown/Code/Title.tsx b/packages/apps/docs/src/components/Markdown/Code/Title.tsx
@@ -1,4 +1,4 @@
-import { StyledCodeWrapper } from './styles';
+import { codeTitle, codeWrapper } from './style.css';
 
 import React, { FC, ReactNode } from 'react';
 
@@ -8,8 +8,16 @@ interface IProp {
 
 export const TitleWrapper: FC<IProp> = ({ children, ...props }) => {
   if (props.hasOwnProperty('data-rehype-pretty-code-fragment')) {
-    return <StyledCodeWrapper {...props}>{children}</StyledCodeWrapper>;
+    return (
+      <div className={codeWrapper} {...props}>
+        {children}
+      </div>
+    );
   }
 
-  return <div {...props}>{children}</div>;
+  return (
+    <div className={codeTitle} {...props}>
+      {children}
+    </div>
+  );
 };
diff --git a/packages/apps/docs/src/components/Markdown/Code/style.css.ts b/packages/apps/docs/src/components/Markdown/Code/style.css.ts
@@ -0,0 +1,149 @@
+import { darkThemeClass, sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const inlineCode = style([
+  sprinkles({
+    borderRadius: '$sm',
+    backgroundColor: '$neutral2',
+  }),
+  {
+    padding: `calc(${vars.sizes.$1} / 4) ${vars.sizes.$1}`,
+  },
+]);
+
+export const codeWrapper = style([
+  sprinkles({
+    backgroundColor: '$neutral2',
+    fontSize: '$sm',
+    fontFamily: '$mono',
+    lineHeight: '$lg',
+    marginX: '$5',
+    marginY: 0,
+  }),
+  {
+    borderLeft: `4px solid ${vars.colors.$borderDefault}`,
+    borderRadius: `${vars.radii.$sm} 0px 0px ${vars.radii.$sm}`,
+    wordBreak: 'break-all',
+  },
+]);
+
+export const code = style([
+  sprinkles({
+    whiteSpace: 'break-spaces',
+    fontFamily: '$mono',
+    display: 'none',
+  }),
+  {
+    counterReset: 'line',
+    selectors: {
+      [`${darkThemeClass} &[data-theme="dark"], &[data-theme="light"]`]: {
+        display: 'block',
+      },
+
+      [`${darkThemeClass} &[data-theme="light"]`]: {
+        display: 'none',
+      },
+    },
+  },
+]);
+
+export const codeLine = style([
+  sprinkles({
+    width: '100%',
+    display: 'inline-block',
+    fontFamily: '$mono',
+  }),
+  {
+    selectors: {
+      '&::before': {
+        counterIncrement: 'line',
+        content: 'counter(line)',
+        overflowWrap: 'normal',
+        display: 'inline-block',
+        width: '1rem',
+        marginRight: `${vars.sizes.$4}`,
+        marginLeft: `${vars.sizes.$4}`,
+        textAlign: 'right',
+        fontSize: `${vars.sizes.$sm}`,
+        color: `${vars.colors.$neutral3}`,
+      },
+    },
+  },
+]);
+
+globalStyle(`code span`, {
+  fontFamily: vars.fonts.$mono,
+});
+
+export const codeTitle = style([
+  sprinkles({
+    display: 'none',
+    alignItems: 'center',
+    fontFamily: '$main',
+    backgroundColor: '$neutral3',
+    padding: '$2',
+  }),
+  {
+    selectors: {
+      [`${darkThemeClass} &[data-theme="dark"], &[data-theme="light"]`]: {
+        display: 'flex',
+      },
+
+      [`${darkThemeClass} &[data-theme="light"]`]: {
+        display: 'none',
+      },
+      '&[data-language]::before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: `0 ${vars.sizes.$2}`,
+        color: `${vars.colors.$background}`,
+        backgroundColor: `${vars.colors.$primaryContrast}`,
+        borderRadius: `${vars.radii.$sm}`,
+        width: `${vars.sizes.$6}`,
+        height: `${vars.sizes.$6}`,
+      },
+      '&[data-language="pact"]::before': {
+        content: 'P',
+      },
+
+      '&[data-language="lisp"]::before': {
+        content: 'L',
+      },
+
+      '&[data-language="typescript"]::before': {
+        content: 'TS',
+      },
+      '&[data-language="ts"]::before': {
+        content: 'TS',
+      },
+
+      '&[data-language="javascript"]::before': {
+        content: 'JS',
+      },
+      '&[data-language="js"]::before': {
+        content: 'JS',
+      },
+
+      '&[data-language="yaml"]::before': {
+        content: 'Y',
+      },
+
+      '&[data-language="json"]::before': {
+        content: 'J',
+      },
+
+      '&[data-language="bash"]::before': {
+        content: 'B',
+      },
+
+      '&[data-language="shell"]::before': {
+        content: 'S',
+      },
+      '&[data-language="sh"]::before': {
+        content: 'S',
+      },
+    },
+  },
+]);
diff --git a/packages/apps/docs/src/components/Markdown/Code/styles.ts b/packages/apps/docs/src/components/Markdown/Code/styles.ts
diff --git a/packages/apps/docs/src/components/Markdown/Figure/Figure.tsx b/packages/apps/docs/src/components/Markdown/Figure/Figure.tsx
@@ -1,6 +1,6 @@
 import { Text } from '@kadena/react-ui';
 
-import { StyledFigure } from './styles';
+import { figCaption, figure, figureImg } from './styles.css';
 
 import Image from 'next/image';
 import React, { FC, useState } from 'react';
@@ -20,8 +20,9 @@ export const Figure: FC<IProps> = ({ alt, src }) => {
     });
   };
   return (
-    <StyledFigure>
+    <figure className={figure}>
       <Image
+        className={figureImg}
         src={src}
         alt={alt}
         width={dimension.width}
@@ -31,11 +32,11 @@ export const Figure: FC<IProps> = ({ alt, src }) => {
         blurDataURL="/assets/blur.jpg"
         onLoad={handleLoad}
       />
-      <figcaption>
+      <figcaption className={figCaption}>
         <Text size="sm" as="span">
           {alt}
         </Text>
       </figcaption>
-    </StyledFigure>
+    </figure>
   );
 };