pixel-react 1.0.0

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ToggleProps } from './types';
+import './Toggle.scss';
+import Icon from '../Icon';
+
+const Toggle: React.FC<ToggleProps> = ({
+  onChange,
+  variant = 'primary',
+  disabled,
+  checked = false,
+  id = 'toggle',
+  size = 'large',
+  icon,
+}) => {
+  const handleChange = (e: any) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const baseIconSizes = {
+    large: 10,
+    medium: 8,
+    small: 6,
+  };
+
+  const defaultIconSize = baseIconSizes[size as 'small' | 'medium' | 'large'];
+
+  const defaultIcons = {
+    checked: {
+      name: 'check_mark',
+      width: defaultIconSize,
+      height: defaultIconSize,
+    },
+    unchecked: {
+      name: 'wrong_mark',
+      width: defaultIconSize,
+      height: defaultIconSize,
+    },
+  };
+
+  const iconNames = {
+    checked: { ...defaultIcons.checked, ...icon?.checked },
+    unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
+  };
+
+  return (
+    <div className="ff--switch-container">
+      <input
+        className="ff--switch-checkbox"
+        id={`ff-toggle-${id}`}
+        type="checkbox"
+        disabled={!!disabled}
+        onChange={handleChange}
+        checked={checked}
+      />
+      <label
+        className={classNames(
+          `ff--switch-label default--${size} ff--switch-label--${variant}`,
+          {
+            'ff--switch-label--disabled': disabled,
+          }
+        )}
+        htmlFor={`ff-toggle-${id}`}
+      >
+        <span
+          className={classNames(
+            `ff--switch-button ff--switch-button--${size}`,
+            {
+              checked: checked,
+            }
+          )}
+        >
+          {checked ? (
+            <Icon
+              name={iconNames.checked.name}
+              width={iconNames.checked.width}
+              height={iconNames.checked.height}
+              className={`ff-checked-icon--${variant}`}
+            />
+          ) : (
+            <Icon
+              name={iconNames.unchecked.name}
+              width={iconNames.unchecked.width}
+              height={iconNames.unchecked.height}
+              className={`ff-unchecked-icon--${variant}`}
+            />
+          )}
+        </span>
+      </label>
+    </div>
+  );
+};
+
+export default Toggle;

package/src/components/Toggle/index.ts

@@ -0,0 +1 @@
+export { default } from './Toggle';

package/src/components/Toggle/types.ts

