1- import React , { useState } from 'react' ;
1+ import React , { useState , useRef , ChangeEvent , useEffect } from 'react' ;
22import { Button , Box , Alert , Paper } from '@mui/material' ;
33import MetadataSection from './MetadataSection' ;
44import ArchitectureSection from './ArchitectureSection' ;
@@ -16,11 +16,11 @@ interface ContextFormProps {
1616
1717export type FormDataType = {
1818 moduleName : string ;
19- relatedModules : string ;
19+ relatedModules : string [ ] ;
2020 version : string ;
2121 description : string ;
22- diagrams : string ;
23- technologies : string ;
22+ diagrams : string [ ] ;
23+ technologies : string [ ] ;
2424 conventions : string ;
2525 directives : string ;
2626 architecture : {
@@ -55,11 +55,11 @@ export type FormDataType = {
5555const ContextForm : React . FC < ContextFormProps > = ( { onSubmit } ) => {
5656 const [ formData , setFormData ] = useState < FormDataType > ( {
5757 moduleName : '' ,
58- relatedModules : '' ,
58+ relatedModules : [ ] ,
5959 version : '' ,
6060 description : '' ,
61- diagrams : '' ,
62- technologies : '' ,
61+ diagrams : [ ] ,
62+ technologies : [ ] ,
6363 conventions : '' ,
6464 directives : '' ,
6565 architecture : {
@@ -92,6 +92,11 @@ const ContextForm: React.FC<ContextFormProps> = ({ onSubmit }) => {
9292 } ) ;
9393
9494 const [ errors , setErrors ] = useState < { [ key : string ] : string } > ( { } ) ;
95+ const fileInputRef = useRef < HTMLInputElement > ( null ) ;
96+
97+ useEffect ( ( ) => {
98+ console . log ( 'Form data updated:' , formData ) ;
99+ } , [ formData ] ) ;
95100
96101 const handleChange = ( e : React . ChangeEvent < HTMLInputElement | HTMLTextAreaElement > ) => {
97102 const { name, value } = e . target ;
@@ -112,6 +117,13 @@ const ContextForm: React.FC<ContextFormProps> = ({ onSubmit }) => {
112117 } ) ) ;
113118 } ;
114119
120+ const handleMultiChange = ( field : string ) => ( event : React . SyntheticEvent , value : string [ ] ) => {
121+ setFormData ( ( prevData ) => ( {
122+ ...prevData ,
123+ [ field ] : value ,
124+ } ) ) ;
125+ } ;
126+
115127 const handleSubmit = ( e : React . FormEvent ) => {
116128 e . preventDefault ( ) ;
117129 const validationErrors = validateForm ( formData ) ;
@@ -125,10 +137,97 @@ const ContextForm: React.FC<ContextFormProps> = ({ onSubmit }) => {
125137 }
126138 } ;
127139
140+ const handleFileImport = ( e : ChangeEvent < HTMLInputElement > ) => {
141+ const file = e . target . files ?. [ 0 ] ;
142+ if ( file ) {
143+ const reader = new FileReader ( ) ;
144+ reader . onload = ( e ) => {
145+ try {
146+ const content = e . target ?. result as string ;
147+ console . log ( 'Imported file content:' , content ) ;
148+ const parsedData = parseContextMd ( content ) ;
149+ console . log ( 'Parsed data:' , parsedData ) ;
150+ setFormData ( parsedData ) ;
151+ } catch ( error ) {
152+ console . error ( 'Error parsing imported file:' , error ) ;
153+ // You might want to show an error message to the user here
154+ }
155+ } ;
156+ reader . onerror = ( error ) => {
157+ console . error ( 'Error reading file:' , error ) ;
158+ // You might want to show an error message to the user here
159+ } ;
160+ reader . readAsText ( file ) ;
161+ }
162+ } ;
163+
164+ const parseContextMd = ( content : string ) : FormDataType => {
165+ const lines = content . split ( '\n' ) ;
166+ const parsedData : FormDataType = JSON . parse ( JSON . stringify ( formData ) ) ;
167+
168+ let currentSection : keyof FormDataType | 'metadata' | null = null ;
169+ let nestedSection : string | null = null ;
170+
171+ lines . forEach ( ( line ) => {
172+ if ( line . startsWith ( '# ' ) ) {
173+ currentSection = line . substring ( 2 ) . trim ( ) . toLowerCase ( ) as keyof FormDataType | 'metadata' ;
174+ nestedSection = null ;
175+ } else if ( line . startsWith ( '## ' ) ) {
176+ nestedSection = line . substring ( 3 ) . trim ( ) . toLowerCase ( ) ;
177+ } else if ( line . startsWith ( '- ' ) ) {
178+ const [ key , ...valueParts ] = line . substring ( 2 ) . split ( ':' ) ;
179+ const value = valueParts . join ( ':' ) . trim ( ) ;
180+ if ( key && value ) {
181+ if ( currentSection === 'metadata' ) {
182+ const metadataKey = key . replace ( / \s + / g, '' ) as keyof FormDataType ;
183+ if ( metadataKey === 'relatedModules' || metadataKey === 'diagrams' || metadataKey === 'technologies' ) {
184+ ( parsedData [ metadataKey ] as string [ ] ) = value . split ( ',' ) . map ( ( s ) => s . trim ( ) ) ;
185+ } else if ( metadataKey in parsedData ) {
186+ ( parsedData [ metadataKey ] as string ) = value ;
187+ }
188+ } else if ( currentSection && currentSection in parsedData && typeof parsedData [ currentSection ] === 'object' ) {
189+ const sectionData = parsedData [ currentSection ] as Record < string , unknown > ;
190+ if ( nestedSection ) {
191+ if ( ! ( nestedSection in sectionData ) ) {
192+ sectionData [ nestedSection ] = { } ;
193+ }
194+ ( sectionData [ nestedSection ] as Record < string , string > ) [ key ] = value ;
195+ } else {
196+ ( sectionData as Record < string , string > ) [ key ] = value ;
197+ }
198+ }
199+ }
200+ }
201+ } ) ;
202+
203+ return parsedData ;
204+ } ;
205+
128206 return (
129207 < form onSubmit = { handleSubmit } >
208+ < Box sx = { { mb : 2 } } >
209+ < input
210+ type = "file"
211+ accept = ".md"
212+ ref = { fileInputRef }
213+ style = { { display : 'none' } }
214+ onChange = { handleFileImport }
215+ />
216+ < Button
217+ variant = "outlined"
218+ onClick = { ( ) => fileInputRef . current ?. click ( ) }
219+ >
220+ Import .context.md
221+ </ Button >
222+ </ Box >
223+
130224 < Paper elevation = { 3 } sx = { { p : 3 , mb : 3 , bgcolor : 'background.default' } } >
131- < MetadataSection formData = { formData } errors = { errors } handleChange = { handleChange } />
225+ < MetadataSection
226+ formData = { formData }
227+ errors = { errors }
228+ handleChange = { handleChange }
229+ handleMultiChange = { handleMultiChange }
230+ />
132231 </ Paper >
133232 < Paper elevation = { 3 } sx = { { p : 3 , mb : 3 , bgcolor : 'background.default' } } >
134233 < ArchitectureSection formData = { formData } handleNestedChange = { handleNestedChange } />
0 commit comments