@neo4j-ndl/react 5.0.0-alpha.0.3d763f7 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/code-block/code-languages.js +24 -1
- package/lib/cjs/code-block/code-languages.js.map +1 -1
- package/lib/cjs/switch/stories/switch-disabled.story.js +1 -1
- package/lib/cjs/switch/stories/switch-disabled.story.js.map +1 -1
- package/lib/esm/code-block/code-languages.js +24 -1
- package/lib/esm/code-block/code-languages.js.map +1 -1
- package/lib/esm/switch/stories/switch-disabled.story.js +2 -2
- package/lib/esm/switch/stories/switch-disabled.story.js.map +1 -1
- package/lib/types/code-block/code-languages.d.ts +22 -0
- package/lib/types/code-block/code-languages.d.ts.map +1 -1
- package/lib/types/switch/stories/switch-disabled.story.d.ts.map +1 -1
- package/package.json +5 -5
- package/skills/ndl-react/SKILL.md +3 -3
- package/skills/ndl-react/components/checkbox.md +1 -1
- package/skills/ndl-react/components/clean-icon-button.md +0 -94
- package/skills/ndl-react/components/switch.md +6 -1
|
@@ -81,13 +81,36 @@ exports.Languages = [
|
|
|
81
81
|
'xml',
|
|
82
82
|
'yaml',
|
|
83
83
|
];
|
|
84
|
+
/**
|
|
85
|
+
* The bash grammar only recognizes `\w+` in flag names, so long flags
|
|
86
|
+
* like `--database-name` aren't highlighted as parameters.
|
|
87
|
+
* This wrapper expands the `parameter` pattern to support hyphens.
|
|
88
|
+
*
|
|
89
|
+
* Refractor uses a shared registry and skips grammars whose `displayName`
|
|
90
|
+
* is already registered. If another package has already registered `bash`,
|
|
91
|
+
* a wrapper named `bash` would be ignored. We give the wrapper its own name,
|
|
92
|
+
* register the original grammar only if `bash` is missing, and then patch
|
|
93
|
+
* whichever bash grammar is available. The patch is safe to apply more than
|
|
94
|
+
* once.
|
|
95
|
+
*/
|
|
96
|
+
const withBashParameterFix = (grammar) => Object.assign((prism) => {
|
|
97
|
+
var _a;
|
|
98
|
+
if (prism.languages.bash === undefined) {
|
|
99
|
+
grammar(prism);
|
|
100
|
+
}
|
|
101
|
+
const parameter = (_a = prism.languages.bash) === null || _a === void 0 ? void 0 : _a.parameter;
|
|
102
|
+
if (parameter !== undefined) {
|
|
103
|
+
parameter.pattern =
|
|
104
|
+
/(^|\s)-{1,2}(?:\w+:[+-]?)?\w[\w-]*(?:\.[\w-]+)*(?=[=\s]|$)/;
|
|
105
|
+
}
|
|
106
|
+
}, { displayName: `ndl-${grammar.displayName}` });
|
|
84
107
|
const loadLanguage = (language) => {
|
|
85
108
|
/* need to import the languages dynamically to reduce the bundle size and need to use a string literal for proper tree shaking */
|
|
86
109
|
switch (language) {
|
|
87
110
|
case 'asciidoc':
|
|
88
111
|
return Promise.resolve().then(() => __importStar(require('react-syntax-highlighter/dist/esm/languages/prism/asciidoc')));
|
|
89
112
|
case 'bash':
|
|
90
|
-
return Promise.resolve().then(() => __importStar(require('react-syntax-highlighter/dist/esm/languages/prism/bash')));
|
|
113
|
+
return Promise.resolve().then(() => __importStar(require('react-syntax-highlighter/dist/esm/languages/prism/bash'))).then((module) => ({ default: withBashParameterFix(module.default) }));
|
|
91
114
|
case 'c':
|
|
92
115
|
return Promise.resolve().then(() => __importStar(require('react-syntax-highlighter/dist/esm/languages/prism/c')));
|
|
93
116
|
case 'csharp':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-languages.js","sourceRoot":"","sources":["../../../src/code-block/code-languages.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gJAAgJ;AACnI,QAAA,SAAS,GAAG;IACvB,UAAU;IACV,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,IAAI;IACJ,SAAS;IACT,MAAM;IACN,SAAS;IACT,YAAY;IACZ,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;CACE,CAAC;
|
|
1
|
+
{"version":3,"file":"code-languages.js","sourceRoot":"","sources":["../../../src/code-block/code-languages.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gJAAgJ;AACnI,QAAA,SAAS,GAAG;IACvB,UAAU;IACV,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,IAAI;IACJ,SAAS;IACT,MAAM;IACN,SAAS;IACT,YAAY;IACZ,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;CACE,CAAC;AA0BX;;;;;;;;;;;GAWG;AACH,MAAM,oBAAoB,GAAG,CAAC,OAAyB,EAAoB,EAAE,CAC3E,MAAM,CAAC,MAAM,CACX,CAAC,KAAqB,EAAE,EAAE;;IACxB,IAAI,KAAK,CAAC,SAAS,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACvC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,CAAC,IAAI,0CAAE,SAAS,CAAC;IAClD,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,SAAS,CAAC,OAAO;YACf,4DAA4D,CAAC;IACjE,CAAC;AACH,CAAC,EACD,EAAE,WAAW,EAAE,OAAO,OAAO,CAAC,WAAW,EAAE,EAAE,CAC9C,CAAC;AAEG,MAAM,YAAY,GAAG,CAAC,QAAsB,EAAE,EAAE;IACrD,iIAAiI;IACjI,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,UAAU;YACb,yDAAc,4DAA4D,IAAE;QAC9E,KAAK,MAAM;YACT,OAAO,kDAAO,wDAAwD,IAAE,IAAI,CAC1E,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAChE,CAAC;QACJ,KAAK,GAAG;YACN,yDAAc,qDAAqD,IAAE;QACvE,KAAK,QAAQ;YACX,yDAAc,0DAA0D,IAAE;QAC5E,KAAK,KAAK;YACR,yDAAc,uDAAuD,IAAE;QACzE,KAAK,YAAY;YACf,yDAAc,8DAA8D,IAAE;QAChF,KAAK,QAAQ;YACX,yDAAc,0DAA0D,IAAE;QAC5E,KAAK,QAAQ;YACX,yDAAc,0DAA0D,IAAE;QAC5E,KAAK,MAAM;YACT,yDAAc,wDAAwD,IAAE;QAC1E,KAAK,IAAI;YACP,yDAAc,sDAAsD,IAAE;QACxE,KAAK,SAAS;YACZ,yDAAc,2DAA2D,IAAE;QAC7E,KAAK,MAAM;YACT,yDAAc,wDAAwD,IAAE;QAC1E,KAAK,SAAS;YACZ,yDAAc,2DAA2D,IAAE;QAC7E,KAAK,YAAY;YACf,yDAAc,8DAA8D,IAAE;QAChF,KAAK,KAAK;YACR,yDAAc,uDAAuD,IAAE;QACzE,KAAK,QAAQ;YACX,yDAAc,0DAA0D,IAAE;QAC5E,KAAK,KAAK;YACR,yDAAc,uDAAuD,IAAE;QACzE,KAAK,QAAQ;YACX,yDAAc,0DAA0D,IAAE;QAC5E,KAAK,OAAO;YACV,yDAAc,yDAAyD,IAAE;QAC3E,KAAK,MAAM;YACT,yDAAc,wDAAwD,IAAE;QAC1E,KAAK,KAAK;YACR,yDAAc,uDAAuD,IAAE;QACzE,KAAK,YAAY;YACf,yDAAc,8DAA8D,IAAE;QAChF,KAAK,KAAK;YACR,yDAAc,2DAA2D,IAAE;QAC7E,KAAK,MAAM;YACT,yDAAc,wDAAwD,IAAE;QAE1E;YACE,MAAM,IAAI,KAAK,CAAC,yBAAyB,QAAQ,EAAE,CAAC,CAAC;IACzD,CAAC;AACH,CAAC,CAAC;AAzDW,QAAA,YAAY,gBAyDvB","sourcesContent":["/*!\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n// Source for available languages: https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD\nexport const Languages = [\n 'asciidoc',\n 'bash',\n 'c',\n 'csharp',\n 'css',\n 'css-extras',\n 'cypher',\n 'docker',\n 'json',\n 'go',\n 'graphql',\n 'java',\n 'javadoc',\n 'javascript',\n 'jsx',\n 'kotlin',\n 'php',\n 'python',\n 'regex',\n 'rust',\n 'sql',\n 'typescript',\n 'xml',\n 'yaml',\n] as const;\n\nexport type LanguageProp = (typeof Languages)[number];\n\n/**\n * The parts of the Prism instance that we need when working with a\n * refractor grammar. Since this package doesn't depend directly on\n * refractor's types, we only define the bits we use.\n */\nexport interface RefractorPrism {\n languages: {\n bash?: {\n parameter?: { pattern: RegExp };\n };\n };\n}\n\n/**\n * A refractor grammar registers itself on a Prism instance.\n * This type covers the parts of refractor's `Syntax` type that we use.\n */\nexport type RefractorGrammar = ((prism: RefractorPrism) => void) & {\n displayName: string;\n aliases?: string[];\n};\n\n/**\n * The bash grammar only recognizes `\\w+` in flag names, so long flags\n * like `--database-name` aren't highlighted as parameters.\n * This wrapper expands the `parameter` pattern to support hyphens.\n *\n * Refractor uses a shared registry and skips grammars whose `displayName`\n * is already registered. If another package has already registered `bash`,\n * a wrapper named `bash` would be ignored. We give the wrapper its own name,\n * register the original grammar only if `bash` is missing, and then patch\n * whichever bash grammar is available. The patch is safe to apply more than\n * once.\n */\nconst withBashParameterFix = (grammar: RefractorGrammar): RefractorGrammar =>\n Object.assign(\n (prism: RefractorPrism) => {\n if (prism.languages.bash === undefined) {\n grammar(prism);\n }\n const parameter = prism.languages.bash?.parameter;\n if (parameter !== undefined) {\n parameter.pattern =\n /(^|\\s)-{1,2}(?:\\w+:[+-]?)?\\w[\\w-]*(?:\\.[\\w-]+)*(?=[=\\s]|$)/;\n }\n },\n { displayName: `ndl-${grammar.displayName}` },\n );\n\nexport const loadLanguage = (language: LanguageProp) => {\n /* need to import the languages dynamically to reduce the bundle size and need to use a string literal for proper tree shaking */\n switch (language) {\n case 'asciidoc':\n return import('react-syntax-highlighter/dist/esm/languages/prism/asciidoc');\n case 'bash':\n return import('react-syntax-highlighter/dist/esm/languages/prism/bash').then(\n (module) => ({ default: withBashParameterFix(module.default) }),\n );\n case 'c':\n return import('react-syntax-highlighter/dist/esm/languages/prism/c');\n case 'csharp':\n return import('react-syntax-highlighter/dist/esm/languages/prism/csharp');\n case 'css':\n return import('react-syntax-highlighter/dist/esm/languages/prism/css');\n case 'css-extras':\n return import('react-syntax-highlighter/dist/esm/languages/prism/css-extras');\n case 'cypher':\n return import('react-syntax-highlighter/dist/esm/languages/prism/cypher');\n case 'docker':\n return import('react-syntax-highlighter/dist/esm/languages/prism/docker');\n case 'json':\n return import('react-syntax-highlighter/dist/esm/languages/prism/json');\n case 'go':\n return import('react-syntax-highlighter/dist/esm/languages/prism/go');\n case 'graphql':\n return import('react-syntax-highlighter/dist/esm/languages/prism/graphql');\n case 'java':\n return import('react-syntax-highlighter/dist/esm/languages/prism/java');\n case 'javadoc':\n return import('react-syntax-highlighter/dist/esm/languages/prism/javadoc');\n case 'javascript':\n return import('react-syntax-highlighter/dist/esm/languages/prism/javascript');\n case 'jsx':\n return import('react-syntax-highlighter/dist/esm/languages/prism/jsx');\n case 'kotlin':\n return import('react-syntax-highlighter/dist/esm/languages/prism/kotlin');\n case 'php':\n return import('react-syntax-highlighter/dist/esm/languages/prism/php');\n case 'python':\n return import('react-syntax-highlighter/dist/esm/languages/prism/python');\n case 'regex':\n return import('react-syntax-highlighter/dist/esm/languages/prism/regex');\n case 'rust':\n return import('react-syntax-highlighter/dist/esm/languages/prism/rust');\n case 'sql':\n return import('react-syntax-highlighter/dist/esm/languages/prism/sql');\n case 'typescript':\n return import('react-syntax-highlighter/dist/esm/languages/prism/typescript');\n case 'xml':\n return import('react-syntax-highlighter/dist/esm/languages/prism/xml-doc');\n case 'yaml':\n return import('react-syntax-highlighter/dist/esm/languages/prism/yaml');\n\n default:\n throw new Error(`Unsupported language: ${language}`);\n }\n};\n"]}
|
|
@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
24
24
|
require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
25
25
|
const react_1 = require("@neo4j-ndl/react");
|
|
26
26
|
const Component = () => {
|
|
27
|
-
return (0, jsx_runtime_1.jsx)(react_1.Switch, { label: "
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Disabled off", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Switch, { label: "Disabled on", isChecked: true, isDisabled: true })] }));
|
|
28
28
|
};
|
|
29
29
|
exports.default = Component;
|
|
30
30
|
//# sourceMappingURL=switch-disabled.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-disabled.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,cAAM,IAAC,KAAK,EAAC,
|
|
1
|
+
{"version":3,"file":"switch-disabled.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,cAAM,IAAC,KAAK,EAAC,cAAc,EAAC,UAAU,SAAG,EAC1C,uBAAC,cAAM,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,QAAC,UAAU,SAAG,IAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Switch } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex flex-col gap-token-8\">\n <Switch label=\"Disabled off\" isDisabled />\n <Switch label=\"Disabled on\" isChecked isDisabled />\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -45,13 +45,36 @@ export const Languages = [
|
|
|
45
45
|
'xml',
|
|
46
46
|
'yaml',
|
|
47
47
|
];
|
|
48
|
+
/**
|
|
49
|
+
* The bash grammar only recognizes `\w+` in flag names, so long flags
|
|
50
|
+
* like `--database-name` aren't highlighted as parameters.
|
|
51
|
+
* This wrapper expands the `parameter` pattern to support hyphens.
|
|
52
|
+
*
|
|
53
|
+
* Refractor uses a shared registry and skips grammars whose `displayName`
|
|
54
|
+
* is already registered. If another package has already registered `bash`,
|
|
55
|
+
* a wrapper named `bash` would be ignored. We give the wrapper its own name,
|
|
56
|
+
* register the original grammar only if `bash` is missing, and then patch
|
|
57
|
+
* whichever bash grammar is available. The patch is safe to apply more than
|
|
58
|
+
* once.
|
|
59
|
+
*/
|
|
60
|
+
const withBashParameterFix = (grammar) => Object.assign((prism) => {
|
|
61
|
+
var _a;
|
|
62
|
+
if (prism.languages.bash === undefined) {
|
|
63
|
+
grammar(prism);
|
|
64
|
+
}
|
|
65
|
+
const parameter = (_a = prism.languages.bash) === null || _a === void 0 ? void 0 : _a.parameter;
|
|
66
|
+
if (parameter !== undefined) {
|
|
67
|
+
parameter.pattern =
|
|
68
|
+
/(^|\s)-{1,2}(?:\w+:[+-]?)?\w[\w-]*(?:\.[\w-]+)*(?=[=\s]|$)/;
|
|
69
|
+
}
|
|
70
|
+
}, { displayName: `ndl-${grammar.displayName}` });
|
|
48
71
|
export const loadLanguage = (language) => {
|
|
49
72
|
/* need to import the languages dynamically to reduce the bundle size and need to use a string literal for proper tree shaking */
|
|
50
73
|
switch (language) {
|
|
51
74
|
case 'asciidoc':
|
|
52
75
|
return import('react-syntax-highlighter/dist/esm/languages/prism/asciidoc');
|
|
53
76
|
case 'bash':
|
|
54
|
-
return import('react-syntax-highlighter/dist/esm/languages/prism/bash');
|
|
77
|
+
return import('react-syntax-highlighter/dist/esm/languages/prism/bash').then((module) => ({ default: withBashParameterFix(module.default) }));
|
|
55
78
|
case 'c':
|
|
56
79
|
return import('react-syntax-highlighter/dist/esm/languages/prism/c');
|
|
57
80
|
case 'csharp':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-languages.js","sourceRoot":"","sources":["../../../src/code-block/code-languages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,gJAAgJ;AAChJ,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,UAAU;IACV,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,IAAI;IACJ,SAAS;IACT,MAAM;IACN,SAAS;IACT,YAAY;IACZ,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,OAAO;IACP,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;CACE,CAAC;
|
|
1
|
+
{"version":3,"file":"code-languages.js","sourceRoot":"","sources":["../../../src/code-block/code-languages.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n// Source for available languages: https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD\nexport const Languages = [\n 'asciidoc',\n 'bash',\n 'c',\n 'csharp',\n 'css',\n 'css-extras',\n 'cypher',\n 'docker',\n 'json',\n 'go',\n 'graphql',\n 'java',\n 'javadoc',\n 'javascript',\n 'jsx',\n 'kotlin',\n 'php',\n 'python',\n 'regex',\n 'rust',\n 'sql',\n 'typescript',\n 'xml',\n 'yaml',\n] as const;\n\nexport type LanguageProp = (typeof Languages)[number];\n\n/**\n * The parts of the Prism instance that we need when working with a\n * refractor grammar. Since this package doesn't depend directly on\n * refractor's types, we only define the bits we use.\n */\nexport interface RefractorPrism {\n languages: {\n bash?: {\n parameter?: { pattern: RegExp };\n };\n };\n}\n\n/**\n * A refractor grammar registers itself on a Prism instance.\n * This type covers the parts of refractor's `Syntax` type that we use.\n */\nexport type RefractorGrammar = ((prism: RefractorPrism) => void) & {\n displayName: string;\n aliases?: string[];\n};\n\n/**\n * The bash grammar only recognizes `\\w+` in flag names, so long flags\n * like `--database-name` aren't highlighted as parameters.\n * This wrapper expands the `parameter` pattern to support hyphens.\n *\n * Refractor uses a shared registry and skips grammars whose `displayName`\n * is already registered. If another package has already registered `bash`,\n * a wrapper named `bash` would be ignored. We give the wrapper its own name,\n * register the original grammar only if `bash` is missing, and then patch\n * whichever bash grammar is available. The patch is safe to apply more than\n * once.\n */\nconst withBashParameterFix = (grammar: RefractorGrammar): RefractorGrammar =>\n Object.assign(\n (prism: RefractorPrism) => {\n if (prism.languages.bash === undefined) {\n grammar(prism);\n }\n const parameter = prism.languages.bash?.parameter;\n if (parameter !== undefined) {\n parameter.pattern =\n /(^|\\s)-{1,2}(?:\\w+:[+-]?)?\\w[\\w-]*(?:\\.[\\w-]+)*(?=[=\\s]|$)/;\n }\n },\n { displayName: `ndl-${grammar.displayName}` },\n );\n\nexport const loadLanguage = (language: LanguageProp) => {\n /* need to import the languages dynamically to reduce the bundle size and need to use a string literal for proper tree shaking */\n switch (language) {\n case 'asciidoc':\n return import('react-syntax-highlighter/dist/esm/languages/prism/asciidoc');\n case 'bash':\n return import('react-syntax-highlighter/dist/esm/languages/prism/bash').then(\n (module) => ({ default: withBashParameterFix(module.default) }),\n );\n case 'c':\n return import('react-syntax-highlighter/dist/esm/languages/prism/c');\n case 'csharp':\n return import('react-syntax-highlighter/dist/esm/languages/prism/csharp');\n case 'css':\n return import('react-syntax-highlighter/dist/esm/languages/prism/css');\n case 'css-extras':\n return import('react-syntax-highlighter/dist/esm/languages/prism/css-extras');\n case 'cypher':\n return import('react-syntax-highlighter/dist/esm/languages/prism/cypher');\n case 'docker':\n return import('react-syntax-highlighter/dist/esm/languages/prism/docker');\n case 'json':\n return import('react-syntax-highlighter/dist/esm/languages/prism/json');\n case 'go':\n return import('react-syntax-highlighter/dist/esm/languages/prism/go');\n case 'graphql':\n return import('react-syntax-highlighter/dist/esm/languages/prism/graphql');\n case 'java':\n return import('react-syntax-highlighter/dist/esm/languages/prism/java');\n case 'javadoc':\n return import('react-syntax-highlighter/dist/esm/languages/prism/javadoc');\n case 'javascript':\n return import('react-syntax-highlighter/dist/esm/languages/prism/javascript');\n case 'jsx':\n return import('react-syntax-highlighter/dist/esm/languages/prism/jsx');\n case 'kotlin':\n return import('react-syntax-highlighter/dist/esm/languages/prism/kotlin');\n case 'php':\n return import('react-syntax-highlighter/dist/esm/languages/prism/php');\n case 'python':\n return import('react-syntax-highlighter/dist/esm/languages/prism/python');\n case 'regex':\n return import('react-syntax-highlighter/dist/esm/languages/prism/regex');\n case 'rust':\n return import('react-syntax-highlighter/dist/esm/languages/prism/rust');\n case 'sql':\n return import('react-syntax-highlighter/dist/esm/languages/prism/sql');\n case 'typescript':\n return import('react-syntax-highlighter/dist/esm/languages/prism/typescript');\n case 'xml':\n return import('react-syntax-highlighter/dist/esm/languages/prism/xml-doc');\n case 'yaml':\n return import('react-syntax-highlighter/dist/esm/languages/prism/yaml');\n\n default:\n throw new Error(`Unsupported language: ${language}`);\n }\n};\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/*!
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) "Neo4j"
|
|
@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
23
|
import { Switch } from '@neo4j-ndl/react';
|
|
24
24
|
const Component = () => {
|
|
25
|
-
return _jsx(Switch, { label: "
|
|
25
|
+
return (_jsxs("div", { className: "flex flex-col gap-token-8", children: [_jsx(Switch, { label: "Disabled off", isDisabled: true }), _jsx(Switch, { label: "Disabled on", isChecked: true, isDisabled: true })] }));
|
|
26
26
|
};
|
|
27
27
|
export default Component;
|
|
28
28
|
//# sourceMappingURL=switch-disabled.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-disabled.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,KAAC,MAAM,IAAC,KAAK,EAAC,
|
|
1
|
+
{"version":3,"file":"switch-disabled.story.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,UAAU,SAAG,EAC1C,KAAC,MAAM,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,QAAC,UAAU,SAAG,IAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Switch } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex flex-col gap-token-8\">\n <Switch label=\"Disabled off\" isDisabled />\n <Switch label=\"Disabled on\" isChecked isDisabled />\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -20,5 +20,27 @@
|
|
|
20
20
|
*/
|
|
21
21
|
export declare const Languages: readonly ["asciidoc", "bash", "c", "csharp", "css", "css-extras", "cypher", "docker", "json", "go", "graphql", "java", "javadoc", "javascript", "jsx", "kotlin", "php", "python", "regex", "rust", "sql", "typescript", "xml", "yaml"];
|
|
22
22
|
export type LanguageProp = (typeof Languages)[number];
|
|
23
|
+
/**
|
|
24
|
+
* The parts of the Prism instance that we need when working with a
|
|
25
|
+
* refractor grammar. Since this package doesn't depend directly on
|
|
26
|
+
* refractor's types, we only define the bits we use.
|
|
27
|
+
*/
|
|
28
|
+
export interface RefractorPrism {
|
|
29
|
+
languages: {
|
|
30
|
+
bash?: {
|
|
31
|
+
parameter?: {
|
|
32
|
+
pattern: RegExp;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* A refractor grammar registers itself on a Prism instance.
|
|
39
|
+
* This type covers the parts of refractor's `Syntax` type that we use.
|
|
40
|
+
*/
|
|
41
|
+
export type RefractorGrammar = ((prism: RefractorPrism) => void) & {
|
|
42
|
+
displayName: string;
|
|
43
|
+
aliases?: string[];
|
|
44
|
+
};
|
|
23
45
|
export declare const loadLanguage: (language: LanguageProp) => Promise<typeof import("react-syntax-highlighter/dist/esm/languages/prism/asciidoc")>;
|
|
24
46
|
//# sourceMappingURL=code-languages.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-languages.d.ts","sourceRoot":"","sources":["../../../src/code-block/code-languages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,eAAO,MAAM,SAAS,wOAyBZ,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,YAAY,GAAI,UAAU,YAAY,
|
|
1
|
+
{"version":3,"file":"code-languages.d.ts","sourceRoot":"","sources":["../../../src/code-block/code-languages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,eAAO,MAAM,SAAS,wOAyBZ,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE;QACT,IAAI,CAAC,EAAE;YACL,SAAS,CAAC,EAAE;gBAAE,OAAO,EAAE,MAAM,CAAA;aAAE,CAAC;SACjC,CAAC;KACH,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AA6BF,eAAO,MAAM,YAAY,GAAI,UAAU,YAAY,yFAyDlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-disabled.story.d.ts","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+
|
|
1
|
+
{"version":3,"file":"switch-disabled.story.d.ts","sourceRoot":"","sources":["../../../../src/switch/stories/switch-disabled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAOd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "5.0.0
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -424,7 +424,7 @@
|
|
|
424
424
|
"@tanstack/react-table": "8.21.3",
|
|
425
425
|
"react": ">=19.0.0",
|
|
426
426
|
"react-dom": ">=19.0.0",
|
|
427
|
-
"@neo4j-ndl/base": "^5.0.0
|
|
427
|
+
"@neo4j-ndl/base": "^5.0.0"
|
|
428
428
|
},
|
|
429
429
|
"dependencies": {
|
|
430
430
|
"@dnd-kit/core": "6.3.1",
|
|
@@ -452,8 +452,7 @@
|
|
|
452
452
|
"temporal-polyfill": "1.0.1",
|
|
453
453
|
"tinycolor2": "1.6.0",
|
|
454
454
|
"usehooks-ts": "3.1.1",
|
|
455
|
-
"zod": "4.3.6"
|
|
456
|
-
"@neo4j-ndl/base": "5.0.0-alpha.0.3d763f7"
|
|
455
|
+
"zod": "4.3.6"
|
|
457
456
|
},
|
|
458
457
|
"scripts": {
|
|
459
458
|
"generate-component": "node ./scripts/component-generator.js",
|
|
@@ -464,7 +463,8 @@
|
|
|
464
463
|
"check:exports": "node ./scripts/generate-exports.js --check",
|
|
465
464
|
"pretest": "pnpm run lint && pnpm run check:exports",
|
|
466
465
|
"test": "pnpm run test:unit && pnpm run test:playwright",
|
|
467
|
-
"test:unit": "pnpm exec vitest --run --
|
|
466
|
+
"test:unit": "pnpm exec vitest --run --exclude node_modules",
|
|
467
|
+
"typecheck": "pnpm exec tsc -p tsconfig.tests.json",
|
|
468
468
|
"test:playwright": "NODE_OPTIONS=--max-old-space-size=8192 pnpm exec playwright test --grep-invert '@happo|@visual-regression'",
|
|
469
469
|
"test:visual-regression": "pnpm exec playwright test dropdown-button --grep '@visual-regression' --update-snapshots=changed",
|
|
470
470
|
"test:visual-regression:check": "pnpm exec playwright test --grep '@visual-regression'",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
name: ndl-react
|
|
3
3
|
metadata:
|
|
4
4
|
package: '@neo4j-ndl/react'
|
|
5
|
-
version: '5.0.0
|
|
5
|
+
version: '5.0.0'
|
|
6
6
|
description: >-
|
|
7
7
|
Build and edit UI with the Neo4j Needle React design system
|
|
8
8
|
(@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
|
|
@@ -15,7 +15,7 @@ description: >-
|
|
|
15
15
|
|
|
16
16
|
# Neo4j Needle (@neo4j-ndl/react)
|
|
17
17
|
|
|
18
|
-
> 📌 Shipped with `@neo4j-ndl/react` v5.0.0
|
|
18
|
+
> 📌 Shipped with `@neo4j-ndl/react` v5.0.0. Once installed into your repo (e.g. via
|
|
19
19
|
> `npx skills add`) this folder is detached from the package — the installed
|
|
20
20
|
> package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
|
|
21
21
|
> truth.
|
|
@@ -147,7 +147,7 @@ Import from `@neo4j-ndl/react`.
|
|
|
147
147
|
| `Breadcrumbs` | [components/breadcrumbs.md](components/breadcrumbs.md) | ✅ | 4 |
|
|
148
148
|
| `Checkbox` | [components/checkbox.md](components/checkbox.md) | ✅ | 9 |
|
|
149
149
|
| `CheckboxGroup` | [components/checkbox-group.md](components/checkbox-group.md) | ✅ | 6 |
|
|
150
|
-
| `CleanIconButton` | [components/clean-icon-button.md](components/clean-icon-button.md) | ✅ |
|
|
150
|
+
| `CleanIconButton` | [components/clean-icon-button.md](components/clean-icon-button.md) | ✅ | 7 |
|
|
151
151
|
| `ClipboardButton` | [components/clipboard-button.md](components/clipboard-button.md) | | 7 |
|
|
152
152
|
| `Code` | [components/code.md](components/code.md) | ✅ | 2 |
|
|
153
153
|
| `CodeBlock` | [components/code-block.md](components/code-block.md) | | 8 |
|
|
@@ -70,100 +70,6 @@ const Component = () => {
|
|
|
70
70
|
export default Component;
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
### All
|
|
74
|
-
|
|
75
|
-
```tsx
|
|
76
|
-
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
77
|
-
|
|
78
|
-
import { IconButton, Typography } from '@neo4j-ndl/react';
|
|
79
|
-
import { ArrowDownTrayIconOutline } from '@neo4j-ndl/react/icons';
|
|
80
|
-
|
|
81
|
-
const Component = () => {
|
|
82
|
-
return (
|
|
83
|
-
<div className="grid grid-cols-[auto_auto_auto_auto] gap-token-32 place-items-center w-fit">
|
|
84
|
-
{/* size row */}
|
|
85
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
86
|
-
Size
|
|
87
|
-
</Typography>
|
|
88
|
-
<IconButton description="Size example" size="small">
|
|
89
|
-
Small
|
|
90
|
-
</IconButton>
|
|
91
|
-
<IconButton description="Size example" size="medium">
|
|
92
|
-
Medium
|
|
93
|
-
</IconButton>
|
|
94
|
-
<IconButton description="Size example" size="large">
|
|
95
|
-
Large
|
|
96
|
-
</IconButton>
|
|
97
|
-
|
|
98
|
-
{/* tone row */}
|
|
99
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
100
|
-
Tone
|
|
101
|
-
</Typography>
|
|
102
|
-
<IconButton description="Grouped example" tone="default">
|
|
103
|
-
<ArrowDownTrayIconOutline />
|
|
104
|
-
</IconButton>
|
|
105
|
-
<IconButton description="Grouped example" tone="danger">
|
|
106
|
-
<ArrowDownTrayIconOutline />
|
|
107
|
-
</IconButton>
|
|
108
|
-
<div></div>
|
|
109
|
-
<div></div>
|
|
110
|
-
|
|
111
|
-
{/* isDisabled Row */}
|
|
112
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
113
|
-
Disabled
|
|
114
|
-
</Typography>
|
|
115
|
-
<IconButton description="Disabled example" isDisabled>
|
|
116
|
-
<ArrowDownTrayIconOutline />
|
|
117
|
-
</IconButton>
|
|
118
|
-
<div></div>
|
|
119
|
-
<div></div>
|
|
120
|
-
|
|
121
|
-
{/* isLoading Row */}
|
|
122
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
123
|
-
Loading
|
|
124
|
-
</Typography>
|
|
125
|
-
<IconButton description="Loading example" isLoading>
|
|
126
|
-
<ArrowDownTrayIconOutline />
|
|
127
|
-
</IconButton>
|
|
128
|
-
<div></div>
|
|
129
|
-
<div></div>
|
|
130
|
-
|
|
131
|
-
{/* isFloating row */}
|
|
132
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
133
|
-
Floating
|
|
134
|
-
</Typography>
|
|
135
|
-
<IconButton description="Floating example" isFloating>
|
|
136
|
-
<ArrowDownTrayIconOutline />
|
|
137
|
-
</IconButton>
|
|
138
|
-
<div></div>
|
|
139
|
-
<div></div>
|
|
140
|
-
|
|
141
|
-
{/* isGrouped row */}
|
|
142
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
143
|
-
Grouped
|
|
144
|
-
</Typography>
|
|
145
|
-
<IconButton description="Grouped example" isGrouped>
|
|
146
|
-
<ArrowDownTrayIconOutline />
|
|
147
|
-
</IconButton>
|
|
148
|
-
<div></div>
|
|
149
|
-
<div></div>
|
|
150
|
-
|
|
151
|
-
{/* isActive row */}
|
|
152
|
-
<Typography variant="subheading-small" className="justify-self-end">
|
|
153
|
-
Active
|
|
154
|
-
</Typography>
|
|
155
|
-
<IconButton description="Active example" isActive>
|
|
156
|
-
<ArrowDownTrayIconOutline />
|
|
157
|
-
</IconButton>
|
|
158
|
-
<div></div>
|
|
159
|
-
<div></div>
|
|
160
|
-
</div>
|
|
161
|
-
);
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
export default Component;
|
|
165
|
-
```
|
|
166
|
-
|
|
167
73
|
### Disabled
|
|
168
74
|
|
|
169
75
|
```tsx
|
|
@@ -76,7 +76,12 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
|
76
76
|
import { Switch } from '@neo4j-ndl/react';
|
|
77
77
|
|
|
78
78
|
const Component = () => {
|
|
79
|
-
return
|
|
79
|
+
return (
|
|
80
|
+
<div className="flex flex-col gap-token-8">
|
|
81
|
+
<Switch label="Disabled off" isDisabled />
|
|
82
|
+
<Switch label="Disabled on" isChecked isDisabled />
|
|
83
|
+
</div>
|
|
84
|
+
);
|
|
80
85
|
};
|
|
81
86
|
|
|
82
87
|
export default Component;
|