@@ -0,0 +1,43 @@
+export interface ToggleProps {
+  /**
+   * Optional onChange handler
+   */
+  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+  /**
+   * Optional disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Optional checked state
+   */
+  checked?: boolean;
+  /**
+   * Optional id
+   */
+  id?: string;
+  /**
+   * What background color to occur upon toggled
+   */
+  variant?: 'primary' | 'secondary';
+
+  /**
+   * Defines the size of the toggle
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states.
+   *
+   * @property checked - Icon configuration for the checked state.
+   * @property unchecked - Icon configuration for the unchecked state.
+   *
+   * @example
+   * {
+   *   checked: { name: 'checked-icon', width: 24, height: 24 },
+   *   unchecked: { name: 'unchecked-icon', width: 24, height: 24 }
+   * }
+   */
+  icon?: {
+    checked?: { name: string; width: number; height: number };
+    unchecked?: { name: string; width: number; height: number };
+  };
+}

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,27 @@
+@import '../../assets/styles/colors';
+@import '../../assets/styles/fonts';
+
+.ff-tooltip-container {
+  cursor: auto;
+  display: inline-block;
+}
+
+.ff-tooltip {
+  @extend .fontSm;
+  position: fixed;
+  width: max-content;
+  max-width: 60vw;
+  word-wrap: break-word;
+  background-color: var(--tooltip-bg-color);
+  line-height: 18px;
+  color: var(--tooltip-text-color);
+  text-align: center;
+  border-radius: 5px;
+  padding: 6px 12px;
+  opacity: 0;
+
+  &--visible {
+    opacity: 1;
+    transition: opacity 0.3s;
+  }
+}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tooltip from './Tooltip';
+import Icon from '../Icon';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    title: { control: 'text' },
+    placement: { control: { type: 'select' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+};
+type Story = StoryObj<typeof Tooltip>;
+export const Default: Story = {
+  args: {
+    title: 'Default',
+    placement: 'bottom',
+    children: 'Hover on me to check tooltip',
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    title: 'Tooltip',
+    disabled: true,
+    children: 'Hover on me to check tooltip',
+    placement: 'bottom',
+  },
+  render: (args) => {
+    return <Tooltip {...args}>{args.children}</Tooltip>;
+  },
+};
+
+export const Top: Story = {
+  args: {
+    title: 'Top',
+    placement: 'top',
+    children: 'Hover on me to check top',
+  },
+};
+
+export const Left: Story = {
+  args: {
+    title: 'Left',
+    placement: 'left',
+    children: 'Hover on me to check left',
+  },
+};
+export const Right: Story = {
+  args: {
+    title: 'Right',
+    placement: 'right',
+    children: 'Hover on me to check right',
+  },
+};
+export const TopStart: Story = {
+  args: {
+    title: 'Top Start',
+    placement: 'top-start',
+    children: 'Hover on me to check top start',
+  },
+};
+export const TopEnd: Story = {
+  args: {
+    title: 'Top End',
+    placement: 'top-end',
+    children: 'Hover on me to check top end',
+  },
+};
+export const BottomStart: Story = {
+  args: {
+    title: 'Bottom Start',
+    placement: 'bottom-start',
+    children: 'Hover on me to check bottom start',
+  },
+};
+export const BottomEnd: Story = {
+  args: {
+    title: 'Bottom End',
+    placement: 'bottom-end',
+    children: 'Hover on me to check bottom end',
+  },
+};
+export const TooltipWithIcon: Story = {
+  args: {
+    title: <Icon name="logo" />,
+    placement: 'bottom',
+    children: 'Hover on me to check jsx',
+  },
+};
+
+export default meta;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef, useState, useContext } from 'react';
+import './Tooltip.scss';
+import { createPortal } from 'react-dom';
+import {
+  Position,
+  TooltipProps,
+  TooltipContainerRef,
+  TitleRef,
+  IsTitleEmpty,
+} from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+
+const Tooltip: React.FC<TooltipProps> = ({
+  title,
+  children,
+  placement = 'bottom',
+  disabled = false,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const titleRef: TitleRef = useRef(null);
+  const tooltipContainerRef: TooltipContainerRef = useRef(null);
+  const [tooltipContainerPosition, setTooltipContainerPosition] = useState({
+    posX: 0,
+    fromRight: 0,
+    posY: 0,
+    width: 0,
+    fromBottom: 0,
+  });
+  const [titleDimensions, setTitleDimensions] = useState({
+    height: 0,
+    width: 0,
+  });
+  const [childrenContainerHeight, setChildrenContainerHeight] = useState(0);
+  const { posX, fromRight, posY, width } = tooltipContainerPosition;
+  const { height: titleHeight, width: titleWidth } = titleDimensions;
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const styles: Position = {
+    left: {
+      top: posY,
+      left: posX - titleWidth - 5,
+    },
+    right: {
+      top: posY,
+      left: fromRight + 5,
+    },
+    top: {
+      top: posY - titleHeight - 5,
+      left: posX - titleWidth / 2 + width / 2,
+    },
+    bottom: {
+      top: posY + childrenContainerHeight + 5,
+      left: posX - titleWidth / 2 + width / 2,
+    },
+    'top-start': {
+      top: posY - titleHeight - 5,
+      left: posX,
+    },
+    'top-end': {
+      top: posY - titleHeight - 5,
+      left: fromRight - titleWidth,
+    },
+    'bottom-start': {
+      top: posY + childrenContainerHeight + 5,
+      left: posX,
+    },
+    'bottom-end': {
+      top: posY + childrenContainerHeight + 5,
+      left: fromRight - titleWidth,
+    },
+  };
+
+  const handleScroll = () => {
+    if (tooltipContainerRef.current) {
+      setIsVisible(false);
+    }
+  };
+
+  const handleClickAnywhere = () => {
+    setIsVisible(false);
+  };
+
+  const isTitleEmpty: IsTitleEmpty = (tooltipValue) => {
+    // If the value is a string, use the checkEmpty util function
+    if (typeof tooltipValue === 'string') {
+      return checkEmpty(tooltipValue);
+    }
+
+    // If the value is a valid React element, check if it has any children
+    if (React.isValidElement(tooltipValue)) {
+      return React.Children.count(tooltipValue.props.children) === 0;
+    }
+
+    // For non-string, non-element values, check if it's null or undefined
+    return tooltipValue === undefined || tooltipValue === null;
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('click', handleClickAnywhere);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('click', handleClickAnywhere);
+    };
+  }, []);
+
+  const calculateDim = () => {
+    if (tooltipContainerRef.current) {
+      const computedStyle = window.getComputedStyle(
+        tooltipContainerRef.current
+      );
+      if (
+        computedStyle.display === 'none' ||
+        computedStyle.visibility === 'hidden' ||
+        computedStyle.opacity === '0'
+      ) {
+        setIsVisible(false);
+        return;
+      }
+    }
+    if (titleRef.current) {
+      setTitleDimensions({
+        height: titleRef.current.offsetHeight,
+        width: titleRef.current.offsetWidth,
+      });
+    }
+
+    if (tooltipContainerRef.current && titleRef.current) {
+      const rect = tooltipContainerRef.current.getBoundingClientRect();
+      setChildrenContainerHeight(rect.height);
+      const leftSpaceAvailable =
+        rect.left +
+        window.scrollX +
+        tooltipContainerRef.current.offsetWidth / 2 -
+        titleRef.current.offsetWidth / 2;
+      const rightSpaceAvailable =
+        window.innerWidth -
+        rect.right +
+        tooltipContainerRef.current.offsetWidth / 2 -
+        titleRef.current.offsetWidth / 2;
+      let posX = rect.left + window.scrollX;
+
+      if (leftSpaceAvailable < 0) {
+        posX -= leftSpaceAvailable;
+      }
+      if (rightSpaceAvailable < 0) {
+        posX += rightSpaceAvailable;
+      }
+
+      setTooltipContainerPosition({
+        posX,
+        fromRight: rect.right,
+        posY: rect.top,
+        width: tooltipContainerRef.current.offsetWidth,
+        fromBottom: window.innerHeight - tooltipContainerRef.current.offsetTop,
+      });
+    }
+  };
+
+  useEffect(() => {
+    calculateDim();
+  }, [isVisible]);
+
+  return (
+    <div
+      ref={tooltipContainerRef}
+      className={classNames('ff-tooltip-container', currentTheme)}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+
+      {isVisible &&
+        !disabled &&
+        !isTitleEmpty(title) &&
+        createPortal(
+          <div
+            ref={titleRef}
+            style={styles[placement]}
+            className={classNames('ff-tooltip', currentTheme, {
+              'ff-tooltip--visible': isVisible,
+            })}
+          >
+            {title}
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default } from './Tooltip';

package/src/components/Tooltip/types.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+type TooltipContainerRef = React.RefObject<HTMLDivElement>;
+type TitleRef = React.RefObject<HTMLDivElement>;
+type IsTitleEmpty = (tooltipValue: ReactNode | string) => boolean;
+
+interface Position {
+  [key: string]: {
+    top?: number;
+    left?: number;
+  };
+}
+interface TooltipProps {
+  /**
+   * The text or content to be displayed inside the tooltip.
+   * This can be a string or any React node.
+   */
+  title?: string | React.ReactNode;
+
+  /**
+   * The children over which the tooltip will be displayed.
+   * Typically a button or any other interactive element.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The placement of the tooltip relative to the children.
+   * Defines where the tooltip appears: top, bottom, left, right, etc.
+   *
+   * @default 'bottom'
+   */
+  placement?: 
+    | 'top' 
+    | 'bottom' 
+    | 'left' 
+    | 'right' 
+    | 'top-start' 
+    | 'top-end' 
+    | 'bottom-start' 
+    | 'bottom-end';
+
+  /**
+   * Whether the tooltip is disabled.
+   * If true, the tooltip will not be displayed.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+
+export {
+  TooltipContainerRef,
+  TitleRef,
+  IsTitleEmpty,
+  Position,
+  TooltipProps,
+};
+
+

package/src/components/Typography/Typography.scss

@@ -0,0 +1,49 @@
+@mixin fontPoppins($size: 16px) {
+  font-family: 'Poppins', sans-serif;
+  font-size: $size;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src: local('Poppins-Regular'),
+    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src: local('Poppins-Medium'),
+    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src: local('Poppins-SemiBold'),
+    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src: local('Poppins-Bold'),
+    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+}
+
+.ff-text {
+  @include fontPoppins();
+
+  &--regular {
+    font-weight: 400;
+  }
+  &--medium {
+    font-weight: 500;
+  }
+  &--semi-bold {
+    font-weight: 600;
+  }
+  &--bold {
+    font-weight: 700;
+  }
+}

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Components/Typography',
+  component: Typography,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Typography>;
+
+export const Docs: Story = {
+  args: {
+    children: 'Typography',
+  },
+};
+
+export const Regular12px: Story = {
+  args: {
+    fontWeight: 'regular',
+    fontSize: '12px',
+    as: 'h1',
+    children: 'This is Regular text with 400 font weight and 12px font size.',
+  },
+};
+
+export const Medium12px: Story = {
+  args: {
+    fontWeight: 'medium',
+    fontSize: '14px',
+    as: 'p',
+    children: 'This is Medium text with 500 font weight and 14px font size.',
+  },
+};
+
+export const SemiBold14px: Story = {
+  args: {
+    fontWeight: 'bold',
+    fontSize: '14px',
+    as: 'li',
+    children: 'This is SemiBold text with 600 font weight and 14px font size.',
+  },
+};
+
+export const Bold14px: Story = {
+  args: {
+    fontWeight: 'bold',
+    fontSize: '16px',
+    as: 'h2',
+    children: 'This is Bold text with 700 font weight and 16px font size.',
+  },
+};
+
+export default meta;

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TypographyProps } from './types';
+import './Typography.scss';
+
+const Typography: React.FC<TypographyProps> = ({
+  fontWeight = 'regular',
+  fontSize = 12,
+  lineHeight = 'normal',
+  color = '',
+  textAlign = 'left',
+  as: Element = 'span',
+  letterSpacing = '',
+  className = '',
+  children,
+  htmlFor = '',
+  onClick = () => {},
+}) => {
+  const fontSizeValue =
+    typeof fontSize === 'number' ? `${fontSize}px` : fontSize;
+
+  return (
+    <Element
+      className={`ff-text ff-text--${fontWeight} ${className}`}
+      {...(Element === 'label' && { htmlFor })}
+      style={{
+        fontSize: fontSizeValue,
+        lineHeight,
+        color,
+        textAlign,
+        letterSpacing,
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </Element>
+  );
+};
+
+export default Typography;

package/src/components/Typography/index.ts

@@ -0,0 +1 @@
+export { default } from './Typography';