From 86adf4e485f6d04aa73b16284fc58e99c76abccd 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 b95ccaefcde28367bf70b7fb2c97564e9cfeaf0b 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 a4355ee0fe4224fc73e7f40ff23a6d80bc0c2c0d 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 2cc3c4944586e24611df714f536c1e2d5a4f3843 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 327a14125090abb00e49528fd08c2e1c7baf2e86 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 | 5 +---- packages/store-sdk/package.json | 1 + packages/store-ui/src/typings/mdx.d.ts | 4 ---- packages/store-ui/src/typings/utils.d.ts | 5 ----- 4 files changed, 2 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 d27721d5f6..d376164513 100644 --- a/lerna.json +++ b/lerna.json @@ -8,8 +8,5 @@ } }, "changelogPreset": "angular", - "packages": [ - "packages/*", - "themes/*" - ] + "packages": ["packages/*", "themes/*"] } diff --git a/packages/store-sdk/package.json b/packages/store-sdk/package.json index 24c5efa588..c766611ef2 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/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 bd7a55099651588e55546b4c2f0ed18ff3f0d405 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 c09c8a079d7556229a4aef77c9178a6ae1ee96d7 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 5296e179e71f0a294b454fff13930fc5b3106e13 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 c8120a58519677a73807be1f9313c98a287e5e07 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 a4f2ba22baa3e2151009585fc4e2293081e07893 Mon Sep 17 00:00:00 2001 From: VTEX Date: Wed, 15 Sep 2021 15:51:25 -0300 Subject: [PATCH 10/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') }) }) From fa00fd29f1292c3d23b8f85806c5f020b30a2182 Mon Sep 17 00:00:00 2001 From: VTEX Date: Fri, 17 Sep 2021 15:48:55 -0300 Subject: [PATCH 11/11] removing duplicated line in package.json --- packages/store-sdk/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/store-sdk/package.json b/packages/store-sdk/package.json index c766611ef2..24c5efa588 100644 --- a/packages/store-sdk/package.json +++ b/packages/store-sdk/package.json @@ -41,7 +41,6 @@ "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",