Improve Tikui generated style

src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java

@@ -3,6 +3,8 @@
 import static tech.jhipster.lite.module.domain.JHipsterModule.*;
 import static tech.jhipster.lite.module.domain.npm.JHLiteNpmVersionSource.*;
 
+import java.util.Collection;
+import java.util.Set;
 import java.util.regex.Pattern;
 import tech.jhipster.lite.module.domain.JHipsterModule;
 import tech.jhipster.lite.module.domain.file.JHipsterDestination;
@@ -22,10 +24,18 @@ public class TikuiModuleFactory {
   private static final String ATOM_BUTTON = ATOM + "/button";
   private static final String ATOM_INPUT_TEXT = ATOM + "/input-text";
   private static final String ATOM_LABEL = ATOM + "/label";
+  private static final String ATOM_PAGE_TITLE = ATOM + "/page-title";
+  private static final String ATOM_PARAGRAPH = ATOM + "/paragraph";
   private static final String MOLECULE = "molecule";
   private static final String MOLECULE_FIELD = MOLECULE + "/field";
+  private static final String MOLECULE_TOAST = MOLECULE + "/toast";
   private static final String ORGANISM = "organism";
+  private static final String ORGANISM_COLUMNS = ORGANISM + "/columns";
   private static final String ORGANISM_LINES = ORGANISM + "/lines";
+  private static final String ORGANISM_TOASTS = ORGANISM + "/toasts";
+  private static final String TEMPLATE = "template";
+  private static final String TEMPLATE_TEMPLATE_PAGE = TEMPLATE + "/template-page";
+  private static final String TEMPLATE_TOASTING = TEMPLATE + "/toasting";
   private static final String QUARK = "quark";
 
   //@formatter:off
@@ -57,53 +67,57 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
           .addTemplate("atom.pug")
           .and()
         .batch(STYLE_SOURCE.append(ATOM_BUTTON), STYLE_DESTINATION.append(ATOM_BUTTON))
-          .addTemplate("_button.scss")
-          .addTemplate("button.code.pug")
-          .addTemplate("button.md")
-          .addTemplate("button.mixin.pug")
-          .addTemplate("button.render.pug")
+          .addTemplates(componentFiles("button"))
           .and()
         .batch(STYLE_SOURCE.append(ATOM_INPUT_TEXT), STYLE_DESTINATION.append(ATOM_INPUT_TEXT))
-          .addTemplate("_input-text.scss")
-          .addTemplate("input-text.code.pug")
-          .addTemplate("input-text.md")
-          .addTemplate("input-text.mixin.pug")
-          .addTemplate("input-text.render.pug")
+          .addTemplates(componentFiles("input-text"))
           .and()
         .batch(STYLE_SOURCE.append(ATOM_LABEL), STYLE_DESTINATION.append(ATOM_LABEL))
-          .addTemplate("_label.scss")
-          .addTemplate("label.code.pug")
-          .addTemplate("label.md")
-          .addTemplate("label.mixin.pug")
-          .addTemplate("label.render.pug")
+          .addTemplates(componentFiles("label"))
+          .and()
+        .batch(STYLE_SOURCE.append(ATOM_PAGE_TITLE), STYLE_DESTINATION.append(ATOM_PAGE_TITLE))
+          .addTemplates(componentFiles("page-title"))
+          .and()
+        .batch(STYLE_SOURCE.append(ATOM_PARAGRAPH), STYLE_DESTINATION.append(ATOM_PARAGRAPH))
+          .addTemplates(componentFiles("paragraph"))
           .and()
         .batch(STYLE_SOURCE.append(MOLECULE), STYLE_DESTINATION.append(MOLECULE))
           .addTemplate("_molecule.scss")
           .addTemplate("molecule.pug")
           .and()
         .batch(STYLE_SOURCE.append(MOLECULE_FIELD), STYLE_DESTINATION.append(MOLECULE_FIELD))
-          .addTemplate("_field.scss")
-          .addTemplate("field.code.pug")
-          .addTemplate("field.md")
-          .addTemplate("field.mixin.pug")
-          .addTemplate("field.render.pug")
+          .addTemplates(componentFiles("field"))
+          .and()
+        .batch(STYLE_SOURCE.append(MOLECULE_TOAST), STYLE_DESTINATION.append(MOLECULE_TOAST))
+          .addTemplates(componentFiles("toast"))
           .and()
         .batch(STYLE_SOURCE.append(ORGANISM), STYLE_DESTINATION.append(ORGANISM))
           .addTemplate("_organism.scss")
           .addTemplate("organism.pug")
           .and()
+        .batch(STYLE_SOURCE.append(ORGANISM_COLUMNS), STYLE_DESTINATION.append(ORGANISM_COLUMNS))
+          .addTemplates(componentFiles("columns"))
+          .and()
+        .batch(STYLE_SOURCE.append(ORGANISM_LINES), STYLE_DESTINATION.append(ORGANISM_LINES))
+          .addTemplates(componentFiles("lines"))
+          .and()
+        .batch(STYLE_SOURCE.append(ORGANISM_TOASTS), STYLE_DESTINATION.append(ORGANISM_TOASTS))
+          .addTemplates(componentFiles("toasts"))
+          .and()
         .batch(STYLE_SOURCE.append(QUARK), STYLE_DESTINATION.append(QUARK))
           .addTemplate("_placeholder.scss")
           .addTemplate("_spacing.scss")
           .and()
-        .batch(STYLE_SOURCE.append(ORGANISM_LINES), STYLE_DESTINATION.append(ORGANISM_LINES))
-          .addTemplate("_lines.scss")
-          .addTemplate("lines.code.pug")
-          .addTemplate("lines.md")
-          .addTemplate("lines.mixin.pug")
-          .addTemplate("lines.render.pug")
+        .batch(STYLE_SOURCE.append(TEMPLATE), STYLE_DESTINATION.append(TEMPLATE))
+          .addTemplate("_template.scss")
+          .addTemplate("template.pug")
+          .and()
+        .batch(STYLE_SOURCE.append(TEMPLATE_TEMPLATE_PAGE), STYLE_DESTINATION.append(TEMPLATE_TEMPLATE_PAGE))
+          .addTemplates(componentFiles("template-page"))
+          .and()
+        .batch(STYLE_SOURCE.append(TEMPLATE_TOASTING), STYLE_DESTINATION.append(TEMPLATE_TOASTING))
+          .addTemplates(componentFiles("toasting"))
           .and()
-        .add(STYLE_SOURCE.template("template/template.pug"), STYLE_DESTINATION.append("template/template.pug"))
         .batch(STYLE_SOURCE.append("token"), STYLE_DESTINATION.append("token"))
           .addTemplate("spacing/_spacings.scss")
           .addTemplate("spacing/_vars.scss")
@@ -115,6 +129,9 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
           .addTemplate("_size.scss")
           .addTemplate("_token.scss")
           .and()
+        .batch(STYLE_SOURCE.append("variables"), STYLE_DESTINATION.append("variables"))
+          .addTemplate("_breakpoint.scss")
+          .and()
         .and()
       .optionalReplacements()
         .in(path("vite.config.ts"))
@@ -138,6 +155,10 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
     //@formatter:on
   }
 
