@rubeusteam/rb-angular-components 0.0.14 → 0.0.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rubeusteam/rb-angular-components",
-  "version": "0.0.14",
-  "description": "Inclusão dos estilos compartilhados entre mais de um componente.",
+  "version": "0.0.15",
+  "description": "Inclusão dos",
   "license": "MIT",
   "keywords": [
     "angular",
@@ -35,11 +35,10 @@
   "module": "fesm2022/rubeusteam-rb-angular-components.mjs",
   "typings": "index.d.ts",
   "files": [
-    "fesm2022",
-    "index.d.ts",
-    "lib",
-    "public-api.d.ts",
-    "styles/**/*"
+    "src/lib/styles",
+    "dist",
+    "public_api.ts",
+    "README.md"
   ],
   "exports": {
     "./package.json": {

package/src/lib/styles/README.md

@@ -0,0 +1,83 @@
+
+# Tipografia - rb-angular-components
+
+No diretório styles, contém o arquivo `typography.scss` onde se define **tipografia** da biblioteca `rb-angular-components` contém as classes CSS responsáveis por estilizar os textos nos componentes. As classes estão baseadas no Rubeus Style Guide, que pode ser facilmente aplicado em qualquer elemento de texto na sua aplicação.
+
+## Como utilizar
+
+Existem duas formas de utilizar os estilos de tipografia: inserindo diretamente no arquivo `styles.scss` ou configurando no `angular.json`. Ambas as abordagens permitem que você use as classes de tipografia em toda a sua aplicação.
+
+### Alternativa 1: Inserindo pelo `styles.scss`
+
+A primeira alternativa é importar o arquivo de estilos diretamente no seu arquivo global de estilos, como o `styles.scss` ou `styles.css`. Para isso, basta adicionar a seguinte linha no início do seu arquivo:
+
+```scss
+@import 'node_modules/rb-angular-components/styles/typography.scss';
+
+```
+
+Esta abordagem é a mais simples e é adequada para projetos que já possuem um arquivo global de estilos.
+
+#### Exemplo de uso:
+
+Após a importação do arquivo de tipografia no `styles.scss`, você pode usar as classes de tipografia diretamente nos elementos HTML do seu projeto.
+
+```html
+<div>
+  <h1 class="rb-h1">Título Principal</h1>
+  <p class="rb-font-body rb-large">Texto grande para o corpo.</p>
+  <p class="rb-font-body rb-medium">Texto médio para o corpo.</p>
+  <p class="rb-font-body rb-small">Texto pequeno para o corpo.</p>
+  <h2 class="rb-h2">Subtítulo</h2>
+  <p class="rb-font-body">Texto padrão no corpo.</p>
+</div>
+```
+
+### Alternativa 2: Inserindo pelo `angular.json`
+
+A segunda alternativa é configurar os estilos diretamente no arquivo `angular.json`. Isso garante que o arquivo de tipografia seja carregado globalmente em toda a aplicação, sem a necessidade de importação manual no `styles.scss`.
+
+Para isso, siga os seguintes passos:
+
+1. Abra o arquivo `angular.json`.
+2. Encontre a seção `"styles"` dentro do seu projeto, que fica em `projects -> <nome-do-projeto> -> architect -> build`.
+3. Adicione o caminho do arquivo de tipografia na lista de estilos.
+
+```json
+{
+  "projects": {
+    "<nome-do-projeto>": {
+      "architect": {
+        "build": {
+          "styles": [
+            "src/styles.scss",
+            "node_modules/rb-angular-components/styles/typography.scss",
+          ]
+        }
+      }
+    }
+  }
+}
+```
+
+Com isso, o arquivo de tipografia será carregado automaticamente, sem necessidade de importação explícita no `styles.scss`.
+
+#### Exemplo de uso:
+
+Após adicionar a referência no `angular.json`, você pode usar as classes de tipografia nos elementos HTML, assim como no exemplo anterior:
+
+```html
+<div>
+  <h1 class="rb-font-heading rb-h1">Título Principal</h1>
+  <p class="rb-font-body rb-large">Texto grande para o corpo.</p>
+  <p class="rb-font-body rb-medium">Texto médio para o corpo.</p>
+  <p class="rb-font-body rb-small">Texto pequeno para o corpo.</p>
+  <h2 class="rb-font-heading rb-h2">Subtítulo</h2>
+  <p class="rb-font-body">Texto padrão no corpo.</p>
+</div>
+```
+
+## Conclusão
+
+As classes de tipografia são uma maneira prática e simples de garantir consistência visual no seu projeto. Você pode escolher a melhor abordagem para seu caso, seja inserindo os estilos pelo `styles.scss` ou configurando no `angular.json`. Ambas as opções oferecem flexibilidade e facilidade de manutenção.
+

package/src/lib/styles/_crud.scss

@@ -0,0 +1,22 @@
+.rb-menu-crud {
+  background: rgba(248, 250, 249, 1);
+}
+
+.rb-menu-crud .mat-menu-item,
+.rb-menu-crud .mat-mdc-menu-item {
+  color: rgba(80, 83, 83, 1);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(24px);
+  letter-spacing: var(0.5px);
+}
+
+.rb-menu-crud .mat-icon {
+  color: rgba(80, 83, 83, 1);
+}
+
+.rb-table-container thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}

package/src/lib/styles/_dialog.scss

@@ -0,0 +1,38 @@
+.rb-dialog-header {
+  display: flex;
+  padding: 4px 16px 4px 32px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background: rgba(239, 241, 240, 1);     // Palettes/Neutral 95
+  color: rgba(80, 83, 83, 1);             //Palettes/Neutral 35
+
+  h2{
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 23.4px;
+  }
+}
+
+.rb-dialog-content {
+  text-align: center;
+  color: rgba(14, 18, 17, 1);             // Palettes/Neutral 5
+  display: flex;
+  padding: 32px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+}
+
+.rb-dialog-actions {
+  display: flex;
+  align-self: stretch;
+  padding: 16px 32px;
+  border-top: solid 1px rgba(225, 227, 226, 1); // Palettes/Neutral 90
+}
+
+.width-100 {
+  width: 100%;
+}

package/src/lib/styles/_layout.scss

@@ -0,0 +1,86 @@
+/* Display */
+.rb-row {
+  display: flex;
+}
+
+/* Direction */
+.rb-flex-row {
+  flex-direction: row;
+}
+
+.rb-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.rb-flex-column {
+  flex-direction: column;
+}
+
+.rb-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Align */
+
+.rb-align-items-start {
+  align-items: flex-start;
+}
+
+.rb-align-items-center {
+  align-items: center;
+}
+
+.rb-align-items-end {
+  align-items: flex-end;
+}
+
+.rb-align-items-stretch {
+  align-items: stretch;
+}
+
+.rb-align-items-baseline {
+  align-items: baseline;
+}
+
+
+/* Justify */
+
+.rb-justify-content-start {
+  justify-content: flex-start;
+}
+
+.rb-justify-content-center {
+  justify-content: center;
+}
+
+.rb-justify-content-end {
+  justify-content: flex-end;
+}
+
+.rb-justify-content-around {
+  justify-content: space-around;
+}
+
+.rb-justify-content-between {
+  justify-content: space-between;
+}
+
+.rb-justify-content-evenly {
+  justify-content: space-evenly;
+}
+
+/* Wrap */
+
+.rb-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.rb-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.rb-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+

package/src/lib/styles/_typography.scss

@@ -0,0 +1,62 @@
+:root {
+  --font-plain: 'Roboto', sans-serif;
+  --font-heading: 'Poppins', sans-serif;
+}
+
+/* Fontes de corpo */
+
+.rb-font-body {
+  font-family: var(--font-plain);
+  font-weight: regular;
+}
+
+.rb-large {
+  font-size: 1rem;             // 16px
+  line-height: 1.5rem;         // 24px
+  letter-spacing: 0.03125rem; // 0.5px
+}
+
+.rb-medium {
+  font-size: 0.875rem;          // 14px
+  line-height: 1.25rem;         // 20px
+  letter-spacing: 0.015625rem;  // 0.25px
+}
+
+.rb-small {
+  font-size: 0.75rem;    // 12px
+  line-height: 1rem;     // 16px
+}
+
+
+/* Fontes de títulos */
+
+.rb-font-heading {
+  font-family: var(--font-heading);
+  font-weight: bold;
+}
+
+.rb-h1 {
+  font-size: 2.4375rem;    // 39px
+  line-height: 4.425rem;   // 70.8px
+}
+
+.rb-h2 {
+  font-size: 1.9375rem;    // 31px
+  line-height: 3.525rem;   // 56.4px
+}
+
+.rb-h3 {
+  font-size: 1.5625rem;    // 25px
+  line-height: 2.85rem;    // 45.6px
+}
+
+.rb-h4 {
+  font-size: 1.25rem;      // 20px
+  line-height: 2.25rem;    // 36px
+}
+
+.rb-h5 {
+  font-size: 1rem;         // 16px
+  line-height: 1.8rem;     // 28.8px
+}
+

package/src/lib/styles/index.scss

@@ -0,0 +1,4 @@
+@forward '_crud';
+@forward '_dialog';
+@forward '_layout';
+@forward '_typography';