@dracor/react 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dracor/react",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "DraCor react component library",
   "repository": "https://github.com/dracor-org/dracor-react",
   "homepage": "https://github.com/dracor-org/dracor-react#readme",
@@ -28,54 +28,57 @@
     "react-markdown": "^10.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
+    "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.2.0",
-    "@headlessui/react": "^2.2.9",
-    "@storybook/addon-docs": "^10.2.16",
-    "@storybook/addon-links": "^10.2.16",
-    "@storybook/addon-vitest": "10.2.16",
-    "@storybook/builder-vite": "^10.2.16",
-    "@storybook/react-vite": "^10.2.16",
+    "@fortawesome/react-fontawesome": "^3.3.1",
+    "@headlessui/react": "^2.2.10",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-links": "^10.4.2",
+    "@storybook/addon-vitest": "10.4.2",
+    "@storybook/builder-vite": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
     "@svgr/cli": "^8.1.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-router": "^1.166.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-router": "^1.170.15",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^19.2.3",
     "@types/swagger-ui-react": "^5.18.0",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "CETEIcean": "^1.9.5",
-    "eslint": "^10.0.2",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint": "^10.4.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-storybook": "^10.2.16",
-    "globals": "^17.4.0",
-    "jsdom": "^28.1.0",
-    "playwright": "^1.58.2",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
+    "eslint-plugin-storybook": "^10.4.2",
+    "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
+    "playwright": "^1.60.0",
+    "prettier": "^3.8.3",
+    "react": "^19.2.7",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.7",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.2.16",
-    "swagger-ui-react": "^5.32.0",
-    "tailwindcss": "^4.2.1",
+    "storybook": "^10.4.2",
+    "swagger-ui-react": "^5.32.6",
+    "tailwindcss": "^4.3.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
+    "unified": "^11.0.5",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.8"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
@@ -104,6 +107,7 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
+    "coverage": "vitest run --coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate-icon-components": "svgr --typescript --jsx-runtime automatic --ignore-existing --out-dir src/components/icons src/icons",

package/src/dracor.css

