@pega/custom-dx-components 0.0.1

package/src/tasks/init/template/README.md

@@ -0,0 +1,204 @@
+# Using Custom Components in Constellation
+
+## Overview
+
+This project provides you with an environment to extend Constellation by giving you tools to create and publish custom components that are not available from the Constellation installation.
+
+## Prerequisites
+
+Ensure you have access to the following in your system:
+
+- Pega Infinity Server version 8.7 and above
+
+- Git version 2.30 and above
+
+- System node version 14 and above
+
+- System npm version 6 and above
+
+## Initialize a project
+
+Initialize the project by performing the following procedure in a terminal:
+
+1. Enter the following command to initialize the project.
+`npx @pega/custom-dx-components init`
+
+2. If prompted, enter `y` to install the Custom UI Components package.
+You will then be asked to set up the project by entering the required details.
+
+3. Enter the following details:
+    - Name of the project (required)
+Example - `mycustomcomponents`
+    - Name of the organization  (required)
+Example - `customorg`
+    - Version  (required)
+Example - `1.0.0`
+    - Description of the project (optional)
+Example - `This project is intended to create and publish a custom component.`
+    - Git repository URL (optional)
+Example - `https://git.custom-components.io/custom-cc.git`
+    - Author (optional)
+Example - `Michelle`
+
+The workspace is now set up to create custom components and publish them to the server.
+
+## Create custom components
+
+Create custom components using the following procedure:
+
+1. Enter the following command to create a component:
+`npm run create`
+You will then be asked to enter or review the following details of the component:
+    - Name of the component (required)
+Example - `customcomp0`
+    - Name of component label (required)
+Example - `custom component`
+    - Name of the library (required)
+Example - `basic`
+    - Component version (required)
+Example - `0.0.1`
+    - Type of component (required)
+Example - `Field`
+    - Sub-type of component (required)
+Example - `Text`
+    - Description of the component (optional)
+Example - `This is a customized searchbox that filters data.`
+The component is created in the following path:  _/Users/your_user_name/project_name/src/components/component_name_
+You can also pre-configure the values for the above options in a tasks.config.json file as shown below.
+
+    ```json
+    {
+        "component": {
+            "library": "basic",
+            "type": "field",
+            "subtype": "text",
+            "description": "basic field for capturing textual data",
+            "icon": "basic-field-text.svg"
+        }
+    }
+    ```
+>**Note**:
+Alternatively, you can enter the following command to skip entering the details of the component now and can manually enter the details in the config.json file after the component is created:
+`npm run create <enter_component_name>`
+
+A _src/components_ folder is created and the necessary files required to build the component are initialized as seen below.
+
+    ```sh
+    ├── src
+       ├── components
+            ├── <component_name>
+                ├── index.js
+                ├── demo.stories.js
+                ├── config.json
+    ```
+
+
+The *index.js* file contains the actual component rendering logic.
+The *demo.stories.js* file contains the demo that can be viewed in the storybook.
+The *config.json* file contains the mapping of properties for configuring the auto generated property panel. This property panel appears in AppStudio when an application is being authored to use the custom component.
+
+
+2. Enter the following command to start the storybook to view the demo.
+`npm start`
+
+3. Modify the source files to build your own component. You can also install and import third-party libraries if required for your component.
+
+The custom component is now created. We use the information provided to create uniquely namespaced components in this convention - `<organization>_<library>_<component name>`.
+
+## Authenticate the user
+Before we publish the custom component to the Pega Infinity Server, authenticate the user to access the resources in the Pega Infinity Server.
+
+>**Note**:
+It is required that you configure a value for clientId, clientSecret, and accessTokenUri.
+1. Login to Pega Infinity Server, navigate to Records / Security / OAuth 2.0 Client Registration landing page and open the *DX-CustomComponents* record.
+2. Click **Regenerate Client Secret**, download the Client Credentials (as the Client ID, Client Secret, and Access token endpoint will be needed), and save the record.
+3. Update the the task.config.json file with these downloaded values:
+    ```json
+    "server-config": {
+        "server": "https://127.0.0.1:8080/prweb",
+        "user": "customcomponentoperator",
+        "password": "pwd",
+        "clientId": "<mention client ID here>",
+        "clientSecret": "<mention client secret here>",
+        "accessTokenUri": "https://127.0.0.1:8080/prweb/PRRestService/oauth2/v1/token"
+    },
+    ```
+4. Enter the following command to initiate authentication.
+`npm run authenticate`
+
+The user is now authenticated and can proceed to either publish or list the components.
+
+## Publish custom components
+Enter the following command to publish custom components to Pega Infinity Server:
+`npm run publish`
+Publish the finalized custom components changes to Pega Infinity Server so that it can be discoverable in authoring (design palette).
+You will then be asked to enter the following details:
+
+- The component to be published to Pega Infinity Server. It will be updated if the component exists.
+- The name of the ruleset where the component must be published.
+- The version of the ruleset where the component must be published.
+- Specify if the development build should be generated for debugging.
+You can also pre-configure the values for the above options in a tasks.config.json file as shown below. The server, user name, and password must be pre-configured.
+
+    ```json
+    {
+        "components-server-config": {
+            "server": "http://127.0.0.1:8080/prweb",
+            "user": "customcomponentoperator",
+            "password": "pwd"
+            "rulesetName": "TestPega-C11nGall",
+            "rulesetVersion": "01-01-03",
+            "sourceOfComponents": "Server",
+            "devBuild": false,
+        }
+    }
+    ```
+    When the component is successfully published, you can use the newly published component in App Studio's view authoring.
+
+
+>**Note**:
+The Rule-UI-Component instance (with component name) is created on the Pega Infinity Server after publishing the component.
+
+## List custom components
+View the available components in the local machine or the server.
+
+Enter the following command to list custom components:
+`npm run list`
+
+You will then be asked to enter the following details:
+
+- List components from Server or Local?
+Example - `Server`
+
+The custom components will now be listed in the terminal.
+
+## Delete custom components
+Delete the available or published components in the local machine or the server.
+
+Enter the following command to delete custom components:
+`npm run delete`
+
+You will then be asked to enter the following details:
+
+- Delete components from Server or Local?
+Example - `Local`
+
+- Select component to delete
+The list of available components in the following path will be displayed:  _/Users/your_user_name/project_name/src/components
+Select the component to be deleted from this list.
+
+- Are you sure?
+Example - `yes`
+
+>**Note**:
+If you choose to delete components from the server, the successfully published components along with their ruleset name and ruleset version from the Pega Infinity Server will be displayed. Select the component to be deleted from this list.
+
+## View existing custom components in storybook
+View custom components in a storybook by performing the following procedure:
+1. Enter the following command to open the project.
+`cd <enter your project's name>`
+
+2. Enter the following command to start the storybook in development mode.
+`npm start`
+
+The storybook is launched in a browser where you can view the components working in isolation.

