@lets-events/react 4.0.0 → 6.0.0

package/src/components/Flex.tsx

@@ -1,47 +1,118 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles'
-import { Flex as FlexRadix } from "@radix-ui/themes";
-export const Flex = styled(FlexRadix, {
-  display: 'flex',
-  variants: {
-    direction: {
-      row: { flexDirection: 'row' },
-      column: { flexDirection: 'column' },
-      'row-reverse': { flexDirection: 'row-reverse' },
-      'column-reverse': { flexDirection: 'column-reverse' },
-    },
-    gap: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    }
-  },
-  defaultVariants: {
-    direction: 'row',
-    gap: 10,
-  }
-
-})
-
-export type FlexProps = ComponentProps<typeof Flex> & {
-  as?: ElementType
-}
-
-
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles'
+import { Flex as FlexRadix } from "@radix-ui/themes";
+export const FlexStyled = styled(FlexRadix, {
+  variants: {
+    display: {
+      'flex': { display: 'flex' },
+      'inline-flex': { display: 'inline-flex' }
+    },
+    align: {
+      start: { alignItems: 'flex-start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' },
+      baseline: { alignItems: 'baseline' },
+    },
+    justify: {
+      start: { justifyContent: 'flex-start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+      around: { justifyContent: 'space-around' },
+      evenly: { justifyContent: 'space-evenly' },
+    },
+    direction: {
+      row: { flexDirection: 'row' },
+      column: { flexDirection: 'column' },
+      'row-reverse': { flexDirection: 'row-reverse' },
+      'column-reverse': { flexDirection: 'column-reverse' },
+    },
+    gap: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapY: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapX: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    }
+  },
+  defaultVariants: {
+    display: 'flex',
+    direction: 'row',
+    gap: 10,
+  }
+
+})
+
+export type FlexProps = ComponentProps<typeof FlexStyled> & {
+  as?: ElementType,
+  children: React.ReactNode
+}
+
+
+export function Flex({ children, ...props }: FlexProps) {
+  return (
+    <FlexStyled {...props}>
+      {children}
+    </FlexStyled>
+  )
+}

package/src/components/Grid.tsx

@@ -0,0 +1,138 @@
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles'
+import { Grid as GridRadix } from "@radix-ui/themes";
+export const GridStyled = styled(GridRadix, {
+  display: 'grid',
+  variants: {
+    display: {
+      'grid': { display: 'grid' },
+      'inline-grid': { display: 'inline-grid' },
+    },
+    align: {
+      start: { alignItems: 'start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'end' },
+      stretch: { alignItems: 'stretch' },
+    },
+    justify: {
+      start: { justifyContent: 'start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'end' },
+      between: { justifyContent: 'space-between' },
+    },
+    flow: {
+      row: { gridAutoFlow: 'row' },
+      column: { gridAutoFlow: 'column' },
+      'row-dense': { gridAutoFlow: 'row dense' },
+      'column-dense': { gridAutoFlow: 'column dense' },
+    },
+    columns: {
+      1: { gridTemplateColumns: 'repeat(1, 1fr)' },
+      2: { gridTemplateColumns: 'repeat(2, 1fr)' },
+      3: { gridTemplateColumns: 'repeat(3, 1fr)' },
+      4: { gridTemplateColumns: 'repeat(4, 1fr)' },
+      6: { gridTemplateColumns: 'repeat(6, 1fr)' },
+      12: { gridTemplateColumns: 'repeat(12, 1fr)' },
+    },
+    rows: {
+      1: { gridTemplateRows: 'repeat(1, 1fr)' },
+      2: { gridTemplateRows: 'repeat(2, 1fr)' },
+      3: { gridTemplateRows: 'repeat(3, 1fr)' },
+      4: { gridTemplateRows: 'repeat(4, 1fr)' },
+      5: { gridTemplateRows: 'repeat(5, 1fr)' },
+      6: { gridTemplateRows: 'repeat(6, 1fr)' },
+      7: { gridTemplateRows: 'repeat(7, 1fr)' },
+      8: { gridTemplateRows: 'repeat(8, 1fr)' },
+      9: { gridTemplateRows: 'repeat(9, 1fr)' },
+      10: { gridTemplateRows: 'repeat(10, 1fr)' },
+      11: { gridTemplateRows: 'repeat(11, 1fr)' },
+      12: { gridTemplateRows: 'repeat(12, 1fr)' },
+      auto: { gridTemplateRows: 'auto' },
+    },
+    gap: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapX: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapY: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+  },
+  defaultVariants: {
+    gap: 10,
+  }
+
+})
+
+export type GridProps = ComponentProps<typeof GridStyled> & {
+  as?: ElementType
+  children: React.ReactNode,
+  areas?: string
+}
+
+
+export function Grid({ children, ...props }: GridProps) {
+  return (
+    <GridStyled {...props}>
+      {children}
+    </GridStyled>
+  )
+}

package/src/components/Icon.tsx

@@ -1,48 +1,48 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { fas } from "@fortawesome/free-solid-svg-icons";
-import { far } from "@fortawesome/free-regular-svg-icons";
-import { fab } from "@fortawesome/free-brands-svg-icons";
-import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import PropTypes from "prop-types";
-
-library.add(fas, far, fab);
-
-interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
-  name: IconName;
-  size?: 'xs' | 'sm' | 'md' | 'xl';
-  prefix?: IconPrefix;
-}
-
-export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
-  const sizeMap = {
-
-    'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
-    'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
-    'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
-    'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
-    undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
-  } as const;
-
-  return (
-    <FontAwesomeIcon
-      icon={[prefix, name]}
-      style={sizeMap[size]}
-      color={color}
-      className={className}
-      {...props}
-      width={sizeMap[size]?.width}
-      height={sizeMap[size]?.height}
-    />
-  );
-};
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  prefix: PropTypes.string,
-  size: PropTypes.string,
-  color: PropTypes.string,
-  className: PropTypes.string,
-};
-
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import PropTypes from "prop-types";
+
+library.add(fas, far, fab);
+
+interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
+  name: IconName;
+  size?: 'xs' | 'sm' | 'md' | 'xl';
+  prefix?: IconPrefix;
+}
+
+export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
+  const sizeMap = {
+
+    'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
+    'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
+    'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
+    'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
+    undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
+  } as const;
+
+  return (
+    <FontAwesomeIcon
+      icon={[prefix, name]}
+      style={sizeMap[size]}
+      color={color}
+      className={className}
+      {...props}
+      width={sizeMap[size]?.width}
+      height={sizeMap[size]?.height}
+    />
+  );
+};
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  prefix: PropTypes.string,
+  size: PropTypes.string,
+  color: PropTypes.string,
+  className: PropTypes.string,
+};
+
 export default Icon;

