Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(react): add Navbar component #28

Merged
merged 14 commits into from
Feb 15, 2023
Merged

feat(react): add Navbar component #28

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4fe2a05
chore(react-icons): remove `fill` from paths
brionmario Feb 14, 2023
88a4872
chore(react-icons): rename arg doc comment
brionmario Feb 14, 2023
6c32d6f
chore: bump UI configs
brionmario Feb 14, 2023
0c0d918
chore(primitives): update icons
brionmario Feb 14, 2023
05da076
chore(react): make stories inline
brionmario Feb 14, 2023
d64cc62
chore(react): extend `Box` to support isomorphism
brionmario Feb 14, 2023
e212535
chore(react): extend `Typography` to support isomorphism
brionmario Feb 14, 2023
0f0c08e
feat(react): add `Navbar` component
brionmario Feb 14, 2023
ff1907e
chore(react): augment theme
brionmario Feb 14, 2023
1f4b955
chore(react): add story conf and exports
brionmario Feb 14, 2023
8d4342f
fix(react): fix gradient variation fill
brionmario Feb 14, 2023
89f5025
core(primitives): fix lint issue
brionmario Feb 14, 2023
018f5c6
chore(react): fix lint warnings
brionmario Feb 15, 2023
5eb1e52
chore(react): update snapshots
brionmario Feb 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions examples/multi-brand-identity/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/logger/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/primitives/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions packages/primitives/scripts/build-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
36 changes: 36 additions & 0 deletions packages/primitives/src/icons/console-user-thick-18.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 0 additions & 34 deletions packages/primitives/src/icons/home-filled-16.svg
View file
Open in desktop

This file was deleted.

30 changes: 30 additions & 0 deletions packages/primitives/src/icons/home-filled-18.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 14 additions & 7 deletions packages/react-icons/scripts/build-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,12 @@ const pascalCase = str => str.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCa
* @param node - 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`);
}
Expand All @@ -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);
Expand All @@ -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}`);
};

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/react/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ addParameters({
sort: 'requiredFirst',
},
docs: {
inlineStories: true,
inlineStories: false,
container: (props: PropsWithChildren<DocsContainerProps>): any => {
const {context, children} = props;

Expand Down
4 changes: 4 additions & 0 deletions packages/react/.storybook/story-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export type Stories =
| 'ListItemText'
| 'Menu'
| 'MenuItem'
| 'Navbar'
| 'SignIn'
| 'TextField'
| 'Toolbar'
Expand Down Expand Up @@ -144,6 +145,9 @@ const StoryConfig: StorybookConfig = {
MenuItem: {
hierarchy: `${StorybookCategories.Navigation}/Menu Item`,
},
Navbar: {
hierarchy: `${StorybookCategories.Navigation}/Navbar`,
},
List: {
hierarchy: `${StorybookCategories.DataDisplay}/List`,
},
Expand Down
7 changes: 4 additions & 3 deletions packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/ActionCard/action-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -34,7 +34,7 @@
}

.description {
color: #8D91A3;
color: "#8D91A3";
font-size: 13px;
font-style: normal;
font-weight: 400;
Expand Down
8 changes: 5 additions & 3 deletions packages/react/src/components/Box/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<C extends ElementType = ElementType> = {
component?: C;
} & Omit<MuiBoxProps<C>, 'component'>;

const COMPONENT_NAME: string = 'Box';

const Box: FC<BoxProps> & WithWrapperProps = (props: BoxProps): ReactElement => {
const Box: FC<BoxProps> & WithWrapperProps = <C extends ElementType>(props: BoxProps<C>): ReactElement => {
const {className, ...rest} = props;

const classes: string = clsx('oxygen-box', className);
Expand Down
Loading