From 6d3f013980f3ac6fcd3cad491fc847875f149e90 Mon Sep 17 00:00:00 2001
From: "Adnan.qaops" <adnan.qaops@gmail.com>
Date: Fri, 15 Nov 2024 11:14:30 +0500
Subject: [PATCH] Added examples for Existing Components - Demo

---
 .../examples/ButtonComp/Button.tsx            |  1 +
 .../examples/ButtonComp/DropDownButton.tsx    | 37 +--------
 .../examples/CalendarInputComp/Date.tsx       |  3 +
 .../examples/CalendarInputComp/DateRange.tsx  | 33 ++++++++
 .../examples/CalendarInputComp/Time.tsx       | 32 ++++++++
 .../examples/CalendarInputComp/TimeRange.tsx  | 26 +++++++
 .../examples/numberInputComp/NumberInput.tsx  | 19 +++++
 .../examples/numberInputComp/RangeSlider.tsx  | 14 ++++
 .../examples/numberInputComp/Rating.tsx       | 20 ++---
 .../examples/numberInputComp/Slider.tsx       | 12 +++
 .../examples/presentationComp/divider.tsx     | 10 ++-
 .../examples/selectInputComp/MultiSelect.tsx  | 14 ++++
 .../examples/selectInputComp/Select.tsx       | 14 ++++
 .../examples/textInputComp/Input.tsx          | 77 +++++++++++++++++++
 .../examples/textInputComp/Password.tsx       | 28 +++++++
 .../examples/textInputComp/RichTextEditor.tsx | 48 +++++++++++-
 .../examples/textInputComp/TextArea.tsx       | 24 ++++++
 17 files changed, 365 insertions(+), 47 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx
