pixel-react 1.0.0

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import './Checkbox.scss';
+import classNames from 'classnames';
+import Icon from '../Icon';
+import { CheckboxProps } from './types';
+import '../../assets/styles/_colors.scss';
+import Typography from '../Typography';
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  name,
+  label,
+  disabled = false,
+  checked: initialChecked = false,
+  partial = false,
+  onChange,
+}) => {
+  const [checked, setChecked] = useState(initialChecked);
+
+  useEffect(() => {
+    setChecked(initialChecked);
+  }, [initialChecked]);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!disabled) {
+      setChecked((prev) => !prev), onChange?.(event);
+    }
+  };
+
+  return (
+    <label className="ff-checkbox--overlay" htmlFor={id}>
+      <input
+        type="checkbox"
+        className="ff-checkbox-input"
+        id={id}
+        name={name}
+        checked={checked}
+        onChange={handleCheckboxChange}
+        disabled={disabled}
+      />
+      <span
+        className={classNames('ff-checkbox-custom', {
+          'ff-checkbox-checked': checked,
+          'ff-storybook-checkbox--partial': partial && !checked,
+        })}
+      >
+        {checked && (
+          <Icon
+            name="tick"
+            height={6}
+            width={8}
+            color="var(--primary-icon-color)"
+          />
+        )}
+      </span>
+      <Typography as="label">{label}</Typography>
+    </label>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/types.ts

@@ -0,0 +1,30 @@
+export interface CheckboxProps {
+  /**
+   * Unique ID for the checkbox input
+   */
+  id?: string;
+  /**
+   * Name attribute for the checkbox input
+   */
+  name?: string;
+  /**
+   * Optional side label
+   */
+  label?: string;
+  /**
+   * Optional disable attribute
+   */
+  disabled?: boolean;
+  /**
+   * Optional checked attribute to prefill
+   */
+  checked?: boolean;
+  /**
+   * Optional onChange function
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * For partially checked checkbox
+   */
+  partial?: boolean;
+}

package/src/components/Chip/Chip.scss

@@ -0,0 +1,70 @@
+@use '../../assets/styles/colors' as *;
+@use '../../assets/styles/fonts' as *;
+
+@mixin chip-variant-background($color) {
+  background-color: $color;
+  color: $drawer-footer-bg;
+}
+
+.ff-chip-wrapper {
+  display: inline-flex;
+  margin: 5px;
+  justify-content: center;
+  align-items: center;
+
+  .ff-default-chip-style {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: fit-content;
+    gap: 5px;
+    height: 17px;
+    border-radius: 25px;
+    padding: 1px 6px;
+    line-height: 15px;
+    border: none;
+    transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
+    box-shadow: 1px 1px 3px 0px $ff-chips-blur-color inset,
+      -1px -1px 2px 0px $drawer-footer-bg inset,
+      1px -1px 2px 0px $ff-chips-blur-color inset,
+      -1px -1px 2px 0px $ff-chips-blur-color, 1px 1px 2px 0px $drawer-footer-bg;
+    &--fullText:hover {
+      box-shadow: 1px 1px 6px 0px $ff-chips-blur-color inset,
+        -1px -1px 4px 0px $drawer-footer-bg inset;
+      padding-right: 12px;
+    }
+    @extend .fontXs;
+
+    &--primary {
+      @include chip-variant-background($ff-chips-fill-color);
+      color: $text-color;
+    }
+
+    &--success {
+      @include chip-variant-background($ff-success);
+    }
+
+    &--error {
+      @include chip-variant-background($ff-error-light);
+    }
+
+    &--warning {
+      @include chip-variant-background($ff-warning);
+    }
+    &--custom {
+      @extend .fontSm;
+      background: #610b861a; //TODO: add color code name
+      color: #610b86; //TODO: add color code name
+      padding: 2px 8px;
+      border-radius: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+      box-shadow: none;
+      transition: background-color 0.3s ease, color 0.3s ease;
+      &:hover {
+        background-color: #610b86; //TODO: add color code name
+        color: #fdfaff; //TODO: add color code name
+      }
+    }
+  }
+}

package/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Chip from './Chip';
+import '../../assets/styles/_colors.scss';
+import './Chip.scss';
+import Typography from '../Typography';
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'left',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Chip>;
+
+const defaultArgs = {
+  label: 'SM 0',
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'primary',
+    fullText: 'Sub Modules 0',
+  },
+};
+
+export const withoutExpand: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const Group: Story = {
+  render: () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+
+    return (
+      <Typography as="div">
+        {items.map((item) => (
+          <Chip
+            key={item}
+            label={item}
+            variant="primary"
+            fullText="hover item"
+          />
+        ))}
+      </Typography>
+    );
+  },
+};
+export const CustomChip: Story = {
+  render: () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+
+    return (
+      <Typography as="div">
+        {items.map((item) => (
+          <Chip key={item} label={item} variant="custom" />
+        ))}
+      </Typography>
+    );
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'success',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'error',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'warning',
+    fullText: 'Sub Modules 0',
+  },
+};
+export default meta;

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import './Chip.scss';
+import classNames from 'classnames';
+import { ChipsProps } from './types';
+import Typography from '../Typography';
+
+const Chip = ({
+  label = '',
+  fullText = '',
+  variant = 'primary',
+  onClick = () => {},
+}: ChipsProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const labelText = isHovered && fullText ? fullText : label;
+  const handleOnMouseEnter = () => setIsHovered(true);
+  const handleOnMouseLeave = () => setIsHovered(false);
+
+  return (
+    <div className="ff-chip-wrapper">
+      <button
+        onMouseEnter={handleOnMouseEnter}
+        onMouseLeave={handleOnMouseLeave}
+        onClick={onClick}
+        className={classNames(
+          `ff-default-chip-style ff-default-chip-style--${variant}`,
+          { ['ff-default-chip-style--fullText']: !!fullText }
+        )}
+      >
+        {labelText && <Typography as="p">{labelText}</Typography>}
+      </button>
+    </div>
+  );
+};
+
+export default Chip;

