feat(textarea): novo componente (#22)

* Novo componente * feat: correção da versão do typescript Tem uma issue no typescript porque está travando o build. microsoft/TypeScript#45642 rollup/rollup#4213
animaliads · Sep 10, 2021 · 50cd241 · 50cd241
1 parent 08ce1fc
commit 50cd241
Show file tree

Hide file tree

Showing 17 changed files with 909 additions and 4 deletions.
diff --git a/.github/workflows/pr_ci.yml b/.github/workflows/pr_ci.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Test
         run: npm run test
   chromatic:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
 
     steps:
       - uses: actions/checkout@v2

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@animaliads/web-components",
-  "version": "1.1.0-dev.14",
+  "version": "1.1.0-dev.16",
   "description": "Repositório de Web Components do Animalia DS",
   "main": "src/index.js",
   "tag": "dev",
@@ -21,8 +21,9 @@
     "publish:radio": "npm publish ./dist/packages/radio --access public",
     "publish:button": "npm publish ./dist/packages/button --access public",
     "publish:checkbox": "npm publish ./dist/packages/checkbox --access public",
+    "publish:textarea": "npm publish ./dist/packages/textarea --access public",
     "publish:bundle": "npm publish ./dist/packages/animalia-web-components --access public",
-    "publish:all": "npm run publish:button && npm run publish:link && npm run publish:checkbox && npm run publish:radio && npm run publish:bundle",
+    "publish:all": "npm run publish:button && npm run publish:link && npm run publish:checkbox && npm run publish:radio && npm run publish:textarea && npm run publish:bundle",
     "build:publish": "npm run build && npm run publish:all",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -85,6 +86,6 @@
     "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.1.3"
+    "typescript": "4.3.5"
   }
 }
diff --git a/packages/animalia-web-components/src/index.ts b/packages/animalia-web-components/src/index.ts
@@ -1,4 +1,5 @@
 export * from '../../button/src/index';
+export * from '../../textarea/src/index';
 export * from '../../link/src/index';
 export * from '../../radio/src/index';
 export * from '../../checkbox/src/index';
