lilact 0.9.1 → 0.10.1

package/docs/static/index.html

@@ -70,7 +70,9 @@ injectGlobal({
 			overflowWrap: "anywhere" 
 		},
 		p: {padding: "10px"},
-		body: {padding: "20px"}
+		body: { padding: "20px", background: "#262d36", color: "#e7e7e7" },
+		":visited": {color: "#c16480"},
+
 	});
 
 const outer = css({
@@ -78,15 +80,24 @@ const outer = css({
 	flexDirection: "row",
 	gap: 2,
 	alignItems: "stretch",
-	width: "100%",
+	width: "calc(100% - 8px)",
+	margin: "2px 4px;",
+	borderRadius: "10px",
+  	overflow: "hidden"
 });
 
 const collapsible = css({
-	width: "100%",
+	width: "calc(100% - 8px)",
 	display: "block",
 	fontSize: "16px",
-	border: "1px solid #888",
-	padding: "5px"
+	padding: "10px",
+    borderRadius: "10px",
+    border: "none",
+    margin: "4px",
+	background:"#ece9ea",
+	":hover": {
+		background:"#ffa7c2"
+	}
 });
 
 const responsiveOuter = css({
@@ -96,31 +107,44 @@ const responsiveOuter = css({
 });
 
 const pane = css({ flex: "1 1 0",
-										border: "1px solid",
-										height: "400px",
-										minHeight: "400px",
-										overflowY: "auto",
-										padding: "10px" 
-									});
+						height: "400px",
+						minHeight: "400px",
+						overflowY: "auto",
+						padding: "10px",
+						background:"#fff",
+						color: "#222",
+						button: {
+							background:"#ece9ea",
+							padding: "10px",
+							border: "none",
+							borderRadius: "7px",
+							margin: "5px",
+
+							":hover": {
+								background:"#ffa7c2"
+							}
+						}
+					});
 
 const left = css({ float: "left" });
 const right = css({ float: "right" });
+const demobox = css({ background: "#fff3", borderRadius: "12px", padding: "2px", margin: "4px"});
 
 
 
-function DemoView({ file }) 
+function DemoView({ entry }) 
 {
 	const [isOpen, setOpen] = useState(false);
 
 	const viewRef = useRef();
 	const codeRef = useRef();
 
-	const resource = createResource("demos/"+file[0]);
+	const resource = createResource("demos/"+entry[0]);
 	const code = resource.read(); // Suspense will handle the promise
 
 	if(isOpen) {
 		useEffect(() => {
-			const Comp = run(code, "demos/"+file[0]);
+			const Comp = run(code, "demos/"+entry[0]);
 			Lilact.render(<Comp/>, viewRef.current);
 		});
 
@@ -131,8 +155,8 @@ function DemoView({ file })
 	
 	return 	<>
 						<button onClick={()=>setOpen(!isOpen)} className={collapsible} type="button">
-							<span className={left}>{ (isOpen?'- ':'+ ') + file[0] + ' '}</span>
-							<b className={right}>{file[1]}</b>
+							<span className={left}>{ (isOpen?'- ':'+ ') + entry[0] + ' '}</span>
+							<b className={right}>{entry[1]}</b>
 						</button>
 						{isOpen &&
 						<div style={{width:"100%"}}>
@@ -148,11 +172,12 @@ function DemoView({ file })
 }
 
 
-function DemoBlock({file}) 
+function DemoBlock({entry}) 
 {
-	return <div key={file[0]}>
+	if(typeof(entry)==='string') return <h3><br/><center>{entry}</center></h3>;
+	return <div key={entry[0]} className={demobox}>
 							<Suspense fallback={<Spinner/>}>
-								<DemoView file={file} />
+								<DemoView entry={entry} />
 							</Suspense>
 					</div>
 }
@@ -160,24 +185,28 @@ function DemoBlock({file})
 
 function App()
 {
-	const demos =[	
+	const demos =[
+		"Hooks",
 		['stopwatch.jsx',				'( useState, useRef )'],
-		['pane.jsx',						'( useRef, useState, ResizablePane )'],
-		['modal.jsx',						'( useEffect, useRef, useState )'],
 		['actionstate.jsx',			'( useActionState, useState )'],
+		['usedeffered.jsx',		'( useState, useDeferredValue )'],
+		['usetransition.jsx',		'( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
+		['reducer.jsx',					'( useReducer )'],
 		['context.jsx',					'( createContext, useContext, useState ), emotion:( css, cx )'],
+		"API",
+		['lazy.jsx',						'( lazy, require, Suspene, Spinner )'],
 		['proptypes.jsx',				'( PropTypes )'],
+		['redux.jsx',						'( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
+		['transition.jsx',			'( useState, Transition )'],
+		"Components",
+		<!-- ['switch-transition.jsx',	'( SwitchTransition, useState )'], -->
 		['router.jsx',					'( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
-		['use-deffered.jsx',		'( useState, useDeferredValue )'],
+		['modal.jsx',						'( useEffect, useRef, useState )'],
+		['pane.jsx',						'( useRef, useState, ResizablePane )'],
 		['css-transition.jsx',		'( CSSTransition, useState, useRef )'],
-		<!-- ['switch-transition.jsx',	'( SwitchTransition, useState )'], -->
-		['usetransition.jsx',		'( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
-		['transition.jsx',			'( useState, Transition )'],
-		['reducer.jsx',					'( useReducer )'],
-		['redux.jsx',						'( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
 		['suspense.jsx',				'( Suspense, Spinner )'],
-		['lazy.jsx',						'( lazy, require, Suspene, Spinner )'],
 		['form-elements.jsx',		'()'],
+		"Error Report and Handling",
 		['error-boundary.jsx',						'( ErrorBoundary, useState )'],
 		['error-parser.jsx',							'-- JSX Parser Error --'],
 		['error-init.jsx',								'-- Error in Component initialization --'],
@@ -206,7 +235,7 @@ function App()
 						
 						<p>See the{" "}<a href="../">Lilact Documentation</a>{" "}for more info.</p>
 						</center>
-						{demos.map((x)=><DemoBlock file={x}/>)}
+						{demos.map((x)=><DemoBlock entry={x}/>)}
 
 						<hr/>
 						<p>