@lets-events/react 12.10.17 → 12.11.1

package/src/components/Avatar.tsx

@@ -1,56 +1,56 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Avatar as AvatarRadix } from "@radix-ui/themes";
-export const AvatarStyled = styled(AvatarRadix, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      'xs': { width: '$24', height: '$24', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$10', },
-      'sm': { width: '$32', height: '$32', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$14', },
-      'md': { width: '$40', height: '$40', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$16', },
-      'lg': { width: '$48', height: '$48', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$18', },
-      'xl': { width: '$64', height: '$64', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$24', },
-    },
-    radii: {
-      full: { borderRadius: '$full' },
-    },
-    variant: {
-      'without-image': {
-        border: '1px solid $brand500',
-        backgroundColor: '$dark50',
-        color: '$dark700',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        lineHeight: 'normal',
-        textTransform: 'uppercase',
-
-      },
-      'with-image': {
-        border: 0,
-        'img': {
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
-          borderRadius: '$full',
-        }
-      },
-    }
-  },
-
-  defaultVariants: {
-    size: 'md',
-    radii: 'full',
-    variant: 'without-image'
-  },
-})
-
-export type AvatarProps = ComponentProps<typeof AvatarStyled> & {
-  as?: ElementType
-  fallback?: string
-  src?: string
-}
-export function Avatar({ asChild, ...props }: AvatarProps) {
-  return <AvatarStyled as={AvatarRadix} {...props} />
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Avatar as AvatarRadix } from "@radix-ui/themes";
+export const AvatarStyled = styled(AvatarRadix, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      'xs': { width: '$24', height: '$24', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$10', },
+      'sm': { width: '$32', height: '$32', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$14', },
+      'md': { width: '$40', height: '$40', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$16', },
+      'lg': { width: '$48', height: '$48', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$18', },
+      'xl': { width: '$64', height: '$64', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$24', },
+    },
+    radii: {
+      full: { borderRadius: '$full' },
+    },
+    variant: {
+      'without-image': {
+        border: '1px solid $brand500',
+        backgroundColor: '$dark50',
+        color: '$dark700',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: 'normal',
+        textTransform: 'uppercase',
+
+      },
+      'with-image': {
+        border: 0,
+        'img': {
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          borderRadius: '$full',
+        }
+      },
+    }
+  },
+
+  defaultVariants: {
+    size: 'md',
+    radii: 'full',
+    variant: 'without-image'
+  },
+})
+
+export type AvatarProps = ComponentProps<typeof AvatarStyled> & {
+  as?: ElementType
+  fallback?: string
+  src?: string
+}
+export function Avatar({ asChild, ...props }: AvatarProps) {
+  return <AvatarStyled as={AvatarRadix} {...props} />
 }

package/src/components/Badge.tsx

@@ -1,132 +1,132 @@
-import React, { ComponentProps, CSSProperties, ElementType, ReactNode } from "react";
-import type { CSS } from "@stitches/react";
-import { styled, config } from "../styles";
-import { Badge as BadgeRadix } from "@radix-ui/themes";
-export const BadgeStyled = styled(BadgeRadix, {
-  fontFamily: "$default",
-  borderRadius: "$sm",
-  verticalAlign: "middle",
-  variants: {
-    color: {
-      primary: {
-        backgroundColor: "$brand100",
-        color: "$dark700",
-      },
-      dark: {
-        backgroundColor: "$dark700",
-        color: "$grey50",
-      },
-      light: {
-        backgroundColor: "$neutral200",
-        color: "$dark700",
-      },
-      red: {
-        backgroundColor: "$red100",
-        color: "$dark700",
-      },
-      green: {
-        backgroundColor: "$green100",
-        color: "$dark700",
-      },
-      yellow: {
-        backgroundColor: "$yellow100",
-        color: "$dark700",
-      },
-      orange: {
-        backgroundColor: "$orange100",
-        color: "$dark700",
-      },
-      blue: {
-        backgroundColor: "$blue100",
-        color: "$dark700",
-      },
-      pink: {
-        backgroundColor: "$pink100",
-        color: "$dark700",
-      },
-      purple: {
-        backgroundColor: "$purple100",
-        color: "$dark700",
-      },
-      grey: {
-        backgroundColor: "$grey200",
-        color: "$dark700",
-      },
-      disable: {
-        backgroundColor: "$neutral200",
-        color: "$grey500",
-      },
-    },
-    size: {
-      xs: {
-        padding: "$4 $6",
-        fontSize: "$badgeExtraSmall",
-        borderRadius: "$2xs",
-        lineHeight: "$badgeExtraSmall",
-      },
-      sm: {
-        padding: "$4 $8",
-        fontSize: "$badgeSmall",
-        borderRadius: "$xs",
-        lineHeight: "$badgeSmall",
-      },
-      md: {
-        padding: "$8 $10",
-        fontSize: "$badgeMedium",
-        borderRadius: "$sm",
-        lineHeight: "$badgeMedium",
-      },
-      xl: {
-        padding: "$12 $12",
-        fontSize: "$badgeLarge",
-        borderRadius: "$sm",
-        lineHeight: "$badgeLarge",
-      },
-    },
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" },
-    },
-    radii: {
-      full: {
-        borderRadius: "$full",
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "md",
-    color: "primary",
-    fontWeight: "regular",
-  },
-});
-
-export type BadgeProps = {
-  as?: ElementType;
-  asChild?: boolean;
-  color?: "primary" | "dark" | "light" | "red" | "green" | "yellow" | "orange" | "blue" | "pink" | "purple" | "grey" | "disable";
-  size?: "xs" | "sm" | "md" | "xl";
-  fontWeight?: "regular" | "medium" | "semibold" | "bold";
-  radii?: "full";
-  icon?: boolean;
-  children: ReactNode;
-  id?: string;
-  className?: string;
-  style?: CSSProperties;
-  css?: CSS<typeof config>;
-};
-
-export function Badge({ asChild, children, ...props }: BadgeProps) {
-  return (
-    <BadgeStyled {...(props as ComponentProps<typeof BadgeStyled>)}>
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child, { size: props.size } as any);
-        }
-        return child;
-      })}
-    </BadgeStyled>
-  );
-}
+import React, { ComponentProps, CSSProperties, ElementType, ReactNode } from "react";
+import type { CSS } from "@stitches/react";
+import { styled, config } from "../styles";
+import { Badge as BadgeRadix } from "@radix-ui/themes";
+export const BadgeStyled = styled(BadgeRadix, {
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  verticalAlign: "middle",
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$brand100",
+        color: "$dark700",
+      },
+      dark: {
+        backgroundColor: "$dark700",
+        color: "$grey50",
+      },
+      light: {
+        backgroundColor: "$neutral200",
+        color: "$dark700",
+      },
+      red: {
+        backgroundColor: "$red100",
+        color: "$dark700",
+      },
+      green: {
+        backgroundColor: "$green100",
+        color: "$dark700",
+      },
+      yellow: {
+        backgroundColor: "$yellow100",
+        color: "$dark700",
+      },
+      orange: {
+        backgroundColor: "$orange100",
+        color: "$dark700",
+      },
+      blue: {
+        backgroundColor: "$blue100",
+        color: "$dark700",
+      },
+      pink: {
+        backgroundColor: "$pink100",
+        color: "$dark700",
+      },
+      purple: {
+        backgroundColor: "$purple100",
+        color: "$dark700",
+      },
+      grey: {
+        backgroundColor: "$grey200",
+        color: "$dark700",
+      },
+      disable: {
+        backgroundColor: "$neutral200",
+        color: "$grey500",
+      },
+    },
+    size: {
+      xs: {
+        padding: "$4 $6",
+        fontSize: "$badgeExtraSmall",
+        borderRadius: "$2xs",
+        lineHeight: "$badgeExtraSmall",
+      },
+      sm: {
+        padding: "$4 $8",
+        fontSize: "$badgeSmall",
+        borderRadius: "$xs",
+        lineHeight: "$badgeSmall",
+      },
+      md: {
+        padding: "$8 $10",
+        fontSize: "$badgeMedium",
+        borderRadius: "$sm",
+        lineHeight: "$badgeMedium",
+      },
+      xl: {
+        padding: "$12 $12",
+        fontSize: "$badgeLarge",
+        borderRadius: "$sm",
+        lineHeight: "$badgeLarge",
+      },
+    },
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+    radii: {
+      full: {
+        borderRadius: "$full",
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    fontWeight: "regular",
+  },
+});
+
+export type BadgeProps = {
+  as?: ElementType;
+  asChild?: boolean;
+  color?: "primary" | "dark" | "light" | "red" | "green" | "yellow" | "orange" | "blue" | "pink" | "purple" | "grey" | "disable";
+  size?: "xs" | "sm" | "md" | "xl";
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  radii?: "full";
+  icon?: boolean;
+  children: ReactNode;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  css?: CSS<typeof config>;
+};
+
+export function Badge({ asChild, children, ...props }: BadgeProps) {
+  return (
+    <BadgeStyled {...(props as ComponentProps<typeof BadgeStyled>)}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { size: props.size } as any);
+        }
+        return child;
+      })}
+    </BadgeStyled>
+  );
+}

