pixel-react 1.8.7 → 1.8.9

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { AllProjectsDropdownProps, optionsType } from './types';
 import Tooltip from '../Tooltip';
 import useClickOutside from '../../hooks/useClickOutside';
+import Search from '../Search';
 
 const AllProjectsDropdown = ({
   onClick = () => {},
@@ -21,8 +22,8 @@ const AllProjectsDropdown = ({
 }: AllProjectsDropdownProps) => {
   const [showOptions, setShowOptions] = useState(false);
   const [selectedOptions, setSelectedOptions] = useState(selectedOption);
-  const [search, setSearch] = useState(true);
   const optionsRef = useRef<HTMLDivElement>(null);
+  const [optionsList, setOptionSList] = useState<optionsType[]>(options);
 
   const handleShowOption = () => {
     setShowOptions(!showOptions);
@@ -34,17 +35,22 @@ const AllProjectsDropdown = ({
     setSelectedOptions(option);
     closeOptions();
     onClick(option);
+    setSearchValue('');
+    setOptionSList(options);
   };
 
-  const handleInput = () => {
-    setSearch(false);
-  };
-
-  const handleSearchEnter = () => {
-    setSearch(false);
-  };
-  const handleSearchLeave = () => {
-    setSearch(true);
+  const [searchValue, setSearchValue] = useState('');
+  const handleSearch = (query: string) => {
+    setSearchValue(query);
+    if (query !== '') {
+      let filterData = options.filter((option) =>
+        option.label.toLowerCase().includes(query.toLowerCase())
+      );
+      setOptionSList(filterData);
+    } else {
+      setSearchValue('');
+      setOptionSList(options);
+    }
   };
   useClickOutside(optionsRef, closeOptions);
   return (
@@ -82,66 +88,72 @@ const AllProjectsDropdown = ({
       </div>
       {showOptions && (
         <div className={classNames('ff-projects-dropdown')} ref={optionsRef}>
-          <div
-            className={classNames('ff-projects-search')}
-            onMouseEnter={() => handleSearchEnter()}
-            onMouseLeave={() => handleSearchLeave()}
-          >
-            {search && <Icon name="search" height={8} width={8} />}
-            <input
-              type="text"
-              placeholder={`${search ? 'Search Project' : ''}`}
-              onClick={() => handleInput()}
-            />
-          </div>
-          <div
-            onClick={() =>
-              handleSelectOption({
-                label: 'All Projects',
-                value: 'All Projects',
-                iconName: 'all_projects',
-              })
-            }
-            className={classNames('ff-all-projects-options', {
-              ['ff-selected-option']: selectedOption.label === 'All Projects',
-            })}
-          >
-            <div className={classNames('ff-projects-icons')}>
-              <Icon name={'all_projects'} height={12} width={12} />
-            </div>
-            <Typography
-              as={'div'}
-              lineHeight={'30px'}
-              children={'All Projects'}
-            />
+          <Search
+            onSearch={handleSearch}
+            value={searchValue}
+            isExpand={true}
+            onClose={() => {}}
+            onExpand={() => {}}
+            showClose={false}
+          />
+          <div className={classNames('option-card')}>
+            {optionsList.map(
+              (option, index) =>
+                index === 0 && (
+                  <div
+                    key={index}
+                    onClick={() => handleSelectOption(option)}
+                    className={classNames('ff-projects-options', {
+                      ['ff-selected-option']:
+                        selectedOption.label === option.label,
+                    })}
+                  >
+                    <div className={classNames('ff-projects-icons')}>
+                      <Icon name={option.iconName} height={12} width={12} />
+                    </div>
+                    <Typography
+                      key={index}
+                      as={'div'}
+                      lineHeight={'30px'}
+                      className="ff-projects-label"
+                    >
+                      <Tooltip title={option.label}>{option.label}</Tooltip>
+                    </Typography>
+                  </div>
+                )
+            )}
           </div>
           <div
             className={classNames(
               'option-card',
-              `${options.length > 4 ? 'scroll' : ''}`
+              `${optionsList.length > 4 ? 'scroll' : ''}`
             )}
           >
-            {options.map((option, index) => (
-              <div
-                key={index}
-                onClick={() => handleSelectOption(option)}
-                className={classNames('ff-projects-options', {
-                  ['ff-selected-option']: selectedOption.label === option.label,
-                })}
-              >
-                <div className={classNames('ff-projects-icons')}>
-                  <Icon name={option.iconName} height={12} width={12} />
-                </div>
-                <Typography
-                  key={index}
-                  as={'div'}
-                  lineHeight={'30px'}
-                  className="ff-projects-label"
-                >
-                  <Tooltip title={option.label}>{option.label}</Tooltip>
-                </Typography>
-              </div>
-            ))}
+            {optionsList.map(
+              (option, index) =>
+                index > 0 && (
+                  <div
+                    key={index}
+                    onClick={() => handleSelectOption(option)}
+                    className={classNames('ff-projects-options', {
+                      ['ff-selected-option']:
+                        selectedOption.label === option.label,
+                    })}
+                  >
+                    <div className={classNames('ff-projects-icons')}>
+                      <Icon name={option.iconName} height={12} width={12} />
+                    </div>
+                    <Typography
+                      key={index}
+                      as={'div'}
+                      lineHeight={'30px'}
+                      className="ff-projects-label"
+                    >
+                      <Tooltip title={option.label}>{option.label}</Tooltip>
+                    </Typography>
+                  </div>
+                )
+            )}
           </div>
         </div>
       )}

package/src/components/Button/Button.scss

@@ -2,7 +2,6 @@
 @use '../../assets/styles/fonts';
 
 .ff-button {
-  width: auto;
   background-color: var(--primary-button-text-color);
   border-radius: 4px;
   padding: 4px 8px;

package/src/components/MobileSkin/MobileSkin.scss

@@ -0,0 +1,67 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins' as *;
+
+.ff-mobileskin-wrapper {
+  @include center-content;
+  flex-direction: column;
+
+  &.portrait {
+    gap: 30px;
+  }
+
+  &.landscape {
+    gap: 38px;
+  }
+}
+
+.ff-mobileskin-container {
+  @extend .ff-mobileskin-wrapper;
+}
+
+.ff-mobile-container {
+  border: 8px solid var(--text-color);
+  @include center-content;
+  position: relative;
+  overflow: hidden;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+.ff-mobile-image-container {
+  @include center-content;
+  overflow: hidden;
+}
+
+.ff-notch {
+  background-color: var(--text-color);
+  border-radius: 24px;
+  position: absolute;
+}
+
+.ff-nav-bar {
+  height: 32px;
+  padding: 8px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  border: 1px solid var(--brand-color);
+  border-radius: 24px;
+}
+
+.ff-nav-bar-icon {
+  height: 16px;
+  padding: 8px;
+  border-right: 1px solid var(--brand-color);
+  @include center-content;
+
+  &.last-icon {
+    border-right: none;
+  }
+}

package/src/components/MobileSkin/MobileSkin.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MobileSkin from './MobileSkin';
+
+const meta: Meta<typeof MobileSkin> = {
+  title: 'Components/MobileSkin',
+  component: MobileSkin,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+const navBarIcons = [
+  {
+    title: 'Forward',
+    name: 'right_arrow_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Backward',
+    name: 'left_arrow_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Refresh',
+    name: 'refresh_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Capture',
+    name: 'minimize_script',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Rotate',
+    name: 'replace_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+];
+const randomImage: string =
+  'https://plus.unsplash.com/premium_photo-1664303228186-a61e7dc91597?q=80&w=1384&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+type Story = StoryObj<typeof MobileSkin>;
+
+const defaultArgs = {
+  navBarIcons: navBarIcons,
+  mobileWidth: 220,
+  mobileHeight: 448,
+  children: randomImage,
+};
+
+export const iosPortraitView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'portrait',
+    type: 'ios',
+  },
+};
+
+export const iosLandscapeView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'landscape',
+    type: 'ios',
+  },
+};
+
+export const androidPortraitView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'portrait',
+    type: 'android',
+  },
+};
+
+export const androidLandscapeView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'landscape',
+    type: 'android',
+  },
+};
+export default meta;

package/src/components/MobileSkin/MobileSkin.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import './MobileSkin.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { MobileSkinProps } from './MobileSkinInterface';
+
+const MobileSkin: React.FC<MobileSkinProps> = ({
+  children,
+  orientation = '',
+  type = '',
+  navBarIcons,
+  mobileHeight = 448,
+  mobileWidth = 220,
+}) => {
+  const notchHeight = (mobileHeight / 448) * 20;
+  const notchWidth = (mobileWidth / 220) * 60;
+
+  const isPortrait = orientation === 'portrait';
+  const isIos = type === 'ios';
+  const containerHeight = isPortrait ? mobileHeight : mobileWidth;
+  const containerWidth = isPortrait ? mobileWidth : mobileHeight;
+
+  return (
+    <div
+      className={`ff-mobileskin-wrapper ${isPortrait ? 'portrait' : 'landscape'}`}
+    >
+      <div
+        className="ff-mobileskin-container"
+        style={{
+          height: containerHeight + 16,
+          width: containerWidth + 16,
+        }}
+      >
+        <div
+          className="ff-mobile-container"
+          style={{
+            width: containerWidth,
+            height: containerHeight,
+            borderRadius: isIos ? '30px' : '10px',
+          }}
+        >
+          <div className="ff-mobile-image-container">
+            {React.isValidElement(children) ? (
+              children
+            ) : (
+              <img
+                src={children as string}
+                alt="Mobile content"
+                style={{
+                  width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
+                  height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {isIos && (
+          <div
+            className="ff-notch"
+            style={{
+              height: isPortrait ? notchHeight : notchWidth,
+              width: isPortrait ? notchWidth : notchHeight,
+              transform: isPortrait
+                ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.46}px)`
+                : `translate(${containerWidth * -0.46}px, ${containerHeight * -0.01}px)`,
+            }}
+          ></div>
+        )}
+      </div>
+      <div className="ff-nav-bar">
+        {navBarIcons.map((icon, index) => (
+          <div
+            key={index}
+            className={`ff-nav-bar-icon ${icon?.className || ''} ${
+              index === navBarIcons.length - 1 ? 'last-icon' : ''
+            }`}
+            onClick={icon.onClick}
+          >
+            <Tooltip title={icon?.title} children={<Icon {...icon} />} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MobileSkin;

package/src/components/MobileSkin/MobileSkinInterface.ts

@@ -0,0 +1,13 @@
+interface NavBarIcon {
+  name: string;
+  [key: string]: any;
+}
+
+export interface MobileSkinProps {
+  children: React.ReactNode | string;
+  orientation?: 'portrait' | 'landscape';
+  type: 'ios' | 'android';
+  navBarIcons: NavBarIcon[];
+  mobileHeight?: number;
+  mobileWidth?: number;
+}

package/src/components/MobileSkin/index.ts

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

package/src/components/MobileSkin/types.ts

@@ -0,0 +1,32 @@
+export interface iconDetails {
+  /**
+   * details of each icon
+   */
+  [key: string]: any;
+}
+export interface MobileSkinProps {
+  /**
+   * The content inside the mobile skin component
+   */
+  children: React.ReactNode | string;
+  /**
+   *    Portrait or landScape View of the Mobile
+   */
+  orientation: string;
+  /**
+   * type either it will be ios or android
+   */
+  type: string;
+  /**
+   *   height of the MobileSkin
+   */
+  mobileHeight?: number;
+  /**
+   *   width of the MobileSkin
+   */
+  mobileWidth?: number;
+  /**
+   * takes the icons details like icon name , title, onClick event, height , width, etc
+   */
+  navbarIcons: Array<iconDetails>;
+}

package/src/components/Search/Search.scss

@@ -86,12 +86,20 @@
       cursor: pointer;
       width: 22px;
       padding-top: 1px;
+
+      &.showClose {
+        display: none
+      }
     }
 
     .ff-search-close-icon {
       margin: 4px;
       cursor: pointer;
 
+      &.showClose {
+        display: none
+      }
+
       .ff-icon-container {
         svg {
           path {

package/src/components/Search/Search.tsx

@@ -16,12 +16,13 @@ const Search = ({
   isExpand = false,
   onClose,
   onExpand,
+  showClose = true,
 }: SearchProps) => {
   const [searchValue, setSearchValue] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (isExpand && inputRef.current) {
+    if (isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
     setSearchValue('');
@@ -45,7 +46,7 @@ const Search = ({
     if (label === 'Close') {
       onClose?.();
     }
-    if (label === 'Clear' && isExpand && inputRef.current) {
+    if (label === 'Clear' && isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
   };
@@ -57,8 +58,12 @@ const Search = ({
   };
   const handleChange = (data: string) => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
+    if (showClose) {
+      if (data === '') {
+        onSearch('');
+      }
+    } else {
+      onSearch(data);
     }
   };
 
@@ -105,7 +110,9 @@ const Search = ({
       {isExpand && (
         <>
           <div
-            className="ff-search-clear-button"
+            className={classNames('ff-search-clear-button', {
+              showClose: !showClose,
+            })}
             onClick={() => handleSearchClearAndClose('Clear')}
           >
             {searchValue !== '' && (
@@ -117,7 +124,11 @@ const Search = ({
             )}
           </div>
           <Tooltip title="Close">
-            <div className="ff-search-close-icon">
+            <div
+              className={classNames('ff-search-close-icon', {
+                showClose: !showClose,
+              })}
+            >
               <Icon
                 height={6}
                 width={6}

package/src/components/Search/types.ts

@@ -16,4 +16,5 @@ export interface SearchProps {
   isExpand: boolean;
   onClose: () => void;
   onExpand: (isExpand: boolean) => void;
+  showClose?:boolean
 }

package/src/index.ts

@@ -74,6 +74,7 @@ import ProgressBar from './components/ProgressBar';
 import ChooseFile from './components/ChooseFile/ChooseFile';
 import ScriptSwitchButton from './components/ScriptSwitchButton';
 
+import MobileSkin from './components/MobileSkin';
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
 import {
@@ -97,6 +98,7 @@ import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
 import { capitalize } from './utils/capitalize/capitalize';
 import Comments from './components/Comment/Comments';
 import useFileDropzone from './hooks/useFileDropzone';
+import useClickOutside from './hooks/useClickOutside';
 import PopUpModal from './components/PopUpModal/PopUpModal';
 import FormatString from './utils/FormatString/FormatString';
 import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
@@ -116,6 +118,7 @@ import {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -245,6 +248,7 @@ export {
   ProgressBar,
   ChooseFile,
   ScriptSwitchButton,
+  MobileSkin,
 
   // utils exports
   checkEmpty,
@@ -262,9 +266,11 @@ export {
   saveFileFromBlob,
   capitalize,
   useFileDropzone,
+  useClickOutside,
   FormatString,
   hasDuplicateFile,
   useKeyboardActions,
+  
   EMAIL_REGEX,
   URL_REGEX,
   PHONE_REGEX,
@@ -277,6 +283,7 @@ export {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,