+  private static Collection<String> componentFiles(String name) {
+    return Set.of("_" + name + ".scss", name + ".code.pug", name + ".md", name + ".mixin.pug", name + ".render.pug");
+  }
+
   private static RegexNeedleAfterReplacer newProxyReplacer() {
     return new RegexNeedleAfterReplacer(ReplacementCondition.notContaining("proxy:"), Pattern.compile("port:\\s*9000,", Pattern.MULTILINE));
   }

src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java

@@ -119,6 +119,13 @@ public JHipsterModuleFileBatchBuilder addTemplate(String file) {
       return add(source.template(file), destination.append(file));
     }
 
+    public JHipsterModuleFileBatchBuilder addTemplates(Collection<String> files) {
+      Assert.notNull("files", files);
+      files.forEach(this::addTemplate);
+
+      return this;
+    }
+
     public JHipsterModuleFileBatchBuilder addFile(String file) {
       return add(source.file(file), destination.append(file));
     }

src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache

@@ -1,3 +1,5 @@
 @use 'button/button';
 @use 'input-text/input-text';
 @use 'label/label';
+@use 'page-title/page-title';
+@use 'paragraph/paragraph';

src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache

@@ -18,3 +18,7 @@ block content
       include:componentDoc(height=180) input-text/input-text.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) label/label.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=130) page-title/page-title.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=65) paragraph/paragraph.md

src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache

@@ -0,0 +1,17 @@
+@use '../../quark/placeholder';
+
+.page-title {
+  margin: 0;
+  white-space: pre-line;
+  color: var(--color-text);
+  font-family: var(--font-family);
+  font-size: 3rem;
+  hyphens: auto;
+  overflow-wrap: anywhere;
+  font-weight: 700;
+
+  @include placeholder.placeholder-alternative {
+    max-width: 20rem;
+    min-height: 3rem;
+  }
+}

src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache

@@ -0,0 +1,4 @@
+include page-title.mixin.pug
+
++page-title Page title
++page-title({placeholder: true})

src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache

@@ -0,0 +1 @@
+## Page title

src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache

@@ -0,0 +1,5 @@
+mixin page-title(options)
+  - const { placeholder } = options || {};
+  - const placeholderClass = placeholder ? '-placeholder' : null;
+  h1.page-title(class=placeholderClass)
+    block

src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include page-title.code.pug

src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache

@@ -0,0 +1,13 @@
+@use '../../quark/placeholder';
+
+.paragraph {
+  margin: 0;
+  padding: 0;
+  color: var(--color-text);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+
+  @include placeholder.placeholder-alternative {
+    min-height: var(--font-size);
+  }
+}

