diff --git a/.all-contributorsrc b/.all-contributorsrc deleted file mode 100644 index 6e5f6fe..0000000 --- a/.all-contributorsrc +++ /dev/null @@ -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 -} diff --git a/manifest.json b/manifest.json index a2cde0d..176e8cc 100644 --- a/manifest.json +++ b/manifest.json @@ -1,5 +1,5 @@ { - "vendor": "agenciamagma", + "vendor": "agenciam3", "name": "store-theme", "version": "5.1.0", "builders": { diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx new file mode 100644 index 0000000..d60d7f5 --- /dev/null +++ b/react/components/Html/index.tsx @@ -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}; +}; diff --git a/react/components/Html/readme.md b/react/components/Html/readme.md new file mode 100644 index 0000000..53ed2b7 --- /dev/null +++ b/react/components/Html/readme.md @@ -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} + +``` + + +## HTML vs FLEX.LAYOUT + +### html +```html +
+ {children} +
+``` + +### flex +```html +
+
+
+
+ {children} +
+
+
+
+``` diff --git a/react/html.ts b/react/html.ts new file mode 100644 index 0000000..e6e935c --- /dev/null +++ b/react/html.ts @@ -0,0 +1 @@ +export { Html as default } from "./components/Html" diff --git a/react/package.json b/react/package.json index 65e0c17..aa90575 100644 --- a/react/package.json +++ b/react/package.json @@ -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.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.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" } } diff --git a/react/yarn.lock b/react/yarn.lock index 45d03d7..d4b6c43 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -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" 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": 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" diff --git a/store/blocks/about-us.json b/store/blocks/about-us.json index fcd9f51..5b692bd 100644 --- a/store/blocks/about-us.json +++ b/store/blocks/about-us.json @@ -5,14 +5,12 @@ "video#about-us" ] }, - "flex-layout.row#about-us": { "children": [ "image#mobile-phone", "flex-layout.col#text-about-us" ] }, - "flex-layout.col#text-about-us": { "children": [ "rich-text#title-about-us", @@ -23,15 +21,12 @@ "preventVerticalStretch": true } }, - "rich-text#title-about-us": { "props": { - "text": - "# Create meaningful and relevant experiences.", + "text": "# Create meaningful and relevant experiences.", "blockClass": "title" } }, - "image#mobile-phone": { "props": { "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png", diff --git a/store/interfaces.json b/store/interfaces.json index 3c4c0db..66feae9 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,5 +1,8 @@ { - "example-component":{ - "component": "Example" - } -} \ No newline at end of file + "example-component": { + "component": "Example" + }, + "html": { + "component": "html" + } +}