From 50db8d50b640648c5a2d1c13021c76e9846325c2 Mon Sep 17 00:00:00 2001 From: Brion Date: Sun, 12 Feb 2023 23:36:14 +0530 Subject: [PATCH 1/5] feat(react): add `Box` component --- packages/react/.storybook/story-config.ts | 4 + .../react/src/components/Box/Box.stories.mdx | 74 +++++++++++++++++++ packages/react/src/components/Box/Box.tsx | 41 ++++++++++ .../src/components/Box/__tests__/Box.test.tsx | 32 ++++++++ .../__snapshots__/ListItem.test.tsx.snap | 13 ++++ packages/react/src/components/Box/box.scss | 19 +++++ packages/react/src/components/Box/index.ts | 20 +++++ 7 files changed, 203 insertions(+) create mode 100644 packages/react/src/components/Box/Box.stories.mdx create mode 100644 packages/react/src/components/Box/Box.tsx create mode 100644 packages/react/src/components/Box/__tests__/Box.test.tsx create mode 100644 packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap create mode 100644 packages/react/src/components/Box/box.scss create mode 100644 packages/react/src/components/Box/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 6bd18461..809673d0 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -32,6 +32,7 @@ enum StorybookCategories { export type Stories = | 'AppBar' + | 'Box' | 'Button' | 'ColorModeToggle' | 'Colors' @@ -79,6 +80,9 @@ const StoryConfig: StorybookConfig = { }, hierarchy: `${StorybookCategories.Surfaces}/AppBar`, }, + Box: { + hierarchy: `${StorybookCategories.Layout}/Box`, + }, Button: { hierarchy: `${StorybookCategories.Inputs}/Button`, }, diff --git a/packages/react/src/components/Box/Box.stories.mdx b/packages/react/src/components/Box/Box.stories.mdx new file mode 100644 index 00000000..1c2350aa --- /dev/null +++ b/packages/react/src/components/Box/Box.stories.mdx @@ -0,0 +1,74 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import Box from './Box.tsx'; + +export const meta = { + component: Box, + title: StoryConfig.Box.hierarchy, +}; + + + +export const Template = args => ; + +# Box + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `Box` component serves as a wrapper component for most of the CSS utility needs. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Box` component in your components as follows. + + + ); +}`} +/> diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx new file mode 100644 index 00000000..61b31bb8 --- /dev/null +++ b/packages/react/src/components/Box/Box.tsx @@ -0,0 +1,41 @@ +/** + * 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 MuiBox, {BoxProps as MuiBoxProps} from '@mui/material/Box'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type BoxProps = MuiBoxProps; + +const COMPONENT_NAME: string = 'Box'; + +const Box: FC & WithWrapperProps = (props: BoxProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-box', className); + + return ; +}; + +Box.displayName = composeComponentDisplayName(COMPONENT_NAME); +Box.muiName = COMPONENT_NAME; +Box.defaultProps = {}; + +export default Box; diff --git a/packages/react/src/components/Box/__tests__/Box.test.tsx b/packages/react/src/components/Box/__tests__/Box.test.tsx new file mode 100644 index 00000000..dcf9ea1a --- /dev/null +++ b/packages/react/src/components/Box/__tests__/Box.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 Box from '../Box'; + +describe('Box', () => { + 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/Box/__tests__/__snapshots__/ListItem.test.tsx.snap b/packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap new file mode 100644 index 00000000..c6671397 --- /dev/null +++ b/packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ListItem should match the snapshot 1`] = ` + +
+
  • + This is a list item +
    • +
    + +`; diff --git a/packages/react/src/components/Box/box.scss b/packages/react/src/components/Box/box.scss new file mode 100644 index 00000000..8cb74fb3 --- /dev/null +++ b/packages/react/src/components/Box/box.scss @@ -0,0 +1,19 @@ +/** + * 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. + */ + +.oxygen-box {} diff --git a/packages/react/src/components/Box/index.ts b/packages/react/src/components/Box/index.ts new file mode 100644 index 00000000..48d8175f --- /dev/null +++ b/packages/react/src/components/Box/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 './Box'; +export type {BoxProps} from './Box'; From b05bc8db64fd47272d4665c1324ef3d7e7ba3e5b Mon Sep 17 00:00:00 2001 From: Brion Date: Sun, 12 Feb 2023 23:39:44 +0530 Subject: [PATCH 2/5] chore(react): update `Box` snapshot --- .../__tests__/__snapshots__/ListItem.test.tsx.snap | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap diff --git a/packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap b/packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap deleted file mode 100644 index c6671397..00000000 --- a/packages/react/src/components/Box/__tests__/__snapshots__/ListItem.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ListItem should match the snapshot 1`] = ` - -
    -
  • - This is a list item -
    • -
    - -`; From ccc5fdfe1caa958c2a6579ddad22635b9e2672b1 Mon Sep 17 00:00:00 2001 From: Brion Date: Sun, 12 Feb 2023 23:41:38 +0530 Subject: [PATCH 3/5] chore(react): update `Box` snapshot --- .../Box/__tests__/__snapshots__/Box.test.tsx.snap | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 packages/react/src/components/Box/__tests__/__snapshots__/Box.test.tsx.snap diff --git a/packages/react/src/components/Box/__tests__/__snapshots__/Box.test.tsx.snap b/packages/react/src/components/Box/__tests__/__snapshots__/Box.test.tsx.snap new file mode 100644 index 00000000..9dbc008e --- /dev/null +++ b/packages/react/src/components/Box/__tests__/__snapshots__/Box.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Box should match the snapshot 1`] = ` + +
    +
    +
    + +`; From 0e18a7f0a46356f1c9cef1bf3f19c5bdc7f90883 Mon Sep 17 00:00:00 2001 From: Brion Date: Sun, 12 Feb 2023 23:50:15 +0530 Subject: [PATCH 4/5] chore(react): add missing exports --- .../react/src/components/ListItemIcon/index.ts | 2 +- packages/react/src/components/index.ts | 18 ++++++++++++++++++ packages/react/src/index.ts | 1 - 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/ListItemIcon/index.ts b/packages/react/src/components/ListItemIcon/index.ts index d24d828e..9ee19411 100644 --- a/packages/react/src/components/ListItemIcon/index.ts +++ b/packages/react/src/components/ListItemIcon/index.ts @@ -17,4 +17,4 @@ */ export {default} from './ListItemIcon'; -export type {ListItemButtonProps} from './ListItemIcon'; +export type {ListItemIconProps} from './ListItemIcon'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 1e16337b..827733ea 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -19,6 +19,9 @@ export {default as AppBar} from './AppBar'; export * from './AppBar'; +export {default as Box} from './Box'; +export * from './Box'; + export {default as Button} from './Button'; export * from './Button'; @@ -31,6 +34,21 @@ export * from './Grid'; export {default as Link} from './Link'; export * from './Link'; +export {default as List} from './List'; +export * from './List'; + +export {default as ListItem} from './ListItem'; +export * from './ListItem'; + +export {default as ListItemButton} from './ListItemButton'; +export * from './ListItemButton'; + +export {default as ListItemIcon} from './ListItemIcon'; +export * from './ListItemIcon'; + +export {default as ListItemText} from './ListItemText'; +export * from './ListItemText'; + export {default as SignIn} from './SignIn'; export * from './SignIn'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 5fe4a017..d604dd3a 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -26,7 +26,6 @@ export { ToggleButton, ToggleButtonGroup, IconButton, - Box, Dialog, DialogTitle, DialogContent, From b8bd083f9f0cb0de4056c75c741538c09992bb5d Mon Sep 17 00:00:00 2001 From: Brion Date: Mon, 13 Feb 2023 00:38:54 +0530 Subject: [PATCH 5/5] chore(react): remove redundant import --- packages/react/src/components/Box/Box.stories.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/Box/Box.stories.mdx b/packages/react/src/components/Box/Box.stories.mdx index 1c2350aa..f0d1aee3 100644 --- a/packages/react/src/components/Box/Box.stories.mdx +++ b/packages/react/src/components/Box/Box.stories.mdx @@ -1,7 +1,6 @@ import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; import dedent from 'ts-dedent'; import StoryConfig from '../../../.storybook/story-config.ts'; -import {withDesign} from '../../../.storybook/utils.ts'; import Box from './Box.tsx'; export const meta = {