✨ Add Toast component to Astro

Author: Frontendland

package.json

@@ -31,12 +31,14 @@
         "components",
         "icons",
         "scss",
+        "utils",
         "astro.d.ts",
         "astro.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",
         "react.js",
+        "index.js",
         "README.md",
         "LICENSE"
     ],

scripts/build.js

@@ -1,11 +1,12 @@
 import fs from 'fs'
-import buildImports from './buildImports.js'
+import { buildImports, buildUtilImports } from './buildImports.js'
 import buildTypes from './buildTypes.js'
 
 const folders = {
     'src/icons': 'dist/icons',
     'src/components': 'dist/components',
-    'src/scss': 'dist/scss'
+    'src/scss': 'dist/scss',
+    'src/utils': 'dist/utils'
 }
 
 const files = {
@@ -44,4 +45,6 @@ fs.writeFileSync('dist/astro.d.ts', buildTypes('astro'))
 fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
 fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
 
+fs.writeFileSync('dist/index.js', buildUtilImports())
+
 console.log('✅ Package built')

scripts/buildImports.js

@@ -1,6 +1,6 @@
 import fs from 'fs'
 
-const buildImports = extension => {
+export const buildImports = extension => {
     const components = fs.readdirSync('src/components')
 
     return components.map(component => {
@@ -10,4 +10,8 @@ const buildImports = extension => {
         + components.map(component => `export const ${component} = ${component}Component`).join('\n')
 }
 
-export default buildImports
+export const buildUtilImports = () => {
+    const utils = fs.readdirSync('src/utils')
+
+    return utils.map(util => `export * from './utils/${util}'`).join('\n')
+}

src/components/Alert/alert.scss

@@ -48,5 +48,6 @@
     .alert-body {
         font-size: 16px;
         color: #BBB;
+        line-height: 1.5;
     }
 }

src/components/Button/button.ts

@@ -9,7 +9,6 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
-    target?: string
-    disabled?: boolean
     onClick?: () => any
+    [key: string]: any
 }

src/components/Toast/Toast.astro

@@ -0,0 +1,28 @@
+---
+import type { ToastProps } from './toast'
+import Alert from '../Alert/Alert.astro'
+
+import './toast.scss'
+
+interface Props extends ToastProps {}
+
+const {
+    className
+} = Astro.props
+
+const classes = [
+    'w-toast',
+    className
+].filter(Boolean).join(' ')
+---
+
+{Astro.slots.has('icon') ? (
+    <Alert {...Astro.props} className={classes}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+) : (
+    <Alert {...Astro.props} className={classes}>
+        <slot />
+    </Alert>
+)}

src/components/Toast/Toast.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { ToastProps } from './toast'
+    import './toast.scss'
+
+    export let className: ToastProps['className'] = ''
+
+    const classes = [
+        'w-toast',
+        className
+    ].filter(Boolean).join(' ')
+</script>

src/components/Toast/Toast.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type { ToastProps } from './toast'
+
+import './toast.scss'
+
+const Toast = ({
+    className
+}: ToastProps) => {
+    const classes = [
+        'w-toast',
+        className
+    ].filter(Boolean).join(' ')
+
+    return <div>Toast</div>
+}
+
+export default Toast

src/components/Toast/toast.scss

@@ -0,0 +1,14 @@
+@import '../../scss/config.scss';
+
+.w-toast {
+    @include Transition(transform);
+    background: #000;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    transform: translateY(calc(100% + 25px));
+
+    &.show {
+        transform: translateY(0);
+    }
+}

src/components/Toast/toast.ts

@@ -0,0 +1,5 @@
+import type { AlertProps } from '../Alert/alert'
+
+export type ToastProps = {
+    [key: string]: any
+} & AlertProps

src/pages/index.astro

@@ -126,6 +126,9 @@ const tabItems = [{
         <CardWrapper title="Tabs" href="/tabs">
             <Tabs items={tabItems} theme="boxed" />
         </CardWrapper>
+        <CardWrapper title="Toast" href="/toast">
+            <Alert theme="success">Post saved</Alert>
+        </CardWrapper>
         <CardWrapper title="Tooltip" href="/tooltip">
             <p>Tooltip<sup>?</sup></p>
         </CardWrapper>