@stoplight/elements-core 9.0.15 → 9.0.16-beta-0.1

package/src/components/MarkdownViewer/CustomComponents/CodeComponent.spec.ts

@@ -0,0 +1,90 @@
+import { HttpParamStyles, IHttpRequest } from '@stoplight/types';
+
+import { parseHttpRequest } from './CodeComponent';
+
+describe('parseHttpRequest', () => {
+  it('parses HttpRequest with relative url', () => {
+    const request: IHttpRequest = {
+      id: '?http-request?',
+      method: 'get',
+      url: '/todos',
+      baseUrl: 'http://test',
+      query: {},
+      headers: {},
+    };
+
+    const httpOperation = parseHttpRequest(request);
+
+    expect(httpOperation).toEqual({
+      id: '?http-operation-id?',
+      method: 'get',
+      path: '/todos',
+      servers: [{ id: '?http-server-/todos?', url: 'http://test' }],
+      request: {
+        headers: [],
+        query: [],
+      },
+      responses: [],
+    });
+  });
+
+  it('parses HttpRequest with absolute url', () => {
+    const request: IHttpRequest = {
+      id: '?http-request?',
+      method: 'get',
+      url: 'http://test/todos',
+      baseUrl: '',
+      query: {},
+      headers: {},
+    };
+
+    const httpOperation = parseHttpRequest(request);
+
+    expect(httpOperation).toEqual({
+      id: '?http-operation-id?',
+      method: 'get',
+      path: '/todos',
+      servers: [{ id: '?http-server-http://test/todos?', url: 'http://test' }],
+      request: {
+        headers: [],
+        query: [],
+      },
+      responses: [],
+    });
+  });
+
+  it('parses HttpRequest parameters', () => {
+    const request: IHttpRequest = {
+      id: '?http-request?',
+      method: 'post',
+      url: '/todos/{id}',
+      baseUrl: 'http://test',
+      query: {
+        limit: ['10'],
+        skip: [],
+      },
+      headers: {
+        apikey: '123',
+      },
+      body: '{}',
+    };
+
+    const httpOperation = parseHttpRequest(request);
+
+    expect(httpOperation).toMatchObject({
+      id: '?http-operation-id?',
+      method: 'post',
+      path: '/todos/{id}',
+      servers: [{ url: 'http://test' }],
+      request: {
+        query: [
+          { name: 'limit', style: HttpParamStyles.Form, schema: { default: '10' }, required: true },
+          { name: 'skip', style: HttpParamStyles.Form, schema: {}, required: false },
+        ],
+        headers: [{ name: 'apikey', style: HttpParamStyles.Simple, schema: { default: '123' }, required: true }],
+        path: [{ name: 'id', style: HttpParamStyles.Simple, required: true }],
+        body: { contents: [{ mediaType: 'application/json', schema: { default: '{}' } }] },
+      },
+    });
+  });
+});

