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

package/src/layout/docsComponents/DocsSideMenuTree/style.scss

@@ -1,195 +0,0 @@
-.api-docs-api-tree {
-  width: 100%;
-  max-width: 12.5rem;
-  padding: 3rem 1.25rem;
-  box-sizing: border-box;
-
-  > * {
-    box-sizing: border-box;
-  }
-
-  &__section {
-    &-header {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      padding-inline: 0.5rem;
-      cursor: pointer;
-      user-select: none;
-      height: 2.5rem;
-
-      &:hover {
-        background-color: #f3f4f6;
-      }
-
-      svg:first-child {
-        path {
-          stroke: #bbbec5;
-        }
-      }
-    }
-
-    &-title {
-      font-size: 0.75rem;
-      line-height: 0.875rem;
-      font-weight: 500;
-      color: #000;
-      margin-left: 0.25rem;
-    }
-
-    &__overview {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 1.75rem;
-      border-radius: 0.25rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: #f3f4f6;
-      }
-
-      span {
-        font-size: 0.75rem;
-        line-height: 0.875rem;
-        color: #000000;
-      }
-
-      &[data-active='true'] {
-        background-color: #f0f1f2;
-      }
-    }
-
-    &__endpoints {
-      display: flex;
-      align-items: center;
-      height: 1.5rem;
-      gap: 0.5rem;
-      border-radius: 0.25rem;
-      padding-inline: 1.75rem;
-      cursor: pointer;
-
-      span {
-        font-size: 0.75rem;
-        line-height: 0.875rem;
-        color: #000000;
-      }
-
-      &[data-active='true'] {
-        background-color: #f0f1f2;
-      }
-    }
-
-    &[data-active='true'] {
-      .api-docs-api-tree__section-title {
-        color: #616874;
-      }
-    }
-  }
-
-  &__endpoints {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    gap: 0.5rem;
-    border-radius: 0.25rem;
-
-    cursor: pointer;
-
-    span {
-      font-size: 0.75rem;
-      line-height: 0.875rem;
-      color: #000000;
-    }
-
-    &[data-active='true'] {
-      background-color: #f0f1f2;
-    }
-  }
-
-  &__subsection {
-    &-header {
-      height: 2rem;
-      display: flex;
-      align-items: center;
-      gap: 0.875rem;
-      padding-inline: 0.5rem;
-      cursor: pointer;
-      user-select: none;
-
-      svg {
-        color: #6b7280;
-      }
-    }
-
-    &-title {
-      font-size: 0.75rem;
-      line-height: 0.875rem;
-      color: #616874;
-    }
-  }
-
-  &__endpoint {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.5rem 0.75rem;
-    text-transform: capitalize;
-    width: 100%;
-    cursor: pointer;
-
-    &[data-active='true'] {
-      background-color: #f0f1f2;
-    }
-
-    &:hover {
-      background-color: #f3f4f6;
-    }
-
-    &-method {
-      font-size: 0.75rem;
-      line-height: 0.875rem;
-      font-weight: 400;
-      text-align: start;
-    }
-
-    &-name {
-      font-size: 0.75rem;
-      line-height: 0.875rem;
-      color: #3b3f46;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &--get .api-docs-api-tree__endpoint-method {
-      color: #3a6cd1;
-    }
-
-    &--post .api-docs-api-tree__endpoint-method {
-      color: #3aaa35;
-    }
-
-    &--put .api-docs-api-tree__endpoint-method {
-      color: #faad14;
-    }
-
-    &--delete .api-docs-api-tree__endpoint-method {
-      color: #da3f3f;
-    }
-
-    &--option .api-docs-api-tree__endpoint-method {
-      color: #495d97;
-    }
-
-    &--head .api-docs-api-tree__endpoint-method {
-      color: #9461c9;
-    }
-
-    &--patch .api-docs-api-tree__endpoint-method {
-      color: #58e2c2;
-    }
-  }
-}

package/src/layout/docsComponents/index.scss

