@stoplight/elements-core 9.0.16-beta-0.3 → 9.0.17

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

@@ -1,90 +0,0 @@
-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

@@ -1,164 +0,0 @@
-/* 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

@@ -1,20 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,96 +0,0 @@
-/*
- * 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

@@ -1,170 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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>
-  );
-};