package/src/components/MarkdownViewer/CustomComponents/CodeComponent.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable prettier/prettier */
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import { DefaultSMDComponents } from '@stoplight/markdown-viewer';
+import { Box, Flex, Icon } from '@stoplight/mosaic';
+import { HttpParamStyles, IHttpOperation, IHttpRequest, NodeType } from '@stoplight/types';
+import { isPlainObject, isString } from 'lodash';
+import React from 'react';
+import URI from 'urijs';
+
+import { NodeTypeColors, NodeTypeIconDefs } from '../../../constants';
+import {
+  InlineRefResolverProvider,
+  useInlineRefResolver,
+  useSchemaInlineRefResolver,
+} from '../../../context/InlineRefResolver';
+import { useOptionsCtx } from '../../../context/Options';
+import { PersistenceContextProvider } from '../../../context/Persistence';
+import { useParsedValue } from '../../../hooks/useParsedValue';
+import { JSONSchema } from '../../../types';
+import { isHttpOperation, isJSONSchema } from '../../../utils/guards';
+import { getOriginalObject } from '../../../utils/ref-resolving/resolvedObject';
+import { TryIt } from '../../TryIt';
+import { CustomComponentMapping } from './Provider';
+
+type PartialHttpRequest = Pick<IHttpRequest, 'method' | 'url'> & Partial<IHttpRequest>;
+
+function isPartialHttpRequest(maybeHttpRequest: unknown): maybeHttpRequest is PartialHttpRequest {
+  return (
+    isPlainObject(maybeHttpRequest) &&
+    isString((maybeHttpRequest as PartialHttpRequest).method) &&
+    isString((maybeHttpRequest as PartialHttpRequest).url)
+  );
+}
+
+interface ISchemaAndDescriptionProps {
+  schema: JSONSchema;
+  title?: string;
+}
+
+const SchemaAndDescription = ({ title: titleProp, schema }: ISchemaAndDescriptionProps) => {
+  const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+  const { renderExtensionAddon } = useOptionsCtx();
+
+  const title = titleProp ?? schema.title;
+  return (
+    <Box py={2}>
+      {title && (
+        <Flex alignItems="center" p={2}>
+          <Icon icon={NodeTypeIconDefs[NodeType.Model]} color={NodeTypeColors[NodeType.Model]} />
+          <Box color="muted" px={2}>
+            {title}
+          </Box>
+        </Flex>
+      )}
+
+      <JsonSchemaViewer
+        resolveRef={resolveRef}
+        maxRefDepth={maxRefDepth}
+        schema={getOriginalObject(schema)}
+        renderExtensionAddon={renderExtensionAddon}
+      />
+    </Box>
+  );
+};
+
+export { DefaultSMDComponents };
+
+export const CodeComponent: CustomComponentMapping['code'] = props => {
+  const { title, jsonSchema, http, resolved, children } = props;
+
+  const resolver = useInlineRefResolver();
+
+  const value = resolved || String(Array.isArray(children) ? children[0] : children);
+  const parsedValue = useParsedValue(value);
+
+  if (jsonSchema) {
+    if (!isJSONSchema(parsedValue)) {
+      return null;
+    }
+
+    return (
+      <InlineRefResolverProvider
+        document={parsedValue}
+        resolver={resolver?.resolver}
+        maxRefDepth={resolver?.maxRefDepth}
+      >
+        <SchemaAndDescription title={title} schema={parsedValue} />
+      </InlineRefResolverProvider>
+    );
+  }
+
+  if (http) {
+    if (!isPlainObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
+      return null;
+    }
+
+    return (
+      <PersistenceContextProvider>
+        <TryIt
+          httpOperation={isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue)}
+          embeddedInMd
+        />
+      </PersistenceContextProvider>
+    );
+  }
+
+  const DefaultCode = DefaultSMDComponents.code!;
+  return <DefaultCode {...props} />;
+};
+
+export function parseHttpRequest(data: PartialHttpRequest): IHttpOperation {
+  const uri = URI(data.url);
+  const pathParam = data.url.match(/[^{\}]+(?=})/g);
+  return {
+    id: '?http-operation-id?',
+    method: data.method,
+    path: uri.is('absolute') ? uri.path() : data.url,
+    servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+    request: {
+      query: Object.entries(data.query || {}).map(([key, value]) => {
+        const defaultVal = Array.isArray(value) ? value[0] : value;
+        return {
+          id: `?http-query-${key}-id?`,
+          name: key,
+          style: HttpParamStyles.Form,
+          schema: { default: defaultVal },
+          required: isHttpRequestParamRequired(defaultVal),
+        };
+      }),
+      headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+        id: `?http-header-${key}-id?`,
+        name: key,
+        style: HttpParamStyles.Simple,
+        schema: { default: value },
+        required: isHttpRequestParamRequired(value),
+      })),
+      path: pathParam?.map(name => ({
+        id: `?http-param-${name}-id?`,
+        name,
+        style: HttpParamStyles.Simple,
+        required: true,
+      })),
+      ...(data.body
+        ? {
+            body: {
+              id: '?http-request-body?',
+              contents: [
+                {
+                  id: '?http-request-body-media?',
+                  mediaType: 'application/json',
+                  schema: { default: data.body },
+                },
+              ],
+            },
+          }
+        : null),
+    },
+    responses: [],
+  };
+}
+
+function isHttpRequestParamRequired(value: unknown) {
+  return typeof value !== 'undefined';
+}