@@ -1,49 +0,0 @@
-.api-docs-layout {
-  @import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');
-
-  display: grid;
-  height: 100vh;
-  max-height: 100%;
-  width: 100%;
-  overflow: hidden;
-  grid-template: 2.625rem auto / 12.5rem 1fr auto;
-  padding: 0 !important;
-
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: #bbbec5 #d1d3d8;
-    scroll-behavior: smooth;
-  }
-
-  aside.api-docs-api-tree {
-    grid-row: 2;
-    grid-column: 1;
-    border-right: 1px solid #bbbec5;
-    background-color: white;
-  }
-
-  aside.api-docs-aside {
-    grid-row: 2;
-    grid-column: 3;
-    width: 22.5rem;
-    max-width: 22.5rem;
-    overflow-x: clip;
-  }
-
-  aside,
-  main {
-    max-height: 100%;
-    overflow: auto;
-  }
-
-  header {
-    grid-column: 1 / -1;
-    border-bottom: 1px solid #bbbec5;
-  }
-
-  main {
-    grid-row: 2;
-    grid-column: 2;
-    background-color: white;
-  }
-}

package/src/layout/docsComponents/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import DocsHeader from './DocsHeader/DocsHeader'
-import DocsSideMenuTree from './DocsSideMenuTree/DocsSideMenuTree'
-import DocsContent from './DocsContent/DocsContent'
-import DocsAside from './DocsAside/DocsAside'
-import './index.scss'
-
-type LayoutProps = {
-  children: React.ReactNode
-}
-
-type CompoundLayout = React.FC<LayoutProps> & {
-  DocsHeader: typeof DocsHeader
-  DocsSideMenuTree: typeof DocsSideMenuTree
-  DocsContent: typeof DocsContent
-  DocsAside: typeof DocsAside
-}
-
-const Layout = (({ children }: LayoutProps) => {
-  return <div className="api-docs-layout">{children}</div>
-}) as CompoundLayout
-
-Layout.DocsHeader = DocsHeader
-Layout.DocsSideMenuTree = DocsSideMenuTree
-Layout.DocsContent = DocsContent
-Layout.DocsAside = DocsAside
-
-export default Layout

package/src/layout/docsLayout.tsx

