feat: Add components categories

docs/src/pages/components/actionable.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/actionable.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic", "interaction" ]
+};
 
 This component makes its child actionable based on the defined properties.
 

docs/src/pages/components/button.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/button.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form", "interaction" ]
+};
 
 This is the button component.
 

docs/src/pages/components/checkbox.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/checkbox.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form" ]
+};
 
 This component provides a toggleable checkbox with several presentation options.
 

docs/src/pages/components/container.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/container.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic", "layout" ]
+};
 
 The container component that can be used to apply border, padding, constraints or decoration to its child.
 

docs/src/pages/components/dropdownButton.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/dropdownButton.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "interaction" ]
+};
 
 A dropdown button that can be used to open a dropdown menu when clicked.
 

docs/src/pages/components/flex.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/flex.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic", "layout" ]
+};
 
 The Flex component is a container that displays its children in a row or column.
 

docs/src/pages/components/flexible.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/flexible.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic", "layout" ]
+};
 
 The Flexible component can be used to define the way in which its child flexes.
 

docs/src/pages/components/form.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/form.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form" ]
+};
 
 The Form component is a container that dispatches an event with all its containing field values.
 

docs/src/pages/components/icon.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/icon.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic" ]
+};
 
 All of the possible values for the icon come from the [material design icons](https://api.flutter.dev/flutter/material/Icons-class.html#constants).
 

docs/src/pages/components/image.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/image.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic" ]
+};
 
 This component can be used to load an image online or directly from the application.
 

docs/src/pages/components/menu.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/menu.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "interaction" ]
+};
 
 This component is meant to be used along with the `menuItem` component because there is no real interest of using it alone.
 

docs/src/pages/components/menuItem.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/menuItem.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "interaction" ]
+};
 
 This component is made to be used with the `menu` component. This will ensure that the styling is correct and that the menu items are properly sized.
 

docs/src/pages/components/overlayEntry.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/overlayEntry.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "layout" ]
+};
 
 This component is used to create an **overlay** that shows itself over the current application's UI. For example, it might be interesting to use it when displaying errors in a snackbar.
 

docs/src/pages/components/radio.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/radio.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form", "interaction" ]
+};
 
 This component is basically a radio component as you might know it from other frameworks.
 

docs/src/pages/components/slider.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/slider.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form", "interaction" ]
+};
 
 The slider component can be used to select from a **range** of values.
 

docs/src/pages/components/stack.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/stack.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "layout" ]
+};
 
 This component is used to make its children overlap. This is particularly interesting when building complex views that needs to put some content above an image or for styling some views.
 The first child in the list will be in the background while the last child of the list will be in the foreground of the stack.

docs/src/pages/components/statusSticker.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/statusSticker.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: []
+};
 
 This component is a status based sticker. It can take 4 different statuses, `success`, `warning`, `error` and `pending`
 

docs/src/pages/components/text.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/text.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic" ]
+};
 
 This is a typical text component.
 

docs/src/pages/components/textfield.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/textfield.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form", "interaction" ]
+};
 
 This component gives the possibility to the user to write text.
 

docs/src/pages/components/toggle.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/toggle.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "form", "interaction" ]
+};
 
 This component can be toggled on or off.
 

docs/src/pages/components/view.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/view.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "basic", "layout" ]
+};
 
 This component calls a view defined in the application. This can be used to create reusable views across the application and call them from anywhere.
 

docs/src/pages/components/wrap.mdx

@@ -2,7 +2,10 @@ import PropertyTable from '../../components/propertyTable';
 import CodeBlock from '../../components/codeBlock';
 import schema from '../../../../api/components/wrap.schema.json';
 import {jsonData} from '../../utils';
-export const json = jsonData(schema);
+export const json = {
+ ...jsonData(schema),
+ categories: [ "layout" ]
+};
 
 This component can be used to display a long list of components, if they get out of the screen the wrap component will make the overflowing ones use a new row.