package/src/components/MarkdownViewer/CustomComponents/Provider.tsx

@@ -0,0 +1,20 @@
+import {
+  CustomComponentMapping as MDVCustomComponentMapping,
+  MarkdownViewerProvider,
+} from '@stoplight/markdown-viewer';
+import * as React from 'react';
+
+import { CodeComponent } from './CodeComponent';
+
+export type CustomComponentMapping = MDVCustomComponentMapping;
+
+interface MarkdownComponentsProviderProps {
+  value: Partial<CustomComponentMapping> | undefined;
+}
+
+/**
+ * Provides components to markdown-viewer.
+ */
+export const MarkdownComponentsProvider: React.FC<MarkdownComponentsProviderProps> = ({ value, children }) => {
+  return <MarkdownViewerProvider components={{ code: CodeComponent!, ...value }}>{children}</MarkdownViewerProvider>;
+};

package/src/components/MarkdownViewer/CustomComponents/ReactRouterLink.tsx

@@ -0,0 +1,27 @@
+import type { LinkProps } from '@stoplight/mosaic';
+import React from 'react';
+
+const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
+
+export const ReactRouterMarkdownLink = ({
+  title,
+  to,
+  href: _href,
+  children,
+}: Omit<LinkProps, 'target' | 'rel'> & { to?: string }) => {
+  const href = to || _href;
+
+  const isExternal = href !== undefined && externalRegex.test(href);
+  if (isExternal) {
+    return (
+      <a target="_blank" rel="noreferrer noopener" href={href} title={title}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a href={href as string} title={title}>
+      {children}
+    </a>
+  );
+};

package/src/components/MarkdownViewer/CustomComponents/ResolvedImage.tsx

@@ -0,0 +1,86 @@
+import { CustomComponentMapping } from '@stoplight/markdown-viewer';
+import { dirname, resolve } from '@stoplight/path';
+import React from 'react';
+import URI from 'urijs';
+
+import { BundledBranchNode, IntegrationKind } from '../../../types';
+
+export const createResolvedImageComponent = (branchNode: BundledBranchNode) => {
+  const ResolvedImage: CustomComponentMapping['img'] = ({ title, alt, src }) => {
+    return <img src={resolveImageUrlHandler(src || '', branchNode)} title={title} alt={alt} />;
+  };
+  return React.memo(ResolvedImage);
+};
+
+const resolveImageUrlHandler = (url: string, branchNode: BundledBranchNode) => {
+  // don't touch absolute urls no matter which service we're using
+  if (URI(url).is('absolute')) {
+    return url;
+  }
+
+  const orgSlug = branchNode.externalOrgSlug;
+  const projectSlug = branchNode.externalSlug;
+  const branchSlug = branchNode.branchSlug;
+  const uri = branchNode.uri;
+
+  if (!orgSlug || !projectSlug || !branchNode.workspaceIntegration.kind) {
+    return url;
+  }
+
+  const resolvedUri = resolve(dirname(uri || ''), url);
+
+  let imageUri;
+  switch (branchNode.workspaceIntegration.kind) {
+    case IntegrationKind.AzureDevopsServer:
+      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
+      imageUri
+        .segmentCoded([...imageUri.segmentCoded(), orgSlug, '_apis', 'git', 'repositories', projectSlug, 'items'])
+        .query({
+          scopePath: resolvedUri,
+          'api-version': '4.1',
+          $format: 'OctetStream',
+        });
+      break;
+
+    case IntegrationKind.BitbucketServer:
+      // need to remove the api path
+      imageUri = new URI((branchNode.workspaceIntegration.apiUrl || '').replace(/\/rest\/api\/[0-9.]+/, ''));
+      imageUri.segmentCoded([...imageUri.segmentCoded(), 'projects', orgSlug, 'repos', projectSlug || '', 'browse']);
+      imageUri.segment([...imageUri.segment(), resolvedUri]).query({ raw: '' });
+      break;
+
+    case IntegrationKind.BitbucketCloud:
+      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
+      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, 'raw', branchSlug]);
+      imageUri.segment([...imageUri.segment(), resolvedUri]);
+      break;
+
+    case IntegrationKind.Github:
+      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
+      imageUri.hostname(`raw.${imageUri.hostname()}`);
+      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, branchSlug]);
+      imageUri.segment([...imageUri.segment(), resolvedUri]);
+      // if image is svg sanitize true
+      if (RegExp(/\.svg$/).test(imageUri.path())) {
+        imageUri.setQuery({ sanitize: true });
+      }
+      break;
+
+    case IntegrationKind.Gitlab:
+      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
+      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, 'raw', branchSlug]);
+      imageUri.segment([...imageUri.segment(), resolvedUri]);
+      break;
+
+    case IntegrationKind.Gitea:
+      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
+      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, 'raw', 'branch', branchSlug]);
+      imageUri.segment([...imageUri.segment(), resolvedUri]);
+      break;
+
+    default:
+      imageUri = new URI(resolvedUri);
+  }
+
+  return imageUri.normalize().valueOf();
+};