package/src/components/Chip/index.ts

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

package/src/components/Chip/types.ts

@@ -0,0 +1,19 @@
+export interface ChipsProps {
+  /**
+   * The text to be displayed on the Chip.
+   */
+  label: string;
+  /**
+   * The text to be displayed on hover.
+   */
+  fullText?: string;
+  /**
+   * The variant of the Chip.
+   */
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom';
+
+  /**
+   * The callback function to be executed when the Chip is clicked.
+   */
+  onClick?: () => void;
+}

package/src/components/Drawer/Drawer.scss

@@ -0,0 +1,121 @@
+@import '../../assets/styles/colors';
+@import '../../assets/styles/fonts';
+
+.ff-drawer-container {
+  .ff-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: $drawer-title-color;
+    opacity: 0.5;
+  }
+
+  .ff-drawer {
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    min-width: 450px;
+    background-color: $primary-button-text-color;
+    z-index: 999;
+    transform: translateX(100%);
+    opacity: 0;
+
+    &--open {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &--small {
+      width: 444px;
+    }
+    &--medium {
+      width: 666px;
+    }
+    &--large {
+      width: 888px;
+    }
+    &--x-large {
+      width: calc(100vw - 10px);
+    }
+    &--open,
+    &--medium,
+    &--large,
+    &--x-large {
+      transition: all 0.4s ease-in-out;
+      border-radius: 5px;
+      border: 2px solid $border-color;
+    }
+
+    .ff-drawer-header {
+      padding: 10px 8px 10px 8px;
+      display: flex;
+      gap: 10px;
+      border-bottom: 2px solid $border-color;
+
+      .ff-drawer-title {
+        @extend .fontSm;
+        font-weight: 600;
+        color: $drawer-title-color;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .ff-drawer-action-section {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+
+        .ff-action-button {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+
+          .ff-expand-collapse-button {
+            cursor: pointer;
+            background-color: $button-bg-color;
+            outline: none;
+            border: none;
+            margin: 0;
+            border: 1px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            padding: 6px;
+          }
+        }
+      }
+    }
+
+    .ff-drawer-body {
+      background-color: $drawer-footer-bg;
+      padding: 8px;
+      height: calc(100vh - 76px);
+      overflow: hidden auto;
+    }
+
+    .no-footer {
+      height: 100vh;
+    }
+
+    .ff-drawer-footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 5px 16px 5px 16px;
+      display: flex;
+      justify-content: space-between;
+      border-top: 2px solid $drawer-footer-border;
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 16px;
+      }
+    }
+  }
+}

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Drawer from './Drawer';
+import { useState } from 'react';
+import Button from '../Button';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+const defaultArgs = {
+  isOpen: true,
+  title: 'Drawer Title',
+  showEditButton: false,
+  _isExpanded: false,
+  onClose: () => {},
+  primaryButtonProps: {
+    label: 'Create',
+    variant: 'primary',
+    disabled: false,
+    onClick: () => {},
+  },
+  secondaryButtonProps: {
+    label: 'Cancel',
+    variant: 'secondary',
+    disabled: false,
+    onClick: () => {},
+  },
+  leftPrimaryButtonProps: {
+    label: 'Next',
+    variant: 'primary',
+    disabled: false,
+    onClick: () => {},
+  },
+  leftSecondaryButtonProps: {
+    label: 'Previuos',
+    variant: 'secondary',
+    disabled: false,
+    onClick: () => {},
+  },
+  onEdit: () => {},
+  overlay: false,
+  isFooterRequired: true,
+  footerContent: null,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    size: 'medium',
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [showModal, setShowModal] = useState(false);
+
+    return (
+      <>
+        <div>
+          <Button
+            onClick={() => setShowModal(true)}
+            label="show modal"
+            variant="primary"
+            disabled={false}
+          />
+        </div>
+        <Drawer
+          {...defaultArgs}
+          isOpen={showModal}
+          onClose={() => setShowModal(false)}
+          isFooterRequired={true}
+          _isExpanded={false}
+          size="medium"
+        >
+          <span>Drawer body</span>
+        </Drawer>
+      </>
+    );
+  },
+};

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,179 @@
+import { createPortal } from 'react-dom';
+import { DrawerProps } from './Types.js';
+import Button from '../Button/Button.js';
+import classNames from 'classnames';
+import './Drawer.scss';
+import { useEffect, useState } from 'react';
+import Icon from '../Icon';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+
+const Drawer = ({
+  isOpen = true,
+  children = 'Drawer content area',
+  onClose = () => {},
+  title = 'drawer',
+  primaryButtonProps = {},
+  secondaryButtonProps = {},
+  leftPrimaryButtonProps = {},
+  leftSecondaryButtonProps = {},
+  showEditButton = false,
+  onEdit = () => {},
+  overlay = false,
+  isFooterRequired = true,
+  footerContent = null,
+  size = 'medium',
+  _isExpanded = false,
+  isBackButtonVisible = false,
+  _isCloseModalButtonVisible = true,
+}: DrawerProps) => {
+  const [isExpanded, setIsExpanded] = useState(_isExpanded);
+
+  const handleEsc = useEscapeKey('Escape');
+
+  handleEsc(onClose);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  const onCancel = () => {
+    if (secondaryButtonProps.onClick) {
+      secondaryButtonProps.onClick();
+    } else {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    closeModal();
+  }, [isOpen]);
+
+  const closeModal = () => {
+    if (!isOpen) {
+      setTimeout(() => {
+        return null;
+      }, 1000);
+    }
+  };
+
+  const drawerSize = isExpanded ? 'x-large' : size;
+
+  return createPortal(
+    <div className="ff-drawer-container">
+      {overlay && <div className="ff-overlay" />}
+
+      <div
+        className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
+          'ff-drawer--open': isOpen,
+        })}
+      >
+        <div className="ff-drawer-header">
+          <div className="ff-drawer-action-section">
+            <div className="ff-action-button">
+              {showEditButton && (
+                <button className="ff-expand-collapse-button" onClick={onEdit}>
+                  {/* icons are not provided yet so using dummy icons */}
+                  <Icon name="logo" height={16} width={16} />
+                  Edit
+                </button>
+              )}
+              {_isExpanded && (
+                <button
+                  className="ff-expand-collapse-button"
+                  onClick={toggleExpand}
+                >
+                  <Icon
+                    name={isExpanded ? 'logo' : 'logo'}
+                    height={16}
+                    width={16}
+                  />
+                </button>
+              )}
+              {isBackButtonVisible && (
+                <button className="ff-expand-collapse-button" onClick={onClose}>
+                  <Icon
+                    name="error"
+                    height={16}
+                    width={16}
+                    hoverEffect={false}
+                  />
+                </button>
+              )}
+              <div className="ff-drawer-title">{title}</div>
+            </div>
+            {_isCloseModalButtonVisible && (
+              <div>
+                <button onClick={onClose}>
+                  <Icon
+                    name="info"
+                    height={16}
+                    width={16}
+                    hoverEffect={false}
+                  />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div
+          className={classNames('ff-drawer-body', {
+            'no-footer': !isFooterRequired,
+          })}
+        >
+          {children}
+        </div>
+
+        {isFooterRequired && (
+          <div className="ff-drawer-footer">
+            {footerContent ? (
+              footerContent
+            ) : (
+              <>
+                <div className="button-container">
+                  {leftSecondaryButtonProps.label && (
+                    <Button
+                      {...leftSecondaryButtonProps}
+                      onClick={leftPrimaryButtonProps.onClick}
+                      variant="secondary"
+                      transparentBackground={true}
+                    />
+                  )}
+                  {leftPrimaryButtonProps.label && (
+                    <Button
+                      {...leftPrimaryButtonProps}
+                      onClick={leftPrimaryButtonProps.onClick}
+                      variant="primary"
+                      transparentBackground={true}
+                    />
+                  )}
+                </div>
+                <div className="button-container">
+                  {secondaryButtonProps.label && (
+                    <Button
+                      {...secondaryButtonProps}
+                      onClick={onCancel}
+                      variant="secondary"
+                      transparentBackground={true}
+                    />
+                  )}
+                  {primaryButtonProps.label && (
+                    <Button
+                      {...primaryButtonProps}
+                      onClick={primaryButtonProps.onClick}
+                      variant="primary"
+                      transparentBackground={true}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Drawer;