package/src/tasks/init/template/build.config.json

@@ -0,0 +1 @@
+{}

package/src/tasks/init/template/cspell.json

@@ -0,0 +1,14 @@
+{
+  "version": "0.2",
+  "import": "@pega/cspell-config",
+  "language": "en-US",
+  "ignorePaths": [
+    "package-lock.json",
+    "**/*.tsbuildinfo",
+    "**/node_modules/**",
+    "lib",
+    "**/.DS_Store",
+    "**/*.zip",
+    "**/*.tgz"
+  ]
+}

package/src/tasks/init/template/package.json.mustache

@@ -0,0 +1,69 @@
+{
+  "name": "{{projectName}}",
+  "version": "{{version}}",
+  "description": "{{description}}",
+  "organization": "{{organization}}",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "start-storybook --port 6040 --quiet",
+    "build": "tsc -b tsconfig.build.json",
+    "lint": "run-p -cl lint:*",
+    "fix": "run-p -cl fix:*",
+    "authenticate": "custom-dx-components authenticate",
+    "create": "custom-dx-components create",
+    "publish": "custom-dx-components publish",
+    "list": "custom-dx-components list",
+    "validate-schema": "custom-dx-components validateSchema",
+    "update": "custom-dx-components update",
+    "delete": "custom-dx-components delete",
+    "lint:types": "tsc --noEmit",
+    "lint:es": "eslint .",
+    "lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
+    "lint:format": "prettier -c .",
+    "lint:spelling": "cspell --no-progress **/*",
+    "fix:es": "eslint --fix .",
+    "fix:format": "prettier -w ."
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "pega"
+  ],
+  "author": "",
+  "license": "Enter License",
+  "sideEffects": false,
+  "dependencies": {
+    "@pega/cosmos-react-core": "^3.0.0-dev.3.0",
+    "polished": "^4.1.4",
+    "react": "^17.0.2",
+    "react-autosuggest": "^10.1.0",
+    "react-dom": "^17.0.2",
+    "react-player": "^2.9.0",
+    "styled-components": "^5.3.3",
+    "prop-types": "^15.8.1",
+    "@storybook/addon-knobs": "^6.3.1"
+  },
+  "devDependencies": {
+    "@pega/configs": "^0.3.2",
+    "@pega/custom-dx-components": "^0.0.1",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@types/emoji-mart": "^3.0.9",
+    "@types/react": "^17.0.39",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.22",
+    "eslint": "^8.9.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "2.5.1",
+    "stylelint": "^14.5.1",
+    "typescript": "~4.5.5"
+  }
+}

