Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 546ff47

Browse files
codebender828codebender828
committed
feat(toast): added toas component and story
1 parent 78349f9 commit 546ff47

File tree

14 files changed

+369
-58
lines changed

14 files changed

+369
-58
lines changed

Diff for: ‎.storybook/config.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { configure, addDecorator } from '@storybook/vue';
2+
import Vue from 'vue'
23
import ThemeProvider from '../src/components/ThemeProvider'
34
import theme from '../src/lib/theme'
45
import icons from '../src/lib/plugin/iconsPaths'
6+
import Kiwi from '../src/lib/plugin'
7+
8+
Vue.use(Kiwi)
59

610
addDecorator(() => ({
711
template: `

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@fortawesome/pro-light-svg-icons": "^5.11.2",
2121
"@styled-system/should-forward-prop": "^5.1.2",
2222
"@vue/composition-api": "^0.3.2",
23+
"breadstick": "^0.1.17",
2324
"color": "^3.1.2",
2425
"core-js": "^2.6.5",
2526
"css-loader": "^3.2.0",

Diff for: ‎src/App.vue

+27-13
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,51 @@
22
<theme-provider :theme="$kiwi.theme" :icons="$kiwi.icons">
33
<div class="root">
44
<div class="wrapper">
5-
<CloseButton />
5+
<Button variant-color="blue" @click="toggle">Show Toast</Button>
66
</div>
77
</div>
88
</theme-provider>
99
</template>
1010

11-
<script>
12-
import { ThemeProvider, CloseButton } from './lib/core/'
11+
<script lang="js">
12+
import { ThemeProvider, /* CloseButton, */ Button, /* Alert, AlertIcon, */ useToast } from './lib/core/'
1313
1414
export default {
1515
data () {
1616
return {
1717
element: true,
18-
loading: false
18+
loading: false,
19+
toast: undefined
1920
}
2021
},
2122
name: 'App',
2223
components: {
2324
ThemeProvider,
24-
CloseButton
25+
Button
26+
},
27+
mounted () {
28+
this.toast = useToast({ theme: this.$kiwi.theme, icons: this.$kiwi.icons })
2529
},
2630
methods: {
2731
toggle () {
28-
this.element = !this.element
29-
},
30-
setLoading () {
31-
this.loading = true
32-
setTimeout(() => {
33-
this.loading = false
34-
}, 1000)
32+
this.toast({
33+
title: 'Account created.',
34+
description: "We've created your account for you.",
35+
status: 'success',
36+
duration: 100000,
37+
isClosable: true
38+
})
39+
// breadstick.notify(({ h, onClose }) => {
40+
// return (
41+
// <ThemeProvider theme={this.$kiwi.theme} icons={this.$kiwi.icons}>
42+
// <Alert mb="3" variant="solid" status="success">
43+
// <AlertIcon />
44+
// Kiwi is the best Vue component library
45+
// <CloseButton onClick={onClose} pos={'absolute'} color={'currentColor'} size={'sm'} top={1} right={1} />
46+
// </Alert>
47+
// </ThemeProvider>
48+
// )
49+
// }, { duration: 2000, position: 'bottom-left' })
3550
}
3651
}
3752
}
@@ -40,7 +55,6 @@ export default {
4055
<style lang="scss">
4156
html,
4257
body {
43-
font-family: Rubik, sans-serif;
4458
margin: 0
4559
}
4660

Diff for: ‎src/components/Alert/alert.styles.js

-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ const statusStyleProps = props => {
122122
*/
123123
const useAlertStyle = ({ variant, color, colorMode, theme }) => {
124124
const _props = { variant, color, theme }
125-
console.log({ _props })
126125
return {
127126
...baseProps,
128127
...statusStyleProps(_props)[colorMode]

Diff for: ‎src/components/Alert/index.js

-2
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ const Alert = {
3838
theme: this.$theme()
3939
})
4040

41-
console.log({ alertStyles })
42-
4341
return h(Box, {
4442
props: {
4543
...alertStyles,

Diff for: ‎src/components/CloseButton/index.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const baseProps = {
1818
_focus: {
1919
boxShadow: 'outline'
2020
},
21-
border: 'none'
21+
border: 'none',
22+
bg: 'blackAlpha.50'
2223
}
2324

2425
const sizes = {
@@ -50,7 +51,8 @@ export default {
5051
default: false
5152
},
5253
color: {
53-
type: String
54+
type: String,
55+
default: 'currentColor'
5456
},
5557
_ariaLabel: {
5658
type: String,
@@ -79,6 +81,9 @@ export default {
7981
...baseProps,
8082
...forwardProps(this.$props)
8183
},
84+
on: {
85+
click: ($e) => this.$emit('click', $e)
86+
},
8287
attrs: {
8388
ariaLabel: this._ariaLabel,
8489
ariaDisabled: this.isDisabled

Diff for: ‎src/components/Toast/index.d.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { IAlert, AlertProps as BaseAlertProps } from "../Alert";
2+
import { BoxProps } from "../Box";
3+
import { Omit } from "../common-types";
4+
import { Position } from "toasted-notes";
5+
import * as React from "react";
6+
7+
export interface IToast extends IAlert {
8+
/**
9+
* The title of the toast.
10+
*/
11+
title?: string;
12+
/**
13+
* If `true` adds a close button to the toast.
14+
*/
15+
isClosable?: boolean;
16+
/**
17+
* Callback function to close the toast.
18+
*/
19+
onClose?: () => void;
20+
/**
21+
* The description of the toast
22+
*/
23+
description?: string;
24+
/**
25+
* Duration before dismiss in milliseconds, or `null` to never dismiss.
26+
*/
27+
duration?: number | null;
28+
/**
29+
* One of toasted-notes positions.
30+
*/
31+
position?: keyof typeof Position;
32+
}
33+
34+
interface RenderOption {
35+
render?: (props: { onClose: () => void; id: string }) => React.ReactNode;
36+
}
37+
export type useToastOptions = IToast & RenderOption;
38+
declare const useToast: () => (props: useToastOptions) => void;
39+
40+
export default useToast;

Diff for: ‎src/components/Toast/index.js

+156-36
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,158 @@
1+
import Breadstick from 'breadstick'
2+
import { Box, Alert, AlertIcon, AlertTitle, AlertDescription, CloseButton, ThemeProvider } from '../../lib/core'
3+
import { baseProps } from '../../lib/config/props'
4+
import { forwardProps } from '../../lib/utils'
5+
6+
// Create breadstick instance.
7+
const breadstick = new Breadstick()
8+
19
/**
2-
* The meat and potatoes of this component is to expose an API `useToast()` that will allow users to provide notification data.
3-
*
4-
* It will accept:
5-
* - status
6-
* - position
7-
* - title
8-
* - description
9-
* - duration
10-
* - isClosable
11-
* - render() option. <-- Render should mimic Vue's render function
12-
*
13-
* Example usage:
14-
* ```js
15-
* import { useToast } from 'kiwi-ui'
16-
*
17-
* const toast = useToast();
18-
*
19-
* const showSuccess = (props) => {
20-
* return toast.notify({
21-
* ...props,
22-
* render(h) {
23-
* return h(Box, {
24-
* props: {
25-
* m: 3,
26-
* color: 'white',
27-
* p: 3,
28-
* bg: 'blue.200'
29-
* }
30-
* }, 'Hello World!')
31-
* }
32-
* })
33-
* }
34-
*
35-
*
36-
* ```
37-
*
10+
* Toast component
3811
*/
12+
const Toast = {
13+
name: 'Toast',
14+
props: {
15+
status: {
16+
type: String,
17+
default: 'info'
18+
},
19+
variant: {
20+
type: String,
21+
default: 'solid'
22+
},
23+
id: {
24+
type: String
25+
},
26+
title: {
27+
type: String,
28+
default: ''
29+
},
30+
isClosable: {
31+
type: Boolean,
32+
default: true
33+
},
34+
onClose: {
35+
type: Function,
36+
default: () => null
37+
},
38+
description: {
39+
type: String,
40+
default: ''
41+
},
42+
...baseProps
43+
},
44+
render (h) {
45+
return (
46+
<Alert
47+
status={this.status}
48+
variant={this.variant}
49+
id={this.id}
50+
textAlign="left"
51+
boxShadow="lg"
52+
rounded="md"
53+
alignItems="start"
54+
fontFamily="body"
55+
m={2}
56+
pr={2}
57+
p={4}
58+
{...forwardProps(this.$props)}
59+
>
60+
<AlertIcon />
61+
<Box flex="1">
62+
{this.title && <AlertTitle>{this.title}</AlertTitle>}
63+
{this.description && <AlertDescription>{this.description}</AlertDescription>}
64+
</Box>
65+
{this.isClosable && (
66+
<CloseButton
67+
size="sm"
68+
onClick={this.onClose}
69+
position="absolute"
70+
right="4px"
71+
top="4px"
72+
color="currentColor"
73+
/>
74+
)}
75+
</Alert>
76+
)
77+
}
78+
}
79+
80+
/**
81+
* @description Toast initialization API
82+
* @param {Object} options
83+
* @property {Object} theme
84+
* @property {Object} icons
85+
*/
86+
function useToast ({ theme, icons }) {
87+
/**
88+
* @description Notify Method for Kiwi
89+
* @param {Object} options
90+
* @property {String} position
91+
* @property {Number} duration
92+
* @property {Function} render
93+
* @property {String} title
94+
* @property {String} description
95+
* @property {String} status
96+
* @property {String} variant
97+
* @property {Boolean} isClosable
98+
*/
99+
function notify ({
100+
position = 'bottom',
101+
duration = 5000,
102+
render,
103+
title,
104+
description,
105+
status,
106+
variant = 'solid',
107+
isClosable
108+
}) {
109+
const options = {
110+
position,
111+
duration
112+
}
113+
114+
if (render) {
115+
return breadstick.notify(
116+
({ h, onClose, id }) => {
117+
return h(ThemeProvider, {
118+
props: {
119+
theme
120+
}
121+
}, [render({ onClose, id })])
122+
},
123+
// (
124+
// <ThemeProvider theme={theme}>{render({ onClose, id })}</ThemeProvider>
125+
// ),
126+
options
127+
)
128+
}
129+
130+
/**
131+
* @todo Need to battletest breadstick to RELIABLY support JSX API and render function API globally.
132+
*/
133+
breadstick.notify(({ h, onClose, id }) => {
134+
return h(ThemeProvider, {
135+
props: {
136+
icons,
137+
theme
138+
}
139+
}, [h(Toast, {
140+
props: {
141+
status,
142+
variant,
143+
id: `${id}`,
144+
title,
145+
isClosable,
146+
onClose,
147+
description
148+
}
149+
})])
150+
},
151+
options
152+
)
153+
}
154+
155+
return notify
156+
}
157+
158+
export default useToast

Diff for: ‎src/lib/config/props/props.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ const baseProps = {
5353
shadow: [Number, String, Array],
5454
backgroundColor: String,
5555
pos: [String, Array],
56+
position: [String, Array],
5657
flexDir: [String, Array],
5758
bgImg: [String, Array],
5859
bgImage: [String, Array],
@@ -92,7 +93,11 @@ const baseProps = {
9293
whiteSpace: [String, Array],
9394
verticalAlign: [String, Array],
9495
lineHeight: [Number, String, Array],
95-
appearance: [String, Array]
96+
appearance: [String, Array],
97+
top: [String, Number, Array],
98+
bottom: [String, Number, Array],
99+
left: [String, Number, Array],
100+
right: [String, Number, Array]
96101
// transform: [String, Array],
97102
// transformOrigin: [String, Array],
98103
// visibility: [String, Array],

0 commit comments

Comments
 (0)