refactor + framermotion

Author: Bud-Macaulay

.github/workflows/deploy.yml

@@ -0,0 +1,28 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: npm ci
+      - run: npm run build
+
+      - uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: dist
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/prettier.yml

@@ -0,0 +1,30 @@
+name: Prettier
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Prettier
+        run: npx prettier --check .

package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.12",
+    "framer-motion": "^12.23.19",
     "gl-matrix": "^3.4.4",
     "mc-react-ptable-materials-grid": "^0.8.6",
     "mc-react-structure-visualizer": "^0.7.3",

package.json

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 
-export function OptimadeFAQs() {
+export default function OptimadeFAQs() {
   const [isOpen, setIsOpen] = useState(false);
   const contentRef = useRef(null);
   const [height, setHeight] = useState("0px");

src/components/OptimadeFAQs/index.jsx …mponents/OptimadeClient/OptimadeFAQs.jsxsrc/components/OptimadeFAQs/index.jsx renamed to src/components/OptimadeClient/OptimadeFAQs.jsx src/components/OptimadeFAQs/index.jsx renamed to src/components/OptimadeClient/OptimadeFAQs.jsx

@@ -1,10 +1,14 @@
 import { useState, useEffect } from "react";
 import PTable from "./OptimadePTable";
 import { QueryTextBox } from "./OptimadeRawQuery";
-import RangeSlider from "../common/RangeSlider";
+import RangeSlider from "../../common/RangeSlider";
 import { buildQueryString } from "./OptimadeRawQuery/buildQueryString";
 
-export function OptimadeFilters({ providerUrl, onResults, onFilterChange }) {
+export default function OptimadeFilters({
+  providerUrl,
+  onResults,
+  onFilterChange,
+}) {
   const [numAtomsRange, setNumAtomsRange] = useState([1, 118]);
   const [numSitesRange, setNumSitesRange] = useState([1, 1000]);
   const [selectedElements, setSelectedElements] = useState({});
@@ -65,6 +69,32 @@ export function OptimadeFilters({ providerUrl, onResults, onFilterChange }) {
 
   return (
     <div className="space-y-2">
+      {/* Guided filters */}
+      <div className={manualMode ? "opacity-50 pointer-events-none" : ""}>
+        <PTable
+          selected={selectedElements}
+          onSelectionChange={(el) =>
+            setSelectedElements((prev) => ({ ...prev, ...el }))
+          }
+        />
+
+        <RangeSlider
+          title="Number of atoms"
+          value={numAtomsRange}
+          onChange={setNumAtomsRange}
+          min={1}
+          max={118}
+        />
+
+        <RangeSlider
+          title="Number of sites"
+          value={numSitesRange}
+          onChange={setNumSitesRange}
+          min={0}
+          max={1000}
+        />
+      </div>
+
       {/* Unlock query checkbox */}
       <div className="flex items-center space-x-2">
         <input
@@ -92,32 +122,6 @@ export function OptimadeFilters({ providerUrl, onResults, onFilterChange }) {
           placeholder="Enter OPTIMADE filter…"
         />
       </div>
-
-      {/* Guided filters */}
-      <div className={manualMode ? "opacity-50 pointer-events-none" : ""}>
-        <PTable
-          selected={selectedElements}
-          onSelectionChange={(el) =>
-            setSelectedElements((prev) => ({ ...prev, ...el }))
-          }
-        />
-
-        <RangeSlider
-          title="Number of atoms"
-          value={numAtomsRange}
-          onChange={setNumAtomsRange}
-          min={1}
-          max={118}
-        />
-
-        <RangeSlider
-          title="Number of sites"
-          value={numSitesRange}
-          onChange={setNumSitesRange}
-          min={0}
-          max={1000}
-        />
-      </div>
     </div>
   );
 }