Merge pull request #197 from PRO-Robotech/feature/dev

form fixes | wildcards

Author: typescreep

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@prorobotech/openapi-k8s-toolkit",
-  "version": "0.0.1-alpha.138",
+  "version": "0.0.1-alpha.139",
   "description": "ProRobotech OpenAPI k8s tools",
   "main": "dist/openapi-k8s-toolkit.cjs.js",
   "module": "dist/openapi-k8s-toolkit.es.js",

package.json

@@ -1,21 +1,22 @@
 import React, { FC, PropsWithChildren } from 'react'
-import { includesArray } from 'utils/nestedStringsArrayInclude'
 import { TFormName } from 'localTypes/form'
-import { PossibleHiddenContainer } from '../../atoms'
 import { useHiddenPathsLayout } from '../../organisms/BlackholeForm/context'
+import { PossibleHiddenContainer } from '../../atoms'
+import { includesPath, toArray } from './utils'
+
+export const HiddenContainer: FC<PropsWithChildren<{ name?: TFormName; secondName?: TFormName }>> = ({
+  name,
+  secondName,
+  children,
+}) => {
+  const hiddenPaths = useHiddenPathsLayout() // type: string[][]
 
-type THiddenContainerProps = PropsWithChildren<{
-  name?: TFormName
-  secondName?: TFormName
-}>
+  const nameArr = toArray(name)
+  const secondArr = toArray(secondName)
 
-export const HiddenContainer: FC<THiddenContainerProps> = ({ name, secondName, children }) => {
-  const hiddenPaths = useHiddenPathsLayout()
+  const isHidden = !!hiddenPaths && !!nameArr && includesPath(hiddenPaths, nameArr)
 
-  const isHidden = name ? includesArray(hiddenPaths, Array.isArray(name) ? name : [name]) : false
-  const isHiddenSecond = secondName
-    ? includesArray(hiddenPaths, Array.isArray(secondName) ? secondName : [secondName])
-    : false
+  const isHiddenSecond = !!hiddenPaths && !!secondArr && includesPath(hiddenPaths, secondArr)
 
   return (
     <PossibleHiddenContainer $isHidden={!hiddenPaths || isHidden || isHiddenSecond}>{children}</PossibleHiddenContainer>

src/components/molecules/BlackholeForm/atoms/HiddenContainer/HiddenContainer.tsx

@@ -0,0 +1,9 @@
+import { TFormName } from 'localTypes/form'
+
+// robust comparator: haystack is string[][], needle may have numbers
+export const includesPath = (haystack: string[][], needle: (string | number)[]) =>
+  haystack.some(h => h.length === needle.length && h.every((seg, i) => seg === String(needle[i])))
+
+export const toArray = (p?: TFormName): (string | number)[] | undefined =>
+  // eslint-disable-next-line no-nested-ternary
+  p === undefined ? undefined : Array.isArray(p) ? p : [p]

src/components/molecules/BlackholeForm/atoms/HiddenContainer/utils.ts

@@ -1,18 +1,20 @@
 /* eslint-disable no-empty */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { FC, useEffect, useMemo, useRef, useState } from 'react'
-import { Form } from 'antd'
+import { Form, theme as antdtheme } from 'antd'
 import Editor from '@monaco-editor/react'
 import type * as monaco from 'monaco-editor'
 import { TFormName, TPersistedControls } from 'localTypes/form'
 import * as yaml from 'yaml'
 import { useOnValuesChangeCallback } from '../../organisms/BlackholeForm/context'
+import { Styled } from './styled'
 
 export const FormInlineYamlEditor: FC<{
   path: TFormName
   persistedControls: TPersistedControls
   externalValue?: unknown
 }> = ({ path, persistedControls, externalValue }) => {
+  const { token } = antdtheme.useToken()
   const form = Form.useFormInstance()
   const onValuesChange = useOnValuesChangeCallback()
 
@@ -73,7 +75,7 @@ export const FormInlineYamlEditor: FC<{
   }, [yamlText, modelUri])
 
   return (
-    <div style={{ height: 140 }}>
+    <Styled.Container $colorBorder={token.colorBorder}>
       <Editor
         language="yaml"
         path={modelUri}
@@ -181,6 +183,6 @@ export const FormInlineYamlEditor: FC<{
           wordWrap: 'on',
         }}
       />
-    </div>
+    </Styled.Container>
   )
 }

src/components/molecules/BlackholeForm/molecules/FormInlineYamlEditor/FormInlineYamlEditor.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+type TContainerProps = {
+  $colorBorder: string
+}
+
+const Container = styled.div<TContainerProps>`
+  height: 140px;
+  border: 1px solid ${({ $colorBorder }) => $colorBorder};
+  border-radius: 8px;
+  padding: 2px;
+
+  .monaco-editor,
+  .overflow-guard {
+    border-radius: 8px;
+  }
+`
+
+export const Styled = {
+  Container,
+}

src/components/molecules/BlackholeForm/molecules/FormInlineYamlEditor/styled.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-nested-ternary */
 import React, { FC, useEffect, useRef, useState } from 'react'
+import { theme as antdtheme } from 'antd'
 import Editor from '@monaco-editor/react'
 import type * as monaco from 'monaco-editor'
 import * as yaml from 'yaml'
@@ -10,9 +11,11 @@ type TYamlEditProps = {
   theme: 'light' | 'dark'
   currentValues: Record<any, unknown>
   onChange: (values: Record<string, unknown>) => void
+  editorUri: string
 }
 
-export const YamlEditor: FC<TYamlEditProps> = ({ theme, currentValues, onChange }) => {
+export const YamlEditor: FC<TYamlEditProps> = ({ theme, currentValues, onChange, editorUri }) => {
+  const { token } = antdtheme.useToken()
   const [yamlData, setYamlData] = useState<string>('')
 
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -37,7 +40,7 @@ export const YamlEditor: FC<TYamlEditProps> = ({ theme, currentValues, onChange
     const monaco = monacoRef.current
     if (editor && monaco) {
       if (isFocusedRef.current) return
-      const uri = monaco.Uri.parse('inmemory://openapi-ui/form.yaml')
+      const uri = monaco.Uri.parse(editorUri)
       let model = editor.getModel() || monaco.editor.getModel(uri)
 
       if (!model) {
@@ -55,13 +58,13 @@ export const YamlEditor: FC<TYamlEditProps> = ({ theme, currentValues, onChange
         }
       }
     }
-  }, [yamlData])
+  }, [yamlData, editorUri])
 
   return (
-    <Styled.BorderRadiusContainer>
+    <Styled.BorderRadiusContainer $colorBorder={token.colorBorder}>
       <Editor
         language="yaml"
-        path="inmemory://openapi-ui/form.yaml"
+        path={editorUri}
         keepCurrentModel
         width="100%"
         height="100%"

src/components/molecules/BlackholeForm/molecules/YamlEditor/YamlEditor.tsx

@@ -1,7 +1,14 @@
 import styled from 'styled-components'
 
-const BorderRadiusContainer = styled.div`
+type TBorderRadiusContainerProps = {
+  $colorBorder: string
+}
+
+const BorderRadiusContainer = styled.div<TBorderRadiusContainerProps>`
   height: 100%;
+  border: 1px solid ${({ $colorBorder }) => $colorBorder};
+  border-radius: 8px;
+  padding: 2px;
 
   .monaco-editor,
   .overflow-guard {

src/components/molecules/BlackholeForm/molecules/YamlEditor/styled.ts

@@ -110,7 +110,7 @@ export const YamlEditorSingleton: FC<TYamlEditorSingletonProps> = ({
   return (
     <>
       {contextHolder}
-      <Styled.BorderRadiusContainer $designNewLayoutHeight={designNewLayoutHeight}>
+      <Styled.BorderRadiusContainer $designNewLayoutHeight={designNewLayoutHeight} $colorBorder={token.colorBorder}>
         <Editor
           defaultLanguage="yaml"
           width="100%"

src/components/molecules/BlackholeForm/molecules/YamlEditorSingleton/YamlEditorSingleton.tsx

@@ -2,10 +2,15 @@ import styled from 'styled-components'
 
 type TBorderRadiusContainerProps = {
   $designNewLayoutHeight?: number
+  $colorBorder: string
 }
 
 const BorderRadiusContainer = styled.div<TBorderRadiusContainerProps>`
   height: ${({ $designNewLayoutHeight }) => ($designNewLayoutHeight ? `${$designNewLayoutHeight}px` : '75vh')};
+  border: 1px solid ${({ $colorBorder }) => $colorBorder};
+  border-radius: 8px;
+  padding: 2px;
+  box-sizing: border-box;
 
   .monaco-editor,
   .overflow-guard {