package/src/tasks/init/template/src/components/MBTAList/MBTAList.stories.tsx

@@ -0,0 +1,10 @@
+import MBTAListComp from './MBTAList';
+
+export default {
+  title: 'MBTAList',
+  component: MBTAListComp
+};
+
+export const MBTAList = () => {
+  return <MBTAListComp />;
+};

package/src/tasks/init/template/src/components/MBTAList/MBTAList.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState, useContext } from 'react';
+import {
+  Flex,
+  SummaryList,
+  SummaryListItem,
+  ViewAll,
+  ModalManagerContext,
+  Modal,
+  registerIcon,
+  Icon,
+  MetaList,
+  MetaListProps
+} from '@pega/cosmos-react-core';
+
+import * as accessibleIcon from './icons/accessible.icon';
+import * as busIcon from './icons/bus.icon';
+import * as mbtaIcon from './icons/mbta.icon';
+import * as subwayIcon from './icons/subway.icon';
+
+registerIcon(accessibleIcon, busIcon, mbtaIcon, subwayIcon);
+
+export interface MBTAListProps {}
+
+const params = new URLSearchParams([
+  ['page[offset]', '0'],
+  ['page[limit]', '1000'],
+  ['filter[latitude]', '42.362339984866466'],
+  ['filter[longitude]', '-71.07999650212442'],
+  ['filter[radius]', '0.01'],
+  ['filter[route_type]', '1,3']
+]);
+
+const MBTAList = (props: MBTAListProps) => {
+  const [items, setItems] = useState<SummaryListItem[]>();
+  const [error, setError] = useState<string>();
+  const { create } = useContext(ModalManagerContext);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    fetch(`https://api-v3.mbta.com/stops?${params}`, { signal: controller.signal })
+      .then(async res => {
+        if (!res.ok) throw new Error(`Responded with "${res.status}"`);
+
+        const { data } = await res.json();
+        if (controller.signal.aborted) return;
+
+        setItems(
+          // TODO: Type the api response: https://api-v3.mbta.com/docs/swagger/index.html#/Stop/ApiWeb_StopController_index
+          data.map(({ id, attributes }: any) => {
+            const meta: MetaListProps['items'] = [];
+
+            if (attributes.wheelchair_boarding) {
+              meta.push(
+                <>
+                  <Icon name='accessible' style={{ width: '1em', height: '1em' }} />
+                  &nbsp;Wheelchair boarding
+                </>
+              );
+            }
+
+            if (attributes.vehicle_type === 1) {
+              meta.push(attributes.platform_name);
+              return {
+                id,
+                visual: <Icon name='subway' />,
+                primary: attributes.name,
+                secondary: <MetaList items={meta} />
+              };
+            }
+
+            meta.push(attributes.name);
+            return {
+              id,
+              visual: <Icon name='bus' />,
+              primary: attributes.on_street,
+              secondary: <MetaList items={meta} />
+            };
+          })
+        );
+      })
+      .catch((err: unknown) => {
+        if (controller.signal.aborted) return;
+
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError('An error occurred.');
+        }
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, []);
+
+  return (
+    <SummaryList
+      {...props}
+      icon='mbta'
+      name='Stops near Pega'
+      count={items?.length}
+      items={items?.slice(0, 3) ?? []}
+      loading={!items && !error}
+      error={error ? { message: error } : undefined}
+      onViewAll={() => {
+        create(Modal, {
+          heading: (
+            <Flex container={{ gap: 1, alignItems: 'center' }}>
+              <Icon name='mbta' />
+              Stops near Pega
+            </Flex>
+          ),
+          count: items?.length,
+          children: <ViewAll items={items ?? []} />
+        });
+      }}
+    />
+  );
+};
+
+export default MBTAList;

package/src/tasks/init/template/src/components/MBTAList/icons/accessible.icon.tsx

@@ -0,0 +1,14 @@
+// FontAwesome "accessible" icon
+// https://fontawesome.com/license
+// Converted from SVG to Cosmos Icon format
+
+export const name = 'accessible';
+
+export const Component = () => (
+  <path
+    fill='currentColor'
+    d='M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z'
+  />
+);
+
+export const viewBox = '0 0 448 512';