src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache

@@ -0,0 +1,4 @@
+include paragraph.mixin.pug
+
++paragraph Paragraph
++paragraph({placeholder: true})

src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache

@@ -0,0 +1 @@
+## Paragraph

src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache

@@ -0,0 +1,5 @@
+mixin paragraph(options)
+  - const { placeholder } = options || {};
+  - const placeholderClass = placeholder ? '-placeholder' : null;
+  p.paragraph(class=placeholderClass)
+    block

src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include paragraph.code.pug

src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache

@@ -1 +1,2 @@
 @use 'field/field';
+@use 'toast/toast';

src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache

@@ -14,3 +14,5 @@ block content
       include /documentation/atomic-design/quote/molecule
     .tikui-vertical-spacing--line
       include:componentDoc(height=80) field/field.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=80) toast/toast.md

src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache

@@ -0,0 +1,8 @@
+.toast {
+  border-radius: var(--radius-toast);
+  box-shadow: 0 0 10px var(--color-shadow);
+  background-color: var(--color-background);
+  padding: var(--spacing-m);
+  color: var(--color-text);
+  font-family: var(--font-family);
+}

src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache

@@ -0,0 +1,3 @@
+include toast.mixin.pug
+
++toast Toast message

src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache

@@ -0,0 +1 @@
+## Toast

src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache

@@ -0,0 +1,3 @@
+mixin toast
+  .toast
+    block

src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include toast.code.pug

src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache

@@ -1 +1,3 @@
+@use 'columns/columns';
 @use 'lines/lines';
+@use 'toasts/toasts';

src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache

@@ -0,0 +1,19 @@
+@use '../../quark/spacing';
+
+.columns {
+  --columns-gap: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--columns-gap);
+
+  &.-justify-center {
+    justify-content: center;
+  }
+
+  &.-align-center {
+    align-items: center;
+  }
+
+  @include spacing.spacing-alternatives('gap-', '--columns-gap');
+}

src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache

@@ -0,0 +1,13 @@
+include columns.mixin.pug
+
++columns('title-and-text')
+  +columns--column First column
+  +columns--column Second column
+
++columns('paragraphs', {justify: 'center'})
+  +columns--column First #[br] column
+  +columns--column Second column
+
++columns('paragraphs', {align: 'center'})
+  +columns--column First #[br] column
+  +columns--column Second column

src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache

@@ -0,0 +1 @@
+## Columns

src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache

@@ -0,0 +1,10 @@
+mixin columns(gap, options)
+  - const { justify, align } = options || {};
+  - const justifyClass = justify ? `-justify-${justify}` : null;
+  - const alignClass = align ? `-align-${align}` : null;
+  .columns(class=[`-gap-${gap}`, justifyClass, alignClass, gapClass])
+    block
+
+mixin columns--column
+  .columns--column
+    block

src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include columns.code.pug

src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache

@@ -1,16 +1,20 @@
 extends /layout-documentation
 
 block append vars
-  -active='organism'
+  - active = 'organism';
 
 block title
   title Tikui - Organisms
 
 block content
   .tikui-vertical-spacing.-s32
     .tikui-vertical-spacing--line
-      h1.tikui-title-main#organisms Organisms
+      h1#organisms.tikui-title-main Organisms
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/organism
+    .tikui-vertical-spacing--line
+      include:componentDoc columns/columns.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=210) lines/lines.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=210) toasts/toasts.md

src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache

@@ -0,0 +1,5 @@
+.toasts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}

src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache

@@ -0,0 +1,6 @@
+include toasts.mixin.pug
+
++toasts
+  +toasts--toast First toast message
+  +toasts--toast Second toast message
+  +toasts--toast Last toast message

src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache

@@ -0,0 +1 @@
+## Toasts

src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache

@@ -0,0 +1,10 @@
+include /molecule/toast/toast.mixin.pug
+
+mixin toasts
+  .toasts
+    block
+
+mixin toasts--toast
+  .toasts--toast
+    +toast
+      block

src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include toasts.code.pug

src/main/resources/generator/client/tikui/style/template/_template.scss.mustache

@@ -0,0 +1,2 @@
+@use 'template-page/template-page';
+@use 'toasting/toasting';

src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache

@@ -0,0 +1,22 @@
+@use '../../variables/breakpoint';
+
+.template-page {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-background-page);
+  overflow: auto;
+
+  &--content {
+    box-sizing: border-box;
+    margin: 0 auto;
+    background-color: var(--color-background);
+    padding: var(--spacing-l);
+    width: 100%;
+    max-width: var(--content-width);
+    min-height: 100vh;
+
+    @media screen and (width >= #{breakpoint.$large}) {
+      padding: var(--spacing-l) 5rem;
+    }
+  }
+}