@lets-events/react 2.0.0 → 3.0.0

package/src/components/Dropdown.tsx

@@ -0,0 +1,109 @@
+import { styled } from '../styles'
+import { ComponentProps, ElementType } from 'react'
+import { Theme, DropdownMenu as DropdownMenuRadix } from '@radix-ui/themes'
+
+const DropdownMenuStyled = styled('div', {
+  fontFamily: '$default',
+  color: '$dark600',
+  letterSpacing: '0px',
+  cursor: 'pointer',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  padding: '$8 $12',
+  width: 'calc(100% - 24px)',
+  display: 'flex',
+  'button': {
+    fontFamily: '$default',
+    color: '$dark600',
+    letterSpacing: '0px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    width: '100%',
+    outline: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    'svg': {
+      marginLeft: 'auto',
+    }
+  },
+
+})
+
+const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
+  background: 'white',
+  padding: '$8 $12',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  width: 'calc(var(--radix-popper-anchor-width) - 24px);',
+  minWidth: '100%',
+  marginTop: '3px',
+
+
+})
+const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
+  fontFamily: '$default',
+  color: '$dark600',
+  letterSpacing: '0px',
+  padding: '$8 $12',
+  '&:hover, &:focus': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+  }
+
+})
+
+export type DropdownMenuProps = ComponentProps<typeof DropdownMenuRadix.Root> & {
+  as?: ElementType,
+  placeholder?: string,
+}
+export type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuItemStyled> & {
+  as?: ElementType,
+  value: string,
+}
+
+
+export function DropdownMenu({
+  children,
+  placeholder,
+  ...props
+}: DropdownMenuProps) {
+  return (
+    <Theme>
+      <DropdownMenuRadix.Root {...props}>
+        <DropdownMenuStyled>
+          <DropdownMenuRadix.Trigger>
+            <button aria-label={placeholder || 'Fitrar'}>
+              <span>{placeholder || 'Fitrar'}</span>
+              <DropdownMenuRadix.TriggerIcon />
+            </button>
+          </DropdownMenuRadix.Trigger>
+          <DropdownMenuContentStyled avoidCollisions={false}
+            align="start"
+            alignOffset={-14}>
+            <DropdownMenuRadix.Group>
+              {children}
+            </DropdownMenuRadix.Group>
+          </DropdownMenuContentStyled>
+        </DropdownMenuStyled>
+      </DropdownMenuRadix.Root>
+    </Theme>
+  )
+}
+
+
+
+export function DropdownMenuItem({
+  children,
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuItemStyled {...props}>
+      {children}
+    </DropdownMenuItemStyled>
+  )
+}

package/src/components/Filter.tsx

@@ -0,0 +1,96 @@
+import { styled } from '../styles'
+import { ComponentProps, ElementType } from 'react'
+import { Theme, DropdownMenu } from '@radix-ui/themes'
+import { CheckboxGroup, CheckboxItem } from './CheckboxGroup'
+import { Icon } from './Icon'
+const FilterStyled = styled('div', {
+  fontFamily: '$default',
+  color: '$dark600',
+  letterSpacing: '0px',
+  cursor: 'pointer',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  padding: '$8 $12',
+  width: 'calc(100% - 24px)',
+  display: 'flex',
+  'button': {
+    fontFamily: '$default',
+    color: '$dark600',
+    letterSpacing: '0px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    width: '100%',
+    outline: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    'svg:last-child': {
+      marginLeft: 'auto',
+    }
+  },
+
+})
+
+const FilterContentStyled = styled(DropdownMenu.Content, {
+  background: 'white',
+  padding: '$8 $12',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  width: 'calc(var(--radix-popper-anchor-width) - 24px);',
+  minWidth: '100%',
+  marginTop: '3px',
+
+})
+
+export type FilterProps = ComponentProps<typeof DropdownMenu.Root> & {
+  as?: ElementType,
+  placeholder?: string,
+}
+export type FilterItemProps = ComponentProps<typeof CheckboxItem> & {
+  as?: ElementType,
+  value: string,
+}
+
+
+export function Filter({
+  children,
+  placeholder,
+  ...props
+}: FilterProps) {
+  return (
+    <Theme>
+      <DropdownMenu.Root {...props}>
+        <FilterStyled>
+          <DropdownMenu.Trigger>
+            <button aria-label={placeholder || 'Fitrar'}>
+              <Icon name='filter' />
+              <span>{placeholder || 'Fitrar'}</span>
+              <DropdownMenu.TriggerIcon />
+            </button>
+          </DropdownMenu.Trigger>
+          <FilterContentStyled avoidCollisions={false}
+            align="start"
+            alignOffset={-14}>
+            <CheckboxGroup>
+              {children}
+            </CheckboxGroup>
+          </FilterContentStyled>
+        </FilterStyled>
+      </DropdownMenu.Root>
+    </Theme>
+  )
+}
+
+
+export function FilterItem({
+  children,
+  ...props
+}: FilterItemProps) {
+  return (
+    <CheckboxItem {...props} style={{ padding: '8px 12px' }}>
+      {children}
+    </CheckboxItem>
+  )
+}

