feat: add blockquote, syntaxHiligther, reminder and skeleton componen…

…ts (#39)

.gitignore

@@ -24,6 +24,7 @@ dist-ssr
 *.sw?
 
 # Custom
+reports/*
 storybook-static
 public/svgs
 src/components/Atoms/Svgs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"
@@ -58,28 +58,30 @@
   },
   "dependencies": {
     "autosuggest-highlight": "^3.3.4",
-    "classnames": "^2.3.2"
+    "classnames": "^2.3.2",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "peerDependencies": {
-    "react": "16.8.0 || >=17.x",
-    "react-dom": "16.8.0 || >=17.x"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.3",
     "@commitlint/config-conventional": "^17.4.3",
     "@elevenlabs/eslint-config": "^0.0.1",
-    "@storybook/addon-actions": "^7.0.0-beta.48",
-    "@storybook/addon-essentials": "^7.0.0-beta.48",
-    "@storybook/addon-interactions": "^7.0.0-beta.48",
-    "@storybook/addon-links": "^7.0.0-beta.48",
-    "@storybook/react": "^7.0.0-beta.48",
-    "@storybook/react-vite": "^7.0.0-beta.48",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-vite": "^7.0.2",
+    "@storybook/testing-library": "^0.1.0",
     "@svgr/cli": "^6.5.1",
     "@types/autosuggest-highlight": "^3.2.0",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/react-syntax-highlighter": "^15.5.6",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.26.0",
@@ -93,8 +95,10 @@
     "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.58.1",
-    "storybook": "^7.0.0-beta.48",
+    "storybook": "^7.0.2",
     "style-dictionary": "^3.7.2",
     "stylelint": "^15.1.0",
     "stylelint-config-standard-scss": "^7.0.1",

src/components/Atoms/Blockquote/Blockquote.scss

@@ -0,0 +1,6 @@
+.blockquote {
+  margin: var(--spacing-xs) var(--spacing-0);
+  padding-left: var(--spacing-m);
+  border-left: 5px solid var(--color-yellow);
+  font-style: italic;
+}

src/components/Atoms/Blockquote/Blockquote.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { Blockquote } from './Blockquote';
+
+export default {
+  title: 'Components/Atoms/Blockquote',
+  component: Blockquote,
+  args: {
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi lectus, tincidunt nec nisl ut, dapibus ornare eros.',
+  },
+} as Meta<typeof Blockquote>;
+
+const Template: StoryFn<typeof Blockquote> = (args) => <Blockquote {...args} />;
+
+export const Overview = Template.bind({});

src/components/Atoms/Blockquote/Blockquote.tsx

@@ -0,0 +1,13 @@
+import './Blockquote.scss';
+
+import classNames from 'classnames';
+import React from 'react';
+
+import { Box } from '@/components';
+import { AsProps, ColorSystemProps, MarginSystemProps } from '@/types';
+
+export type BlockquoteProps = AsProps<'blockquote'> & MarginSystemProps & Pick<ColorSystemProps, 'bg'>;
+
+export const Blockquote: React.FC<BlockquoteProps> = (props) => (
+  <Box {...(props as AsProps)} as="blockquote" className={classNames('blockquote', props.className)} />
+);

src/components/Atoms/Blockquote/index.ts

@@ -0,0 +1 @@
+export * from './Blockquote';

src/components/Atoms/Logo/Logo.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
-import { Logo } from '@/components';
-import { logoTokenNameList } from '@/constants';
+import { Logo, logoName } from '@/components';
 import { marginSystemPropsControls } from '@/constants/storybook';
 
 export default {
@@ -12,7 +11,7 @@ export default {
     ...marginSystemPropsControls,
     name: {
       control: 'select',
-      options: logoTokenNameList,
+      options: logoName,
     },
     size: {
       control: 'text',

src/components/Atoms/Logo/Logo.tsx

@@ -5,7 +5,10 @@ import * as React from 'react';
 
 import { Box, Flex, Svgs, Text } from '@/components';
 import { forwardRef } from '@/helpers/systemPropsHelper';
-import { AsProps, ColorSystemProps, LogoNameType, MarginSystemProps } from '@/types';
+import { AsProps, ColorSystemProps, MarginSystemProps } from '@/types';
+
+export const logoName = ['website', 'blog'] as const;
+export type LogoNameType = (typeof logoName)[number];
 
 export type LogoProps = AsProps<'div'> &
   MarginSystemProps &

src/components/Atoms/Skeleton/Skeleton.scss

@@ -0,0 +1,6 @@
+.skeleton {
+  > * {
+    visibility: hidden;
+    cursor: default;
+  }
+}

src/components/Atoms/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { Skeleton, Text } from '@/components';
+import { marginSystemPropsControls } from '@/constants/storybook';
+
+export default {
+  title: 'Components/Atoms/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    ...marginSystemPropsControls,
+  },
+  args: {
+    isLoading: true,
+    children: <Text>Hello world !</Text>,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof Skeleton>;
+
+const Template: StoryFn<typeof Skeleton> = (args) => <Skeleton {...args} />;
+
+export const Overview = Template.bind({});

src/components/Atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,40 @@
+import './Skeleton.scss';
+
+import classNames from 'classnames';
+import React from 'react';
+
+import { Box, BoxProps } from '@/components';
+import { forwardRef } from '@/helpers/systemPropsHelper';
+
+export interface SkeletonOptions {
+  isLoading?: boolean;
+}
+export type SkeletonProps = BoxProps<'div'> & SkeletonOptions;
+
+export const Skeleton = forwardRef<SkeletonProps, 'div'>(
+  ({ as = 'div', isLoading = true, children, ...props }, ref) => (
+    <>
+      {isLoading ? (
+        <Box
+          {...props}
+          as={as}
+          ref={ref}
+          bg="ultra-light-grey"
+          className={classNames(classNames(isLoading ? ['skeleton', 'animate-pulse'] : undefined), props.className)}
+        >
+          {children ? (
+            children
+          ) : (
+            <Box>
+              <>&nbsp;</>
+            </Box>
+          )}
+        </Box>
+      ) : (
+        children
+      )}
+    </>
+  )
+);
+
+Skeleton.displayName = 'Skeleton';

src/components/Atoms/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

src/components/Atoms/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { SyntaxHighlighter } from './SyntaxHighlighter';
+
+export default {
+  title: 'Components/Atoms/SyntaxHighlighter',
+  component: SyntaxHighlighter,
+  args: {
+    content: 'import React from React;',
+  },
+} as Meta<typeof SyntaxHighlighter>;
+
+const Template: StoryFn<typeof SyntaxHighlighter> = (args) => <SyntaxHighlighter {...args} />;
+
+export const Overview = Template.bind({});

src/components/Atoms/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  Light as SyntaxHighlighterBase,
+  SyntaxHighlighterProps as SyntaxHighlighterBaseProps,
+} from 'react-syntax-highlighter';
+import githubGist from 'react-syntax-highlighter/dist/cjs/styles/hljs/github-gist';
+import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import php from 'react-syntax-highlighter/dist/esm/languages/hljs/php';
+import shell from 'react-syntax-highlighter/dist/esm/languages/hljs/shell';
+import twig from 'react-syntax-highlighter/dist/esm/languages/hljs/twig';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
+
+import { MarginSystemProps } from '@/types';
+
+export type SyntaxHighlighterProps = MarginSystemProps & Pick<SyntaxHighlighterBaseProps, 'language' | 'children'>;
+
+SyntaxHighlighterBase.registerLanguage('sh', shell);
+SyntaxHighlighterBase.registerLanguage('shell', shell);
+SyntaxHighlighterBase.registerLanguage('bash', bash);
+SyntaxHighlighterBase.registerLanguage('json', json);
+SyntaxHighlighterBase.registerLanguage('yaml', yaml);
+SyntaxHighlighterBase.registerLanguage('yml', yaml);
+SyntaxHighlighterBase.registerLanguage('php', php);
+SyntaxHighlighterBase.registerLanguage('twig', twig);
+SyntaxHighlighterBase.registerLanguage('xml', xml);
+SyntaxHighlighterBase.registerLanguage('html', xml);
+SyntaxHighlighterBase.registerLanguage('js', js);
+SyntaxHighlighterBase.registerLanguage('javascript', js);
+SyntaxHighlighterBase.registerLanguage('ts', typescript);
+SyntaxHighlighterBase.registerLanguage('typescript', typescript);
+
+export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ language, children, ...props }) => (
+  <SyntaxHighlighterBase
+    {...props}
+    language={language}
+    style={githubGist}
+    customStyle={{
+      backgroundColor: 'var(--color-ultra-light-grey)',
+      padding: 'var(--spacing-s)',
+      borderRadius: '4px',
+    }}
+    PreTag="div"
+  >
+    {children}
+  </SyntaxHighlighterBase>
+);

src/components/Atoms/SyntaxHighlighter/index.ts

@@ -0,0 +1 @@
+export * from './SyntaxHighlighter';

src/components/Atoms/index.ts

@@ -1,6 +1,9 @@
-export * from './Layout';
-export * from './Typography';
 export * as Svgs from './Svgs';
+export * from './Button';
 export * from './Icon';
+export * from './Layout';
 export * from './Logo';
-export * from './Button';
+export * from './SyntaxHighlighter';
+export * from './Typography';
+export * from './Blockquote';
+export * from './Skeleton';

src/components/Molecules/Reminder/Reminder.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+
+$reminder-variant-list: (
+  'note': (
+    'color': #448aff,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>'
+  ),
+  'summary': (
+    'color': #00b0ff,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>'
+  ),
+  'info': (
+    'color': #00b8d4,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>'
+  ),
+  'tip': (
+    'color': #00bfa5,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27Z"/></svg>'
+  ),
+  'success': (
+    'color': #00c853,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42Z"/></svg>'
+  ),
+  'question': (
+    'color': #64dd17,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z"/></svg>'
+  ),
+  'warning': (
+    'color': #ff9100,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21Z"/></svg>'
+  ),
+  'failure': (
+    'color': #ff5252,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91Z"/></svg>'
+  ),
+  'danger': (
+    'color': #ff1744,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15H6l7-14v8h5l-7 14v-8Z"/></svg>'
+  ),
+  'bug': (
+    'color': #f50057,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8Z"/></svg>'
+  ),
+  'example': (
+    'color': #7c4dff,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25Z"/></svg>'
+  ),
+  'quote': (
+    'color': #9e9e9e,
+    'iconUrl': 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4Z"/></svg>'
+  ),
+);
+
+.reminder {
+  $this: &;
+
+  border-left-width: 0.2rem;
+  border-left-style: solid;
+  border-color: var(--border-or-icon-color-reminder);
+  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
+
+  &__title {
+    padding: var(--spacing-xxs);
+    font-weight: var(--font-weight-bold);
+    background-color: var(--background-color-title-reminder);
+
+    &::before {
+      display: inline-block;
+      content: "";
+      margin-left: var(--spacing-xxs-2);
+      margin-right: var(--spacing-xxs);
+      height: 1.2rem;
+      width: 1.2rem;
+      background-color: var(--border-or-icon-color-reminder);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      vertical-align: middle;
+    }
+  }
+
+  @each $variant-name, $variables in $reminder-variant-list {
+    &--#{$variant-name} {
+      --background-color-title-reminder: #{rgba(map.get($variables, 'color'), 0.1)};
+      --border-or-icon-color-reminder: #{map.get($variables, 'color')};
+      #{$this}__title {
+        &::before {
+          mask-image: url('#{map.get($variables, 'iconUrl')}');
+        }
+      }
+    }
+  }
+}