@sanity/ui-workshop
Version:
An environment for designing, reviewing, and quality-testing React components.
152 lines (151 loc) • 6.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: !0 });
var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), ui = require("@sanity/ui"), react = require("react"), uiWorkshop = require("@sanity/ui-workshop"), axe = require("axe-core");
function _interopDefaultCompat(e) {
return e && typeof e == "object" && "default" in e ? e : { default: e };
}
var axe__default = /* @__PURE__ */ _interopDefaultCompat(axe);
const A11yContext = react.createContext(null);
function useA11y() {
const props = react.useContext(A11yContext);
if (!props)
throw new Error("A11y: missing context value");
return props;
}
const A11yInspector = react.memo(function() {
const $ = reactCompilerRuntime.c(4), {
results
} = useA11y();
let t0;
$[0] !== results ? (t0 = results && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
results.violations.map(_temp$1),
results.passes.map(_temp2)
] }) }), $[0] = results, $[1] = t0) : t0 = $[1];
let t1;
return $[2] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: t0 }), $[2] = t0, $[3] = t1) : t1 = $[3], t1;
}), ResultItem = react.memo(function(props) {
const $ = reactCompilerRuntime.c(22), {
result,
tone
} = props;
let t0;
$[0] !== result.impact ? (t0 = result.impact && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
" (",
result.impact,
")"
] }), $[0] = result.impact, $[1] = t0) : t0 = $[1];
let t1;
$[2] !== result.help || $[3] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, weight: "semibold", children: [
result.help,
t0
] }), $[2] = result.help, $[3] = t0, $[4] = t1) : t1 = $[4];
let t2;
$[5] !== result.description ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: result.description }), $[5] = result.description, $[6] = t2) : t2 = $[6];
let t3;
$[7] !== result.helpUrl ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: result.helpUrl, target: "_blank", rel: "noreferrer", children: "Help URL \u2192" }) }), $[7] = result.helpUrl, $[8] = t3) : t3 = $[8];
let t4;
$[9] !== t1 || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { paddingX: 2, paddingY: 3, space: 3, children: [
t1,
t2,
t3
] }), $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4) : t4 = $[12];
let t5;
$[13] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { borderTop: !0, tone: "inherit" }), $[13] = t5) : t5 = $[13];
let t6;
$[14] !== result.nodes ? (t6 = result.nodes.map(_temp3), $[14] = result.nodes, $[15] = t6) : t6 = $[15];
let t7;
$[16] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { padding: 2, space: 2, children: t6 }), $[16] = t6, $[17] = t7) : t7 = $[17];
let t8;
return $[18] !== t4 || $[19] !== t7 || $[20] !== tone ? (t8 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { border: !0, radius: 2, tone, children: [
t4,
t5,
t7
] }), $[18] = t4, $[19] = t7, $[20] = tone, $[21] = t8) : t8 = $[21], t8;
});
function _temp$1(violation) {
return /* @__PURE__ */ jsxRuntime.jsx(ResultItem, { result: violation, tone: "critical" }, violation.id);
}
function _temp2(violation_0) {
return /* @__PURE__ */ jsxRuntime.jsx(ResultItem, { result: violation_0, tone: "positive" }, violation_0.id);
}
function _temp3(node, nodeIndex) {
return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
node.failureSummary && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: node.failureSummary }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Card, { border: !0, overflow: "auto", padding: 2, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { language: "html", size: 0, children: node.html }) })
] }, nodeIndex);
}
const A11yProvider = react.memo(function(props) {
const $ = reactCompilerRuntime.c(15), {
children
} = props, {
broadcast,
channel,
origin,
path
} = uiWorkshop.useWorkshop();
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
error: null,
results: null
}, $[0] = t0) : t0 = $[0];
const [t1, setState] = react.useState(t0), {
error,
results
} = t1;
let t2, t3;
$[1] !== error || $[2] !== results ? (t3 = {
error,
results
}, $[1] = error, $[2] = results, $[3] = t3) : t3 = $[3], t2 = t3;
const a11y = t2;
let t4, t5;
$[4] !== broadcast || $[5] !== origin || $[6] !== path ? (t4 = () => {
origin !== "main" && axe__default.default.run().then((_results) => {
broadcast({
type: "workshop/a11y/setResults",
path,
results: _results
});
}).catch((_error) => {
broadcast({
type: "workshop/a11y/setError",
message: _error.message
});
});
}, t5 = [broadcast, origin, path], $[4] = broadcast, $[5] = origin, $[6] = path, $[7] = t4, $[8] = t5) : (t4 = $[7], t5 = $[8]), react.useEffect(t4, t5);
let t6, t7;
$[9] !== channel ? (t6 = () => {
channel.subscribe((msg) => {
msg.type === "workshop/setPath" && setState(_temp), msg.type === "workshop/a11y/setResults" && setState((s_0) => ({
...s_0,
error: null,
results: msg.results
})), msg.type === "workshop/a11y/setError" && setState((s_1) => ({
...s_1,
error: {
message: msg.message
},
results: null
}));
});
}, t7 = [channel], $[9] = channel, $[10] = t6, $[11] = t7) : (t6 = $[10], t7 = $[11]), react.useEffect(t6, t7);
let t8;
return $[12] !== a11y || $[13] !== children ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(A11yContext.Provider, { value: a11y, children }), $[12] = a11y, $[13] = children, $[14] = t8) : t8 = $[14], t8;
});
function _temp(s) {
return {
...s,
error: null,
results: null
};
}
function a11yPlugin() {
return {
name: "a11y",
title: "A11y",
inspector: A11yInspector,
provider: A11yProvider
};
}
exports.a11yPlugin = a11yPlugin;
//# sourceMappingURL=plugin-a11y.cjs.map