create-blocklet 0.7.5 → 0.7.7

package/templates/todo-list-example/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "blocklet-project",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "blocklet dev",
+    "eject": "vite eject",
+    "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "start": "cross-env NODE_ENV=development nodemon api/dev.ts -w api",
+    "clean": "node scripts/build-clean.js",
+    "bundle": "tsc --noEmit && npm run bundle:client && npm run bundle:api",
+    "bundle:client": "vite build",
+    "bundle:api": "npm run clean && tsc -p tsconfig.api.json && blocklet bundle --zip --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "prepare": "husky install",
+    "bump-version": "zx --quiet scripts/bump-version.mjs"
+  },
+  "lint-staged": {
+    "*.{mjs,js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@arcblock/did-auth": "^1.18.113",
+    "@arcblock/did-auth-storage-nedb": "^1.7.1",
+    "@arcblock/did-connect": "^2.9.63",
+    "@arcblock/ux": "^2.9.63",
+    "@blocklet/sdk": "^1.16.24",
+    "@blocklet/ui-react": "^2.9.63",
+    "@did-space/client": "^0.3.74",
+    "@did-space/core": "^0.3.74",
+    "@mui/material": "^5.15.14",
+    "@ocap/client": "^1.18.113",
+    "@ocap/mcrypto": "^1.18.113",
+    "@ocap/wallet": "^1.18.113",
+    "axios": "^1.6.8",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^3.3.0",
+    "express": "^4.19.2",
+    "express-async-errors": "^3.1.1",
+    "lodash": "^4.17.21",
+    "nanoid": "^5.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5",
+    "rimraf": "^3.0.2"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config": "^0.2.4",
+    "@arcblock/eslint-config-ts": "^0.2.4",
+    "@types/cookie-parser": "^1.4.7",
+    "@types/cors": "^2.8.17",
+    "@types/dotenv-flow": "^3.3.3",
+    "@types/express": "^4.17.21",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^18.19.26",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-toastify": "^4.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "bumpp": "^8.2.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^8.0.3",
+    "import-sort-style-module": "^6.0.0",
+    "lint-staged": "^12.5.0",
+    "nodemon": "^3.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.3",
+    "vite": "^5.0.13",
+    "vite-plugin-blocklet": "^0.7.7",
+    "vite-plugin-svgr": "^4.2.0",
+    "zx": "^7.2.3"
+  },
+  "importSort": {
+    ".js, .jsx, .mjs": {
+      "parser": "babylon",
+      "style": "module"
+    },
+    ".ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  }
+}

package/templates/todo-list-example/scripts/build-clean.js

@@ -0,0 +1,5 @@
+const rimraf = require('rimraf');
+
+console.log('clean .blocklet folder');
+rimraf.sync('.blocklet');
+console.log('clean .blocklet folder done!');

package/templates/todo-list-example/scripts/bump-version.mjs

@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+import { execSync } from 'child_process';
+import { $, chalk, fs } from 'zx';
+
+execSync('bumpp --no-tag --no-commit --no-push package.json', { stdio: 'inherit' });
+
+const { version } = await fs.readJSON('package.json');
+await fs.writeFileSync('version', version);
+
+console.log(chalk.greenBright(`[info]: start to modify blocklet version to ${version}`));
+await $`blocklet version ${version}`;
+console.log(chalk.greenBright('[info]: blocklet version modified.'));
+
+let newChangelog = '';
+try {
+  const gitRes = await $`git log --pretty=format:"- %s" "main"...HEAD`;
+  newChangelog = gitRes.stdout.trim();
+} catch {
+  console.error(chalk.redBright('Could not get git log, please write changelog manually.'));
+}
+
+const now = new Date();
+const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+const title = `## ${version} (${currentDate})`;
+
+await fs.ensureFile('CHANGELOG.md');
+const oldChangelog = await fs.readFile('CHANGELOG.md', 'utf8');
+const changelog = [title, newChangelog, oldChangelog].filter((item) => !!item).join('\n\n');
+await fs.writeFile('CHANGELOG.md', changelog);
+
+console.log(`\nNow you can make adjustments to ${chalk.cyan('CHANGELOG.md')} . Then press enter to continue.`);
+
+process.stdin.setRawMode(true);
+process.stdin.resume();
+process.stdin.on('data', process.exit.bind(process, 0));