package/src/components/Flex.tsx

@@ -0,0 +1,47 @@
+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
+}
+
+

package/src/components/Headline.tsx

@@ -0,0 +1,29 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Heading } from '@radix-ui/themes'
+
+export const Headline = styled(Heading, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      1: { fontSize: '$48', lineHeight: '$64', fontWeight: '$semibold' },
+      2: { fontSize: '$32', lineHeight: '$48', fontWeight: '$semibold' },
+      3: { fontSize: '$24', lineHeight: '$40', fontWeight: '$semibold' },
+      4: { fontSize: '$20', lineHeight: '$36', fontWeight: '$semibold' },
+      5: { fontSize: '$18', lineHeight: '$24', fontWeight: '$semibold' },
+      6: { fontSize: '$18', lineHeight: '$34', fontWeight: '$medium' },
+      7: { fontSize: '$16', lineHeight: '$32', fontWeight: '$semibold' },
+      8: { fontSize: '$16', lineHeight: '$32', fontWeight: '$medium' },
+    },
+  },
+
+  defaultVariants: {
+    size: 1,
+  },
+})
+
+export type HeadlineProps = ComponentProps<typeof Headline> & {
+  as?: ElementType
+}

package/src/components/Icon.tsx

@@ -0,0 +1,37 @@
+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"> {
+  name: IconName;
+  prefix?: IconPrefix;
+}
+
+export const Icon = ({ name, prefix = "fas", size = "1x", color = "currentColor", className = "", ...props }: IconProps) => {
+  return (
+    <FontAwesomeIcon
+      icon={[prefix, name]}
+      size={size}
+      color={color}
+      className={className}
+      {...props}
+    />
+  );
+};
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  prefix: PropTypes.string,
+  size: PropTypes.string,
+  color: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default Icon;

package/src/components/Label.tsx

@@ -0,0 +1,28 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text } from '@radix-ui/themes'
+
+export const Label = styled(Text, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      1: { fontSize: '$18', lineHeight: '$22', fontWeight: '$semibold' },
+      2: { fontSize: '$14', lineHeight: '$16', fontWeight: '$medium' },
+      3: { fontSize: '$14', lineHeight: '$16', fontWeight: '$regular' },
+      4: { fontSize: '$13', lineHeight: '$16', fontWeight: '$semibold', letterSpacing: '2px' },
+      5: { fontSize: '$13', lineHeight: '$16', fontWeight: '$medium' },
+      6: { fontSize: '$13', lineHeight: '$16', fontWeight: '$regular' },
+      7: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
+    },
+  },
+
+  defaultVariants: {
+    size: '1',
+  },
+})
+
+export type LabelProps = ComponentProps<typeof Label> & {
+  as?: ElementType
+}

package/src/components/RadioGroup.tsx

