@herdingbits/trailhead-cloudscape 0.0.1 → 0.0.2

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 (4) hide show
  1. package/README.md +29 -1
  2. package/dist/shell-app.d.ts.map +1 -1
  3. package/dist/shell-app.js +11 -7
  4. package/package.json +7 -7
package/README.md CHANGED
@@ -1,6 +1,23 @@
1
1
  # @herdingbits/trailhead-cloudscape
2
2
 
3
- CloudScape design system adapter for the Trailhead micro-frontend framework.
3
+ AWS CloudScape adapter for Trailhead. React-based shell with CloudScape components.
4
+
5
+ ## What is this?
6
+
7
+ This package provides a Trailhead adapter for the [AWS CloudScape Design System](https://cloudscape.design/). CloudScape is built with React, so this adapter demonstrates Trailhead when you're all-in on React for both the shell and SPAs.
8
+
9
+ It includes:
10
+ - CloudScape React components integration
11
+ - Pre-built shell UI (AppLayout, SideNavigation, Modal, Flashbar)
12
+ - Event-based communication between adapter and React components
13
+ - **Supports React 18 and React 19**
14
+
15
+ ## Key Features
16
+
17
+ - **React-Based**: Full CloudScape component library
18
+ - **AWS Design Language**: Consistent with AWS console UX
19
+ - **Pre-Built Shell**: AppLayout with navigation out of the box
20
+ - **Modern React**: Works with React 18+ and React 19
4
21
 
5
22
  ## Installation
6
23
 
@@ -28,6 +45,17 @@ const root = createRoot(document.getElementById('app')!);
28
45
  root.render(<ShellApp shell={shell} />);
29
46
  ```
30
47
 
48
+ ## What's Included
49
+
50
+ - **CloudScapeAdapter** - Implements the Trailhead adapter interface
51
+ - **ShellApp** - React component that renders the shell UI
52
+ - **ShellLayout** - CloudScape AppLayout with navigation
53
+ - **shell.css** - Base styles for the shell UI
54
+
55
+ ## React Version Support
56
+
57
+ This adapter supports React 18 and React 19. Peer dependencies specify `^19.0.0` but will work with React 18 if needed.
58
+
31
59
  ## Documentation
32
60
 
33
61
  See the [main Trailhead documentation](https://github.com/herdingbits/trailhead) for more information.
package/dist/shell-app.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shell-app.d.ts","sourceRoot":"","sources":["../src/shell-app.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,UAAU,aAAa;IACrB,KAAK,EAAE,SAAS,CAAC;CAClB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CAyMhD"}
1
+ {"version":3,"file":"shell-app.d.ts","sourceRoot":"","sources":["../src/shell-app.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,UAAU,aAAa;IACrB,KAAK,EAAE,SAAS,CAAC;CAClB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CA6MhD"}
package/dist/shell-app.js CHANGED
@@ -17,6 +17,7 @@ export function ShellApp({ shell }) {
17
17
  buttons: []
18
18
  });
19
19
  const contentRef = useRef(null);
20
+ const navigationLoadedRef = useRef(false);
20
21
  // Get current path without basePath
21
22
  const getCurrentPath = () => {
22
23
  let path = window.location.pathname;
@@ -43,13 +44,16 @@ export function ShellApp({ shell }) {
43
44
  });
44
45
  };
45
46
  window.addEventListener('cloudscape-dialog', handleDialogEvent);
46
- // Load navigation
47
- fetch(`${shell.basePath}/navigation.json`)
48
- .then(res => res.json())
49
- .then(data => {
50
- setNavigation(data);
51
- })
52
- .catch(err => console.error('Failed to load navigation:', err));
47
+ // Load navigation once (prevent React 18 double-mount in dev)
48
+ if (!navigationLoadedRef.current) {
49
+ navigationLoadedRef.current = true;
50
+ fetch(`${shell.basePath}/navigation.json`)
51
+ .then(res => res.json())
52
+ .then(data => {
53
+ setNavigation(data);
54
+ })
55
+ .catch(err => console.error('Failed to load navigation:', err));
56
+ }
53
57
  return () => {
54
58
  window.removeEventListener('cloudscape-dialog', handleDialogEvent);
55
59
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@herdingbits/trailhead-cloudscape",
3
- "version": "0.0.1",
4
- "description": "CloudScape design system adapter for Trailhead micro-frontend framework",
3
+ "version": "0.0.2",
4
+ "description": "AWS CloudScape adapter for Trailhead. React-based shell with CloudScape components. Supports React 19.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -24,14 +24,14 @@
24
24
  "@herdingbits/trailhead-core": "^0.0.3",
25
25
  "@cloudscape-design/components": "^3.0.0",
26
26
  "@cloudscape-design/global-styles": "^1.0.0",
27
- "react": "^18.0.0",
28
- "react-dom": "^18.0.0"
27
+ "react": "^19.0.0",
28
+ "react-dom": "^19.0.0"
29
29
  },
30
30
  "devDependencies": {
31
- "@herdingbits/trailhead-types": "^0.0.3",
32
- "@cloudscape-design/components": "^3.0.1194",
31
+ "@herdingbits/trailhead-types": "^0.0.5",
32
+ "@cloudscape-design/components": "^3.0.1202",
33
33
  "@cloudscape-design/global-styles": "^1.0.50",
34
- "@types/react": "^19.2.13",
34
+ "@types/react": "^19.2.14",
35
35
  "@types/react-dom": "^19.2.3",
36
36
  "react": "^19.2.4",
37
37
  "react-dom": "^19.2.4",