From 1d0f5c0ccc90e6ed60b808a86c723863c515076a Mon Sep 17 00:00:00 2001 From: Anthony Rey Date: Thu, 3 Oct 2024 18:16:18 +0200 Subject: [PATCH] Improve Tikui generated style --- .../tikui/domain/TikuiModuleFactory.java | 75 ++++++++++++------- .../domain/file/JHipsterModuleFiles.java | 7 ++ .../tikui/style/atom/_atom.scss.mustache | 2 + .../client/tikui/style/atom/atom.pug.mustache | 4 + .../atom/page-title/_page-title.scss.mustache | 17 +++++ .../page-title/page-title.code.pug.mustache | 4 + .../atom/page-title/page-title.md.mustache | 1 + .../page-title/page-title.mixin.pug.mustache | 5 ++ .../page-title/page-title.render.pug.mustache | 4 + .../atom/paragraph/_paragraph.scss.mustache | 13 ++++ .../paragraph/paragraph.code.pug.mustache | 4 + .../atom/paragraph/paragraph.md.mustache | 1 + .../paragraph/paragraph.mixin.pug.mustache | 5 ++ .../paragraph/paragraph.render.pug.mustache | 4 + .../style/molecule/_molecule.scss.mustache | 1 + .../style/molecule/molecule.pug.mustache | 2 + .../style/molecule/toast/_toast.scss.mustache | 8 ++ .../molecule/toast/toast.code.pug.mustache | 3 + .../style/molecule/toast/toast.md.mustache | 1 + .../molecule/toast/toast.mixin.pug.mustache | 3 + .../molecule/toast/toast.render.pug.mustache | 4 + .../style/organism/_organism.scss.mustache | 2 + .../organism/columns/_columns.scss.mustache | 19 +++++ .../columns/columns.code.pug.mustache | 13 ++++ .../organism/columns/columns.md.mustache | 1 + .../columns/columns.mixin.pug.mustache | 10 +++ .../columns/columns.render.pug.mustache | 4 + .../style/organism/organism.pug.mustache | 8 +- .../organism/toasts/_toasts.scss.mustache | 5 ++ .../organism/toasts/toasts.code.pug.mustache | 6 ++ .../style/organism/toasts/toasts.md.mustache | 1 + .../organism/toasts/toasts.mixin.pug.mustache | 10 +++ .../toasts/toasts.render.pug.mustache | 4 + .../style/template/_template.scss.mustache | 2 + .../_template-page.scss.mustache | 22 ++++++ .../template-page.code.pug.mustache | 41 ++++++++++ .../template-page/template-page.md.mustache | 1 + .../template-page.mixin.pug.mustache | 4 + .../template-page.render.pug.mustache | 4 + .../style/template/template.pug.mustache | 8 +- .../template/toasting/_toasting.scss.mustache | 20 +++++ .../toasting/toasting.code.pug.mustache | 3 + .../template/toasting/toasting.md.mustache | 1 + .../toasting/toasting.mixin.pug.mustache | 9 +++ .../toasting/toasting.render.pug.mustache | 5 ++ .../client/tikui/style/tikui.scss.mustache | 1 + .../tikui/style/token/_color.scss.mustache | 2 + .../tikui/style/token/_radius.scss.mustache | 5 +- .../style/variables/_breakpoint.scss.mustache | 1 + .../tikui/domain/TikuiModuleFactoryTest.java | 41 +++++----- 50 files changed, 368 insertions(+), 53 deletions(-) create mode 100644 src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/_template.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache create mode 100644 src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache diff --git a/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java b/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java index 8b2b28004be..3f89a2d2370 100644 --- a/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java +++ b/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 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)); } diff --git a/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java b/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java index b6bd3b0f4fe..1785fd03353 100644 --- a/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java +++ b/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 files) { + Assert.notNull("files", files); + files.forEach(this::addTemplate); + + return this; + } + public JHipsterModuleFileBatchBuilder addFile(String file) { return add(source.file(file), destination.append(file)); } diff --git a/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache b/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache index 7e8a8704152..1001e7f89bf 100644 --- a/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache +++ b/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'; diff --git a/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache index 27ccf774252..0cc1ce8906d 100644 --- a/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache new file mode 100644 index 00000000000..ee8973089ba --- /dev/null +++ b/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; + } +} diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache new file mode 100644 index 00000000000..3ce37602cd4 --- /dev/null +++ b/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}) diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache new file mode 100644 index 00000000000..142664a0c6a --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache @@ -0,0 +1 @@ +## Page title diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache new file mode 100644 index 00000000000..febc25bd391 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache new file mode 100644 index 00000000000..e6f3231d5f8 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache new file mode 100644 index 00000000000..420848feb97 --- /dev/null +++ b/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); + } +} diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache new file mode 100644 index 00000000000..bc0f07da276 --- /dev/null +++ b/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}) diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache new file mode 100644 index 00000000000..ca713d44ada --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache @@ -0,0 +1 @@ +## Paragraph diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache new file mode 100644 index 00000000000..811378b6a2f --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache new file mode 100644 index 00000000000..24c3735d784 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache b/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache index bd3d746c237..504ab531fbb 100644 --- a/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache +++ b/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache @@ -1 +1,2 @@ @use 'field/field'; +@use 'toast/toast'; diff --git a/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache index 00328ab73de..2762b609224 100644 --- a/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache new file mode 100644 index 00000000000..8f5e6ca7327 --- /dev/null +++ b/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); +} diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache new file mode 100644 index 00000000000..c718af85422 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache @@ -0,0 +1,3 @@ +include toast.mixin.pug + ++toast Toast message diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache new file mode 100644 index 00000000000..4ee1c687307 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache @@ -0,0 +1 @@ +## Toast diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache new file mode 100644 index 00000000000..be04452c813 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache @@ -0,0 +1,3 @@ +mixin toast + .toast + block diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache new file mode 100644 index 00000000000..1c36ccb3061 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache b/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache index 3ec902672f9..81e6c067d46 100644 --- a/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache +++ b/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache @@ -1 +1,3 @@ +@use 'columns/columns'; @use 'lines/lines'; +@use 'toasts/toasts'; diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache new file mode 100644 index 00000000000..b05bd8d067d --- /dev/null +++ b/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'); +} diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache new file mode 100644 index 00000000000..0da732554b7 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache new file mode 100644 index 00000000000..39c4ff5ddf6 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache @@ -0,0 +1 @@ +## Columns diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache new file mode 100644 index 00000000000..70dfdbc4339 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache new file mode 100644 index 00000000000..f814a96a4a3 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache index 21e555b272e..d34e9f29a9c 100644 --- a/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache +++ b/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache @@ -1,7 +1,7 @@ extends /layout-documentation block append vars - -active='organism' + - active = 'organism'; block title title Tikui - Organisms @@ -9,8 +9,12 @@ block title 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 diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache new file mode 100644 index 00000000000..7ca6c187e48 --- /dev/null +++ b/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); +} diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache new file mode 100644 index 00000000000..7cfaa41e937 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache new file mode 100644 index 00000000000..34a68808754 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache @@ -0,0 +1 @@ +## Toasts diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache new file mode 100644 index 00000000000..d34c8215153 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache new file mode 100644 index 00000000000..ad01b424880 --- /dev/null +++ b/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 diff --git a/src/main/resources/generator/client/tikui/style/template/_template.scss.mustache b/src/main/resources/generator/client/tikui/style/template/_template.scss.mustache new file mode 100644 index 00000000000..5819b5649ea --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/_template.scss.mustache @@ -0,0 +1,2 @@ +@use 'template-page/template-page'; +@use 'toasting/toasting'; diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache new file mode 100644 index 00000000000..c8073110faa --- /dev/null +++ b/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; + } + } +} diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache new file mode 100644 index 00000000000..eda40743182 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache @@ -0,0 +1,41 @@ +include template-page.mixin.pug + +include /atom/button/button.mixin.pug +include /atom/input-text/input-text.mixin.pug +include /atom/page-title/page-title.mixin.pug +include /atom/paragraph/paragraph.mixin.pug +include /molecule/field/field.mixin.pug +include /organism/columns/columns.mixin.pug +include /organism/lines/lines.mixin.pug + ++template-page + +lines('title-and-text') + +lines-line + +page-title Title + +lines-line + +paragraph + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. + | Etiam at massa a ipsum rhoncus posuere. Aenean id scelerisque tortor. Etiam vulputate finibus imperdiet. + | Phasellus ac tellus ac felis efficitur convallis. Vestibulum quis viverra libero, in accumsan neque. + | Donec pulvinar metus mollis, bibendum orci et, lobortis nulla. + | Proin dignissim euismod scelerisque. Ut eu ultrices ipsum. + | Quisque iaculis nibh ac nulla pretium ullamcorper. Aenean at magna risus. + +lines-line + +paragraph + | Suspendisse potenti. Donec euismod, ligula sit amet lobortis condimentum, ligula nulla aliquam quam, + | at egestas tortor risus sed est. Nulla sed dapibus nulla, ut bibendum dolor. + | Suspendisse potenti. Vivamus vehicula lacus vitae semper fermentum. Mauris aliquet mi et placerat mollis. + | Aenean nibh arcu, suscipit quis porta eget, auctor non lectus. Nullam aliquet suscipit mauris sit amet sagittis. + +lines-line + +columns('paragraphs', { justify: 'center' }) + +columns--column + form + +lines('paragraphs') + +lines-line + +field('Firstname', { forId: 'firstname' }) + +input-text({ id: 'firstname', placeholder: 'Firstname' }) + +lines-line + +field('Lastname', { forId: 'lastname' }) + +input-text({ id: 'lastname', placeholder: 'Lastname' }) + +lines-line({ align: 'end' }) + +button({ type: 'submit' }) Subscribe diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache new file mode 100644 index 00000000000..ae420af2d33 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache @@ -0,0 +1 @@ +## Template page diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache new file mode 100644 index 00000000000..0ee781f56dd --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache @@ -0,0 +1,4 @@ +mixin template-page + .template-page + .template-page--content + block diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache new file mode 100644 index 00000000000..720a17fb612 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache @@ -0,0 +1,4 @@ +extends /layout + +block body + include template-page.code.pug diff --git a/src/main/resources/generator/client/tikui/style/template/template.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template.pug.mustache index 8be7ca738b5..ca6e9df2417 100644 --- a/src/main/resources/generator/client/tikui/style/template/template.pug.mustache +++ b/src/main/resources/generator/client/tikui/style/template/template.pug.mustache @@ -1,7 +1,7 @@ extends /layout-documentation block append vars - -active='template' + - active = 'template'; block title title Tikui - Templates @@ -9,6 +9,10 @@ block title block content .tikui-vertical-spacing.-s32 .tikui-vertical-spacing--line - h1.tikui-title-main#templates Templates + h1#templates.tikui-title-main Templates .tikui-vertical-spacing--line include /documentation/atomic-design/quote/template + .tikui-vertical-spacing--line + include:templateDoc template-page/template-page.md + .tikui-vertical-spacing--line + include:templateDoc toasting/toasting.md diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache new file mode 100644 index 00000000000..a2b94e7624f --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache @@ -0,0 +1,20 @@ +.toasting { + position: absolute; + z-index: 1; + + &.-up { + top: var(--spacing-m); + } + + &.-right { + right: var(--spacing-m); + } + + &.-down { + bottom: var(--spacing-m); + } + + &.-left { + left: var(--spacing-m); + } +} diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache new file mode 100644 index 00000000000..660145a3f12 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache @@ -0,0 +1,3 @@ +include toasting.mixin.pug + ++toasting('up right') diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache new file mode 100644 index 00000000000..820a3d1f88d --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache @@ -0,0 +1 @@ +## Toasting diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache new file mode 100644 index 00000000000..2c6e5ce6e44 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache @@ -0,0 +1,9 @@ +include /organism/toasts/toasts.mixin.pug + +mixin toasting(orientations) + - const orientationsClass = orientations.split(' ').map(orientation => `-${orientation}`).join(' '); + .toasting(class=orientationsClass) + +toasts + +toasts--toast First toast message + +toasts--toast Second toast message + +toasts--toast Last toast message diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache new file mode 100644 index 00000000000..4765d1cec1f --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache @@ -0,0 +1,5 @@ +extends /layout + +block body + include /template/template-page/template-page.code.pug + include toasting.code.pug diff --git a/src/main/resources/generator/client/tikui/style/tikui.scss.mustache b/src/main/resources/generator/client/tikui/style/tikui.scss.mustache index 387b682ee42..79244986e4e 100644 --- a/src/main/resources/generator/client/tikui/style/tikui.scss.mustache +++ b/src/main/resources/generator/client/tikui/style/tikui.scss.mustache @@ -2,3 +2,4 @@ @use 'atom/atom'; @use 'molecule/molecule'; @use 'organism/organism'; +@use 'template/template'; diff --git a/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache b/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache index e91f4f6ec78..c4102d76a00 100644 --- a/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache +++ b/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache @@ -7,6 +7,7 @@ --color-text-on-primary: #fff; --color-background-page: #f1f1f1; --color-background: #fff; + --color-shadow: rgb(0 0 0 / 80%); } @media (prefers-color-scheme: dark) { @@ -16,5 +17,6 @@ --color-text: #fff; --color-background-page: #333; --color-background: #222; + --color-shadow: rgb(255 255 255 / 80%); } } diff --git a/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache b/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache index c7f24e3c16f..25fc4ee632d 100644 --- a/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache +++ b/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache @@ -1,3 +1,6 @@ :root { - --radius-field: 0.5rem; + --radius-s: 0.25rem; + --radius-sm: 0.5rem; + --radius-field: var(--radius-sm); + --radius-toast: var(--radius-sm); } diff --git a/src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache b/src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache new file mode 100644 index 00000000000..286f33f8d53 --- /dev/null +++ b/src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache @@ -0,0 +1 @@ +$large: 1200px; diff --git a/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java b/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java index 4098c579e9d..2fc46c938f4 100644 --- a/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java +++ b/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java @@ -3,6 +3,7 @@ import static tech.jhipster.lite.module.domain.JHipsterModulesFixture.*; import static tech.jhipster.lite.module.infrastructure.secondary.JHipsterModulesAssertions.*; +import java.util.Set; import org.junit.jupiter.api.Nested; import org.junit.jupiter.api.Test; import tech.jhipster.lite.TestFileUtils; @@ -134,6 +135,10 @@ private String styleProxy() { } } + private static String[] componentFiles(String name) { + return Set.of("_" + name + ".scss", name + ".code.pug", name + ".md", name + ".mixin.pug", name + ".render.pug").toArray(String[]::new); + } + private static JHipsterModuleAsserter assertThatTikuiModule(ModuleFile proxyFile, ModuleFile indexFile) { JHipsterModuleProperties properties = propertiesBuilder(TestFileUtils.tmpDirForTest()).build(); @@ -159,29 +164,22 @@ private static JHipsterModuleAsserter assertThatTikuiModule(ModuleFile proxyFile .and() .hasPrefixedFiles("src/main/style", "tikui.scss", "favicon.ico", "index.pug", "layout.pug", "layout-documentation.pug") .hasPrefixedFiles("src/main/style/atom", "_atom.scss", "atom.pug") - .hasPrefixedFiles( - "src/main/style/atom/button", - "_button.scss", - "button.code.pug", - "button.md", - "button.mixin.pug", - "button.render.pug" - ) - .hasPrefixedFiles( - "src/main/style/atom/input-text", - "_input-text.scss", - "input-text.code.pug", - "input-text.md", - "input-text.mixin.pug", - "input-text.render.pug" - ) - .hasPrefixedFiles("src/main/style/atom/label", "_label.scss", "label.code.pug", "label.md", "label.mixin.pug", "label.render.pug") + .hasPrefixedFiles("src/main/style/atom/button", componentFiles("button")) + .hasPrefixedFiles("src/main/style/atom/input-text", componentFiles("input-text")) + .hasPrefixedFiles("src/main/style/atom/label", componentFiles("label")) + .hasPrefixedFiles("src/main/style/atom/page-title", componentFiles("page-title")) + .hasPrefixedFiles("src/main/style/atom/paragraph", componentFiles("paragraph")) .hasPrefixedFiles("src/main/style/molecule", "_molecule.scss", "molecule.pug") - .hasPrefixedFiles("src/main/style/molecule/field", "_field.scss", "field.code.pug", "field.md", "field.mixin.pug", "field.render.pug") + .hasPrefixedFiles("src/main/style/molecule/field", componentFiles("field")) + .hasPrefixedFiles("src/main/style/molecule/toast", componentFiles("toast")) .hasPrefixedFiles("src/main/style/organism", "_organism.scss", "organism.pug") - .hasPrefixedFiles("src/main/style/organism/lines", "_lines.scss", "lines.code.pug", "lines.md", "lines.mixin.pug", "lines.render.pug") + .hasPrefixedFiles("src/main/style/organism/columns", componentFiles("columns")) + .hasPrefixedFiles("src/main/style/organism/lines", componentFiles("lines")) + .hasPrefixedFiles("src/main/style/organism/toasts", componentFiles("toasts")) .hasPrefixedFiles("src/main/style/quark", "_placeholder.scss", "_spacing.scss") - .hasPrefixedFiles("src/main/style/template", "template.pug") + .hasPrefixedFiles("src/main/style/template", "_template.scss", "template.pug") + .hasPrefixedFiles("src/main/style/template/template-page", componentFiles("template-page")) + .hasPrefixedFiles("src/main/style/template/toasting", componentFiles("toasting")) .hasPrefixedFiles( "src/main/style/token", "spacing/_spacings.scss", @@ -193,6 +191,7 @@ private static JHipsterModuleAsserter assertThatTikuiModule(ModuleFile proxyFile "_radius.scss", "_size.scss", "_token.scss" - ); + ) + .hasPrefixedFiles("src/main/style/variables", "_breakpoint.scss"); } }