@@ -0,0 +1,202 @@
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { RadioGroup as RadioGroupRadix } from "@radix-ui/themes";
+
+export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
+  fontFamily: '$default',
+  letterSpacing: '0px',
+  fontSize: '$13',
+
+  'label': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    '&:focus button, &:hover button': {
+      transition: 'all 300ms ease-out',
+      boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
+    }
+  },
+  'label button': {
+    backgroundColor: '$white',
+    borderRadius: '$full',
+    height: '$16',
+    width: '$16',
+    position: 'relative',
+    border: '2px solid $dark300',
+    cursor: 'pointer',
+  },
+  'label button[data-state=checked]:before': {
+    backgroundColor: '$dark50',
+    content: '',
+    width: '8px',
+    height: '8px',
+    position: 'absolute',
+    top: '2px',
+    right: '2px',
+    borderRadius: '$full',
+    zIndex: 2,
+  },
+  'label button[data-state=checked]:after': {
+    backgroundColor: '$brand500',
+    content: '',
+    height: '$16',
+    width: '$16',
+    position: 'absolute',
+    top: '-2px',
+    right: '-2px',
+    borderRadius: '$full',
+    zIndex: 1,
+  },
+
+  variants: {
+    isValid: {
+      true: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
+          }
+        },
+        'label button': {
+          borderColor: '$green500',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$green500',
+        },
+      },
+      false: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
+          }
+        },
+        'label button': {
+          borderColor: '$error400',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error600',
+        },
+      }
+    },
+    disabled: {
+      true: {
+        'label': {
+          cursor: 'not-allowed',
+          opacity: 0.5,
+          '&:focus button, &:hover button': {
+            boxShadow: 'none',
+          }
+        },
+        'label button': {
+          cursor: 'not-allowed',
+        }
+      },
+      false: {}
+    }
+  },
+
+  compoundVariants: [
+
+    {
+      isValid: undefined,
+      disabled: false,
+      css: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
+          }
+        },
+        'label button': {
+          borderColor: '$dark300',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand500',
+        },
+      }
+    },
+
+    {
+      isValid: undefined,
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$brand100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand100',
+        },
+      }
+    },
+
+    {
+      isValid: true,
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$success100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$success100',
+        }
+      }
+    },
+
+    {
+      isValid: false,
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$error100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error100',
+        }
+      }
+    }
+  ]
+})
+
+export type RadioGroupProps = ComponentProps<typeof RadioGroupStyled> & {
+  placeholder?: string
+  children?: React.ReactNode
+  isValid?: boolean
+  disabled?: boolean
+}
+
+export type RadioItemProps = {
+  children?: React.ReactNode
+  value: string
+}
+
+export function RadioGroup({
+  children,
+  isValid,
+  disabled,
+  ...props
+}: RadioGroupProps) {
+  return (
+    <RadioGroupStyled
+      disabled={disabled}
+      isValid={isValid}
+      {...props}
+    >
+      {children}
+    </RadioGroupStyled>
+  )
+}
+
+export function RadioItem({
+  children,
+  ...props
+}: RadioItemProps) {
+  return (
+    <RadioGroupRadix.Item {...props}>
+      {children}
+    </RadioGroupRadix.Item>
+  )
+}

package/src/components/Subtitle.tsx

@@ -0,0 +1,26 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text } from '@radix-ui/themes'
+
+export const Subtitle = styled(Text, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      1: { fontSize: '$20', lineHeight: '$36', fontWeight: '$regular' },
+      2: { fontSize: '$18', lineHeight: '$34', fontWeight: '$regular' },
+      3: { fontSize: '$16', lineHeight: '$32', fontWeight: '$regular' },
+      4: { fontSize: '$14', lineHeight: '$24', fontWeight: '$regular' },
+      5: { fontSize: '$14', lineHeight: '$16', fontWeight: '$semibold' },
+    },
+  },
+
+  defaultVariants: {
+    size: 1,
+  },
+})
+
+export type SubtitleProps = ComponentProps<typeof Subtitle> & {
+  as?: ElementType
+}

package/src/components/Text.tsx

@@ -1,21 +1,18 @@
 import { ComponentProps, ElementType } from 'react'
 import { styled } from '../styles'
+import { Text as TextRadix } from '@radix-ui/themes'
 
-export const Text = styled('p', {
+export const Text = styled(TextRadix, {
   fontFamily: '$default',
   lineHeight: '$base',
-  margin: 0,
   color: '$gray100',
-
+  letterSpacing: '$2',
+  fontWeight: '$semibold',
   variants: {
     size: {
-      xs: { fontSize: '$xs' },
-      sm: { fontSize: '$sm' },
-      md: { fontSize: '$md' },
-      lg: { fontSize: '$lg' },
-      '2xl': { fontSize: '$2xl' },
-      '4xl': { fontSize: '$4xl' },
-      full: { fontSize: '$full' },
+      lg: { fontSize: '$56' },
+      md: { fontSize: '$48' },
+      sm: { fontSize: '$36' },
     },
   },
 
@@ -24,6 +21,6 @@ export const Text = styled('p', {
   },
 })
 
-export interface TextProps extends ComponentProps<typeof Text> {
+export type TextProps = ComponentProps<typeof Text> & {
   as?: ElementType
 }