package/src/components/MarkdownViewer/CustomComponents/ScrollToHashElement.tsx

@@ -0,0 +1,96 @@
+/*
+ * This is copied from https://github.com/ncoughlin/scroll-to-hash-element/blob/main/src/index.tsx
+ * Unfortunately this package does not contain typescript definitions, so we can not use it directly.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+interface ScrollToHashElementProps {
+  /** On first run do we jump or scroll? */
+  initialBehavior?: ScrollBehavior;
+  behavior?: ScrollBehavior;
+  inline?: ScrollLogicalPosition;
+  block?: ScrollLogicalPosition;
+}
+
+export const ScrollToHashElement = ({
+  behavior = 'auto',
+  initialBehavior = 'auto',
+  inline = 'nearest',
+  block = 'start',
+}: ScrollToHashElementProps): null => {
+  const [hash, setHash] = useState(window.location.hash);
+  const [count, setCount] = useState(0);
+  const originalListeners = useRef<{ [key: string]: Function }>({});
+
+  // We need to know if this is the first run. If it is, we can do an instant jump, no scrolling.
+  const [firstRun, setFirstRun] = useState(true);
+  useEffect(() => setFirstRun(false), []);
+
+  useEffect(() => {
+    const handleLocationChange = () => {
+      setHash(window.location.hash);
+
+      // We increment count just so the layout effect will run if the hash is the same.
+      // Otherwise the user might click a hashlink a second time and it won't go anywhere.
+      setCount((count: number) => count + 1);
+    };
+
+    const onPopState = () => {
+      window.dispatchEvent(new Event('locationchange'));
+    };
+
+    const addWindowListeners = () => {
+      originalListeners.current.pushState = window.history.pushState;
+      originalListeners.current.replaceState = window.history.replaceState;
+
+      window.history.pushState = function (...args: any) {
+        const result = originalListeners.current.pushState.apply(this, args);
+        window.dispatchEvent(new Event('pushstate'));
+        window.dispatchEvent(new Event('locationchange'));
+        return result;
+      };
+
+      window.history.replaceState = function (...args: any) {
+        const result = originalListeners.current.replaceState.apply(this, args);
+        window.dispatchEvent(new Event('replacestate'));
+        window.dispatchEvent(new Event('locationchange'));
+        return result;
+      };
+
+      window.addEventListener('popstate', onPopState);
+      window.addEventListener('locationchange', handleLocationChange);
+    };
+
+    // Cleanup the event listeners on component unmount
+    const removeWindowListeners = () => {
+      window.history.pushState = originalListeners.current.pushState as typeof window.history.pushState;
+      window.history.replaceState = originalListeners.current.replaceState as typeof window.history.replaceState;
+      window.removeEventListener('popstate', onPopState);
+      window.removeEventListener('locationchange', handleLocationChange);
+    };
+
+    addWindowListeners();
+    return removeWindowListeners;
+  }, []);
+
+  useLayoutEffect(() => {
+    const removeHashCharacter = (str: string) => {
+      return str.slice(1);
+    };
+
+    if (hash) {
+      const element = document.getElementById(removeHashCharacter(hash));
+
+      if (element) {
+        element.scrollIntoView({
+          behavior: firstRun ? initialBehavior : behavior,
+          inline: inline,
+          block: block,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hash, count, firstRun]);
+
+  return null;
+};

package/src/components/MarkdownViewer/MarkdownViewer.spec.tsx

@@ -0,0 +1,170 @@
+import '@testing-library/jest-dom';
+
+import { NodeType } from '@stoplight/types';
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { schemaWithRefs } from '../../__fixtures__/articles/schema-with-refs';
+import { withPersistenceBoundary } from '../../context/Persistence';
+import { IntegrationKind } from '../../types';
+import { MarkdownViewer } from '.';
+import { CodeComponent } from './CustomComponents/CodeComponent';
+import { MarkdownComponentsProvider } from './CustomComponents/Provider';
+import { createResolvedImageComponent } from './CustomComponents/ResolvedImage';
+
+describe('MarkdownViewer', () => {
+  describe('with ResolvedImage', () => {
+    const common = {
+      id: 54234624,
+      data: 'some data',
+      type: NodeType.Article,
+      name: 'Some Article',
+      uri: '/docs/some-article.md',
+      summary: 'some summary',
+      branchSlug: 'master',
+      workspaceIntegration: {
+        kind: IntegrationKind.Github,
+        apiUrl: 'https://api.github.com',
+        hostUrl: 'https://github.com',
+      },
+      externalOrgSlug: 'organisation',
+      externalSlug: 'project',
+    };
+
+    it.each([
+      [
+        IntegrationKind.Github,
+        {
+          ...common,
+          workspaceIntegration: {
+            kind: IntegrationKind.Github,
+            apiUrl: 'https://api.github.com',
+            hostUrl: 'https://github.com',
+          },
+        },
+        'https://raw.github.com/organisation/project/master/common/images/icon48.png',
+      ],
+
+      [
+        IntegrationKind.Gitlab,
+        {
+          ...common,
+          workspaceIntegration: {
+            kind: IntegrationKind.Gitlab,
+            apiUrl: 'https://api.gitlab.com',
+            hostUrl: 'https://gitlab.com',
+          },
+        },
+        'https://gitlab.com/organisation/project/raw/master/common/images/icon48.png',
+      ],
+
+      [
+        IntegrationKind.Gitea,
+        {
+          ...common,
+          workspaceIntegration: {
+            kind: IntegrationKind.Gitea,
+            apiUrl: 'https://api.gitea.com',
+            hostUrl: 'https://gitea.com',
+          },
+        },
+        'https://gitea.com/organisation/project/raw/branch/master/common/images/icon48.png',
+      ],
+
+      [
+        IntegrationKind.BitbucketServer,
+        {
+          ...common,
+          workspaceIntegration: {
+            kind: IntegrationKind.BitbucketServer,
+            apiUrl: 'https://api.bitbucket.com',
+            hostUrl: 'https://bitbucket.com',
+          },
+        },
+        'https://api.bitbucket.com/projects/organisation/repos/project/browse/common/images/icon48.png?raw=',
+      ],
+
+      [
+        IntegrationKind.BitbucketCloud,
+        {
+          ...common,
+          workspaceIntegration: {
+            kind: IntegrationKind.BitbucketCloud,
+            apiUrl: 'https://api.bitbucket.com',
+            hostUrl: 'https://bitbucket.com',
+          },
+        },
+        'https://bitbucket.com/organisation/project/raw/master/common/images/icon48.png',
+      ],
+    ])('resolves relative image url for integration with %s', (_, branchNode, expectedUrl) => {
+      render(
+        <MarkdownComponentsProvider value={{ img: createResolvedImageComponent(branchNode) }}>
+          <MarkdownViewer markdown={`![alt text](../../common/images/icon48.png "Logo Title Text 1")`} />
+        </MarkdownComponentsProvider>,
+      );
+
+      const image = screen.getByTitle('Logo Title Text 1');
+
+      expect(image).toHaveAttribute('src', expectedUrl);
+    });
+  });
+
+  describe('CodeComponent', () => {
+    it('Should render TryIt correctly', () => {
+      const MarkdownViewerWithTryIt = withPersistenceBoundary(MarkdownViewer);
+      const markdown = `### Raw Http Request
+
+<!-- type: http -->
+
+\`\`\`json
+{
+  "method": "get",
+  "url": "/gifs/search",
+  "baseUrl": "http://api.giphy.com/v1",
+  "headers": {},
+  "query": {
+    "api_key": ["dc6zaTOxFJmzC"],
+    "limit": [],
+    "q": ["cats"]
+  }
+}
+\`\`\`
+`;
+
+      const { unmount } = render(
+        <MarkdownComponentsProvider value={{ code: CodeComponent }}>
+          <MarkdownViewerWithTryIt markdown={markdown} />
+        </MarkdownComponentsProvider>,
+      );
+
+      expect(screen.getByText('http://api.giphy.com/v1/gifs/search')).toBeInTheDocument();
+
+      // has default
+      expect(screen.getByText('api_key*')).toBeInTheDocument();
+      expect(screen.getByLabelText('api_key')).toHaveProperty('value', 'dc6zaTOxFJmzC');
+
+      expect(screen.getByText('q*')).toBeInTheDocument();
+      expect(screen.getByLabelText('q')).toHaveProperty('value', 'cats');
+
+      // no default
+      expect(screen.getByText('limit')).toBeInTheDocument();
+      expect(screen.getByLabelText('limit')).toHaveProperty('value', '');
+
+      unmount();
+    });
+
+    it('Should resolve refs in schema', () => {
+      const MarkdownViewerWithTryIt = withPersistenceBoundary(MarkdownViewer);
+
+      const { unmount } = render(
+        <MarkdownComponentsProvider value={{ code: CodeComponent }}>
+          <MarkdownViewerWithTryIt markdown={schemaWithRefs} />
+        </MarkdownComponentsProvider>,
+      );
+
+      expect(screen.getByText(/Inner referenced object/)).toBeInTheDocument();
+
+      unmount();
+    });
+  });
+});

package/src/components/MarkdownViewer/index.tsx

@@ -0,0 +1,10 @@
+import { IMarkdownViewerProps, MarkdownViewer as MarkdownViewerComponent } from '@stoplight/markdown-viewer';
+import * as React from 'react';
+
+/**
+ * This wrapper is no longer needed and can be removed in the future.
+ */
+export const MarkdownViewer = (props: IMarkdownViewerProps) => {
+  return <MarkdownViewerComponent {...props} />;
+};
+MarkdownViewer.displayName = 'MarkdownViewer';

package/src/components/NonIdealState.tsx

@@ -0,0 +1,20 @@
+import { Box, Flex, Heading, Icon, IIconProps, Text } from '@stoplight/mosaic';
+import * as React from 'react';
+
+type NonIdealStateProps = {
+  description?: React.ReactNode;
+  icon?: IIconProps['icon'];
+  title?: React.ReactNode;
+};
+
+export const NonIdealState: React.FC<NonIdealStateProps> = ({ description, icon, title }) => {
+  return (
+    <Flex flexDirection="col" alignItems="center" justifyContent="center" textAlign="center" w="full" h="full">
+      <Box as={Icon} icon={icon || ['fas', 'exclamation-triangle']} color="light" fontSize="6xl" mb={4} />
+      <Heading size={4} mb={4}>
+        {title}
+      </Heading>
+      <Text>{description}</Text>
+    </Flex>
+  );
+};