feat: Add namespace to components and fields packages

Copilot · hotlong · Copilot · commit 258d8d914541 · 2026-01-31T02:35:21.000Z
- components: Add 'ui' namespace to component registrations
- fields: Replace field: prefix with namespace: 'field' parameter
  - All field types now use field:name format via namespace parameter
  - Removed deprecated field: string prefix in favor of namespace approach
  - Maintains backward compatibility through fallback lookup

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/components/src/renderers/basic/button-group.tsx b/packages/components/src/renderers/basic/button-group.tsx
@@ -47,6 +47,7 @@ ComponentRegistry.register('button-group',
     );
   },
   {
+    namespace: 'ui',
     label: 'Button Group',
     inputs: [
       { 
diff --git a/packages/components/src/renderers/basic/div.tsx b/packages/components/src/renderers/basic/div.tsx
@@ -48,6 +48,7 @@ const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?:
 ComponentRegistry.register('div', 
   DivRenderer,
   {
+    namespace: 'ui',
     label: 'Container (Deprecated)',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }
diff --git a/packages/components/src/renderers/basic/icon.tsx b/packages/components/src/renderers/basic/icon.tsx
@@ -75,6 +75,7 @@ IconRenderer.displayName = 'IconRenderer';
 ComponentRegistry.register('icon',
   IconRenderer,
   {
+    namespace: 'ui',
     label: 'Icon',
     icon: 'smile',
     category: 'basic',
diff --git a/packages/components/src/renderers/basic/separator.tsx b/packages/components/src/renderers/basic/separator.tsx
@@ -37,6 +37,7 @@ const SeparatorRenderer = forwardRef<HTMLDivElement, { schema: SeparatorSchema;
 ComponentRegistry.register('separator', 
   SeparatorRenderer,
   {
+    namespace: 'ui',
     label: 'Separator',
     inputs: [
       { 
diff --git a/packages/components/src/renderers/basic/span.tsx b/packages/components/src/renderers/basic/span.tsx
@@ -48,6 +48,7 @@ const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className
 ComponentRegistry.register('span', 
   SpanRenderer,
   {
+    namespace: 'ui',
     label: 'Inline Container (Deprecated)',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }
diff --git a/packages/components/src/renderers/complex/data-table.tsx b/packages/components/src/renderers/complex/data-table.tsx
@@ -600,6 +600,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
 // Register the component
 ComponentRegistry.register('data-table', DataTableRenderer, {
+    namespace: 'ui',
   label: 'Data Table',
   icon: 'table',
   inputs: [
diff --git a/packages/components/src/renderers/data-display/statistic.tsx b/packages/components/src/renderers/data-display/statistic.tsx
@@ -67,6 +67,7 @@ const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
 };
 
 ComponentRegistry.register('statistic', StatisticRenderer, {
+    namespace: 'ui',
   label: 'Statistic',
   category: 'data-display',
   icon: 'Activity',
diff --git a/packages/components/src/renderers/feedback/toast.tsx b/packages/components/src/renderers/feedback/toast.tsx
@@ -21,7 +21,8 @@ ComponentRegistry.register('toast',
                       toast;
       
       toastFn(schema.title || 'Notification', {
-        description: schema.description,
+        namespace: 'ui',
+    description: schema.description,
         duration: schema.duration,
       });
     };
diff --git a/packages/components/src/renderers/feedback/toaster.tsx b/packages/components/src/renderers/feedback/toaster.tsx
@@ -15,6 +15,7 @@ ComponentRegistry.register('toaster',
     return <SonnerToaster />;
   },
   {
+    namespace: 'ui',
     label: 'Toaster',
     inputs: [],
     defaultProps: {}
diff --git a/packages/components/src/renderers/form/button.tsx b/packages/components/src/renderers/form/button.tsx
@@ -41,6 +41,7 @@ ButtonRenderer.displayName = 'ButtonRenderer';
 
 ComponentRegistry.register('button', ButtonRenderer,
   {
+    namespace: 'ui',
     label: 'Button',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', defaultValue: 'Button' },
diff --git a/packages/components/src/renderers/form/input.tsx b/packages/components/src/renderers/form/input.tsx
@@ -63,6 +63,7 @@ const InputRenderer = ({ schema, className, onChange, value, ...props }: { schem
 };
 
 ComponentRegistry.register('input', InputRenderer, {
+    namespace: 'ui',
     label: 'Input Field',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
diff --git a/packages/components/src/renderers/layout/card.tsx b/packages/components/src/renderers/layout/card.tsx
@@ -54,6 +54,7 @@ const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?
 ComponentRegistry.register('card', 
   CardRenderer,
   {
+    namespace: 'ui',
     label: 'Card',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },
diff --git a/packages/components/src/renderers/layout/container.tsx b/packages/components/src/renderers/layout/container.tsx
@@ -77,6 +77,7 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
 ComponentRegistry.register('container', 
   ContainerRenderer,
   {
+    namespace: 'ui',
     label: 'Container',
     inputs: [
       { 
diff --git a/packages/components/src/renderers/layout/page.tsx b/packages/components/src/renderers/layout/page.tsx
@@ -72,6 +72,7 @@ ComponentRegistry.register(
   'page',
   PageRenderer,
   {
+    namespace: 'ui',
     label: 'Page',
     icon: 'Layout',
     category: 'layout',
diff --git a/packages/components/src/renderers/layout/semantic.tsx b/packages/components/src/renderers/layout/semantic.tsx
@@ -38,6 +38,7 @@ tags.forEach(tag => {
   Component.displayName = `Semantic${tag.charAt(0).toUpperCase() + tag.slice(1)}`;
 
   ComponentRegistry.register(tag, Component, {
+    namespace: 'ui',
       label: tag.charAt(0).toUpperCase() + tag.slice(1),
       category: 'layout',
       inputs: [
diff --git a/packages/components/src/renderers/layout/stack.tsx b/packages/components/src/renderers/layout/stack.tsx
@@ -82,6 +82,7 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
 ComponentRegistry.register('stack', 
   StackRenderer,
   {
+    namespace: 'ui',
     label: 'Stack',
     inputs: [
       { 
diff --git a/packages/fields/src/index.tsx b/packages/fields/src/index.tsx
@@ -812,92 +812,92 @@ function createFieldRenderer(FieldWidget: React.ComponentType<any>) {
 
 export function registerFields() {
   // Basic fields - wrapped for documentation compatibility
-  ComponentRegistry.register('text', createFieldRenderer(TextField));
-  ComponentRegistry.register('textarea', createFieldRenderer(TextAreaField));
-  ComponentRegistry.register('number', createFieldRenderer(NumberField));
-  ComponentRegistry.register('boolean', createFieldRenderer(BooleanField));
-  ComponentRegistry.register('select', createFieldRenderer(SelectField));
-  ComponentRegistry.register('date', createFieldRenderer(DateField));
-  ComponentRegistry.register('datetime', createFieldRenderer(DateTimeField));
-  ComponentRegistry.register('time', createFieldRenderer(TimeField));
+  ComponentRegistry.register('text', createFieldRenderer(TextField), { namespace: 'field' });
+  ComponentRegistry.register('textarea', createFieldRenderer(TextAreaField), { namespace: 'field' });
+  ComponentRegistry.register('number', createFieldRenderer(NumberField), { namespace: 'field' });
+  ComponentRegistry.register('boolean', createFieldRenderer(BooleanField), { namespace: 'field' });
+  ComponentRegistry.register('select', createFieldRenderer(SelectField), { namespace: 'field' });
+  ComponentRegistry.register('date', createFieldRenderer(DateField), { namespace: 'field' });
+  ComponentRegistry.register('datetime', createFieldRenderer(DateTimeField), { namespace: 'field' });
+  ComponentRegistry.register('time', createFieldRenderer(TimeField), { namespace: 'field' });
   
   // Contact fields - wrapped for documentation compatibility
-  ComponentRegistry.register('email', createFieldRenderer(EmailField));
-  ComponentRegistry.register('phone', createFieldRenderer(PhoneField));
-  ComponentRegistry.register('url', createFieldRenderer(UrlField));
+  ComponentRegistry.register('email', createFieldRenderer(EmailField), { namespace: 'field' });
+  ComponentRegistry.register('phone', createFieldRenderer(PhoneField), { namespace: 'field' });
+  ComponentRegistry.register('url', createFieldRenderer(UrlField), { namespace: 'field' });
   
   // Specialized fields - wrapped for documentation compatibility
-  ComponentRegistry.register('currency', createFieldRenderer(CurrencyField));
-  ComponentRegistry.register('percent', createFieldRenderer(PercentField));
-  ComponentRegistry.register('password', createFieldRenderer(PasswordField));
-  ComponentRegistry.register('markdown', createFieldRenderer(RichTextField));
-  ComponentRegistry.register('html', createFieldRenderer(RichTextField));
-  ComponentRegistry.register('lookup', createFieldRenderer(LookupField));
-  ComponentRegistry.register('master_detail', createFieldRenderer(MasterDetailField));
+  ComponentRegistry.register('currency', createFieldRenderer(CurrencyField), { namespace: 'field' });
+  ComponentRegistry.register('percent', createFieldRenderer(PercentField), { namespace: 'field' });
+  ComponentRegistry.register('password', createFieldRenderer(PasswordField), { namespace: 'field' });
+  ComponentRegistry.register('markdown', createFieldRenderer(RichTextField), { namespace: 'field' });
+  ComponentRegistry.register('html', createFieldRenderer(RichTextField), { namespace: 'field' });
+  ComponentRegistry.register('lookup', createFieldRenderer(LookupField), { namespace: 'field' });
+  ComponentRegistry.register('master_detail', createFieldRenderer(MasterDetailField), { namespace: 'field' });
   
   // File fields
-  ComponentRegistry.register('file', createFieldRenderer(FileField));
-  ComponentRegistry.register('image', createFieldRenderer(ImageField));
+  ComponentRegistry.register('file', createFieldRenderer(FileField), { namespace: 'field' });
+  ComponentRegistry.register('image', createFieldRenderer(ImageField), { namespace: 'field' });
   
   // Location field
-  ComponentRegistry.register('location', createFieldRenderer(LocationField));
+  ComponentRegistry.register('location', createFieldRenderer(LocationField), { namespace: 'field' });
   
   // Computed/Read-only fields
-  ComponentRegistry.register('formula', createFieldRenderer(FormulaField));
-  ComponentRegistry.register('summary', createFieldRenderer(SummaryField));
-  ComponentRegistry.register('auto_number', createFieldRenderer(AutoNumberField));
+  ComponentRegistry.register('formula', createFieldRenderer(FormulaField), { namespace: 'field' });
+  ComponentRegistry.register('summary', createFieldRenderer(SummaryField), { namespace: 'field' });
+  ComponentRegistry.register('auto_number', createFieldRenderer(AutoNumberField), { namespace: 'field' });
   
   // User fields
-  ComponentRegistry.register('user', createFieldRenderer(UserField));
-  ComponentRegistry.register('owner', createFieldRenderer(UserField));
+  ComponentRegistry.register('user', createFieldRenderer(UserField), { namespace: 'field' });
+  ComponentRegistry.register('owner', createFieldRenderer(UserField), { namespace: 'field' });
   
   // Complex data types
-  ComponentRegistry.register('object', createFieldRenderer(ObjectField));
-  ComponentRegistry.register('vector', createFieldRenderer(VectorField));
-  ComponentRegistry.register('grid', createFieldRenderer(GridField));
+  ComponentRegistry.register('object', createFieldRenderer(ObjectField), { namespace: 'field' });
+  ComponentRegistry.register('vector', createFieldRenderer(VectorField), { namespace: 'field' });
+  ComponentRegistry.register('grid', createFieldRenderer(GridField), { namespace: 'field' });
   
   // NEW: Additional field types from @objectstack/spec
-  ComponentRegistry.register('color', createFieldRenderer(ColorField));
-  ComponentRegistry.register('slider', createFieldRenderer(SliderField));
-  ComponentRegistry.register('rating', createFieldRenderer(RatingField));
-  ComponentRegistry.register('code', createFieldRenderer(CodeField));
-  ComponentRegistry.register('avatar', createFieldRenderer(AvatarField));
-  ComponentRegistry.register('address', createFieldRenderer(AddressField));
-  ComponentRegistry.register('geolocation', createFieldRenderer(GeolocationField));
-  ComponentRegistry.register('signature', createFieldRenderer(SignatureField));
-  ComponentRegistry.register('qrcode', createFieldRenderer(QRCodeField));
+  ComponentRegistry.register('color', createFieldRenderer(ColorField), { namespace: 'field' });
+  ComponentRegistry.register('slider', createFieldRenderer(SliderField), { namespace: 'field' });
+  ComponentRegistry.register('rating', createFieldRenderer(RatingField), { namespace: 'field' });
+  ComponentRegistry.register('code', createFieldRenderer(CodeField), { namespace: 'field' });
+  ComponentRegistry.register('avatar', createFieldRenderer(AvatarField), { namespace: 'field' });
+  ComponentRegistry.register('address', createFieldRenderer(AddressField), { namespace: 'field' });
+  ComponentRegistry.register('geolocation', createFieldRenderer(GeolocationField), { namespace: 'field' });
+  ComponentRegistry.register('signature', createFieldRenderer(SignatureField), { namespace: 'field' });
+  ComponentRegistry.register('qrcode', createFieldRenderer(QRCodeField), { namespace: 'field' });
   
   // Register with field: prefix for explicit field widgets
-  ComponentRegistry.register('field:text', TextField);
-  ComponentRegistry.register('field:textarea', TextAreaField);
-  ComponentRegistry.register('field:number', NumberField);
-  ComponentRegistry.register('field:email', EmailField);
-  ComponentRegistry.register('field:phone', PhoneField);
-  ComponentRegistry.register('field:url', UrlField);
-  ComponentRegistry.register('field:currency', CurrencyField);
-  ComponentRegistry.register('field:percent', PercentField);
-  ComponentRegistry.register('field:password', PasswordField);
-  ComponentRegistry.register('field:date', DateField);
-  ComponentRegistry.register('field:datetime', DateTimeField);
-  ComponentRegistry.register('field:time', TimeField);
-  ComponentRegistry.register('field:lookup', LookupField);
-  ComponentRegistry.register('field:file', FileField);
-  ComponentRegistry.register('field:image', ImageField);
-  ComponentRegistry.register('field:location', LocationField);
-  ComponentRegistry.register('field:user', UserField);
-  ComponentRegistry.register('field:object', ObjectField);
+  ComponentRegistry.register('text', TextField, { namespace: 'field' });
+  ComponentRegistry.register('textarea', TextAreaField, { namespace: 'field' });
+  ComponentRegistry.register('number', NumberField, { namespace: 'field' });
+  ComponentRegistry.register('email', EmailField, { namespace: 'field' });
+  ComponentRegistry.register('phone', PhoneField, { namespace: 'field' });
+  ComponentRegistry.register('url', UrlField, { namespace: 'field' });
+  ComponentRegistry.register('currency', CurrencyField, { namespace: 'field' });
+  ComponentRegistry.register('percent', PercentField, { namespace: 'field' });
+  ComponentRegistry.register('password', PasswordField, { namespace: 'field' });
+  ComponentRegistry.register('date', DateField, { namespace: 'field' });
+  ComponentRegistry.register('datetime', DateTimeField, { namespace: 'field' });
+  ComponentRegistry.register('time', TimeField, { namespace: 'field' });
+  ComponentRegistry.register('lookup', LookupField, { namespace: 'field' });
+  ComponentRegistry.register('file', FileField, { namespace: 'field' });
+  ComponentRegistry.register('image', ImageField, { namespace: 'field' });
+  ComponentRegistry.register('location', LocationField, { namespace: 'field' });
+  ComponentRegistry.register('user', UserField, { namespace: 'field' });
+  ComponentRegistry.register('object', ObjectField, { namespace: 'field' });
   
   // NEW: field: prefix registrations for new widgets
-  ComponentRegistry.register('field:color', ColorField);
-  ComponentRegistry.register('field:slider', SliderField);
-  ComponentRegistry.register('field:rating', RatingField);
-  ComponentRegistry.register('field:code', CodeField);
-  ComponentRegistry.register('field:avatar', AvatarField);
-  ComponentRegistry.register('field:address', AddressField);
-  ComponentRegistry.register('field:geolocation', GeolocationField);
-  ComponentRegistry.register('field:signature', SignatureField);
-  ComponentRegistry.register('field:qrcode', QRCodeField);
-  ComponentRegistry.register('field:master_detail', MasterDetailField);
+  ComponentRegistry.register('color', ColorField, { namespace: 'field' });
+  ComponentRegistry.register('slider', SliderField, { namespace: 'field' });
+  ComponentRegistry.register('rating', RatingField, { namespace: 'field' });
+  ComponentRegistry.register('code', CodeField, { namespace: 'field' });
+  ComponentRegistry.register('avatar', AvatarField, { namespace: 'field' });
+  ComponentRegistry.register('address', AddressField, { namespace: 'field' });
+  ComponentRegistry.register('geolocation', GeolocationField, { namespace: 'field' });
+  ComponentRegistry.register('signature', SignatureField, { namespace: 'field' });
+  ComponentRegistry.register('qrcode', QRCodeField, { namespace: 'field' });
+  ComponentRegistry.register('master_detail', MasterDetailField, { namespace: 'field' });
 }
 
 export * from './widgets/types';

Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,7 @@ ComponentRegistry.register('button-group',`
`47`	`47`	`);`
`48`	`48`	`},`
`49`	`49`	`{`
	`50`	`+ namespace: 'ui',`
`50`	`51`	`label: 'Button Group',`
`51`	`52`	`inputs: [`
`52`	`53`	`{`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?:`
`48`	`48`	`ComponentRegistry.register('div',`
`49`	`49`	`DivRenderer,`
`50`	`50`	`{`
	`51`	`+ namespace: 'ui',`
`51`	`52`	`label: 'Container (Deprecated)',`
`52`	`53`	`inputs: [`
`53`	`54`	`{ name: 'className', type: 'string', label: 'CSS Class' }`
Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,7 @@ IconRenderer.displayName = 'IconRenderer';`
`75`	`75`	`ComponentRegistry.register('icon',`
`76`	`76`	`IconRenderer,`
`77`	`77`	`{`
	`78`	`+ namespace: 'ui',`
`78`	`79`	`label: 'Icon',`
`79`	`80`	`icon: 'smile',`
`80`	`81`	`category: 'basic',`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ const SeparatorRenderer = forwardRef<HTMLDivElement, { schema: SeparatorSchema;`
`37`	`37`	`ComponentRegistry.register('separator',`
`38`	`38`	`SeparatorRenderer,`
`39`	`39`	`{`
	`40`	`+ namespace: 'ui',`
`40`	`41`	`label: 'Separator',`
`41`	`42`	`inputs: [`
`42`	`43`	`{`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className`
`48`	`48`	`ComponentRegistry.register('span',`
`49`	`49`	`SpanRenderer,`
`50`	`50`	`{`
	`51`	`+ namespace: 'ui',`
`51`	`52`	`label: 'Inline Container (Deprecated)',`
`52`	`53`	`inputs: [`
`53`	`54`	`{ name: 'className', type: 'string', label: 'CSS Class' }`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ ComponentRegistry.register('toaster',`
`15`	`15`	`return <SonnerToaster />;`
`16`	`16`	`},`
`17`	`17`	`{`
	`18`	`+ namespace: 'ui',`
`18`	`19`	`label: 'Toaster',`
`19`	`20`	`inputs: [],`
`20`	`21`	`defaultProps: {}`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ ButtonRenderer.displayName = 'ButtonRenderer';`
`41`	`41`
`42`	`42`	`ComponentRegistry.register('button', ButtonRenderer,`
`43`	`43`	`{`
	`44`	`+ namespace: 'ui',`
`44`	`45`	`label: 'Button',`
`45`	`46`	`inputs: [`
`46`	`47`	`{ name: 'label', type: 'string', label: 'Label', defaultValue: 'Button' },`