@@ -17,6 +17,8 @@
   --img-wikidata: url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 810 500' style='enable-background:new 0 0 810 500;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23990000;%7D .st1%7Bfill:%23339966;%7D .st2%7Bfill:%23006699;%7D%3C/style%3E%3Cpath class='st0' d='M0,500h30V0H0V500z M60,500h90V0H60V500z M180,0v500h90V0H180z'/%3E%3Cpath class='st1' d='M720,500h30V0h-30V500z M780,0v500h30V0H780z M300,500h30V0h-30V500z M360,0v500h30V0H360z'/%3E%3Cpath class='st2' d='M420,500h90V0h-90V500z M540,500h30V0h-30V500z M600,0v500h90V0H600z'/%3E%3C/svg%3E%0A");
   --img-dracor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 384 384'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D.cls-2%7Bclip-path:url(%23clip-path);%7D.cls-3%7Bfill:%231f2447;%7D%3C/style%3E%3CclipPath id='clip-path' transform='translate(0 0)'%3E%3Crect class='cls-1' width='384' height='384'/%3E%3C/clipPath%3E%3C/defs%3E%3Ctitle%3EDraCor-Symbol-Square-Blue%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Vektor-Smartobjekt'%3E%3Cg class='cls-2'%3E%3Cg class='cls-2'%3E%3Cpath class='cls-3' d='M378.47,146A192.23,192.23,0,0,0,192,0H0V384H192A192.23,192.23,0,0,0,378.47,238.05a194.5,194.5,0,0,0,0-92.1M192,347.51H36.49V210.25H71.6a121.84,121.84,0,0,0,233.18,27.8h-41a85.29,85.29,0,1,1-11.51-106.34A86.09,86.09,0,0,1,263.8,146h41A121.81,121.81,0,0,0,71.6,173.76H36.49V36.49H192c69.73,0,128.88,46.12,148.55,109.46q2.13,6.84,3.62,13.91c1,4.56,1.73,9.2,2.27,13.9H240.84a50.2,50.2,0,0,0-2.38-5.43c-.48-.94-1-1.86-1.54-2.77a50.8,50.8,0,0,0-3.89-5.7,49.82,49.82,0,0,0-4.17-4.71,52,52,0,0,0-61.31-9.2c-1.14.6-2.26,1.26-3.35,2a51.23,51.23,0,0,0-9,7.25,52.09,52.09,0,0,0,0,73.71,51.17,51.17,0,0,0,9,7.24l3.34,2a52.07,52.07,0,0,0,61.32-9.19,50,50,0,0,0,4.18-4.72,52.26,52.26,0,0,0,3.47-5c.7-1.14,1.35-2.3,2-3.49a48.31,48.31,0,0,0,2.38-5.43h105.6c-.54,4.7-1.31,9.34-2.27,13.9q-1.49,7.08-3.62,13.91C320.88,301.39,261.73,347.51,192,347.51' transform='translate(0 0)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   --img-wega: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='70.000000pt' height='70.000000pt' viewBox='0 0 70.000000 70.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cmetadata%3E%0ACreated by potrace 1.11, written by Peter Selinger 2001-2013%0A%3C/metadata%3E%3Cg transform='translate(0.000000,70.000000) scale(0.100000,-0.100000)'%0Afill='%230064b4' stroke='none'%3E%3Cpath d='M223 664 c-29 -19 -53 -39 -53 -44 0 -5 -11 -26 -25 -46 -14 -21 -23%0A-44 -20 -51 2 -8 -3 -25 -12 -39 -13 -21 -14 -29 -4 -52 7 -15 19 -34 27 -42%0A8 -8 29 -37 46 -63 l31 -48 -19 -40 c-9 -22 -42 -63 -73 -91 l-55 -50 23 -44%0A24 -44 87 0 87 0 -27 115 c-19 82 -23 112 -14 104 20 -17 17 2 -6 31 -11 14%0A-20 35 -20 47 0 12 -7 43 -16 69 -12 36 -13 48 -4 54 7 4 9 13 5 19 -4 7 -1%0A18 5 26 7 8 10 24 7 35 -3 10 2 25 10 31 8 7 12 21 10 31 -4 15 1 18 38 18 52%0A0 90 -15 128 -49 37 -34 36 -61 -3 -61 -38 0 -53 -27 -48 -93 3 -50 2 -52 -22%0A-49 -24 2 -24 2 -5 -12 27 -19 57 -3 50 27 -12 59 -11 72 12 72 28 0 41 14 23%0A25 -13 8 -13 10 1 10 27 0 31 -66 8 -140 -20 -65 -51 -110 -76 -110 -7 0 -13%0A-4 -13 -10 0 -15 23 -12 48 6 26 18 26 29 2 -110 -15 -92 -20 -86 75 -86 l86%0A0 20 47 20 47 -65 58 c-77 69 -98 116 -76 169 8 17 22 39 32 49 11 10 20 25%0A22 33 1 8 8 22 15 31 17 20 5 73 -19 81 -10 3 -21 16 -24 29 -3 12 -13 32 -23%0A44 -10 12 -26 33 -36 47 -10 14 -26 25 -36 25 -9 0 -26 7 -37 15 -29 22 -54%0A18 -111 -21z'/%3E%3Cpath d='M246 475 c-22 -17 -20 -28 2 -16 10 6 28 7 40 4 12 -3 22 -1 22 5 0%0A15 -45 20 -64 7z'/%3E%3Cpath d='M252 437 c-10 -11 -5 -14 24 -15 24 -1 34 3 31 11 -5 17 -42 20 -55%0A4z'/%3E%3Cpath d='M299 289 c-9 -6 1 -9 29 -9 24 0 41 4 38 9 -7 11 -50 11 -67 0z'/%3E%3Cpath d='M315 260 c3 -5 15 -10 26 -10 10 0 19 5 19 10 0 6 -12 10 -26 10 -14%0A0 -23 -4 -19 -10z'/%3E%3C/g%3E%3C/svg%3E");
