stoix 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/package.json +1 -1
- package/template/src/App.tsx +54 -2
- package/template/src/pages/index.tsx +0 -61
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ Project names must start with a letter and may contain letters, numbers, `.`, `_
|
|
|
39
39
|
## Generated Project Structure
|
|
40
40
|
|
|
41
41
|
```text
|
|
42
|
-
|
|
42
|
+
my-app/
|
|
43
43
|
├── package.json # Dependencies and scripts
|
|
44
44
|
├── stoix.config.ts # Stoix framework configuration
|
|
45
45
|
├── tsconfig.json # TypeScript config (shared)
|
|
@@ -146,4 +146,4 @@ This removes template build artifacts (`template/node_modules`, `template/dist`,
|
|
|
146
146
|
## License
|
|
147
147
|
|
|
148
148
|
MIT
|
|
149
|
-
|
|
149
|
+
|
package/package.json
CHANGED
package/template/src/App.tsx
CHANGED
|
@@ -1,10 +1,62 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
interface StatusCheck {
|
|
4
|
+
react: boolean;
|
|
5
|
+
api: boolean;
|
|
6
|
+
}
|
|
2
7
|
|
|
3
8
|
function App() {
|
|
9
|
+
const [status, setStatus] = useState<StatusCheck>({ react: true, api: false });
|
|
10
|
+
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
fetch('/api/example')
|
|
13
|
+
.then((res) => res.json())
|
|
14
|
+
.then(() => setStatus((s) => ({ ...s, api: true })))
|
|
15
|
+
.catch(() => setStatus((s) => ({ ...s, api: false })));
|
|
16
|
+
}, []);
|
|
17
|
+
|
|
4
18
|
return (
|
|
5
19
|
<div className="stoix-app">
|
|
6
20
|
<main className="stoix-main">
|
|
7
|
-
<
|
|
21
|
+
<div className="stoix-page">
|
|
22
|
+
<header className="stoix-hero">
|
|
23
|
+
<h1 className="stoix-title">Stoix</h1>
|
|
24
|
+
<p className="stoix-subtitle">
|
|
25
|
+
A disciplined TypeScript framework built on React and Express.
|
|
26
|
+
</p>
|
|
27
|
+
</header>
|
|
28
|
+
|
|
29
|
+
<div className="stoix-divider" />
|
|
30
|
+
|
|
31
|
+
<section className="stoix-status">
|
|
32
|
+
<h2 className="stoix-section-heading">System Status</h2>
|
|
33
|
+
<div className="stoix-status-grid">
|
|
34
|
+
<div className="stoix-status-item">
|
|
35
|
+
<span className="stoix-status-label">React Rendering</span>
|
|
36
|
+
<span className={`stoix-status-value ${status.react ? 'ok' : ''}`}>
|
|
37
|
+
{status.react ? 'OK' : '--'}
|
|
38
|
+
</span>
|
|
39
|
+
</div>
|
|
40
|
+
<div className="stoix-status-item">
|
|
41
|
+
<span className="stoix-status-label">API Connected</span>
|
|
42
|
+
<span className={`stoix-status-value ${status.api ? 'ok' : ''}`}>
|
|
43
|
+
{status.api ? 'OK' : '--'}
|
|
44
|
+
</span>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</section>
|
|
48
|
+
|
|
49
|
+
<div className="stoix-divider" />
|
|
50
|
+
|
|
51
|
+
<blockquote className="stoix-quote">
|
|
52
|
+
<p>
|
|
53
|
+
"You have power over your mind — not outside events. Realize this, and you will find strength."
|
|
54
|
+
</p>
|
|
55
|
+
<cite>- Marcus Aurelius</cite>
|
|
56
|
+
</blockquote>
|
|
57
|
+
|
|
58
|
+
<p className="stoix-principle">Structure before scale.</p>
|
|
59
|
+
</div>
|
|
8
60
|
</main>
|
|
9
61
|
|
|
10
62
|
<footer className="stoix-footer">
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
interface StatusCheck {
|
|
4
|
-
react: boolean;
|
|
5
|
-
api: boolean;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
function HomePage() {
|
|
9
|
-
const [status, setStatus] = useState<StatusCheck>({ react: true, api: false });
|
|
10
|
-
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
fetch('/api/example')
|
|
13
|
-
.then((res) => res.json())
|
|
14
|
-
.then(() => setStatus((s) => ({ ...s, api: true })))
|
|
15
|
-
.catch(() => setStatus((s) => ({ ...s, api: false })));
|
|
16
|
-
}, []);
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<div className="stoix-page">
|
|
20
|
-
<header className="stoix-hero">
|
|
21
|
-
<h1 className="stoix-title">Stoix</h1>
|
|
22
|
-
<p className="stoix-subtitle">
|
|
23
|
-
A disciplined TypeScript framework built on React and Express.
|
|
24
|
-
</p>
|
|
25
|
-
</header>
|
|
26
|
-
|
|
27
|
-
<div className="stoix-divider" />
|
|
28
|
-
|
|
29
|
-
<section className="stoix-status">
|
|
30
|
-
<h2 className="stoix-section-heading">System Status</h2>
|
|
31
|
-
<div className="stoix-status-grid">
|
|
32
|
-
<div className="stoix-status-item">
|
|
33
|
-
<span className="stoix-status-label">React Rendering</span>
|
|
34
|
-
<span className={`stoix-status-value ${status.react ? 'ok' : ''}`}>
|
|
35
|
-
{status.react ? '✓' : '—'}
|
|
36
|
-
</span>
|
|
37
|
-
</div>
|
|
38
|
-
<div className="stoix-status-item">
|
|
39
|
-
<span className="stoix-status-label">API Connected</span>
|
|
40
|
-
<span className={`stoix-status-value ${status.api ? 'ok' : ''}`}>
|
|
41
|
-
{status.api ? '✓' : '—'}
|
|
42
|
-
</span>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
</section>
|
|
46
|
-
|
|
47
|
-
<div className="stoix-divider" />
|
|
48
|
-
|
|
49
|
-
<blockquote className="stoix-quote">
|
|
50
|
-
<p>
|
|
51
|
-
"If it is not right, do not do it; if it is not true, do not say it."
|
|
52
|
-
</p>
|
|
53
|
-
<cite>— Marcus Aurelius</cite>
|
|
54
|
-
</blockquote>
|
|
55
|
-
|
|
56
|
-
<p className="stoix-principle">Structure before scale.</p>
|
|
57
|
-
</div>
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export default HomePage;
|