1.0.0 (#107)

* Update yarn to v4 * wip * Move workspaces to pkgs * breaking: Modernize API * Fix instantiate * fix initialize and update peer deps * wip * bump * wip * wip, remove unused tests * wip * export types * update ci deps * Fix ci * fix ci * Fix deps * Fix yarn * Fix yarn * Fix ci * Fix ci
hanakla · Jul 17, 2024 · 625bf42 · 625bf42
1 parent aecd120
commit 625bf42
Show file tree

Hide file tree

Showing 30 changed files with 10,243 additions and 9,016 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -13,6 +13,7 @@
   },
   "rules": {
     "@typescript-eslint/no-explicit-any": [0],
-    "@typescript-eslint/explicit-module-boundary-types": [0]
+    "@typescript-eslint/explicit-module-boundary-types": [0],
+    "@typescript-eslint/ban-types": [0]
   }
 }
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -9,19 +9,22 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [10.x, 12.x, 14.x, 15.x]
+        node-version: [18.x, 20.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node.js for use with actions
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
+      - run: corepack enable yarn
+
       - name: Cache
-        uses: actions/cache@v1.0.0
+        uses: actions/cache@v4
         with:
+          save-always: true
           path: ~/.cache/yarn
           key: ${{ matrix.os }}-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
           restore-keys: |
@@ -30,7 +33,9 @@ jobs:
       - name: Install deps
         run: yarn install
 
+      - name: Lint
+        run: yarn eslint "pkgs/mordred/src/**/*.{ts,tsx}"
+
       - name: Building @fluer/mordred
-        run: |
-          yarn eslint
-          yarn prepublishOnly
+        working-directory: pkgs/mordred
+        run: yarn prepublishOnly
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,19 @@ dist
 
 # TernJS port file
 .tern-port
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you wish to use zero-installs
+# In that case, don't forget to run `yarn config set enableGlobalCache false`!
+# Documentation here: https://yarnpkg.com/features/zero-installs
+
+#!.yarn/cache
+.pnp.*
+
+.parcel-cache/
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,3 @@
+compressionLevel: mixed
+enableGlobalCache: false
+nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
   - Mordred manages modal state and positioner element only, design modal your self!
 - Better accessibility
   - Auto scroll lock when modal appearered
-  - Limit focus  only inside on Modal when modal appearered, with [`focus-trap`](https://github.com/focus-trap/focus-trap)
+  - Limit focus only inside on Modal when modal appearered, with [`focus-trap`](https://github.com/focus-trap/focus-trap)
 - Both of `JSX style` and `imperative style`
   - Callable from out of React (likes Action creator)
   - Can be connect to another React context likes Redux store from Modal (of course imperative style too)
@@ -23,68 +23,73 @@
 
 ## Usage
 
-See full example code (with single backdrop fade) in [this example](https://github.com/fleur-js/mordred/blob/main/workspaces/example)
+See full example code (with single backdrop fade) in [this example](https://github.com/fleur-js/mordred/blob/main/pkgs/example)
 
 ### Setup
 
-Add `MordredRenderer` into your App root and call `Mordred.init` on after domready
+Add `MordredOut` into your App root.
 
 ```tsx
-import domready from 'domready'
-import { Mordret, MordredRenderer } from '@fleur/mordred'
+import { MordredOut } from "@fleur/mordred";
 
 const App = () => {
   return (
     <div>
-      <MordredRenderer>
-        {({ children }) => (
-          <YourBackdrop>{children}</YourBackdrop>
-        )}
-      </MordredRenderer>
+      <MordredOut>
+        {({ children }) => <YourBackdrop>{children}</YourBackdrop>}
+      </MordredOut>
     </div>
-  )
-}
+  );
+};
 
 domready(() => {
-  Mordret.init()
-  ReactDOM.render(<App />, yourRootElement)
-})
+  createRoot(yourRootElement).render(<App />);
+});
 ```
 
 ### Calling your Modal
 
 And define and call ModalComponet to use it up!
 
 ```tsx
-import { MordredRenderer, ModalComponentType, useModalOpener } from '@fleur/mordred'
-
-// jsx style
-const ConfirmModal: ModalComponentType<{ message: string }, boolean> = ({ onClose }) => (
-  <div>
-    {message}
-    <button onClick={() => onClose(false)}>Cancel</button>
-    <button onClick={() => onClose(true)}>Continute</button>
-  </div>
-)
-
+// In your page
 const SomePage = () => {
-  const [isOpened, setIsOpen] = useState(false)
-  const { openModal } = useModalOpener()
-  const handleClose = (result) => console.log(result)
+  const [isOpened, setIsOpen] = useState(false);
+  const { openModal } = useModalOpener();
+  const handleClose = (result) => console.log(result);
 
   const handleClickGotoSleep = useCallback(() => {
-    const result = await openModal(ConfirmModal, { message: 'Sleep?' })
-  }, [])
+    // call your modal here
+    const result = await openModal(ConfirmModal, { message: "Sleep?" });
+  }, []);
 
   return (
     <div>
       <button onClick={handleClickGotoSleep}>Sleep</button>
     </div>
-  )
-}
+  );
+};
+
+// Modal component definition
+import {
+  MordredRenderer,
+  ModalComponentType,
+  useModalOpener,
+} from "@fleur/mordred";
+
+// jsx style
+const ConfirmModal: ModalComponentType<{ message: string }, boolean> = ({
+  onClose,
+}) => (
+  <div>
+    {message}
+    <button onClick={() => onClose(false)}>Cancel</button>
+    <button onClick={() => onClose(true)}>Continute</button>
+  </div>
+);
 
 // imperative style (Stable, but unrecommended)
-import { unrecommended_openModal } from '@fleur/mordred'
+import { unrecommended_openModal } from "@fleur/mordred";
 
-const result = await openModal(ConfirmModal, { message: 'Godmode?' })
+const result = await openModal(ConfirmModal, { message: "Godmode?" });
 ```
diff --git a/package.json b/package.json
@@ -6,34 +6,27 @@
   "repository": "[email protected]:fleur-js/mordred.git",
   "author": "Hanakla <[email protected]>",
   "license": "MIT",
+  "packageManager": "[email protected]",
   "workspaces": [
-    "workspaces/*"
+    "pkgs/*"
   ],
   "scripts": {
     "start:example": "wsrun --no-prefix -p mordred-example -c start",
     "start:watch": "wsrun --no-prefix -m build:esm -w",
-    "sync:readme": "cp ./README.md ./workspaces/mordred/ && :",
+    "sync:readme": "cp ./README.md ./pkgs/mordred/ && :",
     "build": "wsrun -m build"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "^7.12.10",
-    "@types/domready": "^1.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.8.0",
     "@typescript-eslint/parser": "^4.8.0",
-    "bili": "^5.0.5",
     "eslint": "^7.13.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.3.6",
-    "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
-    "parcel": "^1.12.4",
     "prettier": "^2.2.1",
-    "rollup-plugin-typescript2": "^0.29.0",
-    "ts-jest": "^26.4.4",
     "typescript": "^4.1.3",
     "wsrun": "^5.2.4"
   },
@@ -45,7 +38,7 @@
   "lint-staged": {
     "README.md": [
       "yarn sync:readme",
-      "git add ./workspaces/mordred/README.md"
+      "git add ./pkgs/mordred/README.md"
     ],
     "*.{ts,tsx}": [
       "eslint --fix",

diff --git a/workspaces/example/README.md → pkgs/example/README.md b/workspaces/example/README.md → pkgs/example/README.md
diff --git a/workspaces/example/index.html → pkgs/example/index.html b/workspaces/example/index.html → pkgs/example/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mordred Example</title>
-    <script src="./index.tsx"></script>
+    <script src="./index.tsx" type="module"></script>
   </head>
   <body>
     <div id="root"></div>