-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of github.com:PradaIng/structuraid-desktop into f…
…eature/SI-13
- Loading branch information
Showing
34 changed files
with
10,267 additions
and
21,120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
| "sourceType": "unambiguous", | ||
| "presets": [ | ||
| [ | ||
| "@babel/preset-env", | ||
| { | ||
| "targets": { | ||
| "chrome": 100 | ||
| } | ||
| } | ||
| ], | ||
| "@babel/preset-typescript", | ||
| "@babel/preset-react" | ||
| ], | ||
| "plugins": [] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,11 @@ | ||
| module.exports = { | ||
| "stories": [ | ||
| "../src/**/*.stories.mdx", | ||
| "../src/**/*.stories.@(js|jsx|ts|tsx)" | ||
| ], | ||
| "addons": [ | ||
| "@storybook/addon-links", | ||
| "@storybook/addon-essentials", | ||
| "@storybook/addon-interactions" | ||
| ], | ||
| "framework": "@storybook/react", | ||
| "core": { | ||
| "builder": "@storybook/builder-webpack5" | ||
| "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], | ||
| "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"], | ||
| "framework": { | ||
| name: "@storybook/react-webpack5", | ||
| options: {} | ||
| }, | ||
| docs: { | ||
| autodocs: true | ||
| } | ||
| } | ||
| }; |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/renderer/components/atoms/selection-list/selection-list.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <!-- Text.stories.mdx --> | ||
| {/* Text.stories.mdx */} | ||
|
|
||
| import { Canvas, Meta, Story } from '@storybook/addon-docs'; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| /* eslint-disable import/prefer-default-export */ | ||
| export { default as Select } from './select'; | ||
| export { default as RadioGroup } from './radio-group'; | ||
| export { default as Notification } from './notification'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './notification'; |
153 changes: 153 additions & 0 deletions
153
src/renderer/components/molecules/notification/notification.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| import { useState } from 'react' | ||
| import { Canvas, Meta, Story } from '@storybook/addon-docs'; | ||
| import { COLORS } from '../../../constants' | ||
|
|
||
| import Notification from './notification'; | ||
| import { Button } from '../../atoms'; | ||
|
|
||
| <Meta title="Molecules/Notification" component={Notification} /> | ||
|
|
||
| export const Template = (args) => { | ||
| return ( | ||
| <div style={{ | ||
| padding: '30px', | ||
| background: args.color === 'dark' ? COLORS.PRIMARY : COLORS.BLUE_WHITE | ||
| }}> | ||
| <Notification {...args} /> | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| # Notification | ||
|
|
||
| This is the `Notification` molecule. It can be used to render a notification message on the UI. It can be an error, an alert, a success notification or some information. | ||
|
|
||
| ## Usage | ||
|
|
||
| The `type` and `message` props are required. | ||
| Use the `type` prop to specify the notification type. It can be `"error"`, `"warning"`, `"success"` or `"info"` | ||
| Use the `message` prop to specify the notification message. | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="error" | ||
| args={{ | ||
| type: 'error', | ||
| message: 'Error Notification' | ||
| }} | ||
| > | ||
| {Template.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="warning" | ||
| args={{ | ||
| type: 'warning', | ||
| message: 'Warning Notification' | ||
| }} | ||
| > | ||
| {Template.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="success" | ||
| args={{ | ||
| type: 'success', | ||
| message: 'Success Notification' | ||
| }} | ||
| > | ||
| {Template.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="info" | ||
| args={{ | ||
| type: 'info', | ||
| message: 'Info Notification' | ||
| }} | ||
| > | ||
| {Template.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ### Custom Actions | ||
|
|
||
| The `Notification` component can receive `children`, they will be rendered at the right of the message and can be used to define any custom actions that can be performed by the user | ||
|
|
||
| export const CustomActionsTemplate = (args) => { | ||
| return ( | ||
| <div style={{ | ||
| padding: '30px', | ||
| background: args.color === 'dark' ? COLORS.PRIMARY : COLORS.BLUE_WHITE | ||
| }}> | ||
| <Notification {...args}> | ||
| <Button | ||
| as="secondary" | ||
| type="submit" | ||
| variant="small" | ||
| > | ||
| Accept | ||
| </Button> | ||
| <Button | ||
| as="secondary" | ||
| type="submit" | ||
| variant="small" | ||
| > | ||
| Deny | ||
| </Button> | ||
| </Notification> | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="custom-actions" | ||
| args={{ | ||
| type: 'error', | ||
| message: 'Error Notification' | ||
| }} | ||
| > | ||
| {CustomActionsTemplate.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ### Controlled from Outside | ||
|
|
||
| The notification visibility state can be controlled from an outside component using the `open` and `onVisibilityChange` props. | ||
|
|
||
| export const ControlledTemplate = (args) => { | ||
| const [open, setOpen] = useState(false) | ||
| const handleClose = (newOpen) => setOpen(newOpen) | ||
| return ( | ||
| <div style={{ | ||
| padding: '30px', | ||
| background: args.color === 'dark' ? COLORS.PRIMARY : COLORS.BLUE_WHITE | ||
| }}> | ||
| <Notification {...args} open={open} onVisibilityChange={handleClose} /> | ||
| <div style={{paddingTop: "20px"}}> | ||
| <Button onClick={() => setOpen(!open)}> | ||
| Click me | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="controlled" | ||
| args={{ | ||
| type: 'success', | ||
| message: 'Success Notification' | ||
| }} | ||
| > | ||
| {ControlledTemplate.bind({})} | ||
| </Story> | ||
| </Canvas> |
105 changes: 105 additions & 0 deletions
105
src/renderer/components/molecules/notification/notification.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import { | ||
| SkipIcon, | ||
| AlertIcon, | ||
| CheckIcon, | ||
| BookmarkIcon, | ||
| XIcon, | ||
| } from '@primer/octicons-react'; | ||
| import { Text } from '../../atoms'; | ||
|
|
||
| import type { NotificationProps } from './types'; | ||
|
|
||
| const ICON_MAPPER = { | ||
| error: SkipIcon, | ||
| warning: AlertIcon, | ||
| success: CheckIcon, | ||
| info: BookmarkIcon, | ||
| }; | ||
|
|
||
| const BG_COLORS_MAPPER = { | ||
| error: { | ||
| dark: 'bg-notice-dark-red', | ||
| base: 'bg-notice-red', | ||
| soft: 'bg-notice-soft-red', | ||
| }, | ||
| warning: { | ||
| dark: 'bg-notice-yellow', | ||
| base: 'bg-notice-yellow', | ||
| soft: 'bg-notice-soft-yellow', | ||
| }, | ||
| success: { | ||
| dark: 'bg-notice-green', | ||
| base: 'bg-notice-green', | ||
| soft: 'bg-notice-soft-green', | ||
| }, | ||
| info: { | ||
| dark: 'bg-primary', | ||
| base: 'bg-secondary', | ||
| soft: 'bg-soft-blue', | ||
| }, | ||
| }; | ||
|
|
||
| const Notification = ({ | ||
| message, | ||
| type, | ||
| children, | ||
| open: defaultOpen = true, | ||
| onVisibilityChange, | ||
| }: NotificationProps) => { | ||
| const Icon = ICON_MAPPER[type]; | ||
| const bgColorScheme = BG_COLORS_MAPPER[type]; | ||
| const [open, setOpen] = useState(defaultOpen); | ||
|
|
||
| useEffect(() => { | ||
| setOpen(defaultOpen); | ||
| }, [defaultOpen]); | ||
|
|
||
| const handleClose = () => { | ||
| setOpen(false); | ||
| if (onVisibilityChange) onVisibilityChange(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className={` | ||
| flex items-center gap-4 | ||
| transition-all | ||
| ${bgColorScheme.soft} | ||
| ${ | ||
| open ? 'w-full h-12 opacity-100' : 'w-0 h-0 overflow-hidden opacity-0' | ||
| } | ||
| `} | ||
| > | ||
| <div | ||
| className={`${bgColorScheme.dark} w-12 h-12 flex flex-grow-0 flex-shrink-0 justify-center items-center`} | ||
| > | ||
| <Icon size={24} className="text-blue-white" /> | ||
| </div> | ||
|
|
||
| <Text | ||
| as="body-small-interface" | ||
| className="w-full flex-grow-1 flex-shrink-1" | ||
| color="primary" | ||
| > | ||
| {message} | ||
| </Text> | ||
|
|
||
| {children && ( | ||
| <div className="flex items-center gap-3 flex-grow-0 flex-shrink-0"> | ||
| {children} | ||
| </div> | ||
| )} | ||
|
|
||
| <button | ||
| type="button" | ||
| className="block w-10 h-10 hover:opacity-50 transition-all flex-grow-0 flex-shrink-0" | ||
| onClick={handleClose} | ||
| > | ||
| <XIcon size={16} className="text-primary" /> | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Notification; |
Oops, something went wrong.