@lets-events/react 3.0.0 → 5.0.0

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

@@ -9,23 +9,34 @@ import PropTypes from "prop-types";
 
 library.add(fas, far, fab);
 
-interface IconProps extends Omit<FontAwesomeIconProps, "icon"> {
+interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
   name: IconName;
+  size?: 'xs' | 'sm' | 'md' | 'xl';
   prefix?: IconPrefix;
 }
 
-export const Icon = ({ name, prefix = "fas", size = "1x", color = "currentColor", className = "", ...props }: IconProps) => {
+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]}
-      size={size}
+      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,

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>
+  )
+}

package/src/components/RadioGroup.tsx

@@ -50,8 +50,8 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
   },
 
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         'label': {
           '&:focus button, &:hover button': {
             boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
@@ -65,7 +65,8 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
           backgroundColor: '$green500',
         },
       },
-      false: {
+      blue: {},
+      error: {
         'label': {
           '&:focus button, &:hover button': {
             boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
@@ -98,9 +99,8 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
   },
 
   compoundVariants: [
-
     {
-      isValid: undefined,
+      color: 'blue',
       disabled: false,
       css: {
         'label': {
@@ -118,7 +118,7 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
     },
 
     {
-      isValid: undefined,
+      color: 'blue',
       disabled: true,
       css: {
         'label button': {
@@ -132,7 +132,7 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
     },
 
     {
-      isValid: true,
+      color: 'success',
       disabled: true,
       css: {
         'label button': {
@@ -146,7 +146,7 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
     },
 
     {
-      isValid: false,
+      color: 'error',
       disabled: true,
       css: {
         'label button': {
@@ -158,13 +158,17 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: 'blue',
+    disabled: false
+  }
 })
 
 export type RadioGroupProps = ComponentProps<typeof RadioGroupStyled> & {
   placeholder?: string
   children?: React.ReactNode
-  isValid?: boolean
+  color?: string
   disabled?: boolean
 }
 
@@ -175,14 +179,12 @@ export type RadioItemProps = {
 
 export function RadioGroup({
   children,
-  isValid,
   disabled,
   ...props
 }: RadioGroupProps) {
   return (
     <RadioGroupStyled
       disabled={disabled}
-      isValid={isValid}
       {...props}
     >
       {children}

package/src/components/Section.tsx

@@ -0,0 +1,34 @@
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles';
+import { Section as SectionRadix } from '@radix-ui/themes';
+
+export const SectionStyled = styled(SectionRadix, {
+  variants: {
+    size: {
+      xs: { maxWidth: '576px' },
+      sm: { minWidth: '577px', maxWidth: '767px' },
+      md: { mixWidth: '768px', maxWidth: '991px' },
+      lg: { mixWidth: '992px', maxWidth: '1199px' },
+      xl: { mixWidth: '1200px', maxWidth: '1399px' },
+      xxl: { mixWidth: '1400px' },
+      responsive: { width: '100%', maxWidth: '100%', minWidth: '100%' }
+    },
+    display: {
+      none: { display: 'none' },
+      initial: { display: 'initial' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    display: 'initial'
+  },
+});
+
+export type SectionProps = ComponentProps<typeof SectionStyled> & {
+  as?: ElementType;
+  children: React.ReactNode;
+};
+
+export function Section({ children, ...props }: SectionProps) {
+  return <SectionStyled {...props}>{children}</SectionStyled>;
+}

package/src/components/Step.tsx

@@ -0,0 +1,148 @@
+import React, { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Box, Tabs as StepRadix } from "@radix-ui/themes";
+
+export const StepStyled = styled('div', {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+
+})
+
+const StepTriggerStyled = styled(StepRadix.Trigger, {
+  all: 'unset',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '$16',
+  fontWeight: '$medium',
+
+
+  minWidth: '32px',
+  minHeight: '32px',
+  marginRight: '40px',
+
+
+  '&:last-of-type': {
+    marginRight: 0,
+  },
+
+
+  '& > span:first-of-type': {
+    width: '32px',
+    height: '32px',
+    borderRadius: '$full',
+    backgroundColor: '$neutral50',
+    border: '1px solid $neutral200',
+    color: '$gray700',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+    position: 'relative',
+
+  },
+
+
+  '&[data-state="active"] > span:first-of-type': {
+    backgroundColor: '$blue500',
+    borderColor: '$blue500',
+    color: 'white',
+  },
+
+
+  '& > span:last-of-type': {
+    display: 'none',
+  },
+
+
+  '&:not(:first-of-type)::before': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    right: 'calc(100% + 4px)',
+    transform: 'translateY(-50%)',
+    width: '32px',
+    height: '8px',
+    borderRadius: '$sm',
+    backgroundColor: '$neutral50',
+    zIndex: 0,
+  },
+
+
+  '&[data-state="active"]::before': {
+    backgroundColor: '$blue500',
+  },
+
+  '&[data-filled="true"] > span:first-of-type': {
+    backgroundColor: '$blue500',
+    borderColor: '$blue500',
+    color: 'white',
+  },
+
+  '&[data-filled="true"]::before': {
+    backgroundColor: '$blue500',
+  },
+});
+
+const StepListStyled = styled(StepRadix.List, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: '$4',
+
+});
+
+export type StepProps = ComponentProps<typeof StepStyled> & {
+  children: React.ReactNode,
+  defaultValue: number
+
+}
+export function Step({ children, defaultValue, ...props }: StepProps) {
+  return (
+    <StepRadix.Root defaultValue={String(defaultValue)}>
+      <StepStyled {...props}>
+        {children}
+      </StepStyled>
+    </StepRadix.Root>
+
+  )
+}
+
+export function StepTrigger({ value, children, currentStep, ...props }: { value: number, children: React.ReactNode | string, currentStep?: number, onClick: () => void }) {
+  const isActiveOrPrevious = currentStep !== undefined && value <= currentStep
+  console.log(isActiveOrPrevious, 'isActiveOrPrevius', currentStep)
+  return (
+    <StepTriggerStyled data-filled={isActiveOrPrevious} value={String(value)} {...props}>{children}</StepTriggerStyled>
+  )
+}
+
+export function StepContent({ value, children, ...props }: { value: number, children: React.ReactNode }) {
+  return (
+    <StepRadix.Content value={String(value)} {...props}>
+      {children}
+    </StepRadix.Content>
+  )
+}
+
+export function StepList({ children, currentStep, ...props }: { children: React.ReactNode, currentStep: number }) {
+  return (
+    <StepListStyled {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === StepTrigger) {
+          return React.cloneElement(child, { currentStep } as any)
+        }
+        return child
+      })}
+    </StepListStyled>
+  )
+}
+
+export function StepWrapper({ children, ...props }: { children: React.ReactNode }) {
+  return (
+    <Box {...props}>
+      {children}
+    </Box>
+  )
+}

package/src/components/Switch.tsx

@@ -0,0 +1,109 @@
+import { Switch as RadixSwitch } from '@radix-ui/themes'
+import type { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const SwitchStyled = styled(RadixSwitch, {
+  all: 'unset',
+  borderRadius: '$full',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'all 0.3s',
+  cursor: 'pointer',
+
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    borderRadius: '$full',
+    pointerEvents: 'none',
+    cursor: 'pointer',
+  },
+  'span': {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    transform: 'translate(0, -50%)',
+    borderRadius: '50%',
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.24)',
+  },
+
+  '&[data-state="checked"] span': {
+    left: 'auto',
+    transform: 'translate(50%, -50%)',
+  },
+
+  variants: {
+    color: {
+      brand: {
+        '&::before': {
+          backgroundColor: '$brand50',
+        },
+        'span': {
+          backgroundColor: '$dark50',
+          borderColor: '$neutral300',
+        },
+        '&[data-state="checked"]  span': {
+          backgroundColor: '$brand500',
+          borderColor: '$brand500',
+        },
+      }
+    },
+    size: {
+      sm: {
+        width: '32px',
+        height: '20px',
+        '&::before': {
+          width: '$32',
+          height: '$12',
+        },
+
+        'span': {
+          width: '$20',
+          height: '$20',
+        },
+      },
+      md: {
+        width: '40px',
+        height: '20px',
+        '&::before': {
+          width: '40px',
+          height: '16px',
+        },
+        'span': {
+          width: '24px',
+          height: '24px',
+        },
+      },
+      lg: {
+        width: '56px',
+        height: '32px',
+        '&::before': {
+          width: '56px',
+          height: '24px',
+        },
+        'span': {
+          width: '32px',
+          height: '32px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    color: 'brand',
+  },
+
+})
+export type SwitchProps = ComponentProps<typeof RadixSwitch> & {
+  color?: 'brand'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Switch(props: SwitchProps) {
+  return <SwitchStyled color="brand" defaultChecked {...props} />
+}