Merge pull request #54 from CodandoTV/feature/include-mkdocs-setup

MKdocs support

Author: gabrielbmoro

.github/workflows/documentation.yml

@@ -0,0 +1,30 @@
+name: documentation 
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'docs/**'
+permissions:
+  contents: write
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Configure Git Credentials
+        run: |
+          git config user.name github-actions[bot]
+          git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+      - uses: actions/setup-python@v5
+        with:
+          python-version: 3.x
+      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV 
+      - uses: actions/cache@v4
+        with:
+          key: mkdocs-material-${{ env.cache_id }}
+          path: .cache
+          restore-keys: |
+            mkdocs-material-
+      - run: pip install mkdocs-material 
+      - run: mkdocs gh-deploy --force

docs/assets/img/logo.png

@@ -0,0 +1,9 @@
+# Contributors
+
+> We would like to thank everyone who made this possible and helped > the CodandoTV community grow stronger. This project exists thanks > to all the people who contribute
+
+_Signed by Rods_
+
+This project exists thanks to all the people who contribute.
+
+<a href="https://github.com/CodandoTV/CraftD"><img src="https://opencollective.com/craftd/contributors.svg?width=890" /></a>

docs/assets/video/compose-android.gif

@@ -0,0 +1,99 @@
+# Jetpack Compose
+
+- Create your ComponentPropertyClass with properties that you need. In this example, I used checkbox component:
+
+!!! warning "Immutable and Stable annotations"
+    Here we have some points to consider To avoid unnecessary recompositions at your component. We recommend use the `@Immutable` and `@Stable` annotations in your properties.
+
+```kotlin
+@JsonIgnoreProperties(ignoreUnknown = true)
+@Immutable
+@Stable
+data class CheckBoxProperties(
+    @JsonProperty("text") val text: String? = null,
+    ... define your properties here
+)
+```
+
+- Add your Component json object in `Dymanic.json`:
+
+```json
+{
+    "key": "CraftDCheckBox",
+    "value": {
+     ... define your properties here
+     }
+ }
+```
+
+- Create your Component
+
+!!! tip "Your component must have three properties"
+
+    - componentProperties: The mapped properties from json
+    - modifier: Default for composable componets
+    - behaviour: This make reference to the component's behaviour, for example: onclick -> for buttons, onchange -> for checkbox etc...
+
+```kotlin
+class CraftDCheckBoxBuilder(
+    override val key: String = CraftDComponentKey.CHECK_BOX_COMPONENT.key
+) :
+    CraftDBuilder {
+    @Composable
+    override fun craft(model: SimpleProperties, listener: CraftDViewListener) {
+        val checkBoxProperties = model.value.convertToVO<CheckBoxProperties>()
+        CraftDCheckBox(checkBoxProperties) {
+            checkBoxProperties.actionProperties?.let { listener.invoke(it) }
+        }
+    }
+}
+```
+
+- Create your Component Builder:
+
+!!! tip "Note"
+
+   This Builder must extend CraftBuilder Class and override craft method.
+
+```kotlin
+class CraftDCheckBoxBuilder(
+    override val key: String = CraftDComponentKey.CHECK_BOX_COMPONENT.key
+) :
+    CraftDBuilder {
+    @Composable
+    override fun craft(model: SimpleProperties, listener: CraftDViewListener) {
+        val checkBoxProperties = model.value.convertToVO<CheckBoxProperties>()
+        CraftDCheckBox(checkBoxProperties) {
+            checkBoxProperties.actionProperties?.let { listener.invoke(it) }
+        }
+    }
+}
+```
+
+- In your screen you can add the builder inside of `CraftBuilderManager`
+
+```kotlin
+@Composable
+fun InitialScreen(
+    vm: SampleCraftDComposeViewModel
+) {
+    val properties by vm.properties.collectAsStateWithLifecycle()
+    val dynamicBuilder = remember {
+        CraftDBuilderManager().add(
+           CraftDCheckBoxBuilder()
+        )
+    }
+    LaunchedEffect(Unit) {
+        vm.loadProperties()
+    }
+
+    CraftDynamic(
+        properties = properties,
+        dynamicBuilder = dynamicBuilder
+    ) {
+        //Component click return to do something
+    }
+}
+```
+
+So now enjoy your component!

