@swan-admin/swan-web-component
v1.0.43
Published
Cross-framework Onboarding component (React + Angular compatible)
Readme
🧩 @myscan/components (Local Dev)
A cross-framework Onboarding component built with React — compatible with Angular, Vue, and Vanilla JS via Web Components.
⚠️ This package is not published to npm yet.
Use these steps to run and test it locally.
🚀 Getting Started (Local Setup)
1️⃣ Clone the repo
npm install
npm run build
If successful, you’ll see:
✔ Build completed successfully
## 🧪 Testing Locally
### Option A — React App
1.Create a test React project
cd ..
npx create-react-app myscan-test --template typescript
cd myscan-test
2. Link your local package
From your library folder:
cd ../swan-web-components
npm run build
npm pack
Then in your test app:
cd ../myscan-test
npm install ../swan-web-components/myscan-components-1.0.0.tgz
3.Use the component
In src/App.tsx:
import { Onboarding } from "@myscan/components";
function App() {
return (
<Onboarding
config={{ bgColor: "#fafafa", theme: "light" }}
steps={["name", "email", "focalLength"]}
onEachStepComplete={(step, value) => console.log(step, value)}
onComplete={(data) => console.log("All done:", data)}
/>
);
}
export default App;
Run the test app:
npm start
### Option B — Test as Web Component (for Angular / JS)
1.Build your package
npm run build
2.Create a simple test HTML file
test.html
<!DOCTYPE html>
<html>
<head>
<title>myscan-onboarding test</title>
<script src="./dist/web-components/register.js"></script>
</head>
<body>
<h2>Testing myscan-onboarding</h2>
<myscan-onboarding></myscan-onboarding>
<script>
const el = document.querySelector("myscan-onboarding");
el.config = { bgColor: "#fafafa", theme: "light" };
el.steps = ["name", "email", "focalLength"];
el.onEachStepComplete = (s, v) => console.log("Step:", s, v);
el.onComplete = (data) => console.log("Done:", data);
</script>
</body>
</html>
3.Serve the file locally
npx serve .
Then open the URL shown (e.g., http://localhost:3000/test.html).