@swan-admin/swan-web-component 1.0.1
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 +91 -0
- package/dist/SeriouslyNostalgicFn-SemiCond-AJHVASLK.eot +0 -0
- package/dist/SeriouslyNostalgicFn-SemiCond-IFFRICVL.woff2 +0 -0
- package/dist/SeriouslyNostalgicFn-SemiCond-SHCMZABI.ttf +0 -0
- package/dist/SeriouslyNostalgicFn-SemiCond-XYHOCG7O.svg +1969 -0
- package/dist/SeriouslyNostalgicFn-SemiCond-Z3GGXSY5.woff +0 -0
- package/dist/SeriouslyNostalgicFnIt-SmCn-5X45YSDH.ttf +0 -0
- package/dist/SeriouslyNostalgicFnIt-SmCn-7R3OSECA.woff2 +0 -0
- package/dist/SeriouslyNostalgicFnIt-SmCn-IHWOZCJM.svg +1726 -0
- package/dist/SeriouslyNostalgicFnIt-SmCn-SL36MC4T.eot +0 -0
- package/dist/SeriouslyNostalgicFnIt-SmCn-XCIR2AMB.woff +0 -0
- package/dist/Switzer-Regular-FYQK3A2R.svg +12628 -0
- package/dist/Switzer-Regular-HQV7EZCN.woff2 +0 -0
- package/dist/Switzer-Regular-PMUXPWI5.woff +0 -0
- package/dist/Switzer-Regular-Y4FID5TH.eot +0 -0
- package/dist/Switzer-Regular-ZQ4EHIY6.ttf +0 -0
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +67 -0
- package/dist/index.d.ts +67 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +8 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +48 -0
package/ReadMe.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# 🧩 @myscan/components (Local Dev)
|
|
2
|
+
|
|
3
|
+
A cross-framework **Onboarding component** built with React — compatible with Angular, Vue, and Vanilla JS via Web Components.
|
|
4
|
+
|
|
5
|
+
> ⚠️ This package is **not published to npm yet**.
|
|
6
|
+
> Use these steps to run and test it locally.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 🚀 Getting Started (Local Setup)
|
|
11
|
+
|
|
12
|
+
### 1️⃣ Clone the repo
|
|
13
|
+
```bash
|
|
14
|
+
npm install
|
|
15
|
+
npm run build
|
|
16
|
+
If successful, you’ll see:
|
|
17
|
+
✔ Build completed successfully
|
|
18
|
+
|
|
19
|
+
## 🧪 Testing Locally
|
|
20
|
+
|
|
21
|
+
### Option A — React App
|
|
22
|
+
1.Create a test React project
|
|
23
|
+
cd ..
|
|
24
|
+
npx create-react-app myscan-test --template typescript
|
|
25
|
+
cd myscan-test
|
|
26
|
+
|
|
27
|
+
2. Link your local package
|
|
28
|
+
From your library folder:
|
|
29
|
+
cd ../swan-web-components
|
|
30
|
+
npm run build
|
|
31
|
+
npm pack
|
|
32
|
+
|
|
33
|
+
Then in your test app:
|
|
34
|
+
cd ../myscan-test
|
|
35
|
+
npm install ../swan-web-components/myscan-components-1.0.0.tgz
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
3.Use the component
|
|
39
|
+
In src/App.tsx:
|
|
40
|
+
import { Onboarding } from "@myscan/components";
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<Onboarding
|
|
45
|
+
config={{ bgColor: "#fafafa", theme: "light" }}
|
|
46
|
+
steps={["name", "email", "focalLength"]}
|
|
47
|
+
onEachStepComplete={(step, value) => console.log(step, value)}
|
|
48
|
+
onComplete={(data) => console.log("All done:", data)}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default App;
|
|
54
|
+
|
|
55
|
+
Run the test app:
|
|
56
|
+
npm start
|
|
57
|
+
|
|
58
|
+
### Option B — Test as Web Component (for Angular / JS)
|
|
59
|
+
|
|
60
|
+
1.Build your package
|
|
61
|
+
npm run build
|
|
62
|
+
|
|
63
|
+
2.Create a simple test HTML file
|
|
64
|
+
test.html
|
|
65
|
+
<!DOCTYPE html>
|
|
66
|
+
<html>
|
|
67
|
+
<head>
|
|
68
|
+
<title>myscan-onboarding test</title>
|
|
69
|
+
<script src="./dist/web-components/register.js"></script>
|
|
70
|
+
</head>
|
|
71
|
+
<body>
|
|
72
|
+
<h2>Testing myscan-onboarding</h2>
|
|
73
|
+
|
|
74
|
+
<myscan-onboarding></myscan-onboarding>
|
|
75
|
+
|
|
76
|
+
<script>
|
|
77
|
+
const el = document.querySelector("myscan-onboarding");
|
|
78
|
+
el.config = { bgColor: "#fafafa", theme: "light" };
|
|
79
|
+
el.steps = ["name", "email", "focalLength"];
|
|
80
|
+
el.onEachStepComplete = (s, v) => console.log("Step:", s, v);
|
|
81
|
+
el.onComplete = (data) => console.log("Done:", data);
|
|
82
|
+
</script>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
85
|
+
|
|
86
|
+
3.Serve the file locally
|
|
87
|
+
npx serve .
|
|
88
|
+
Then open the URL shown (e.g., http://localhost:3000/test.html).
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
Binary file
|
|
Binary file
|
|
Binary file
|