@ahnseungchan/webviewkit 1.0.2 → 1.0.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.
Files changed (2) hide show
  1. package/README.md +149 -0
  2. package/package.json +4 -2
package/README.md ADDED
@@ -0,0 +1,149 @@
1
+ # WebViewKit
2
+
3
+ A modern React library for building stack-based navigation in WebView applications, providing smooth transitions and native-like navigation experience.
4
+
5
+ ## Features
6
+
7
+ - 🚀 **Stack-based Navigation**: Native-like navigation with push/pop transitions
8
+ - 🎨 **Smooth Animations**: GSAP-powered animations for fluid page transitions
9
+ - 📱 **Mobile-First**: Designed specifically for WebView and mobile applications
10
+ - 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
11
+ - 🎯 **Flexible**: Customizable animations, layouts, and navigation behavior
12
+
13
+ ## Installation
14
+
15
+ ```bash
16
+ npm install @webviewkit
17
+ # or
18
+ yarn add @webviewkit
19
+ # or
20
+ pnpm add @webviewkit
21
+ ```
22
+
23
+ ## Quick Start
24
+
25
+ ```tsx
26
+ import React from "react";
27
+ import { StackRouterProvider } from "@webviewkit";
28
+
29
+ function App() {
30
+ return (
31
+ <StackRouterProvider
32
+ maxWidth="600px"
33
+ Activities={[
34
+ {
35
+ path: "/",
36
+ element: <HomePage />,
37
+ },
38
+ {
39
+ path: "/about",
40
+ element: <AboutPage />,
41
+ },
42
+ ]}
43
+ initialActivity={{ path: "/", element: <HomePage /> }}
44
+ />
45
+ );
46
+ }
47
+ ```
48
+
49
+ ## Usage
50
+
51
+ ### Basic Navigation
52
+
53
+ ```tsx
54
+ import { useStackRouter } from "@webviewkit/core";
55
+
56
+ function HomePage() {
57
+ const { push, back } = useStackRouter();
58
+
59
+ return (
60
+ <div>
61
+ <h1>Home</h1>
62
+ <button onClick={() => push("/about")}>Go to About</button>
63
+ <button onClick={back}>Back</button>
64
+ </div>
65
+ );
66
+ }
67
+ ```
68
+
69
+ ### History Management
70
+
71
+ ```tsx
72
+ import { history } from "@webviewkit";
73
+
74
+ // Navigate to a new page
75
+ await history.push("/new-page", { data: "some data" });
76
+
77
+ // Replace current page
78
+ await history.replace("/replacement-page", { data: "replacement data" });
79
+
80
+ // Go back
81
+ await history.back();
82
+
83
+ // Go forward
84
+ await history.forward();
85
+ ```
86
+
87
+ ## API Reference
88
+
89
+ ### StackRouterProvider Props
90
+
91
+ | Prop | Type | Default | Description |
92
+ | ----------------- | ------------------------------------------------- | --------- | ------------------------------------- |
93
+ | `maxWidth` | `string` | `"600px"` | Maximum width of the layout container |
94
+ | `isShowHeader` | `boolean` | `true` | Whether to show the header |
95
+ | `Activities` | `Array<{path: string, element: React.ReactNode}>` | `[]` | Array of available routes |
96
+ | `initialActivity` | `{path: string, element: React.ReactNode}` | - | Initial route to display |
97
+
98
+ ### useStackRouter Hook
99
+
100
+ Returns an object with navigation methods:
101
+
102
+ - `currentPath`: Current active path
103
+ - `currentState`: Current history state
104
+ - `push(path, data?)`: Navigate to a new page
105
+ - `replace(path, data?)`: Replace current page
106
+ - `back()`: Go back to previous page
107
+ - `forward()`: Go forward to next page
108
+
109
+ ### History API
110
+
111
+ - `history.push(path, data?)`: Add new history entry
112
+ - `history.replace(path, data?)`: Replace current history entry
113
+ - `history.back()`: Go back to previous entry
114
+ - `history.forward()`: Go forward to next entry
115
+ - `history.go(delta)`: Go to specific history entry
116
+ - `history.getCurrentState()`: Get current history state
117
+ - `history.addListener(listener)`: Add history change listener
118
+
119
+ ## Examples
120
+
121
+ See the `packages/browser` directory for complete examples.
122
+
123
+ ## Development
124
+
125
+ ```bash
126
+ # Install dependencies
127
+ pnpm install
128
+
129
+ # Build all packages
130
+ pnpm build
131
+
132
+ # Run tests
133
+ pnpm test
134
+
135
+ # Run linting
136
+ pnpm lint
137
+ ```
138
+
139
+ ## Contributing
140
+
141
+ 1. Fork the repository
142
+ 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
143
+ 3. Commit your changes (`git commit -m 'Add some amazing feature'`)
144
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
145
+ 5. Open a Pull Request
146
+
147
+ ## License
148
+
149
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ahnseungchan/webviewkit",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Core WebView functionality for stack-based navigation",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -38,7 +38,9 @@
38
38
  "homepage": "https://github.com/Ahnseungc/webviewkit#readme",
39
39
  "peerDependencies": {
40
40
  "react": ">=16.8.0",
41
- "react-dom": ">=16.8.0"
41
+ "react-dom": ">=16.8.0",
42
+ "@emotion/react": ">=11.0.0",
43
+ "@emotion/styled": ">=11.0.0"
42
44
  },
43
45
  "devDependencies": {
44
46
  "@emotion/babel-plugin": "^11.11.0",