✨ New settings #14
✨ New settings #14
Conversation
WalkthroughThe updates enhance Storybook's handling of themes, localization, and component configuration, alongside new addon integrations. Changes in the components directory introduce new UI elements and expand the export structure. Documentation and example files have been added or updated to align with these enhancements, ensuring a comprehensive and dynamic user experience. Changes
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 58
Out of diff range and nitpick comments (12)
src/components/inputs/sq-input-birthday/__docs__/sq-input-birthday.component.example.tsx (1)
1-2: Ensure consistent import usage.Consider using destructuring for React imports to maintain consistency if it's a standard in your codebase.
src/components/inputs/sq-input-document-cpf/__docs__/sq-input-document-cpf.component.example.tsx (1)
1-2: Ensure consistent import usage.Consider using destructuring for React imports to maintain consistency if it's a standard in your codebase.
src/components/inputs/sq-selector/__docs__/sq-selector.component.example.tsx (1)
1-2: Ensure consistent import usage.Consider using destructuring for React imports to maintain consistency if it's a standard in your codebase.
src/components/inputs/sq-input-name/__docs__/sq-input-name.component.example.tsx (1)
1-3: Ensure consistent import usage.Consider using destructuring for React imports to maintain consistency if it's a standard in your codebase.
src/components/sq-modal/__docs__/sq-modal.component.example.tsx (2)
11-12: Ensure consistent button styling and behavior.The
Cancelbutton is styled withcolor="neutral"andinverted, but theConfirmbutton lacks similar styling. Consider aligning the styles for consistency.
29-29: Check the usage of padding in thebodyelement.The
bodyelement uses a classp-3which implies padding. Ensure this aligns with the design specifications.src/components/buttons/sq-button-back/sq-button-back.component.tsx (1)
36-45: The click handling logic is robust, considering various scenarios for navigation. Consider adding comments to explain the conditions for better maintainability.src/components/buttons/sq-button-social-network/sq-button-social-network.component.tsx (1)
40-78: The logic for handling social network selection and state updates is robust. Consider adding comments to explain the switch-case conditions for better maintainability.src/components/inputs/sq-input-name/sq-input-name.component.tsx (1)
79-79: Avoid disabling ESLint rules without specific justification; it can lead to potential bugs being overlooked.Consider removing the ESLint disable line if not necessary, or provide a specific reason for disabling it.
src/components/inputs/sq-input-birthday/sq-input-birthday.component.tsx (1)
86-86: Avoid disabling ESLint rules without specific justification; it can lead to potential bugs being overlooked.Consider removing the ESLint disable line if not necessary, or provide a specific reason for disabling it.
src/components/inputs/sq-select/sq-select.component.tsx (1)
70-70: Avoid disabling ESLint rules without specific justification; it can lead to potential bugs being overlooked.Consider removing the ESLint disable line if not necessary, or provide a specific reason for disabling it.
src/components/inputs/sq-input-password/sq-input-password.component.tsx (1)
21-23: ThePasswordPropsinterface extendsPropsbut only adds a single property. Consider whether this extension is necessary or if it could be simplified.
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (29)
package-lock.jsonis excluded by!**/package-lock.json,!**/*.jsonpackage.jsonis excluded by!**/*.jsonsrc/assets/img/jpg/avatar.jpgis excluded by!**/*.jpg,!**/*.jpgsrc/assets/img/jpg/image.jpgis excluded by!**/*.jpg,!**/*.jpgsrc/assets/img/png/squid.pngis excluded by!**/*.png,!**/*.pngsrc/components/buttons/sq-button-copy-text/locales/en.jsonis excluded by!**/*.jsonsrc/components/buttons/sq-button-copy-text/locales/es.jsonis excluded by!**/*.jsonsrc/components/buttons/sq-button-copy-text/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-birthday/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-birthday/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-birthday/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-digits/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-digits/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-digits/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-cnpj/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-cnpj/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-cnpj/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-cpf/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-cpf/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-cpf/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-international/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-international/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-international/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-rut/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-rut/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-document-rut/locales/pt.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-name/locales/en.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-name/locales/es.jsonis excluded by!**/*.jsonsrc/components/inputs/sq-input-name/locales/pt.jsonis excluded by!**/*.json
Files selected for processing (155)
- .storybook/decorators.tsx (1 hunks)
- .storybook/main.ts (1 hunks)
- .storybook/manager-head.html (1 hunks)
- .storybook/manager.tsx (1 hunks)
- .storybook/preview.tsx (2 hunks)
- .storybook/theme-context.tsx (1 hunks)
- .storybook/theme-observable.tsx (1 hunks)
- .storybook/themes/squid-theme-dark.tsx (1 hunks)
- README.md (2 hunks)
- src/components/buttons/sq-button-back/docs/sq-button-back.component.example.tsx (1 hunks)
- src/components/buttons/sq-button-back/docs/sq-button-back.component.stories.tsx (1 hunks)
- src/components/buttons/sq-button-back/index.ts (1 hunks)
- src/components/buttons/sq-button-back/sq-button-back.component.scoped.scss (1 hunks)
- src/components/buttons/sq-button-back/sq-button-back.component.tsx (1 hunks)
- src/components/buttons/sq-button-copy-text/docs/sq-button-copy-text.component.example.tsx (1 hunks)
- src/components/buttons/sq-button-copy-text/docs/sq-button-copy-text.component.stories.tsx (1 hunks)
- src/components/buttons/sq-button-copy-text/index.ts (1 hunks)
- src/components/buttons/sq-button-copy-text/sq-button-copy-text.component.scoped.scss (1 hunks)
- src/components/buttons/sq-button-copy-text/sq-button-copy-text.component.tsx (1 hunks)
- src/components/buttons/sq-button-social-network/docs/sq-button-social-network.component.example.tsx (1 hunks)
- src/components/buttons/sq-button-social-network/docs/sq-button-social-network.component.stories.tsx (1 hunks)
- src/components/buttons/sq-button-social-network/index.ts (1 hunks)
- src/components/buttons/sq-button-social-network/sq-button-social-network.component.tsx (1 hunks)
- src/components/buttons/sq-button/docs/sq-button.component.example.tsx (2 hunks)
- src/components/buttons/sq-button/docs/sq-button.component.stories.tsx (2 hunks)
- src/components/index.ts (2 hunks)
- src/components/inputs/sq-input-birthday/docs/sq-input-birthday.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-birthday/docs/sq-input-birthday.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-birthday/index.ts (1 hunks)
- src/components/inputs/sq-input-birthday/sq-input-birthday.component.tsx (1 hunks)
- src/components/inputs/sq-input-date/docs/sq-input-date.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-digits/docs/sq-input-digits.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-digits/docs/sq-input-digits.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-digits/index.ts (1 hunks)
- src/components/inputs/sq-input-digits/sq-input-digits.component.scoped.scss (1 hunks)
- src/components/inputs/sq-input-digits/sq-input-digits.component.scss (1 hunks)
- src/components/inputs/sq-input-digits/sq-input-digits.component.tsx (1 hunks)
- src/components/inputs/sq-input-document-cnpj/docs/sq-input-document-cnpj.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-document-cnpj/docs/sq-input-document-cnpj.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-document-cnpj/index.ts (1 hunks)
- src/components/inputs/sq-input-document-cnpj/sq-input-document-cnpj.component.tsx (1 hunks)
- src/components/inputs/sq-input-document-cpf/docs/sq-input-document-cpf.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-document-cpf/docs/sq-input-document-cpf.stories.tsx (1 hunks)
- src/components/inputs/sq-input-document-cpf/index.ts (1 hunks)
- src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.scoped.scss (1 hunks)
- src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.scss (1 hunks)
- src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.tsx (1 hunks)
- src/components/inputs/sq-input-document-international/docs/sq-input-document-international.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-document-international/docs/sq-input-document-international.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-document-international/index.ts (1 hunks)
- src/components/inputs/sq-input-document-international/sq-input-document-international.component.md (1 hunks)
- src/components/inputs/sq-input-document-international/sq-input-document-international.component.scoped.scss (1 hunks)
- src/components/inputs/sq-input-document-international/sq-input-document-international.component.scss (1 hunks)
- src/components/inputs/sq-input-document-international/sq-input-document-international.component.tsx (1 hunks)
- src/components/inputs/sq-input-document-rut/docs/sq-input-document-rut.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-document-rut/docs/sq-input-document-rut.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-document-rut/index.ts (1 hunks)
- src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.scoped.scss (1 hunks)
- src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.scss (1 hunks)
- src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.tsx (1 hunks)
- src/components/inputs/sq-input-file/docs/sq-input-file.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-media/docs/sq-input-media.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-media/docs/sq-input-media.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-media/index.ts (1 hunks)
- src/components/inputs/sq-input-media/sq-input-media.component.md (1 hunks)
- src/components/inputs/sq-input-media/sq-input-media.component.scoped.scss (1 hunks)
- src/components/inputs/sq-input-media/sq-input-media.component.tsx (1 hunks)
- src/components/inputs/sq-input-name/docs/sq-input-name.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-name/docs/sq-input-name.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-name/index.ts (1 hunks)
- src/components/inputs/sq-input-name/sq-input-name.component.tsx (1 hunks)
- src/components/inputs/sq-input-password/docs/sq-input-password.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-password/docs/sq-input-password.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-password/index.ts (1 hunks)
- src/components/inputs/sq-input-password/sq-input-password.component.scoped.scss (1 hunks)
- src/components/inputs/sq-input-password/sq-input-password.component.scss (1 hunks)
- src/components/inputs/sq-input-password/sq-input-password.component.tsx (1 hunks)
- src/components/inputs/sq-input-phone/docs/sq-input-phone.component.example.tsx (1 hunks)
- src/components/inputs/sq-input-phone/docs/sq-input-phone.component.stories.tsx (1 hunks)
- src/components/inputs/sq-input-phone/index.ts (1 hunks)
- src/components/inputs/sq-input-phone/sq-input-phone.component.md (1 hunks)
- src/components/inputs/sq-input-phone/sq-input-phone.component.scss (1 hunks)
- src/components/inputs/sq-input-phone/sq-input-phone.component.tsx (1 hunks)
- src/components/inputs/sq-input/docs/sq-input.component.example.tsx (1 hunks)
- src/components/inputs/sq-input/docs/sq-input.component.stories.tsx (1 hunks)
- src/components/inputs/sq-multi-select/docs/sq-multi-select.component.example.tsx (1 hunks)
- src/components/inputs/sq-multi-select/docs/sq-multi-select.component.stories.tsx (1 hunks)
- src/components/inputs/sq-multi-select/index.ts (1 hunks)
- src/components/inputs/sq-multi-select/sq-multi-select.component.md (1 hunks)
- src/components/inputs/sq-multi-select/sq-multi-select.component.scoped.scss (1 hunks)
- src/components/inputs/sq-multi-select/sq-multi-select.component.scss (1 hunks)
- src/components/inputs/sq-multi-select/sq-multi-select.component.tsx (1 hunks)
- src/components/inputs/sq-select/docs/sq-select.component.example.tsx (1 hunks)
- src/components/inputs/sq-select/docs/sq-select.component.stories.tsx (1 hunks)
- src/components/inputs/sq-select/index.ts (1 hunks)
- src/components/inputs/sq-select/sq-select.component.md (1 hunks)
- src/components/inputs/sq-select/sq-select.component.scoped.scss (1 hunks)
- src/components/inputs/sq-select/sq-select.component.scss (1 hunks)
- src/components/inputs/sq-select/sq-select.component.tsx (1 hunks)
- src/components/inputs/sq-selector/docs/sq-selector.component.example.tsx (1 hunks)
- src/components/inputs/sq-selector/docs/sq-selector.component.stories.tsx (1 hunks)
- src/components/inputs/sq-selector/index.ts (1 hunks)
- src/components/inputs/sq-selector/sq-selector.component.md (1 hunks)
- src/components/inputs/sq-selector/sq-selector.component.scoped.scss (1 hunks)
- src/components/inputs/sq-selector/sq-selector.component.tsx (1 hunks)
- src/components/sq-accordion-collapse/sq-accordion/docs/sq-accordion.component.example.tsx (1 hunks)
- src/components/sq-accordion-collapse/sq-accordion/docs/sq-accordion.component.stories.tsx (2 hunks)
- src/components/sq-accordion-collapse/sq-collapse/docs/sq-collapse.component.example.tsx (2 hunks)
- src/components/sq-accordion-collapse/sq-collapse/docs/sq-collapse.component.stories.tsx (1 hunks)
- src/components/sq-bar-chart/sq-bar-chart.component.tsx (2 hunks)
- src/components/sq-callout/docs/sq-callout.component.example.tsx (1 hunks)
- src/components/sq-callout/docs/sq-callout.component.stories.tsx (1 hunks)
- src/components/sq-callout/index.ts (1 hunks)
- src/components/sq-callout/sq-callout.component.scoped.scss (1 hunks)
- src/components/sq-callout/sq-callout.component.test.tsx (1 hunks)
- src/components/sq-callout/sq-callout.component.tsx (1 hunks)
- src/components/sq-card-to-copy/docs/sq-card-to-copy.component.example.tsx (1 hunks)
- src/components/sq-card-to-copy/docs/sq-card-to-copy.component.stories.tsx (1 hunks)
- src/components/sq-card-to-copy/index.ts (1 hunks)
- src/components/sq-card-to-copy/sq-card-to-copy.component.scoped.scss (1 hunks)
- src/components/sq-card-to-copy/sq-card-to-copy.component.tsx (1 hunks)
- src/components/sq-carousel/docs/sq-carousel.component.example.tsx (1 hunks)
- src/components/sq-carousel/docs/sq-carousel.component.stories.tsx (1 hunks)
- src/components/sq-carousel/index.ts (1 hunks)
- src/components/sq-carousel/sq-carousel.component.scss (1 hunks)
- src/components/sq-carousel/sq-carousel.component.tsx (1 hunks)
- src/components/sq-circle-completation/docs/sq-circle-completation.component.example.tsx (1 hunks)
- src/components/sq-circle-completation/docs/sq-circle-completation.component.stories.tsx (1 hunks)
- src/components/sq-circle-completation/index.ts (1 hunks)
- src/components/sq-circle-completation/sq-circle-completation.component.md (1 hunks)
- src/components/sq-circle-completation/sq-circle-completation.component.scoped.scss (1 hunks)
- src/components/sq-circle-completation/sq-circle-completation.component.tsx (1 hunks)
- src/components/sq-menu-options/docs/sq-menu-options.component.example.tsx (1 hunks)
- src/components/sq-menu-options/docs/sq-menu-options.component.stories.tsx (1 hunks)
- src/components/sq-menu-options/index.ts (1 hunks)
- src/components/sq-menu-options/sq-menu-options.component.md (1 hunks)
- src/components/sq-menu-options/sq-menu-options.component.scoped.scss (1 hunks)
- src/components/sq-menu-options/sq-menu-options.component.tsx (1 hunks)
- src/components/sq-metric-chart-card/docs/sq-metric-chart-card.component.example.tsx (1 hunks)
- src/components/sq-metric-chart-card/docs/sq-metric-chart-card.component.stories.tsx (1 hunks)
- src/components/sq-metric-chart-card/components/metric-chart-card-header/metric-chart-card-header.component.scoped.scss (1 hunks)
- src/components/sq-metric-chart-card/components/metric-chart-card-header/metric-chart-card-header.component.tsx (1 hunks)
- src/components/sq-metric-chart-card/components/metric-chart-description/metric-chart-description.component.scoped.scss (1 hunks)
- src/components/sq-metric-chart-card/components/metric-chart-description/metric-chart-description.component.tsx (1 hunks)
- src/components/sq-metric-chart-card/sq-metric-chart-card.component.scoped.scss (1 hunks)
- src/components/sq-metric-chart-card/sq-metric-chart-card.component.tsx (1 hunks)
- src/components/sq-metric-chart/components/metric-chart-body/metric-chart-body.component.tsx (1 hunks)
- src/components/sq-metric-chart/sq-metric-chart.component.tsx (1 hunks)
- src/components/sq-modal/docs/sq-modal.component.example.tsx (3 hunks)
- src/components/sq-modal/docs/sq-modal.component.stories.tsx (2 hunks)
- src/components/sq-overlay/docs/sq-overlay.component.example.tsx (1 hunks)
- src/components/sq-overlay/docs/sq-overlay.component.stories.tsx (1 hunks)
- src/components/sq-overlay/index.ts (1 hunks)
- src/components/sq-overlay/sq-overlay.component.md (1 hunks)
- src/components/sq-overlay/sq-overlay.component.scoped.scss (1 hunks)
Files not processed due to max files limit (49)
- src/components/sq-overlay/sq-overlay.component.scss
- src/components/sq-overlay/sq-overlay.component.tsx
- src/components/sq-timeline/docs/sq-timeline.component.example.tsx
- src/components/sq-timeline/docs/sq-timeline.component.stories.tsx
- src/components/sq-timeline/index.ts
- src/components/sq-timeline/sq-timeline.component.scoped.scss
- src/components/sq-timeline/sq-timeline.component.tsx
- src/components/sq-tiny-calendar/docs/sq-tiny-calendar.component.example.tsx
- src/components/sq-tiny-calendar/docs/sq-tiny-calendar.component.stories.tsx
- src/components/sq-tiny-calendar/index.ts
- src/components/sq-tiny-calendar/sq-tiny-calendar.component.md
- src/components/sq-tiny-calendar/sq-tiny-calendar.component.scoped.scss
- src/components/sq-tiny-calendar/sq-tiny-calendar.component.tsx
- src/components/sq-tip/docs/sq-tip.component.example.tsx
- src/components/sq-tip/docs/sq-tip.component.stories.tsx
- src/components/sq-tip/index.ts
- src/components/sq-tip/sq-tip.component.md
- src/components/sq-tip/sq-tip.component.scss
- src/components/sq-tip/sq-tip.component.test.tsx
- src/components/sq-tip/sq-tip.component.tsx
- src/helpers/index.ts
- src/helpers/sq-color-icon/sq-color-icon.helper.md
- src/helpers/sq-color-icon/sq-color-icon.helper.mdx
- src/helpers/sq-color-icon/sq-color-icon.helper.ts
- src/helpers/sq-colors/sq-colors.helper.mdx
- src/helpers/sq-data/sq-data.helper.md
- src/helpers/sq-data/sq-data.helper.mdx
- src/helpers/sq-data/sq-data.helper.ts
- src/helpers/sq-event-emitter/sq-event-emitter.helper.md
- src/helpers/sq-event-emitter/sq-event-emitter.helper.mdx
- src/helpers/sq-event-emitter/sq-event-emitter.helper.ts
- src/helpers/sq-jwt/sq-jwt.helper.mdx
- src/helpers/sq-numbers/sq-number.helper.mdx
- src/helpers/sq-object/sq-object.helper.mdx
- src/helpers/sq-strings/sq-strings.helper.mdx
- src/helpers/sq-toast/sq-toast.helmper.mdx
- src/helpers/sq-validator/sq-validator.helper.mdx
- src/hooks/use-sq-image-loader/index.ts
- src/hooks/use-sq-image-loader/use-image-loader.stories.tsx
- src/hooks/use-sq-image-loader/use-sq-image-loader.hook.tsx
- src/hooks/use-sq-metric-chart/use-sq-metric-chart.hook.stories.tsx
- src/hooks/use-sq-metric-chart/use-sq-metric-chart.hook.tsx
- src/hooks/use-sq-rect/use-sq-rect.hook.stories.tsx
- src/hooks/use-sq-throttle/use-sq-throttle.hook.stories.tsx
- src/i18n.ts
- src/index.mdx
- src/index.stories.mdx
- src/index.ts
- src/styles.scss
Files not reviewed due to errors (5)
- src/components/sq-callout/sq-callout.component.test.tsx (no review received)
- .storybook/theme-context.tsx (no review received)
- src/components/buttons/sq-button-back/docs/sq-button-back.component.stories.tsx (no review received)
- src/components/inputs/sq-input-digits/docs/sq-input-digits.component.stories.tsx (no review received)
- src/components/inputs/sq-multi-select/sq-multi-select.component.tsx (no review received)
Files skipped from review due to trivial changes (77)
- .storybook/manager-head.html
- .storybook/themes/squid-theme-dark.tsx
- src/components/buttons/sq-button-back/docs/sq-button-back.component.example.tsx
- src/components/buttons/sq-button-back/index.ts
- src/components/buttons/sq-button-back/sq-button-back.component.scoped.scss
- src/components/buttons/sq-button-copy-text/docs/sq-button-copy-text.component.example.tsx
- src/components/buttons/sq-button-copy-text/docs/sq-button-copy-text.component.stories.tsx
- src/components/buttons/sq-button-copy-text/index.ts
- src/components/buttons/sq-button-copy-text/sq-button-copy-text.component.scoped.scss
- src/components/buttons/sq-button-social-network/docs/sq-button-social-network.component.stories.tsx
- src/components/buttons/sq-button-social-network/index.ts
- src/components/buttons/sq-button/docs/sq-button.component.stories.tsx
- src/components/inputs/sq-input-birthday/docs/sq-input-birthday.component.stories.tsx
- src/components/inputs/sq-input-birthday/index.ts
- src/components/inputs/sq-input-digits/docs/sq-input-digits.component.example.tsx
- src/components/inputs/sq-input-digits/index.ts
- src/components/inputs/sq-input-digits/sq-input-digits.component.scoped.scss
- src/components/inputs/sq-input-digits/sq-input-digits.component.scss
- src/components/inputs/sq-input-document-cnpj/docs/sq-input-document-cnpj.component.example.tsx
- src/components/inputs/sq-input-document-cnpj/docs/sq-input-document-cnpj.component.stories.tsx
- src/components/inputs/sq-input-document-cnpj/index.ts
- src/components/inputs/sq-input-document-cpf/index.ts
- src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.scoped.scss
- src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.scss
- src/components/inputs/sq-input-document-international/docs/sq-input-document-international.component.example.tsx
- src/components/inputs/sq-input-document-international/index.ts
- src/components/inputs/sq-input-document-international/sq-input-document-international.component.scoped.scss
- src/components/inputs/sq-input-document-international/sq-input-document-international.component.scss
- src/components/inputs/sq-input-document-rut/docs/sq-input-document-rut.component.example.tsx
- src/components/inputs/sq-input-document-rut/index.ts
- src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.scoped.scss
- src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.scss
- src/components/inputs/sq-input-media/docs/sq-input-media.component.example.tsx
- src/components/inputs/sq-input-media/index.ts
- src/components/inputs/sq-input-media/sq-input-media.component.scoped.scss
- src/components/inputs/sq-input-name/docs/sq-input-name.component.stories.tsx
- src/components/inputs/sq-input-name/index.ts
- src/components/inputs/sq-input-password/docs/sq-input-password.component.example.tsx
- src/components/inputs/sq-input-password/index.ts
- src/components/inputs/sq-input-password/sq-input-password.component.scoped.scss
- src/components/inputs/sq-input-password/sq-input-password.component.scss
- src/components/inputs/sq-input-phone/docs/sq-input-phone.component.stories.tsx
- src/components/inputs/sq-input-phone/index.ts
- src/components/inputs/sq-input-phone/sq-input-phone.component.scss
- src/components/inputs/sq-multi-select/docs/sq-multi-select.component.example.tsx
- src/components/inputs/sq-multi-select/index.ts
- src/components/inputs/sq-multi-select/sq-multi-select.component.scss
- src/components/inputs/sq-select/docs/sq-select.component.example.tsx
- src/components/inputs/sq-select/index.ts
- src/components/inputs/sq-select/sq-select.component.scss
- src/components/inputs/sq-selector/docs/sq-selector.component.stories.tsx
- src/components/inputs/sq-selector/index.ts
- src/components/sq-callout/docs/sq-callout.component.example.tsx
- src/components/sq-callout/docs/sq-callout.component.stories.tsx
- src/components/sq-callout/index.ts
- src/components/sq-callout/sq-callout.component.scoped.scss
- src/components/sq-card-to-copy/docs/sq-card-to-copy.component.example.tsx
- src/components/sq-card-to-copy/docs/sq-card-to-copy.component.stories.tsx
- src/components/sq-card-to-copy/index.ts
- src/components/sq-card-to-copy/sq-card-to-copy.component.scoped.scss
- src/components/sq-carousel/docs/sq-carousel.component.example.tsx
- src/components/sq-carousel/index.ts
- src/components/sq-carousel/sq-carousel.component.scss
- src/components/sq-circle-completation/docs/sq-circle-completation.component.stories.tsx
- src/components/sq-circle-completation/index.ts
- src/components/sq-circle-completation/sq-circle-completation.component.scoped.scss
- src/components/sq-menu-options/docs/sq-menu-options.component.example.tsx
- src/components/sq-menu-options/index.ts
- src/components/sq-menu-options/sq-menu-options.component.md
- src/components/sq-menu-options/sq-menu-options.component.scoped.scss
- src/components/sq-metric-chart-card/docs/sq-metric-chart-card.component.example.tsx
- src/components/sq-metric-chart-card/docs/sq-metric-chart-card.component.stories.tsx
- src/components/sq-metric-chart-card/components/metric-chart-card-header/metric-chart-card-header.component.scoped.scss
- src/components/sq-metric-chart-card/components/metric-chart-card-header/metric-chart-card-header.component.tsx
- src/components/sq-metric-chart-card/components/metric-chart-description/metric-chart-description.component.scoped.scss
- src/components/sq-metric-chart-card/sq-metric-chart-card.component.scoped.scss
- src/components/sq-overlay/index.ts
Additional comments not posted (70)
.storybook/theme-observable.tsx (1)
1-2: Initialization ofBehaviorSubjectfor theme management looks good.src/components/sq-overlay/sq-overlay.component.scoped.scss (1)
1-16: The scoped CSS forSqOverlaycomponent is well-structured and follows best practices.src/components/buttons/sq-button/__docs__/sq-button.component.example.tsx (1)
Line range hint
4-14: TheSqButtoncomponent implementation adheres to React best practices and is well-structured.src/components/inputs/sq-input/__docs__/sq-input.component.example.tsx (1)
9-9: TheSqInputExamplecomponent implementation adheres to React best practices and is well-structured.src/components/sq-accordion-collapse/sq-collapse/__docs__/sq-collapse.component.example.tsx (1)
Line range hint
4-14: TheCollapsecomponent implementation adheres to React best practices and is well-structured.src/components/inputs/sq-input-file/__docs__/sq-input-file.component.stories.tsx (1)
16-16: Story configuration forSqInputFileExampleis correctly set up and adheres to Storybook best practices.src/components/inputs/sq-input/__docs__/sq-input.component.stories.tsx (1)
13-19: Story configuration forSqInputExampleis correctly set up and adheres to Storybook best practices.src/components/sq-circle-completation/__docs__/sq-circle-completation.component.example.tsx (1)
1-19: The example component forSqCircleCompletationis implemented correctly.src/components/sq-accordion-collapse/sq-accordion/__docs__/sq-accordion.component.example.tsx (1)
Line range hint
1-15: The example component forSqAccordionis implemented correctly.src/components/sq-modal/__docs__/sq-modal.component.stories.tsx (1)
Line range hint
1-21: The Storybook stories forSqModalare set up correctly, including the use offn()for simulating event handlers.src/components/buttons/sq-button-social-network/__docs__/sq-button-social-network.component.example.tsx (1)
1-19: The example component forSqButtonSocialNetworkis implemented correctly.src/components/inputs/sq-input-phone/__docs__/sq-input-phone.component.example.tsx (1)
1-20: The example component forSqInputPhoneis implemented correctly, including proper state management for the input value.src/components/inputs/sq-input-media/__docs__/sq-input-media.component.stories.tsx (1)
1-20: The Storybook stories forSqInputMediaare set up correctly, with appropriate metadata and configuration.src/components/inputs/sq-input-birthday/__docs__/sq-input-birthday.component.example.tsx (2)
4-17: Good use of React state and props spreading for component example.This is a clean and straightforward example of how to use the
SqInputBirthdaycomponent.
21-21: Proper export of the example component.The example component is correctly exported as a default export, which is typical for React components.
src/components/inputs/sq-input-document-cpf/__docs__/sq-input-document-cpf.component.example.tsx (2)
4-16: Effective demonstration of component usage.This example effectively demonstrates how to use the
SqInputDocumentCpfcomponent with state management for an interactive example.
20-20: Proper export of the example component.The example component is correctly exported as a default export, which is typical for React components.
src/components/inputs/sq-selector/__docs__/sq-selector.component.example.tsx (2)
4-16: Effective use of state and props in component example.This example effectively demonstrates how to use the
SqSelectorcomponent with state management for an interactive example.
20-20: Proper export of the example component.The example component is correctly exported as a default export, which is typical for React components.
src/components/inputs/sq-input-name/__docs__/sq-input-name.component.example.tsx (2)
5-17: Good use of React state and props spreading for component example.This is a clean and straightforward example of how to use the
SqInputNamecomponent.
21-21: Proper export of the example component.The example component is correctly exported as a default export, which is typical for React components.
src/components/sq-overlay/__docs__/sq-overlay.component.stories.tsx (3)
1-2: Ensure that the importedSqOverlayExampleis correctly implemented and exported in its respective file.Verification successful
The verification process has confirmed that the
SqOverlayExampleis correctly implemented and exported in the filesrc/components/sq-overlay/__docs__/sq-overlay.component.example.tsx. This aligns with the requirement mentioned in the review comment to ensure that the importedSqOverlayExampleis correctly implemented and exported in its respective file.
- File Verified:
src/components/sq-overlay/__docs__/sq-overlay.component.example.tsxScripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that SqOverlayExample is correctly implemented and exported. # Test: Search for SqOverlayExample implementation and export. rg --type typescript --files-with-matches $'export.*SqOverlayExample' src/components/sq-overlay/__docs__Length of output: 140
Script:
#!/bin/bash # Description: Verify that SqOverlayExample is correctly implemented and exported. # Test: Search for SqOverlayExample implementation and export in TypeScript files. rg --files-with-matches 'export.*SqOverlayExample' $(fd --extension ts --extension tsx src/components/sq-overlay/__docs__)Length of output: 634
4-15: The metadata configuration forSqOverlaylooks comprehensive and well-structured.
20-26: The default story configuration forSqOverlayis clear and well-defined. Ensure that the props used here (header,children,footer) are supported by theSqOverlayExamplecomponent.src/components/sq-accordion-collapse/sq-collapse/__docs__/sq-collapse.component.stories.tsx (1)
15-23: The default story forSqCollapseuses inline styles and CSS variables. Ensure that these variables (--background,--primary_color) are defined in your CSS or theming system to avoid runtime errors.Verification successful
The CSS variables
--backgroundand--primary_colorused in theSqCollapsecomponent stories are indeed defined within the project's stylesheets and used across various components. This confirms that the usage of these variables in the story forSqCollapseis consistent with their definitions and usage elsewhere in the project.
- The variable
--primary_coloris defined insrc/styles.scssand used in multiple components such assq-tabs,sq-metric-chart,sq-carousel, and others.- The variable
--backgroundis used in components likesq-tabs,sq-steps,sq-menu-options, and more, indicating it is a commonly used variable across the project.This verification ensures that the use of these CSS variables in the
SqCollapsestories aligns with their definitions and usage throughout the project, mitigating the risk of runtime errors due to undefined variables.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the CSS variables used in SqCollapse stories are defined. # Test: Search for the CSS variable definitions in the project's stylesheets. rg --type css $'--background|--primary_color' src/stylesLength of output: 488
Script:
#!/bin/bash # Description: Verify that the CSS variables used in SqCollapse stories are defined. # Test: Search for the CSS variable definitions in the project's stylesheets. rg --type css --type scss --type less '(--background|--primary_color)' src/stylesLength of output: 112
Script:
#!/bin/bash # Description: Verify that the CSS variables used in SqCollapse stories are defined. # Test: Search for the CSS variable definitions in the project's stylesheets. rg '(--background|--primary_color)' src/stylesLength of output: 99
Script:
#!/bin/bash # Description: Verify that the CSS variables used in SqCollapse stories are defined. # Test: Search for the CSS variable definitions across all files in the repository. rg '(--background|--primary_color)' .Length of output: 8832
src/components/sq-card-to-copy/sq-card-to-copy.component.tsx (1)
11-20: The implementation ofSqCardToCopyis straightforward and uses theSqButtonCopyTextcomponent effectively. Ensure that theSqButtonCopyTextcomponent supports the props passed here (content,backgroundColor,textColor,noMargin).src/components/sq-metric-chart/sq-metric-chart.component.tsx (1)
11-11: The use of theuseTranslationhook for internationalization inMetricChartis appropriate. Ensure that the translation keys used (e.g.,sqMetricChart) are correctly defined in your i18n configuration files.src/components/inputs/sq-input-document-international/__docs__/sq-input-document-international.component.stories.tsx (3)
1-2: Ensure that the imported components and types are used appropriately in the file.
4-15: The metadata configuration forSqInputDocumentInternationalis well-defined with appropriate titles, parameters, and tags.
20-26: The default story forSqInputDocumentInternationalis correctly set up with necessary arguments. Ensure that theonTimeoutfunction is implemented if it is intended to be used.Verification successful
The search results confirm that the
onTimeoutfunction is implemented and used across various components in the codebase, including theSqInputDocumentInternationalcomponent. The function is checked for its existence and type before being called with different boolean values based on certain conditions.Given this information, the review comment suggesting to ensure the implementation of the
onTimeoutfunction if it is intended to be used is consistent with the codebase. The function is indeed implemented and utilized properly within the component.Final Conclusion:
The default story forSqInputDocumentInternationalis correctly set up with necessary arguments, and theonTimeoutfunction is implemented and used as intended in the component.
- File:
src/components/inputs/sq-input-document-international/sq-input-document-international.component.tsx
- Lines where
onTimeoutis used: 20, 22, 24Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of `onTimeout` function in the component. # Test: Search for the `onTimeout` function usage. Expect: Implementation details or usage in the component. rg --type typescript $'onTimeout'Length of output: 67
Script:
#!/bin/bash # Description: Re-verify the implementation of `onTimeout` function in the component. # Correcting the file type for ripgrep and searching for the `onTimeout` function usage. rg --type ts 'onTimeout'Length of output: 5909
src/components/inputs/sq-select/__docs__/sq-select.component.stories.tsx (3)
1-3: Ensure that the imported components and types are used appropriately in the file.
5-16: The metadata configuration forSqSelectis well-defined with appropriate titles, parameters, and tags.
21-33: The default story forSqSelectis correctly set up with necessary arguments and children elements. Ensure that thechildrenprop is properly handled in the component to render the options correctly.Verification successful
The search results confirm that the
childrenprop is indeed used within theSqSelectcomponent, specifically in the filesrc/components/inputs/sq-select/sq-select.component.tsx. The usage pattern indicates that thechildrenprop is being rendered directly within the component, which aligns with the expected behavior for handling children in a React component. This suggests that thechildrenprop is properly handled to render the options correctly in theSqSelectcomponent.Given this information, the review comment about ensuring that the
childrenprop is properly handled in theSqSelectcomponent is verified as accurate. The component appears to be correctly set up to render children elements, which in the context of theSqSelectcomponent, would typically be<option>elements as shown in the story configuration.Final Response:
The handling of the
childrenprop in theSqSelectcomponent is verified to be correct. The component properly renders the children elements as expected.
- Location:
src/components/inputs/sq-select/sq-select.component.tsxScripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the handling of `children` prop in the `SqSelect` component. # Test: Search for the `children` prop usage. Expect: Proper handling in the component rendering logic. rg --type typescript $'children'Length of output: 66
Script:
#!/bin/bash # Description: Re-verify the handling of `children` prop in the `SqSelect` component. # Corrected Test: Search for the `children` prop usage in TypeScript files. Expect: Proper handling in the component rendering logic. rg --type ts 'children'Length of output: 9309
.storybook/main.ts (1)
14-25: The Storybook configuration is updated to include new addons and modify existing ones. Ensure that the new addons (@storybook/addon-mdx-gfmand@chromatic-com/storybook) are compatible with the project's Storybook version and that they are configured correctly.Verification successful
The output from the shell script indicates that the dependencies for
@storybook/react,@storybook/addon-mdx-gfm, and@chromatic-com/storybookare not present in thepackage.jsonfile. This suggests that these packages might not be installed in the project, which is crucial for verifying their compatibility and correct configuration as mentioned in the review comment.Given this situation, it's essential to verify whether these packages are indeed missing or if there was an issue with the script execution. To further investigate, I will check the entire
dependenciesanddevDependenciessections of thepackage.jsonfile to ensure no entries were overlooked.
The output from the updated script confirms that the new Storybook addons (
@storybook/addon-mdx-gfmand@chromatic-com/storybook) are indeed present in thedevDependenciessection of thepackage.jsonfile, along with their respective versions. Both addons are listed with version^8.0.10for@storybook/addon-mdx-gfmand^1.3.4for@chromatic-com/storybook. This information verifies that the addons are installed and suggests compatibility with the project's Storybook version, which is also^8.0.10.Given this confirmation, the review comment's concern about ensuring compatibility and correct configuration of the new addons with the project's Storybook version is addressed. The addons are installed with compatible versions, and there is no indication of misconfiguration from the provided context.
Final Response:
The compatibility and configuration of the new Storybook addons (
@storybook/addon-mdx-gfmand@chromatic-com/storybook) with the project's Storybook version have been verified successfully. Both addons are present in thedevDependencieswith compatible versions.
@storybook/addon-mdx-gfm: Version^8.0.10@chromatic-com/storybook: Version^1.3.4Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the compatibility and configuration of new Storybook addons. # Test: Check the project's package.json for Storybook version and addon compatibility. cat package.json | jq '.dependencies["@storybook/react"], .dependencies["@storybook/addon-mdx-gfm"], .dependencies["@chromatic-com/storybook"]'Length of output: 160
Script:
#!/bin/bash # Description: Check the entire dependencies and devDependencies sections for the presence of Storybook and related addons. # Display the dependencies and devDependencies sections from package.json cat package.json | jq '.dependencies, .devDependencies'Length of output: 1929
src/components/sq-carousel/__docs__/sq-carousel.component.stories.tsx (3)
1-5: Ensure that the imported components and types are used appropriately in the file.
6-17: The metadata configuration forSqCarouselis well-defined with appropriate titles, parameters, and tags.
22-35: The default story forSqCarouselis correctly set up with necessary arguments. Ensure that theonSwiperfunction is implemented if it is intended to be used.Verification successful
The
onSwiperfunction is indeed implemented and used within theSqCarouselcomponent. The search results confirm thatonSwiperis defined as an optional function in the component's props and is correctly passed to the component in the stories file. This aligns with the usage shown in the story configuration forSqCarousel.
- src/components/sq-carousel/sq-carousel.component.tsx: The function is declared as an optional prop and used within the component.
- src/components/sq-carousel/docs/sq-carousel.component.stories.tsx: The function is provided as a mock (
fn()) in the story setup.This verifies that the
onSwiperfunction is correctly set up and utilized as intended in the component and its story.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of `onSwiper` function in the component. # Test: Search for the `onSwiper` function usage. Expect: Implementation details or usage in the component. rg --type typescript $'onSwiper'Length of output: 66
Script:
#!/bin/bash # Description: Verify the implementation of `onSwiper` function in the component. # Test: Search for the `onSwiper` function usage. Expect: Implementation details or usage in the component. rg --type ts $'onSwiper'Length of output: 333
src/components/sq-overlay/__docs__/sq-overlay.component.example.tsx (3)
1-4: Ensure that the imported components and types are used appropriately in the file.
5-33: TheSqOverlayExamplecomponent is implemented with state management for theopenstate and handlers for opening and closing the overlay. Ensure that the props spread (...props) does not unintentionally override theopen,onOpenChange, andonCloseChangeprops.Verification successful
The verification of the
SqOverlayExamplecomponent in the filesrc/components/sq-overlay/__docs__/sq-overlay.component.example.tsxconfirms that the props spread (...props) does not override the essential propertiesopen,onOpenChange, andonCloseChange. These properties are explicitly defined after the props spread, ensuring they take precedence and are not affected by any properties that might be passed through...props.
- File:
src/components/sq-overlay/__docs__/sq-overlay.component.example.tsx- Lines: 5-33
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the props spread does not override essential props in `SqOverlay`. # Test: Search for the props usage in the component to ensure they are not overridden. rg --type typescript $'props'Length of output: 63
33-33: The export ofSqOverlayExampleis correctly implemented.src/components/inputs/sq-selector/sq-selector.component.scoped.scss (1)
4-50: The scoped CSS forSqSelectoris well-organized with styles for different states and responsive designs. Ensure that the commented-out styles are either removed or uncommented if they are needed. Also, verify that the custom properties (e.g.,--primary_color,--gray,--green) are defined in the project's style guide or CSS root.Verification successful
The custom CSS properties
--primary_color,--gray, and--greenare indeed defined and used across various components in the project's CSS files. This confirms that the properties are part of the project's style guide and are correctly implemented in theSqSelectorcomponent as well.
--primary_coloris used in multiple components such assq-timeline,sq-metric-chart,sq-menu-options,sq-tabs,sq-carousel,sq-input-media, and others.--grayis used in components likesq-timeline,sq-tiny-calendar,sq-metric-chart,sq-carousel,sq-bar-chart,sq-input, and more.--greenis specifically used in thesq-circle-completationcomponent and other relevant places.This verification confirms that the usage of these properties in the
SqSelectorcomponent is consistent with their definitions and usage throughout the project.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the definition of custom CSS properties used in `SqSelector`. # Test: Search for the custom properties in the project's CSS files. Expect: Definitions for `--primary_color`, `--gray`, `--green`. rg --type css $'--primary_color| --gray| --green'Length of output: 485
Script:
#!/bin/bash # Description: Verify the definition of custom CSS properties used in `SqSelector`. # Test: Search for the custom properties in the project's CSS files. Expect: Definitions for `--primary_color`, `--gray`, `--green`. rg --type css -e '--primary_color' -e '--gray' -e '--green'Length of output: 4900
src/components/sq-menu-options/__docs__/sq-menu-options.component.stories.tsx (3)
1-3: Ensure that the imported components and types are used appropriately in the file.
4-16: The metadata configuration forSqMenuOptionsis well-defined with appropriate titles, parameters, and tags.
20-43: The default story forSqMenuOptionsis correctly set up with necessary arguments. Ensure that theactionfunctions are implemented if they are intended to be used.Verification successful
The search results from the script provide clear evidence that the
actionfunctions within theSqMenuOptionscomponent are implemented and used correctly. Theactionproperty is defined as a function in themenuArrayof theSqMenuOptionscomponent, and there is a specifichandleClickfunction that checks ifactionis a function and then calls it. This setup is consistent with the usage shown in thesq-menu-options.component.stories.tsxfile, where each menu option has anactionthat logs a message to the console.Based on this information, the implementation of the
actionfunctions in theSqMenuOptionscomponent is verified to be correct and functional.Verification Complete:
- The
actionfunctions are properly implemented in theSqMenuOptionscomponent.- The
handleClickfunction correctly handles the execution of these actions.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of `action` functions in the component. # Test: Search for the `action` function usage. Expect: Implementation details or usage in the component. rg --type typescript $'action'Length of output: 64
Script:
#!/bin/bash # Description: Re-verify the implementation of `action` functions in the component using the correct file type. # Test: Search for the `action` function usage. Expect: Implementation details or usage in the component. rg --type ts 'action'Length of output: 1450
src/components/inputs/sq-select/sq-select.component.scoped.scss (1)
1-67: The scoped CSS forSqSelectis well-organized with styles for different states and responsive designs. Ensure that the commented-out styles are either removed or uncommented if they are needed. Also, verify that the custom properties (e.g.,--text_color,--red) are defined in the project's style guide or CSS root.Verification successful
The search results confirm that the custom CSS properties
--text_colorand--redare indeed used across various components in the project. This includes multiple instances in different scoped CSS files, indicating that these properties are likely defined globally and utilized throughout the project's stylesheets.Given this information, the use of
--text_colorand--redin theSqSelectcomponent is consistent with the project's styling practices, and there is no indication of missing definitions for these properties within the scope of the provided CSS files.Final Conclusion:
- The custom properties
--text_colorand--redare extensively used across the project, suggesting their definitions are part of the global style settings.- The scoped CSS for
SqSelectis correctly utilizing these properties as per the project's styling guidelines.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the definition of custom CSS properties used in `SqSelect`. # Test: Search for the custom properties in the project's CSS files. Expect: Definitions for `--text_color`, `--red`. rg --type css $'--text_color| --red'Length of output: 481
Script:
#!/bin/bash # Description: Verify the definition of custom CSS properties used in `SqSelect`. # Test: Search for the custom properties in the project's CSS files. Expect: Definitions for `--text_color`, `--red`. rg --type css '(--text_color|--red)'Length of output: 3376
src/components/sq-metric-chart-card/sq-metric-chart-card.component.tsx (2)
11-11: Ensure thetitleprop type is appropriately defined.It appears that the
titleprop is of typeany. This is generally not recommended as it bypasses TypeScript's type checking. Consider specifying a more precise type.
19-19: Verify the use of state management in theuseSqMetricCharthook.The destructuring of
stateandsetStatefromuseSqMetricChartsuggests state management that might be more complex than necessary for this component. Consider simplifying this if possible.src/components/sq-modal/__docs__/sq-modal.component.example.tsx (1)
41-49: Review the modal opening and closing logic.The modal toggle logic is implemented with multiple handlers that might be simplified. Also, ensure that the
onCloseChangeandonOpenChangehandlers are correctly implemented as they both modify theopenstate.src/components/sq-accordion-collapse/sq-accordion/__docs__/sq-accordion.component.stories.tsx (1)
16-46: Ensure correct usage of Storybook properties.The story
Defaultuses several instances ofSqCollapsewith various styles and properties. Verify that all properties such asbackgroundColorandcolorIconsare correctly applied and reflect the intended styles..storybook/decorators.tsx (1)
6-47: Ensure robust theme and language handling in Storybook.The
NdsStylesdecorator uses effects to change language and theme settings based on global properties. Verify that these changes are correctly reflected in the Storybook UI and that there are no unintended side-effects or performance issues.src/components/index.ts (1)
Line range hint
2-42: Verify the structure and correctness of component exports.Ensure that all components are correctly exported from their respective modules and that there are no missing or incorrect paths.
src/components/sq-carousel/sq-carousel.component.tsx (1)
21-52: Ensure optimal configuration and performance of the carousel.The
SqCarouselcomponent uses several Swiper modules and props to configure its behavior. Verify that all configurations such asshowArrows,showPagination, andeffectare correctly implemented and perform as expected..storybook/preview.tsx (3)
9-33: Global types for locale and theme selection are well-defined and follow best practices for dynamic theme handling.
Line range hint
37-55: Parameters configuration correctly integrates i18n and dynamic theme handling.
Line range hint
72-72: Decorator configuration is correctly set up.src/components/sq-bar-chart/sq-bar-chart.component.tsx (1)
54-54: The use of internationalization in the bar chart component is correctly implemented.src/components/sq-metric-chart/components/metric-chart-body/metric-chart-body.component.tsx (1)
20-20: Ensure that the DOM manipulation inuseLayoutEffecthandles edge cases where elements might not be present or measurements could be zero.src/components/sq-menu-options/sq-menu-options.component.tsx (1)
23-33: Ensure that the cleanup function inuseEffectis correctly removing the event listener to prevent memory leaks.src/components/inputs/sq-multi-select/sq-multi-select.component.scoped.scss (1)
1-115: The SCSS styles are well-organized and make effective use of CSS custom properties for theming. Ensure that the class names are descriptive and consistent across the project.src/components/buttons/sq-button-back/sq-button-back.component.tsx (1)
49-54: Hover state management is implemented correctly. Ensure that the hover effects are consistent with the design specifications.src/components/sq-circle-completation/sq-circle-completation.component.tsx (1)
13-85: The animation logic for the completion percentage is implemented effectively usingrequestAnimationFrame. Ensure that the animation performance is tested across different devices.src/components/buttons/sq-button-social-network/sq-button-social-network.component.tsx (1)
80-85: Hover state management is implemented correctly. Ensure that the hover effects are consistent with the design specifications.src/components/inputs/sq-input-name/sq-input-name.component.tsx (1)
88-115: TheInputcomponent is used effectively with all props correctly passed. Good use of spreading for state management.src/components/inputs/sq-input-birthday/sq-input-birthday.component.tsx (1)
95-117: TheInputDatecomponent is used effectively with all props correctly passed. Good use of spreading for state management.src/components/sq-callout/sq-callout.component.tsx (1)
74-109: Good use of conditional rendering and style management based on props. Ensures flexibility and customization.src/components/inputs/sq-select/sq-select.component.tsx (1)
93-148: Theselectelement is well-configured with dynamic classes and styles based on the component's state and props.src/components/inputs/sq-selector/sq-selector.component.tsx (1)
102-166: The component effectively uses conditional rendering and dynamic class assignment for customization. Good implementation of accessibility features.src/components/inputs/sq-input-media/sq-input-media.component.tsx (1)
96-158: TheSqInputFileComponentis used effectively with all props correctly passed. Good use of conditional rendering for displaying media previews.src/components/inputs/sq-input-digits/sq-input-digits.component.tsx (1)
123-173: The input field is well-configured with dynamic classes and styles based on the component's state and props. Good implementation of accessibility features.src/components/inputs/sq-input-document-cnpj/sq-input-document-cnpj.component.tsx (1)
145-193: The input field is well-configured with dynamic classes and styles based on the component's state and props. Good implementation of accessibility features.
|
|
||
| ### 3. image | ||
|
|
||
| - description: Adds an image to the center on the circle |
There was a problem hiding this comment.
Consider revising the preposition in the description of the image prop for better clarity.
- Adds an image to the center on the circle
+ Adds an image to the center of the circleCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| - description: Adds an image to the center on the circle | |
| - description: Adds an image to the center of the circle |
| - description: Adds an image to the center on the circle | ||
| - type: `string` | ||
|
|
||
| ## Exemple |
There was a problem hiding this comment.
Correct the spelling of the section title from "Exemple" to "Example".
- ## Exemple
+ ## ExampleCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| ## Exemple | |
| ## Example |
| return ( | ||
| <div className="display-flex justify-content-center align-items-center"> | ||
| <SqInputDateComponent {...props} /> | ||
| {/* @ts-ignore */} |
There was a problem hiding this comment.
Consider removing the @ts-ignore directive to ensure proper type safety in the SqInputDate component.
| <div className={`metric-chart-card ${className}`}> | ||
| <MetricChartCardHeader>{title}</MetricChartCardHeader> | ||
| <SqMetricChart /> | ||
| {metric?.first && metric?.influencersAverage && metric?.position ? <MetricChartDescription title={title} type={type} /> : null} |
There was a problem hiding this comment.
Conditional rendering logic might be too complex.
The conditional rendering in line 25 checks multiple properties of metric. This could be refactored into a more readable format, possibly by moving the condition into a well-named function.
- {metric?.first && metric?.influencersAverage && metric?.position ? <MetricChartDescription title={title} type={type} /> : null}
+ {shouldRenderMetricDescription(metric) ? <MetricChartDescription title={title} type={type} /> : null}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| {metric?.first && metric?.influencersAverage && metric?.position ? <MetricChartDescription title={title} type={type} /> : null} | |
| {shouldRenderMetricDescription(metric) ? <MetricChartDescription title={title} type={type} /> : null} |
| dangerouslySetInnerHTML={{ | ||
| __html: t('description', { | ||
| type: t(`metrics.${type}`), | ||
| firstValue: percentage ? formatPercent(metric.first) : formatCompactNumber({ lang: i18n?.language, number: metric.first }), | ||
| positionFirst: percentageDifference(metric.influencersAverage, metric.user), | ||
| userPercentageDiff: metric.user >= metric.influencersAverage ? t('aboveAverage') : t('belowAverage'), | ||
| userPosition: metric.position.ranking, | ||
| }), | ||
| }} |
There was a problem hiding this comment.
Caution with the use of dangerouslySetInnerHTML.
The use of dangerouslySetInnerHTML can lead to cross-site scripting (XSS) vulnerabilities if not properly sanitized. Ensure that the content passed to __html is sanitized or consider alternative methods to set HTML content.
| export const Default: Story = { | ||
| args: { | ||
| label: 'Type a CPF', | ||
| onTimeout: undefined, | ||
| required: true, | ||
| }, |
There was a problem hiding this comment.
Tip
Codebase Verification
The verification process has revealed that the SqInputDocumentCpfExample component does not handle the props label, onTimeout, and required as specified in its default story. This could potentially lead to issues if these props are expected to be utilized within the component.
- The file
sq-input-document-cpf.component.example.tsxwas found, but searches for the specified props handling returned no results.
This indicates that the component may need to be updated to properly handle these props, or the story configuration may need adjustment if these props are not intended for use.
Analysis chain
The default story for SqInputDocumentCpf is well-defined with appropriate props for CPF input. Ensure that the SqInputDocumentCpfExample component properly handles these props (label, onTimeout, required).
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that SqInputDocumentCpfExample handles the props used in its default story.
# Test: Search for the prop handling in SqInputDocumentCpfExample component.
rg --type typescript $'props.*label|props.*onTimeout|props.*required' src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.example.tsx
Length of output: 193
Script:
#!/bin/bash
# Description: Re-verify that SqInputDocumentCpfExample handles the props used in its default story.
# Test: Search for the prop handling in SqInputDocumentCpfExample component without specifying file type.
rg 'props.*label|props.*onTimeout|props.*required' src/components/inputs/sq-input-document-cpf/sq-input-document-cpf.component.example.tsx
Length of output: 268
Script:
#!/bin/bash
# Description: Verify the existence and correct path of sq-input-document-cpf.component.example.tsx in the repository.
# Test: Use fd to search for the file by name.
fd sq-input-document-cpf.component.example.tsx
Length of output: 145
Script:
#!/bin/bash
# Description: Verify that SqInputDocumentCpfExample handles the props used in its default story with the correct file path.
# Test: Search for the prop handling in SqInputDocumentCpfExample component using the correct file path.
rg 'props.*label|props.*onTimeout|props.*required' src/components/inputs/sq-input-document-cpf/__docs__/sq-input-document-cpf.component.example.tsx
Length of output: 149
| export interface Props extends React.HTMLAttributes<HTMLDivElement> { | ||
| label?: any | ||
| disabled: boolean | ||
| readOnly?: boolean | ||
| errorSpan?: boolean | ||
| loading?: boolean | ||
| required?: boolean | ||
| externalError?: any | ||
| id?: string | ||
| name?: string | ||
| leftLabel?: any | ||
| rightLabel?: any | ||
| externalIcon?: any | ||
| errorIcon?: any | ||
| value?: string | ||
| backgroundColor?: string | ||
| isNew?: boolean | ||
| canRepeat?: boolean | ||
| originalValue?: string | ||
| requiredOnLoad?: boolean | ||
| type?: 'text' | 'password' | ||
| onChange?: (event: any) => any | ||
| onValidate?: (event: any) => any | ||
| onTimeout?: (event: any) => any |
There was a problem hiding this comment.
The Props interface uses any for several properties (label, externalError, leftLabel, rightLabel, errorIcon, externalIcon). Using any can lead to bugs that TypeScript could otherwise catch. Define more specific types or at least use unknown if the type is truly arbitrary.
- label?: any;
- externalError?: any;
- leftLabel?: any;
- rightLabel?: any;
- errorIcon?: any;
- externalIcon?: any;
+ label?: React.ReactNode;
+ externalError?: ErrorType; // Define ErrorType appropriately
+ leftLabel?: React.ReactNode;
+ rightLabel?: React.ReactNode;
+ errorIcon?: React.ReactNode;
+ externalIcon?: React.ReactNode;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export interface Props extends React.HTMLAttributes<HTMLDivElement> { | |
| label?: any | |
| disabled: boolean | |
| readOnly?: boolean | |
| errorSpan?: boolean | |
| loading?: boolean | |
| required?: boolean | |
| externalError?: any | |
| id?: string | |
| name?: string | |
| leftLabel?: any | |
| rightLabel?: any | |
| externalIcon?: any | |
| errorIcon?: any | |
| value?: string | |
| backgroundColor?: string | |
| isNew?: boolean | |
| canRepeat?: boolean | |
| originalValue?: string | |
| requiredOnLoad?: boolean | |
| type?: 'text' | 'password' | |
| onChange?: (event: any) => any | |
| onValidate?: (event: any) => any | |
| onTimeout?: (event: any) => any | |
| export interface Props extends React.HTMLAttributes<HTMLDivElement> { | |
| label?: React.ReactNode | |
| disabled: boolean | |
| readOnly?: boolean | |
| errorSpan?: boolean | |
| loading?: boolean | |
| required?: boolean | |
| externalError?: ErrorType // Define ErrorType appropriately | |
| id?: string | |
| name?: string | |
| leftLabel?: React.ReactNode | |
| rightLabel?: React.ReactNode | |
| externalIcon?: React.ReactNode | |
| errorIcon?: React.ReactNode | |
| value?: string | |
| backgroundColor?: string | |
| isNew?: boolean | |
| canRepeat?: boolean | |
| originalValue?: string | |
| requiredOnLoad?: boolean | |
| type?: 'text' | 'password' | |
| onChange?: (event: any) => any | |
| onValidate?: (event: any) => any | |
| onTimeout?: (event: any) => any |
|
|
||
| if (onChange && typeof onChange === 'function') { | ||
| onChange(newState.value) | ||
| } | ||
| } | ||
|
|
||
| if (onTimeout && typeof onTimeout === 'function') { | ||
| onTimeout(false) | ||
| if (timer) { | ||
| clearTimeout(timer) | ||
| } | ||
| setTimer( | ||
| setTimeout(async () => { | ||
| await checkDocument() | ||
| onTimeout(true) | ||
| }, DELAY_TIME_FOR_TYPING_PAUSE), | ||
| ) | ||
| } else { | ||
| await checkDocument() | ||
| } | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| if (state.value && state.value.length < 11) { | ||
| setState((prevState) => ({ value: setMask(prevState.value), validatedDocument: false, error: t('invalidCPF') })) | ||
| if (onValidate && typeof onValidate === 'function') { | ||
| onValidate(false) | ||
| } | ||
| } else { | ||
| setState((prevState) => ({ ...prevState, value: setMask(prevState.value) })) | ||
| } | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [state.value]) | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| clearTimeout(timer) | ||
| } | ||
| }, [timer]) | ||
|
|
||
| return ( | ||
| <div className={`wrapper-all-inside-input ${className}`}> | ||
| {label ? ( | ||
| <label className={'label ' + `${externalError || state.error ? 'error ' : ''}`} htmlFor={id || timestamp}> | ||
| {label} | ||
| </label> | ||
| ) : null} | ||
| <div className={'no-padding wrapper-input wrapper-input-squid ' + `${externalError || state.error ? 'error ' : ''}`}> | ||
| {leftLabel ? <span className="input-group-text">{leftLabel}</span> : null} | ||
| <input | ||
| className={ | ||
| 'col input ' + | ||
| `${readOnly ? 'readonly ' : ''}` + | ||
| `${disabled ? 'disabled ' : ''}` + | ||
| `${loading ? 'loading ' : ''}` + | ||
| `${!loading && (externalError || state.error) ? 'error ' : ''}` + | ||
| `${externalIcon ? 'has-icon-external ' : ''}` | ||
| } | ||
| style={{ | ||
| backgroundColor: backgroundColor, | ||
| }} | ||
| id={id || timestamp} | ||
| type={type} | ||
| inputMode="numeric" | ||
| maxLength={14} | ||
| name={name || timestamp} | ||
| placeholder={'###.###.###-##'} | ||
| value={state.value} | ||
| required={required} | ||
| disabled={disabled} | ||
| readOnly={readOnly} | ||
| onChange={handleChange} | ||
| /> | ||
| {rightLabel ? <span className="input-group-text">{rightLabel}</span> : null} | ||
| </div> | ||
| {loading ? ( | ||
| <SqLoader size="small" className={`display-block loader-input ${!label ? 'no-label' : ''}`} style={{ position: 'absolute' }} /> | ||
| ) : null} | ||
| {externalIcon && !loading ? <span className={'icon icon-external ' + `${!label ? 'no-label ' : ''}`}>{externalIcon}</span> : null} | ||
| {errorSpan ? ( | ||
| <div className={'box-validation box-invalid show '}> | ||
| {!loading && ( | ||
| <div> | ||
| {requiredOnLoad && !state.value && !state.error && !externalError ? ( | ||
| <div> | ||
| <i className="fa-solid fa-diamond-exclamation gold"></i> | ||
| {t('globals:emptyField')} | ||
| </div> | ||
| ) : null} | ||
| {state.error || externalError ? errorIcon || <i className="fa-regular fa-exclamation-triangle"></i> : null} | ||
| {externalError ? externalError : ''} | ||
| {state.error && !externalError ? <span className={'message-error'} dangerouslySetInnerHTML={{ __html: state.error }} /> : ''} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
The component function is quite large and handles multiple responsibilities (rendering UI, handling state changes, validation). Consider refactoring into smaller components or hooks to improve readability and maintainability.
| export const Default: Story = { | ||
| args: { | ||
| label: 'Type a RUT', | ||
| onTimeout: undefined, | ||
| required: true, | ||
| }, |
There was a problem hiding this comment.
Tip
Codebase Verification
The verification process has revealed that the SqInputDocumentRutExample component does not handle the props label, onTimeout, and required as specified in its default story. This was confirmed by the absence of any output from the search command, which was correctly targeted at the appropriate file path.
Action Required:
- Review and update the
SqInputDocumentRutExamplecomponent to ensure it properly handles thelabel,onTimeout, andrequiredprops as used in its default story.
Analysis chain
The default story for SqInputDocumentRut is well-defined with appropriate props for RUT input. Ensure that the SqInputDocumentRutExample component properly handles these props (label, onTimeout, required).
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that SqInputDocumentRutExample handles the props used in its default story.
# Test: Search for the prop handling in SqInputDocumentRutExample component.
rg --type typescript $'props.*label|props.*onTimeout|props.*required' src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.example.tsx
Length of output: 193
Script:
#!/bin/bash
# Description: Re-verify that SqInputDocumentRutExample handles the props used in its default story.
# Test: Search for the prop handling in SqInputDocumentRutExample component.
rg 'props.*label|props.*onTimeout|props.*required' src/components/inputs/sq-input-document-rut/sq-input-document-rut.component.example.tsx
Length of output: 268
Script:
#!/bin/bash
# Description: Find the correct file path for SqInputDocumentRutExample component.
# Test: Use fd to locate the file in the repository.
fd sq-input-document-rut.component.example.tsx
Length of output: 145
Script:
#!/bin/bash
# Description: Verify that SqInputDocumentRutExample handles the props used in its default story with the correct file path.
# Test: Search for the prop handling in SqInputDocumentRutExample component using the correct file path.
rg 'props.*label|props.*onTimeout|props.*required' src/components/inputs/sq-input-document-rut/__docs__/sq-input-document-rut.component.example.tsx
Length of output: 149
| export const Default: Story = { | ||
| args: { | ||
| label: 'Select', | ||
| options: [ | ||
| { id: 1, label: 'Option 1' }, | ||
| { id: 2, label: 'Option 2' }, | ||
| { id: 3, label: 'Option 3' }, | ||
| ], | ||
| }, | ||
| } |
There was a problem hiding this comment.
Tip
Codebase Verification
The verification process has revealed that the SqMultiSelectExample component does not handle the label and options props as specified in the default story for the SqMultiSelect component. This was confirmed by the absence of any output from the search command, which specifically looked for these props in the component's code.
Action Required:
- Review and update the
SqMultiSelectExamplecomponent to ensure it properly handles thelabelandoptionsprops as used in its default story.
Analysis chain
The default story for SqMultiSelect is well-defined with appropriate props for multi-select input. Ensure that the SqMultiSelectExample component properly handles these props (label, options).
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that SqMultiSelectExample handles the props used in its default story.
# Test: Search for the prop handling in SqMultiSelectExample component.
rg --type typescript $'props.*label|props.*options' src/components/inputs/sq-multi-select/sq-multi-select.component.example.tsx
Length of output: 163
Script:
#!/bin/bash
# Description: Re-verify that SqMultiSelectExample handles the props used in its default story.
# Test: Search for the prop handling in SqMultiSelectExample component without specifying file type.
rg 'props.*label|props.*options' src/components/inputs/sq-multi-select/sq-multi-select.component.example.tsx
Length of output: 226
Script:
#!/bin/bash
# Description: Verify the existence and correct path of SqMultiSelectExample component file.
# Test: Search for the file in the repository.
fd sq-multi-select.component.example.tsx
Length of output: 127
Script:
#!/bin/bash
# Description: Verify that SqMultiSelectExample handles the props used in its default story with the correct file path.
# Test: Search for the prop handling in SqMultiSelectExample component using the correct file path.
rg 'props.*label|props.*options' src/components/inputs/sq-multi-select/__docs__/sq-multi-select.component.example.tsx
Length of output: 119
No description provided.