Feature toggle primitive (#553)

src/components/ui/Toggle/Toggle.tsx

@@ -14,6 +14,7 @@ export type ToggleProps = {
     children? : React.ReactNode;
     className? : string;
     onChange : (isPressed:boolean) => void;
+
 };
 
 const Toggle: React.FC<ToggleProps> = ({
@@ -25,6 +26,7 @@ const Toggle: React.FC<ToggleProps> = ({
     onChange,
     ...props
 }) => {
+
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
@@ -36,10 +38,11 @@ const Toggle: React.FC<ToggleProps> = ({
     };
 
     return (
+
         <ButtonPrimitive
-            className={`${rootClass}`} onClick={handlePressed}
+            className={`${rootClass}`} onClick ={handlePressed}
             data-state={isPressed ? 'on' : 'off'}
-            type="button"
+            type='button'
             data-disabled={props.disabled ? '' : undefined}
             aria-pressed={pressed} {...props}>
             {children}

src/components/ui/ToggleGroup/fragments/ToggleItem.tsx

@@ -8,6 +8,7 @@ const ToggleItem = ({ children, value = null, ...props }:any) => {
 
     const type = toggleContext?.type;
 
+
     const isActive = toggleContext?.activeToggles?.includes(value);
 
     const handleToggleSelect = () => {
@@ -16,6 +17,7 @@ const ToggleItem = ({ children, value = null, ...props }:any) => {
         // For Single Case
         if (type === 'single') {
             if (isActive) {
+
                 toggleContext?.setActiveToggles([]);
                 return;
             } else {

src/core/primitives/Toggle/contexts/TogglePrimitiveContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+interface TogglePrimitiveContextType {
+    isPressed: boolean | undefined;
+    handlePressed: () => void;
+
+}
+export const TogglePrimitiveContext = createContext<TogglePrimitiveContextType>({} as TogglePrimitiveContextType)

src/core/primitives/Toggle/fragments/TogglePrimitiveRoot.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export interface TogglePrimitiveRootProps {
+    defaultPressed? : boolean | false;
+    pressed: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    onChange : (isPressed:boolean) => void;
+
+}
+const TogglePrimitiveRoot = ({children,className='',defaultPressed,pressed,onChange,...props}:TogglePrimitiveRootProps) => {
+      const [isPressed, setIsPressed] = useState(pressed || defaultPressed);
+
+   const handlePressed = () => {
+     const updatedPressed = !isPressed;
+     setIsPressed(updatedPressed);
+     onChange(updatedPressed)
+     }
+
+  return <span className={className} onClick={handlePressed} {...props}>{children}</span>
+
+};
+
+export default TogglePrimitiveRoot;

src/core/primitives/Toggle/index.tsx

@@ -0,0 +1,7 @@
+import TogglePrimitiveRoot from "./fragments/TogglePrimitiveRoot"
+
+const TogglePrimitive = {
+    Root: TogglePrimitiveRoot,
+}
+
+export default TogglePrimitive

src/core/primitives/Toggle/stories/TogglePrimitive.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import TogglePrimitive from "../index";
+import SandboxEditor from "~/components/tools/SandboxEditor/SandboxEditor";
+
+export default {
+    title: 'Primitives/TogglePrimitive',
+    component: TogglePrimitive,
+    render: (args:any) => <SandboxEditor>
+
+       <TogglePrimitive.Root {...args}>
+         </TogglePrimitive.Root>
+    </SandboxEditor>
+}
+
+export const All = {
+    args: {
+      className: ''
+    }
+}