Hey @manish-sharma
You talk in this post saying that there is a place to test your component and visit any page in your web browser that renders this component, but there is no page on localhost that allows me to test my component.
Like I keep on saying before there was a place where could test my component but when I install the shopify builder theme it’s different.
That where the confusion lies there no consistency in building this different shopify builder theme if him using nextjs theme or shopify is two different setup process when you launch a new project.
'use client';
import React from 'react';
import { Builder, withChildren } from "@builder.io/react";';
// pass your custom component to withChildren()
const SignUpWithBuilderChildren = withChildren(SignUp)
// specify defaultChildren when you register the component
Builder.registerComponent(SignUpWithBuilderChildren, {
name: 'Form', // Name of the component
image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca', // Image for the component
inputs: [
// List of input options for the component
{
name: 'type',
type: 'text',
enum: [ // Possible input types
'text',
'number',
'email',
'url',
'checkbox',
'radio',
'range',
'date',
'datetime-local',
'search',
'tel',
'time',
'file',
'month',
'week',
'password',
'color',
'hidden',
],
defaultValue: 'text', // Default input type
},
{
name: 'name',
type: 'string',
required: true,
helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"', // Helper text for input name
},
{
name: 'placeholder',
type: 'string',
defaultValue: 'Hello there',
helperText: 'Text to display when there is no value', // Helper text for placeholder
},
{
name: 'defaultValue',
type: 'string',
},
{
name: 'value',
type: 'string',
advanced: true,
},
{
name: 'required',
type: 'boolean',
helperText: 'Is this input required to be filled out to submit a form',
defaultValue: false, // Default value for required
},
],
noWrap: true, // Prevent wrapping
static: true, // Component is static
defaultStyles: {
// Default styles for the component
paddingTop: '10px',
paddingBottom: '10px',
paddingLeft: '10px',
paddingRight: '10px',
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '#ccc',
},
// Adding defaults is important for easy usability
defaultChildren: [
{
'@type': '@builder.io/sdk:Element',
component: { name: 'Text', options: { text: 'I am child text block!' } }
}
]
})
// Interface for props of FormInput component
export interface SignUpFormInputProps {
type?: string;
attributes?: any;
name?: string;
value?: string;
placeholder?: string;
defaultValue?: string;
required?: boolean;
}
// Component for input field in a form
class FormInputComponent extends React.Component<SignUpFormInputProps> {
render() {
return (
<input
// Key for input, changes based on editing state and default value
key={Builder.isEditing && this.props.defaultValue ? this.props.defaultValue : 'default-key'}
placeholder={this.props.placeholder}
type={this.props.type}
name={this.props.name}
value={this.props.value}
defaultValue={this.props.defaultValue}
required={this.props.required}
// Spread additional attributes
{...this.props.attributes}
/>
);
}
}