feat(packages/sui-studio): allow packages store its component on any file and gets its documentation

[andresin87]

Description

This PR is related to #1518

It allows component packages to follow the structure

// under components/[categoryName]/[componentName]
// - index.js
// - [Component].js (this file can be placed anywhere and can be imported through any file recursively) and contains the default exported Component, which will be documented in the sui-studio API tab

index.js

//  index.js *************************************************************
import [Component] from './[Component].js'
import Foo {bar1, bar2 as fooBar2} from './Foo.js'

export {
  Foo
  bar1,
  fooBar2 as bar3
}
export default [Component]

[Component].js

// - [Component].js ****************************************************

// Tested using
// VariableDeclaration
const Component = ({as: As, children, ...props}) => <As {...props}>{children}</As>

// FunctionDeclaration
function Component({as: As, children, ...props}) { return <As {...props}>{children}</As> }

// ClassDeclaration
class Component {
	constructor(props) {
		super(props)
	}
	render() {
		const {as: As, children, ...props} = this.props
		return  <As {...props}>{children}</As>
	}
}

// ExportNamedDeclaration
export const Component = ({as: As, children, ...props}) => <As {...props}>{children}</As>

// ExportDefaultDeclaration
export default function Component({as: As, children, ...props}) { return <As {...props}>{children}</As> }

This approach copy all js files to the public dir to get the proper documentation on a JSON, and then it removes all of them to do NOT impact to the next js file rate MAX_LIMIT_UPLOADS=5000

Related Issue

#1518

Example

Test it using @s-ui/[email protected] in your own vertical studios