@@ -1,120 +0,0 @@
-import React, { JSX, useEffect, useRef, useState } from 'react'
-import Layout from './docsComponents'
-import { HTTPMethod, OpenAPIFile, Parameter, RequestBody, Responses } from '@entities/openApi'
-import { transformOpenApiToDocs } from '../helpers/docs.helper'
-import { ApiSpecModel } from '@entities/index'
-import stableStringify from 'fast-json-stable-stringify'
-import { SectionToggleProvider } from '../../src/context/SectionToggleContext'
-
-interface ILayoutProps {
-  apis?: ApiSpecModel[]
-  activeApiId?: string
-  onProductNavigate?: (productId: number) => void
-}
-
-export interface TagData {
-  id: string
-  method: HTTPMethod
-  path: string
-  tags: string[]
-  responses: Responses
-  summary?: string
-  description: string
-  parameters?: Parameter[]
-  requestBody?: RequestBody
-}
-
-export interface EndpointData extends TagData {
-  api: OverviewData
-}
-
-export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
-  description: string
-  title: string
-  version: string
-  tags: Record<string, TagData[]>
-  servers: OpenAPIFile['servers']
-}
-
-function areEqual(prev: ILayoutProps, next: ILayoutProps): boolean {
-  return (
-    stableStringify(prev.apis ?? []) === stableStringify(next.apis ?? []) &&
-    prev.activeApiId === next.activeApiId
-  )
-}
-
-const DocsLayout = ({ apis, activeApiId, onProductNavigate }: ILayoutProps): JSX.Element => {
-  const [transformedOpenApis, setTransformedOpenApis] = useState<OverviewData[]>([])
-  const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
-  const [activeItemData, setActiveItemData] = useState<
-    OverviewData | EndpointData | Record<string, never>
-  >({})
-  const [activeType, setActiveType] = useState<'OVERVIEW' | 'ENDPOINT'>('OVERVIEW')
-  const allData = useRef([])
-  const [pending, setPending] = useState(true)
-  const [canSelectFirstApi, setCanSelectFirstApi] = useState(false)
-  const [canFocusSection, setCanFocusSection] = useState(false)
-
-  useEffect(() => {
-    if (transformedOpenApis.length === 0) {
-      setCanSelectFirstApi(!!activeApiId)
-      const t = structuredClone(apis)
-        ?.map((o3) => transformOpenApiToDocs(o3))
-        .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
-      setTransformedOpenApis(t)
-      allData.current = t
-      if (t.length > 0) {
-        setPending(false)
-      }
-    }
-  }, [apis])
-
-  const updateFilteredData = (filteredItems: OverviewData[], isReset = false) => {
-    if (isReset) {
-      setTransformedOpenApis(allData.current)
-      return
-    }
-    setTransformedOpenApis(filteredItems)
-  }
-
-  return (
-    <Layout>
-      <SectionToggleProvider>
-        <Layout.DocsHeader
-          transformedOpenApis={transformedOpenApis}
-          updateFilteredData={updateFilteredData}
-        />
-        {!pending && (
-          <Layout.DocsSideMenuTree
-            apis={transformedOpenApis}
-            setActiveItemData={setActiveItemData}
-            activeItemData={activeItemData as OverviewData | EndpointData}
-            isFirstApiExpanded={isFirstApiExpanded}
-            activeType={activeType}
-            setIsFirstApiExpanded={setIsFirstApiExpanded}
-            setActiveType={setActiveType}
-            canSelectFirstApi={canSelectFirstApi}
-            canFocusSection={canFocusSection}
-            setCanFocusSection={setCanFocusSection}
-            activeApiId={activeApiId}
-            setCanSelectFirstApi={setCanSelectFirstApi}
-          />
-        )}
-
-        {!pending && Object.keys(activeItemData).length > 0 && (
-          <Layout.DocsContent
-            data={activeItemData as OverviewData | EndpointData}
-            activeType={activeType}
-            setActiveItemData={setActiveItemData}
-            setActiveType={setActiveType}
-            onProductNavigate={onProductNavigate}
-            apis={transformedOpenApis}
-          />
-        )}
-        {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData as EndpointData} />}
-      </SectionToggleProvider>
-    </Layout>
-  )
-}
-
-export default React.memo(DocsLayout, areEqual)

package/src/types/docsLayout.type.ts

@@ -1,7 +0,0 @@
-export enum SectionEnum {
-  OVERVIEW = 'overview',
-  RESOURCE = 'resource',
-  API_SECTION = 'apiSection',
-  TAG_SECTION = 'tagSection',
-  ENDPOINTS_SECTION = 'endpointsSection',
-}

package/src/utils/index.ts

@@ -1,12 +0,0 @@
-export const copyToClipboard = async (text: string) => {
-  try {
-    await navigator.clipboard.writeText(text)
-  } catch (err) {
-    return err
-  }
-}
-
-export const capitalizeFirstLetter = (text: string) => {
-  if (!text) return ''
-  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
-}

package/the_npm_commands.sh

@@ -1,12 +0,0 @@
-#!/usr/bin/env bash
-#export CODEARTIFACT_AUTH_TOKEN=`aws codeartifact get-authorization-token --domain digitinary --domain-owner 650046438355 --region eu-central-1 --query authorizationToken --output text`
-
-set -e
-
-npm install
-
-npm version patch --no-git-tag-version
-
-npm run build
-
-npm publish

package/variables.txt

@@ -1,4 +0,0 @@
-export APP_VERSION=1.0.0
-export ECR_IMAGE=650046438355.dkr.ecr.eu-central-1.amazonaws.com/dgate-api-documentation:1.0.0-31102-develop
-export IMAGE_TAG=1.0.0-31102-develop
-export TARGET_ENV=dev