Skip to content

BlackBeltTechnology/judo-ui-react-template

Repository files navigation

judo-ui-react-template

UI based JUDO React Frontend TypeScript generator

Dependencies

The source code which this template can generate depends on the generated services of judo-ui-typescript-rest-template.

The following example will showcase both plugins working together to generate a fully functional application.

Usage

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>actiongrouptest-frontend-react-action_group_test__god</artifactId>
    <version>1.0.0-SNAPSHOT</version>

    <name>ActionGroupTest - God</name>
    <description>ActionGroupTest - God react frontend</description>

    <packaging>bundle</packaging>

    <properties>
        <!-- dependencies -->
        <judo-meta-ui-version>1.0.1.20230213_193724_b9e98a1c_develop</judo-meta-ui-version>
        <judo-generator-commons-version>1.0.0.20230120_203628_b0fbaa8e_develop</judo-generator-commons-version>
        <judo-ui-typescript-rest-version>1.0.0.20230227_135344_7ab7117b_develop</judo-ui-typescript-rest-version>
        <judo-ui-react-version>1.0.0.20230222_040743_a6270e05_develop</judo-ui-react-version>

        <!-- model properties -->
        <model-name>ActionGroupTest</model-name>
        <actor>actiongrouptest__god</actor>
        <actor-shortname>god</actor-shortname>
        <actor-name>God</actor-name>
        <actor-fq-name>ActionGroupTest::God</actor-fq-name>

        <!-- generator properties -->
        <ui-model>${project.basedir}/model/${model-name}-ui.model</ui-model>
        <override-dir>${project.basedir}/generator-overrides</override-dir>
        <generation-target>${project.basedir}/target/frontend-react</generation-target>

        <!-- npm package properties -->
        <appScope>@example</appScope>
        <appVersion>1.0.0</appVersion>
        <tablePageLimit>10</tablePageLimit>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>hu.blackbelt.judo.meta</groupId>
                <artifactId>judo-ui-generator-maven-plugin</artifactId>
                <version>${judo-meta-ui-version}</version>
                <executions>
                    <execution>
                        <id>execute-ui-services-generation</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>generate</goal>
                        </goals>
                        <configuration>
                            <uris>
                                <uri>mvn:hu.blackbelt.judo.generator:judo-ui-typescript-rest-api:${judo-ui-typescript-rest-version}</uri>
                                <uri>mvn:hu.blackbelt.judo.generator:judo-ui-typescript-rest-service:${judo-ui-typescript-rest-version}</uri>
                                <uri>mvn:hu.blackbelt.judo.generator:judo-ui-typescript-rest-axios:${judo-ui-typescript-rest-version}</uri>
                            </uris>
                            <type>ui-typescript-rest</type>
                            <applications>
                                ${actor-fq-name}
                            </applications>
                            <ui>${ui-model}</ui>
                            <destination>${generation-target}/src/generated</destination>
                        </configuration>
                    </execution>

                    <execution>
                        <id>execute-ui-generation</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>generate</goal>
                        </goals>
                        <configuration>
                            <uris>
                                <uri>mvn:hu.blackbelt.judo.generator:judo-ui-react:${judo-ui-react-version}</uri>
                            </uris>
                            <type>ui-react</type>
                            <applications>
                                ${actor-fq-name}
                            </applications>
                            <ui>${ui-model}</ui>
                            <destination>${generation-target}</destination>
                            <templateParameters>
                                <appModelName>${model-name}</appModelName>
                                <appScope>${appScope}</appScope>
                                <appVersion>${appVersion}</appVersion>

                                <tablePageLimit>10</tablePageLimit>
                            </templateParameters>
                        </configuration>
                    </execution>
                </executions>

                <dependencies>
                    <dependency>
                        <groupId>hu.blackbelt.judo.generator</groupId>
                        <artifactId>judo-ui-typescript-rest-commons</artifactId>
                        <version>${judo-ui-typescript-rest-version}</version>
                    </dependency>
                    <dependency>
                        <groupId>hu.blackbelt.judo.generator</groupId>
                        <artifactId>judo-ui-typescript-rest-api</artifactId>
                        <version>${judo-ui-typescript-rest-version}</version>
                    </dependency>
                    <dependency>
                        <groupId>hu.blackbelt.judo.generator</groupId>
                        <artifactId>judo-ui-typescript-rest-service</artifactId>
                        <version>${judo-ui-typescript-rest-version}</version>
                    </dependency>
                    <dependency>
                        <groupId>hu.blackbelt.judo.generator</groupId>
                        <artifactId>judo-ui-typescript-rest-axios</artifactId>
                        <version>${judo-ui-typescript-rest-version}</version>
                    </dependency>
                    <dependency>
                        <groupId>hu.blackbelt.judo.generator</groupId>
                        <artifactId>judo-ui-react</artifactId>
                        <version>${judo-ui-react-version}</version>
                    </dependency>
                </dependencies>
            </plugin>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>3.3.0</version>
                <executions>
                    <execution>
                        <id>external-packages</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>unpack</goal>
                        </goals>
                        <configuration>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>hu.blackbelt.judo.generator</groupId>
                                    <artifactId>judo-ui-react-external-packages</artifactId>
                                    <version>${judo-ui-react-version}</version>
                                    <type>jar</type>
                                    <overWrite>true</overWrite>
                                </artifactItem>
                            </artifactItems>
                            <includes>externals/**</includes>
                            <outputDirectory>${generation-target}</outputDirectory>
                        </configuration>
                    </execution>
                </executions>

                <dependencies>
                    <dependency>
                        <groupId>hu.blackbelt.judo.generator</groupId>
                        <artifactId>judo-ui-react-external-packages</artifactId>
                        <version>${judo-ui-react-version}</version>
                    </dependency>
                </dependencies>
            </plugin>
        </plugins>
    </build>
</project>

This example generates a complete application into the target/frontend-react directory.

The judo-ui-generator-maven-plugin documentation is placed inside the plugin documentation itself. https://github.com/BlackBeltTechnology/judo-meta-ui/tree/develop/generator-maven-plugin

Documentation

Detailed documentation for the generated apps and how to maintain / modify them can be found under docs/pages folder.

Notes

The maven-dependency-plugin copies repackaged dependencies from the module judo-ui-react-external-packages.