package/src/components/Modal.tsx

@@ -0,0 +1,109 @@
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { Dialog as ModalRadix } from "@radix-ui/themes";
+import { Button } from './Button';
+import Icon from './Icon';
+import { Box } from './Box';
+import { Flex } from './Flex';
+export const ModalStyled = styled('div', {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  fontSize: '$13',
+  borderRadius: '$sm',
+})
+
+export const ModalContentStyled = styled(ModalRadix.Content, {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  fontSize: '$13',
+  maxWidth: '502px',
+  width: '100%',
+  border: '1px solid $neutral',
+  borderRadius: '$2xl',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
+})
+const ModalHeaderStyled = styled('div', {
+  borderBottom: '1px solid $neutral300',
+  padding: '$16 $24',
+  textAlign: 'center',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+const ModalIconClose = styled(Icon, {
+  position: 'absolute',
+  right: '$24',
+  cursor: 'pointer'
+})
+
+const ModalFooterStyled = styled('div', {
+  borderTop: '1px solid $neutral300',
+  padding: '$16 $24',
+
+  '.modal-footer-flex': {
+    justifyContent: 'flex-end'
+  }
+})
+
+export const ModalTitleStyled = styled(ModalRadix.Title, {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  fontSize: '$18',
+  fontWeight: 'medium',
+  fontStyle: 'normal',
+  textTransform: 'uppercase'
+})
+
+export type ModalProps = ComponentProps<typeof ModalStyled> & {
+  trigger: React.ReactNode,
+  title?: string
+  children: React.ReactNode,
+  cancel?: boolean
+  cancelText?: string,
+  action?: boolean
+  actionText?: string;
+  onAction?: () => void;
+}
+export function Modal({ children, title, trigger, cancel, cancelText, action, actionText, onAction, ...props }: ModalProps) {
+  return (
+    <ModalRadix.Root>
+      <ModalStyled {...props}>
+        <ModalRadix.Trigger>
+          {trigger}
+        </ModalRadix.Trigger>
+
+        <ModalContentStyled>
+          <ModalHeaderStyled>
+            {title && <ModalTitleStyled>{title}</ModalTitleStyled>}
+            <ModalRadix.Close>
+              <ModalIconClose name='close' size='xl' />
+            </ModalRadix.Close>
+          </ModalHeaderStyled>
+          <Box>
+            {children}
+          </Box>
+          {cancel || action ? (
+            <ModalFooterStyled>
+              <Flex gap="10" justify="end" width={'100%'} className='modal-footer-flex'>
+
+                {action && onAction && (
+                  <ModalRadix.Close>
+                    <Button variant='contained' color='brand' onClick={onAction}>{actionText ? actionText : 'Salvar'}</Button>
+                  </ModalRadix.Close>
+                )}
+                {cancel && (
+                  <ModalRadix.Close>
+                    <Button variant="outlined" color="neutral">
+                      {cancelText ? cancelText : 'cancelar'}
+                    </Button>
+                  </ModalRadix.Close>
+                )}
+              </Flex>
+            </ModalFooterStyled>) : null}
+        </ModalContentStyled>
+      </ModalStyled>
+    </ModalRadix.Root>
+  )
+}