feat(generators): add modal templates to components generator

Author: Amiditin

generators/components/src/config.ts

@@ -11,6 +11,7 @@ const generator = (plop: NodePlopAPI): void => {
         name: 'type',
         message: 'Select component type:',
         choices: [
+          { name: 'Modal', value: 'modal' },
           { name: 'Popover', value: 'popover' },
           { name: 'Tooltip', value: 'tooltip' },
         ],

generators/components/src/templates/modal/component.tsx.hbs

@@ -0,0 +1,13 @@
+import type { ModalProps }    from '@atls-ui-parts/modal'
+import type { ReactElement }  from 'react'
+
+import { Modal as BaseModal } from '@atls-ui-parts/modal'
+
+import { backdropStyles }     from './styles.css.js'
+import { containerStyles }    from './styles.css.js'
+
+export const Modal = ({ children, ...props }: ModalProps): ReactElement => (
+  <BaseModal backdropProps={{ className: backdropStyles }} {...props}>
+    <div className={containerStyles}>{children}</div>
+  </BaseModal>
+)

generators/components/src/templates/modal/index.ts.hbs

@@ -0,0 +1,2 @@
+export * from './component.js'
+export type { ModalProps } from '@atls-ui-parts/modal'

generators/components/src/templates/modal/styles.css.ts.hbs

@@ -0,0 +1,24 @@
+import { style }     from '@vanilla-extract/css'
+import { keyframes } from '@vanilla-extract/css'
+
+const fadeIn = keyframes({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+})
+
+export const backdropStyles = style({
+  display: 'grid',
+  placeItems: 'center',
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  animation: `${fadeIn} 0.2s ease-out`,
+  zIndex: 1,
+})
+
+export const containerStyles = style({
+  padding: '40px',
+  background: '#ffffff',
+})