package/src/tasks/init/template/src/components/MBTAList/icons/bus.icon.tsx

@@ -0,0 +1,13 @@
+export const name = 'bus';
+
+export const Component = () => (
+  <>
+    <path d='m12.06 24c6.72-.17 12.11-5.64 11.94-12.06a12 12 0 1 0 -11.94 12.06' fill='#ffc72c' />
+    <path
+      d='m18.78 10.67-.66-5.17c-.16-.93-.75-1.3-1.63-1.68a14.25 14.25 0 0 0 -4.49-.82 14.32 14.32 0 0 0 -4.5.82c-.86.37-1.45.75-1.63 1.68l-.66 5.17v7.15h1.17v1.25a1 1 0 0 0 1.91 0v-1.25h7.45v1.25a.91.91 0 0 0 .48.8 1 1 0 0 0 1 0 .88.88 0 0 0 .47-.8v-1.25h1.13zm-9.57-6.36h5.61a.42.42 0 0 1 .43.41.42.42 0 0 1 -.43.42h-5.61a.43.43 0 0 1 -.43-.42.42.42 0 0 1 .43-.41zm-2.79 6.21.58-4.09a.54.54 0 0 1 .51-.43h9.06a.56.56 0 0 1 .54.44l.54 4.09a.33.33 0 0 1 0 .14.49.49 0 0 1 -.16.37.54.54 0 0 1 -.38.15h-10.17a.56.56 0 0 1 -.38-.19.57.57 0 0 1 -.14-.38.33.33 0 0 1 0-.1zm.92 5.09a1 1 0 1 1 1-1 1 1 0 0 1 -.3.7 1 1 0 0 1 -.7.3zm9.36 0a1 1 0 1 1 1-1 1 1 0 0 1 -.3.7 1.06 1.06 0 0 1 -.72.29z'
+      fill='#1c1e23'
+    />
+  </>
+);
+
+export const viewBox = '0 0 24 24';

package/src/tasks/init/template/src/components/MBTAList/icons/mbta.icon.tsx

@@ -0,0 +1,10 @@
+export const name = 'mbta';
+
+export const Component = () => (
+  <>
+    <circle cx='250' cy='250' r='239' stroke='#000' strokeWidth='22' fill='#fff' />
+    <path d='M92,138.5h316v79.5h-118.25v194h-79.5v-194h-118.25z' />
+  </>
+);
+
+export const viewBox = '0 0 500 500';

package/src/tasks/init/template/src/components/MBTAList/icons/subway.icon.tsx

@@ -0,0 +1,14 @@
+export const name = 'subway';
+
+export const Component = () => (
+  <>
+    <path d='m24 0a24 24 0 1 0 24 24 24 24 0 0 0 -24-24' fill='#494f5b' />
+    <g fill='#fff'>
+      <path d='m25.8889 5.8222a1.4111 1.4111 0 1 0 -1.4111-1.4111 1.411 1.411 0 0 0 1.4111 1.4111z' />
+      <path d='m31.4555 34.2111a4.9779 4.9779 0 0 0 3.889-4.8222v-18.1445a5.0112 5.0112 0 0 0 -5.0778-4.9111h-12.5333a5.0112 5.0112 0 0 0 -5.1 4.9v18.1556a4.9779 4.9779 0 0 0 3.8889 4.8222l-5.8556 8.7889h3.4l4.1889-6.1445h11.5555l4.1889 6.1445h3.3333zm-10.7555-25.9889a.8445.8445 0 0 1 .8445-.8111h4.9555a.8444.8444 0 0 1 .8333.8111v1.4445l-.0006.0339a.8334.8334 0 0 1 -.866.7994l-4.9222-.0111a.8333.8333 0 0 1 -.8445-.8222zm-3.1111 23.3334a2.2223 2.2223 0 1 1 2.2222-2.2223 2.2223 2.2223 0 0 1 -2.2222 2.2223zm.2889-11.8112c-.0758.0036-.1518.0036-.2276 0a2.4221 2.4221 0 0 1 -2.3057-2.5333v-3.2667a2.4109 2.4109 0 0 1 2.5333-2.5444h12.2222a2.4113 2.4113 0 0 1 2.5333 2.5444v3.2667q.0054.1137 0 .2276a2.4221 2.4221 0 0 1 -2.5333 2.3057zm12.4333 11.8112a2.2334 2.2334 0 1 1 .0223 0z' />
+      <path d='m22.1445 5.8222h-.0334.0337a1.4113 1.4113 0 1 0 -1.4115-1.4115 1.4111 1.4111 0 0 0 1.4115 1.4119z' />
+    </g>
+  </>
+);
+
+export const viewBox = '0 0 48 48';