package/src/components/Box.tsx

@@ -1,3 +1,3 @@
-import { Box as BoxRadix } from "@radix-ui/themes";
-export const Box = BoxRadix
-
+import { Box as BoxRadix } from "@radix-ui/themes";
+export const Box = BoxRadix
+

package/src/components/Button/index.tsx

@@ -1,85 +1,85 @@
-import { ButtonHTMLAttributes, ComponentProps, CSSProperties, ReactNode, useMemo } from "react";
-import type { CSS } from "@stitches/react";
-import { ButtonStyled, SpinningDiv } from "./styledComponents";
-import { config } from "../../styles";
-import { Button as ButtonRadix } from "@radix-ui/themes";
-import Icon, { IconProps } from "../Icon";
-import { Flex } from "../Flex";
-
-type TextAlign = "center" | "left" | "right";
-
-const getJustifyByTextAlign = (textAlign: TextAlign) => {
-  switch (textAlign) {
-    case "left":
-      return "start";
-    case "right":
-      return "end";
-    default:
-      return "center";
-  }
-};
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  color?: "brand" | "purple" | "error" | "info" | "success" | "warning" | "neutral" | "white";
-  size?: "extraSmall" | "small" | "medium" | "large";
-  variant?: "text" | "toggle" | "contained" | "outlined" | "menuDropdownItem" | "menuDropdownItemDelete";
-  fontWeight?: "regular" | "medium" | "semibold" | "bold";
-  textAlign?: TextAlign;
-  outlinedBgColor?: "neutral" | "transparent";
-  radii?: "full";
-  isCircle?: boolean;
-  asChild?: boolean;
-  loading?: boolean;
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  css?: CSS<typeof config>;
-}
-
-export function Button({ asChild, children, loading, ...props }: ButtonProps) {
-  const Component = asChild ? ButtonRadix : "button";
-  const { size, disabled, textAlign = "center" } = props;
-
-  const spinnerSize = useMemo((): IconProps["size"] => {
-    switch (size) {
-      case "small":
-        return "sm";
-      case "extraSmall":
-        return "xs";
-      case "medium":
-        return "md";
-      case "large":
-        return "xl";
-      default:
-        return "md";
-    }
-  }, [size]);
-
-  return (
-    <ButtonStyled as={Component} {...(props as ComponentProps<typeof ButtonStyled>)} disabled={disabled || loading}>
-      <div style={{ position: "relative" }}>
-        <Flex
-          justify={getJustifyByTextAlign(textAlign)}
-          align={"center"}
-          css={{ visibility: loading ? "hidden" : undefined }}
-        >
-          {children}
-        </Flex>
-        {loading && (
-          <div
-            style={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-            }}
-          >
-            <SpinningDiv>
-              <Icon name="circle-notch" size={spinnerSize} />
-            </SpinningDiv>
-          </div>
-        )}
-      </div>
-    </ButtonStyled>
-  );
-}
+import { ButtonHTMLAttributes, ComponentProps, CSSProperties, ReactNode, useMemo } from "react";
+import type { CSS } from "@stitches/react";
+import { ButtonStyled, SpinningDiv } from "./styledComponents";
+import { config } from "../../styles";
+import { Button as ButtonRadix } from "@radix-ui/themes";
+import Icon, { IconProps } from "../Icon";
+import { Flex } from "../Flex";
+
+type TextAlign = "center" | "left" | "right";
+
+const getJustifyByTextAlign = (textAlign: TextAlign) => {
+  switch (textAlign) {
+    case "left":
+      return "start";
+    case "right":
+      return "end";
+    default:
+      return "center";
+  }
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: "brand" | "purple" | "error" | "info" | "success" | "warning" | "neutral" | "white";
+  size?: "extraSmall" | "small" | "medium" | "large";
+  variant?: "text" | "toggle" | "contained" | "outlined" | "menuDropdownItem" | "menuDropdownItemDelete";
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: TextAlign;
+  outlinedBgColor?: "neutral" | "transparent";
+  radii?: "full";
+  isCircle?: boolean;
+  asChild?: boolean;
+  loading?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  css?: CSS<typeof config>;
+}
+
+export function Button({ asChild, children, loading, ...props }: ButtonProps) {
+  const Component = asChild ? ButtonRadix : "button";
+  const { size, disabled, textAlign = "center" } = props;
+
+  const spinnerSize = useMemo((): IconProps["size"] => {
+    switch (size) {
+      case "small":
+        return "sm";
+      case "extraSmall":
+        return "xs";
+      case "medium":
+        return "md";
+      case "large":
+        return "xl";
+      default:
+        return "md";
+    }
+  }, [size]);
+
+  return (
+    <ButtonStyled as={Component} {...(props as ComponentProps<typeof ButtonStyled>)} disabled={disabled || loading}>
+      <div style={{ position: "relative" }}>
+        <Flex
+          justify={getJustifyByTextAlign(textAlign)}
+          align={"center"}
+          css={{ visibility: loading ? "hidden" : undefined }}
+        >
+          {children}
+        </Flex>
+        {loading && (
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <SpinningDiv>
+              <Icon name="circle-notch" size={spinnerSize} />
+            </SpinningDiv>
+          </div>
+        )}
+      </div>
+    </ButtonStyled>
+  );
+}