From 4fe2a050b9c54195a24e52b8bdf6d87df683390c Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 14 Feb 2023 11:16:39 +0530 Subject: [PATCH 01/14] chore(react-icons): remove `fill` from paths --- packages/react-icons/scripts/build-icons.js | 23 ++++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/react-icons/scripts/build-icons.js b/packages/react-icons/scripts/build-icons.js index fa4b6306..fde3af01 100755 --- a/packages/react-icons/scripts/build-icons.js +++ b/packages/react-icons/scripts/build-icons.js @@ -47,13 +47,15 @@ const pascalCase = str => str.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCa /** * Convert a given node from an svg AST into a JS AST of JSX Elements. - * @param node - Element. + * @param nodeClone - Element. */ const svgToJSX = node => { - if (node.type === 'element') { - const children = node.children.map(svgToJSX); + const nodeClone = {...node}; - if (node.name === 'svg') { + if (nodeClone.type === 'element') { + const children = nodeClone.children.map(svgToJSX); + + if (nodeClone.name === 'svg') { if (children.length === 0) { throw new Error(`No children available for icon`); } @@ -65,14 +67,19 @@ const svgToJSX = node => { return children[0]; } - const attrs = Object.entries(node.attributes).map(([key, value]) => { + // Remove `fill` from paths so that the SVGs could be colored dynamically. + if (nodeClone.name === 'path') { + nodeClone.attributes.fill = ''; + } + + const attrs = Object.entries(nodeClone.attributes).map(([key, value]) => { if (typeof value !== 'string') { throw new Error(`Unknown value type: ${value}`); } return t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(value)); }); - const openingElement = t.jsxOpeningElement(t.jsxIdentifier(node.name), attrs, children.length === 0); - const closingElement = t.jsxClosingElement(t.jsxIdentifier(node.name)); + const openingElement = t.jsxOpeningElement(t.jsxIdentifier(nodeClone.name), attrs, children.length === 0); + const closingElement = t.jsxClosingElement(t.jsxIdentifier(nodeClone.name)); if (children.length > 0) { return t.jsxElement(openingElement, closingElement, children, false); @@ -81,7 +88,7 @@ const svgToJSX = node => { return t.jsxElement(openingElement, closingElement, [], true); } - throw new Error(`Unknown type: ${node.type}`); + throw new Error(`Unknown type: ${nodeClone.type}`); }; /** From 88a4872bfc6e3a624d58f914f9bb20a550deb437 Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 14 Feb 2023 13:29:09 +0530 Subject: [PATCH 02/14] chore(react-icons): rename arg doc comment --- packages/react-icons/scripts/build-icons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-icons/scripts/build-icons.js b/packages/react-icons/scripts/build-icons.js index fde3af01..ea387d2e 100755 --- a/packages/react-icons/scripts/build-icons.js +++ b/packages/react-icons/scripts/build-icons.js @@ -47,7 +47,7 @@ const pascalCase = str => str.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCa /** * Convert a given node from an svg AST into a JS AST of JSX Elements. - * @param nodeClone - Element. + * @param node - Element. */ const svgToJSX = node => { const nodeClone = {...node}; From 6c32d6f65a86d9c1a6273b1c8a3dbe0d61e58ab0 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:18:43 +0530 Subject: [PATCH 03/14] chore: bump UI configs --- docs/package.json | 6 +- examples/multi-brand-identity/package.json | 6 +- packages/logger/package.json | 4 +- packages/primitives/package.json | 4 +- packages/react/package.json | 7 +- pnpm-lock.yaml | 96 +++++++++++----------- 6 files changed, 63 insertions(+), 60 deletions(-) diff --git a/docs/package.json b/docs/package.json index 2fdc2038..3e0f0fa5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,9 +39,9 @@ "typescript": "4.9.3" }, "devDependencies": { - "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", + "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", "stylelint": "^15.1.0" }, "private": true diff --git a/examples/multi-brand-identity/package.json b/examples/multi-brand-identity/package.json index 0efe81ec..d929243a 100644 --- a/examples/multi-brand-identity/package.json +++ b/examples/multi-brand-identity/package.json @@ -44,9 +44,9 @@ "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", "@types/testing-library__jest-dom": "^5.14.5", - "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", + "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", "eslint": "8.25.0", "jest": "29.0.3", "jest-environment-jsdom": "^29.4.1", diff --git a/packages/logger/package.json b/packages/logger/package.json index a995ab8e..4863c15a 100644 --- a/packages/logger/package.json +++ b/packages/logger/package.json @@ -47,8 +47,8 @@ "@types/chalk": "^2.2.0", "@types/jest": "^29.2.3", "@types/node": "^18.11.18", - "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", + "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", "babel-jest": "^29.3.1", "eslint": "8.25.0", "jest": "29.0.3", diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 2fe6644b..157da6db 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -34,8 +34,8 @@ "@oxygen-ui/logger": "*", "@types/jest": "^29.2.3", "@types/node": "^18.11.18", - "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", + "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", "cheerio": "1.0.0-rc.12", "eslint": "8.25.0", "fs-extra": "^11.1.0", diff --git a/packages/react/package.json b/packages/react/package.json index 56455e19..0682bac3 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -63,6 +63,7 @@ "@storybook/builder-webpack4": "^6.5.13", "@storybook/builder-webpack5": "^6.5.13", "@storybook/manager-webpack4": "^6.5.13", + "@storybook/client-api": "^6.5.13", "@storybook/manager-webpack5": "^6.5.13", "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^6.5.13", @@ -75,9 +76,9 @@ "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", "@types/testing-library__jest-dom": "^5.14.5", - "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", - "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3", + "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", + "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf", "babel-jest": "^29.3.1", "babel-loader": "^8.3.0", "eslint": "8.25.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a5682350..f569fcfa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,9 +16,9 @@ importers: '@types/node': 18.11.10 '@types/react': 18.0.25 '@types/react-dom': 18.0.9 - '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/stylelint-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 + '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/stylelint-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf clsx: ^1.2.1 eslint: 8.25.0 next: 13.0.6 @@ -40,9 +40,9 @@ importers: react-dom: 18.2.0_react@18.2.0 typescript: 4.9.3 devDependencies: - '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_5ldjemcacbssrrv7slgrertrym' - '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_dwcmg7j3s65kdkfd55lzy6diba' - '@wso2/stylelint-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_dz3bkbuercmey743gg5fqm3kv4' + '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_5ldjemcacbssrrv7slgrertrym' + '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_dwcmg7j3s65kdkfd55lzy6diba' + '@wso2/stylelint-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_dz3bkbuercmey743gg5fqm3kv4' stylelint: 15.1.0 examples/multi-brand-identity: @@ -59,9 +59,9 @@ importers: '@types/react': ^18.0.25 '@types/react-dom': ^18.0.9 '@types/testing-library__jest-dom': ^5.14.5 - '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/stylelint-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 + '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/stylelint-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf eslint: 8.25.0 jest: 29.0.3 jest-environment-jsdom: ^29.4.1 @@ -89,9 +89,9 @@ importers: '@types/react': 18.0.26 '@types/react-dom': 18.0.9 '@types/testing-library__jest-dom': 5.14.5 - '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_o7md7g7vewlpn7zk2pfnybp6ie' - '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_2gbcgqmzq2pxiocqw2qs7hdeqe' - '@wso2/stylelint-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_6zacs3t2hjbxd3a2xfq5cu32oa' + '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_o7md7g7vewlpn7zk2pfnybp6ie' + '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_2gbcgqmzq2pxiocqw2qs7hdeqe' + '@wso2/stylelint-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_6zacs3t2hjbxd3a2xfq5cu32oa' eslint: 8.25.0 jest: 29.0.3_@types+node@16.18.9 jest-environment-jsdom: 29.4.1 @@ -114,8 +114,8 @@ importers: '@types/chalk': ^2.2.0 '@types/jest': ^29.2.3 '@types/node': ^18.11.18 - '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 + '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf babel-jest: ^29.3.1 chalk: ^5.2.0 eslint: 8.25.0 @@ -142,8 +142,8 @@ importers: '@types/chalk': 2.2.0 '@types/jest': 29.2.5 '@types/node': 18.11.18 - '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_o7md7g7vewlpn7zk2pfnybp6ie' - '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_2gbcgqmzq2pxiocqw2qs7hdeqe' + '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_o7md7g7vewlpn7zk2pfnybp6ie' + '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_2gbcgqmzq2pxiocqw2qs7hdeqe' babel-jest: 29.3.1_@babel+core@7.20.5 eslint: 8.25.0 jest: 29.0.3_zfha7dvnw4nti6zkbsmhmn6xo4 @@ -164,8 +164,8 @@ importers: '@oxygen-ui/logger': '*' '@types/jest': ^29.2.3 '@types/node': ^18.11.18 - '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 + '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf cheerio: 1.0.0-rc.12 eslint: 8.25.0 fs-extra: ^11.1.0 @@ -183,8 +183,8 @@ importers: '@oxygen-ui/logger': link:../logger '@types/jest': 29.2.5 '@types/node': 18.11.18 - '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_o7md7g7vewlpn7zk2pfnybp6ie' - '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_2gbcgqmzq2pxiocqw2qs7hdeqe' + '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_o7md7g7vewlpn7zk2pfnybp6ie' + '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_2gbcgqmzq2pxiocqw2qs7hdeqe' cheerio: 1.0.0-rc.12 eslint: 8.25.0 fs-extra: 11.1.0 @@ -221,6 +221,7 @@ importers: '@storybook/addon-links': ^6.5.13 '@storybook/builder-webpack4': ^6.5.13 '@storybook/builder-webpack5': ^6.5.13 + '@storybook/client-api': ^6.5.13 '@storybook/manager-webpack4': ^6.5.13 '@storybook/manager-webpack5': ^6.5.13 '@storybook/preset-scss': ^1.0.3 @@ -234,9 +235,9 @@ importers: '@types/react': ^18.0.25 '@types/react-dom': ^18.0.9 '@types/testing-library__jest-dom': ^5.14.5 - '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 - '@wso2/stylelint-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3 + '@wso2/eslint-plugin': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/prettier-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf + '@wso2/stylelint-config': https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf babel-jest: ^29.3.1 babel-loader: ^8.3.0 clsx: ^1.2.1 @@ -289,6 +290,7 @@ importers: '@storybook/addon-links': 6.5.14_biqbaboplfbrettd7655fr4n2y '@storybook/builder-webpack4': 6.5.14_rnbgwwfw7s5epasqtcldiigo74 '@storybook/builder-webpack5': 6.5.14_rnbgwwfw7s5epasqtcldiigo74 + '@storybook/client-api': 6.5.14_biqbaboplfbrettd7655fr4n2y '@storybook/manager-webpack4': 6.5.14_rnbgwwfw7s5epasqtcldiigo74 '@storybook/manager-webpack5': 6.5.14_rnbgwwfw7s5epasqtcldiigo74 '@storybook/preset-scss': 1.0.3_sass-loader@13.2.0 @@ -302,9 +304,9 @@ importers: '@types/react': 18.0.26 '@types/react-dom': 18.0.9 '@types/testing-library__jest-dom': 5.14.5 - '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_o7md7g7vewlpn7zk2pfnybp6ie' - '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_2gbcgqmzq2pxiocqw2qs7hdeqe' - '@wso2/stylelint-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_hygdmsquzz5vupc3jpyt6j3qfy' + '@wso2/eslint-plugin': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_o7md7g7vewlpn7zk2pfnybp6ie' + '@wso2/prettier-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_2gbcgqmzq2pxiocqw2qs7hdeqe' + '@wso2/stylelint-config': '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_hygdmsquzz5vupc3jpyt6j3qfy' babel-jest: 29.3.1_@babel+core@7.20.5 babel-loader: 8.3.0_@babel+core@7.20.5 eslint: 8.25.0 @@ -21593,9 +21595,9 @@ packages: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_5ldjemcacbssrrv7slgrertrym': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_5ldjemcacbssrrv7slgrertrym': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/eslint-plugin' version: 0.1.0 engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} @@ -21638,9 +21640,9 @@ packages: - supports-color dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_o7md7g7vewlpn7zk2pfnybp6ie': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf_o7md7g7vewlpn7zk2pfnybp6ie': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/eslint-plugin' version: 0.1.0 engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} @@ -21728,9 +21730,9 @@ packages: - supports-color dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_2gbcgqmzq2pxiocqw2qs7hdeqe': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_2gbcgqmzq2pxiocqw2qs7hdeqe': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/prettier-config' version: 0.1.0 engines: {node: '>=14.0.0'} @@ -21745,9 +21747,9 @@ packages: typescript: 4.9.4 dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_dwcmg7j3s65kdkfd55lzy6diba': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_dwcmg7j3s65kdkfd55lzy6diba': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/prettier-config' version: 0.1.0 engines: {node: '>=14.0.0'} @@ -21779,9 +21781,9 @@ packages: typescript: 4.9.4 dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_6zacs3t2hjbxd3a2xfq5cu32oa': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_6zacs3t2hjbxd3a2xfq5cu32oa': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/stylelint-config' version: 0.1.0 engines: {node: '>=14.0.0'} @@ -21800,9 +21802,9 @@ packages: - postcss dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_dz3bkbuercmey743gg5fqm3kv4': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_dz3bkbuercmey743gg5fqm3kv4': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/stylelint-config' version: 0.1.0 engines: {node: '>=14.0.0'} @@ -21821,9 +21823,9 @@ packages: - postcss dev: true - '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3_hygdmsquzz5vupc3jpyt6j3qfy': - resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3} - id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3' + '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf_hygdmsquzz5vupc3jpyt6j3qfy': + resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf} + id: '@gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b03ad37027ac05bc5791f168962d8a6d66439ddf' name: '@wso2/stylelint-config' version: 0.1.0 engines: {node: '>=14.0.0'} From 0c0d918de7a4d7bb0bf83fbc36a35c120ebbea82 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:19:00 +0530 Subject: [PATCH 04/14] chore(primitives): update icons --- .../src/icons/console-user-thick-18.svg | 36 +++++++++++++++++++ .../primitives/src/icons/home-filled-16.svg | 34 ------------------ .../primitives/src/icons/home-filled-18.svg | 30 ++++++++++++++++ 3 files changed, 66 insertions(+), 34 deletions(-) create mode 100644 packages/primitives/src/icons/console-user-thick-18.svg delete mode 100644 packages/primitives/src/icons/home-filled-16.svg create mode 100644 packages/primitives/src/icons/home-filled-18.svg diff --git a/packages/primitives/src/icons/console-user-thick-18.svg b/packages/primitives/src/icons/console-user-thick-18.svg new file mode 100644 index 00000000..3874e7ea --- /dev/null +++ b/packages/primitives/src/icons/console-user-thick-18.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + diff --git a/packages/primitives/src/icons/home-filled-16.svg b/packages/primitives/src/icons/home-filled-16.svg deleted file mode 100644 index 829b0bad..00000000 --- a/packages/primitives/src/icons/home-filled-16.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/primitives/src/icons/home-filled-18.svg b/packages/primitives/src/icons/home-filled-18.svg new file mode 100644 index 00000000..818df458 --- /dev/null +++ b/packages/primitives/src/icons/home-filled-18.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + From 05da076575a2ff6de38a71390d700085b6cb4393 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:19:22 +0530 Subject: [PATCH 05/14] chore(react): make stories inline --- packages/react/.storybook/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx index 474d2b2c..707e4a58 100644 --- a/packages/react/.storybook/preview.tsx +++ b/packages/react/.storybook/preview.tsx @@ -64,7 +64,7 @@ addParameters({ sort: 'requiredFirst', }, docs: { - inlineStories: true, + inlineStories: false, container: (props: PropsWithChildren): any => { const {context, children} = props; From d64cc62ed1f54b33126bba2bbb44249a771fe90c Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:20:20 +0530 Subject: [PATCH 06/14] chore(react): extend `Box` to support isomorphism --- packages/react/src/components/Box/Box.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 61b31bb8..22d0ef50 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -18,15 +18,17 @@ import MuiBox, {BoxProps as MuiBoxProps} from '@mui/material/Box'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {ElementType, FC, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; -export type BoxProps = MuiBoxProps; +export type BoxProps = { + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Box'; -const Box: FC & WithWrapperProps = (props: BoxProps): ReactElement => { +const Box: FC & WithWrapperProps = (props: BoxProps): ReactElement => { const {className, ...rest} = props; const classes: string = clsx('oxygen-box', className); From e212535e69301226666d7946eafb967a04b71bb5 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:20:32 +0530 Subject: [PATCH 07/14] chore(react): extend `Typography` to support isomorphism --- .../react/src/components/Typography/Typography.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx index ec373c10..810610cd 100644 --- a/packages/react/src/components/Typography/Typography.tsx +++ b/packages/react/src/components/Typography/Typography.tsx @@ -18,16 +18,20 @@ import MuiTypography, {TypographyProps as MuiTypographyProps} from '@mui/material/Typography'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {ElementType, FC, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; import './typography.scss'; -export type TypographyProps = MuiTypographyProps; +export type TypographyProps = { + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Typography'; -const Typography: FC & WithWrapperProps = (props: TypographyProps): ReactElement => { +const Typography: FC & WithWrapperProps = ( + props: TypographyProps, +): ReactElement => { const {className, ...rest} = props; const classes: string = clsx('oxygen-typography', className); From 0f0c08e3dc8b0ec65f26496087d007a3651f7893 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:29:41 +0530 Subject: [PATCH 08/14] feat(react): add `Navbar` component --- .../src/components/Navbar/Navbar.stories.mdx | 101 ++++++++++++ .../react/src/components/Navbar/Navbar.tsx | 144 +++++++++++++++++ .../Navbar/__tests__/Navbar.test.tsx | 32 ++++ .../__snapshots__/Navbar.test.tsx.snap | 50 ++++++ packages/react/src/components/Navbar/index.ts | 20 +++ .../react/src/components/Navbar/navbar.scss | 151 ++++++++++++++++++ 6 files changed, 498 insertions(+) create mode 100644 packages/react/src/components/Navbar/Navbar.stories.mdx create mode 100644 packages/react/src/components/Navbar/Navbar.tsx create mode 100644 packages/react/src/components/Navbar/__tests__/Navbar.test.tsx create mode 100644 packages/react/src/components/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap create mode 100644 packages/react/src/components/Navbar/index.ts create mode 100644 packages/react/src/components/Navbar/navbar.scss diff --git a/packages/react/src/components/Navbar/Navbar.stories.mdx b/packages/react/src/components/Navbar/Navbar.stories.mdx new file mode 100644 index 00000000..5d47eccc --- /dev/null +++ b/packages/react/src/components/Navbar/Navbar.stories.mdx @@ -0,0 +1,101 @@ +import {ConsoleUserThickIcon, HomeFilledIcon, LockIcon, PreferencesIcon, LanguagesIcon} from '@oxygen-ui/react-icons'; +import {useArgs} from '@storybook/client-api'; +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Navbar from './Navbar.tsx'; + +export const meta = { + component: Navbar, + title: StoryConfig.Navbar.hierarchy, +}; + + + +export const navbarItems = [ + [ + { + icon: , + name: 'Overview', + selected: true, + }, + { + icon: , + name: 'Profile Info', + }, + { + icon: , + name: 'Security', + }, + ], + [ + { + icon: , + name: 'Language', + }, + { + icon: , + name: 'Preferences', + }, + ], +]; + +export const Template = args => { + const [runtimeArgs, updateArgs] = useArgs(); + return ( + updateArgs({...runtimeArgs, open: false})} + onOpen={() => updateArgs({...runtimeArgs, open: true})} + {...args} + /> + ); +}; + +# Navbar + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +Use typography to present your design and content as clearly and efficiently as possible. + + + {Template.bind({})} + + +## Props + + + +## Usage + +Import and use the `Navbar` component in your components as follows. + + + ); +}`} +/> + +## Variants + +### Gradient + +Navbar with a gradient as the background color. + + + + {Template.bind({})} + + diff --git a/packages/react/src/components/Navbar/Navbar.tsx b/packages/react/src/components/Navbar/Navbar.tsx new file mode 100644 index 00000000..5ba6ce6e --- /dev/null +++ b/packages/react/src/components/Navbar/Navbar.tsx @@ -0,0 +1,144 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import {HamburgerIcon} from '@oxygen-ui/react-icons'; +import clsx from 'clsx'; +import {FC, ReactElement, ReactNode, MouseEvent, Fragment} from 'react'; +import {WithWrapperProps, Theme} from '../../models'; +import {useTheme} from '../../theme'; +import {composeComponentDisplayName} from '../../utils'; +import Divider from '../Divider'; +import Drawer, {DrawerProps} from '../Drawer'; +import IconButton from '../IconButton'; +import List from '../List'; +import ListItem, {ListItemProps} from '../ListItem'; +import ListItemButton from '../ListItemButton'; +import ListItemIcon from '../ListItemIcon'; +import ListItemText from '../ListItemText'; +import './navbar.scss'; + +export interface NavbarProps extends DrawerProps { + /** + * Is the Navbar collapsible. If `true`, a hamburger will be shown. + */ + collapsible?: boolean; + /** + * The fill color variant of the Navbar. + */ + fill?: 'gradient' | 'solid'; + /** + * Set of Navbar Items. + */ + items?: NavbarItem[][]; + /** + * Callback to be called when the hamburger is clicked. + */ + onOpen?: () => void; +} + +export interface NavbarItem extends ListItemProps { + /** + * Icon for the Navbar item. + * @example + */ + icon?: ReactNode; + /** + * Unique id for the item. + */ + id?: string; + /** + * Name to display on the UI. + * @example Overview. + */ + name: ReactNode; + /** + * Is the item selected? + * @example true | false. + */ + selected?: boolean; +} + +const COMPONENT_NAME: string = 'Navbar'; + +const Navbar: FC & WithWrapperProps = (props: NavbarProps): ReactElement => { + const {className, open, fill, onClose, items, collapsible, onOpen, ...rest} = props; + + const theme: Theme = useTheme(); + const classes: string = clsx( + 'oxygen-navbar', + { + collapsible, + [`${fill}`]: fill, + fill, + open, + }, + className, + ); + + const handleCollapsibleHamburgerClick = (e: MouseEvent): void => { + if (open) { + onClose(e, null); + return; + } + + onOpen(); + }; + + return ( + + {collapsible && ( + <> +
+ + {theme.direction === 'rtl' ? : } + +
+ + + )} + {items !== undefined && Array.isArray(items) && ( + + {items.map((itemSet: NavbarItem[], itemSetIndex: number) => ( + // eslint-disable-next-line react/no-array-index-key + + {itemSet.map(({icon, id, selected, name}: NavbarItem) => ( + + + {icon} + + + + ))} + {items.length > 1 && itemSetIndex !== items.length - 1 && ( + + )} + + ))} + + )} + + ); +}; + +Navbar.displayName = composeComponentDisplayName(COMPONENT_NAME); +Navbar.muiName = COMPONENT_NAME; +Navbar.defaultProps = { + collapsible: true, +}; + +export default Navbar; diff --git a/packages/react/src/components/Navbar/__tests__/Navbar.test.tsx b/packages/react/src/components/Navbar/__tests__/Navbar.test.tsx new file mode 100644 index 00000000..4b0d2273 --- /dev/null +++ b/packages/react/src/components/Navbar/__tests__/Navbar.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import {render} from '@unit-testing'; +import Navbar from '../Navbar'; + +describe('Navbar', () => { + it('should render successfully', () => { + const {baseElement} = render(); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap b/packages/react/src/components/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap new file mode 100644 index 00000000..0bea991b --- /dev/null +++ b/packages/react/src/components/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Navbar should match the snapshot 1`] = ` + +
+
+
+
+ +
+
+
+
+
+ +`; diff --git a/packages/react/src/components/Navbar/index.ts b/packages/react/src/components/Navbar/index.ts new file mode 100644 index 00000000..8892d48b --- /dev/null +++ b/packages/react/src/components/Navbar/index.ts @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export {default} from './Navbar'; +export type {NavbarProps} from './Navbar'; diff --git a/packages/react/src/components/Navbar/navbar.scss b/packages/react/src/components/Navbar/navbar.scss new file mode 100644 index 00000000..147568d9 --- /dev/null +++ b/packages/react/src/components/Navbar/navbar.scss @@ -0,0 +1,151 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +@mixin open { + width: var(--oxygen-customComponents-Navbar-properties-width); + transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms; + overflow-x: hidden; +} + +@mixin close { + width: calc(var(--oxygen-customComponents-Navbar-properties-mini-variant-width) + 1px); + transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms; + overflow-x: hidden; +} + +.oxygen-navbar { + width: var(--oxygen-customComponents-Navbar-properties-width); + flex-shrink: 0; + white-space: nowrap; + box-sizing: border-box; + + .MuiDrawer-paper { + background: var(--oxygen-palette-customComponents-Navbar-background); + } + + &:not(.open) { + @include close; + + .MuiDrawer-paper { + @include close; + } + } + + .oxygen-navbar-collapsible-hamburger { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 12px; + min-height: var(--oxygen-customComponents-Navbar-properties-min-height); + + .oxygen-icon-button { + height: 48px; + width: 48px; + } + } + + .oxygen-navbar-list-item { + display: block; + margin-top: 8px; + margin-bottom: 8px; + + .oxygen-navbar-list-item-button { + height: 56px; + justify-content: center; + padding-left: 20px; + padding-right: 20px; + margin-left: 8px; + margin-right: 8px; + border-radius: var(--oxygen-shape-borderRadius); + + .oxygen-navbar-list-item-icon { + min-width: 0; + margin-right: auto; + justify-content: center; + } + + .oxygen-navbar-list-item-text { + opacity: 0; + } + + &.selected { + background: var(--oxygen-palette-action-selected); + } + } + } + + &.open { + @include open; + + .MuiDrawer-paper { + @include open; + } + + .oxygen-navbar-list-item { + .oxygen-navbar-list-item-button { + justify-content: initial; + + .oxygen-navbar-list-item-icon { + margin-right: 24px; + } + + .oxygen-navbar-list-item-text { + opacity: 1; + } + } + } + } + + &.fill { + &.gradient { + .MuiDrawer-paper { + background: + linear-gradient( + 90deg, + var(--oxygen-palette-gradients-primary-stop1) 0%, + var(--oxygen-palette-gradients-primary-stop2) 100% + ); + } + + .oxygen-navbar-list-item { + .oxygen-navbar-list-item-button { + color: var(--oxygen-palette-common-white); + + svg { + fill: var(--oxygen-palette-common-white); + } + } + + &.selected { + .oxygen-navbar-list-item-button { + background: var(--oxygen-palette-common-white); + color: var(--oxygen-palette-primary-main); + + svg { + fill: var(--oxygen-palette-primary-main); + } + } + } + } + } + } + + .oxygen-navbar-list-item-divider { + margin: 10px; + } +} From ff1907eb56573680b5d6cbb5e0f424a58f57c845 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:30:01 +0530 Subject: [PATCH 09/14] chore(react): augment theme --- packages/react/src/models/theme.ts | 45 ++++++++++++++++++++++- packages/react/src/theme/default-theme.ts | 35 +++++++++++++++++- 2 files changed, 77 insertions(+), 3 deletions(-) diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts index c5ff60bc..eab6c25a 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -18,4 +18,47 @@ import {CssVarsTheme, Theme as MuiTheme} from '@mui/material/styles'; -export type Theme = Omit & CssVarsTheme; +/** + * Augment the Theme interface with the custom properties for the existing keys. + */ +declare module '@mui/material/styles' { + interface PaletteOptions { + customComponents: { + Navbar: { + background: string; + }; + }; + gradients: { + primary: { + stop1: string; + stop2: string; + }; + }; + } + interface Palette { + customComponents: { + Navbar: { + background: string; + }; + }; + gradients: { + primary: { + stop1: string; + stop2: string; + }; + }; + } +} + +/** + * Custom property augmentations. + */ +interface CustomTheme { + customComponents?: { + Navbar?: { + properties?: Record; + }; + }; +} + +export type Theme = Omit & CssVarsTheme & CustomTheme; diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index 4ac770d7..fce49a08 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -17,7 +17,6 @@ */ import {experimental_extendTheme as extendTheme} from '@mui/material/styles'; -import darkTokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/dark.tokens'; import lightTokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/tokens'; import {RecursivePartial, Theme} from '../models'; @@ -25,13 +24,36 @@ export const DEFAULT_THEME_OPTIONS: RecursivePartial = { colorSchemes: { dark: { palette: { + customComponents: { + Navbar: { + background: '#262626', + }, + }, + gradients: { + primary: { + stop1: '#FE8655', + stop2: '#FF6258', + }, + }, primary: { - main: darkTokens.OxygenOxygenColorsPrimaryDefault, + // TODO: Take this from `darkTokens.OxygenOxygenColorsPrimaryDefault`. ATM, colors are wrong. + main: '#ff5100', }, }, }, light: { palette: { + customComponents: { + Navbar: { + background: '#fbfbfb', + }, + }, + gradients: { + primary: { + stop1: '#FE8655', + stop2: '#FF6258', + }, + }, primary: { contrastText: '#fff', main: lightTokens.OxygenOxygenColorsPrimaryDefault, @@ -45,6 +67,15 @@ export const DEFAULT_THEME_OPTIONS: RecursivePartial = { }, }, cssVarPrefix: 'oxygen', + customComponents: { + Navbar: { + properties: { + 'min-height': '64px', + 'mini-variant-width': '72px', + width: '240px', + }, + }, + }, shape: { // TODO: Is `Lg` the default? borderRadius: lightTokens.OxygenOxygenBorderRadiusLg, From 1f4b9559bfb93351868fea83e9fb81d020a3162c Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:30:23 +0530 Subject: [PATCH 10/14] chore(react): add story conf and exports --- packages/react/.storybook/story-config.ts | 4 ++++ packages/react/src/components/index.ts | 3 +++ 2 files changed, 7 insertions(+) diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index ce2a607f..0b8e7e56 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -55,6 +55,7 @@ export type Stories = | 'ListItemText' | 'Menu' | 'MenuItem' + | 'Navbar' | 'SignIn' | 'TextField' | 'Toolbar' @@ -144,6 +145,9 @@ const StoryConfig: StorybookConfig = { MenuItem: { hierarchy: `${StorybookCategories.Navigation}/Menu Item`, }, + Navbar: { + hierarchy: `${StorybookCategories.Navigation}/Navbar`, + }, List: { hierarchy: `${StorybookCategories.DataDisplay}/List`, }, diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 021bd3e2..4bef0a91 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -58,6 +58,9 @@ export * from './ListItemIcon'; export {default as ListItemText} from './ListItemText'; export * from './ListItemText'; +export {default as Navbar} from './Navbar'; +export * from './Navbar'; + export {default as SignIn} from './SignIn'; export * from './SignIn'; From 8d4342ffe7fbf0f6172de404196b015ef509060f Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:42:45 +0530 Subject: [PATCH 11/14] fix(react): fix gradient variation fill --- packages/react/src/components/Navbar/navbar.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react/src/components/Navbar/navbar.scss b/packages/react/src/components/Navbar/navbar.scss index 147568d9..f1d7798d 100644 --- a/packages/react/src/components/Navbar/navbar.scss +++ b/packages/react/src/components/Navbar/navbar.scss @@ -122,6 +122,12 @@ ); } + .oxygen-navbar-collapsible-hamburger { + svg { + fill: var(--oxygen-palette-common-white); + } + } + .oxygen-navbar-list-item { .oxygen-navbar-list-item-button { color: var(--oxygen-palette-common-white); From 89f5025f9e9ea349f9d0e460068c576ea11cab86 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 02:54:49 +0530 Subject: [PATCH 12/14] core(primitives): fix lint issue --- packages/primitives/scripts/build-icons.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/primitives/scripts/build-icons.js b/packages/primitives/scripts/build-icons.js index 55c47f7b..de309703 100644 --- a/packages/primitives/scripts/build-icons.js +++ b/packages/primitives/scripts/build-icons.js @@ -38,8 +38,9 @@ const PATHS = { const iconFiles = fs.readdirSync(PATHS.source.icons); -const svgFilepaths = iconFiles.reduce((iconFilePaths, iconFile) => path.parse(iconFile).ext === '.svg' ? - (iconFilePaths.push(path.resolve(path.join(PATHS.source.icons, iconFile))), iconFilePaths) : iconFilePaths, []); +const svgFilepaths = iconFiles.reduce((iconFilePaths, iconFile) => (path.parse(iconFile).ext === '.svg' + ? (iconFilePaths.push(path.resolve(path.join(PATHS.source.icons, iconFile))), iconFilePaths) + : iconFilePaths), []); if (svgFilepaths.length === 0) { logger.error('No input SVG file(s) found'); From 018f5c63bb29786d5f1e1f22ef618d72e9e296dc Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 09:54:58 +0530 Subject: [PATCH 13/14] chore(react): fix lint warnings --- packages/react/src/components/ActionCard/action-card.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/ActionCard/action-card.scss b/packages/react/src/components/ActionCard/action-card.scss index 263d583f..49aef53e 100644 --- a/packages/react/src/components/ActionCard/action-card.scss +++ b/packages/react/src/components/ActionCard/action-card.scss @@ -18,7 +18,7 @@ .oxygen-action-card { border-radius: 8px; - box-shadow: 0px 2px 20px 0px #1d20281a; + box-shadow: 0 2px 20px 0 #1d20281a; padding: 24px 40px 24px 24px; &:hover { @@ -34,7 +34,7 @@ } .description { - color: #8D91A3; + color: "#8D91A3"; font-size: 13px; font-style: normal; font-weight: 400; From 5eb1e529601f8b3fae51e18adbfbdf9f99ecd806 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 11:48:02 +0530 Subject: [PATCH 14/14] chore(react): update snapshots --- .../__tests__/__snapshots__/ActionCard.test.tsx.snap | 6 +++--- .../Header/__tests__/__snapshots__/Header.test.tsx.snap | 1 + .../__tests__/__snapshots__/IconButton.test.tsx.snap | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap index 7441b83e..50ebd4ad 100644 --- a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap +++ b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ActionCard should match the snapshot 1`] = `
Secure your account by adding an extra layer of security

Configure additional authentications to sign in easily or to add an extra layer of security to your account.

diff --git a/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap index 5726c746..30d49d24 100644 --- a/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap +++ b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap @@ -58,6 +58,7 @@ exports[`Header should match the snapshot 1`] = ` >