torch-glare 2.0.0 → 2.1.1

package/apps/lib/components/IosDatePicker-dev.tsx

@@ -0,0 +1,341 @@
+import { ComponentProps, forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react';
+import { getDaysInMonth } from 'date-fns';
+import { Popover, PopoverContent, PopoverTrigger } from './Popover';
+import { InputField } from './InputField';
+
+interface PickerValue {
+    [key: string]: string | number;
+}
+
+function getDayArray(year: number, month: number): string[] {
+    const dayCount = getDaysInMonth(new Date(year, month - 1));
+    return Array.from({ length: dayCount }, (_, i) => String(i + 1).padStart(2, '0'));
+}
+
+interface IosDatePickerProps extends Omit<ComponentProps<typeof InputField>, 'onChange'> {
+    onChange?: (e: Date) => void;
+    theme?: "dark" | "light" | "default";
+}
+
+export const IosDatePicker = forwardRef<HTMLInputElement, IosDatePickerProps>(
+    ({ theme = "dark", onChange, ...props }, forwardedRef) => {
+        const today = new Date();
+
+        const [year, setYear] = useState(String(today.getFullYear()));
+        const [month, setMonth] = useState(String(today.getMonth() + 1).padStart(2, '0'));
+        const [day, setDay] = useState(String(today.getDate()).padStart(2, '0'));
+
+        const currentYear = new Date().getFullYear();
+        const years = Array.from({ length: 150 }, (_, i) => `${currentYear - 100 + i}`);
+        const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));
+        const days = getDayArray(Number(year), Number(month));
+        const monthsNames = [
+            "January", "February", "March", "April", "May", "June",
+            "July", "August", "September", "October", "November", "December",
+        ];
+
+        // Update handlers for each state separately
+        const handleYearChange = (value: string) => {
+            setYear(value);
+            const newDays = getDayArray(Number(value), Number(month));
+            if (!newDays.includes(day)) {
+                setDay(newDays[newDays.length - 1]);
+            }
+            triggerOnChange(value, month, day);
+        };
+
+        const handleMonthChange = (value: string) => {
+            setMonth(value);
+            const newDays = getDayArray(Number(year), Number(value));
+            if (!newDays.includes(day)) {
+                setDay(newDays[newDays.length - 1]);
+            }
+            triggerOnChange(year, value, day);
+        };
+
+        const handleDayChange = (value: string) => {
+            setDay(value);
+            triggerOnChange(year, month, value);
+        };
+
+        // Function to trigger onChange callback
+        const triggerOnChange = (y: string, m: string, d: string) => {
+            if (onChange) {
+                onChange(new Date(`${y}-${m}-${d}`));
+            }
+        };
+
+        return (
+            <Popover>
+                <PopoverTrigger data-theme={theme} className='w-full flex-1'>
+                    <InputField
+                        theme={theme}
+                        {...props}
+                        ref={forwardedRef}
+                        value={`${year}/${month}/${day}`}
+                        readOnly
+                    />
+                </PopoverTrigger>
+                <PopoverContent data-theme={theme} dir="ltr" variant={props.variant} className="overflow-hidden w-[285px] flex justify-center items-center p-[6px] pt-[30px]">
+                    <div className="flex justify-evenly items-center w-full absolute top-0 py-[6px]">
+                        <p className="text-content-system-global-secondary typography-headers-medium-regular">Year</p>
+                        <div className="flex justify-center items-center self-center">
+                            <span className="h-[13px] w-[1px] bg-border-system-global-secondary rounded-[3px]"></span>
+                            <p className="text-content-system-global-secondary typography-headers-medium-regular px-[18px]">Month</p>
+                            <span className="h-[13px] w-[1px] bg-border-system-global-secondary rounded-[3px]"></span>
+                        </div>
+                        <p className="text-content-system-global-secondary typography-headers-medium-regular">Day</p>
+                    </div>
+                    <div className='absolute inset-0 w-full h-full flex justify-center items-center z-0 p-[6px]'>
+                        <div className='w-full h-[42px] rounded-[8px] bg-background-system-body-tertiary mt-[23px]'></div>
+                    </div>
+
+                    <div
+                        className="relative flex w-full h-[300px] max-w-full mx-auto text-white"
+                        style={{
+                            maskImage: 'linear-gradient(to top, transparent, transparent 10%, white 50%, white 19%, transparent 75%, transparent)',
+                            WebkitMaskImage: 'linear-gradient(to top, transparent, transparent 10%, white 50%, white 19%, transparent 75%, transparent)',
+                        }}
+                    >
+                        <IosPickerItem
+                            onValueSelect={handleYearChange}
+                            slideData={years}
+                            perspective="left"
+                            selectedValue={year}
+                        >
+                            {years.map((value) => (
+                                <SliderItem key={value}>{value}</SliderItem>
+                            ))}
+                        </IosPickerItem>
+                        <IosPickerItem
+                            onValueSelect={handleMonthChange}
+                            slideData={months}
+                            perspective="left"
+                            selectedValue={month}
+                        >
+                            {months.map((value) => (
+                                <SliderItem key={value}>
+                                    {`${monthsNames[Number(value) - 1].substring(0, 3)}-${value}`}
+                                </SliderItem>
+                            ))}
+                        </IosPickerItem>
+                        <IosPickerItem
+                            onValueSelect={handleDayChange}
+                            slideData={getDayArray(Number(year), Number(month))}
+                            perspective="right"
+                            selectedValue={day}
+                        >
+                            {getDayArray(Number(year), Number(month)).map((value) => (
+                                <SliderItem key={`${value}-days`}>{value}</SliderItem>
+                            ))}
+                        </IosPickerItem>
+                    </div>
+                </PopoverContent>
+            </Popover>
+        );
+    }
+);
+
+// using with react hook form lib
+/* 
+ <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="date"
+        control={control}
+        render={({ field }) => (
+          <SlideDatePicker
+            {...field}
+            onChange={(value: Date) => field.onChange(value)}
+          />
+        )}
+      />
+      <button>submit</button>
+    </form>
+*/
+
+
+
+import { EmblaCarouselType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
+
+
+const CIRCLE_DEGREES = 360;
+const WHEEL_ITEM_SIZE = 32;
+const WHEEL_ITEM_COUNT = 18;
+const WHEEL_ITEMS_IN_VIEW = 4;
+const WHEEL_ITEM_RADIUS = CIRCLE_DEGREES / WHEEL_ITEM_COUNT;
+const IN_VIEW_DEGREES = WHEEL_ITEM_RADIUS * WHEEL_ITEMS_IN_VIEW;
+const WHEEL_RADIUS = Math.round(
+    WHEEL_ITEM_SIZE / 2 / Math.tan(Math.PI / WHEEL_ITEM_COUNT)
+);
+
+const isInView = (wheelLocation: number, slidePosition: number): boolean =>
+    Math.abs(wheelLocation - slidePosition) < IN_VIEW_DEGREES;
+
+interface PropType extends HTMLAttributes<HTMLDivElement> {
+    loop?: boolean;
+    slideData: string[];
+    selectedValue: any
+    perspective: 'left' | 'right';
+    onValueSelect?: (value: string) => void; // Callback to pass the selected value to the parent
+}
+
+const IosPickerItem: React.FC<PropType> = ({
+    onValueSelect,
+    slideData,
+    perspective,
+    selectedValue,
+    loop = false,
+    ...props
+}) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop,
+        axis: 'y',
+        dragFree: true,
+        containScroll: false,
+        watchSlides: false,
+    });
+
+    const rootNodeRef = useRef<HTMLDivElement>(null);
+    const [totalRadius, setTotalRadius] = useState(slideData.length * WHEEL_ITEM_RADIUS);
+    const [rotationOffset, setRotationOffset] = useState(loop ? 0 : WHEEL_ITEM_RADIUS);
+
+    // Update totalRadius and rotationOffset when data or loop changes
+    useEffect(() => {
+        setTotalRadius(slideData.length * WHEEL_ITEM_RADIUS);
+        setRotationOffset(loop ? 0 : WHEEL_ITEM_RADIUS);
+    }, [slideData, loop]);
+
+    const inactivateEmblaTransform = useCallback(
+        (emblaApi: EmblaCarouselType) => {
+            if (!emblaApi) return;
+            const { translate, slideLooper } = emblaApi.internalEngine();
+            translate.clear();
+            translate.toggleActive(false);
+            slideLooper.loopPoints.forEach(({ translate }) => {
+                translate.clear();
+                translate.toggleActive(false);
+            });
+        },
+        []
+    );
+
+    console.log(slideData.length)
+
+
+    const rotateWheel = useCallback(
+        (emblaApi: EmblaCarouselType) => {
+            const rotation = slideData.length * WHEEL_ITEM_RADIUS - rotationOffset;
+            const wheelRotation = rotation * emblaApi.scrollProgress();
+            emblaApi.containerNode().style.transform = `translateZ(${0}px) rotateX(${wheelRotation}deg)`;
+            emblaApi.slideNodes().forEach((_, index) => {
+                setSlideStyles(emblaApi, index, loop, slideData.length, totalRadius);
+            });
+        },
+        [slideData, rotationOffset, totalRadius, loop]
+    );
+
+    const setSlideStyles = useCallback(
+        (
+            emblaApi: EmblaCarouselType,
+            index: number,
+            loop: boolean,
+            dataLength: number,
+            totalRadius: number
+        ) => {
+            const slideNode = emblaApi.slideNodes()[index];
+            const wheelLocation = emblaApi.scrollProgress() * totalRadius;
+            const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius;
+            const positionLoopStart = positionDefault + totalRadius;
+            const positionLoopEnd = positionDefault - totalRadius;
+
+            let inView = false;
+            let angle = index * -WHEEL_ITEM_RADIUS;
+
+            if (isInView(wheelLocation, positionDefault)) {
+                inView = true;
+            }
+
+            if (loop && isInView(wheelLocation, positionLoopEnd)) {
+                inView = true;
+                angle = -CIRCLE_DEGREES + (dataLength - index) * WHEEL_ITEM_RADIUS;
+            }
+
+            if (loop && isInView(wheelLocation, positionLoopStart)) {
+                inView = true;
+                angle = -(totalRadius % CIRCLE_DEGREES) - index * WHEEL_ITEM_RADIUS;
+            }
+
+            if (inView) {
+                slideNode.style.opacity = '1';
+                slideNode.style.transform = `translateY(-${index * 100}%) rotateX(${angle}deg) translateZ(${WHEEL_RADIUS}px)`;
+            } else {
+                slideNode.style.opacity = '0';
+                slideNode.style.transform = 'none';
+            }
+        },
+        [loop, totalRadius]
+    );
+
+    const handleSelection = useCallback(
+        (emblaApi: EmblaCarouselType) => {
+            const selectedIndex = emblaApi.selectedScrollSnap();
+            const selectedValue = slideData[selectedIndex];
+            if (onValueSelect) {
+                onValueSelect(selectedValue); // Pass the selected value to the parent
+            }
+        },
+        [slideData]
+    );
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        emblaApi.on('pointerUp', (emblaApi) => {
+            const { scrollTo, target, location } = emblaApi.internalEngine();
+            const diffToTarget = target.get() - location.get();
+            const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1;
+            const distance = diffToTarget * factor;
+            scrollTo.distance(distance, true);
+        });
+
+        emblaApi.on('scroll', rotateWheel);
+        emblaApi.on('select', handleSelection); // Listen for slide selection changes
+
+        emblaApi.on('reInit', (emblaApi) => {
+            inactivateEmblaTransform(emblaApi);
+            rotateWheel(emblaApi);
+        });
+
+        inactivateEmblaTransform(emblaApi);
+        rotateWheel(emblaApi);
+    }, [emblaApi]);
+
+    return (
+        <div {...props} className="flex items-center justify-center w-[90px] h-full text-[1.8rem]">
+            <div className="min-w-full h-full flex items-center justify-center overflow-hidden touch-pan-x" ref={rootNodeRef}>
+                <div
+                    className={`w-[75px] h-[32px] perspective-[3200px] select-none ${perspective === 'left'
+                        ? '[perspective-origin:calc(50%+130px)]'
+                        : '[perspective-origin:calc(50%-130px)]'
+                        }`}
+                    ref={emblaRef}
+                >
+                    <div className="flex flex-col w-full h-full [transform-style:preserve-3d] will-change-transform scroll-smooth">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface SliderItemType extends HTMLAttributes<HTMLDivElement> { }
+const SliderItem = (props: SliderItemType) => {
+    return (
+        <div className="w-full h-full text-[19px] text-center flex items-center justify-center [backface-visibility:hidden] opacity-0" {...props}>
+            {props.children}
+        </div>
+    );
+};
+

package/docs/components/badge-field.md

@@ -34,8 +34,8 @@ import { useState } from 'react'
 export function BasicBadgeField() {
   const [tags] = useState([
     { id: '1', name: 'React', variant: 'blue' },
-    { id: '2', name: 'TypeScript', variant: 'bluePurple' },
-    { id: '3', name: 'Next.js', variant: 'navy' },
+    { id: '2', name: 'TypeScript', variant: 'purple' },
+    { id: '3', name: 'Next.js', variant: 'slate' },
   ])
 
   return (
@@ -60,12 +60,12 @@ export function TechnologySelector() {
 
   const allTags: Tag[] = [
     { id: '1', name: 'React', variant: 'blue' },
-    { id: '2', name: 'TypeScript', variant: 'bluePurple' },
-    { id: '3', name: 'Next.js', variant: 'navy' },
-    { id: '4', name: 'Tailwind CSS', variant: 'cocktailGreen' },
+    { id: '2', name: 'TypeScript', variant: 'purple' },
+    { id: '3', name: 'Next.js', variant: 'slate' },
+    { id: '4', name: 'Tailwind CSS', variant: 'green' },
     { id: '5', name: 'Node.js', variant: 'green' },
     { id: '6', name: 'PostgreSQL', variant: 'blue' },
-    { id: '7', name: 'MongoDB', variant: 'greenLight' },
+    { id: '7', name: 'MongoDB', variant: 'green' },
     { id: '8', name: 'GraphQL', variant: 'purple' },
     { id: '9', name: 'REST API', variant: 'gray' },
     { id: '10', name: 'Docker', variant: 'blue' },
@@ -105,9 +105,9 @@ export function CategoryFilter() {
     { id: 'development', name: 'Development', variant: 'blue' },
     { id: 'marketing', name: 'Marketing', variant: 'yellow' },
     { id: 'sales', name: 'Sales', variant: 'green' },
-    { id: 'support', name: 'Support', variant: 'redOrange' },
+    { id: 'support', name: 'Support', variant: 'orange' },
     { id: 'hr', name: 'Human Resources', variant: 'rose' },
-    { id: 'finance', name: 'Finance', variant: 'navy' },
+    { id: 'finance', name: 'Finance', variant: 'slate' },
   ]
 
   const [selectedCategories, setSelectedCategories] = useState<Tag[]>([])
@@ -152,13 +152,13 @@ export function SkillsSelector() {
     { id: 'ts', name: 'TypeScript', variant: 'blue' },
     { id: 'react', name: 'React', variant: 'blue' },
     { id: 'vue', name: 'Vue.js', variant: 'green' },
-    { id: 'angular', name: 'Angular', variant: 'redLight' },
-    { id: 'node', name: 'Node.js', variant: 'greenLight' },
+    { id: 'angular', name: 'Angular', variant: 'red' },
+    { id: 'node', name: 'Node.js', variant: 'green' },
     { id: 'python', name: 'Python', variant: 'blue' },
-    { id: 'java', name: 'Java', variant: 'redOrange' },
-    { id: 'go', name: 'Go', variant: 'cocktailGreen' },
-    { id: 'rust', name: 'Rust', variant: 'redOrange' },
-    { id: 'sql', name: 'SQL', variant: 'navy' },
+    { id: 'java', name: 'Java', variant: 'orange' },
+    { id: 'go', name: 'Go', variant: 'green' },
+    { id: 'rust', name: 'Rust', variant: 'orange' },
+    { id: 'sql', name: 'SQL', variant: 'slate' },
     { id: 'nosql', name: 'NoSQL', variant: 'green' },
     { id: 'aws', name: 'AWS', variant: 'yellow' },
     { id: 'azure', name: 'Azure', variant: 'blue' },
@@ -213,16 +213,16 @@ Tag management for projects with custom variants.
 ```tsx
 export function ProjectTags() {
   const projectTags: Tag[] = [
-    { id: '1', name: 'High Priority', variant: 'redLight' },
+    { id: '1', name: 'High Priority', variant: 'red' },
     { id: '2', name: 'In Progress', variant: 'blue' },
     { id: '3', name: 'Completed', variant: 'green' },
     { id: '4', name: 'On Hold', variant: 'yellow' },
     { id: '5', name: 'Needs Review', variant: 'purple' },
-    { id: '6', name: 'Client Approval', variant: 'bluePurple' },
+    { id: '6', name: 'Client Approval', variant: 'purple' },
     { id: '7', name: 'Internal', variant: 'gray' },
-    { id: '8', name: 'External', variant: 'navy' },
-    { id: '9', name: 'Urgent', variant: 'redOrange' },
-    { id: '10', name: 'Can Wait', variant: 'greenLight' },
+    { id: '8', name: 'External', variant: 'slate' },
+    { id: '9', name: 'Urgent', variant: 'orange' },
+    { id: '10', name: 'Can Wait', variant: 'green' },
   ]
 
   const [projectData, setProjectData] = useState({
@@ -310,7 +310,7 @@ export function BadgeFieldWithIcon() {
   const tags: Tag[] = [
     { id: '1', name: 'JavaScript', variant: 'yellow' },
     { id: '2', name: 'Python', variant: 'blue' },
-    { id: '3', name: 'Ruby', variant: 'redLight' },
+    { id: '3', name: 'Ruby', variant: 'red' },
   ]
 
   return (
@@ -385,7 +385,7 @@ export function EmailRecipients() {
     { id: '1', name: 'john@example.com', variant: 'blue' },
     { id: '2', name: 'jane@example.com', variant: 'green' },
     { id: '3', name: 'team@example.com', variant: 'purple' },
-    { id: '4', name: 'support@example.com', variant: 'navy' },
+    { id: '4', name: 'support@example.com', variant: 'slate' },
   ]
 
   const [recipients, setRecipients] = useState<Tag[]>([])