@digi-frontend/dgate-api-documentation 1.0.0 → 1.0.4

package/dist/types/assets/icons/index.d.ts

@@ -4,3 +4,5 @@ export { default as CloseIcon } from './CloseIcon.svg';
 export { default as CheckMarkSquare } from './CheckMarkSquare.svg';
 export { default as DeleteIcon } from './DeleteIcon.svg';
 export { default as EditIcon } from './EditIcon.svg';
+export { default as AddRow } from './AddRow.svg';
+export { default as deleteOutlinedIcon } from './deleteOutlinedIcon.svg';

package/dist/types/components/LivePreview/LivePreview.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TransformedOpenApi } from '../../types/transformedOpenApi';
+interface LivePreviewProps {
+    transformedData?: TransformedOpenApi;
+}
+declare const LivePreview: React.FC<LivePreviewProps>;
+export default LivePreview;

package/dist/types/components/MethodAccordion/MethodAccordion.d.ts

@@ -1,2 +1,9 @@
-declare const MethodsAccordion: () => import("react/jsx-runtime").JSX.Element;
+import { TransformedMethod } from '../../types/layout.type';
+declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, handleSave, }: {
+    method: TransformedMethod;
+    path: string;
+    setFieldValue: (key: string, value: string) => void;
+    readOnly?: boolean;
+    handleSave: (data: any) => unknown;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MethodsAccordion;

package/dist/types/components/SimpleLabelValue/SimpleLabelValue.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './style.scss';
+type SimpleLabelValueProps = {
+    label?: string | JSX.Element;
+    value?: string | number | JSX.Element | JSX.Element[];
+    color?: string;
+    className?: string;
+    dataId?: string;
+};
+declare const SimpleLabelValue: React.FC<SimpleLabelValueProps>;
+export default SimpleLabelValue;

package/dist/types/components/SimpleLabelValue/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SimpleLabelValue';

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import 'tippy.js/dist/tippy.css';
+import './Tooltip.scss';
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    success?: boolean;
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    visible?: boolean;
+    delay?: [number, number];
+    type?: 'info' | 'function';
+    maxWidth?: number;
+    className?: string;
+    arrowWithBorder?: boolean;
+    disabled?: boolean;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/dist/types/components/dialog/dialog.d.ts

@@ -0,0 +1,41 @@
+export type DialogStatus = 'error' | 'info' | 'warning';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonType = 'text' | 'submit' | 'reset';
+export type ButtonVariant = 'outlined' | 'contained' | 'text' | 'link';
+export type ButtonColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'action' | 'normal';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface BaseActionButtonProps {
+    text: string;
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+    type?: ButtonType;
+    size?: ButtonSize;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+    dataId?: string;
+    loading?: boolean;
+    fullWidth?: boolean;
+    active?: boolean;
+    onKeyDown?: () => void;
+}
+export interface SubmitButtonProps extends BaseActionButtonProps {
+    onClick: () => void;
+}
+export interface CancelButtonProps extends BaseActionButtonProps {
+    onClick?: () => void;
+}
+export interface CommonDialogProps {
+    status?: DialogStatus;
+    content?: React.ReactElement;
+    onSubmit?: SubmitButtonProps;
+    onCancel?: CancelButtonProps;
+    onClose: () => void;
+    open?: boolean;
+    icon?: JSX.Element | boolean;
+    size?: DialogSize;
+    children?: React.ReactElement;
+    statusTitle?: boolean;
+}

package/dist/types/components/dialog/index.d.ts

@@ -0,0 +1,4 @@
+import './style.scss';
+import { CommonDialogProps } from './dialog';
+declare const CommonDialog: ({ status, content, onSubmit, onCancel, onClose, open, size, icon, }: CommonDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default CommonDialog;

package/dist/types/components/table/table.d.ts

@@ -0,0 +1,11 @@
+import './style.scss';
+declare const ParamterTable: ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly, }: {
+    id: any;
+    headCells: any;
+    data: any;
+    isFormOpen: any;
+    setIsFormOpen: any;
+    saveNewRow: any;
+    readOnly: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ParamterTable;

package/dist/types/constants/index.d.ts

@@ -1,17 +1,33 @@
 export declare const methodColorMapping: {
-    GET: {
+    get: {
         label: string;
         color: string;
     };
-    POST: {
+    post: {
         label: string;
         color: string;
     };
-    PUT: {
+    put: {
         label: string;
         color: string;
     };
-    DELETE: {
+    delete: {
+        label: string;
+        color: string;
+    };
+    PATCH: {
+        label: string;
+        color: string;
+    };
+    OPTIONS: {
+        label: string;
+        color: string;
+    };
+    TRACE: {
+        label: string;
+        color: string;
+    };
+    HEAD: {
         label: string;
         color: string;
     };

package/dist/types/helpers/layout.helper.d.ts

@@ -0,0 +1,7 @@
+import { TransformedPathsArray } from '@entities/layout.type';
+import { OpenAPIFile } from '@entities/openApi';
+import { TransformedOpenApi } from '@entities/transformedOpenApi';
+export declare const transformOpenApiObject: (openApiJson: OpenAPIFile) => TransformedOpenApi;
+export declare const transformOpenApiObjectToOrigin: (values: TransformedOpenApi) => OpenAPIFile;
+export declare const transformPathsToArray: (paths: OpenAPIFile["paths"]) => TransformedPathsArray | any;
+export declare const transformPathsArrayToOrigin: (paths: TransformedPathsArray) => OpenAPIFile["paths"];

package/dist/types/helpers/methodAccordion.helper.d.ts

@@ -0,0 +1,2 @@
+export declare const handleStatusColor: (code: number) => string;
+export declare const capitalize: (str: any) => any;

package/dist/types/layout/layout.d.ts

@@ -1,3 +1,7 @@
 import { JSX } from 'react';
-declare const Layout: () => JSX.Element;
+import { OpenAPIFile } from '../types/openApi';
+interface ILayoutProps {
+    openApiJson?: OpenAPIFile;
+}
+declare const Layout: ({ openApiJson, handleSave }: ILayoutProps) => JSX.Element;
 export default Layout;

package/dist/types/types/layout.type.d.ts

@@ -0,0 +1,19 @@
+import { HTTPMethod } from './openApi';
+export type TransformedMethod = {
+    type: HTTPMethod;
+    tags: string[];
+    parameters: any;
+    requestBody: any;
+    responses: {
+        code: string;
+        content: {
+            contentType?: string;
+            schema?: unknown;
+        };
+    }[];
+};
+export type TransformedPath = {
+    path: string;
+    methods: TransformedMethod[];
+};
+export type TransformedPathsArray = TransformedPath[];

package/dist/types/types/openApi.d.ts

@@ -0,0 +1,85 @@
+export interface OpenAPIFile {
+    openapi: string;
+    info: {
+        title: string;
+        description?: string;
+        version: string;
+    };
+    servers?: {
+        url: string;
+        description?: string;
+    }[];
+    paths: {
+        [path: string]: Partial<Record<HTTPMethod, {
+            tags: string[];
+            responses: Responses;
+            summary?: string;
+            description?: string;
+            parameters?: Parameter[];
+            requestBody?: RequestBody;
+        }>>;
+    };
+    components?: {
+        schemas?: {
+            [schemaName: string]: Schema;
+        };
+        securitySchemes?: {
+            [schemeName: string]: SecurityScheme;
+        };
+    };
+    security?: {
+        [schemeName: string]: string[];
+    }[];
+    tags?: {
+        name: string;
+        description?: string;
+    }[];
+}
+interface Parameter {
+    name: string;
+    in: 'query' | 'header' | 'path' | 'cookie';
+    description?: string;
+    required: boolean;
+    schema: Schema;
+}
+interface RequestBody {
+    description?: string;
+    required: boolean;
+    content: {
+        [contentType: string]: {
+            schema: Schema;
+        };
+    };
+}
+interface Responses {
+    [statusCode: string]: {
+        description: string;
+        content?: {
+            [contentType: string]: {
+                schema: Schema;
+            };
+        };
+    };
+}
+interface Schema {
+    type?: string;
+    format?: string;
+    properties?: {
+        [propertyName: string]: Schema;
+    };
+    items?: Schema;
+    enum?: string[];
+    required?: string[];
+}
+interface SecurityScheme {
+    type: 'apiKey' | 'http' | 'oauth2' | 'openIdConnect';
+    description?: string;
+    name?: string;
+    in?: 'query' | 'header' | 'cookie';
+    scheme?: string;
+    bearerFormat?: string;
+    flows?: any;
+    openIdConnectUrl?: string;
+}
+export type HTTPMethod = 'get' | 'put' | 'post' | 'delete' | 'options' | 'head' | 'patch' | 'trace';
+export {};

package/dist/types/types/transformedOpenApi.d.ts

@@ -0,0 +1,50 @@
+import { TransformedPathsArray } from "./layout.type";
+export interface TransformedOpenApi {
+    openapi: string;
+    info: {
+        title: string;
+        description?: string;
+        version: string;
+    };
+    servers?: {
+        url: string;
+        description?: string;
+    }[];
+    paths: TransformedPathsArray;
+    components?: {
+        schemas?: {
+            [schemaName: string]: Schema;
+        };
+        securitySchemes?: {
+            [schemeName: string]: SecurityScheme;
+        };
+    };
+    security?: {
+        [schemeName: string]: string[];
+    }[];
+    tags?: {
+        name: string;
+        description?: string;
+    }[];
+}
+interface Schema {
+    type?: string;
+    format?: string;
+    properties?: {
+        [propertyName: string]: Schema;
+    };
+    items?: Schema;
+    enum?: string[];
+    required?: string[];
+}
+interface SecurityScheme {
+    type: "apiKey" | "http" | "oauth2" | "openIdConnect";
+    description?: string;
+    name?: string;
+    in?: "query" | "header" | "cookie";
+    scheme?: string;
+    bearerFormat?: string;
+    flows?: any;
+    openIdConnectUrl?: string;
+}
+export {};

package/dist/types/validator/form.scheme.d.ts

@@ -0,0 +1,40 @@
+import * as yup from "yup";
+export declare const schemaValidation: yup.ObjectSchema<{
+    openapi: string;
+    info: {
+        title?: string;
+        description?: string;
+        version?: string;
+    };
+    servers: {
+        description?: string;
+        url?: string;
+    }[];
+    paths: {};
+    components: {
+        securitySchemes?: {};
+        schemas?: {};
+    };
+    security: {
+        schemeName?: string[];
+    }[];
+    tags: {
+        name?: string;
+        description?: string;
+    }[];
+}, yup.AnyObject, {
+    openapi: undefined;
+    info: {
+        title: undefined;
+        description: undefined;
+        version: undefined;
+    };
+    servers: undefined;
+    paths: undefined;
+    components: {
+        schemas: undefined;
+        securitySchemes: {};
+    };
+    security: undefined;
+    tags: undefined;
+}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/assets/icons/AddRow.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2507 1.5H5.74899C3.20081 1.5 1.50024 3.32445 1.50024 5.937V12.063C1.50024 14.678 3.19627 16.5 5.74899 16.5H12.25C14.8035 16.5 16.5002 14.678 16.5002 12.063V5.937C16.5002 3.32213 14.8036 1.5 12.2507 1.5ZM5.74899 2.625H12.2507C14.1636 2.625 15.3752 3.92622 15.3752 5.937V12.063C15.3752 14.0739 14.1635 15.375 12.25 15.375H5.74899C3.83631 15.375 2.62524 14.074 2.62524 12.063V5.937C2.62524 3.92878 3.8405 2.625 5.74899 2.625ZM12.0676 6.8225C11.8479 6.60283 11.4918 6.60283 11.2721 6.8225L8.10969 9.98385L6.72753 8.60217L6.66443 8.54772C6.44419 8.38437 6.1317 8.40259 5.93204 8.60234C5.71241 8.82205 5.71249 9.17821 5.93221 9.39783L7.71271 11.1776L7.7758 11.232C7.99601 11.3954 8.30845 11.3772 8.50812 11.1775L12.0676 7.618L12.1221 7.55491C12.2855 7.3347 12.2673 7.0222 12.0676 6.8225Z" fill="#A2A5B6"/>
+</svg>

package/src/assets/icons/deleteOutlinedIcon.svg

@@ -0,0 +1,8 @@
+<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5 66C51.4493 66 66 51.4493 66 33.5C66 15.5507 51.4493 1 33.5 1C15.5507 1 1 15.5507 1 33.5C1 51.4493 15.5507 66 33.5 66Z" stroke="#DA3F3F" stroke-width="1.5"/>
+<path d="M43 27.98C39.67 27.65 36.32 27.48 32.98 27.48C31 27.48 29.02 27.58 27.04 27.78L25 27.98" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.5 26.97L30.72 25.66C30.88 24.71 31 24 32.69 24H35.31C37 24 37.13 24.75 37.28 25.67L37.5 26.97" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.85 31.1401L40.2 41.2101C40.09 42.7801 40 44.0001 37.21 44.0001H30.79C28 44.0001 27.91 42.7801 27.8 41.2101L27.15 31.1401" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.33 38.5H35.66" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5 34.5H36.5" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/index.ts

@@ -4,3 +4,5 @@ export { default as CloseIcon } from './CloseIcon.svg'
 export { default as CheckMarkSquare } from './CheckMarkSquare.svg'
 export { default as DeleteIcon } from './DeleteIcon.svg'
 export { default as EditIcon } from './EditIcon.svg'
+export { default as AddRow } from './AddRow.svg'
+export { default as deleteOutlinedIcon } from './deleteOutlinedIcon.svg'

package/src/components/Chips/style.scss

@@ -52,7 +52,7 @@
         .chip-text {
           display: flex;
           align-items: center;
-          font-size: 0.75rem;
+          font-size: 0.95rem;
           height: 100%;
           padding-left: 0.9375rem;
           margin-top: -0.125rem;

package/src/components/InfoForm/InfoForm.module.scss

@@ -14,6 +14,7 @@
   }
 
   .apiInfoForm_submitBtn {
+    height: 1.25rem !important;
     width: 4.25rem;
   }
 }

package/src/components/InfoForm/InfoForm.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 // @ts-ignore
-import { useFormik } from 'formik'
+import { useFormikContext } from 'formik'
 import * as Yup from 'yup'
 import { Button, Input, SelectGroup, TextArea } from 'digitinary-ui'
 import styles from './InfoForm.module.scss'
@@ -8,91 +8,126 @@ import Chips from '../../components/Chips/Chips'
 import { CheckMarkSquare } from '../../assets/icons'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
 import regex from '../../constants/regex'
-
-const apiSchema = {
-  initialValue: {
-    name: '',
-    desc: '',
-    tags: [],
-    authType: '',
-    version: '',
-  },
-  schema: Yup.object().shape({
-    name: Yup.string().required('').min(1, 'Minimum length allowed is 1'),
-    authType: Yup.string(),
-    version: Yup.string(),
-    desc: Yup.string(),
-    tags: Yup.array().of(
-      Yup.object().shape({
-        id: Yup.string(),
-        label: Yup.string(),
-      })
-    ),
-  }),
-}
+import { TransformedOpenApi } from '../../types/transformedOpenApi'
 
 const InfoForm = () => {
-  const formik = useFormik({
-    initialValues: structuredClone(apiSchema.initialValue),
-    validationSchema: apiSchema.schema,
-    validateOnMount: true,
-    onSubmit: (values, { resetForm, setFieldError, validateForm }) => {
-      // Handle save logic
-      resetForm({ values: structuredClone(apiSchema.initialValue) })
+  const [tagsList, setTagsList] = useState([])
+  const [authType, setAuthType] = useState('')
+  const { values, setFieldValue, errors, submitForm } = useFormikContext<TransformedOpenApi>()
+  useEffect(() => {
+    if (values && values.tags) {
+      setTagsList(values.tags)
+    }
+    if (values && values.components && values.components.securitySchemes) {
+      const authenticatorKeys = Object.keys(values.components.securitySchemes)
+      if (authenticatorKeys.length) {
+        setAuthType(values.components.securitySchemes[authenticatorKeys[0]].scheme)
+      }
+    }
+  }, [])
 
-      setTimeout(() => validateForm(), 0)
-    },
-  })
-
-  const { values, errors, setFieldValue } = formik
+  const capitalize = (str) => {
+    if (!str) return ''
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
 
   return (
     <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>
       <Input
-        size='large'
-        placeholder='e.g. Payments'
-        label='API Name'
+        size="large"
+        placeholder="e.g. Payments"
+        label="API Name"
         required
-        value={values.name}
+        value={values?.info?.title}
         maxLength={25}
         onChange={(value) => {
-          setFieldValue('name', value)
+          setFieldValue('info.title', value)
         }}
         onClear={() => {
-          setFieldValue('name', '')
+          setFieldValue('info.title', '')
         }}
-        errorMsg={errors.name}
+        errorMsg={errors?.info?.title}
         restrictedCharsRegex={regex.basic}
       />
       <div className={styles.apiDocRow}>
-        <Input size='large' label='API Authentication Type' required value={'Basic'} disabled />
-        <Input size='large' label='Version' required value={'1.3.2'} disabled />
+        <Input
+          size="large"
+          label="API Authentication Type"
+          required
+          value={capitalize(authType)}
+          disabled
+        />
+        <Input size="large" label="Version" required value={values?.info?.version} disabled />
       </div>
       <TextArea
-        size='large'
-        placeholder='description...'
-        label='Description'
-        value={values.desc}
+        size="large"
+        placeholder="Enter a description of the API's functionality..."
+        label="Description"
+        value={values?.info?.description}
         maxLength={120}
         onChange={(value: string) => {
-          setFieldValue('desc', value)
+          setFieldValue('info.description', value)
         }}
         onClear={() => {
-          setFieldValue('desc', '')
+          setFieldValue('info.description', '')
         }}
-        errorMessage={errors.desc}
+        errorMessage={errors?.info?.description}
         restrictedCharsRegex={regex.restrictNone}
       />
-      <SelectGroup value={values.tags} onChange={(items) => setFieldValue('tags', items)} label='Tags' options={[{ list: [{ label: 'Option 1', value: '1' }] }]} />
-      <Chips className={styles.apiInfoForm_tagsChips} items={values.tags.map((t) => ({ id: t.label, label: t.label }))} onDelete={(items) => setFieldValue('tags', items)} />
+      <SelectGroup
+        value={values.tags.map((item) => ({
+          label: item.name,
+          value: item.name,
+          description: item.description || '',
+        }))}
+        onChange={(items) =>
+          setFieldValue(
+            'tags',
+            items.map((item) => ({
+              name: item.label,
+              description: item.description || '',
+            }))
+          )
+        }
+        label="Tags"
+        options={[
+          {
+            list: tagsList?.map((item) => ({
+              label: item.name,
+              value: item.name,
+              description: item.description || '',
+            })),
+          },
+        ]}
+      />
+      {values.tags.length > 0 && (
+        <Chips
+          className={styles.apiInfoForm_tagsChips}
+          items={values.tags.map((t) => ({
+            id: t.name,
+            label: t.name,
+            description: t.description || '',
+          }))}
+          onDelete={(items) =>
+            setFieldValue(
+              'tags',
+              items.map((item) => ({
+                name: item.label,
+                description: item.description || '',
+              }))
+            )
+          }
+        />
+      )}
       <Button
         className={styles.apiInfoForm_submitBtn}
-        size='small'
+        size="small"
         fullWidth={false}
-        type='submit'
-        variant='link'
-        color='success'
-        startIcon={<SVGLoader src={CheckMarkSquare} width='1.5rem' height='1.5rem' />}
+        onClick={submitForm}
+        type="submit"
+        variant="link"
+        color="success"
+        startIcon={<SVGLoader src={CheckMarkSquare} width="1.5rem" height="1.5rem" />}
       >
         Save
       </Button>

package/src/components/LivePreview/LivePreview.module.scss

@@ -0,0 +1,5 @@
+p.apiName {
+    font-size: 40px;
+    line-height: 30px;
+    font-weight: 500;
+}