feat: add html block

This commit is contained in:
marlon passos 2023-01-20 10:07:13 -03:00
parent 7215f9c893
commit 236775c03b
9 changed files with 102 additions and 37 deletions

View File

@ -1,25 +0,0 @@
{
"projectName": "store-theme",
"projectOwner": "vtex-apps",
"repoType": "github",
"repoHost": "https://github.com",
"files": [
"docs/README.md"
],
"imageSize": 100,
"commit": true,
"commitConvention": "none",
"contributors": [
{
"login": "hugocostadev",
"name": "Hugo Costa",
"avatar_url": "https://avatars2.githubusercontent.com/u/20212776?v=4",
"profile": "http://www.hugoccosta.com",
"contributions": [
"doc"
]
}
],
"contributorsPerLine": 7,
"skipCi": true
}

View File

@ -1,5 +1,5 @@
{ {
"vendor": "agenciamagma", "vendor": "agenciam3",
"name": "store-theme", "name": "store-theme",
"version": "5.1.0", "version": "5.1.0",
"builders": { "builders": {

View File

@ -0,0 +1,41 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
children?: ReactNode,
/**
* Qual tag Html que deseja que seja usar
*
* @default div
*/
tag?: keyof React.ReactHTML
/**
* Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/)
*/
tachyonsClasses?: string
/**
* Se caso quiser usar esse componente
* para adicinar um texto simples
*/
text?: string
/**
* Tag ID para
*/
testId?: string
}
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES);
const props = {
className: `${handles.html} ${classes}`,
"data-testid": testId
};
const Children = <>{children}{text}</>;
const Element = React.createElement(tag, props, Children);
return <>{Element}</>;
};

View File

@ -0,0 +1,45 @@
# HTML
## Descrição
Uma componente que permite que possamos adicionar tags html direto do JSON. Para podermos estar estruturando o projeto de nossa maneira.
Basicamente esse componente
## Característica
- ✔ Compatível com CSS Handles
- ✔ Menos linha de código renderizada no HTML em comparado ao Flex.layout
- ✔ Tag HTML dinâmica para cada caso. Podendo adicionar semântica
- ✔ Possibilidade adicionar Textos
## Estrutura
```html
<{qualquerTagHtml} class="{acountName}-{appName}-1-x-html {acountName}-{appName}-new-theme-1-x-html--{suaBlockClass} {qualquer classe extra }">
{children}
</{qualquerTagHtml}>
```
## HTML vs FLEX.LAYOUT
### html
```html
<div class="ckm3sintese-ckm3sintese-new-theme-1-x-html">
{children}
<div>
```
### flex
```html
<div class="vtex-flex-layout-0-x-flexRow">
<section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
<div class="vtex-flex-layout-0-x-flexRowContent pr7">
<div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
{children}
</div>
</div>
</section>
</div>
```

1
react/html.ts Normal file
View File

@ -0,0 +1 @@
export { Html as default } from "./components/Html"

View File

@ -28,6 +28,7 @@
"vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout", "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text", "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide", "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context" "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
} }
} }

View File

@ -774,6 +774,10 @@ use-isomorphic-layout-effect@^1.1.2:
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
version "1.0.0"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
"vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context": "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
version "0.10.0" version "0.10.0"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"

View File

@ -5,14 +5,12 @@
"video#about-us" "video#about-us"
] ]
}, },
"flex-layout.row#about-us": { "flex-layout.row#about-us": {
"children": [ "children": [
"image#mobile-phone", "image#mobile-phone",
"flex-layout.col#text-about-us" "flex-layout.col#text-about-us"
] ]
}, },
"flex-layout.col#text-about-us": { "flex-layout.col#text-about-us": {
"children": [ "children": [
"rich-text#title-about-us", "rich-text#title-about-us",
@ -23,15 +21,12 @@
"preventVerticalStretch": true "preventVerticalStretch": true
} }
}, },
"rich-text#title-about-us": { "rich-text#title-about-us": {
"props": { "props": {
"text": "text": "# Create meaningful and relevant experiences.",
"# Create meaningful and relevant experiences.",
"blockClass": "title" "blockClass": "title"
} }
}, },
"image#mobile-phone": { "image#mobile-phone": {
"props": { "props": {
"src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png", "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",

View File

@ -1,5 +1,8 @@
{ {
"example-component":{ "example-component": {
"component": "Example" "component": "Example"
} },
"html": {
"component": "html"
}
} }