create-tririga-react-ts-vite-app 1.0.6 → 1.0.8

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.
Files changed (5) hide show
  1. package/index.js +0 -9
  2. package/package.json +1 -1
  3. package/template/src/components/MainLayout.tsx +46 -11
  4. package/template/src/index.css +156 -13
  5. package/template/src/pages/HomePage.tsx +5 -5
package/index.js CHANGED
@@ -79,7 +79,6 @@ async function configureApp() {
79
79
  const triUrl = await askQuestion('TRIRIGA Environment URL (e.g., https://your-tririga-server.com): ');
80
80
  const triUser = await askQuestion('TRIRIGA Username: ');
81
81
  const triPassword = await askQuestion('TRIRIGA Password: ', true);
82
- const appTitle = await askQuestion('App Title (e.g., TRIRIGA Service Request): ');
83
82
  const appExposedName = await askQuestion('Application Exposed Name (e.g., myTririgaApp): ');
84
83
  const modelAndView = await askQuestion('Model and View Name (e.g., myTririgaApp): ');
85
84
  const webViewMetadataName = await askQuestion(`Web View Metadata Exposed Name (default: ${projectName}): `);
@@ -123,14 +122,6 @@ async function configureApp() {
123
122
  fs.writeFileSync(viteConfigPath, viteContent);
124
123
  }
125
124
 
126
- // 8. Update index.html Title
127
- const indexHtmlPath = path.join(projectDir, 'index.html');
128
- if (fs.existsSync(indexHtmlPath) && appTitle) {
129
- let htmlContent = fs.readFileSync(indexHtmlPath, 'utf8');
130
- htmlContent = htmlContent.replace(/<title>.*<\/title>/, `<title>${appTitle}</title>`);
131
- fs.writeFileSync(indexHtmlPath, htmlContent);
132
- }
133
-
134
125
  console.log(`\nSuccess! Created and configured ${projectName}.`);
135
126
  console.log(`\nTo get started:\n cd ${projectName}\n npm install -g pnpm\n pnpm install\n pnpm run build:deploy\n`);
136
127
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-tririga-react-ts-vite-app",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Scaffold a TRIRIGA React app with Vite and TypeScript",
5
5
  "main": "index.js",
6
6
  "bin": {
package/template/src/components/MainLayout.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { Outlet, Link } from 'react-router-dom';
3
- import { User, LogOut, Sun, Moon } from 'lucide-react';
3
+ import { User, LogOut, Sun, Moon, Menu, X } from 'lucide-react';
4
4
  import { Button } from '@/components/ui/button';
5
5
  import { Avatar, AvatarFallback } from '@/components/ui/avatar';
6
6
  import {
@@ -14,6 +14,7 @@ import { AuthService } from '../services/AuthService';
14
14
  const MainLayout: React.FC = () => {
15
15
  const userName = 'User';
16
16
  const [isDark, setIsDark] = useState(false);
17
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
17
18
 
18
19
  useEffect(() => {
19
20
  const savedTheme = localStorage.getItem('theme');
@@ -44,14 +45,14 @@ const MainLayout: React.FC = () => {
44
45
 
45
46
  return (
46
47
  <div className="min-h-screen flex flex-col">
47
- <header className="sticky top-0 z-50 flex items-center justify-between px-6 h-12 bg-[#161616]">
48
+ <header className="sticky top-0 z-50 flex items-center justify-between px-4 sm:px-6 h-12 bg-[#161616]">
48
49
  <Link to="/" className="no-underline flex items-center gap-2">
49
50
  <span className="font-semibold text-white/65 text-base">TRIRIGA</span>
50
- <span className="text-white text-base">React App</span>
51
+ <span className="text-white text-base truncate max-w-[200px] sm:max-w-none">React App</span>
51
52
  </Link>
52
53
 
53
- {/* Action Buttons */}
54
- <div className="flex items-center gap-1">
54
+ {/* Desktop Action Buttons */}
55
+ <div className="hidden sm:flex items-center gap-1">
55
56
  <TooltipProvider delayDuration={200}>
56
57
  {/* Theme Toggle */}
57
58
  <Tooltip>
@@ -60,16 +61,16 @@ const MainLayout: React.FC = () => {
60
61
  {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
61
62
  </Button>
62
63
  </TooltipTrigger>
63
- <TooltipContent side="bottom">Toggle theme</TooltipContent>
64
+ <TooltipContent side="bottom">
65
+ {isDark ? "Toggle Light Mode" : "Toggle Dark Mode"}
66
+ </TooltipContent>
64
67
  </Tooltip>
65
68
 
66
69
  {/* User Avatar */}
67
70
  <Tooltip>
68
71
  <TooltipTrigger asChild>
69
- <Button variant="ghost" size="icon" className="text-white/85 hover:text-white hover:bg-white/10 h-10 w-10 overflow-hidden rounded-full">
70
- <Avatar className="h-full w-full bg-transparent p-2">
71
- <User className="h-full w-full" />
72
- </Avatar>
72
+ <Button variant="ghost" size="icon" className="text-white/85 hover:text-white hover:bg-white/10 h-10 w-10 rounded-full">
73
+ <User className="h-5 w-5" />
73
74
  </Button>
74
75
  </TooltipTrigger>
75
76
  <TooltipContent side="bottom">{userName}</TooltipContent>
@@ -91,9 +92,43 @@ const MainLayout: React.FC = () => {
91
92
  </Tooltip>
92
93
  </TooltipProvider>
93
94
  </div>
95
+
96
+ {/* Mobile Menu Toggle */}
97
+ <div className="sm:hidden flex items-center">
98
+ <Button
99
+ variant="ghost"
100
+ size="icon"
101
+ className="text-white/85 hover:text-white hover:bg-white/10 h-10 w-10"
102
+ onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
103
+ >
104
+ {isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
105
+ </Button>
106
+ </div>
94
107
  </header>
95
108
 
96
- <main className="flex-1 p-6 bg-background min-h-[calc(100vh-48px)]">
109
+ {/* Mobile Dropdown Menu */}
110
+ {isMobileMenuOpen && (
111
+ <div className="sm:hidden sticky top-12 z-40 w-full bg-[#161616] border-b border-t border-white/10 flex flex-col p-2 shadow-xl shadow-black/50">
112
+ <Button variant="ghost" className="justify-start text-white/85 hover:text-white hover:bg-white/10 w-full h-12" onClick={toggleTheme}>
113
+ {isDark ? <Sun className="h-5 w-5 mr-3" /> : <Moon className="h-5 w-5 mr-3" />}
114
+ {isDark ? "Light Mode" : "Dark Mode"}
115
+ </Button>
116
+ <Button variant="ghost" className="justify-start text-white/85 hover:text-white hover:bg-white/10 w-full h-12">
117
+ <User className="h-5 w-5 mr-3" />
118
+ {userName}
119
+ </Button>
120
+ <Button
121
+ variant="ghost"
122
+ className="justify-start text-red-400 hover:text-red-300 hover:bg-white/10 w-full h-12"
123
+ onClick={() => { setIsMobileMenuOpen(false); AuthService.logout(); }}
124
+ >
125
+ <LogOut className="h-5 w-5 mr-3" />
126
+ Sign out
127
+ </Button>
128
+ </div>
129
+ )}
130
+
131
+ <main className="flex-1 p-4 sm:p-6 bg-background min-h-[calc(100vh-48px)]">
97
132
  <Outlet />
98
133
  </main>
99
134
  </div>
package/template/src/index.css CHANGED
@@ -1,14 +1,7 @@
1
1
  @import "tailwindcss";
2
- @import "shadcn/tailwind.css";
3
2
 
4
3
  @custom-variant dark (&:is(.dark *));
5
4
 
6
- body {
7
- margin: 0;
8
- min-width: 320px;
9
- min-height: 100vh;
10
- }
11
-
12
5
  :root {
13
6
  --background: #fdfdff;
14
7
  --foreground: #0d0d12;
@@ -29,10 +22,160 @@ body {
29
22
  --border: #e2e2ee;
30
23
  --input: #e2e2ee;
31
24
  --ring: #0f62fe;
32
- --chart-1: #0f62fe;
33
- --chart-2: #8a3ffc;
34
- --chart-3: #1192e8;
35
- --chart-4: #0043ce;
36
- --chart-5: #002d9c;
37
- --radius: 0.5rem;
25
+ --chart-1: #6b46ff;
26
+ --chart-2: #4a72ff;
27
+ --chart-3: #04c3dc;
28
+ --chart-4: #0eddba;
29
+ --chart-5: #00b88a;
30
+ --sidebar: #fdfdff;
31
+ --sidebar-foreground: #0d0d12;
32
+ --sidebar-primary: #0f62fe;
33
+ --sidebar-primary-foreground: #ffffff;
34
+ --sidebar-accent: #f0f2ff;
35
+ --sidebar-accent-foreground: #6b46ff;
36
+ --sidebar-border: #e2e2ee;
37
+ --sidebar-ring: #0f62fe;
38
+ --font-sans: 'Inter', sans-serif;
39
+ --font-serif: 'Merriweather', serif;
40
+ --font-mono: 'JetBrains Mono', monospace;
41
+ --radius: 1.4rem;
42
+ --shadow-x: 0px;
43
+ --shadow-y: 4px;
44
+ --shadow-blur: 15px;
45
+ --shadow-spread: 0px;
46
+ --shadow-opacity: 0.05;
47
+ --shadow-color: #000000;
48
+ --shadow-2xs: 0px 4px 15px 0px hsl(0 0% 0% / 0.03);
49
+ --shadow-xs: 0px 4px 15px 0px hsl(0 0% 0% / 0.03);
50
+ --shadow-sm: 0px 4px 15px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
51
+ --shadow: 0px 4px 15px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
52
+ --shadow-md: 0px 4px 15px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
53
+ --shadow-lg: 0px 4px 15px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
54
+ --shadow-xl: 0px 4px 15px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
55
+ --shadow-2xl: 0px 4px 15px 0px hsl(0 0% 0% / 0.13);
56
+ --tracking-normal: -0.01em;
57
+ --spacing: 0.25rem;
58
+ }
59
+
60
+ .dark {
61
+ --background: #0a0a0c;
62
+ --foreground: #f8f8fc;
63
+ --card: #121216;
64
+ --card-foreground: #f8f8fc;
65
+ --popover: #121216;
66
+ --popover-foreground: #f8f8fc;
67
+ --primary: #8c71ff;
68
+ --primary-foreground: #ffffff;
69
+ --secondary: #1e1b3a;
70
+ --secondary-foreground: #d4ccff;
71
+ --muted: #1a1a24;
72
+ --muted-foreground: #a1a1b5;
73
+ --accent: #252445;
74
+ --accent-foreground: #c7b8ff;
75
+ --destructive: #7f1d1d;
76
+ --destructive-foreground: #f8fafc;
77
+ --border: #2a2a35;
78
+ --input: #2a2a35;
79
+ --ring: #8c71ff;
80
+ --chart-1: #3b82f6;
81
+ --chart-2: #a855f7;
82
+ --chart-3: #6366f1;
83
+ --chart-4: #8b5cf6;
84
+ --chart-5: #2dd4bf;
85
+ --sidebar: #111115;
86
+ --sidebar-foreground: #e4e4e7;
87
+ --sidebar-primary: #8c71ff;
88
+ --sidebar-primary-foreground: #ffffff;
89
+ --sidebar-accent: #1e1b3a;
90
+ --sidebar-accent-foreground: #d4ccff;
91
+ --sidebar-border: #27272a;
92
+ --sidebar-ring: #8c71ff;
93
+ --font-sans: 'Inter', sans-serif;
94
+ --font-serif: 'Merriweather', serif;
95
+ --font-mono: 'JetBrains Mono', monospace;
96
+ --radius: 1.4rem;
97
+ --shadow-x: 0px;
98
+ --shadow-y: 10px;
99
+ --shadow-blur: 25px;
100
+ --shadow-spread: 0px;
101
+ --shadow-opacity: 0.4;
102
+ --shadow-color: #000000;
103
+ --shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.20);
104
+ --shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.20);
105
+ --shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
106
+ --shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
107
+ --shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
108
+ --shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
109
+ --shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
110
+ --shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1.00);
111
+ }
112
+
113
+ @theme inline {
114
+ --color-background: var(--background);
115
+ --color-foreground: var(--foreground);
116
+ --color-card: var(--card);
117
+ --color-card-foreground: var(--card-foreground);
118
+ --color-popover: var(--popover);
119
+ --color-popover-foreground: var(--popover-foreground);
120
+ --color-primary: var(--primary);
121
+ --color-primary-foreground: var(--primary-foreground);
122
+ --color-secondary: var(--secondary);
123
+ --color-secondary-foreground: var(--secondary-foreground);
124
+ --color-muted: var(--muted);
125
+ --color-muted-foreground: var(--muted-foreground);
126
+ --color-accent: var(--accent);
127
+ --color-accent-foreground: var(--accent-foreground);
128
+ --color-destructive: var(--destructive);
129
+ --color-destructive-foreground: var(--destructive-foreground);
130
+ --color-border: var(--border);
131
+ --color-input: var(--input);
132
+ --color-ring: var(--ring);
133
+ --color-chart-1: var(--chart-1);
134
+ --color-chart-2: var(--chart-2);
135
+ --color-chart-3: var(--chart-3);
136
+ --color-chart-4: var(--chart-4);
137
+ --color-chart-5: var(--chart-5);
138
+ --color-sidebar: var(--sidebar);
139
+ --color-sidebar-foreground: var(--sidebar-foreground);
140
+ --color-sidebar-primary: var(--sidebar-primary);
141
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
142
+ --color-sidebar-accent: var(--sidebar-accent);
143
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
144
+ --color-sidebar-border: var(--sidebar-border);
145
+ --color-sidebar-ring: var(--sidebar-ring);
146
+
147
+ --font-sans: var(--font-sans);
148
+ --font-mono: var(--font-mono);
149
+ --font-serif: var(--font-serif);
150
+
151
+ --radius-sm: calc(var(--radius) - 4px);
152
+ --radius-md: calc(var(--radius) - 2px);
153
+ --radius-lg: var(--radius);
154
+ --radius-xl: calc(var(--radius) + 4px);
155
+
156
+ --shadow-2xs: var(--shadow-2xs);
157
+ --shadow-xs: var(--shadow-xs);
158
+ --shadow-sm: var(--shadow-sm);
159
+ --shadow: var(--shadow);
160
+ --shadow-md: var(--shadow-md);
161
+ --shadow-lg: var(--shadow-lg);
162
+ --shadow-xl: var(--shadow-xl);
163
+ --shadow-2xl: var(--shadow-2xl);
164
+
165
+ --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
166
+ --tracking-tight: calc(var(--tracking-normal) - 0.025em);
167
+ --tracking-normal: var(--tracking-normal);
168
+ --tracking-wide: calc(var(--tracking-normal) + 0.025em);
169
+ --tracking-wider: calc(var(--tracking-normal) + 0.05em);
170
+ --tracking-widest: calc(var(--tracking-normal) + 0.1em);
171
+ }
172
+
173
+ @layer base {
174
+ * {
175
+ @apply border-border outline-ring/50;
176
+ }
177
+ body {
178
+ @apply bg-background text-foreground;
179
+ letter-spacing: var(--tracking-normal);
180
+ }
38
181
  }
package/template/src/pages/HomePage.tsx CHANGED
@@ -8,18 +8,18 @@ import { Label } from '@/components/ui/label';
8
8
  function HomePage() {
9
9
  return (
10
10
  <div className="max-w-5xl mx-auto py-8">
11
- <div className="flex items-center justify-between mb-8">
11
+ <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
12
12
  <div>
13
13
  <h1 className="text-3xl font-bold mb-2">Welcome to your new TRIRIGA React App</h1>
14
14
  <p className="text-muted-foreground">
15
15
  This is a template application using React, Vite, TypeScript, and shadcn/ui.
16
16
  </p>
17
17
  </div>
18
- <Badge variant="secondary" className="text-sm">Ready to build</Badge>
18
+ <Badge variant="secondary" className="text-sm shrink-0">Ready to build</Badge>
19
19
  </div>
20
20
 
21
21
  <Tabs defaultValue="components" className="w-full">
22
- <TabsList className="mb-4">
22
+ <TabsList className="mb-4 flex-wrap h-auto justify-start">
23
23
  <TabsTrigger value="components">UI Components</TabsTrigger>
24
24
  <TabsTrigger value="forms">Forms & Inputs</TabsTrigger>
25
25
  </TabsList>
@@ -31,7 +31,7 @@ function HomePage() {
31
31
  <CardTitle>Cards & Buttons</CardTitle>
32
32
  <CardDescription>Shadcn UI provides beautiful default styling.</CardDescription>
33
33
  </CardHeader>
34
- <CardContent className="flex gap-4">
34
+ <CardContent className="flex flex-wrap gap-4">
35
35
  <Button variant="default">Default</Button>
36
36
  <Button variant="secondary">Secondary</Button>
37
37
  <Button variant="outline">Outline</Button>
@@ -50,7 +50,7 @@ function HomePage() {
50
50
  <CardContent className="space-y-2">
51
51
  <div className="text-lg font-semibold">Heading Example</div>
52
52
  <div className="text-sm text-muted-foreground">
53
- The IBM Carbon theme is adapted for a seamless experience inside TRIRIGA.
53
+ A beautiful, functional theme out-of-the-box that adapts to light and dark modes.
54
54
  </div>
55
55
  </CardContent>
56
56
  </Card>