User attribute component#494
Open
Zach Harrison (zachharrison) wants to merge 13 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Mint Stencil component (<sqm-user-attribute>) intended to display a logged-in user’s custom field value by querying viewer.customFields, and exposes it in Stencilbook for demo/testing.
Changes:
- Introduces
sqm-user-attributecomponent, hook, and view for rendering a selected user custom field. - Adds a Stencilbook story and wires it into
sqm-stencilbook. - Updates generated docs/types (
components.d.ts, component readme) and bumps@saasquatch/mint-componentsversion.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mint-components/src/components/sqm-user-attribute/useUserAttribute.ts | Adds GraphQL hook to fetch viewer.customFields and derive the displayed attribute value. |
| packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute.tsx | Adds the new Stencil component wrapper and demo-mode hook wiring. |
| packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute-view.tsx | Adds the presentational view for rendering loading text or the attribute value. |
| packages/mint-components/src/components/sqm-user-attribute/UserAttribute.stories.tsx | Adds a basic Stencilbook story for the new component. |
| packages/mint-components/src/components/sqm-user-attribute/user-attribute.feature | Adds a (currently placeholder) cucumber/gherkin spec file. |
| packages/mint-components/src/components/sqm-user-attribute/readme.md | Adds autogenerated component docs for the new component. |
| packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx | Registers the new story module in the Stencilbook story list. |
| packages/mint-components/src/components/sqm-stencilbook/readme.md | Updates Stencilbook docs graph to include the new component dependency. |
| packages/mint-components/src/components.d.ts | Updates generated component typings to include sqm-user-attribute. |
| packages/mint-components/package.json | Bumps the package version. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+23
to
+24
| console.log("customFields", customFields, "value", value); | ||
|
|
Comment on lines
+12
to
+16
| /** | ||
| * @uiName User Attribute | ||
| * @exampleGroup Advanced Components | ||
| * @example User Attribute - <sqm-user-attribute value="firstName" loading-text="..."></sqm-user-attribute> | ||
| */ |
| @@ -0,0 +1 @@ | |||
| #todo No newline at end of file | |||
| @@ -0,0 +1,32 @@ | |||
| # sqm-sidebar-item | |||
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+10
to
+18
| function getStyle(props: UserAttributeViewProps) { | ||
| return ` | ||
| p { | ||
| margin: 0; | ||
| padding: 0; | ||
| ${props.fontsize && `font-size: ${props.fontsize};`} | ||
| ${props.fontweight && `font-weight: ${props.fontweight};`} | ||
| color: ${props.color ? props.color : "var(--sqm-text)"}; | ||
| }`; |
Comment on lines
+31
to
+36
| /** | ||
| * Font size in pixels. | ||
| * @uiName Font size | ||
| * @uiGroup Style | ||
| */ | ||
| @Prop() fontsize?: string; |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 11 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+31
to
+48
| /** | ||
| * Font size in pixels. | ||
| * @uiName Font size | ||
| * @uiGroup Style | ||
| */ | ||
| @Prop() fontsize?: string; | ||
| /** | ||
| * @uiName Color | ||
| * @uiWidget color | ||
| * @format color | ||
| * @uiGroup Style | ||
| */ | ||
| @Prop() color?: string; | ||
| /** | ||
| * @uiName Font weight | ||
| * @uiGroup Style | ||
| */ | ||
| @Prop() fontweight?: string; |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+26
to
+34
| return ( | ||
| props.value && ( | ||
| <Host> | ||
| <style>{styleString}</style> | ||
| <p class={sheet.classes.P} part="sqm-base"> | ||
| {props.loading ? loadingSkeleton : props.value} | ||
| </p> | ||
| </Host> | ||
| ) |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 11 changed files in this pull request and generated 7 comments.
Comments suppressed due to low confidence (2)
packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute-view.tsx:34
- The render guard
props.value && (...)will treat valid custom field values like0as falsy and render nothing. SincecustomFieldsare used as numeric counters elsewhere in the codebase, consider checking fornull/undefinedinstead of truthiness so0still displays.
props.value && (
<Host>
<style>{styleString}</style>
<p class={sheet.classes.P} part="sqm-base">
{props.loading ? loadingSkeleton : props.value}
</p>
</Host>
)
packages/mint-components/src/components/sqm-user-attribute/user-attribute.feature:45
- The spec claims style props are optional and default to "default browser styles", but the view always applies base styles (e.g.,
margin: 0,padding: 0, and a defaultcolor). Update the scenario text to reflect the actual baseline styling, or adjust the implementation to truly leave browser defaults unchanged when no style props are set.
@minutia
Scenario: Style props are optional and default to no custom styling
Given the component has no style props set
When the component is rendered
Then the text is displayed with default browser styles
| @@ -0,0 +1,39 @@ | |||
| # sqm-sidebar-item | |||
| "name": "@saasquatch/mint-components", | ||
| "title": "Mint Components", | ||
| "version": "2.1.11", | ||
| "version": "2.1.10-57", |
Comment on lines
+16
to
+22
| export function useUserAttribute(props: UserAttribute): UserAttributeViewProps { | ||
| const user = useUserIdentity(); | ||
| const res = useQuery(GET_CUSTOM_FIELDS, {}, !user?.jwt); | ||
| const loading = res.loading; | ||
| const customFields = res.data?.viewer?.customFields; | ||
| const value = customFields?.[props.value]; | ||
|
|
| Examples: | ||
| | prop | value | cssProperty | | ||
| | fontSize | 24 | font-size | | ||
| | color | #E91E63 | color | |
Comment on lines
+23
to
+28
| @motivating | ||
| Scenario: A loading skeleton is shown while data is loading | ||
| Given the component is loading user data | ||
| When the component is rendered | ||
| Then a loading skeleton is displayed | ||
|
|
Comment on lines
+3
to
+9
| export interface UserAttributeViewProps { | ||
| loading: boolean; | ||
| value: string; | ||
| fontSize?: number; | ||
| color?: string; | ||
| fontWeight?: number; | ||
| } |
Comment on lines
+12
to
+16
| /** | ||
| * @uiName User Attribute | ||
| * @exampleGroup Advanced | ||
| * @example User Attribute - <sqm-user-attribute value="firstName"></sqm-user-attribute> | ||
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description of the change
Type of change
Links
Checklists
Development
Paperwork
Code review