package/templates/todo-list-example/src/app.css

@@ -0,0 +1,30 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+.app {
+  text-align: center;
+}
+
+.app-logo {
+  height: 10vmin;
+  pointer-events: none;
+}
+
+.app-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+pre {
+  font-size: 0.75em;
+}
+
+.app-link {
+  color: #4f6af5;
+}

package/templates/todo-list-example/src/app.tsx

@@ -0,0 +1,32 @@
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
+import TodoList from './pages/todo-list';
+import Layout from './components/layout';
+import { SessionProvider } from './contexts/session';
+
+function App() {
+  return (
+    <div className="app">
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route path="" element={<TodoList />} />
+        </Route>
+      </Routes>
+    </div>
+  );
+}
+
+export default function WrappedApp() {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const basename = window?.blocklet?.prefix || '/';
+
+  return (
+    <SessionProvider>
+      <LocaleProvider translations={{}}>
+        <Router basename={basename}>
+          <App />
+        </Router>
+      </LocaleProvider>
+    </SessionProvider>
+  );
+}

package/templates/todo-list-example/src/components/layout.tsx

@@ -0,0 +1,12 @@
+import Header from '@blocklet/ui-react/lib/Header';
+import { Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  return (
+    <>
+      {/* @ts-ignore */}
+      <Header brand={null} description={null} maxWidth={false} />
+      <Outlet />
+    </>
+  );
+}

package/templates/todo-list-example/src/contexts/session.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
+
+function useSessionContext() {
+  const info = useContext(SessionContext);
+  return info as any;
+}
+
+export { SessionProvider, SessionContext, SessionConsumer, useSessionContext, withSession };

package/templates/todo-list-example/src/env.d.ts

@@ -0,0 +1,5 @@
+declare var blocklet: { prefix: string } | undefined;
+
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+declare module '*.svg';

package/templates/todo-list-example/src/index.tsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+const root = ReactDOM.createRoot(document.getElementById('app')!);
+root.render(<App />);

