feat: Update to API references look and feel (#343)

Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com>
Co-authored-by: zakariasaad <zakaria.elas@gmail.com>
Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>

www/reference/src/utils/convert-to-kebab-case.js

@@ -0,0 +1,8 @@
+export const convertToKebabCase = string => {
+  return string
+    .replace(/\s+/g, "-")
+    .replace("'", "")
+    .replace(".", "")
+    .replace('"', "")
+    .toLowerCase()
+}

www/reference/src/utils/format-parameters.js

@@ -0,0 +1,29 @@
+export const formatMethodParams = method => {
+  const { parameters, requestBody } = method
+
+  const params = []
+  if (parameters && parameters.length > 0) {
+    parameters.map(p => {
+      return params.push({
+        property: p.name,
+        description: p.description,
+        required: p.required,
+        type: p.schema.type,
+      })
+    })
+  }
+  if (requestBody) {
+    const { required, properties } = requestBody
+    properties.map(p => {
+      return params.push({
+        property: p.property,
+        description: p.description,
+        required: required ? required.some(req => req === p.property) : false,
+        type: p.type,
+        nestedModel: p.nestedModel,
+      })
+    })
+  }
+
+  return { properties: params }
+}

www/reference/src/utils/format-route.js

@@ -0,0 +1,3 @@
+export const formatRoute = string => {
+  return string.replace(/{(.*?)}/g, ":$1")
+}

www/reference/src/utils/fragments.js

@@ -0,0 +1,215 @@
+import { graphql } from "gatsby"
+
+export const StoreSections = graphql`
+  fragment StoreSections on StoreSections {
+    sections {
+      ...StoreSection
+    }
+  }
+`
+
+export const StoreSection = graphql`
+  fragment StoreSection on StoreSectionsSection {
+    section_name
+    paths {
+      ...StorePath
+    }
+    schema {
+      object
+      description
+      properties {
+        property
+        type
+        description
+        format
+        nestedModel {
+          title
+          properties {
+            property
+            type
+          }
+        }
+      }
+    }
+  }
+`
+
+export const StorePath = graphql`
+  fragment StorePath on StoreSectionsSectionPaths {
+    name
+    methods {
+      ...StoreMethod
+    }
+  }
+`
+
+export const StoreMethod = graphql`
+  fragment StoreMethod on StoreSectionsSectionPathsMethods {
+    tags
+    summary
+    description
+    method
+    operationId
+    responses {
+      ...StoreResponse
+    }
+    requestBody {
+      ...StoreRequestBody
+    }
+
+    parameters {
+      description
+      in
+      name
+      required
+      schema {
+        type
+      }
+    }
+  }
+`
+
+export const StoreResponse = graphql`
+  fragment StoreResponse on StoreSectionsSectionPathsMethodsResponses {
+    status
+    description
+    content {
+      _ref
+      property
+      description
+      json
+      items {
+        _ref
+      }
+    }
+  }
+`
+
+export const StoreRequestBody = graphql`
+  fragment StoreRequestBody on StoreSectionsSectionPathsMethodsRequestBody {
+    type
+    required
+    properties {
+      description
+      property
+      type
+      nestedModel {
+        title
+        properties {
+          property
+          type
+        }
+      }
+    }
+  }
+`
+
+export const AdminSections = graphql`
+  fragment AdminSections on AdminSections {
+    sections {
+      ...AdminSection
+    }
+  }
+`
+
+export const AdminSection = graphql`
+  fragment AdminSection on AdminSectionsSection {
+    section_name
+    paths {
+      ...AdminPath
+    }
+    schema {
+      object
+      description
+      properties {
+        property
+        type
+        description
+        format
+        nestedModel {
+          title
+          properties {
+            property
+            type
+            description
+          }
+        }
+      }
+    }
+  }
+`
+
+export const AdminPath = graphql`
+  fragment AdminPath on AdminSectionsSectionPaths {
+    name
+    methods {
+      ...AdminMethod
+    }
+  }
+`
+
+export const AdminMethod = graphql`
+  fragment AdminMethod on AdminSectionsSectionPathsMethods {
+    tags
+    summary
+    description
+    method
+    operationId
+    responses {
+      ...AdminResponse
+    }
+    requestBody {
+      ...AdminRequestBody
+    }
+
+    parameters {
+      description
+      in
+      name
+      required
+      schema {
+        type
+      }
+    }
+  }
+`
+
+export const AdminResponse = graphql`
+  fragment AdminResponse on AdminSectionsSectionPathsMethodsResponses {
+    status
+    description
+    content {
+      _ref
+      type
+      property
+      description
+      json
+      items {
+        type
+        _ref
+      }
+    }
+  }
+`
+
+export const AdminRequestBody = graphql`
+  fragment AdminRequestBody on AdminSectionsSectionPathsMethodsRequestBody {
+    type
+    required
+    properties {
+      description
+      enum
+      format
+      property
+      type
+      nestedModel {
+        title
+        properties {
+          property
+          type
+          description
+        }
+      }
+    }
+  }
+`

www/reference/src/utils/scroll-parent.js

@@ -0,0 +1,20 @@
+const scrollParent = (parent, child) => {
+  const parentRect = parent.getBoundingClientRect()
+
+  const parentViewableArea = {
+    height: parent.clientHeight,
+    width: parent.clientWidth,
+  }
+
+  const childRect = child.getBoundingClientRect()
+  const isViewable =
+    childRect.top >= parentRect.top &&
+    childRect.top <= parentRect.top + parentViewableArea.height
+
+  if (!isViewable) {
+    const pos = childRect.top + parent.scrollTop - parentRect.top
+    parent.scrollTop = pos > 0 ? pos : 0
+  }
+}
+
+export default scrollParent