diff --git a/packages/textarea/README.md b/packages/textarea/README.md
@@ -0,0 +1,27 @@
+# `<ani-textarea>`
+
+Componente de textarea desenvolvido com [Web Components](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components).
+
+## Instalação
+
+```
+npm i @animaliads/ani-textarea
+```
+
+## Utilização
+
+```
+<ani-textarea></ani-textarea>
+```
+
+## Propriedades
+
+[EM BREVE]
+
+## Eventos
+
+[EM BREVE]
+
+## Customização
+
+[EM BREVE]
diff --git a/packages/textarea/package.json b/packages/textarea/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@animaliads/ani-textarea",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Textarea do Animalia DS",
+  "tag": "dev",
+  "keywords": [
+    "javascript",
+    "design system",
+    "web components",
+    "textarea"
+  ],
+  "main": "textarea/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/animaliads/animalia-web-components.git",
+    "directory": "packages/textarea"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@animaliads/animalia-brand": "^1.0.0",
+    "@animaliads/css-tokens": "^1.0.0",
+    "tslib": "^2.0.3"
+  },
+  "devDependencies": {
+    "eslint": "^7.16.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/textarea/src/field.ts b/packages/textarea/src/field.ts
@@ -0,0 +1,13 @@
+export interface Field {
+  readonly placeholder: string;
+
+  readonly value: string;
+
+  readonly disabled: string;
+
+  readonly readonly: string;
+
+  readonly maxlength: string;
+
+  readonly minlength: string;
+}
diff --git a/packages/textarea/src/index.ts b/packages/textarea/src/index.ts
@@ -0,0 +1 @@
+export * from './textarea';
diff --git a/packages/textarea/src/stories/best-practices.mdx b/packages/textarea/src/stories/best-practices.mdx
@@ -0,0 +1 @@
+## Boas práticas
diff --git a/packages/textarea/src/stories/code.mdx b/packages/textarea/src/stories/code.mdx
@@ -0,0 +1,46 @@
+import LiveDemoComponent from './../../../../stories/helpers/components/live-demo.tsx';
+
+## Desenvolvimento
+
+### Instalação do pacote
+
+Caso você já tenha feito o passo-a-passo descrito em [Começando](?path=/docs/começando--page),
+você pode pular esta instalação e ir direto para o tópico [Como utilizar](#como-utilizar).
+
+Você pode instalar o componente de forma isolada, conforme o exemplo abaixo:
+
+```
+npm install @animaliads/ani-textarea
+```
+
+### Como utilizar
+
+Para utilizar este componente na sua aplicação você precisa importar o arquivo principal.
+Essa importação irá variar conforme o tipo de aplicação que você está utilizando, por exemplo: angular, react ou
+somente javascript.
+
+Depois de importar o arquivo principal, basta adicionar a tag `ani-textarea` no seu código:
+
+```html
+<ani-textarea>exemplo de label</ani-textarea>
+```
+
+> Para utilizar com o tema padrão, é necessário instalar e utilizar os pacotes `@animaliads/animalia-brand`
+> e `@animaliads/css-tokens`. Você pode ver um exemplo de utilização no [Live Demo](#live-demo).
+
+Para customizar o tema do componente, você pode estar utilizando as propriedades customizáveis
+da seguinte forma:
+
+```css
+ani-textarea {
+  --color: green;
+}
+```
+
+Para saber quais são as propriedades disponíveis, consulte [propriedades customizáveis](#propriedades-customizáveis).
+
+### Live Demo
+
+<LiveDemoComponent react="https://stackblitz.com/edit/react-ani-textarea?embed=1&file=src/App.js" />
+
+Para saber a lista de propriedades e eventos, acesse o [guia de referencia de API](/docs/api-textarea--sample).
diff --git a/packages/textarea/src/stories/custom-properties.mdx b/packages/textarea/src/stories/custom-properties.mdx
@@ -0,0 +1,21 @@
+## Propriedades customizáveis
+
+O componente de textarea possui propriedades customizáveis, que possibilitam fazer alterações, de acordo com a marca ou o tema a ser utilizado. Com isso, garantimos uma consistência ao Design System, sem perder a identidade de cada marca.
+
+Possui cinco estados, que se modificam de acordo com a interação do usuário, sendo eles: _Normal_, _Hover_, _Focused_, _Disabled_ e _Read-only_.
+
+| Propriedade                | Descrição                                                | Valor padrão             |
+| -------------------------- | -------------------------------------------------------- | ------------------------ |
+| `--font-family`            | família tipográfica                                      | $font-family-text        |
+| `--font-size`              | tamanho da fonte                                         | $font-size-default       |
+| `--text-color-placeholder` | cor de texto do placeholder                              | $color-neutral-light-30  |
+| `--color`                  | cor predominante (borda)                                 | $color-neutral-dark-70   |
+| `--background`             | cor do background                                        | $color-neutral-light-05  |
+| `--text-color`             | cor do texto                                             | $color-neutral-dark-90   |
+| `--color-hover`            | cor predominante (borda) no estado hover                 | $color-action-hover      |
+| `--background-hover`       | cor do background no estado hover                        | $color-brand-01-lightest |
+| `--color-focused`          | cor predominante (borda) no estado focus                 | $color-action-default    |
+| `--outline-color-focused`  | cor do outline do focus                                  | $color-action-focus      |
+| `--color-disabled`         | cor predominante (borda) no estado desabilitado          | $color-action-disabled   |
+| `--background-disabled`    | cor do background no estado hover no estado desabilitado | $color-neutral-light-20  |
+| `--text-color-disabled`    | cor do texto no estado desabilitado                      | $color-neutral-dark-70   |
diff --git a/packages/textarea/src/stories/general.mdx b/packages/textarea/src/stories/general.mdx
@@ -0,0 +1,3 @@
+# Text Area
+
+## Visão geral
diff --git a/packages/textarea/src/stories/textarea.stories.mdx b/packages/textarea/src/stories/textarea.stories.mdx
@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { html } from 'lit-html';
+
+import '../textarea';
+
+import Code from './code.mdx';
+import BestPractices from './best-practices.mdx';
+import General from './general.mdx';
+import CustomProperties from './custom-properties.mdx';
+
+<Meta
+  title="Componentes/Textarea"
+  parameters={{ previewTabs: { canvas: { hidden: true } } }}
+/>
+
+<Story name="Visão geral" height="0">
+  {html``}
+</Story>
+
+<General />
+
+<Story name="Boas práticas" height="0">
+  {html``}
+</Story>
+
+<BestPractices />
+
+<Story name="Desenvolvimento" height="0">
+  {html``}
+</Story>
+
+<Code />
+
+<Story name="Propriedades customizáveis" height="0">
+  {html``}
+</Story>
+
+<CustomProperties />