@nutin/cli 1.3.0 → 2.0.0

package/templates/features/stylinNutin/src/styles/base/_mixins.scss.hbs

@@ -1,372 +0,0 @@
-@use "sass:map";
-@use "variables" as *;
-
-@mixin flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-@mixin flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-@mixin flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-@mixin flex-around {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-
-@mixin flex-wrap {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-@mixin grid($columns: 1, $gap: 1rem) {
-  display: grid;
-  grid-template-columns: repeat($columns, 1fr);
-  gap: $gap;
-}
-
-@mixin responsive-grid($default: 1, $breakpoints: (), $gap: 1rem) {
-  @include grid($default, $gap);
-  
-  @each $breakpoint, $columns in $breakpoints {
-    @media (min-width: $breakpoint) {
-      grid-template-columns: repeat($columns, 1fr);
-    }
-  }
-}
-
-@mixin grid-row($span: null, $start: null) {
-  @if $span {
-    grid-row-end: span $span;
-  }
-  @if $start {
-    grid-row-start: $start;
-  }
-}
-
-@mixin grid-column($span: null, $start: null) {
-  @if $span {
-    grid-column-end: span $span;
-  }
-  @if $start {
-    grid-column-start: $start;
-  }
-}
-
-@mixin fr-grid($columns: "1fr", $gap: 1rem) {
-  display: grid;
-  grid-template-columns: unquote($columns);
-  gap: $gap;
-}
-
-@mixin responsive-fr-grid($default: "1fr", $breakpoints: (), $gap: 1rem) {
-  @include fr-grid($default, $gap);
-  
-  @each $breakpoint, $columns in $breakpoints {
-    @media (min-width: $breakpoint) {
-      grid-template-columns: unquote($columns);
-    }
-  }
-}
-
-@mixin fr-grid-rows($rows: "1fr", $gap: 1rem) {
-  grid-template-rows: unquote($rows);
-  row-gap: $gap;
-}
-
-@mixin minmax-fr-grid($min: "200px", $max: "1fr", $repeat: 3, $gap: 1rem) {
-  display: grid;
-  grid-template-columns: repeat($repeat, minmax(unquote($min), unquote($max)));
-  gap: $gap;
-}
-
-@mixin mixed-fr-grid($fixed: null, $flexible: "1fr", $gap: 1rem) {
-  display: grid;
-  grid-template-columns: unquote("#{$fixed} #{$flexible}");
-  gap: $gap;
-}
-
-@mixin advanced-fr-grid(
-  $columns: "1fr",
-  $rows: null,
-  $gap: 1rem,
-  $dense: false
-) {
-  display: grid;
-  grid-template-columns: unquote($columns);
-  
-  @if $rows {
-    grid-template-rows: unquote($rows);
-  }
-  
-  gap: $gap;
-  
-  @if $dense {
-    grid-auto-flow: dense;
-  }
-}
-
-@mixin grid-area($area) {
-  grid-area: $area;
-}
-
-@mixin grid-template-areas($areas) {
-  grid-template-areas: $areas;
-}
-
-@mixin box($w, $h) {
-  width: $w;
-  height: $h;
-}
-
-@mixin margin-y($val) {
-  margin-top: $val;
-  margin-bottom: $val;
-}
-
-@mixin margin-x($val) {
-  margin-left: $val;
-  margin-right: $val;
-}
-
-@mixin padding-y($val) {
-  padding-top: $val;
-  padding-bottom: $val;
-}
-
-@mixin padding-x($val) {
-  padding-left: $val;
-  padding-right: $val;
-}
-
-@mixin text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin font($size, $weight: normal) {
-  font-size: $size;
-  font-weight: $weight;
-}
-
-@mixin line-clamp($lines) {
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-@mixin absolute-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@mixin fixed-full {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-@mixin pos($pos, $t: auto, $r: auto, $b: auto, $l: auto) {
-  position: $pos;
-  top: $t;
-  right: $r;
-  bottom: $b;
-  left: $l;
-}
-
-@mixin bg-cover {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-@mixin bg-gradient($dir, $from, $to) {
-  background: linear-gradient(to $dir, $from, $to);
-}
-
-@mixin box-shadow($shadow...) {
-  box-shadow: $shadow;
-}
-
-@mixin transition($props...) {
-  transition: $props;
-}
-
-@mixin hover-scale($scale: 1.05) {
-  transition: transform 0.2s;
-  &:hover {
-    transform: scale($scale);
-  }
-}
-
-@mixin border($color, $width: 1px, $style: solid) {
-  border: $width $style $color;
-}
-
-@mixin rounded($radius: 4px) {
-  border-radius: $radius;
-}
-
-@mixin hide {
-  display: none !important;
-}
-
-@mixin sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap;
-}
-
-@mixin clearfix {
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin cursor-pointer {
-  cursor: pointer;
-}
-
-@mixin image-cover {
-  -webkit-background-size: 100vw 100vh;
-  -moz-background-size: 100vw 100vh;
-  -o-background-size: 100vw 100vh;
-  background-size: 100vw 100vh;
-  background-attachment: fixed;
-};
-
-@mixin button-disabled {
-  button:disabled {
-    pointer-events: none !important;
-    cursor: not-allowed !important;
-    opacity: 0.6 !important;
-    a {
-      cursor: not-allowed !important;
-    }
-  }
-}
-
-@mixin respond-to($breakpoint) {
-  $value: map.get($breakpoints, $breakpoint);
-
-  @if $value {
-    @media (max-width: $value) {
-      @content;
-    }
-  }
-}
-
-@mixin fade-in($duration: 0.5s, $delay: 0s) {
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  & {
-    animation: fade-in $duration ease-in $delay forwards;
-  }
-}
-
-@mixin slide-in-left($distance: 100%, $duration: 0.6s, $delay: 0s) {
-  @keyframes slide-in-left {
-    from {
-      transform: translateX(-#{$distance});
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-  & {
-    animation: slide-in-left $duration ease-out $delay forwards;
-  }
-}
-
-@mixin scale-up($from: 0.8, $to: 1, $duration: 0.4s, $delay: 0s) {
-  @keyframes scale-up {
-    from {
-      transform: scale(#{$from});
-      opacity: 0;
-    }
-    to {
-      transform: scale(#{$to});
-      opacity: 1;
-    }
-  }
-  & {
-    animation: scale-up $duration ease $delay forwards;
-  }
-}
-
-@mixin bounce-in($duration: 0.8s, $delay: 0s) {
-  @keyframes bounce-in {
-    0% { transform: scale(0.9); opacity: 0; }
-    60% { transform: scale(1.05); opacity: 1; }
-    80% { transform: scale(0.95); }
-    100% { transform: scale(1); }
-  }
-
-  & {
-    animation: bounce-in $duration ease-out $delay forwards;
-  }
-}
-
-@mixin spin($duration: 1s, $delay: 0s, $direction: normal) {
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  & {
-    animation: spin $duration linear $delay infinite;
-    animation-direction: $direction;
-  }
-}
-
-@mixin pulse($duration: 1.5s, $delay: 0s) {
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-
-  & {
-    animation: pulse $duration ease-in-out $delay infinite;
-  }
-}
-
-@mixin shake($duration: 0.5s, $delay: 0s) {
-  @keyframes shake {
-    0%, 100% { transform: translateX(0); }
-    20%, 60% { transform: translateX(-10px); }
-    40%, 80% { transform: translateX(10px); }
-  }
-
-  & {
-    animation: shake $duration ease-in-out $delay;
-  }
-}

package/templates/features/stylinNutin/src/styles/components/_index.scss.hbs

@@ -1,3 +0,0 @@
-// global components style export
-
-// @forward "my-component";

package/templates/features/stylinNutin/src/styles/core/_utilities.scss.hbs

@@ -1,240 +0,0 @@
-@use "sass:map";
-@use "variables" as *;
-@use "mixins";
-
-// Utility classes prefix : 'u-'
-
-// font size
-@each $name, $size in $font-sizes {
-  .u-font-#{$name} {
-    font-size: $size;
-  }
-}
-
-// padding
-@each $name, $space in $spacings {
-  .u-padd-x-#{$name} {
-    padding-left: $space;
-    padding-right: $space;
-  }
-}
-@each $name, $space in $spacings {
-  .u-padd-y-#{$name} {
-    padding-top: $space;
-    padding-bottom: $space;
-  }
-}
-
-//margin
-@each $name, $space in $spacings {
-  .u-marg-x-#{$name} {
-    margin-left: $space;
-    margin-right: $space;
-  }
-}
-@each $name, $space in $spacings {
-  .u-marg-y-#{$name} {
-    margin-top: $space;
-    margin-bottom: $space;
-  }
-}
-
-//border-radius
-@each $name, $radius in $border-radius {
-  .u-rounded-#{$name} {
-    border-radius: $radius;
-  }
-}
-
-// box-shadow
-@each $name, $shadow in $shadows {
-  .u-shadow-#{$name} {
-    box-shadow: $shadow;
-  }
-}
-
-// transition
-@each $name, $transition in $transitions {
-  .u-transition-#{$name} {
-    transition: $transition;
-  }
-}
-
-// color
-.u-color-base {
-  color: $text-color;
-}
-
-.u-color-prim {
-  color: $primary-color;
-}
-
-.u-color-sec {
-  color: $secondary-color;
-}
-
-.u-color-bg {
-  color: $background-color;
-}
-
-// font weight / style
-.u-italic {
-  font-style: italic;
-}
-
-.u-bold {
-  font-weight: bold;
-}
-
-.u-font-secondary {
-  font-family: $secondary-font;
-}
-
-.u-font-primary {
-  font-family: $primary-font;
-}
-
-// text
-.u-text-center {
-  text-align: center;
-}
-
-.u-text-right {
-  text-align: right;
-}
-
-.u-text-left {
-  text-align: left;
-}
-
-// flex
-.u-flex-center {
-  @include mixins.flex-center;
-}
-
-.u-flex-column {
-  @include mixins.flex-column;
-}
-
-.u-flex-row {
-  @include mixins.flex-row;
-}
-
-.u-flex-between {
-  @include mixins.flex-between;
-}
-
-.u-flex-around {
-  @include mixins.flex-around;
-}
-
-.u-flex-wrap {
-  @include mixins.flex-wrap;
-}
-
-//
-.u-ellipsis {
-  @include mixins.text-ellipsis;
-}
-
-.u-clamp-2 {
-  @include mixins.line-clamp(2);
-}
-
-// positioning
-.u-absolute-center {
-  @include mixins.absolute-center;
-}
-
-.u-fixed-full {
-  @include mixins.fixed-full;
-}
-
-// backgrounds
-.u-bg-base {
-  background-color: $background-color;
-}
-
-.u-bg-inherit {
-  background-color: inherit;
-}
-
-.u-bg-primary {
-  background-color: $primary-color;
-}
-
-.u-bg-secondary {
-  background-color: $secondary-color;
-}
-
-.u-bg-gradient-right {
-  @include mixins.bg-gradient(right, rgba($primary-color, .7), rgba($secondary-color, .7));
-}
-
-.u-bg-gradient-left {
-  @include mixins.bg-gradient(left, rgba($primary-color, .7), rgba($secondary-color, .7));
-}
-
-.u-bg-gradient-top {
-  @include mixins.bg-gradient(top, rgba($primary-color, .7), rgba($secondary-color, .7));
-}
-
-.u-bg-gradient-bottom {
-  @include mixins.bg-gradient(bottom, rgba($primary-color, .7), rgba($secondary-color, .7));
-}
-
-.u-bg-cover {
-  @include mixins.bg-cover;
-}
-
-.u-img-cover {
-  @include mixins.image-cover;
-}
-
-// animations
-.u-transition {
-  @include mixins.transition(all 0.3s ease);
-}
-
-.u-hover-scale {
-  @include mixins.hover-scale;
-}
-
-// borders / radius
-.u-border {
-  @include mixins.border($primary-color);
-}
-
-.u-border-none {
-  border: 0px solid white;
-}
-
-.u-rounded {
-  @include mixins.rounded;
-}
-
-// utility
-.u-btn-disabled {
-  @include mixins.button-disabled;
-}
-
-.u-hide {
-  @include mixins.hide;
-}
-
-.u-sr-only {
-  @include mixins.sr-only;
-}
-
-.u-clearfix {
-  @include mixins.clearfix;
-}
-
-.u-pointer {
-  @include mixins.cursor-pointer;
-}
-
-.u-pre-wrap {
-  white-space:pre-wrap;
-  overflow-wrap:break-word;
-}

package/templates/features/stylinNutin/tools/generator/templates/scss.template.js.hbs

@@ -1,4 +0,0 @@
-export const scssTemplate = () => `@use "sass:map";
-@use "variables" as *;
-@use "mixins";
-`;

package/templates/features/template/src/app/views/home/home.view.html.hbs

@@ -1,56 +0,0 @@
-<div 
-{{#if stylinNutin}}
-  class="u-flex-center u-flex-column u-padd-y-large"
-{{else}}
-  style="display:flex;justify-content:center;align-items:center;flex-direction:column;padding-top:1rem;padding-bottom:1rem;"
-{{/if}}>
-  <h1 
-  {{#if i18n}}
-    data-i18n="home.title"
-  {{/if}} 
-  {{#if stylinNutin}}
-    class="u-color-prim u-font-largest u-bold u-font-secondary"
-    style="color:#6C8359;"
-  {{else}}
-    style="color:#6C8359;font-size:2rem;font-weight:bold;"
-  {{/if}}
-  >{{#unless i18n}}{{projectName}}{{/unless}}</h1>
-  <span 
-  {{#if stylinNutin}}
-    class="u-italic u-font-smallest u-font-secondary"
-  {{else}}
-    style="font-style:italic;font-size:0.75rem;"
-  {{/if}}
-  >nutin v{{version}}</span>
-  <img src="/assets/images/logo-trans.avif" width=250 height=250 alt="nutin's logo. A frame opened on the top left through which a plant grows.">
-  <div 
-  {{#if i18n}}
-    data-i18n="home.ready" 
-  {{/if}}
-  {{#if stylinNutin}}
-    class="u-font-large u-padd-y-medium" 
-    style="margin-top:-2rem;"
-  {{else}}
-    style="font-size:1.5rem;paddin-top:1rem;padding-bottom:1rem;margin-top:2rem;"
-  {{/if}}
-  >{{#unless i18n}}You're all set !{{/unless}}</div>
-  <div 
-  {{#if i18n}}
-    data-i18n="home.enjoy" 
-  {{/if}}
-  {{#if stylinNutin}}
-    class="u-font-large u-color-sec"
-    style="color:#C56648;"
-  {{else}}
-    style="color:#C56648;font-size:1.5rem;"
-  {{/if}}
-  >{{#unless i18n}}Happy Coding 🎉{{/unless}}</div>
-  <div 
-  {{#if stylinNutin}}
-    class="u-italic u-font-secondary u-font-small" 
-    {{#unless transition}}style="position:fixed;bottom:0;"{{/unless}}
-  {{else}}
-    style="font-size:.875rem;font-style:italic;{{#unless transition}}position:fixed;bottom:0;{{/unless}}"
-  {{/if}}
-  >so lightweight it's <span {{#if stylinNutin}}class="u-bold"{{else}}style="font-weight:bold;"{{/if}}>nutin</span>.</div>
-</div>

package/templates/features/template/src/app/views/not-found/not-found.view.html.hbs

@@ -1,19 +0,0 @@
-<div 
-{{#if stylinNutin}}
-  class="u-flex-center u-flex-column u-padd-y-large"
-{{else}}
-  style="display:flex;justify-content:center;align-items:center;flex-direction:column"
-{{/if}}>
-  <h1 
-  {{#if i18n}}
-    data-i18n="not-found.content" 
-  {{/if}}
-  {{#if stylinNutin}}
-    class="u-color-sec u-font-largest u-bold u-font-secondary"
-  {{else}}
-    style="font-size:2rem;font-weight:bold;"
-  {{/if}}
-  >{{#unless i18n}}Page Not Found{{/unless}}</h1>
-  <img src="/assets/images/logo-small-trans.avif" width=250 height=250 alt="nutin's small logo with a growing plant.">
-  <div data-component="home"></div>
-</div>