Vite App

22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /src/Stack/Stack.css.ts: -------------------------------------------------------------------------------- 1 | import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css' 2 | 3 | export const flexGrow = createVar('flex-grow') 4 | 5 | export const stack = style({}) 6 | 7 | globalStyle(`${stack} > *`, { 8 | flexGrow: fallbackVar(flexGrow, '0') 9 | }) 10 | -------------------------------------------------------------------------------- /src/Stack/Stack.tsx: -------------------------------------------------------------------------------- 1 | import { Children, cloneElement, isValidElement, type CSSProperties, type ReactElement } from 'react' 2 | import * as styles from './Stack.css' 3 | import Box, { BoxProps } from '@lib/Box/Box' 4 | import { useRatio } from '@lib/useRatio' 5 | import { assignInlineVars } from '@vanilla-extract/dynamic' 6 | 7 | export interface StackProps extends BoxProps<'column'> { 8 | /** 9 | * Grow the Stack's children to fill the container's height. 10 | * 11 | * If a string is supplied in the format `${number}[.../${number}]` each value separated with a slash "/" is used as a proportion for the `flex-grow` value. 12 | * For example, an `expandChildren` value of "1/1.5/1" will grow the middle child 1.5 times more than the other two elements (assuming there are 3 children). 13 | * 14 | * @see `ratio` Columns 15 | */ 16 | expandChildren?: boolean | string 17 | } 18 | 19 | export const stackStyles = styles ?? {} 20 | 21 | /** 22 | * Vertically stacked elements, taking up the full width by default. Best nested within other Stacks. 23 | */ 24 | export function Stack ({ 25 | children, 26 | expandChildren = false, 27 | ...props 28 | }: StackProps) { 29 | const ratios = useRatio(expandChildren) 30 | return ( 31 | 36 | {ratios === undefined 37 | ? children 38 | // TODO: Only need to map the children like this is expandChildren is a string. 39 | : Children.map(children, (child, index) => { 40 | if (!child) return null 41 | if (!isValidElement(child)) return child 42 | return ( 43 | cloneElement(child as ReactElement<{ style: CSSProperties }>, { 44 | style: { 45 | ...(child as ReactElement<{ style: CSSProperties }>).props.style, 46 | ...assignInlineVars({ 47 | [styles.flexGrow]: typeof ratios === 'string' 48 | ? ratios 49 | : (ratios?.[index] || '0') 50 | }) 51 | } 52 | }) 53 | ) 54 | })} 55 | 56 | ) 57 | } 58 | -------------------------------------------------------------------------------- /src/component-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christiankaindl/LYTS/270d8e2c4df5776e9eb68b7d87826c20f542f067/src/component-icons.png -------------------------------------------------------------------------------- /src/favicon.svg: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/hooks/useAlign.ts: -------------------------------------------------------------------------------- 1 | export function useAlign (orientation: 'row' | 'column', xAlign: string, yAlign: string) { 2 | return { 3 | flexDirection: orientation, 4 | alignItems: orientation === 'row' ? yAlign : xAlign, 5 | justifyContent: orientation === 'row' ? xAlign : yAlign 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/ideas.md: -------------------------------------------------------------------------------- 1 | - Add new `clamp` prop to Stack, Row and Columns out-of-the-box. If yes, then that would automatically wrap them in Clamp 2 | - Columns "auto" keyword? 3 | - Columns "/"-syntax confusing? 4 | - Columns "style"-forwarding example would be good 5 | - Columns xAlign doesn't do anything? (only has effect on mobile) 6 | - Merge Columns and Row into one? -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export const lytsId = Symbol('Identifier for LYTS React components') 2 | 3 | export * from './Box/Box' 4 | export * from './Stack/Stack' 5 | export * from './Row/Row' 6 | export * from './Clamp/Clamp' 7 | export * from './Columns/Columns' 8 | export * from './Grid/Grid' 9 | export * from './Split/Split' 10 | export * from './Breakout/Breakout' 11 | 12 | export { toSelectorString } from './utils/toSelectorString' 13 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import React, { FunctionComponent, useLayoutEffect, useRef, useState, type RefObject } from 'react' 3 | import { Stack, Row, Clamp, Columns, Grid, Box, Breakout, Split } from './' 4 | import DebugProvider from './DebugProvider/DebugProvider' 5 | 6 | function ForwardRefTest () { 7 | const ref = useRef(null) 8 | const [height, setHeight] = useState() 9 | 10 | useLayoutEffect(() => { 11 | setHeight(ref.current?.clientHeight) 12 | }) 13 | 14 | return ( 15 |

16 | 17 | Height: {height} 18 |

19 | ) 20 | } 21 | 22 | function ChildWithRef ({ ref }: { ref: RefObject }) { 23 | return Child with ref 24 | } 25 | 26 | const App: FunctionComponent = function () { 27 | return ( 28 | 29 | 30 |

Default Stack

31 | 32 | Item 1 33 | Item 2 34 | 35 | Box child 36 | 37 | Nested box child 38 | 39 | 40 | 41 |

42 |

Default Row

43 | 44 | Item 1 45 | Item 2 46 | Item 3 47 | 48 |

Row `gap=0`

49 | 50 | Item 1 51 | Item 2 52 | Item 3 53 | 54 |

Row with expandChildren

55 | 56 | Item 1 57 | Item 2 58 | Item 3 59 | 60 |

Row with xAlign='space-between'

61 | 62 | Item 1 63 | Item 2 64 | Item 3 65 | 66 |

Row with Split

67 | 68 | Item 1 69 | 70 | Item 3 71 | 72 |

73 |

Default Clamp

74 | 75 | Child #1 76 | Child #2 77 | 78 |

Clamp with xAlign='center'

79 | 80 | Child #1 81 | Child #2 82 | 83 |

Clamp with Breakout

84 | 85 | Child #1 86 | 87 | Child #2 (Breakout) 88 | 89 | Child #3 90 | 91 |

Clamp with horizontal and vertical clamping

92 | 93 | Child #1 94 | 95 |

Clamp with only vertical clamping

96 | 97 | Child #1 98 | 99 |

Clamp with yAlign

100 | 101 | Child #1 102 | Child #2 103 | 104 |

105 |

Default Columns

106 | 107 | Item 1 108 | Item 2 109 | Item 3 110 | 111 |

Columns with custom ratio

112 | 113 | Item 1 114 | Item 2 115 | Item 3 116 | 117 |

118 |

Default Grid

119 | 120 | Item 1 121 | Item 2 122 | Item 3 123 | Item 1 124 | Item 2 125 | Item 3 126 | 127 | 128 | 129 | 130 | 131 | ) 132 | } 133 | 134 | // @ts-expect-error 135 | const root = createRoot(document.getElementById('root')) 136 | 137 | root.render( 138 | 139 | 140 | 141 | ) 142 | -------------------------------------------------------------------------------- /src/useRatio.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Parse ration string in the format `${number}/${number}`. Useful for flexGrow values. 3 | * 4 | * @param ratioString The ratio value 5 | * @returns An array with the parsed ratios 6 | */ 7 | export function useRatio (ratioString: string | boolean = false) { 8 | return parseRatioString(ratioString) 9 | } 10 | 11 | function parseRatioString (ratioString: string | boolean): string | string[] | undefined { 12 | if (ratioString === false) return undefined 13 | if (ratioString === true) return '1' 14 | return ratioString?.split('/') 15 | } 16 | -------------------------------------------------------------------------------- /src/utils/toSelectorString.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert a class name string as used in HTML's `class` attribute (separated by a space " ") to the CSS dot-notation, so that it can be used as a selector with other libraries like vanilla extract. 3 | * 4 | * E.g. transforms "my-class-1 my-class-2" to ".my-class-1.my-class-2" 5 | * 6 | * @param htmlClass The class names as applied to an HTML element (e.g. "my-class-1 my-class-2") 7 | * @returns A string which can be used as a CSS selector (e.g. ".my-class-1.my-class-2") 8 | */ 9 | export function toSelectorString (htmlClass: string): string { 10 | return `.${htmlClass.split(' ').join('.')}` 11 | } 12 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@lib/*": ["src/*"] 6 | }, 7 | "target": "ESNext", 8 | "useDefineForClassFields": true, 9 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 10 | "allowJs": false, 11 | "skipLibCheck": false, 12 | "esModuleInterop": false, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "module": "ESNext", 17 | "moduleResolution": "Node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": ["./src"] 24 | } 25 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin' 4 | import tsconfigPaths from 'vite-tsconfig-paths' 5 | import path from 'path' 6 | import dts from 'vite-plugin-dts' 7 | import { libInjectCss } from 'vite-plugin-lib-inject-css' 8 | 9 | // https://vitejs.dev/config/ 10 | export default defineConfig({ 11 | plugins: [ 12 | tsconfigPaths({ root: '.' }), 13 | vanillaExtractPlugin(), 14 | libInjectCss(), 15 | react(), 16 | dts(), // Generate TypeScript types 17 | ], 18 | resolve: { 19 | alias: { 20 | // Wihtout this alias, TS path aliases (e.g. "@lib/" are not resolved) 21 | '@lib': path.resolve(__dirname, 'src') 22 | } 23 | }, 24 | build: { 25 | lib: { 26 | entry: path.resolve(__dirname, 'src/index.ts'), 27 | formats: ['es'], 28 | }, 29 | rollupOptions: { 30 | // make sure to externalize deps that shouldn't be bundled 31 | // into your library 32 | external: ['react', 'react-dom', 'react/jsx-runtime'], 33 | } 34 | } 35 | }) 36 | --------------------------------------------------------------------------------

LYTS

Card title