Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(store-ui): Improve atoms pattern consistency #819

Merged
merged 7 commits into from
Jul 14, 2021

Conversation

igorbrasileiro
Copy link
Contributor

@igorbrasileiro igorbrasileiro commented Jul 14, 2021

What's the purpose of this pull request?

Added:

  • ComponentArgTypes type to improve the typescript check when typing argtypes from components
    image

Changed:

  • Input and TextArea atoms state to variant
  • Deprecated Checkbox export name to UICheckbox, also add new Checkbox atom
  • Molecules and Atoms argtypes, to improve typescript errors.
  • Checkbox export Prop name to CheckboxProps

How it works?

How to test it?

https://github.com/vtex-sites/btglobal.store/pull/708

References

@igorbrasileiro igorbrasileiro requested a review from a team as a code owner July 14, 2021 14:50
@netlify
Copy link

netlify bot commented Jul 14, 2021

✔️ Deploy Preview for storeui ready!

🔨 Explore the source changes: 34001da

🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/60ef35ba47df5f0008f252ca

😎 Browse the preview: https://deploy-preview-819--storeui.netlify.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 14, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 34001da:

Sandbox Source
Store UI Typescript Configuration

@@ -13,18 +14,22 @@ const ButtonTemplate: Story<ButtonProps> = ({ children, onClick, testId }) => (

export const Button = ButtonTemplate.bind({})

const constrols: ComponentArgTypes<ButtonProps> = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const constrols: ComponentArgTypes<ButtonProps> = {
const argTypes: ComponentArgTypes<ButtonProps> = {

table: { disable: true },
},
}

export default {
title: 'Atoms/Button',
component: Button,
argTypes: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
argTypes: {
argTypes,

Comment on lines 32 to 33
...constrols,
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
...constrols,
},


const IconTemplate: Story<IconProps> = ({ style }) => (
<Component style={style} component={<ShoppingCart />} />
)

export const Icon = IconTemplate.bind({})

const controls: ComponentArgTypes<Omit<IconProps, 'component'>> = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const controls: ComponentArgTypes<Omit<IconProps, 'component'>> = {
const argTypes: ComponentArgTypes<Omit<IconProps, 'component'>> = {

table: { disable: true },
},
}

export default {
title: 'Atoms/Icon',
component: Icon,
argTypes: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
argTypes: {
argTypes,

table: { disable: true },
},
}

export default {
title: 'Molecules/Bullets',
component: Bullets,
argTypes: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
argTypes: {
argTypes,

Comment on lines 48 to 49
...controls,
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
...controls,
},

@@ -22,17 +23,21 @@ const CustomIconTemplate: Story<SearchInputProps> = ({

export const CustomIcon = CustomIconTemplate.bind({})

const controls: ComponentArgTypes<SearchInputProps> = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const controls: ComponentArgTypes<SearchInputProps> = {
const argTypes: ComponentArgTypes<SearchInputProps> = {

table: { disable: true },
},
}

export default {
title: 'Molecules/SearchInput',
argTypes: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
argTypes: {
argTypes,

Comment on lines 40 to 41
...controls,
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
...controls,
},

Copy link
Contributor

@tlgimenes tlgimenes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!! after @emersonlaurentino changes, it's lgtm

@igorbrasileiro igorbrasileiro merged commit b4d79e4 into master Jul 14, 2021
@igorbrasileiro igorbrasileiro deleted the chore/store-ui branch July 14, 2021 19:44
Gmantiqueira pushed a commit that referenced this pull request Jul 15, 2021
* Create type to avoid wrong props inside StoryBook argtypes

* Change TextArea state prop to variant

* Change Input state prop to variant

* Improve atoms argtypes type

* Improve molecules argtypes

* Fix Checkbox export

* Fix request changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants