@@ -42,9 +42,64 @@ COMPONENTS_WITHOUT_DEMOS.add('ComboBoxItem');
4242COMPONENTS_WITHOUT_DEMOS . add ( 'MultiComboBoxItem' ) ;
4343COMPONENTS_WITHOUT_DEMOS . add ( 'SuggestionItem' ) ;
4444
45+ const TagNames = new Map ( ) ;
46+ TagNames . set ( 'Avatar' , 'ui5-avatar' ) ;
47+ TagNames . set ( 'Badge' , 'ui5-badge' ) ;
48+ TagNames . set ( 'BusyIndicator' , 'ui5-busyindicator' ) ;
49+ TagNames . set ( 'Button' , 'ui5-button' ) ;
50+ TagNames . set ( 'Calendar' , 'ui5-calendar' ) ;
51+ TagNames . set ( 'Card' , 'ui5-card' ) ;
52+ TagNames . set ( 'Carousel' , 'ui5-carousel' ) ;
53+ TagNames . set ( 'CheckBox' , 'ui5-checkbox' ) ;
54+ TagNames . set ( 'ComboBox' , 'ui5-combobox' ) ;
55+ TagNames . set ( 'ComboBoxItem' , 'ui5-cb-item' ) ;
56+ TagNames . set ( 'CustomListItem' , 'ui5-li-custom' ) ;
57+ TagNames . set ( 'DatePicker' , 'ui5-datepicker' ) ;
58+ TagNames . set ( 'Dialog' , 'ui5-dialog' ) ;
59+ TagNames . set ( 'FileUploader' , 'ui5-file-uploader' ) ;
60+ TagNames . set ( 'GroupHeaderListItem' , 'ui5-li-groupheader' ) ;
61+ TagNames . set ( 'Icon' , 'ui5-icon' ) ;
62+ TagNames . set ( 'Input' , 'ui5-input' ) ;
63+ TagNames . set ( 'Label' , 'ui5-label' ) ;
64+ TagNames . set ( 'Link' , 'ui5-link' ) ;
65+ TagNames . set ( 'List' , 'ui5-list' ) ;
66+ TagNames . set ( 'MessageStrip' , 'ui5-messagestrip' ) ;
67+ TagNames . set ( 'MultiComboBox' , 'ui5-multi-combobox' ) ;
68+ TagNames . set ( 'MultiComboBoxItem' , 'ui5-mcb-item' ) ;
69+ TagNames . set ( 'Option' , 'ui5-option' ) ;
70+ TagNames . set ( 'Panel' , 'ui5-panel' ) ;
71+ TagNames . set ( 'Popover' , 'ui5-popover' ) ;
72+ TagNames . set ( 'ProductSwitch' , 'ui5-product-switch' ) ;
73+ TagNames . set ( 'ProductSwitchItem' , 'ui5-product-switch-item' ) ;
74+ TagNames . set ( 'RadioButton' , 'ui5-radiobutton' ) ;
75+ TagNames . set ( 'ResponsivePopover' , 'ui5-responsive-popover' ) ;
76+ TagNames . set ( 'SegmentedButton' , 'ui5-segmentedbutton' ) ;
77+ TagNames . set ( 'Select' , 'ui5-select' ) ;
78+ TagNames . set ( 'ShellBar' , 'ui5-shellbar' ) ;
79+ TagNames . set ( 'ShellBarItem' , 'ui5-shellbar-item' ) ;
80+ TagNames . set ( 'StandardListItem' , 'ui5-li' ) ;
81+ TagNames . set ( 'SuggestionItem' , 'ui5-suggestion-item' ) ;
82+ TagNames . set ( 'Switch' , 'ui5-switch' ) ;
83+ TagNames . set ( 'Tab' , 'ui5-tab' ) ;
84+ TagNames . set ( 'TabContainer' , 'ui5-tabcontainer' ) ;
85+ TagNames . set ( 'Table' , 'ui5-table' ) ;
86+ TagNames . set ( 'TableCell' , 'ui5-table-cell' ) ;
87+ TagNames . set ( 'TableColumn' , 'ui5-table-column' ) ;
88+ TagNames . set ( 'TableRow' , 'ui5-table-row' ) ;
89+ TagNames . set ( 'TabSeparator' , 'ui5-tab-separator' ) ;
90+ TagNames . set ( 'TextArea' , 'ui5-textarea' ) ;
91+ TagNames . set ( 'Timeline' , 'ui5-timeline' ) ;
92+ TagNames . set ( 'TimelineItem' , 'ui5-timeline-item' ) ;
93+ TagNames . set ( 'TimePicker' , 'ui5-timepicker' ) ;
94+ TagNames . set ( 'Title' , 'ui5-title' ) ;
95+ TagNames . set ( 'Toast' , 'ui5-toast' ) ;
96+ TagNames . set ( 'ToggleButton' , 'ui5-togglebutton' ) ;
97+
4598const componentsFromFioriPackage = new Set ( fioriWebComponentsSpec . symbols . map ( ( componentSpec ) => componentSpec . module ) ) ;
4699
47100const capitalizeFirstLetter = ( s ) => s . charAt ( 0 ) . toUpperCase ( ) + s . slice ( 1 ) ;
101+ const filterNonPublicAttributes = ( prop ) =>
102+ prop . visibility === 'public' && prop . readonly !== 'true' && prop . static !== true ;
48103
49104const getTypeScriptTypeForProperty = ( property ) => {
50105 switch ( property . type ) {
@@ -259,11 +314,20 @@ const getEventParameters = (parameters) => {
259314 } ;
260315} ;
261316
262- const createWebComponentWrapper = ( name , types , importStatements , defaultProps ) => {
317+ const createWebComponentWrapper = (
318+ name ,
319+ types ,
320+ importStatements ,
321+ defaultProps ,
322+ regularProps ,
323+ booleanProps ,
324+ slotProps ,
325+ eventProps
326+ ) => {
263327 return prettier . format (
264328 `
265329 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
266- import UI5 ${ name } from '@ui5/webcomponents${ componentsFromFioriPackage . has ( name ) ? '-fiori' : '' } ${ name }
330+ import '@ui5/webcomponents${ componentsFromFioriPackage . has ( name ) ? '-fiori' : '' } ${ name }
267331 import React, { FC } from 'react';
268332 import { WithWebComponentPropTypes } from '../../internal/withWebComponent';
269333 ${ importStatements . join ( '\n' ) }
@@ -277,7 +341,16 @@ const createWebComponentWrapper = (name, types, importStatements, defaultProps)
277341 * <br />
278342 * <a href="https://sap.github.io/ui5-webcomponents/playground/components/${ name }
279343 */
280- const ${ name } ${ name } ${ name } ${ name }
344+ const ${ name } ${ name } ${ name }
345+ '${ TagNames . get ( name ) }
346+ [${ regularProps . map ( ( v ) => `'${ v } ) . join ( ', ' ) }
347+ [${ booleanProps . map ( ( v ) => `'${ v } ) . join ( ', ' ) }
348+ [${ slotProps
349+ . filter ( ( name ) => name !== 'children' )
350+ . map ( ( v ) => `'${ v } )
351+ . join ( ', ' ) } ],
352+ [${ eventProps . map ( ( v ) => `'${ v } ) . join ( ', ' ) }
353+ );
281354
282355 ${ name } ${ name }
283356
@@ -525,17 +598,26 @@ resolvedWebComponents.forEach((componentSpec) => {
525598 componentSpec . module ,
526599 propTypes ,
527600 uniqueAdditionalImports ,
528- defaultProps
601+ defaultProps ,
602+ ( componentSpec . properties || [ ] )
603+ . filter ( filterNonPublicAttributes )
604+ . filter ( ( { type } ) => type !== 'boolean' && type !== 'Boolean' )
605+ . map ( ( { name } ) => name ) ,
606+ ( componentSpec . properties || [ ] )
607+ . filter ( filterNonPublicAttributes )
608+ . filter ( ( { type } ) => type === 'boolean' || type === 'Boolean' )
609+ . map ( ( { name } ) => name ) ,
610+ ( componentSpec . slots || [ ] ) . filter ( filterNonPublicAttributes ) . map ( ( { name } ) => name ) ,
611+ ( componentSpec . events || [ ] ) . filter ( filterNonPublicAttributes ) . map ( ( { name } ) => name )
529612 ) ;
530613
531614 // check if folder exists and create it if necessary
532615 const webComponentFolderPath = path . join ( WEB_COMPONENTS_ROOT_DIR , componentSpec . module ) ;
533616 if ( ! fs . existsSync ( webComponentFolderPath ) ) {
534617 fs . mkdirSync ( webComponentFolderPath ) ;
535618 }
536- if ( ! fs . existsSync ( path . join ( webComponentFolderPath , 'index.tsx' ) ) ) {
537- fs . writeFileSync ( path . join ( webComponentFolderPath , 'index.tsx' ) , webComponentWrapper ) ;
538- }
619+
620+ fs . writeFileSync ( path . join ( webComponentFolderPath , 'index.tsx' ) , webComponentWrapper ) ;
539621
540622 // create test
541623 if ( ! fs . existsSync ( path . join ( webComponentFolderPath , `${ componentSpec . module } ) ) ) {
0 commit comments