package/src/tasks/init/template/src/components/MBTAList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MBTAList';
+export type { MBTAListProps } from './MBTAList';

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, Story } from '@storybook/react';
+
+import MediaURLInput from './MediaURLInput';
+import MediaURLDisplay from './MediaURLDisplay';
+
+export default {
+  title: 'MediaURL',
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta;
+
+export const InputMode: Story = () => {
+  return <MediaURLInput label='Media src url' />;
+};
+
+export const DisplayMode: Story = () => {
+  return <MediaURLDisplay value='https://youtu.be/BxogmCLpy0w' />;
+};

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.styles.ts

@@ -0,0 +1,5 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css``;
+});

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.types.ts

@@ -0,0 +1,10 @@
+import type { FormControlProps, OmitStrict, URLDisplayProps } from '@pega/cosmos-react-core';
+
+export interface MediaURLInputProps extends OmitStrict<FormControlProps, 'defaultValue'> {
+  testId?: string;
+}
+
+export interface MediaURLDisplayProps extends OmitStrict<URLDisplayProps, 'variant' | 'ref'> {
+  variant?: 'player' | URLDisplayProps['variant'];
+  testId?: string;
+}

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURLDisplay.tsx

@@ -0,0 +1,25 @@
+import type { FunctionComponent } from 'react';
+import { URLDisplay } from '@pega/cosmos-react-core';
+import ReactPlayer from 'react-player';
+
+import StyledMediaURLDisplay from './MediaURL.styles';
+import type { MediaURLDisplayProps } from './MediaURL.types';
+
+const MediaURLDisplay: FunctionComponent<MediaURLDisplayProps> = ({
+  value,
+  variant = 'player',
+  testId,
+  ...restProps
+}) => {
+  if ((!value && variant !== 'player') || variant !== 'player') {
+    return <URLDisplay value={value} variant={variant} {...restProps} />;
+  }
+
+  return (
+    <StyledMediaURLDisplay data-testid={testId}>
+      <ReactPlayer url={value} />
+    </StyledMediaURLDisplay>
+  );
+};
+
+export default MediaURLDisplay;

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURLInput.tsx

@@ -0,0 +1,24 @@
+import { ChangeEvent, FunctionComponent, useState } from 'react';
+import { Input } from '@pega/cosmos-react-core';
+
+import type { MediaURLInputProps } from './MediaURL.types';
+
+const MediaURLInput: FunctionComponent<MediaURLInputProps> = ({
+  value,
+  ...restProps
+}: MediaURLInputProps) => {
+  const [url, setURL] = useState(value);
+
+  return (
+    <Input
+      {...restProps}
+      type='url'
+      value={url}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        setURL(e.target.value);
+      }}
+    />
+  );
+};
+
+export default MediaURLInput;

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/config.json

@@ -0,0 +1,13 @@
+{
+  "name": "Organization_Library_MediaURL",
+  "label": "MediaURL",
+  "description": "A pair of components for taking input and displaying teh value of a video or audio url.",
+  "organization": "TBD",
+  "version": "0.0.1",
+  "library": "TBD",
+  "componentKey": "Organization_Library_MediaURL",
+  "type": "Field",
+  "subtype": "Text",
+  "icon": "TBD",
+  "properties": ["TBD"]
+}

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/index.ts

@@ -0,0 +1,2 @@
+export { default as MediaURLInput } from './MediaURLInput';
+export { default as MediaURLDisplay } from './MediaURLDisplay';

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/config.json

@@ -0,0 +1,44 @@
+{
+  "name": "Organization_Library_VideoPlayer",
+  "label": "Video Player",
+  "description": "video player",
+  "organization": "apple",
+  "version": "0.0.1",
+  "library": "basic",
+  "componentKey": "Organization_Library_VideoPlayer",
+  "type": "Field",
+  "subtype": "Text",
+  "icon": "images/pz-text-input-active.svg",
+  "properties": [
+    {
+      "name": "value",
+      "label": "Property",
+      "format": "PROPERTY"
+    },
+    {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "name": "placeholder",
+      "label": "Placeholder",
+      "format": "TEXT"
+    },
+    {
+      "name": "visibility",
+      "label": "Visible",
+      "format": "VISIBILITY"
+    },
+    {
+      "name": "disabled",
+      "label": "Disabled",
+      "format": "DISABLED"
+    },
+    {
+      "name": "required",
+      "label": "Required",
+      "format": "REQUIRED"
+    }
+  ]
+}