pixel-react 1.6.5 → 1.6.6

package/src/components/LazyLoad/LazyLoading.tsx

@@ -1,19 +1,19 @@
-import LazyLoad from './LazyLoad';
-const { FixedSizeList } = LazyLoad;
-const Row = ({
-  index,
-  style,
-}: {
-  index: number;
-  style: React.CSSProperties;
-}) => <div style={style}>Row {index}</div>;
-
-const LazyLoading = () => {
-  return (
-    <FixedSizeList height={300} itemCount={100000} itemSize={30} width={400}>
-      {Row}
-    </FixedSizeList>
-  );
-};
-
-export default LazyLoading;
+import LazyLoad from './LazyLoad';
+const { FixedSizeList } = LazyLoad;
+const Row = ({
+  index,
+  style,
+}: {
+  index: number;
+  style: React.CSSProperties;
+}) => <div style={style}>Row {index}</div>;
+
+const LazyLoading = () => {
+  return (
+    <FixedSizeList height={300} itemCount={100000} itemSize={30} width={400}>
+      {Row}
+    </FixedSizeList>
+  );
+};
+
+export default LazyLoading;

package/src/components/LazyLoad/index.ts

@@ -1 +1 @@
-export * from './LazyLoad';
+export * from './LazyLoad';

package/src/components/MachineInputField/MachineInputField.scss

