pixel-react 1.1.3 → 1.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/rollup.config.mjs

@@ -14,7 +14,6 @@ const packageJson = requireFile('./package.json');
 export default [
   {
     input: 'src/index.ts',
-    context: 'window',
     output: [
       {
         file: packageJson.main, // CJS output
@@ -32,8 +31,7 @@ export default [
     plugins: [
       peerDepsExternal(),
       resolve(),
-
-      commonjs({ transformMixedEsModules: true }),
+      commonjs(),
       typescript(),
       postcss({
         extensions: ['.scss'],
@@ -53,11 +51,7 @@ export default [
   {
     input: 'lib/index.d.ts',
     output: [
-      {
-        file: 'lib/index.d.ts',
-        format: 'es',
-        inlineDynamicImports: true,
-      },
+      { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
     ],
     plugins: [dts()],
     external: [/\.scss$/],

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AppHeader from './AppHeader';
+import {
+  appHeaderMenuItemProps,
+  appHeaderSubMenuItemProps,
+  appHeaderQuickMenuItemProps,
+} from './types';
 import Icon from '../Icon';
 import { useState } from 'react';
 
@@ -23,22 +28,23 @@ const defaultArgs = {
 };
 
 const headerMenuItems = [
+  { menuLabel: 'Dashboard', menuName: 'Dashboard', subMenuItems: [] },
   {
-    menuName: 'Dashboard',
-    subMenuItems: [],
-  },
-  {
+    menuLabel: 'Repo',
     menuName: 'Repo',
     subMenuItems: [
       {
+        subMenuLabel: 'Elements',
         subMenuName: 'Elements',
         quickMenuItems: [],
       },
       {
+        subMenuLabel: 'Program Elements',
         subMenuName: 'Program Elements',
         quickMenuItems: [],
       },
       {
+        subMenuLabel: 'Step Groups',
         subMenuName: 'Step Groups',
         quickMenuItems: [
           {
@@ -58,13 +64,16 @@ const headerMenuItems = [
     ],
   },
   {
+    menuLabel: 'Test Data',
     menuName: 'Test Data',
     subMenuItems: [],
   },
   {
+    menuLabel: 'Test Dev',
     menuName: 'Test Dev',
     subMenuItems: [
       {
+        subMenuLabel: 'Scripts',
         subMenuName: 'Scripts',
         quickMenuItems: [
           {
@@ -90,6 +99,7 @@ const headerMenuItems = [
         ],
       },
       {
+        subMenuLabel: 'Executions',
         subMenuName: 'Executions',
         quickMenuItems: [],
       },
@@ -121,14 +131,14 @@ export const Controlled: Story = {
     const [selectedMenuItem, setSelectedMenuItem] = useState('Test Data');
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
-    const handleMenuClick = (item: string) => {
-      setSelectedMenuItem(item);
+    const handleMenuClick = (item: appHeaderMenuItemProps) => {
+      setSelectedMenuItem(item.menuLabel);
     };
-    const handleSubMenuClick = (item: string) => {
-      setSelectedSubMenuItem(item);
+    const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
+      setSelectedSubMenuItem(item.subMenuLabel);
     };
-    const handleQuickMenuClick = (item: string) => {
-      setSelectedQuickMenuItem(item);
+    const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
+      setSelectedQuickMenuItem(item.quickMenuIconName);
     };
 
     return (

package/src/components/AppHeader/AppHeader.tsx

@@ -3,10 +3,14 @@ import Icon from '../Icon';
 import './AppHeader.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+// import AllProjectsDropdown from '../AllProjectsDropdown';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
+  leftContent,
   rightContent,
+  projectsList,
   appHeaderMenuItems,
   selectedMenu,
   selectedSubMenu,
@@ -21,35 +25,38 @@ const AppHeader: React.FC<AppHeaderProps> = ({
         <div className="ff-app-header-logo-icon">
           <Icon color="" name={logoIconName} height={24} width={21} />
         </div>
+        {leftContent && (
+          <div className="ff-app-header-left-content">{leftContent}</div>
+        )}
         <div className="ff-app-header-nav-bar">
-          <div>All projects</div>
+          {checkEmpty(projectsList) && (
+            <div>{/* <AllProjectsDropdown /> */}</div>
+          )}
           <div className="ff-app-header-nav-bar-items fontSm">
             {appHeaderMenuItems.map((menuItem) => {
               return (
                 <div
                   className={classNames('ff-app-header-nav-bar-item', {
                     ['ff-app-header-nav-bar-item--selected']:
-                      menuItem.menuName === selectedMenu,
+                      menuItem.menuLabel === selectedMenu,
                   })}
-                  key={menuItem.menuName}
-                  onClick={() => onMenuClick(menuItem.menuName)}
+                  key={menuItem.menuLabel}
+                  onClick={() => onMenuClick(menuItem)}
                 >
                   <Typography
                     as="div"
                     className="ff-app-header-nav-bar-item-label"
                     lineHeight="18px"
                   >
-                    {menuItem.menuName}
+                    {menuItem.menuLabel}
                   </Typography>
-                  {menuItem.menuName === selectedMenu &&
+                  {menuItem.menuLabel === selectedMenu &&
                     menuItem?.subMenuItems &&
                     menuItem.subMenuItems.map((subMenuItem) => {
                       return (
                         <div
-                          key={subMenuItem.subMenuName}
-                          onClick={() =>
-                            onSubMenuClick(subMenuItem.subMenuName)
-                          }
+                          key={subMenuItem.subMenuLabel}
+                          onClick={() => onSubMenuClick(subMenuItem)}
                           className="ff-app-header-submenu-container"
                         >
                           <Typography
@@ -58,14 +65,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                               'ff-app-header-nav-bar-submenu-item',
                               {
                                 ['ff-app-header-nav-bar-submenu-item--selected']:
-                                  subMenuItem.subMenuName === selectedSubMenu,
+                                  subMenuItem.subMenuLabel === selectedSubMenu,
                               }
                             )}
                             lineHeight="18px"
                           >
-                            {subMenuItem.subMenuName}
+                            {subMenuItem.subMenuLabel}
                           </Typography>
-                          {subMenuItem.subMenuName === selectedSubMenu &&
+                          {subMenuItem.subMenuLabel === selectedSubMenu &&
                             subMenuItem?.quickMenuItems && (
                               <div className="ff-app-header-quickmenu-container">
                                 <div>
@@ -78,9 +85,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                         <div
                                           key={quickMenuItem.quickMenuIconName}
                                           onClick={() =>
-                                            onQuickMenuClick(
-                                              quickMenuItem.quickMenuName
-                                            )
+                                            onQuickMenuClick(quickMenuItem)
                                           }
                                           className={classNames(
                                             'ff-app-header-nav-bar-quickmenu-item',
@@ -116,7 +121,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <Icon name="more" className="ff-app-header-more-icon" />
           </div>
         </div>
-        <div className="ff-app-header-right-content">{rightContent}</div>
+        {rightContent && (
+          <div className="ff-app-header-right-content">{rightContent}</div>
+        )}
       </div>
     </>
   );

package/src/components/AppHeader/types.ts

@@ -2,26 +2,30 @@ import { ReactNode } from 'react';
 
 export interface AppHeaderProps {
   logoIconName: string;
-  rightContent: ReactNode;
-  projectsList: string[];
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  projectsList?: string[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
-  appHeaderHiddenMenuItems: string[];
+  appHeaderHiddenMenuItems?: string[];
   selectedMenu: string;
-  selectedSubMenu : string;
-  selectedQuickMenu : string;
-  onMenuClick ?:  (text: any) => void;
-  onSubMenuClick ?:  (text: any) => void;
-  onQuickMenuClick ?:  (text: any) => void;
+  selectedSubMenu?: string;
+  selectedQuickMenu?: string;
+  onMenuClick?: (text: any) => void;
+  onSubMenuClick?: (text: any) => void;
+  onQuickMenuClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {
-  menuName: string;
-  subMenuItems: appHeaderSubMenuItemProps[];
+  menuLabel: string;
+  menuName?: string;
+  subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
-  subMenuName: string;
-  quickMenuItems: appHeaderQuickMenuItemProps[];
+  subMenuLabel: string;
+  subMenuName?: string;
+  quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
-  quickMenuName: string;
+  quickMenuLabel?: string;
+  quickMenuName?: string;
   quickMenuIconName: string;
 }

package/src/components/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button';
+export { default } from './Button';

package/lib/index.css

@@ -1,404 +0,0 @@
-.button {
-  background-color: #71347b;
-}
-.ff-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.ff-icon-click {
-  cursor: pointer;
-  padding: 5px;
-  box-sizing: content-box;
-}
-.ff-icon-click:hover {
-  border-radius: 50%;
-  background-color: #ffffff;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2509803922);
-}
-.ff-icon-click:hover > svg {
-  color: #71347b;
-}
-
-.ff-icon-disabled {
-  cursor: no-drop;
-}
-.ff-icon-disabled > svg {
-  color: #cfd1e2;
-}
-.ff-icon-disabled:hover {
-  box-shadow: none;
-}
-.ff-icon-disabled:hover > svg {
-  color: #cfd1e2;
-}
-@font-face {
-  font-family: "Montserrat-Medium", sans-serif;
-  src: local("Montserrat-Medium"), url(../../fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Montserrat-SemiBold", sans-serif;
-  src: local("Montserrat-SemiBold"), url(../../fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-Regular";
-  src: local("Poppins-Regular"), url(../../fonts/Poppins/Poppins-Regular.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-Medium";
-  src: local("Poppins-Medium"), url(../../fonts/Poppins/Poppins-Medium.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-SemiBold";
-  src: local("Poppins-SemiBold"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-Bold";
-  src: local("Poppins-Bold"), url(../../fonts/Poppins/Poppins-Bold.ttf) format("truetype");
-}
-.fontPoppinsRegularXLg {
-  font-family: Poppins-Regular !important;
-  font-size: 18px !important;
-}
-
-.fontPoppinsRegularLg {
-  font-family: Poppins-Regular !important;
-  font-size: 16px !important;
-}
-
-.fontPoppinsRegularMd {
-  font-family: Poppins-Regular !important;
-  font-size: 14px !important;
-}
-
-.fontPoppinsRegularSm {
-  font-family: Poppins-Regular !important;
-  font-size: 12px !important;
-}
-
-.fontPoppinsRegularXs {
-  font-family: Poppins-Regular !important;
-  font-size: 10px !important;
-}
-
-.fontPoppinsRegularXs8px {
-  font-family: Poppins-Regular !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsRegularXs9px {
-  font-family: Poppins-Regular !important;
-  font-size: 9px !important;
-}
-
-.fontPoppinsMediumPageSubHeader {
-  font-family: Poppins-Medium !important;
-  font-size: 26px !important;
-}
-
-.fontPoppinsMediumXX2 {
-  font-family: Poppins-Medium !important;
-  font-size: 22px !important;
-}
-
-.fontPoppinsMediumXXlg {
-  font-family: Poppins-Medium !important;
-  font-size: 20px !important;
-}
-
-.fontPoppinsMediumXXlg {
-  font-family: Poppins-Medium !important;
-  font-size: 20px !important;
-}
-
-.fontPoppinsMediumLg {
-  font-family: Poppins-Medium !important;
-  font-size: 16px !important;
-}
-
-.fontPoppinsMediumMd {
-  font-family: Poppins-Medium !important;
-  font-size: 14px !important;
-}
-
-.fontPoppinsMediumSm {
-  font-family: Poppins-Medium !important;
-  font-size: 12px !important;
-}
-
-.fontPoppinsMediumSm11 {
-  font-family: Poppins-Medium !important;
-  font-size: 11px !important;
-}
-
-.fontPoppinsMediumXs {
-  font-family: Poppins-Medium !important;
-  font-size: 10px !important;
-}
-
-.fontPoppinsMediumXs8px {
-  font-family: Poppins-Medium !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsMediumXs8px {
-  font-family: Poppins-Medium !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsSemibold-size-50 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 50px !important;
-}
-
-.fontPoppinsSemibold-size-42 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 42px !important;
-}
-
-.fontPoppinsSemiboldPageHeader {
-  font-family: Poppins-SemiBold !important;
-  font-size: 36px !important;
-}
-
-.fontPoppinsSemiboldAlertHeader {
-  font-family: Poppins-SemiBold !important;
-  font-size: 32px !important;
-}
-
-.fontPoppinsSemibold-size-28 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 28px !important;
-}
-
-.fontPoppinsSemibold-size-26 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 26px !important;
-}
-
-.fontPoppinsSemiboldPageSubHeader {
-  font-family: Poppins-SemiBold !important;
-  font-size: 24px !important;
-}
-
-.fontPoppinsSemiboldXX2 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 22px !important;
-}
-
-.fontPoppinsSemiboldXXlg {
-  font-family: Poppins-SemiBold !important;
-  font-size: 20px !important;
-}
-
-.fontPoppinsSemiboldXlg {
-  font-family: Poppins-SemiBold !important;
-  font-size: 18px !important;
-}
-
-.fontPoppinsSemiboldLg {
-  font-family: Poppins-SemiBold !important;
-  font-size: 16px !important;
-}
-
-.fontPoppinsSemiboldMd {
-  font-family: Poppins-SemiBold !important;
-  font-size: 14px !important;
-}
-
-.fontPoppinsSemiboldSm {
-  font-family: Poppins-SemiBold !important;
-  font-size: 12px !important;
-}
-
-.fontPoppinsSemiboldSm11 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 11px !important;
-}
-
-.fontPoppinsSemiboldXs {
-  font-family: Poppins-SemiBold !important;
-  font-size: 10px !important;
-}
-
-.fontPoppinsSemiboldXs9px {
-  font-family: Poppins-SemiBold !important;
-  font-size: 9px !important;
-}
-
-.fontPoppinsSemiboldXs8px {
-  font-family: Poppins-Medium !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsSemiboldXXs {
-  font-family: Poppins-SemiBold !important;
-  font-size: 8px !important;
-}
-
-.fontMontserratMediumXs {
-  font-family: Montserrat-Medium, sans-serif !important;
-  font-size: 10px !important;
-}
-
-.fontMontserratMediumSm {
-  font-family: Montserrat-Medium, sans-serif !important;
-  font-size: 12px !important;
-}
-
-.fontMontserratMediumMd {
-  font-family: Montserrat-Medium, sans-serif !important;
-  font-size: 14px !important;
-}
-
-.fontMontserratSemiboldXs {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 10px !important;
-}
-
-.fontMontserratSemiboldSm {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 12px !important;
-}
-
-.fontMontserratSemiboldMd {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 14px !important;
-}
-
-.fontMontserratSemiboldLg {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 16px !important;
-}
-
-.ff--switch-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.ff--switch-container:disabled {
-  opacity: 0.7;
-  cursor: no-drop;
-}
-.ff--switch-container .ff--switch-checkbox {
-  height: 0;
-  width: 0;
-  display: none;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {
-  left: calc(100% - 19px);
-  right: -1px;
-  border: 1px solid #71347b;
-  background: #ffffff;
-  transition: all 0.3s;
-  box-shadow: 0px 0px 2px 0px #141a60;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-check-symbol {
-  height: 6px;
-  width: 3px;
-  border-bottom: 2px solid #71347b;
-  border-right: 2px solid #71347b;
-  transform: rotate(45deg);
-  border-bottom-right-radius: 2px;
-  animation: checkmark 0.2s forwards;
-  transition: all 0.1s;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {
-  background: #71347b;
-  transition: all 0.3s;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {
-  cursor: default;
-  color: rgba(113, 52, 123, 0.5019607843);
-  background: rgba(113, 52, 123, 0.5019607843);
-}
-.ff--switch-container .ff--switch-checkbox:disabled {
-  cursor: no-drop;
-}
-.ff--switch-container .ff--switch-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  border-radius: 8px;
-  position: relative;
-  background: #cfd1e2;
-  transition: all 0.3s;
-}
-.ff--switch-container .ff--switch-label--disabled {
-  opacity: 0.5;
-  cursor: no-drop;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button {
-  position: absolute;
-  left: 0;
-  width: 20px;
-  height: 20px;
-  border: 1px solid #cfd1e2;
-  display: flex;
-  background: #ffffff;
-  border-radius: 50%;
-  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
-  transition: all 0.3s;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol {
-  width: 8px;
-  height: 8px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line {
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background-color: #aeb0c0;
-  transition: all 0.3s;
-  animation: crossmark 0.2s forwards;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line:first-child {
-  transform: rotate(45deg);
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line:last-child {
-  transform: rotate(-45deg);
-}
-.ff--switch-container .default {
-  width: 32px;
-  height: 14px;
-}
-@keyframes checkmark {
-  0% {
-    height: 0;
-    width: 0;
-    opacity: 0;
-  }
-  50% {
-    height: 3px;
-    width: 3px;
-    opacity: 1;
-  }
-  100% {
-    height: 6px;
-    width: 3px;
-    opacity: 1;
-  }
-}
-@keyframes crossmark {
-  0% {
-    width: 0;
-    opacity: 0;
-  }
-  50% {
-    width: 50%;
-    opacity: 1;
-  }
-  100% {
-    width: 100%;
-    opacity: 1;
-  }
-}