feat: init repo

init repo

.github/workflows/commitlint.yml

@@ -0,0 +1,32 @@
+name: Commitlint
+
+on:
+  push:
+    branches:
+      - "push-action/**"
+  pull_request:
+    types: [opened, edited, synchronize, reopened]
+
+concurrency:
+  group: commitlint-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint-commits:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node and pnpm
+        uses: silverhand-io/actions-node-pnpm-run-steps@v4
+        with:
+          pnpm-version: 9
+
+      - name: Commitlint
+        run: npx commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD
+
+      - name: Commitlint on PR title
+        run: echo '${{ github.event.pull_request.title }}' | npx commitlint

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: Main
+
+on:
+  push:
+    branches:
+      - "main"
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node and pnpm
+        uses: silverhand-io/actions-node-pnpm-run-steps@v4
+        with:
+          pnpm-version: 9
+
+      - name: Build
+        run: pnpm -r build
+
+      - name: Lint
+        run: pnpm -r lint

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+lib
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no-install commitlint --edit ""

.husky/pre-commit

@@ -0,0 +1,3 @@
+# Keep concurrency 1 to avoid lint-staged issue
+# Which may cause ALL your work LOST WITHOUT STASH
+FORCE_COLOR=1 pnpm -r --workspace-concurrency 1 --filter "[HEAD]" precommit

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Silverhand
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,3 @@
 # experience-samples
+
 Logto sign-in experience sample codes

commitlint.config.ts

@@ -0,0 +1,11 @@
+import conventional from '@commitlint/config-conventional';
+import { UserConfig } from '@commitlint/types';
+
+const config: UserConfig = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [2, 'always', [...conventional.rules['type-enum'][2], 'release']],
+  },
+};
+
+export default config;

eslint.config.js

@@ -0,0 +1,21 @@
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ["**/*.{ts,tsx}"],
+  ignores: ["dist"],
+  plugins: {
+    "react-hooks": reactHooks,
+    "react-refresh": reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+});

lint-staged.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    '*.ts?(x)': ['eslint --cache --fix', () => 'tsc -p tsconfig.json --noEmit'],
+    '*.scss': 'stylelint --fix',
+  };
+

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "root",
+  "private": true,
+  "type": "module",
+  "license": "MPL-2.0",
+  "author": "Silverhand Inc. <[email protected]>",
+  "scripts": {
+    "prepack": "pnpm -r prepack"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.0.0",
+    "@commitlint/config-conventional": "^19.0.0",
+    "@commitlint/types": "^19.0.0",
+    "husky": "^9.0.11",
+    "typescript": "^5.3.3",
+    "vite": "^5.3.4"
+  },
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  }
+}

packages/experience-components/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@logto/experience-sample-components",
+  "author": "Silverhand Inc. <[email protected]>",
+  "license": "MPL-2.0",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf lib && vite build",
+    "prepack": "pnpm build",
+    "lint": "eslint .",
+    "stylelint": "stylelint \"scss/**/*.scss\"",
+    "preview": "vite preview"
+  },
+  "main": "./lib/index.js",
+  "exports": {
+    ".": {
+      "default": "./lib/index.js",
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.umd.cjs"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^9.8.0",
+    "@logto/experience-sample-tool-kit": "workspace:^0.0.1",
+    "@silverhand/eslint-config": "^6.0.1",
+    "@silverhand/eslint-config-react": "^6.0.2",
+    "@silverhand/essentials": "^2.9.1",
+    "@silverhand/ts-config": "^6.0.0",
+    "@silverhand/ts-config-react": "^6.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "classnames": "^2.5.1",
+    "eslint": "^9.8.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "lint-staged": "^15.0.0",
+    "postcss": "^8.4.31",
+    "postcss-modules": "^6.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stylelint": "^15.0.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0",
+    "use-debounced-loader": "^0.1.1",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.3",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "engines": {
+    "node": "^20.9.0"
+  },
+  "eslintConfig": {
+    "extends": "@silverhand/react"
+  },
+  "stylelint": {
+    "extends": "@silverhand/eslint-config-react/.stylelintrc"
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc"
+}

packages/experience-components/src/Layout/PageLayout/index.module.scss

@@ -0,0 +1,32 @@
+@use '@logto/experience-sample-tool-kit/scss/underscore' as _;
+
+.viewBox {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+
+.container {
+  min-height: 100%;
+  @include _.flex-column(center, center);
+  padding: _.unit(5)
+}
+
+.main {
+  width: 540px;
+  min-height: 540px;
+  position: relative;
+  padding: _.unit(6);
+  border-radius: 16px;
+  background: var(--color-bg-float);
+  box-shadow: var(--color-shadow-2);
+  @include _.flex-column(center, center);
+}
+
+.signature {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(calc(100% + _.unit(7)));
+    // Have to use padding instead of margin. Overflow margin spacing will be ignored by the browser.
+    padding-bottom: _.unit(7);
+  }

packages/experience-components/src/Layout/PageLayout/index.tsx

@@ -0,0 +1,21 @@
+import styles from './index.module.scss';
+import LogtoSignature from '@/components/LogtoSignature';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+function AppLayout({ children }: Props) {
+  return (
+    <div className={styles.viewBox}>
+      <div className={styles.container}>
+        <main className={styles.main}>
+          {children}
+          <LogtoSignature className={styles.signature} />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default AppLayout;