index 463033c64..115ea9122 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx
@@ -29,6 +29,7 @@ export default function ButtonExample() {
           compFactory={ButtonComp}
         />
       </ExampleGroup>
+      
       <ExampleGroup title={trans("componentDoc.style")}>
         <Example
           title={trans("componentDoc.danger")}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx
index fcaea7106..57bb20afe 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx
@@ -43,18 +43,6 @@ export default function DropdownExample() {
           blackListConfig={blackListConfig}
           compFactory={DropdownComp}
         />
-        <Example
-          title={trans("componentDoc.loading")}
-          width={120}
-          config={{
-            type: "default",
-            text: trans("componentDoc.menu"),
-            loading: true,
-            options: options,
-          }}
-          blackListConfig={blackListConfig}
-          compFactory={DropdownComp}
-        />
         <Example
           title={trans("componentDoc.disabled")}
           width={120}
@@ -68,31 +56,8 @@ export default function DropdownExample() {
           compFactory={DropdownComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.style")}>
-        <Example
-          title={trans("componentDoc.danger")}
-          width={120}
-          config={{
-            style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#e0ecf6" },
-          }}
-          compFactory={DropdownComp}
-        />
-        <Example
-          title={trans("componentDoc.warning")}
-          width={120}
-          config={{
-            style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
-          }}
-          compFactory={DropdownComp}
-        />
-        <Example
-          title={trans("componentDoc.success")}
-          width={120}
-          config={{
-            style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#e0ecf6" },
-          }}
-          compFactory={DropdownComp}
-        />
         <Example
           title={trans("componentDoc.onlyMenu")}
           width={120}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx
index f4e622f30..c58a54332 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx
@@ -29,6 +29,7 @@ export default function DateExample() {
           config={{
             value: trans("componentDoc.noValue"),
             format: "YYYY-MM-DD",
+            placeholder: "Select Date",
             disabled: false,
             label: {
               text: trans("componentDoc.date"),
@@ -51,6 +52,7 @@ export default function DateExample() {
           compFactory={DatePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -101,6 +103,7 @@ export default function DateExample() {
           compFactory={DatePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx
index e80197133..ff2821dcb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx
@@ -72,6 +72,7 @@ export default function DateRangeExample() {
           compFactory={DateRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -132,6 +133,7 @@ export default function DateRangeExample() {
           compFactory={DateRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -164,6 +166,37 @@ export default function DateRangeExample() {
           blackListConfig={blackListConfig.slice(0, 3)}
           compFactory={DateRangeComp}
         />
+        <Example
+          title="Show Time"
+          config={{
+            required: true,
+            showTime: true,
+            label: {
+              text: trans("componentDoc.date"),
+              position: "column",
+              align: "left",
+            },
+          }}
+          nameMap={nameMap}
+          blackListConfig={blackListConfig.slice(0, 3)}
+          compFactory={DateRangeComp}
+        />
+        <Example
+          title="Show Time ( 12 hours format )"
+          config={{
+            required: true,
+            showTime: true,
+            use12Hours: true,
+            label: {
+              text: trans("componentDoc.date"),
+              position: "column",
+              align: "left",
+            },
+          }}
+          nameMap={nameMap}
+          blackListConfig={blackListConfig.slice(0, 3)}
+          compFactory={DateRangeComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx
index f22bab5a8..efb8b6b30 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx
@@ -29,6 +29,7 @@ export default function TimeExample() {
           config={{
             value: trans("componentDoc.noValue"),
             format: "hh:mm:ss",
+            placeholder: "Select Time",
             disabled: false,
             label: {
               text: trans("componentDoc.time"),
@@ -51,6 +52,7 @@ export default function TimeExample() {
           compFactory={TimePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -101,6 +103,7 @@ export default function TimeExample() {
           compFactory={TimePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -126,6 +129,35 @@ export default function TimeExample() {
           blackListConfig={blackListConfig}
           compFactory={TimePickerComp}
         />
+        <Example
+          title="Time Steps"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "10",
+            secondStep: "30",
+            label: {
+              text: trans("componentDoc.time"),
+            },
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimePickerComp}
+        />
+        <Example
+          title= "Show Time ( 12 Hours format )"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "10",
+            secondStep: "30",
+            use12Hours: true,
+            label: {
+              text: trans("componentDoc.time"),
+            },
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimePickerComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx
index 0eae681fa..93d319b0e 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx
@@ -37,6 +37,7 @@ export default function TimeRangeExample() {
           title={trans("componentDoc.noDefaultValue")}
           config={{
             format: "hh:mm:ss",
+            placeholder: "Select Time",
             disabled: false,
             label: {
               text: trans("componentDoc.time"),
@@ -64,6 +65,7 @@ export default function TimeRangeExample() {
           compFactory={TimeRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -120,6 +122,7 @@ export default function TimeRangeExample() {
           compFactory={TimeRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -150,6 +153,29 @@ export default function TimeRangeExample() {
           blackListConfig={blackListConfig}
           compFactory={TimeRangeComp}
         />
+        <Example
+          title="Time Steps"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "5",
+            secondStep: "15",
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimeRangeComp}
+        />
+        <Example
+          title="Show Time ( 12 hours format )"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "5",
+            secondStep: "15",
+            use12Hours: true,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimeRangeComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx
index 67c1fb4f7..27745477d 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx
@@ -54,6 +54,7 @@ export default function NumberInputExample() {
           compFactory={NumberInputComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.format")} description="">
         <Example
           title={trans("componentDoc.percent")}
@@ -79,7 +80,25 @@ export default function NumberInputExample() {
           }}
           compFactory={NumberInputComp}
         />
+        <Example
+          title="Step"
+          config={{
+            value: "1",
+            step: "10",
+          }}
+          compFactory={NumberInputComp}
+        />
+        <Example
+          title="Hide Increment/Decrement buttons"
+          config={{
+            value: "1",
+            step: "10",
+            controls: false,
+          }}
+          compFactory={NumberInputComp}
+        />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.mostValue")}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
index 873f27522..66d448281 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
@@ -36,6 +36,20 @@ export default function RangeSliderExample() {
           }}
           compFactory={RangeSliderComp}
         />
+        <Example
+          title={trans("componentDoc.default")}
+          config={{
+            value: "60",
+            disabled: "false",
+            start: "10",
+            end: "70",
+            min: "0",
+            max: "100",
+            step: "10",
+            vertical: true,
+          }}
+          compFactory={RangeSliderComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx
index 6e5dab2fb..540602bf5 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx
@@ -16,7 +16,7 @@ export default function RatingExample() {
         <Example
           title={trans("componentDoc.default")}
           config={{
-            value: "4",
+            defaultValue: "4",
             disabled: "false",
           }}
           compFactory={RatingComp}
@@ -25,7 +25,7 @@ export default function RatingExample() {
           title={trans("componentDoc.notSelect")}
           config={{
             disabled: "false",
-            value: "0",
+            defaultValue: "0",
           }}
           compFactory={RatingComp}
         />
@@ -33,7 +33,7 @@ export default function RatingExample() {
           title={trans("componentDoc.disabled")}
           config={{
             disabled: "true",
-            value: "4",
+            defaultValue: "2",
           }}
           compFactory={RatingComp}
         />
@@ -48,7 +48,7 @@ export default function RatingExample() {
               position: "row",
               align: "left",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
@@ -60,7 +60,7 @@ export default function RatingExample() {
               position: "row",
               align: "right",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
@@ -72,7 +72,7 @@ export default function RatingExample() {
               position: "column",
               align: "left",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
@@ -84,16 +84,17 @@ export default function RatingExample() {
               position: "column",
               align: "right",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.style")}>
         <Example
           title={trans("componentDoc.maxRating")}
           config={{
-            value: "4",
+            defaultValue: "4",
             max: "6",
           }}
           nameMap={nameMap}
@@ -102,7 +103,8 @@ export default function RatingExample() {
         <Example
           title={trans("componentDoc.halfSelect")}
           config={{
-            value: "4.5",
+            max: "6",
+            defaultValue: "3.5",
             allowHalf: "true",
           }}
           compFactory={RatingComp}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
index c35002b9e..24fbdbf66 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
@@ -32,6 +32,18 @@ export default function SliderExample() {
           }}
           compFactory={SliderComp}
         />
+        <Example
+          title={trans("componentDoc.default")}
+          config={{
+            value: "60",
+            disabled: "false",
+            min: "0",
+            max: "100",
+            step: "10",
+            vertical: true,
+          }}
+          compFactory={SliderComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
index a4c131d9c..282ea94bc 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
@@ -16,7 +16,13 @@ export default function DividerExample() {
         title={trans("componentDoc.basicUsage")}
         description={trans("componentDoc.basicDemoDescription")}
       >
-        <Example title="" hideSettings={true} config={{}} compFactory={DividerComp} />
+      <Example 
+        title="" 
+        config={{
+          style: {borderWidth: "2px"},
+        }} 
+        compFactory={DividerComp} 
+      />
       </ExampleGroup>
 
       <ExampleGroup title={trans("componentDoc.titleAlign")}>
@@ -27,6 +33,7 @@ export default function DividerExample() {
             title: trans("componentDoc.imADivider"),
             align: "left",
             color: "#222222",
+            style: {border: "#000", borderWidth: "2px"},
           }}
           compFactory={DividerComp}
         />
@@ -51,6 +58,7 @@ export default function DividerExample() {
           compFactory={DividerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.style")}>
         <Example
           title={trans("componentDoc.dashed")}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/MultiSelect.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/MultiSelect.tsx
index 025613075..293317832 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/MultiSelect.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/MultiSelect.tsx
@@ -192,6 +192,20 @@ export default function MultiSelectExample() {
           blackListConfig={blackListConfig}
           compFactory={MultiSelectComp}
         />
+        <Example
+          title="Not Search-able"
+          config={{
+            value: trans("componentDoc.noValue"),
+            options: options,
+            label: {
+              text: trans("componentDoc.favoriteFruits"),
+            },
+            allowClear: true,
+            showSearch: false,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={MultiSelectComp}
+        />
       </ExampleGroup>
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Select.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Select.tsx
index b270d99fe..a08b855cd 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Select.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Select.tsx
@@ -174,6 +174,20 @@ export default function SelectExample() {
           blackListConfig={blackListConfig}
           compFactory={SelectComp}
         />
+        <Example
+          title="Not Search-able"
+          config={{
+            value: trans("componentDoc.noValue"),
+            options: options,
+            label: {
+              text: trans("componentDoc.favoriteFruits"),
+            },
+            allowClear: true,
+            showSearch: false,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={SelectComp}
+        />
       </ExampleGroup>
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Input.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Input.tsx
index e1e73d531..1426ac789 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Input.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Input.tsx
@@ -18,6 +18,15 @@ export default function InputExample() {
           }}
           compFactory={InputComp}
         />
+        <Example
+          title="Default Value"
+          config={{
+            placeholder: trans("componentDoc.pleaseInputName"),
+            disabled: false,
+            defaultValue: "Default Text",
+          }}
+          compFactory={InputComp}
+        />
         <Example
           title={trans("componentDoc.disabled")}
           config={{
@@ -53,6 +62,14 @@ export default function InputExample() {
           }}
           compFactory={InputComp}
         />
+        <Example
+          title="Tooltip"
+          config={{
+            label: { text: trans("componentDoc.userName"), align: "right", tooltip:"This is a Tooltip" },
+            placeholder: trans("componentDoc.pleaseInputName"),
+          }}
+          compFactory={InputComp}
+        />
         <Example
           title={trans("componentDoc.workCount")}
           config={{
@@ -84,6 +101,66 @@ export default function InputExample() {
           }}
           compFactory={InputComp}
         />
+         <Example
+          title="Show Clear Button & Show Validation on Empty/Reset"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.userName") },
+            defaultValue: "Default Text",
+            required: true,
+            allowClear: true,
+            showValidationWhenEmpty: true,
+          }}
+          compFactory={InputComp}
+        />
+        <Example
+          title="Custom Rule"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.userName") },
+            placeholder: trans("componentDoc.pleaseInputName"),
+            customRule: "{{Number(input1.value) <= 0 ? 'Value can't be less than or equal to 0' : ''}}",
+            validationType: "Text",
+          }}
+          compFactory={InputComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup title="Input Type">
+        <Example
+          title="Email"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.userName") },
+            placeholder: trans("componentDoc.pleaseInputName"),
+            required: true,
+            validationType: "Email",
+          }}
+          compFactory={InputComp}
+        />
+        <Example
+          title="URL"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.userName") },
+            placeholder: trans("componentDoc.pleaseInputName"),
+            required: true,
+            validationType: "URL",
+          }}
+          compFactory={InputComp}
+        />
+        <Example
+          title="Regex"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.userName") },
+            placeholder: trans("componentDoc.pleaseInputName"),
+            required: true,
+            validationType: "Regex",
+            regex: "^[A-Z]{3}\\d[a-z]{3}\\d[A-Z]{3}\\d$"
+          }}
+          compFactory={InputComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Password.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Password.tsx
index a27930c39..099aa3793 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Password.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/Password.tsx
@@ -53,6 +53,23 @@ export default function PasswordExample() {
           }}
           compFactory={PasswordComp}
         />
+        <Example
+          title="Tooltip"
+          config={{
+            label: { text: trans("componentDoc.password"), tooltip:"This is a Tooltip" },
+            placeholder: trans("componentDoc.pleaseInputPassword"),
+          }}
+          compFactory={PasswordComp}
+        />
+          <Example
+          title="Visibility Toggle"
+          config={{
+            label: { text: trans("componentDoc.password")},
+            placeholder: trans("componentDoc.pleaseInputPassword"),
+            visibilityToggle: true,
+          }}
+          compFactory={PasswordComp}
+        />
       </ExampleGroup>
       <ExampleGroup title={trans("componentDoc.validation")} description="">
         <Example
@@ -76,6 +93,17 @@ export default function PasswordExample() {
           }}
           compFactory={PasswordComp}
         />
+        <Example
+          title="Show Clear Button & Show Validation on Empty/Reset"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.password")},
+            placeholder: trans("componentDoc.pleaseInputPassword"),
+            required: true,
+            showValidationWhenEmpty: true,
+          }}
+          compFactory={PasswordComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/RichTextEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/RichTextEditor.tsx
index 79a218913..ffbaab53b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/RichTextEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/RichTextEditor.tsx
@@ -10,7 +10,53 @@ export default function InputExample() {
         title={trans("componentDoc.basicUsage")}
         description={trans("componentDoc.basicDemoDescription")}
       >
-        <Example title="" config={{}} hideSettings={true} compFactory={RichTextEditorComp} />
+        <Example 
+         title={trans("componentDoc.placeholder")}
+         config={{
+           placeholder: "Let us know about yourself!",
+         }}
+         compFactory={RichTextEditorComp} 
+       />
+       <Example
+         title="Default Value"
+         config={{
+          placeholder: "Let us know about yourself!",
+          value: "I am an Experienced FullStack Web Developer ...",
+         }}
+         compFactory={RichTextEditorComp} 
+       />
+      </ExampleGroup>
+
+      <ExampleGroup title="Layout" description="">
+        <Example
+          title={trans("componentDoc.fixed")}
+          width={340}
+          config={{
+            placeholder: "Let us know about yourself!",
+            autoHeight: "fixed",
+            contentScrollBar: true,
+          }}
+          compFactory={RichTextEditorComp}
+        />
+        <Example
+          title={trans("componentDoc.auto")}
+          width={340}
+          config={{
+            placeholder: "Let us know about yourself!",
+            autoHeight: "auto",
+            hideToolbar: false,
+          }}
+          compFactory={RichTextEditorComp}
+        />
+        <Example
+          title= "Hide Toolbar"
+          width={340}
+          config={{
+            placeholder: "Let us know about yourself!",
+            hideToolbar: true,
+          }}
+          compFactory={RichTextEditorComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/TextArea.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/TextArea.tsx
index 6f92542e3..a26f0391a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/TextArea.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/textInputComp/TextArea.tsx
@@ -18,6 +18,15 @@ export default function ButtonExample() {
           }}
           compFactory={TextAreaComp}
         />
+        <Example
+          title="Default Value"
+          config={{
+            placeholder: trans("componentDoc.pleaseInputName"),
+            disabled: false,
+            defaultValue: "Enter your details!",
+          }}
+          compFactory={TextAreaComp}
+        />
         <Example
           title={trans("componentDoc.disabled")}
           config={{
@@ -54,6 +63,7 @@ export default function ButtonExample() {
           compFactory={TextAreaComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")} description="">
         <Example
           title={trans("componentDoc.required")}
@@ -76,7 +86,20 @@ export default function ButtonExample() {
           }}
           compFactory={TextAreaComp}
         />
+        <Example
+          title="Show Clear Button & Show Validation on Empty/Reset"
+          width={340}
+          config={{
+            label: { text: trans("componentDoc.userName") },
+            defaultValue: "Enter your details",
+            required: true,
+            allowClear: true,
+            showValidationWhenEmpty: true,
+          }}
+          compFactory={TextAreaComp}
+        />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.autoHeight")} description="">
         <Example
           title={trans("componentDoc.fixed")}
@@ -84,6 +107,7 @@ export default function ButtonExample() {
           config={{
             label: { text: trans("componentDoc.userName") },
             autoHeight: "fixed",
+            textAreaScrollBar: true,
           }}
           compFactory={TextAreaComp}
         />