@@ -1,59 +1,59 @@
-.ff-machine-input-field-wrapper {
-  min-width: 100px;
-  height: 32px;
-  position: relative;
-  cursor: pointer;
-
-  .ff-machine-input-field,
-  .ff-machine-input-field-reverse {
-    height: 100%;
-    width: 100%;
-    border: 1px solid var(--ff-machine-input-field-border-color);
-    padding: 0 8px 0 0;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .ff-machine-icon-text-wrapper,
-    .ff-machine-icon-text-wrapper-reverse {
-      display: flex;
-      align-items: center;
-
-      .ff-machine-icon {
-        margin-left: 4px;
-      }
-
-      .ff-machine-text-reverse,
-      .ff-machine-text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        min-width: 30px;
-        max-width: 70px;
-      }
-
-      .ff-machine-text-reverse {
-        direction: ltr;
-      }
-    }
-
-    .ff-machine-icon-text-wrapper-reverse {
-      flex-direction: row-reverse;
-    }
-  }
-
-  .ff-machine-input-field-reverse {
-    flex-direction: row-reverse;
-  }
-
-  .ff-machine-input-label {
-    position: absolute;
-    top: -6px;
-    left: 8px;
-    background-color: var(--ff-machine-input-field-border-color);
-    border-radius: 4px;
-    padding: 1px 2px;
-    height: 12px;
-  }
-}
+.ff-machine-input-field-wrapper {
+  min-width: 100px;
+  height: 32px;
+  position: relative;
+  cursor: pointer;
+
+  .ff-machine-input-field,
+  .ff-machine-input-field-reverse {
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--ff-machine-input-field-border-color);
+    padding: 0 8px 0 0;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ff-machine-icon-text-wrapper,
+    .ff-machine-icon-text-wrapper-reverse {
+      display: flex;
+      align-items: center;
+
+      .ff-machine-icon {
+        margin-left: 4px;
+      }
+
+      .ff-machine-text-reverse,
+      .ff-machine-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 30px;
+        max-width: 70px;
+      }
+
+      .ff-machine-text-reverse {
+        direction: ltr;
+      }
+    }
+
+    .ff-machine-icon-text-wrapper-reverse {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .ff-machine-input-field-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .ff-machine-input-label {
+    position: absolute;
+    top: -6px;
+    left: 8px;
+    background-color: var(--ff-machine-input-field-border-color);
+    border-radius: 4px;
+    padding: 1px 2px;
+    height: 12px;
+  }
+}

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -1,32 +1,32 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MachineInputField from './MachineInputField';
-import { MachineType } from './types';
-
-const meta: Meta<typeof MachineInputField> = {
-  title: 'Components/MachineInputField',
-  component: MachineInputField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof MachineInputField>;
-
-// Sample data for the MachineInputField
-const sampleOptions: MachineType[] = [
-  { label: 'Local', type: 'Local' },
-  { label: '121.25.36', type: 'Google Chrome' },
-  { label: '17, iPhone 15', type: 'mac' },
-  { label: 'Samsung Galaxy S23', type: 'android' },
-];
-
-export const Primary: Story = {
-  args: {
-    width: '410px', // Example width
-    options: sampleOptions,
-    runCount: 1,
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import MachineInputField from './MachineInputField';
+import { MachineType } from './types';
+
+const meta: Meta<typeof MachineInputField> = {
+  title: 'Components/MachineInputField',
+  component: MachineInputField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MachineInputField>;
+
+// Sample data for the MachineInputField
+const sampleOptions: MachineType[] = [
+  { label: 'Local', type: 'Local' },
+  { label: '121.25.36', type: 'Google Chrome' },
+  { label: '17, iPhone 15', type: 'mac' },
+  { label: 'Samsung Galaxy S23', type: 'android' },
+];
+
+export const Primary: Story = {
+  args: {
+    width: '410px', // Example width
+    options: sampleOptions,
+    runCount: 1,
+  },
+};
+
+export default meta;

package/src/components/MachineInputField/MachineInputField.tsx

@@ -1,87 +1,87 @@
-import { forwardRef } from 'react';
-import './MachineInputField.scss';
-import Typography from '../Typography';
-import Icon from '../Icon';
-import { MachineInputFieldProps, MachineType } from './types';
-import classNames from 'classnames';
-
-const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
-  (
-    {
-      width = '',
-      options = [],
-      runCount = 0,
-      className = '',
-      contentReverse = false,
-      onClick = () => {},
-    },
-    ref
-  ) => {
-    const getIcon: Record<MachineType['type'], string> = {
-      Local: 'local',
-      Browserstack: 'browserstack_icon',
-      SauceLabs: 'sause_lab',
-      LambdaTest: 'lambda_icon',
-      mac: 'mac_icon',
-      android: 'android_icon',
-      linux: 'linux',
-      'Google Chrome': 'chrome_icon',
-      'Mozilla Firefox': 'fire_fox',
-      'Microsoft Edge': 'edge',
-      'Internet Explorer': 'internet_explorer',
-      Safari: 'safari_icon',
-      Opera: 'opera',
-    };
-
-    return (
-      <div
-        ref={ref}
-        style={{ width: width }}
-        className={classNames('ff-machine-input-field-wrapper', className)}
-        onClick={onClick}
-      >
-        <Typography
-          as="span"
-          color="var(--ff-machine-input-field-text-color)"
-          fontSize={8}
-          textAlign="center"
-          className="ff-machine-input-label"
-        >
-          Run {runCount}
-        </Typography>
-
-        <div
-          className={classNames('ff-machine-input-field', {
-            'ff-machine-input-field-reverse': contentReverse,
-          })}
-        >
-          {options.map(({ label, type }) => (
-            <div
-              key={type}
-              className={classNames('ff-machine-icon-text-wrapper', {
-                'ff-machine-icon-text-wrapper-reverse': contentReverse,
-              })}
-            >
-              <Icon
-                name={getIcon[type] || 'local'}
-                className="ff-machine-icon"
-              />
-              <Typography
-                className={classNames('ff-machine-text', {
-                  'ff-machine-text-reverse': contentReverse,
-                })}
-                color="var(--ff-machine-input-field-text-color)"
-              >
-                {label}
-              </Typography>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-);
-
-MachineInputField.displayName = 'MachineInputField';
-
-export default MachineInputField;
+import { forwardRef } from 'react';
+import './MachineInputField.scss';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import { MachineInputFieldProps, MachineType } from './types';
+import classNames from 'classnames';
+
+const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
+  (
+    {
+      width = '',
+      options = [],
+      runCount = 0,
+      className = '',
+      contentReverse = false,
+      onClick = () => {},
+    },
+    ref
+  ) => {
+    const getIcon: Record<MachineType['type'], string> = {
+      Local: 'local',
+      Browserstack: 'browserstack_icon',
+      SauceLabs: 'sause_lab',
+      LambdaTest: 'lambda_icon',
+      mac: 'mac_icon',
+      android: 'android_icon',
+      linux: 'linux',
+      'Google Chrome': 'chrome_icon',
+      'Mozilla Firefox': 'fire_fox',
+      'Microsoft Edge': 'edge',
+      'Internet Explorer': 'internet_explorer',
+      Safari: 'safari_icon',
+      Opera: 'opera',
+    };
+
+    return (
+      <div
+        ref={ref}
+        style={{ width: width }}
+        className={classNames('ff-machine-input-field-wrapper', className)}
+        onClick={onClick}
+      >
+        <Typography
+          as="span"
+          color="var(--ff-machine-input-field-text-color)"
+          fontSize={8}
+          textAlign="center"
+          className="ff-machine-input-label"
+        >
+          Run {runCount}
+        </Typography>
+
+        <div
+          className={classNames('ff-machine-input-field', {
+            'ff-machine-input-field-reverse': contentReverse,
+          })}
+        >
+          {options.map(({ label, type }) => (
+            <div
+              key={type}
+              className={classNames('ff-machine-icon-text-wrapper', {
+                'ff-machine-icon-text-wrapper-reverse': contentReverse,
+              })}
+            >
+              <Icon
+                name={getIcon[type] || 'local'}
+                className="ff-machine-icon"
+              />
+              <Typography
+                className={classNames('ff-machine-text', {
+                  'ff-machine-text-reverse': contentReverse,
+                })}
+                color="var(--ff-machine-input-field-text-color)"
+              >
+                {label}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+);
+
+MachineInputField.displayName = 'MachineInputField';
+
+export default MachineInputField;

package/src/components/MachineInputField/index.ts

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

package/src/components/MachineInputField/types.ts

@@ -1,13 +1,13 @@
-export interface MachineType {
-  type: string;
-  label: string;
-}
-
-export interface MachineInputFieldProps {
-  width: string;
-  options: MachineType[];
-  runCount: number;
-  className?: string;
-  contentReverse?: boolean;
-  onClick?: () => void;
-}
+export interface MachineType {
+  type: string;
+  label: string;
+}
+
+export interface MachineInputFieldProps {
+  width: string;
+  options: MachineType[];
+  runCount: number;
+  className?: string;
+  contentReverse?: boolean;
+  onClick?: () => void;
+}

package/src/components/MenuOption/MenuOption.scss

@@ -1,97 +1,97 @@
-@use '../../assets/styles/fonts';
-
-.ff-menu-option-container {
-  cursor: pointer;
-  position: relative;
-  .ff-icon-label {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    .ff-menuicon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      &.dark {
-        background-color: var(--brand-color);
-        &:hover {
-          background-color: var(--menu-variant-dark-icon-color);
-          svg {
-            path {
-              fill: var(--brand-color);
-            }
-          }
-        }
-      }
-    }
-
-    .ff-menuicon-container-clicked {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--brand-color);
-      cursor: pointer;
-      &:hover {
-        background-color: var(--brand-color);
-      }
-      &.dark {
-        background-color: var(--menu-variant-dark-icon-color);
-      }
-    }
-  }
-}
-
-.ff-option-card {
-  position: fixed;
-  margin: 4px;
-  border: 1px solid var(--option-card-border-color);
-  background: var(--option-card-bg-color);
-  overflow: hidden;
-  min-height: 32px;
-  min-width: 110px;
-  width: max-content;
-  border-radius: 4px;
-  &--primary{
-    background: var(--brand-color);
-    color: var(--primary-button-text-color);
-    svg {
-      path {
-        fill: var(--primary-icon-color);
-      }
-    }
-    :hover{
-      color: var(--brand-color);
-    svg {
-      path {
-        fill: var(--brand-color);
-      }
-    }
-    }
-  }
-  .ff-options {
-    @extend .fontSm;
-    cursor: pointer;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    padding: 4px;
-    gap: 8px;
-    &:hover {
-      background-color: var(--hover-color);
-    }
-    label {
-      cursor: pointer;
-    }
-  }
-
-  .ff-disable-option {
-    opacity: 0.5;
-    cursor: no-drop;
-    label {
-      cursor: no-drop;
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-menu-option-container {
+  cursor: pointer;
+  position: relative;
+  .ff-icon-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .ff-menuicon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      &.dark {
+        background-color: var(--brand-color);
+        &:hover {
+          background-color: var(--menu-variant-dark-icon-color);
+          svg {
+            path {
+              fill: var(--brand-color);
+            }
+          }
+        }
+      }
+    }
+
+    .ff-menuicon-container-clicked {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--brand-color);
+      cursor: pointer;
+      &:hover {
+        background-color: var(--brand-color);
+      }
+      &.dark {
+        background-color: var(--menu-variant-dark-icon-color);
+      }
+    }
+  }
+}
+
+.ff-option-card {
+  position: fixed;
+  margin: 4px;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  overflow: hidden;
+  min-height: 32px;
+  min-width: 110px;
+  width: max-content;
+  border-radius: 4px;
+  &--primary{
+    background: var(--brand-color);
+    color: var(--primary-button-text-color);
+    svg {
+      path {
+        fill: var(--primary-icon-color);
+      }
+    }
+    :hover{
+      color: var(--brand-color);
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+    }
+  }
+  .ff-options {
+    @extend .fontSm;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
+    }
+    label {
+      cursor: pointer;
+    }
+  }
+
+  .ff-disable-option {
+    opacity: 0.5;
+    cursor: no-drop;
+    label {
+      cursor: no-drop;
+    }
+  }
+}