feat(markdown): implement component

Author: dpellier

packages/ods-react/package.json

@@ -40,8 +40,10 @@
     "classnames": "2.5.1",
     "libphonenumber-js": "1.12.8",
     "react-hot-toast": "2.6.0",
+    "react-markdown": "10.1.0",
     "react-shiki": "0.9.0",
-    "react-swipeable": "7.0.2"
+    "react-swipeable": "7.0.2",
+    "remark-gfm": "4.0.1"
   },
   "peerDependencies": {
     "react": ">=18.2.0",

packages/ods-react/src/components/index.ts

@@ -50,3 +50,4 @@ export * from './menu/src';
 export * from './cart/src';
 export * from './file-thumbnail/src';
 export * from './data-table/src';
+export * from './markdown/src';

packages/ods-react/src/components/markdown/.storybook/main.ts

@@ -0,0 +1,26 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+  framework: '@storybook/react-vite',
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        font-family: "Source Sans Pro", "Trebuchet MS", "Arial", "Segoe UI", sans-serif;
+      }
+    </style>
+  `,
+  stories: [
+    '../src/dev.stories.tsx',
+    '../tests/**/*.stories.tsx',
+  ],
+};
+
+export default config;

packages/ods-react/src/components/markdown/.storybook/manager.ts

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/manager-api';
+
+addons.register('custom-panel', (api) => {
+  api.togglePanel(false);
+});
+
+addons.setConfig({
+  enableShortcuts: false,
+  showToolbar: true,
+});

packages/ods-react/src/components/markdown/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import { type Preview } from '@storybook/react';
+import '@ovhcloud/ods-themes/default/css';
+import '@ovhcloud/ods-themes/default/fonts';
+
+const preview: Preview = {
+  parameters: {},
+};
+
+export default preview;

packages/ods-react/src/components/markdown/jest-puppeteer.config.ts

@@ -0,0 +1,17 @@
+const isCI = !!process.env.CI;
+
+export default {
+  launch: {
+    headless: isCI,
+    slowMo: isCI ? 0 : 300,
+    product: 'chrome',
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      "--disable-dev-shm-usage",
+      "--disable-accelerated-2d-canvas",
+      "--disable-gpu",
+      '--font-render-hinting=none',
+    ],
+  },
+};

packages/ods-react/src/components/markdown/jest.config.ts

@@ -0,0 +1,26 @@
+const baseOption = {
+  collectCoverage: false,
+  testPathIgnorePatterns: [
+    'node_modules/',
+    'dist/',
+  ],
+  testRegex: 'tests\\/.*\\.spec\\.(ts|tsx)$',
+  transform: {
+    '\\.(ts|tsx)$': 'ts-jest',
+  },
+  verbose: true,
+};
+
+export default !!process.env.E2E ?
+  {
+    ...baseOption,
+    preset: 'jest-puppeteer',
+    testRegex: 'tests\\/.*\\.e2e\\.ts$',
+    testTimeout: 60000,
+  } : {
+    ...baseOption,
+    transform: {
+      ...baseOption.transform,
+      '\\.scss$': 'jest-transform-stub',
+    }
+  };

packages/ods-react/src/components/markdown/modules.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

packages/ods-react/src/components/markdown/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@ovhcloud/ods-react-markdown",
+  "version": "19.6.1",
+  "private": true,
+  "description": "ODS React Markdown component",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rimraf documentation node_modules",
+    "doc": "npm run clean && npm run doc:ts && npm run doc:css",
+    "doc:css": "sass src/components:documentation --no-source-map --pkg-importer=node && node ../../../scripts/generate-component-token-list.js",
+    "doc:ts": "typedoc",
+    "lint:scss": "stylelint --aei 'src/components/**/*.scss'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}' --ignore-pattern '*.stories.tsx'",
+    "start": "npm run start:storybook",
+    "start:storybook": "storybook dev -p 3000 --no-open",
+    "test:e2e": "E2E=true start-server-and-test 'npm run start:storybook' 3000 'jest -i --detectOpenHandles'",
+    "test:e2e:ci": "CI=true npm run test:e2e",
+    "test:spec": "jest --passWithNoTests",
+    "test:spec:ci": "npm run test:spec"
+  }
+}

packages/ods-react/src/components/markdown/src/components/markdown-code/MarkdownCode.tsx

@@ -0,0 +1,41 @@
+import { type JSX, type ReactNode, createContext, useContext } from 'react';
+import { Code } from '../../../../code/src';
+import { TEXT_PRESET, Text } from '../../../../text/src';
+
+const CodeBlockContext = createContext(false);
+
+const MarkdownCode = ({ children }: { children?: ReactNode }): JSX.Element => {
+  const isBlock = useContext(CodeBlockContext);
+
+  if (isBlock) {
+    return (
+      <Code>
+        { children as string }
+      </Code>
+    );
+  }
+
+  return (
+    <Text
+      as="code"
+      preset={ TEXT_PRESET.code }>
+      { children }
+    </Text>
+  );
+};
+
+const MarkdownPre = ({ children }: { children?: ReactNode }): JSX.Element => {
+  return (
+    <CodeBlockContext.Provider value={ true }>
+      { children }
+    </CodeBlockContext.Provider>
+  );
+};
+
+MarkdownCode.displayName = 'MarkdownCode';
+MarkdownPre.displayName = 'MarkdownPre';
+
+export {
+  MarkdownCode,
+  MarkdownPre,
+};