+  --img-oclc: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2045%2045%22%20style%3D%22enable-background%3Anew%200%200%2045%2045%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%23333F48%3B%7D.st1%7Bfill%3A%23236192%3B%7D.st2%7Bfill%3A%234C8C2B%3B%7D.st3%7Bfill%3A%23E87722%3B%7D%3C%2Fstyle%3E%3Cg%3E%3Cg%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M35.88%2C15.12c-1.6-9.85-10.9-16.51-20.76-14.87S-1.39%2C11.18%2C0.25%2C21c1.2%2C7.36%2C6.71%2C12.93%2C13.52%2C14.6c0.03-0.52%2C0.09-1.08%2C0.22-1.6c-4.9-1.69-8.75-6.07-9.67-11.64C2.99%2C14.29%2C8.22%2C6.71%2C16.04%2C5.42C23%2C4.28%2C29.66%2C8.5%2C31.93%2C15.15c1.6%2C0.59%2C3.02%2C1.45%2C4.16%2C2.59C36.12%2C16.88%2C36.03%2C15.98%2C35.88%2C15.12z%22%2F%3E%3Cpath%20class%3D%22st2%22%20d%3D%22M32.12%2C11.89c-7.48-2.03-15.21%2C2.34-17.28%2C9.82c-0.86%2C3.08-0.59%2C6.22%2C0.52%2C8.99c0.4-0.55%2C0.86-1.08%2C1.39-1.51c-0.34-1.76-0.31-3.6%2C0.22-5.45c1.72-6.22%2C7.98-9.95%2C14.01-8.28s9.55%2C8.04%2C7.82%2C14.29c-1.17%2C4.25-4.43%2C7.3-8.31%2C8.31c-0.15%2C0.46-0.34%2C0.92-0.55%2C1.35c5.54-0.62%2C10.44-4.53%2C12.01-10.25C43.98%2C21.68%2C39.57%2C13.95%2C32.12%2C11.89z%22%2F%3E%3Cpath%20class%3D%22st3%22%20d%3D%22M28.02%2C26.51c-4.62-3.05-10.84-1.76-13.89%2C2.89c-3.05%2C4.62-1.76%2C10.84%2C2.89%2C13.89c4.62%2C3.05%2C10.87%2C1.76%2C13.89-2.89C33.97%2C35.78%2C32.67%2C29.56%2C28.02%2C26.51z%20M28.67%2C39.88c-2.4%2C3.66-7.21%2C4.74-10.75%2C2.43c-3.54-2.31-4.47-7.18-2.06-10.84c2.4-3.66%2C7.21-4.74%2C10.75-2.43C30.15%2C31.38%2C31.07%2C36.25%2C28.67%2C39.88z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+  --img-dnb: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20120%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%3E%3C!--%20White%20background%20--%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22white%22%2F%3E%3C!--%207%20vertical%20bars%20(positions%20%26%20colours%20pixel-sampled%20from%20original)%20--%3E%3Crect%20x%3D%226%22%20%20%20y%3D%220%22%20width%3D%225%22%20height%3D%22120%22%20fill%3D%22%230344C4%22%2F%3E%3Crect%20x%3D%2215%22%20%20y%3D%220%22%20width%3D%226%22%20height%3D%22120%22%20fill%3D%22%23A3B801%22%2F%3E%3Crect%20x%3D%2233%22%20%20y%3D%220%22%20width%3D%226%22%20height%3D%22120%22%20fill%3D%22%2300ADF9%22%2F%3E%3Crect%20x%3D%2243%22%20%20y%3D%220%22%20width%3D%227%22%20height%3D%22120%22%20fill%3D%22%23FEC81E%22%2F%3E%3Crect%20x%3D%2264%22%20%20y%3D%220%22%20width%3D%225%22%20height%3D%22120%22%20fill%3D%22%23E22E2D%22%2F%3E%3Crect%20x%3D%2286%22%20%20y%3D%220%22%20width%3D%225%22%20height%3D%22120%22%20fill%3D%22%23DCCD68%22%2F%3E%3Crect%20x%3D%22109%22%20y%3D%220%22%20width%3D%225%22%20height%3D%22120%22%20fill%3D%22%23017DEF%22%2F%3E%3C!--%20DNB%20lettering%20--%3E%3Ctext%20%20%20%20x%3D%2260%22%20y%3D%2276%22%20%20%20%20font-family%3D%22Arial%20Black%2C%20Arial%2C%20sans-serif%22%20%20%20%20font-size%3D%2244%22%20%20%20%20font-weight%3D%22900%22%20%20%20%20fill%3D%22black%22%20%20%20%20text-anchor%3D%22middle%22%20%20%20%20letter-spacing%3D%22-1%22%20%20%3EDNB%3C%2Ftext%3E%3C%2Fsvg%3E');
 
   --animate-spin-slow: reverse-spin 120s linear infinite;
   @keyframes reverse-spin {
@@ -142,4 +144,69 @@
     margin-top: var(--spacing-8);
     margin-bottom: var(--spacing-4);
   }
+
+  tei-castGroup {
+    display: block;
+  }
+  tei-castItem {
+    display: list-item;
+  }
+  tei-castList {
+    list-style-type: none;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  tei-castgroup {
+    position: relative;
+    width: fit-content;
+    display: grid;
+    grid-template-columns: auto;
+  }
+  tei-castgroup tei-castitem {
+    grid-column: 1 / 2;
+  }
+  tei-castgroup > tei-castgroup {
+    grid-column: 1 / 2;
+  }
+  tei-castgroup > tei-roledesc {
+    position: relative;
+    grid-area: 999 / 2 / -1 / -1;
+    top: 0;
+    height: 100%;
+    width: max-content;
+    display: flex;
+    align-items: center;
+    margin-left: 2.4em;
+  }
+  tei-castgroup::before {
+    content: '';
+    position: relative;
+    grid-area: 999 / 2 / -1 / -1;
+    display: block;
+    width: 13px;
+    height: calc(100% - 1rem);
+    top: 0.5rem;
+    right: -0.4em;
+    border-top: 2px solid black;
+    border-bottom: 2px solid black;
+    border-right: 2px solid black;
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+  tei-castgroup::after {
+    content: '';
+    position: relative;
+    grid-area: 999 / 2 / -1 / -1;
+    right: -1.3em;
+    height: calc(50% + 1px);
+    width: 0.7em;
+    border-bottom: 2px solid black;
+  }
+  tei-castlist > tei-head {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+  tei-role {
+    font-variant: small-caps;
+  }
 }