package/templates/todo-list-example/src/libs/api.ts

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+axios.interceptors.request.use(
+  (config) => {
+    const prefix = window.blocklet ? window.blocklet.prefix : '/';
+    config.baseURL = prefix || '';
+    config.timeout = 200000;
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+export default axios;

package/templates/todo-list-example/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="450" height="520" viewBox="0 0 45 52"><g fill="none" fill-rule="evenodd" stroke="#4F6AF5"><path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"></path><path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path></g></svg>

package/templates/todo-list-example/src/pages/required-login.tsx

@@ -0,0 +1,48 @@
+import { Alert, Button, Grid } from '@mui/material';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSessionContext } from '../contexts/session';
+
+type RequiredLoginProps = {
+  onLogin?: Function;
+  nextUrl?: undefined | string;
+} & import('@mui/material').GridProps;
+
+/**
+ * @description
+ * @param {{
+ *  onLogin: Function,
+ *  nextUrl: undefined | string,
+ * } & import('@mui/material').GridProps} { onLogin = () => {}, nextUrl = undefined, ...rest }
+ * @return {*}
+ */
+function RequiredLogin({ onLogin = () => {}, nextUrl = undefined, ...rest }: Readonly<RequiredLoginProps>) {
+  const { session } = useSessionContext();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!session.user) {
+      session.login(onLogin);
+    } else if (session.user && nextUrl) {
+      navigate(`${nextUrl}${window.location.search}`, { replace: false });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.user, session.login]);
+
+  return (
+    <Grid container justifyContent="center" {...rest}>
+      <Grid item justifyContent="center" textAlign="center" xl={12} lg={12}>
+        <Alert severity="warning">Connect to the DID Wallet login to access the website</Alert>
+        <Button
+          onClick={() => session.login()}
+          style={{ marginTop: 16, textTransform: 'none' }}
+          variant="contained"
+          color="primary">
+          Login
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default RequiredLogin;

package/templates/todo-list-example/src/pages/todo-list.css

@@ -0,0 +1,260 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  box-sizing: border-box;
+} 
+
+/* container */
+.container{
+  width: 100%;
+  min-height: 100vh;
+  background: #f6f8fa;
+  padding: 10px;
+}
+
+.todo-app{
+  width: 100%;
+  max-width: 540px;
+  background: white;
+  border: 0.5px solid black;
+  margin: 20px auto 20px;
+  padding: 40px 30px 70px;
+  border-radius: 15px;
+}
+
+.todo-app h2{
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+
+.todo-app h2 img{
+  width: 30px;
+  margin-left: 10px;
+}
+
+/* input box */
+.row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #edeef0;
+  border-radius: 30px;
+  padding-left: 20px;
+  margin-bottom: 25px;
+}
+
+input{
+  position: relative;
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  padding: 10px;
+}
+
+button{
+  border: none;
+  outline: none;
+  padding: 16px 50px;
+  background: #4CAF50;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 40px;
+}
+
+/* styling on mid */
+.mid{
+  display: flex;
+  font-size: 1.2rem;
+  margin-left: 20px;
+  margin-bottom: 30px;
+  /* justify-content: space-between; */
+
+}
+
+#complete-all{
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+#clear-all{
+  margin-left: 90px;
+  cursor: pointer;
+}
+
+
+/* styling on todo list */
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  /* border: 1px solid #e5e5e5; */
+}
+
+ul li {
+  padding: 10px;
+  /* padding-left: 0; */
+  display: flex;
+  justify-content: space-between;
+  align-items: inherit;
+  align-items: center;
+}
+
+ul li:hover {
+  background: lightyellow;
+}
+#list input {
+  padding: 0;
+  height: initial;
+  width: initial;
+  margin-bottom: 0;
+  display: none;
+  cursor: pointer;
+}
+
+
+#list label {
+  position: relative;
+  cursor: pointer;
+}
+
+#list label:before {
+  content:'';
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 2px solid #0079bf;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  margin-right: 10px;
+}
+#list input:checked + label:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 2px;
+  left: 9px;
+  width: 6px;
+  height: 14px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+#list input:checked + label:before {
+  background: #0079bf;
+} 
+#list input:checked + label {
+  text-decoration: line-through;
+}
+.delete {
+  height: 25px;
+    padding: 5px 0px;
+    border-radius: 3px;
+}
+.delete:hover {
+  background: #f2f2f2;
+  cursor: pointer;
+}
+
+.edit{
+  height: 25px;
+  padding: 5px 0px;
+  border-radius: 3px;
+  margin-right: 10px;
+}
+
+.edit:hover{
+  background: #f2f2f2;
+  cursor: pointer;
+}
+
+h1 {
+  text-align: center;
+}
+.add-task {
+  width: 100%;
+    outline: none;
+    font-size: 15px;
+    padding: 11px;
+    border: 1px solid #f3f3f3;
+    margin-bottom: 3px;
+}
+
+
+
+
+#total-tasks {
+  margin-bottom: 20px;
+  font-size: 13px;
+    margin-left: 2px;
+    color: gray;
+}
+
+/*
+dropdown*/
+.filters{
+margin-top: 40px;
+}
+.dropbtn {
+background-color: #4CAF50;
+color: white;
+padding: 10px 16px;
+font-size: 16px;
+border: none;
+cursor: pointer;
+border-radius: 5px;
+}
+
+.dropdown {
+position: relative;
+display: inline-block;
+}
+
+.dropdown-content {
+display: none;
+position: absolute;
+background-color: #f9f9f9;
+min-width: 160px;
+box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+z-index: 1;
+}
+
+.dropdown-content a {
+color: black;
+padding: 12px 16px;
+text-decoration: none;
+display: block;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+.dropdown:hover .dropdown-content {
+display: block;
+}
+
+.dropdown:hover .dropbtn {
+background-color: #3e8e41;
+}
+
+.completed-task{
+display: inline-block;
+margin-left: 100px;
+}
+
+.remaining-task{
+display: inline-block;
+margin-left: 80px;
+}
+
+/* .remaining-task p{
+font-size: 40px;
+color: black;
+} */