@cdmbase/wiki-browser 12.0.18-alpha.5

package/lib/templates/content/docs/UI/SchemaBasedUI.md

@@ -0,0 +1,334 @@
+---
+meta:
+    title: Schema Based UI Forms
+    description: Schema Based UI Forms
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Schema Based UI Forms...
+headers:
+    Cache-Control: no-cache
+---
+
+## Schema Based UI Forms
+
+`react-jsonschema-form` is meant to automatically generate a React form based on a JSON Schema. If you want to generate a form for any data, sight unseen, simply given a JSON schema, `react-jsonschema-form` may be for you. If you have a priori knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere.
+
+`react-jsonschema-form` also comes with tools such as `uiSchema` and other form props to customize the look and feel of the form beyond the default themes.
+
+# Usage
+
+```javascript
+import { RJSFSchema } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+const schema: RJSFSchema = {
+    title: 'Todo',
+    type: 'object',
+    required: ['title'],
+    properties: {
+        title: { type: 'string', title: 'Title', default: 'A new task' },
+        done: { type: 'boolean', title: 'Done?', default: false },
+    },
+};
+
+const log = (type) => console.log.bind(console, type);
+
+render(
+    <Form
+        schema={schema}
+        validator={validator}
+        onChange={log('changed')}
+        onSubmit={log('submitted')}
+        onError={log('errors')}
+    />,
+    document.getElementById('app'),
+);
+```
+
+# JSON Schema
+
+JSON Schema is a format for describing the structure and constraints of JSON data, widely used in React JSONSchema Form (rjfs) to define data models and validation rules for forms.
+
+## Basics
+
+- **`type` Property:** Specifies the expected data type, such as `"string"`, `"number"`, `"integer"`, `"boolean"`, `"object"`, or `"array"`.
+
+- **`properties` Property:** Defines fields within an object. Each field is described as a key-value pair, where the key is the field name, and the value is another JSON Schema describing the field.
+
+- **`required` Property:** An array listing fields that must be present in the object.
+
+## Common Constraints
+
+- **Additional Properties:** Various properties like `"minimum"`, `"maximum"`, `"enum"`, etc., can be used to set constraints based on the data type.
+
+## Example Usage
+
+```jsx
+import { render } from 'react-dom';
+import { Form } from '@rjsf/core';
+
+const jsonSchema = {
+    type: 'object',
+    properties: {
+        firstName: { type: 'string' },
+        lastName: { type: 'string' },
+        age: { type: 'integer', minimum: 0 },
+    },
+    required: ['firstName', 'lastName'],
+};
+
+render(<Form schema={jsonSchema} />, document.getElementById('app'));
+```
+
+# UI Schema in JSON Form
+
+The UI Schema in React JSON Form (rjfs) serves as a configuration object, dictating the visual representation and behavior of form elements. It allows for customization of the appearance and functionality of different fields within a form.
+
+```javascript
+const uiSchema = {
+    // ... fields definition
+};
+```
+
+# Structure of the UI Schema
+
+The UI Schema provided organizes the layout and styling for distinct groups of fields related to pricing information within a form.
+
+```javascript
+price: {
+    // ... price-related fields
+},
+additionalPrice: {
+    // ... additional price-related fields
+}
+```
+
+# Fields in UI Schema
+
+Each field in the UI Schema corresponds to a specific data field in the form. Properties associated with these fields control their appearance and behavior.
+
+```javascript
+priceType: { 'ui:colSpan': 5 },
+pricePerGuestEnabled: { 'ui:widget': 'SwitchWidget' },
+```
+
+# Widgets in UI Schema
+
+Widgets specify the type of UI element used to display a particular field, influencing how the input is rendered.
+
+```javascript
+'ui:widget': 'SwitchWidget',
+```
+
+# Templates in UI Schema
+
+Templates enable the customization of the layout and structure for groups of related fields, aiding in organization and styling.
+
+No specific example is provided in the given UI Schema.
+
+# `ui:colSpan` for Input Field Size
+
+The `ui:colSpan` property is utilized to define the size of the input field, indicating the number of columns it should span within the form layout.
+
+```javascript
+'ui:colSpan': 7,
+```
+
+# `ui:field` for Custom Input Components
+
+The `ui:field` property designates a custom input component (widget) for a particular field, allowing for the integration of specialized UI elements.
+
+```javascript
+'ui:colSpan': 6, 'ui:field': 'InputWithDropdown',
+```
+
+# Widget and Field Customization
+
+- **Widget**: Represents an HTML tag for the user to input data (e.g., input, select, etc.).
+
+- **Field**: Typically wraps one or more widgets and often manages internal field state, akin to a form row, including labels.
+
+## Customizing Default Fields and Widgets
+
+You have the flexibility to override any default field and widget, including internal widgets like CheckboxWidget used by ObjectField for boolean values. This can be achieved by providing customized fields and widgets in the `fields` and `widgets` props.
+
+```jsx
+import { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+const schema: RJSFSchema = {
+    type: 'boolean',
+    default: true,
+};
+
+const uiSchema: UiSchema = {
+    'ui:widget': 'checkbox',
+};
+
+const CustomCheckbox = function (props: WidgetProps) {
+    return (
+        <button
+            id="custom"
+            className={props.value ? 'checked' : 'unchecked'}
+            onClick={() => props.onChange(!props.value)}
+        >
+            {String(props.value)}
+        </button>
+    );
+};
+
+const widgets: RegistryWidgetsType = {
+    CheckboxWidget: CustomCheckbox,
+};
+
+render(
+    <Form schema={schema} uiSchema={uiSchema} validator={validator} widgets={widgets} />,
+    document.getElementById('app'),
+);
+```
+
+## Custom Component Registration
+
+Another approach to registering custom components in React JSON Form (rjfs) involves registering them collectively by passing the `widgets` prop to the Form component. The registered components can then be referenced from the `uiSchema`.
+
+```jsx
+import { RJSFSchema, UiSchema, WidgetProps, RegistryWidgetsType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+// Define a custom widget, MyCustomWidget
+const MyCustomWidget = (props: WidgetProps) => {
+    return (
+        <input
+            type="text"
+            className="custom"
+            value={props.value}
+            required={props.required}
+            onChange={(event) => props.onChange(event.target.value)}
+        />
+    );
+};
+
+// Register the custom widget
+const widgets: RegistryWidgetsType = {
+    myCustomWidget: MyCustomWidget,
+};
+
+// Define a schema for a string field
+const schema: RJSFSchema = {
+    type: 'string',
+};
+
+// Reference the custom widget in the uiSchema
+const uiSchema: UiSchema = {
+    'ui:widget': 'myCustomWidget',
+};
+
+// Render the form with the registered custom widget
+render(
+    <Form schema={schema} uiSchema={uiSchema} validator={validator} widgets={widgets} />,
+    document.getElementById('app'),
+);
+```
+
+# Template Customization
+
+## BaseInputTemplate
+
+The `BaseInputTemplate` serves as the template for rendering the basic `<input>` component within a theme in React JSON Form (rjfs). It acts as the foundation for rendering various `<input>`-based widgets that may differ by type and callbacks only.
+
+For example, the `TextWidget` implementation in the core is essentially a wrapper around `BaseInputTemplate`, obtained from the registry. Each theme can implement its own version of `BaseInputTemplate` without requiring a different implementation for `TextWidget`.
+
+If you wish to customize the implementation for `<input>`-based widgets, you can modify this template. For instance, if you have a `CustomTextInput` component that you want to integrate:
+
+```jsx
+import { ChangeEvent, FocusEvent } from 'react';
+import { getInputProps, RJSFSchema, BaseInputTemplateProps } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+import CustomTextInput from '../CustomTextInput';
+
+const schema: RJSFSchema = {
+    type: 'string',
+    title: 'My input',
+    description: 'Input description',
+};
+
+function BaseInputTemplate(props: BaseInputTemplateProps) {
+    const {
+        schema,
+        id,
+        options,
+        label,
+        value,
+        type,
+        placeholder,
+        required,
+        disabled,
+        readonly,
+        autofocus,
+        onChange,
+        onChangeOverride,
+        onBlur,
+        onFocus,
+        rawErrors,
+        hideError,
+        uiSchema,
+        registry,
+        formContext,
+        ...rest
+    } = props;
+    const onTextChange = ({ target: { value: val } }: ChangeEvent<HTMLInputElement>) => {
+        // Use the options.emptyValue if it is specified and newVal is also an empty string
+        onChange(val === '' ? options.emptyValue || '' : val);
+    };
+    const onTextBlur = ({ target: { value: val } }: FocusEvent<HTMLInputElement>) => onBlur(id, val);
+    const onTextFocus = ({ target: { value: val } }: FocusEvent<HTMLInputElement>) => onFocus(id, val);
+
+    const inputProps = { ...rest, ...getInputProps(schema, type, options) };
+    const hasError = rawErrors.length > 0 && !hideError;
+
+    return (
+        <CustomTextInput
+            id={id}
+            label={label}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readonly}
+            autoFocus={autofocus}
+            error={hasError}
+            errors={hasError ? rawErrors : undefined}
+            onChange={onChangeOverride || onTextChange}
+            onBlur={onTextBlur}
+            onFocus={onTextFocus}
+            {...inputProps}
+        />
+    );
+}
+
+render(
+    <Form schema={schema} validator={validator} templates={{ BaseInputTemplate }} />,
+    document.getElementById('app'),
+);
+```
+
+In some cases, you may need to pass additional properties to the existing `BaseInputTemplate`. The approach varies based on whether you are using the core or some other theme, such as mui:
+
+```jsx
+import { BaseInputTemplateProps } from '@rjsf/utils';
+import { getDefaultRegistry } from '@rjsf/core';
+import { Templates } from '@rjsf/mui';
+
+const {
+    templates: { BaseInputTemplate },
+} = getDefaultRegistry(); // To get templates from core
+// const { BaseInputTemplate } = Templates; // To get templates from a theme do this
+
+function MyBaseInputTemplate(props: BaseInputTemplateProps) {
+    const customProps = {};
+    // get your custom props from where you need to
+    return <BaseInputTemplate {...props} {...customProps} />;
+}
+```
+
+For more detailed documentation, you can refer to [React JSONSchema Form Docs](https://rjsf-team.github.io/react-jsonschema-form/docs).

package/lib/templates/content/docs/UI/SlotFillComponent.md

@@ -0,0 +1,334 @@
+# SlotFill Plugin System Documentation
+
+## Overview
+
+The SlotFill Plugin system is a dynamic mechanism used to inject and manage UI components in a highly modularized and pluggable way. This document explains the SlotFill concept, its purpose, how to use it, and provides examples of its implementation.
+
+## What is SlotFill?
+
+The SlotFill system allows developers to define "Slots" in the UI where "Fills" can be dynamically injected. This pattern is commonly used to extend the functionality of an application without directly modifying its core components. Slots act as placeholders, while Fills are the components rendered in those placeholders.
+
+## Key Components
+
+### 1. Slot
+
+A Slot is a placeholder that defines where UI components (Fills) will be rendered.
+
+### 2. Fill
+
+A Fill is the actual UI component that is injected into the Slot.
+
+## Implementation Details
+
+The SlotFill system is implemented using the `@common-stack/components-pro` library, which provides Slot and Fill components.
+
+## Example: Creating a Slot and Fill
+
+Here's an example of creating a Slot and Fill for a dashboard:
+
+```tsx
+import * as React from 'react';
+import { Fill, Slot } from '@common-stack/components-pro';
+import { SlotFillEnum } from 'common';
+
+// Use the generated enum instead of hardcoded strings
+export const DashboardSlot = (props) => {
+    return <Slot name={SlotFillEnum.DASHBOARD_SLOT_FILL} fillProps={{ active: true, ...props }} />;
+};
+
+export const DashboardFill = ({ children, ...rest }) => {
+    return (
+        <Fill {...rest} name={SlotFillEnum.DASHBOARD_SLOT_FILL}>
+            {children}
+        </Fill>
+    );
+};
+```
+
+## Usage Example
+
+To use the DashboardSlot and DashboardFill, follow these steps:
+
+### Step 1: Define the Slot
+
+Include the DashboardSlot component in your application where you want the UI components to appear.
+
+```tsx
+<DashboardSlot />
+```
+
+### Step 2: Create a Fill
+
+Create a UI component that uses the DashboardFill to render its content.
+
+```tsx
+<DashboardFill>
+    <div>Your dynamic content here</div>
+</DashboardFill>
+```
+
+## Advanced SlotFill Integration
+
+For more dynamic use cases, such as integrating with route-based plugins, you can use the WithPluginArea component:
+
+```tsx
+import { RouteBasedPluginArea, registerRouteBasePlugin, unregisterRouteBasePlugin } from '@common-stack/client-react';
+
+export const WithPluginArea = (props: IWithPluginArea): React.ReactElement => {
+    const { baseRoute, fillsToRegister, shouldRenderRoutes = true } = props;
+    const [registerFill, setRegisterFill] = useState<IFill>();
+    const location = useLocation();
+
+    useLayoutEffect(() => {
+        const { pathname } = location;
+        const fillName = pathname.split('/').pop();
+        const fillToRegister = fillsToRegister.find(({ name }) => name === fillName);
+
+        if (fillToRegister) {
+            registerRouteBasePlugin(fillToRegister.name, {
+                ...fillToRegister,
+                render: () => prepareFill(fillToRegister),
+            });
+            setRegisterFill(fillToRegister);
+        }
+
+        return () => {
+            if (registerFill) {
+                unregisterRouteBasePlugin(registerFill.name);
+                setRegisterFill(undefined);
+            }
+        };
+    }, [location]);
+
+    if (!registerFill) {
+        return <></>;
+    }
+
+    return (
+        <>
+            <RouteBasedPluginArea />
+            {shouldRenderRoutes &&
+                fillsToRegister.map((fill) => (
+                    <Route
+                        key={fill.name}
+                        path={`${baseRoute}${fill.name}`}
+                        element={<Slot name={fill.name} fillProps={{ active: true }} />}
+                    />
+                ))}
+        </>
+    );
+};
+```
+
+## Naming Convention and Enum Types
+
+When working with the SlotFill system, it's important to understand the distinction between two different enum types:
+
+1. **SlotFillPluginName**:
+    - Used specifically for plugin identification in Feature components
+    - Ensures uniqueness when multiple features are merged
+    - Used in the `componentFillPlugins` array of a Feature
+
+2. **SlotFillEnum**:
+    - Used for slot and fill name identification
+    - Ensures consistent naming between matching slots and fills
+    - Used in the `name` prop of Slot and Fill components
+
+### Example: Using the Correct Enum Types
+
+```tsx
+// In Feature definition
+import { Feature } from '@common-stack/client-react';
+import { SlotFillPluginName } from 'common';
+import { AsanaIntegrationFill } from './components/Asana/AsanaIntegrationFill';
+
+export default new Feature({
+    componentFillPlugins: [
+        {
+            // Use SlotFillPluginName for unique plugin identification
+            name: SlotFillPluginName.ASANA_INTEGRATION_PLUGIN,
+            render: AsanaIntegrationFill,
+        },
+    ],
+});
+
+// In Slot and Fill components
+import { Slot, Fill } from '@common-stack/components-pro';
+import { SlotFillEnum } from 'common';
+
+// Use SlotFillEnum for Slot name
+export const AsanaIntegrationsSlot = (props) => {
+    return <Slot name={SlotFillEnum.ASANA_INTEGRATION_SLOT_FILL} fillProps={{ active: true, ...props }} />;
+};
+
+// Use matching SlotFillEnum for Fill name to match its slot
+export const AsanaIntegrationFill = ({ children, ...rest }) => {
+    return (
+        <Fill name={SlotFillEnum.ASANA_INTEGRATION_SLOT_FILL} {...rest}>
+            {children}
+        </Fill>
+    );
+};
+```
+
+## Benefits of Using SlotFill
+
+- **Modularity**: Easily extend and modify UI components without changing core code.
+- **Dynamic Loading**: Inject components dynamically based on routes or conditions.
+- **Reusability**: Use the same SlotFill components across different parts of the application.
+
+## Integrating SlotFill with the Feature Component
+
+The `Feature` component allows you to dynamically register components into predefined slots using `componentFillPlugins`. This is used to organize and inject UI components into specific areas defined by the application.
+
+### Purpose
+
+By passing `componentFillPlugins` into a `Feature`, you can dynamically inject components into predefined slots. Each plugin is identified by a unique name and renders a specified component.
+
+### Example: Defining a Feature with Component Fill Plugins
+
+Here's an example of a `Feature` that uses `componentFillPlugins`:
+
+```typescript
+import { Feature } from '@common-stack/client-react';
+import { SlotFillPluginName } from 'common';
+import { AsanaIntegrationFill } from './components/Asana/AsanaIntegrationFill';
+import { PasswordHandlerFill } from './components/Password/PasswordHandlerFill';
+
+export default new Feature({
+    componentFillPlugins: [
+        {
+            name: SlotFillPluginName.ASANA_INTEGRATION_SLOT_FILL,
+            render: AsanaIntegrationFill,
+        },
+        {
+            name: SlotFillPluginName.PASSWORD_HANDLER_SLOT_FILL,
+            render: PasswordHandlerFill,
+        },
+    ],
+});
+```
+
+### Key Points
+
+1. **`componentFillPlugins` Array**:
+    - Each plugin is an object with the following properties:
+        - `name`: A unique identifier for the slot where the component will be injected.
+        - `render`: The React component to render in the slot.
+
+    Example:
+
+    ```typescript
+    {
+        name: SlotFillPluginName.ASANA_INTEGRATION_SLOT_FILL,
+        render: AsanaIntegrationFill,
+    }
+    ```
+
+2. **Predefined Slot Names**:
+    - Slot names like `ASANA_INTEGRATION_SLOT_FILL` are defined in the SlotFillPluginName enum and map to specific areas in the application where components can be injected.
+
+3. **Dynamic Component Injection**:
+    - The `Feature` dynamically registers and renders these components in the corresponding slots at runtime.
+
+### Example: Integration with Slots and Fills
+
+Using SlotFillEnum for slot and fill components:
+
+#### Defining the Slot
+
+```tsx
+import { Slot } from '@common-stack/components-pro';
+import { SlotFillEnum } from 'common';
+
+export const AsanaIntegrationsSlot = (props) => {
+    return <Slot name={SlotFillEnum.ASANA_INTEGRATION_SLOT_FILL} fillProps={{ active: true, ...props }} />;
+};
+```
+
+#### Defining the Fill
+
+```tsx
+import { Fill } from '@common-stack/components-pro';
+import { SlotFillEnum } from 'common';
+
+export const AsanaIntegrationFill = ({ children, ...rest }) => {
+    return (
+        <Fill name={SlotFillEnum.ASANA_INTEGRATION_SLOT_FILL} {...rest}>
+            {children}
+        </Fill>
+    );
+};
+```
+
+## Managing SlotFill Plugin Names with GraphQL Codegen
+
+To ensure that SlotFill plugin names are generated from GraphQL Codegen and added to the `extend enum SlotFillPluginName`, follow these steps:
+
+### Purpose
+
+By centralizing SlotFillPluginName definitions in an extended GraphQL enum, you ensure:
+
+- **Consistency**: All plugin names are defined in one place.
+- **Maintainability**: Developers can easily locate and update plugin names.
+- **Automation**: Plugin names are automatically generated alongside other GraphQL types.
+
+### Implementation Steps
+
+#### 1. Define the SlotFillPluginName Enum in Your GraphQL Schema
+
+Add an enum definition to your GraphQL schema to list all plugin names:
+
+```graphql
+extend enum SlotFillPluginName {
+    DASHBOARD_SLOT_FILL
+    PAYMENT_INTEGRATIONS_SLOT_FILL
+    GITHUB_INTEGRATION_CONFIG_SLOT_FILL
+    # Add other plugin names here
+}
+```
+
+#### 3. Generate Plugin Names Using GraphQL Code Generator
+
+Update your GraphQL Codegen configuration to include the SlotFillPluginName enum in the generated types.
+
+run `yarn generateGraphql`
+
+This will ensure the SlotFillPluginName is included in the generated TypeScript types.
+
+#### 4. Use Generated Enums in Your Codebase
+
+❌ **DO NOT** use hardcoded strings for slot names or plugin identifiers:
+
+```typescript
+// AVOID: Don't use hardcoded strings for slot names
+<Slot name="dashboard-slot-fill" />
+
+// AVOID: Don't use hardcoded strings for plugin names
+componentFillPlugins: [{ name: "dashboard-plugin" }]
+```
+
+✅ **DO** use the generated enum values from GraphQL:
+
+```typescript
+// For Slot and Fill components
+import { SlotFillEnum } from 'common';
+<Slot name={SlotFillEnum.DASHBOARD_SLOT_FILL} />
+
+// For Feature componentFillPlugins
+import { SlotFillPluginName } from 'common';
+componentFillPlugins: [{ name: SlotFillPluginName.DASHBOARD_PLUGIN }]
+```
+
+#### 5. Validate the Centralization
+
+Ensure all plugin names are defined and used through the SlotFillPluginName enum. You can do this by:
+
+- Searching for hardcoded plugin names in your codebase.
+- Replacing them with references to the generated enum.
+
+### Benefits of This Approach
+
+- **Single Source of Truth**: All SlotFill plugin names exist in one place, the GraphQL schema.
+- **Code Quality**: By using enums, you reduce the risk of typos or inconsistencies.
+- **Automation**: GraphQL Codegen ensures enums are up-to-date and accurately represented in your codebase.

package/lib/templates/content/docs/adminide-modules/account/auth0-login.md

@@ -0,0 +1,31 @@
+---
+meta:
+    title: Facebook Setup
+    description: Facebook Setup
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Facebook Setup ...
+headers:
+    Cache-Control: no-cache
+---
+
+# Facebook Setup
+
+Inorder to setup facebook login for application. Following steps should be followed.
+
+1. Login to https://developers.facebook.com
+2. Setup a application by clicking on create new application.
+3. Once setup, Click on Facebook/settings from sidebar.
+4. Set `Embedded Browser OAuth Login` option to true.
+5. Under Valid OAuth Redirect URIs set `https://dev-cdebase.auth0.com/login/callback`
+6. Save the settings.
+7. Copy the client_id and client_secret from Settings/Basic option available in sidebar and setup the integration on auth0 social accounts.
+
+# Troubleshoot
+
+```
+[11:26 PM] Redirect uri should be same on frontend and backend  "AUTH0_NATIVE_REDIRECT_URL":"myapp://redirect",
+Check for AUTH0_NATIVE_CLIENT_ID it should be same on backend and frontend
+Check for AUTH0_TOKEN_GRANTED_TIME and DEFAULT_EXTENDED_RENEWAL_TIME
+Check for AUTH0_CUSTOM_DOMAIN needs to be a valid domain also should be same on frontend and backend`
+```