globalfy-design-system 0.3.0 → 0.4.0

package/src/components/atoms/RadioGroup/RadioGroup.test.tsx

@@ -1,47 +0,0 @@
-import { render } from "@testing-library/react";
-import { RadioGroup } from "./RadioGroup";
-
-describe("RadioGroup Component", () => {
-  const options = [
-    { value: "value1", id: "id1", label: "Label1" },
-    { value: "value2", id: "id2", label: "Label2" }
-  ];
-
-  test("should render the correct radio inputs and labels", () => {
-    const { getAllByRole, getByText } = render(
-      <RadioGroup options={options} />
-    );
-    const radios = getAllByRole("radio");
-    expect(radios.length).toBe(options.length);
-
-    options.forEach((option) => {
-      expect(getByText(option.label)).toBeInTheDocument();
-      const labelOne = getByText("Label1");
-      const labelTwo = getByText("Label2");
-      expect(labelOne).toBeInTheDocument();
-      expect(labelTwo).toBeInTheDocument();
-    });
-  });
-
-  test("should render a radio group component with label on the left", () => {
-    const oneOption = [{ value: "value2", id: "id2", label: "Label2" }];
-    const { getByRole } = render(
-      <RadioGroup options={oneOption} labelPosition="left" />
-    );
-    const radioGroupItem = getByRole("radio");
-    expect(radioGroupItem).toBeInTheDocument();
-    expect(radioGroupItem.nextSibling).toBeNull();
-    expect(radioGroupItem.previousSibling).not.toBeNull();
-  });
-
-  test("should render a radio group component with label on the right", () => {
-    const oneOption = [{ value: "value2", id: "id2", label: "Label2" }];
-    const { getByRole } = render(
-      <RadioGroup options={oneOption} labelPosition="right" />
-    );
-    const radioGroupItem = getByRole("radio");
-    expect(radioGroupItem).toBeInTheDocument();
-    expect(radioGroupItem.nextSibling).not.toBeNull();
-    expect(radioGroupItem.previousSibling).toBeNull();
-  });
-});

package/src/components/atoms/RadioGroup/RadioGroup.tsx

@@ -1,26 +0,0 @@
-import {
-  RadioGroup as SCNRadioGroup,
-  RadioGroupItem as SCNRadioGroupItem
-} from "@/shadcn/components/ui/radio-group";
-import { RadioGroupProps } from "./RadioGroup.types";
-
-export const RadioGroup = ({
-  options,
-  labelPosition = "right"
-}: RadioGroupProps) => {
-  return (
-    <SCNRadioGroup>
-      {options.map((option) => (
-        <div key={option.value} className="flex gap-2 items-center">
-          {labelPosition === "left" && option.label}
-          <SCNRadioGroupItem
-            value={option.value}
-            id={option.id}
-            className="flex items-center justify-center h-5 w-5 border-globalfy-grey900 text-globalfy-white data-[state=checked]:bg-globalfy-primaryGreen data-[state=checked]:border-globalfy-primaryGreen"
-          />
-          {labelPosition === "right" && option.label}
-        </div>
-      ))}
-    </SCNRadioGroup>
-  );
-};

package/src/components/atoms/RadioGroup/RadioGroup.types.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-
-export type RadioGroupOption = {
-  label: ReactNode;
-  value: string;
-  id: string;
-};
-
-export type RadioGroupProps = {
-  options: RadioGroupOption[];
-  labelPosition?: "left" | "right";
-};

package/src/components/atoms/RadioGroup/index.ts

@@ -1 +0,0 @@
-export * from "./RadioGroup";

package/src/components/atoms/Switch/Switch.stories.tsx

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Switch } from "./Switch";
-
-const meta = {
-  title: "Components/Atoms/Switch",
-  component: Switch,
-  tags: ["autodocs"]
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    variant: "regular"
-  }
-};

package/src/components/atoms/Switch/Switch.test.tsx

@@ -1,12 +0,0 @@
-import { render } from "@testing-library/react";
-
-import { Switch } from "./Switch";
-
-describe("Switch Component", () => {
-  test("should render a switch component", async () => {
-    const { getByRole } = await render(<Switch />);
-    const switchTest = getByRole("switch");
-
-    expect(switchTest).toBeTruthy();
-  });
-});

