pixel-react 1.10.15 → 1.10.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.10.15",
+  "version": "1.10.16",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -86,5 +86,10 @@
     "use-context-selector": "^2.0.0",
     "vite-plugin-svgr": "^4.3.0",
     "yarn": "^1.22.22"
-  }
+  },
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE"
+  ]
 }

package/.prettierrc.js

@@ -1,13 +0,0 @@
-module.exports = {
-  printWidth: 80, // max 080 chars in line, code is easy to read
-  useTabs: false, // use spaces instead of tabs
-  tabWidth: 2, // "visual width" of of the "tab"
-  trailingComma: 'es5', // add trailing commas in objects, arrays, etc.
-  semi: true, // add ; when needed
-  singleQuote: true, // '' for stings instead of ""
-  bracketSpacing: true, // import { some } ... instead of import {some} ...
-  arrowParens: 'always', // braces even for single param in arrow functions (a) => { }
-  jsxSingleQuote: false, // "" for react props, like in html
-  bracketSameLine: false, // pretty JSX
-  endOfLine: 'lf', // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
-};

package/.storybook/main.ts

@@ -1,26 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.tsx'],
-
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
-    '@chromatic-com/storybook',
-    "storybook-addon-theme-provider",
-  ],
-
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-
-  docs: {},
-
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

package/.storybook/preview.ts