docs/assets/video/flutter.gif

@@ -0,0 +1,85 @@
+# Flutter
+
+- Create your ComponentPropertyClass with properties that you need
+
+```dart
+class ButtonProperties {
+  const ButtonProperties({
+      required this.text,
+    ... place your construtor properties
+  });
+
+  final String text;
+   ... place your properties
+}
+```
+
+- Add your Component json object in `Dymanic.json`
+
+```json
+{
+    "key": "CraftDBbutton",
+    "value": {
+         "text": "Knife",
+     ... place your properties
+     }
+ }
+```
+
+- Create your Component
+
+!!! tip "Your component must have three properties"
+    - ButtonProperties: The mapped properties from json
+    - callback: This make reference to the component's behaviour, for example: onclick -> for buttons, onchange -> for checkbox etc...
+
+    ```dart
+    class CraftDButton extends StatelessWidget {
+       const CraftDButton(
+          {super.key, required this.buttonProperties, required this.callback}
+       );
+
+      //... place your code
+    }
+    ```
+
+- Create your Component Builder
+
+!!! tip "This Builder must extend `CraftBuilder` Class and override craft and fromJson methods."
+    ```dart
+    class CraftDButtonBuilder extends CraftDBuilder<ButtonProperties> {
+        CraftDButtonBuilder() : super(key: key);
+
+        @override
+        Widget craft(ButtonProperties model, CraftDViewListener listener) {
+            //... place your code
+        }
+
+        @override
+        ButtonProperties fromJson(properties) {
+            return ButtonProperties(
+                text: properties["text"],
+                //... rest of tour code
+            )
+        }
+
+        static String key = "CraftDButton";
+    }
+    ```
+
+-  In your Page, create your `CraftDBuilder` declaration and put it into `CraftDynamic` Widget
+
+```dart
+    // You can put it in your dependency injection
+    final craftdBuilderManager = CraftDBuilderManager();
+
+    return CraftDynamic(
+         simplePropertiesList: simplePropertiesList,
+         craftDBuilderManager : craftdBuilderManager,
+         onAction: (actionProperties) {
+            print(
+                "categoria ${actionProperties.analyticsProperties?.category} "
+                "label ${actionProperties.analyticsProperties?.label} - "
+                "track ${actionProperties.analyticsProperties?.track}");
+            });
+          }
+```

docs/assets/video/swift-ui.gif

@@ -0,0 +1,69 @@
+# Swift UI
+
+- Create your ComponentPropertyClass with properties that you need
+
+```swift
+public struct TextProperties: Decodable {
+    public let text: String?
+    public let textColorHex: String?
+    public let textSize: String?
+    public let backgroundHex: String?
+    public let textAllCaps: Bool?
+    public let textHtml: String?
+}
+```
+
+- Add your Component json object in `Dymanic.json``
+
+```json
+[
+  {
+    "key": "MyCraftDText",
+    "value": {
+      "text": "Knife",
+      "backgroundHex": "#9A71F6",
+      "textSize": "30",
+      "textColorHex": "#000000"
+    }
+  }
+]
+```
+
+- Create your Component
+
+!!! tip "This Builder must extend `CraftBuilder` Class and override craft method."
+    ```swift
+    public class MyCraftDTextBuilder: CraftDBuilder {
+        public let key = "MyCraftDText"
+
+        let decoder = JSONDecoder()
+
+        public func craft(
+            model: SimpleProperties,
+            listener: CraftDViewListener
+        ) -> any View {
+            do {
+                let properties = try model.decodeValue(TextProperties.self, using: decoder)
+                return Text(properties.text ?? "")
+            } catch {
+                return EmptyView()
+            }
+        }
+    }
+    ```
+
+- In your add your builder inside of `CraftBuilderManager`
+
+```swift
+@main
+struct CraftDSampleApp: App {
+    var body: some Scene {
+        WindowGroup {
+            //Or another View
+            let craftDBuilderManager = CraftDBuilderManager()
+                .add(builder: <#T##any CraftDBuilder#> like MyCraftDTextBuilder)
+            CraftDynamic(craftDBuilderManager: CraftDBuilderManager)
+        }
+    }
+}
+```