Select primitive t1

src/components/ui/AlertDialog/fragments/AlertDialogPortal.tsx

@@ -8,9 +8,8 @@
 };
 
 const AlertDialogPortal = ({ children }: AlertDialogPortalProps) => {
     const { rootClass } = useContext(AlertDialogContext);
     const rootElement = document.querySelector('#rad-ui-theme-container') || document.body as HTMLElement | null;
-
     return (
         <Floater.Portal
             root={rootElement}

src/components/ui/Select/Select.tsx

@@ -0,0 +1,21 @@
+'use client';
+import SelectContent from './fragments/SelectContent';
+import SelectItem from './fragments/SelectItem';
+import SelectTrigger from './fragments/SelectTrigger';
+import SelectRoot from './fragments/SelectRoot';
+import SelectIndicator from './fragments/SelectIndicator';
+import SelectPortal from './fragments/SelectPortal';
+
+const Select = () => {
+    console.warn('Direct usage of Select is not supported. Please use Select.Root, Select.Content, etc. instead.');
+    return null;
+};
+
+Select.Root = SelectRoot;
+Select.Content = SelectContent;
+Select.Item = SelectItem;
+Select.Trigger = SelectTrigger;
+Select.Portal = SelectPortal;
+Select.Indicator = SelectIndicator;
+
+export default Select;

src/components/ui/Select/contexts/SelectRootContext.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface SelectRootContextType {
+   rootClass: string;
+}
+
+export const SelectRootContext = React.createContext<SelectRootContextType>({
+    rootClass: ''
+});

src/components/ui/Select/fragments/SelectContent.tsx

@@ -0,0 +1,22 @@
+'use client';
+import React, { useEffect, useRef, useContext } from 'react';
+import SelectPrimitive from '~/core/primitives/Select/Select';
+import { SelectRootContext } from '../contexts/SelectRootContext';
+
+function SelectContent({ customRootClass, children, position = 'popper', ...props }: any) {
+    const { rootClass } = useContext(SelectRootContext);
+    return (
+        <SelectPrimitive.Content
+            className={`${rootClass}-content`}
+            position={position}
+            data-position={position}
+
+            {...props}
+        >
+
+            {children}
+        </SelectPrimitive.Content>
+    );
+}
+
+export default SelectContent;

src/components/ui/Select/fragments/SelectIndicator.tsx

@@ -0,0 +1,16 @@
+'use client';
+import React, { useContext } from 'react';
+import { SelectRootContext } from '../contexts/SelectRootContext';
+
+function SelectIndicator() {
+    const { rootClass } = useContext(SelectRootContext);
+    return (
+        <div className={`${rootClass}-item-indicator`}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.3332 4L5.99984 11.3333L2.6665 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+        </div>
+    );
+}
+
+export default SelectIndicator;

src/components/ui/Select/fragments/SelectItem.tsx

@@ -0,0 +1,24 @@
+'use client';
+import React, { useContext } from 'react';
+import SelectPrimitive from '~/core/primitives/Select/Select';
+import { SelectRootContext } from '../contexts/SelectRootContext';
+
+function SelectItem({ customRootClass, children, value, disabled, ...props }: any) {
+    const { rootClass } = useContext(SelectRootContext);
+
+    return (
+        <SelectPrimitive.Item
+            className={`${rootClass}-item`}
+            value={value}
+            disabled={disabled}
+            data-disabled={disabled ? '' : undefined}
+            role="option"
+            aria-disabled={disabled ? 'true' : undefined}
+            {...props}
+        >
+            <span className={`${rootClass}-text`}>{children}</span>
+        </SelectPrimitive.Item>
+    );
+}
+
+export default SelectItem;

src/components/ui/Select/fragments/SelectPortal.tsx

@@ -0,0 +1,20 @@
+'use client';
+import React, { useContext } from 'react';
+import SelectPrimitive from '~/core/primitives/Select/Select';
+
+export type SelectPortalProps = {
+  children: React.ReactNode;
+};
+
+const SelectPortal = ({ children }: SelectPortalProps) => {
+    const rootElement = document.querySelector('#rad-ui-theme-container') || document.body as HTMLElement | null;
+
+    return (
+        <SelectPrimitive.Portal>
+            {children}
+        </SelectPrimitive.Portal>
+
+    );
+};
+
+export default SelectPortal;

src/components/ui/Select/fragments/SelectRoot.tsx

@@ -0,0 +1,27 @@
+import React, { useState, useCallback } from 'react';
+import SelectPrimitive from '~/core/primitives/Select/Select';
+import { customClassSwitcher } from '~/core/customClassSwitcher';
+import { SelectRootContext } from '../contexts/SelectRootContext';
+
+const COMPONENT_NAME = 'Select';
+
+function SelectRoot({ customRootClass, children, defaultValue, value, onValueChange, ...props }: any) {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+    return (
+        <SelectRootContext.Provider value={{ rootClass }}>
+            <SelectPrimitive.Root
+                className={`${rootClass}-root`}
+                defaultValue={defaultValue}
+                value={value}
+                onValueChange={onValueChange}
+                {...props}
+            >
+                {children}
+            </SelectPrimitive.Root>
+        </SelectRootContext.Provider>
+
+    );
+}
+
+export default SelectRoot;

src/components/ui/Select/fragments/SelectTrigger.tsx

@@ -0,0 +1,26 @@
+'use client';
+import React, { useContext } from 'react';
+import SelectPrimitive from '~/core/primitives/Select/Select';
+
+import { SelectRootContext } from '../contexts/SelectRootContext';
+
+function SelectTrigger({ customRootClass, children, disabled, placeholder, ...props }: any) {
+    const { rootClass } = useContext(SelectRootContext);
+    const triggerRef = React.useRef<HTMLDivElement>(null);
+    console.log(triggerRef);
+    return (
+        <SelectPrimitive.Trigger
+            className={`${rootClass}-trigger`}
+            aria-disabled={disabled ? 'true' : undefined}
+            data-placeholder={placeholder ? '' : undefined}
+            ref={triggerRef}
+            {...props}
+        >
+
+            {children}
+
+        </SelectPrimitive.Trigger>
+    );
+}
+
+export default SelectTrigger;

src/components/ui/Select/stories/Select.stories.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import Select from '../Select';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import SelectPrimitive from '~/core/primitives/Select/Select';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'WIP/Select',
+    component: Select
+};
+
+export const Basic = () => {
+    return (
+        <SandboxEditor>
+            <div className="w-[240px]">
+                <Select.Root>
+                    <Select.Trigger>
+                        <span>Select an option</span>
+                    </Select.Trigger>
+                    <Select.Portal>
+                        <Select.Content>
+                            <Select.Item value="apple"> <Select.Indicator />Apple</Select.Item>
+                            <Select.Item value="banana"> <Select.Indicator />Banana</Select.Item>
+                            <Select.Item value="orange"> <Select.Indicator />Orange</Select.Item>
+                            <Select.Item value="grape"> <Select.Indicator />Grape</Select.Item>
+                        </Select.Content>
+                    </Select.Portal>
+                </Select.Root>
+            </div>
+        </SandboxEditor>
+    );
+};
+
+export const WithDisabledOptions = () => {
+    return (
+        <SandboxEditor>
+            <div className="w-[240px]">
+                <Select.Root>
+                    <Select.Trigger>
+                        <span>Select a fruit</span>
+                    </Select.Trigger>
+                    <Select.Content>
+                        <Select.Item value="apple">Apple</Select.Item>
+                        <Select.Item value="banana">Banana</Select.Item>
+                        <Select.Item value="orange" disabled>Orange (Sold Out)</Select.Item>
+                        <Select.Item value="grape">Grape</Select.Item>
+                        <Select.Item value="pear" disabled>Pear (Sold Out)</Select.Item>
+                    </Select.Content>
+                </Select.Root>
+            </div>
+        </SandboxEditor>
+    );
+};
+
+export const WithInitialValue = () => {
+    return (
+        <SandboxEditor>
+            <div className="w-[240px]">
+                <Select.Root defaultValue="react">
+                    <Select.Trigger>
+                        <span>Favorite Framework</span>
+                    </Select.Trigger>
+                    <Select.Content>
+                        <Select.Item value="react">React</Select.Item>
+                        <Select.Item value="angular">Angular</Select.Item>
+                        <Select.Item value="vue">Vue</Select.Item>
+                        <Select.Item value="svelte">Svelte</Select.Item>
+                    </Select.Content>
+                </Select.Root>
+            </div>
+        </SandboxEditor>
+    );
+};
+
+export const MultipleSelects = () => {
+    return (
+        <SandboxEditor>
+            <div className="flex flex-col gap-4">
+                <div className="w-[240px]">
+                    <Select.Root>
+                        <Select.Trigger>
+                            <span>Select a color</span>
+                        </Select.Trigger>
+                        <Select.Content>
+                            <Select.Item value="red">Red</Select.Item>
+                            <Select.Item value="green">Green</Select.Item>
+                            <Select.Item value="blue">Blue</Select.Item>
+                            <Select.Item value="yellow">Yellow</Select.Item>
+                        </Select.Content>
+                    </Select.Root>
+                </div>
+
+                <div className="w-[240px]">
+                    <Select.Root>
+                        <Select.Trigger>
+                            <span>Select a size</span>
+                        </Select.Trigger>
+                        <Select.Content>
+                            <Select.Item value="sm">Small</Select.Item>
+                            <Select.Item value="md">Medium</Select.Item>
+                            <Select.Item value="lg">Large</Select.Item>
+                            <Select.Item value="xl">Extra Large</Select.Item>
+                        </Select.Content>
+                    </Select.Root>
+                </div>
+            </div>
+        </SandboxEditor>
+    );
+};
+
+export const ControlledExample = () => {
+    const [value, setValue] = React.useState('');
+    return (
+        <SandboxEditor>
+            <div className="w-[240px]">
+                <Select.Root defaultValue="option1" value={value} onValueChange={setValue}>
+                    <Select.Trigger>
+            helo
+                    </Select.Trigger>
+                    <Select.Content>
+                        <Select.Item value='option1'>Option 1</Select.Item>
+                        <Select.Item value='option2'>Option 2</Select.Item>
+                        <Select.Item value='option3'>Option 3</Select.Item>
+                    </Select.Content>
+                </Select.Root>
+            </div>
+
+            <div className='mt-32'>
+                <p className='text-gray-950'>Value: {value}</p>
+            </div>
+        </SandboxEditor>
+    );
+};

src/core/primitives/Select/Select.tsx

@@ -0,0 +1,20 @@
+import SelectPrimitiveContent from './fragments/SelectPrimitiveContent';
+import SelectPrimitiveItem from './fragments/SelectPrimitiveItem';
+import SelectPrimitiveTrigger from './fragments/SelectPrimitiveTrigger';
+import SelectPrimitiveRoot from './fragments/SelectPrimitiveRoot';
+import SelectPrimitivePortal from './fragments/SelectPrimitivePortal';
+import SelectPrimitiveOverlay from './fragments/SelectPrimitiveOverlay';
+
+const SelectPrimitive = () => {
+    console.warn('Direct usage of Select is not supported. Please use Select.Root, Select.Content, etc. instead.');
+    return null;
+};
+
+SelectPrimitive.Root = SelectPrimitiveRoot;
+SelectPrimitive.Content = SelectPrimitiveContent;
+SelectPrimitive.Portal = SelectPrimitivePortal;
+SelectPrimitive.Overlay = SelectPrimitiveOverlay;
+SelectPrimitive.Item = SelectPrimitiveItem;
+SelectPrimitive.Trigger = SelectPrimitiveTrigger;
+
+export default SelectPrimitive;

src/core/primitives/Select/contexts/SelectPrimitiveContext.tsx

@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+
+export type SelectPrimitiveContextType = {
+    isOpen: boolean,
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
+    selectedValue: string,
+    setSelectedValue: React.Dispatch<React.SetStateAction<string>>
+    handleSelect: (value: string) => void
+    refs: {
+        reference: React.RefObject<any>;
+        floating: React.RefObject<any>;
+        setReference: (node: any) => void;
+        setFloating: (node: any) => void;
+    };
+    floatingStyles: React.CSSProperties;
+    floatingContext: any;
+    getReferenceProps: () => any;
+    getFloatingProps: () => any;
+    getItemProps: (userProps?: any) => any;
+}
+
+export const SelectPrimitiveContext = createContext<SelectPrimitiveContextType>({} as SelectPrimitiveContextType);