@@ -1,26 +0,0 @@
-import type { Preview } from '@storybook/react';
-import { withThemeProvider } from 'storybook-addon-theme-provider';
-import ThemeProvider from '../src/components/ThemeProvider/ThemeProvider';
-import '../index.scss';
-import '../src/assets/Themes/Theme.scss';
-
-const preview: Preview = {
-  parameters: {
-    actions: {},
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    docs: {
-      source: {
-        language: 'tsx',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [withThemeProvider(ThemeProvider)],
-};
-
-export default preview;

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/index.scss

@@ -1,5 +0,0 @@
-/* global.css or component CSS */
-body {
-    font-family: 'Poppins', sans-serif;
-  }
-  

package/rollup.config.mjs

@@ -1,73 +0,0 @@
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-import postcss from 'rollup-plugin-postcss';
-import dts from 'rollup-plugin-dts';
-import { babel } from '@rollup/plugin-babel';
-import svgrPlugin from 'vite-plugin-svgr';
-import url from '@rollup/plugin-url';
-import copy from 'rollup-plugin-copy';
-import terser from '@rollup/plugin-terser'; // Correct import
-import brotli from 'rollup-plugin-brotli';
-
-// Import package.json using dynamic import (ES module compatible)
-const packageJson = await import('./package.json', { assert: { type: 'json' } });
-
-export default [
-  {
-    input: 'src/index.ts',
-    context: 'window',
-    output: [
-      {
-        file: packageJson.default.main, // CJS output
-        format: 'cjs',
-        sourcemap: true,
-        inlineDynamicImports: true,
-        chunkFileNames: '[name]-[hash].js',
-      },
-      {
-        file: packageJson.default.module, // ESM output
-        format: 'esm',
-        sourcemap: true,
-        inlineDynamicImports: true,
-        chunkFileNames: '[name]-[hash].js',
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript(),
-      url({
-        include: ['**/*.svg', '**/*.png', '**/*.jpg'],
-        limit: 10000, // Inline assets smaller than 10KB
-      }),
-      postcss({
-        extensions: ['.scss'],
-      }),
-      babel({
-        presets: ['@babel/preset-react'],
-        babelHelpers: 'bundled',
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      }),
-      svgrPlugin({
-        svgrOptions: {
-          icon: true,
-        },
-      }),
-      terser(), // Minify JavaScript using Terser
-      brotli(), // Brotli compression for better size reduction
-    ],
-    external: ['react', 'react-dom'], // Externalize React and ReactDOM to avoid bundling them
-  },
-  {
-    context: 'window',
-    input: 'lib/index.d.ts',
-    output: [
-      { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
-    ],
-    plugins: [dts()],
-    external: [/\.scss$/, /\.stories\.tsx$/],
-  },
-];

package/src/ComponentProps/TreeNodeProps.ts

@@ -1,37 +0,0 @@
-export type TreeNodeProps = {
-  createdBy?: string;
-  modifiedBy?: string;
-  createdByUname?: string;
-  modifiedByUname?: string;
-  createdOn?: string;
-  modifiedOn?: string;
-  state?: string;
-  path?: string;
-  searchKey?: string;
-  key: string;
-  name?: string;
-  projectId?: string;
-  hierarchy: number;
-  executionOrder?: number;
-  subContainerCount?: number;
-  resourceCount?: number;
-  totalSubContainerCount?: number;
-  totalResourceCount?: number;
-  totalProjectElementCount?: number;
-  totalSharedElementCount?: number;
-  container?: boolean;
-  localDelete?: boolean;
-  defaultEntity?: boolean;
-  lastResource?: boolean;
-  platform?: string;
-  parentId?: string;
-  parentName?: string;
-  checked?: boolean | 'partial';
-  expanded?: boolean;
-  expandable?: boolean;
-  sourceId?: string;
-  isNewNode?: boolean;
-  entityType?: string;
-  type?: string;
-  label?: string;
-};

package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StyleGuide from './ColorPalette';
-
-const meta: Meta<typeof StyleGuide> = {
-  title: 'StyleGuide/Colors',
-  component: StyleGuide,
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof StyleGuide>;
-
-export const ColorList: Story = {
-  args: {},
-};
-
-export default meta;

package/src/StyleGuide/ColorPalette/ColorPalette.tsx

@@ -1,67 +0,0 @@
-import { ColorBoxProps } from './types';
-import ColorPalette from './colorPaletteList';
-import './ColorPalette.scss';
-
-// Component to render each color card
-const ColorBox = ({
-  name,
-  colorCode,
-  opacity,
-  dropShadow,
-  border,
-  variable,
-}: ColorBoxProps) => {
-  const opacityPercentage = opacity ? `${Math.round(opacity * 100)}%` : '';
-
-  const boxStyle = {
-    background: colorCode,
-    opacity: opacity,
-    filter: dropShadow ? dropShadow : '',
-    border: `1px solid ${border}`,
-    color: colorCode,
-  };
-
-  return (
-    <div className="color-card">
-      <span className="color-name">{name}</span>
-      <div className="color-box" style={boxStyle}>
-        <p style={{ '--colorCode': colorCode } as React.CSSProperties}> </p>
-      </div>
-      <span className="color-code">
-        {colorCode} {opacityPercentage && `opacity ${opacityPercentage}`} <br />
-        {border && `Border -${border}`}
-      </span>
-      <span className="color-code">{variable}</span>
-    </div>
-  );
-};
-
-// Main Colors component
-const Colors = () => {
-  return (
-    <div className="ff-style-guide">
-      <div className="style-guide-header">
-        <div>Colors</div>
-        <span>
-          Application of the color palette brings a unified and recognisable
-          consistency to MX's array of digital products and interface.
-        </span>
-      </div>
-      <div className="style-guide-content">
-        {ColorPalette.map((color) => (
-          <ColorBox
-            key={color.name}
-            name={color.name}
-            colorCode={color.colorCode}
-            opacity={color?.opacity}
-            dropShadow={color?.dropShadow}
-            border={color?.border}
-            variable={color.variable}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Colors;

package/src/StyleGuide/ColorPalette/colorPaletteList.ts

@@ -1,359 +0,0 @@
-import { ColorPaletteType } from './types';
-
-const ColorPalette: ColorPaletteType = [
-  { name: 'Brand Color', colorCode: '#71347b', variable: '--brand-color' },
-  { name: 'Text Color', colorCode: '#1e161f', variable: '--text-color' },
-  {
-    name: 'Description Text',
-    colorCode: '#7a7a7a',
-    variable: '--description-text',
-  },
-  {
-    name: 'Clickable Text Color',
-    colorCode: '#71347b',
-    variable: '--click-able-text-color',
-  },
-  {
-    name: 'Icons Default Color',
-    colorCode: '#71347b',
-    variable: '--icons-default-color',
-  },
-  { name: 'Border Color', colorCode: '#f0e7f4', variable: '--border-color' },
-  {
-    name: 'Disable Color',
-    colorCode: '#71347b',
-    opacity: 0.5,
-    variable: '--disable-color',
-  },
-  { name: 'Hover Color', colorCode: '#f7ebff', variable: '--hover-color' },
-  {
-    name: 'Pop-up Background Blur',
-    colorCode: '#14041c',
-    opacity: 0.1,
-    variable: '--pop-up-background-blur',
-  },
-  {
-    name: 'Drawer Footer Background',
-    colorCode: '#ffffff',
-    border: '#f0e7f4',
-    variable: '--drawer-footer-bg',
-  },
-  {
-    name: 'Slider Table Color',
-    colorCode: '#efe1f9',
-    opacity: 1,
-    variable: '--slider-table-color',
-  },
-  {
-    name: 'Text bg Highlight',
-    colorCode: '#f5fb00',
-    variable: '--text-bg-highlight',
-  },
-
-  {
-    name: 'Tooltip Bg Color',
-    colorCode: '#1e161f',
-    variable: '--tooltip-bg-color',
-  },
-  {
-    name: 'Tooltip Text Color(default)',
-    colorCode: '#ffffff',
-    variable: '--tooltip-text-color',
-  },
-  {
-    name: 'Toggle Strip Color(default)',
-    colorCode: '#cfd1e2',
-    dropShadow: 'drop-shadow(0 0 2px #00000025)',
-    variable: '--toggle-strip-color',
-  },
-  {
-    name: 'Tooltip Text Color(Active)',
-    colorCode: '#ffffff',
-    variable: '--tooltip-text-color',
-  },
-  {
-    name: 'Toggle Strip Color(Active)',
-    colorCode: '#71347b',
-    dropShadow: 'drop-shadow(0 0 2px #00000025)',
-    variable: '--toggle-strip-active',
-  }, // todo  drop shadow
-  {
-    name: 'Primary Button Color',
-    colorCode:
-      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
-    variable: '--primary-button-color',
-  },
-  {
-    name: 'Primary Button Hover',
-    colorCode:
-      'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
-    variable: '--primary-button-hover',
-  },
-  {
-    name: 'Primary Button Disable',
-    colorCode:
-      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
-    opacity: 0.5,
-    variable: '--primary-button-disable',
-  },
-  {
-    name: 'Primary Button Text Color',
-    colorCode: '#ffffff',
-    variable: '--primary-button-text-color',
-  },
-  {
-    name: 'Secondary Button Icon Color (default)',
-    colorCode: 'rgba(113, 52, 123, 1)',
-    variable: '--secondary-icon-color',
-  },
-  {
-    name: 'Secondary Button (Hover)',
-    colorCode:
-      'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
-    variable: '--secondary-button-hover',
-  },
-  {
-    name: 'Secondary Button (Disabled)',
-    colorCode: 'rgba(113, 52, 123, 1)',
-    opacity: 0.5,
-    variable: '--disable-color',
-  },
-  {
-    name: 'Tertiary Button (default)',
-    colorCode:
-      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
-    variable: '--tertiary-button-color',
-  },
-  {
-    name: 'Tertiary Button (Hover)',
-    colorCode:
-      'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
-    variable: '--tertiary-button-hover',
-  },
-  {
-    name: 'Tertiary Button (Disabled)',
-    colorCode:
-      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
-    opacity: 0.5,
-    variable: '--tertiary-button-color',
-  },
-  {
-    name: 'Delete Button Color',
-    colorCode:
-      'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
-    variable: '--delete-button-color',
-  },
-  {
-    name: 'Delete Button Hover',
-    colorCode:
-      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
-    variable: '--delete-button-hover',
-  },
-  {
-    name: 'Delete Button Disabled',
-    colorCode:
-      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
-    opacity: 0.5,
-    variable: '--delete-button-disable',
-  },
-  {
-    name: 'Primary Button Text Color',
-    colorCode: '#ffffff',
-    variable: '--primary-button-text-color',
-  },
-  {
-    name: 'Overlay Background',
-    colorCode: '#1e161f',
-    opacity: 0.1,
-    variable: '--overlay-bg',
-  },
-  {
-    name: 'Avatar background color',
-    colorCode: '#71347b',
-    variable: '--avatar-background-color',
-  },
-  {
-    name: 'Avatar icon color',
-    colorCode: '#ffffff',
-    variable: '--avatar-icon-color',
-  },
-  {
-    name: 'Sub Header Primary Color',
-    colorCode: '#301349',
-    variable: '--sub-header-primary',
-  },
-  {
-    name: 'Icon Hover BG Color',
-    colorCode: '#f7ecf8',
-    variable: '--ff-icon-hover-bg-color',
-  },
-  {
-    name: 'Modal Background Color',
-    colorCode: '#12121233',
-    variable: '--modal-background-color',
-  },
-  {
-    name: 'Modal Alert Header Color',
-    colorCode: '#db1919',
-    variable: '--modal-alert-header-color',
-  },
-  {
-    name: 'Line Number Color',
-    colorCode: '#ffffff',
-    variable: '--ff-line-number-color',
-  },
-  {
-    name: 'Editor Border Color',
-    colorCode: '#f0e7f4',
-    variable: '--ff-editor-border-color',
-  },
-  {
-    name: 'Status Card Text Color',
-    colorCode: '#ffffff',
-    variable: '--ff-status-card-text-color',
-  },
-  {
-    name: 'Card Status Text Color',
-    colorCode: '#8a8a8a',
-    variable: '--ff-card-status-text-color',
-  },
-  {
-    name: 'Card Passed Status BG Color',
-    colorCode: '#179c5f',
-    variable: '--ff-card-passed-status-bg-color',
-  },
-  {
-    name: 'Card Failed Status BG Color',
-    colorCode: '#9c1732',
-    variable: '--ff-card-failed-status-bg-color',
-  },
-  {
-    name: 'Card Warning Status BG Color',
-    colorCode: '#e2750f',
-    variable: '--ff-card-warning-status-bg-color',
-  },
-  {
-    name: 'Card Skipped Status BG Color',
-    colorCode: '#a83fc4',
-    variable: '--ff-card-skipped-status-bg-color',
-  },
-  {
-    name: 'Card Flaky Status BG Color',
-    colorCode: '#3f5ac4',
-    variable: '--ff-card-flaky-status-bg-color',
-  },
-  {
-    name: 'Search filed color',
-    colorCode: '#F7ECF8',
-    variable: '--ff-search-field-hover-color',
-  },
-  {
-    name: 'Search filed background color',
-    colorCode: '#F7ECF8',
-    variable: '--ff-search-filed-bg-color',
-  },
-  {
-    name: 'All Projects dropdown default color',
-    colorCode: '#FFFFFF33',
-    variable: '--ff-all-projects-default-color',
-  },
-  {
-    name: 'confirm tick color',
-    colorCode: '#5ca700',
-    variable: 'confirm-tick-icon-color',
-  },
-  {
-    name: 'Dynamic card border color',
-    colorCode: '#eeeaf2',
-    variable: ' dynamic-card-border-color',
-  },
-  {
-    name: 'Card header background color',
-    colorCode: '#592f7c1a',
-    variable: 'card-header-bg-color',
-  },
-  {
-    name: "InputWithDropdown's dropdown background color",
-    colorCode: '#71347b27',
-    variable: 'dropdown-bg-color',
-  },
-  {
-    name: 'info modal background color',
-    colorCode:
-      'linear-gradient(94.23deg,rgba(113, 52, 123, 0.4) 16.33%,rgba(70, 22, 77, 0.4) 80.07%) ',
-    variable: 'brand-color-border',
-  },
-  {
-    name: 'alert modal background color',
-    colorCode:
-      'linear-gradient(94.23deg,rgba(228, 37, 37, 0.4) 16.33%,rgba(201, 0, 0, 0.4) 80.07%) ',
-    variable: 'alert-modal-background-color',
-  },
-  {
-    name: 'Progress bar bg color',
-    colorCode: 'rgba(240, 240, 240, 1)',
-    variable: 'ff-progress-bar-bg-color',
-  },
-  {
-    name: 'License expires soon',
-    colorCode: '#ba7422',
-    variable: 'license_expires_soon_color',
-  },
-  {
-    name: 'plugins header bg color',
-    colorCode: 'rgba(89, 47, 124, 0.1)',
-    variable: 'plugins-header-bg-color',
-  },
-  {
-    name: 'follow-user-icon-red',
-    colorCode: '#922B3E',
-    variable: 'follow-user-icon-red_color',
-  },
-  {
-    name: 'follow-user-icon-orange',
-    colorCode: '#ED760E',
-    variable: 'follow-user-icon-orange_color',
-  },
-  {
-    name: 'follow-user-icon-black',
-    colorCode: '#0A0A0A',
-    variable: 'follow-user-icon-black_color',
-  },
-  {
-    name: 'follow-user-icon-pink',
-    colorCode: '#E63244',
-    variable: 'follow-user-icon-pink_color',
-  },
-  {
-    name: 'follow-user-icon-blue',
-    colorCode: '#3B83BD',
-    variable: 'follow-user-icon-blue_color',
-  },
-  {
-    name: 'follow-user-icon-navy',
-    colorCode: '#20214F',
-    variable: 'follow-user-icon-navy_color',
-  },
-  {
-    name: 'follow-user-icon-lightGreen',
-    colorCode: '#BDECB6',
-    variable: 'follow-user-icon-lightGreen_color',
-  },
-  {
-    name: 'follow-user-icon-gray',
-    colorCode: '#D9D9D9',
-    variable: 'follow-user-icon-gray_color',
-  },
-  {
-    name: 'follow-user-icon-yellow',
-    colorCode: '#CDA434',
-    variable: 'follow-user-icon-yellow_color',
-  },
-  {
-    name: 'follow-user-icon-salmon',
-    colorCode: '#D36E70',
-    variable: 'follow-user-icon-salmon_color',
-  },
-];
-
-export default ColorPalette;

package/src/StyleGuide/ColorPalette/index.ts

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

package/src/StyleGuide/ColorPalette/types.ts

@@ -1,19 +0,0 @@
-export interface ColorBoxProps {
-  name: string;
-  colorCode: string;
-  opacity?: number;
-  dropShadow?: string;
-  border?: string;
-  variable?: string;
-}
-
-export interface Color {
-  name: string;
-  colorCode: string;
-  opacity?: number;
-  dropShadow?: string;
-  border?: string;
-  variable?: string;
-}
-
-export type ColorPaletteType = Color[];