jsx import { jsx } from "@emotion/core" ; import * as T from "../../types" ; import { column , heading , colors , shadow1 , fonts } from "../../styles" ; type Props = { component : T . Component ; } ; export function kebabToPascal ( kebab ) { return capitalizeFirstLetter ( kebabToCamel ( kebab ) ) ; } export function kebabToCamel ( kebab ) { let result = "" ; let isMaj = false ; for ( let i = 0 ; i < kebab . length ; i ++ ) { const charCode = kebab . charCodeAt ( i ) ; if ( isMaj && charCode >= 97 && charCode <= 122 ) { result += String . fromCharCode ( charCode - 32 ) ; isMaj = false ; } else if ( charCode === 45 ) { isMaj = true ; } else { result += kebab [ i ] ; } } return result ; } function capitalizeFirstLetter ( string ) { return string . charAt ( 0 ) . toUpperCase ( ) + string . slice ( 1 ) ; } function componentImport ( name ) { return `import { ${ name } } from './path/to/file.phi';` ; } function componentWithoutProps ( name ) { return `function Basic() {
  return <${ name } />;
}` ; } function propAssignment ( propName , value ) { return `      ${ kebabToCamel ( propName ) }="${ value }"` ; } function componentExampleToCode ( name , index , example ) { return `function Example${ index + 1 }() {
  return (
    <${ name }
${ Object . entries ( example . props ) . map ( ( [ key , value ] ) => propAssignment ( key , value ) ) . join ( "\n" ) } />
  );
}` ; } function componentToCodeExample ( component ) { const componentName = kebabToPascal ( component . name ) ; return `${ componentImport ( componentName ) }

${ componentWithoutProps ( componentName ) }

${ component . examples . map ( ( example , index ) => componentExampleToCode ( componentName , index , example ) ) . join ( "\n\n" ) }
` ; } export default function CodeExamples ( { component } ) { return ( < div css = { [ column , shadow1 , { zIndex : 2 , flex : 0 , padding : "0 40px 16px" , maxHeight : "300px" , background : colors . topBarBackground , } , ] } > < pre css = { { background : colors . canvasBackground , fontSize : "13px" , boxShadow : "inset rgba(0, 0, 0, 0.12) 0px 2px 5px 0px" , padding : "1em" , margin : "0.5em 0px" , overflow : "auto" , "::-webkit-scrollbar-corner" : { background : "transparent" , } , } } > < code css = { { fontFamily : fonts . mono , color : colors . sideBarForeground } } > { componentToCodeExample ( component ) } < /code> < /pre> < /div>); }