package/src/components/atoms/Switch/Switch.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { SwitchProps } from "./Switch.types";
-import { cva } from "class-variance-authority";
-import { classNames } from "@/utils/tailwind/classNames";
-import { Switch as SCNSwitch } from "@/shadcn/components/ui/switch";
-
-export const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & SwitchProps
->(({ className, variant, ...props }, ref) => {
-  const variants = cva(
-    "data-[state=checked]:bg-globalfy-primaryGreen data-[state=unchecked]:bg-globalfy-grey600",
-    {
-      variants: {
-        variant: {
-          regular: "",
-          large:
-            "h-[64px] w-[116px] [&>*]:h-[48px] [&>*]:w-[48px] [&>*]:data-[state=checked]:translate-x-14 [&>*]:data-[state=unchecked]:translate-x-2"
-        }
-      }
-    }
-  );
-
-  return (
-    <SCNSwitch
-      className={classNames(className, variants({ variant }))}
-      {...props}
-      ref={ref}
-    />
-  );
-});

package/src/components/atoms/Switch/Switch.types.ts

@@ -1,3 +0,0 @@
-export type SwitchProps = {
-  variant?: "regular" | "large";
-};

package/src/components/atoms/Switch/index.ts

@@ -1,2 +0,0 @@
-export * from "./Switch";
-export * from "./Switch.types";

package/src/components/atoms/Typography/Typography.stories.tsx

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Typography } from ".";
-
-const meta = {
-  title: "Components/Atoms/Typography",
-  component: Typography,
-  tags: ["autodocs"]
-} satisfies Meta<typeof Typography>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    children: "Typography"
-  }
-};

package/src/components/atoms/Typography/Typography.test.tsx

@@ -1,10 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Typography } from "./Typography";
-
-describe("Typography Component", () => {
-  test("should render the provided children", async () => {
-    render(<Typography>Typography</Typography>);
-    expect(screen.getByText("Typography")).toBeTruthy();
-  });
-});

package/src/components/atoms/Typography/Typography.tsx

@@ -1,37 +0,0 @@
-import { cva } from "class-variance-authority";
-import { TypographyProps } from "./Typography.types";
-import { classNames } from "@/utils/tailwind/classNames";
-
-export const Typography = ({
-  children,
-  className,
-  font = "satoshi",
-  weight = "regular",
-  ...props
-}: TypographyProps) => {
-  const typographyVariants = cva("", {
-    variants: {
-      font: {
-        satoshi: "font-satoshi",
-        livvic: "font-livvic"
-      },
-      weight: {
-        light: "font-light",
-        regular: "font-normal",
-        medium: "font-medium",
-        semibold: "font-semibold",
-        bold: "font-bold",
-        black: "font-black"
-      }
-    }
-  });
-
-  return (
-    <p
-      {...props}
-      className={classNames(className, typographyVariants({ font, weight }))}
-    >
-      {children}
-    </p>
-  );
-};

package/src/components/atoms/Typography/Typography.types.ts

@@ -1,7 +0,0 @@
-import { HTMLAttributes } from "react";
-
-export type TypographyProps = {
-  children: React.ReactNode;
-  font?: "satoshi" | "livvic";
-  weight?: "light" | "regular" | "medium" | "semibold" | "bold" | "black";
-} & HTMLAttributes<HTMLParagraphElement>;

package/src/components/atoms/Typography/index.ts

@@ -1,2 +0,0 @@
-export * from "./Typography";
-export * from "./Typography.types";

package/src/components/atoms/index.ts

@@ -1,9 +0,0 @@
-export * from "./Logo";
-export * from "./FieldMessage";
-export * from "./Typography";
-export * from "./Flag";
-export * from "./Icon";
-export * from "./Switch";
-export * from "./Checkbox";
-export * from "./Avatar";
-export * from "./RadioGroup";

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from "./atoms";

package/src/global.css

@@ -1,76 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/src/main.ts

@@ -1 +0,0 @@
-export * from "./components";

package/src/shadcn/components/ui/avatar.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/shadcn/utils";
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };

package/src/shadcn/components/ui/button.tsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/shadcn/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/shadcn/components/ui/checkbox.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-
-import { cn } from "@/shadcn/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check strokeWidth={4} className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };

package/src/shadcn/components/ui/form.tsx

@@ -1,177 +0,0 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext
-} from "react-hook-form";
-
-import { Label } from "@/shadcn/components/ui/label";
-import { cn } from "@/shadcn/utils";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField
-};

package/src/shadcn/components/ui/label.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/shadcn/utils";
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };