From 59e6df294cd96993c0d1c9b6bb16d67fc1507bdf Mon Sep 17 00:00:00 2001 From: VTEX Date: Fri, 3 Sep 2021 16:47:22 -0300 Subject: [PATCH 01/11] Spinner component for loading --- .../src/atoms/Spinner/Spinner.test.tsx | 12 +++++++++++ .../store-ui/src/atoms/Spinner/Spinner.tsx | 21 +++++++++++++++++++ packages/store-ui/src/atoms/Spinner/index.tsx | 1 + .../src/atoms/Spinner/stories/Spinner.mdx | 18 ++++++++++++++++ .../atoms/Spinner/stories/Spinner.stories.tsx | 21 +++++++++++++++++++ themes/theme-b2c-tailwind/src/atoms/index.css | 7 ++++--- .../theme-b2c-tailwind/src/atoms/spinner.css | 13 ++++++++++++ 7 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 packages/store-ui/src/atoms/Spinner/Spinner.test.tsx create mode 100644 packages/store-ui/src/atoms/Spinner/Spinner.tsx create mode 100644 packages/store-ui/src/atoms/Spinner/index.tsx create mode 100644 packages/store-ui/src/atoms/Spinner/stories/Spinner.mdx create mode 100644 packages/store-ui/src/atoms/Spinner/stories/Spinner.stories.tsx create mode 100644 themes/theme-b2c-tailwind/src/atoms/spinner.css diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx new file mode 100644 index 0000000000..1895989955 --- /dev/null +++ b/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx @@ -0,0 +1,12 @@ +import { render } from '@testing-library/react' +import React from 'react' + +import Spinner from './Spinner' + +describe('Spinner', () => { + it('`data-store-spinner` is present', () => { + const { getByTestId } = render() + + expect(getByTestId('loading')).toHaveAttribute('data-store-spinner') + }) +}) diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.tsx new file mode 100644 index 0000000000..f66c8a34bc --- /dev/null +++ b/packages/store-ui/src/atoms/Spinner/Spinner.tsx @@ -0,0 +1,21 @@ +import React, { forwardRef } from 'react' + +export interface SpinnerProps { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ + testId?: string +} + +const Spinner = forwardRef(function Spinner( + { children, testId = 'store-spinner', ...props }, + ref +) { + return ( + + {children} + + ) +}) + +export default Spinner diff --git a/packages/store-ui/src/atoms/Spinner/index.tsx b/packages/store-ui/src/atoms/Spinner/index.tsx new file mode 100644 index 0000000000..0be0188412 --- /dev/null +++ b/packages/store-ui/src/atoms/Spinner/index.tsx @@ -0,0 +1 @@ +export { default } from './Spinner' diff --git a/packages/store-ui/src/atoms/Spinner/stories/Spinner.mdx b/packages/store-ui/src/atoms/Spinner/stories/Spinner.mdx new file mode 100644 index 0000000000..a148bb1c0c --- /dev/null +++ b/packages/store-ui/src/atoms/Spinner/stories/Spinner.mdx @@ -0,0 +1,18 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs' +import Spinner from '../Spinner' + +# Spinner + + + + + +## Props + + + +## CSS Selectors + +```css +[data-store-spinner] {} +``` diff --git a/packages/store-ui/src/atoms/Spinner/stories/Spinner.stories.tsx b/packages/store-ui/src/atoms/Spinner/stories/Spinner.stories.tsx new file mode 100644 index 0000000000..7aafc67daa --- /dev/null +++ b/packages/store-ui/src/atoms/Spinner/stories/Spinner.stories.tsx @@ -0,0 +1,21 @@ +import type { Story } from '@storybook/react' +import React from 'react' + +import type { SpinnerProps } from '../Spinner' +import Component from '../Spinner' +import mdx from './Spinner.mdx' + +const SpinnerTemplate: Story = ({ testId }) => ( + +) + +export const Spinner = SpinnerTemplate.bind({}) + +export default { + title: 'Atoms/Spinner', + parameters: { + docs: { + page: mdx, + }, + }, +} diff --git a/themes/theme-b2c-tailwind/src/atoms/index.css b/themes/theme-b2c-tailwind/src/atoms/index.css index 67a976fc11..52fe6a4da0 100644 --- a/themes/theme-b2c-tailwind/src/atoms/index.css +++ b/themes/theme-b2c-tailwind/src/atoms/index.css @@ -1,10 +1,11 @@ +@import "./badge.css"; @import "./button.css"; @import "./icon.css"; @import "./input.css"; +@import "./overlay.css"; @import "./popover.css"; @import "./price.css"; -@import "./textarea.css"; -@import "./overlay.css"; -@import "./badge.css"; @import "./slider.css"; @import "./skeleton.css"; +@import "./spinner.css"; +@import "./textarea.css"; diff --git a/themes/theme-b2c-tailwind/src/atoms/spinner.css b/themes/theme-b2c-tailwind/src/atoms/spinner.css new file mode 100644 index 0000000000..49483b3e5f --- /dev/null +++ b/themes/theme-b2c-tailwind/src/atoms/spinner.css @@ -0,0 +1,13 @@ +[data-store-spinner] { + @apply block animate-spin text-xs relative; + + border-top: 0.2em solid rgba(0, 0, 0, 0.2); + border-right: 0.2em solid rgba(0, 0, 0, 0.2); + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); + border-left: 0.2em solid #000000; +} + +[data-store-spinner], [data-store-spinner]:after { + @apply h-4 w-4; + border-radius: 50%; +} From 8b0f6e5776dbfa4ccea2bb7531ff218b7e7a3701 Mon Sep 17 00:00:00 2001 From: VTEX Date: Thu, 9 Sep 2021 15:50:29 -0300 Subject: [PATCH 02/11] Spinner exports --- packages/store-ui/src/atoms/Spinner/Spinner.tsx | 2 +- packages/store-ui/src/atoms/Spinner/index.tsx | 1 + packages/store-ui/src/index.ts | 3 +++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.tsx index f66c8a34bc..0578e30e33 100644 --- a/packages/store-ui/src/atoms/Spinner/Spinner.tsx +++ b/packages/store-ui/src/atoms/Spinner/Spinner.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react' -export interface SpinnerProps { +export type SpinnerProps = { /** * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). */ diff --git a/packages/store-ui/src/atoms/Spinner/index.tsx b/packages/store-ui/src/atoms/Spinner/index.tsx index 0be0188412..49db185901 100644 --- a/packages/store-ui/src/atoms/Spinner/index.tsx +++ b/packages/store-ui/src/atoms/Spinner/index.tsx @@ -1 +1,2 @@ export { default } from './Spinner' +export type { SpinnerProps } from './Spinner' diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index 360591eff4..6a75f5138f 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -41,6 +41,9 @@ export type { ListProps } from './atoms/List' export { default as Skeleton } from './atoms/Skeleton' export type { SkeletonProps } from './atoms/Skeleton' +export { default as Spinner } from './atoms/Spinner' +export type { SpinnerProps } from './atoms/Spinner' + // Molecules export { default as Bullets } from './molecules/Bullets' export type { BulletsProps } from './molecules/Bullets' From 88b6b5ad6a9632ad824feb1704e2faa7ad382069 Mon Sep 17 00:00:00 2001 From: Gabriel Antiqueira Date: Mon, 13 Sep 2021 16:13:00 -0300 Subject: [PATCH 03/11] Fix data-testid Co-authored-by: Igor Brasileiro --- packages/store-ui/src/atoms/Spinner/Spinner.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx index 1895989955..e347e06560 100644 --- a/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx +++ b/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx @@ -5,7 +5,7 @@ import Spinner from './Spinner' describe('Spinner', () => { it('`data-store-spinner` is present', () => { - const { getByTestId } = render() + const { getByTestId } = render() expect(getByTestId('loading')).toHaveAttribute('data-store-spinner') }) From a75ccab27339abfc7ec2af69d798afeb58ce91e1 Mon Sep 17 00:00:00 2001 From: Gabriel Antiqueira Date: Mon, 13 Sep 2021 16:13:37 -0300 Subject: [PATCH 04/11] remove explicit children prop Co-authored-by: Igor Brasileiro --- packages/store-ui/src/atoms/Spinner/Spinner.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.tsx index 0578e30e33..7891db13cd 100644 --- a/packages/store-ui/src/atoms/Spinner/Spinner.tsx +++ b/packages/store-ui/src/atoms/Spinner/Spinner.tsx @@ -12,9 +12,7 @@ const Spinner = forwardRef(function Spinner( ref ) { return ( - - {children} - + ) }) From e52060f6528e00331421a7d179c1c3aaf99fc22d Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Tue, 31 Aug 2021 18:52:15 -0300 Subject: [PATCH 05/11] BREAKING CHANGE: Remove deprecated folders (#927) --- lerna.json | 9 +++++---- packages/store-sdk/package.json | 1 + packages/store-ui/package.json | 4 ++++ packages/store-ui/src/typings/mdx.d.ts | 4 ---- packages/store-ui/src/typings/utils.d.ts | 5 ----- 5 files changed, 10 insertions(+), 13 deletions(-) delete mode 100644 packages/store-ui/src/typings/mdx.d.ts delete mode 100644 packages/store-ui/src/typings/utils.d.ts diff --git a/lerna.json b/lerna.json index bfb67aa8b5..dc42c9b3e3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,9 @@ { +<<<<<<< HEAD "version": "1.1.9", +======= + "version": "1.0.0", +>>>>>>> e12d4e161 (BREAKING CHANGE: Remove deprecated folders (#927)) "npmClient": "yarn", "useWorkspaces": true, "command": { @@ -8,8 +12,5 @@ } }, "changelogPreset": "angular", - "packages": [ - "packages/*", - "themes/*" - ] + "packages": ["packages/*", "themes/*"] } diff --git a/packages/store-sdk/package.json b/packages/store-sdk/package.json index 45fbeecf56..266651eafc 100644 --- a/packages/store-sdk/package.json +++ b/packages/store-sdk/package.json @@ -41,6 +41,7 @@ "react": "^17.0.2" }, "devDependencies": { + "@testing-library/react-hooks": "^7.0.2", "@size-limit/preset-small-lib": "^4.10.2", "@testing-library/react-hooks": "^7.0.2", "fake-indexeddb": "^3.1.3", diff --git a/packages/store-ui/package.json b/packages/store-ui/package.json index 030602d514..fc06b50db8 100644 --- a/packages/store-ui/package.json +++ b/packages/store-ui/package.json @@ -71,7 +71,11 @@ "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^13.1.8", "@types/testing-library__jest-dom": "^5.9.5", +<<<<<<< HEAD "@vtex/theme-b2c-tailwind": "^1.1.9", +======= + "@vtex/theme-b2c-tailwind": "^0.373.36", +>>>>>>> e12d4e161 (BREAKING CHANGE: Remove deprecated folders (#927)) "@vtex/tsconfig": "^0.5.0", "react": "^17.0.2", "react-docgen-typescript-loader": "^3.7.2", diff --git a/packages/store-ui/src/typings/mdx.d.ts b/packages/store-ui/src/typings/mdx.d.ts deleted file mode 100644 index 240cbe5a3e..0000000000 --- a/packages/store-ui/src/typings/mdx.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.mdx' { - const MDXComponent: (props) => JSX.Element - export default MDXComponent -} diff --git a/packages/store-ui/src/typings/utils.d.ts b/packages/store-ui/src/typings/utils.d.ts deleted file mode 100644 index 9bcc4f0eff..0000000000 --- a/packages/store-ui/src/typings/utils.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { ArgType } from '@storybook/react' - -export type ComponentArgTypes = { - [K in keyof T]: ArgType -} From 5df437565501a78fc57ea37e5f59c2b51a0d7dde Mon Sep 17 00:00:00 2001 From: Bento Pereira <40964933+bentoper@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:05:46 -0300 Subject: [PATCH 06/11] feat(store-ui): adding list atom (#918) Create List component as an Atom. --- packages/store-ui/src/index.ts | 3 +++ packages/store-ui/src/typings/mdx.d.ts | 4 ++++ packages/store-ui/src/typings/utils.d.ts | 5 +++++ 3 files changed, 12 insertions(+) create mode 100644 packages/store-ui/src/typings/mdx.d.ts create mode 100644 packages/store-ui/src/typings/utils.d.ts diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index 6a75f5138f..3b5128cb1d 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -44,6 +44,9 @@ export type { SkeletonProps } from './atoms/Skeleton' export { default as Spinner } from './atoms/Spinner' export type { SpinnerProps } from './atoms/Spinner' +export { default as List } from './atoms/List' +export type { ListProps } from './atoms/List' + // Molecules export { default as Bullets } from './molecules/Bullets' export type { BulletsProps } from './molecules/Bullets' diff --git a/packages/store-ui/src/typings/mdx.d.ts b/packages/store-ui/src/typings/mdx.d.ts new file mode 100644 index 0000000000..240cbe5a3e --- /dev/null +++ b/packages/store-ui/src/typings/mdx.d.ts @@ -0,0 +1,4 @@ +declare module '*.mdx' { + const MDXComponent: (props) => JSX.Element + export default MDXComponent +} diff --git a/packages/store-ui/src/typings/utils.d.ts b/packages/store-ui/src/typings/utils.d.ts new file mode 100644 index 0000000000..9bcc4f0eff --- /dev/null +++ b/packages/store-ui/src/typings/utils.d.ts @@ -0,0 +1,5 @@ +import type { ArgType } from '@storybook/react' + +export type ComponentArgTypes = { + [K in keyof T]: ArgType +} From 65f3e5e8fb00fd65ff002f33f9c53c4bf6f3503c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= Date: Mon, 13 Sep 2021 10:20:08 -0300 Subject: [PATCH 07/11] feat(store-ui): Add Skeleton Atom (#911) * Add skeleton atom * Move animation to theme * Import tailwind utilities * Update test * Use only 1 div * Update story * Extend HTMLDivElement --- packages/store-ui/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index 3b5128cb1d..7bb97ecfd5 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -47,6 +47,9 @@ export type { SpinnerProps } from './atoms/Spinner' export { default as List } from './atoms/List' export type { ListProps } from './atoms/List' +export { default as Skeleton } from './atoms/Skeleton' +export type { SkeletonProps } from './atoms/Skeleton' + // Molecules export { default as Bullets } from './molecules/Bullets' export type { BulletsProps } from './molecules/Bullets' From 0fb105dc9950acd5e3653908dac17c312074fc06 Mon Sep 17 00:00:00 2001 From: VTEX Date: Thu, 9 Sep 2021 15:50:29 -0300 Subject: [PATCH 08/11] Spinner exports --- packages/store-ui/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index 7bb97ecfd5..f21d065ff4 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -50,6 +50,9 @@ export type { ListProps } from './atoms/List' export { default as Skeleton } from './atoms/Skeleton' export type { SkeletonProps } from './atoms/Skeleton' +export { default as Spinner } from './atoms/Spinner' +export type { SpinnerProps } from './atoms/Spinner' + // Molecules export { default as Bullets } from './molecules/Bullets' export type { BulletsProps } from './molecules/Bullets' From 29246d9b8d9c87bd4c9bc42ffa3b6891b05fecda Mon Sep 17 00:00:00 2001 From: VTEX Date: Mon, 13 Sep 2021 17:31:28 -0300 Subject: [PATCH 09/11] lint --- packages/store-ui/src/atoms/Spinner/Spinner.tsx | 4 +--- packages/store-ui/src/index.ts | 9 --------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.tsx index 7891db13cd..104929e343 100644 --- a/packages/store-ui/src/atoms/Spinner/Spinner.tsx +++ b/packages/store-ui/src/atoms/Spinner/Spinner.tsx @@ -11,9 +11,7 @@ const Spinner = forwardRef(function Spinner( { children, testId = 'store-spinner', ...props }, ref ) { - return ( - - ) + return }) export default Spinner diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index f21d065ff4..6a75f5138f 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -44,15 +44,6 @@ export type { SkeletonProps } from './atoms/Skeleton' export { default as Spinner } from './atoms/Spinner' export type { SpinnerProps } from './atoms/Spinner' -export { default as List } from './atoms/List' -export type { ListProps } from './atoms/List' - -export { default as Skeleton } from './atoms/Skeleton' -export type { SkeletonProps } from './atoms/Skeleton' - -export { default as Spinner } from './atoms/Spinner' -export type { SpinnerProps } from './atoms/Spinner' - // Molecules export { default as Bullets } from './molecules/Bullets' export type { BulletsProps } from './molecules/Bullets' From 4906856d4446111c5ec892d8f6a54dfa4264a6e4 Mon Sep 17 00:00:00 2001 From: VTEX Date: Wed, 15 Sep 2021 15:13:06 -0300 Subject: [PATCH 10/11] fix rebase --- lerna.json | 4 ---- packages/store-ui/package.json | 4 ---- 2 files changed, 8 deletions(-) diff --git a/lerna.json b/lerna.json index dc42c9b3e3..866f79d3a5 100644 --- a/lerna.json +++ b/lerna.json @@ -1,9 +1,5 @@ { -<<<<<<< HEAD "version": "1.1.9", -======= - "version": "1.0.0", ->>>>>>> e12d4e161 (BREAKING CHANGE: Remove deprecated folders (#927)) "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/packages/store-ui/package.json b/packages/store-ui/package.json index fc06b50db8..030602d514 100644 --- a/packages/store-ui/package.json +++ b/packages/store-ui/package.json @@ -71,11 +71,7 @@ "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^13.1.8", "@types/testing-library__jest-dom": "^5.9.5", -<<<<<<< HEAD "@vtex/theme-b2c-tailwind": "^1.1.9", -======= - "@vtex/theme-b2c-tailwind": "^0.373.36", ->>>>>>> e12d4e161 (BREAKING CHANGE: Remove deprecated folders (#927)) "@vtex/tsconfig": "^0.5.0", "react": "^17.0.2", "react-docgen-typescript-loader": "^3.7.2", From 802c06eb41d959a9fec9e0daa41f4b51859b4302 Mon Sep 17 00:00:00 2001 From: VTEX Date: Wed, 15 Sep 2021 15:51:25 -0300 Subject: [PATCH 11/11] Fix Spinner test --- packages/store-ui/src/atoms/Spinner/Spinner.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx b/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx index e347e06560..7db73b52e8 100644 --- a/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx +++ b/packages/store-ui/src/atoms/Spinner/Spinner.test.tsx @@ -5,8 +5,8 @@ import Spinner from './Spinner' describe('Spinner', () => { it('`data-store-spinner` is present', () => { - const { getByTestId } = render() + const { getByTestId } = render() - expect(getByTestId('loading')).toHaveAttribute('data-store-spinner') + expect(getByTestId('store-spinner')).toHaveAttribute('data-store-spinner') }) })