@theguild/components v7 #1587
Open
@theguild/components v7 #1587
Conversation
This file contains 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
dimaMachina
commented
Aug 2, 2024
🦋 Changeset detectedLatest commit: 6a6e886 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Merged
dimaMachina
commented
Aug 2, 2024
dimaMachina
commented
Aug 2, 2024
Co-authored-by: Dimitri POSTOLOV <[email protected]>
📚 Storybook DeploymentThe latest changes are available as preview in: https://eef59b2e.the-guild-docs-storybook.pages.dev |
dimaMachina
commented
Oct 8, 2024
Comment on lines
+59
to
+62
| 'relative block rounded-lg sm:w-fit' + | ||
| ' px-6 py-3 font-medium leading-6 text-green-1000' + | ||
| ' relative flex flex-row items-center justify-center gap-2 text-nowrap' + | ||
| ' dark:text-neutral-200', |
There was a problem hiding this comment.
Suggested change
| 'relative block rounded-lg sm:w-fit' + | |
| ' px-6 py-3 font-medium leading-6 text-green-1000' + | |
| ' relative flex flex-row items-center justify-center gap-2 text-nowrap' + | |
| ' dark:text-neutral-200', | |
| 'relative block rounded-lg sm:w-fit', | |
| 'px-6 py-3 font-medium leading-6 text-green-1000', | |
| 'relative flex flex-row items-center justify-center gap-2 text-nowrap', | |
| 'dark:text-neutral-200', |
why to use + if we have cn()?
dimaMachina
commented
Oct 8, 2024
Comment on lines
+6
to
+25
| 'bg-primary hover:bg-green-800 hover:text-white' + | ||
| ' focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800' + | ||
| ' dark:text-neutral-800 dark:hover:text-neutral-900 dark:bg-neutral-100 dark:hover:bg-white', | ||
| ), | ||
| 'primary-inverted': cn( | ||
| 'bg-primary hover:bg-white' + | ||
| ' focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-white/40', | ||
| ), | ||
| secondary: cn( | ||
| 'bg-green-300 hover:bg-green-200' + | ||
| ' focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-300/40', | ||
| ), | ||
| 'secondary-inverted': cn( | ||
| 'bg-green-800 hover:bg-green-700 text-white' + | ||
| ' focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800/40', | ||
| ), | ||
| tertiary: cn( | ||
| 'bg-transparent text-green-1000' + | ||
| ' focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800' + | ||
| ' ', |
There was a problem hiding this comment.
same here, we don't need to use +, since we have cn()
dimaMachina
commented
Oct 8, 2024
| className={cn( | ||
| 'text-green-1000', | ||
| neueMontreal.variable, | ||
| ctx.parameters.forcedLightMode ? 'light' : '', |
There was a problem hiding this comment.
Suggested change
| ctx.parameters.forcedLightMode ? 'light' : '', | |
| ctx.parameters.forcedLightMode && 'light', |
dimaMachina
commented
Oct 8, 2024
| ); | ||
| } | ||
|
|
||
| function HiveIconMark(props: React.SVGProps<SVGSVGElement>) { |
dimaMachina
commented
Oct 8, 2024
| @@ -65,6 +65,8 @@ | |||
| "dependencies": { | |||
| "@giscus/react": "3.0.0", | |||
| "@next/bundle-analyzer": "14.2.13", | |||
| "@radix-ui/react-navigation-menu": "^1.2.0", | |||
| "@theguild/tailwind-config": "0.5.0", | |||
There was a problem hiding this comment.
why do we need it now as a dependency?
dimaMachina
commented
Oct 8, 2024
| <CallToAction | ||
| className="m-2" | ||
| onClick={() => { | ||
| window.localStorage.removeItem('cookies'); |
There was a problem hiding this comment.
Suggested change
| window.localStorage.removeItem('cookies'); | |
| localStorage.removeItem('cookies'); |
dimaMachina
commented
Oct 8, 2024
| export function CookiesConsent(props: CookiesConsentProps) { | ||
| const [show, setShow] = useState(() => localStorage.getItem('cookies') !== 'true'); | ||
|
|
||
| const accept = useCallback(() => { |
There was a problem hiding this comment.
Suggested change
| const accept = useCallback(() => { | |
| const onAccept = useCallback(() => { |
dimaMachina
commented
Oct 8, 2024
Comment on lines
+43
to
+45
| render(args) { | ||
| return <LargeHiveIconDecoration {...args} />; | ||
| }, |
There was a problem hiding this comment.
Suggested change
| render(args) { | |
| return <LargeHiveIconDecoration {...args} />; | |
| }, | |
| render: LargeHiveIconDecoration, |
should works ?
dimaMachina
commented
Oct 8, 2024
Comment on lines
+36
to
+38
| render(args) { | ||
| return <HighlightDecoration {...args} />; | ||
| }, |
There was a problem hiding this comment.
Suggested change
| render(args) { | |
| return <HighlightDecoration {...args} />; | |
| }, | |
| render: HighlightDecoration, |
should works?
dimaMachina
commented
Oct 8, 2024
Comment on lines
+31
to
+34
| if (typeof window !== 'undefined' && '$crisp' in window) { | ||
| (window.$crisp as { push(cmd: string[]): void }).push(['do', 'chat:open']); | ||
| event.preventDefault(); | ||
| } |
There was a problem hiding this comment.
Suggested change
| if (typeof window !== 'undefined' && '$crisp' in window) { | |
| (window.$crisp as { push(cmd: string[]): void }).push(['do', 'chat:open']); | |
| event.preventDefault(); | |
| } | |
| (window.$crisp as { push(cmd: string[]): void }).push(['do', 'chat:open']); | |
| event.preventDefault(); |
onClick is not available on server
dimaMachina
commented
Oct 8, 2024
| </Anchor> | ||
| ))} | ||
| </div> | ||
| <p className="text-sm">© 2024 The Guild</p> |
There was a problem hiding this comment.
Suggested change
| <p className="text-sm">© 2024 The Guild</p> | |
| <p className="text-sm">© {new Date().getFullYear()} The Guild</p> |
dimaMachina
commented
Oct 8, 2024
|
|
||
| const isHive = productName === 'Hive'; | ||
|
|
||
| const containerRef = useRef<HTMLDivElement>(null); |
There was a problem hiding this comment.
Suggested change
| const containerRef = useRef<HTMLDivElement>(null); | |
| const containerRef = useRef<HTMLDivElement>(null!); |
always available
dimaMachina
commented
Oct 8, 2024
Comment on lines
+90
to
+92
| if (container) { | ||
| container.style.setProperty('--border-opacity', scrolled ? '1' : '0'); | ||
| } |
There was a problem hiding this comment.
Suggested change
| if (container) { | |
| container.style.setProperty('--border-opacity', scrolled ? '1' : '0'); | |
| } | |
| container.style.setProperty('--border-opacity', scrolled ? '1' : '0'); |
dimaMachina
commented
Oct 8, 2024
| {children} | ||
|
|
||
| {renderSlot(Search, { | ||
| // The && and :is(x) selector bump the specificity to 0-2-2 to override Nextra styles. |
There was a problem hiding this comment.
please don't do this, it's too overcomplicates all the things, it will be broken and difficult to maintain
dimaMachina
commented
Oct 8, 2024
Comment on lines
+159
to
+162
| if (typeof window !== 'undefined' && '$crisp' in window) { | ||
| (window.$crisp as { push(cmd: string[]): void }).push(['do', 'chat:open']); | ||
| event.preventDefault(); | ||
| } |
There was a problem hiding this comment.
Suggested change
| if (typeof window !== 'undefined' && '$crisp' in window) { | |
| (window.$crisp as { push(cmd: string[]): void }).push(['do', 'chat:open']); | |
| event.preventDefault(); | |
| } | |
| (window.$crisp as { push(cmd: string[]): void }).push(['do', 'chat:open']); | |
| event.preventDefault(); |
dimaMachina
commented
Oct 8, 2024
| const MenuContentColumns = forwardRef( | ||
| (props: MenuContentColumnsProps, ref: React.ForwardedRef<HTMLDivElement>) => { | ||
| return ( | ||
| <div className="flex gap-x-6 [&>*]:flex [&>*]:flex-col [&>*]:gap-4" ref={ref} {...props}> |
There was a problem hiding this comment.
Suggested change
| <div className="flex gap-x-6 [&>*]:flex [&>*]:flex-col [&>*]:gap-4" ref={ref} {...props}> | |
| <div className="flex gap-x-6 *:flex *:flex-col *:gap-4" ref={ref} {...props}> |
dimaMachina
commented
Oct 8, 2024
Comment on lines
+327
to
+342
| [ | ||
| 'Documentation', | ||
| PaperIcon, | ||
| isHive ? '/docs' : 'https://the-guild.dev/graphql/hive/docs', | ||
| ], | ||
| ['Status', TargetIcon, 'https://status.graphql-hive.com/'], | ||
| [ | ||
| 'Product Updates', | ||
| RightCornerIcon, | ||
| isHive | ||
| ? '/product-updates' | ||
| : 'https://the-guild.dev/graphql/hive/product-updates', | ||
| ], | ||
| ['Blog', PencilIcon, 'https://the-guild.dev/blog'], | ||
| ['GitHub', GitHubIcon, 'https://github.com/kamilkisiela/graphql-hive'], | ||
| ] as const |
There was a problem hiding this comment.
use object, not tuple
dimaMachina
commented
Oct 8, 2024
Comment on lines
+355
to
+362
| [ | ||
| 'YouTube', | ||
| YouTubeIcon, | ||
| 'https://www.youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd', | ||
| ], | ||
| ['X', TwitterIcon, 'https://x.com/theguilddev'], | ||
| ['LinkedIn', LinkedInIcon, 'https://www.linkedin.com/company/the-guild-software/'], | ||
| ['Discord', DiscordIcon, 'https://discord.com/invite/xud7bH9'], |
There was a problem hiding this comment.
same, object, not tuple
dimaMachina
commented
Oct 8, 2024
| // These icons are _different_ than the ones used elsewhere. | ||
| // e.g. Discord is a "chat" bubble with the Discord logo in the center. | ||
|
|
||
| function YouTubeIcon(props: React.SVGProps<SVGSVGElement>) { |
dimaMachina
commented
Oct 8, 2024
| ); | ||
| } | ||
|
|
||
| function TwitterIcon(props: React.SVGProps<SVGSVGElement>) { |
dimaMachina
commented
Oct 8, 2024
| ); | ||
| } | ||
|
|
||
| function LinkedInIcon(props: React.SVGProps<SVGSVGElement>) { |
dimaMachina
commented
Oct 8, 2024
| ); | ||
| } | ||
|
|
||
| function DiscordIcon(props: React.SVGProps<SVGSVGElement>) { |
dimaMachina
commented
Oct 8, 2024
| const marker = markerRef.current; | ||
| const observer = new IntersectionObserver(entries => { | ||
| onChangeRef.current(entries[0].boundingClientRect.y < -1); | ||
| }, {}); |
There was a problem hiding this comment.
Suggested change
| }, {}); | |
| }); |
dimaMachina
commented
Oct 8, 2024
| onChangeRef.current = onChange; | ||
|
|
||
| useEffect(() => { | ||
| if (mounted && markerRef.current && 'IntersectionObserver' in window) { |
There was a problem hiding this comment.
Suggested change
| if (mounted && markerRef.current && 'IntersectionObserver' in window) { | |
| if (mounted && markerRef.current) { |
it's available in all modern browsers
dimaMachina
commented
Oct 8, 2024
| > | ||
| <NavigationMenuPrimitive.Viewport | ||
| className={cn( | ||
| 'relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)] origin-[top_center] overflow-hidden rounded-xl border border-beige-200 bg-white shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-90 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 dark:border-neutral-800 dark:bg-neutral-900', |
There was a problem hiding this comment.
Suggested change
| 'relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)] origin-[top_center] overflow-hidden rounded-xl border border-beige-200 bg-white shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-90 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 dark:border-neutral-800 dark:bg-neutral-900', | |
| 'relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-[--radix-navigation-menu-viewport-width] origin-[top_center] overflow-hidden rounded-xl border border-beige-200 bg-white shadow-[0px_16px_32px_-12px_rgba(14,18,27,0.10)] ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-90 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 dark:border-neutral-800 dark:bg-neutral-900', |
use shorthand
dimaMachina
commented
Oct 8, 2024
Comment on lines
+16
to
+18
| render() { | ||
| return <ToolsAndLibrariesCards />; | ||
| }, |
There was a problem hiding this comment.
Suggested change
| render() { | |
| return <ToolsAndLibrariesCards />; | |
| }, | |
| render: ToolsAndLibrariesCards, |
dimaMachina
commented
Oct 8, 2024
| const cardDecorations = { | ||
| [PRODUCTS.HIVE.name](props: React.SVGAttributes<SVGSVGElement>) { | ||
| return ( | ||
| <svg |
dimaMachina
commented
Oct 8, 2024
| "@theguild/components": "workspace:*", | ||
| "@theguild/components": "^6", |
There was a problem hiding this comment.
should use from workspace
dimaMachina
commented
Oct 8, 2024
| @@ -17,4 +26,6 @@ export default { | |||
| }, | |||
| }, | |||
| }, | |||
| darkMode: ['variant', '&:not(.light *)'], | |||
| plugins: [require('tailwindcss-animate')], | |||
dimaMachina
commented
Oct 8, 2024
| @@ -17,4 +26,6 @@ export default { | |||
| }, | |||
| }, | |||
| }, | |||
| darkMode: ['variant', '&:not(.light *)'], | |||
There was a problem hiding this comment.
Suggested change
| darkMode: ['variant', '&:not(.light *)'], | |
| darkMode: ['variant'], |
this need to be simplified, ping me if you need help
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.
No description provided.