User attribute component#494
Open
Zach Harrison (zachharrison) wants to merge 9 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
+21
to
+22
| const value = customFields?.[props.value]; | ||
|
|
Comment on lines
+23
to
+24
| console.log("customFields", customFields, "value", value); | ||
|
|
Comment on lines
+10
to
+15
| return ( | ||
| props.value && ( | ||
| <Host> | ||
| <p part="sqm-base">{props.loading ? props.loadingText : props.value}</p> | ||
| </Host> | ||
| ) |
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> | ||
| */ |
Comment on lines
+52
to
+60
| function useCustomFieldsDemo(props: UserAttribute): UserAttributeViewProps { | ||
| return deepmerge( | ||
| { | ||
| loading: false, | ||
| value: "Custom Field Value", | ||
| }, | ||
| props.demoData || {}, | ||
| { arrayMerge: (_, a) => a }, | ||
| ); |
| @@ -0,0 +1 @@ | |||
| #todo No newline at end of file | |||
| @@ -0,0 +1,32 @@ | |||
| # sqm-sidebar-item | |||
| return ( | ||
| <sqm-user-attribute | ||
| demoData={{ | ||
| loading: false, |
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
+25
to
+31
| return ( | ||
| props.value && ( | ||
| <Host> | ||
| <style>{getStyle(props)}</style> | ||
| <p part="sqm-base">{props.loading ? loadingSkeleton : props.value}</p> | ||
| </Host> | ||
| ) |
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)"}; | ||
| }`; |
| /** | ||
| * @uiName User Attribute | ||
| * @exampleGroup Advanced Components | ||
| * @example User Attribute - <sqm-user-attribute value="firstName" loading-text="..."></sqm-user-attribute> |
Comment on lines
+31
to
+36
| /** | ||
| * Font size in pixels. | ||
| * @uiName Font size | ||
| * @uiGroup Style | ||
| */ | ||
| @Prop() fontsize?: string; |
Comment on lines
+1
to
+15
| # sqm-sidebar-item | ||
|
|
||
|
|
||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | ------------- | -------------- | ------------------------------------------------------- | -------------------------------------------------------------- | ----------- | | ||
| | `demoData` | -- | | `{ loading?: boolean; value?: string; loadingText?: string; }` | `undefined` | | ||
| | `loadingText` | `loading-text` | Text displayed while the participant’s name is loading. | `string` | `"..."` | | ||
| | `value` | `value` | The custom field key to display. | `string` | `undefined` | | ||
|
|
Comment on lines
+1
to
+4
| import { h } from "@stencil/core"; | ||
|
|
||
| export default { | ||
| title: "Components/User Attribute", |
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
+26
to
+33
| return ( | ||
| props.value && ( | ||
| <Host> | ||
| <style>{styleString}</style> | ||
| <p part="sqm-base">{props.loading ? loadingSkeleton : props.value}</p> | ||
| </Host> | ||
| ) | ||
| ); |
Comment on lines
+11
to
+22
| export function UserAttributeView(props: UserAttributeViewProps) { | ||
| const style = { | ||
| P: { | ||
| margin: "0", | ||
| padding: "0", | ||
| fontSize: props.fontsize || "inherit", | ||
| fontWeight: props.fontweight || "inherit", | ||
| color: props.color || "var(--sqm-text)", | ||
| }, | ||
| }; | ||
| const sheet = createStyleSheet(style); | ||
| const styleString = sheet.toString(); |
| /** | ||
| * @uiName User Attribute | ||
| * @exampleGroup Advanced | ||
| * @example User Attribute - <sqm-user-attribute value="firstName" loading-text="..."></sqm-user-attribute> |
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; |
| @@ -0,0 +1,39 @@ | |||
| # sqm-sidebar-item | |||
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]; | ||
|
|
Comment on lines
+31
to
+37
| /** | ||
| * Font size in pixels. | ||
| * @uiName Font size | ||
| * @uiGroup Style | ||
| */ | ||
| @Prop() fontsize?: string; | ||
| /** |
Comment on lines
+3
to
+9
| export interface UserAttributeViewProps { | ||
| loading: boolean; | ||
| value: string; | ||
| fontsize?: string; | ||
| color?: string; | ||
| 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> | ||
| ) |
Comment on lines
+3
to
+9
| export interface UserAttributeViewProps { | ||
| loading: boolean; | ||
| value: string; | ||
| fontSize?: number; | ||
| color?: string; | ||
| fontWeight?: number; | ||
| } |
| /** | ||
| * @uiName User Attribute | ||
| * @exampleGroup Advanced | ||
| * @example User Attribute - <sqm-user-attribute value="firstName" loading-text="..."></sqm-user-attribute> |
| @@ -0,0 +1,39 @@ | |||
| # sqm-sidebar-item | |||
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