hipstersmoothie.com / hip-ui
A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

tweaks

Andrew Lisowski 93c126ca d079dccc

+107 -53
+1 -1
.cursor/rules/js.mdc
··· 1 1 --- 2 2 description: Typescript authoring rules 3 - globs: ["**/*.js", "**/*.ts", "**/*.js"] 3 + globs: ["**/*.js", "**/*.ts", "**/*.js", "**/*.tsx"] 4 4 alwaysApply: true 5 5 --- 6 6
+51 -14
packages/hip-ui/src/cli/install.tsx
··· 327 327 string 328 328 >; 329 329 330 + const packagesToInstall: string[] = []; 331 + 330 332 for (const [packageName, version] of Object.entries(dependencies)) { 331 333 if (packageDependencies[packageName] === version) { 332 334 continue; 333 335 } 334 336 335 - console.log(`🔄 Installing ${packageName}@${version}`); 337 + packagesToInstall.push(`${packageName}@${version}`); 338 + } 336 339 337 - // await new Promise((resolve) => 338 - // exec(`${config.packageManager} i ${packageName}@${version}`, (error) => { 339 - // if (error) { 340 - // console.error( 341 - // `❌ Error installing ${packageName}@${version}:`, 342 - // error, 343 - // ); 344 - // } 340 + if (packagesToInstall.length === 0) { 341 + return; 342 + } 345 343 346 - // resolve(true); 347 - // }), 348 - // ); 349 - } 344 + console.log(`🔄 Installing ${packagesToInstall.length} dependencies...`); 345 + 346 + await new Promise((resolve, reject) => 347 + exec( 348 + `${config.packageManager} i ${packagesToInstall.join(" ")}`, 349 + { cwd: process.cwd() }, 350 + (error, stdout, stderr) => { 351 + if (error) { 352 + console.error(`❌ Error installing dependencies:`, error); 353 + console.error(stderr); 354 + reject(error); 355 + return; 356 + } 357 + 358 + if (stdout) { 359 + console.log(stdout); 360 + } 361 + 362 + resolve(true); 363 + }, 364 + ), 365 + ); 350 366 } 351 367 352 368 async function outputFile( ··· 434 450 435 451 const config = await setup(); 436 452 453 + // Gather all dependencies from all components 454 + const allDependencies: { [key: string]: string } = {}; 455 + for (const componentConfig of componentConfigs) { 456 + if (componentConfig.dependencies) { 457 + for (const [packageName, version] of Object.entries( 458 + componentConfig.dependencies, 459 + )) { 460 + // If a package appears multiple times, keep the first version encountered 461 + if (!allDependencies[packageName]) { 462 + allDependencies[packageName] = version; 463 + } 464 + } 465 + } 466 + } 467 + 468 + // Install all dependencies at once 469 + if (Object.keys(allDependencies).length > 0) { 470 + console.log(`🔄 Installing all dependencies...`); 471 + await installDependencies(config, allDependencies); 472 + } 473 + 474 + // Install hip dependencies and copy files for each component 437 475 for (const componentConfig of componentConfigs) { 438 476 console.log(`🔄 Installing ${componentConfig.name}`); 439 - await installDependencies(config, componentConfig.dependencies); 440 477 await installHipDependencies(config, componentConfig); 441 478 await copyFiles(config, componentConfig); 442 479 console.log(`✅ Installed ${componentConfig.name}\n`);
+16 -5
packages/hip-ui/src/components/footer/index.tsx
··· 24 24 backgroundColor: uiColor.bgSubtle, 25 25 containerType: "inline-size", 26 26 }, 27 + footerSectionWrapper: { 28 + borderTopWidth: 1, 29 + borderTopStyle: "solid", 30 + borderTopColor: uiColor.border1, 31 + }, 27 32 footerSection: { 33 + borderWidth: 0, 28 34 maxWidth: "var(--page-content-max-width)", 29 35 marginLeft: "auto", 30 36 marginRight: "auto", ··· 55 61 ":is([data-footer-centered] *)": "center", 56 62 [containerBreakpoints.sm]: "center", 57 63 }, 58 - borderTopWidth: 1, 59 - borderTopStyle: "solid", 60 - borderTopColor: uiColor.border1, 61 64 }, 62 65 navSection: { 63 66 display: "grid", ··· 222 225 export interface FooterSectionProps 223 226 extends StyleXComponentProps<React.ComponentProps<"div">> {} 224 227 225 - export const FooterSection = ({ style, ...props }: FooterSectionProps) => { 226 - return <div {...props} {...stylex.props(styles.footerSection, style)} />; 228 + export const FooterSection = ({ 229 + style, 230 + children, 231 + ...props 232 + }: FooterSectionProps) => { 233 + return ( 234 + <div {...props} {...stylex.props(styles.footerSectionWrapper, style)}> 235 + <div {...stylex.props(styles.footerSection)}>{children}</div> 236 + </div> 237 + ); 227 238 }; 228 239 229 240 /**
+7 -7
packages/hip-ui/src/components/header-layout/index.tsx
··· 62 62 default: spacing["6"], 63 63 [containerBreakpoints.sm]: spacing["12"], 64 64 }, 65 + }, 66 + heroContent: { 67 + maxWidth: "var(--page-content-max-width)", 68 + width: "100%", 69 + marginLeft: "auto", 70 + marginRight: "auto", 71 + boxSizing: "border-box", 65 72 paddingLeft: { 66 73 default: spacing["4"], 67 74 [containerBreakpoints.sm]: spacing["8"], ··· 70 77 default: spacing["4"], 71 78 [containerBreakpoints.sm]: spacing["8"], 72 79 }, 73 - }, 74 - heroContent: { 75 - maxWidth: "var(--page-content-max-width)", 76 - width: "100%", 77 - marginLeft: "auto", 78 - marginRight: "auto", 79 - boxSizing: "border-box", 80 80 }, 81 81 }); 82 82
+32 -26
packages/hip-ui/src/components/navbar/Navbar.tsx
··· 9 9 import { IconButton } from "../icon-button"; 10 10 import { Separator } from "../separator"; 11 11 import { primaryColor, uiColor } from "../theme/color.stylex"; 12 - import { 13 - breakpoints, 14 - containerBreakpoints, 15 - } from "../theme/media-queries.stylex"; 12 + import { containerBreakpoints } from "../theme/media-queries.stylex"; 16 13 import { ui } from "../theme/semantic-color.stylex"; 17 14 import { spacing } from "../theme/spacing.stylex"; 18 15 import { Size, StyleXComponentProps } from "../theme/types"; 19 16 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 20 17 21 18 const styles = stylex.create({ 19 + wrapper: { 20 + borderBottomColor: uiColor.border1, 21 + borderBottomStyle: "solid", 22 + borderBottomWidth: 1, 23 + zIndex: 1000, 24 + width: "100%", 25 + top: 0, 26 + }, 22 27 navbar: { 28 + marginLeft: "auto", 29 + marginRight: "auto", 30 + borderWidth: 0, 23 31 maxWidth: "var(--page-content-max-width)", 24 32 "--separator-visibility": { 25 33 default: "none", ··· 86 94 ":is([data-navbar-open]):has([data-navbar-action])": `min-content min-content min-content min-content`, 87 95 }, 88 96 rowGap: spacing["8"], 89 - zIndex: 1000, 90 - borderBottomColor: uiColor.border1, 91 - borderBottomStyle: "solid", 92 - borderBottomWidth: 1, 93 - height: { 97 + minHeight: { 94 98 default: spacing["14"], 95 99 ":is([data-navbar-open])": "100%", 96 100 [containerBreakpoints.sm]: spacing["14"], ··· 108 112 [containerBreakpoints.sm]: spacing["8"], 109 113 }, 110 114 paddingTop: spacing["3"], 111 - top: 0, 112 115 width: "100%", 113 116 }, 114 117 logo: { ··· 306 309 } 307 310 308 311 export interface NavbarProps 309 - extends StyleXComponentProps<React.ComponentProps<"nav">> { 312 + extends StyleXComponentProps<React.ComponentProps<"div">> { 310 313 size?: Size; 311 314 } 312 315 ··· 325 328 326 329 return ( 327 330 <SizeContext value={size}> 328 - <nav 329 - {...props} 330 - data-navbar-open={isMobileMenuOpen || undefined} 331 - {...stylex.props(styles.navbar, ui.bg, style)} 332 - > 333 - {children} 334 - <Separator style={styles.separator as unknown as stylex.StyleXStyles} /> 335 - <IconButton 336 - aria-label="Open menu" 337 - variant="tertiary" 338 - style={styles.hamburgerButton} 339 - onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 331 + <div {...props} {...stylex.props(styles.wrapper, style)}> 332 + <nav 333 + data-navbar-open={isMobileMenuOpen || undefined} 334 + {...stylex.props(styles.navbar, ui.bg, style)} 340 335 > 341 - {isMobileMenuOpen ? <X /> : <Menu />} 342 - </IconButton> 343 - </nav> 336 + {children} 337 + <Separator 338 + style={styles.separator as unknown as stylex.StyleXStyles} 339 + /> 340 + <IconButton 341 + aria-label="Open menu" 342 + variant="tertiary" 343 + style={styles.hamburgerButton} 344 + onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 345 + > 346 + {isMobileMenuOpen ? <X /> : <Menu />} 347 + </IconButton> 348 + </nav> 349 + </div> 344 350 </SizeContext> 345 351 ); 346 352 };