pixel-react 1.7.0 → 1.7.1

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "pixel-react",
-  "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.7.0",
-  "main": "lib/index.js",
-  "module": "lib/index.esm.js",
-  "types": "lib/index.d.ts",
-  "author": {
-    "name": "Padmakant Baloji"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/preset-react": "^7.25.9",
-    "@chromatic-com/storybook": "^3.2.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-docs": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-vite": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@types/js-beautify": "^1.14.3",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-google-recaptcha": "^2.1.9",
-    "chromatic": "^11.16.5",
-    "postcss": "^8.4.35",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.24.4",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.80.6",
-    "storybook": "^8.4.5",
-    "storybook-addon-theme-provider": "^0.2.6",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsc -b && rollup -c",
-    "chromatic": "chromatic --exit-zero-on-changes"
-  },
-  "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.24.7",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@monaco-editor/react": "^4.6.0",
-    "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.3.0",
-    "classnames": "^2.5.1",
-    "date-fns-tz": "^3.2.0",
-    "js-beautify": "^1.15.1",
-    "jsencrypt": "^3.3.2",
-    "react-archer": "^4.4.0",
-    "react-day-picker": "^9.2.1",
-    "react-google-recaptcha": "^3.1.0",
-    "react-hook-form": "^7.53.0",
-    "react-phone-input-2": "^2.15.1",
-    "react-window": "^1.8.10",
-    "scss": "^0.2.4",
-    "use-context-selector": "^2.0.0",
-    "vite-plugin-svgr": "^4.3.0",
-    "yarn": "^1.22.22"
-  }
-}
+{
+  "name": "pixel-react",
+  "description": "Great for pixel-perfect, design-focused components in React",
+  "version": "1.7.1",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "author": {
+    "name": "Padmakant Baloji"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-react": "^7.25.9",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@types/js-beautify": "^1.14.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "chromatic": "^11.16.5",
+    "postcss": "^8.4.35",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.24.4",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.80.6",
+    "storybook": "^8.4.5",
+    "storybook-addon-theme-provider": "^0.2.6",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc -b && rollup -c",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.24.7",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@monaco-editor/react": "^4.6.0",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^4.3.0",
+    "classnames": "^2.5.1",
+    "date-fns-tz": "^3.2.0",
+    "js-beautify": "^1.15.1",
+    "jsencrypt": "^3.3.2",
+    "react-archer": "^4.4.0",
+    "react-day-picker": "^9.2.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-hook-form": "^7.53.0",
+    "react-phone-input-2": "^2.15.1",
+    "react-window": "^1.8.10",
+    "scss": "^0.2.4",
+    "use-context-selector": "^2.0.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "yarn": "^1.22.22"
+  }
+}

package/rollup.config.mjs

@@ -1,67 +1,67 @@
-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 { createRequire } from 'node:module';
-import url from '@rollup/plugin-url';
-import copy from 'rollup-plugin-copy';
-
-const requireFile = createRequire(import.meta.url);
-const packageJson = requireFile('./package.json');
-
-export default [
-  {
-    input: 'src/index.ts',
-    context: 'window',
-    output: [
-      {
-        file: packageJson.main, // CJS output
-        format: 'cjs',
-        sourcemap: true,
-        inlineDynamicImports: true,
-      },
-      {
-        file: packageJson.module, // ESM output
-        format: 'esm',
-        sourcemap: true,
-        inlineDynamicImports: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript(),
-      url({
-        include: ['**/*.css'], // Handle font files
-      }),
-
-      postcss({
-        extensions: ['.scss'],
-      }),
-      babel({
-        presets: ['@babel/preset-react'],
-        babelHelpers: 'bundled',
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      }),
-      svgrPlugin({
-        svgrOptions: {
-          icon: true,
-        },
-      }),
-    ],
-  },
-  {
-    context: 'window',
-    input: 'lib/index.d.ts',
-    output: [
-      { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
-    ],
-    plugins: [dts()],
-    external: [/\.scss$/, /\.stories\.tsx$/],
-  },
-];
+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 { createRequire } from 'node:module';
+import url from '@rollup/plugin-url';
+import copy from 'rollup-plugin-copy';
+
+const requireFile = createRequire(import.meta.url);
+const packageJson = requireFile('./package.json');
+
+export default [
+  {
+    input: 'src/index.ts',
+    context: 'window',
+    output: [
+      {
+        file: packageJson.main, // CJS output
+        format: 'cjs',
+        sourcemap: true,
+        inlineDynamicImports: true,
+      },
+      {
+        file: packageJson.module, // ESM output
+        format: 'esm',
+        sourcemap: true,
+        inlineDynamicImports: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript(),
+      url({
+        include: ['**/*.css'], // Handle font files
+      }),
+
+      postcss({
+        extensions: ['.scss'],
+      }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'bundled',
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      }),
+      svgrPlugin({
+        svgrOptions: {
+          icon: true,
+        },
+      }),
+    ],
+  },
+  {
+    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/StyleGuide/ColorPalette/ColorPalette.scss

@@ -1,62 +1,62 @@
-@use '../../assets/styles/fonts';
-
-.ff-style-guide {
-  border-radius: 12px;
-
-  .style-guide-header {
-    background-color: var(--brand-color);
-
-    height: 100px;
-    padding: 40px;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    color: var(--tooltip-text-color);
-
-    & div {
-      @extend .font-size-32;
-      font-weight: 600;
-    }
-    & span {
-      @extend .fontLg;
-      font-weight: 400;
-    }
-  }
-
-  .style-guide-content {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    grid-gap: 40px;
-
-    .color-card {
-      display: flex;
-      flex-direction: column;
-      padding: 10px;
-
-      .color-box {
-        height: 82px;
-        width: 210px;
-        border-radius: 12px;
-        margin-bottom: 10px;
-        > p {
-          color: var(--colorCode);
-          backdrop-filter: invert(100%);
-        }
-      }
-
-      .color-name {
-        @extend .fontMd;
-        font-weight: 500;
-        margin-bottom: 5px;
-        text-transform: capitalize;
-        word-wrap: break-word;
-      }
-
-      .color-code {
-        @extend .fontSm;
-        font-weight: 400;
-        color: var(--text-color);
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-style-guide {
+  border-radius: 12px;
+
+  .style-guide-header {
+    background-color: var(--brand-color);
+
+    height: 100px;
+    padding: 40px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    color: var(--tooltip-text-color);
+
+    & div {
+      @extend .font-size-32;
+      font-weight: 600;
+    }
+    & span {
+      @extend .fontLg;
+      font-weight: 400;
+    }
+  }
+
+  .style-guide-content {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    grid-gap: 40px;
+
+    .color-card {
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+
+      .color-box {
+        height: 82px;
+        width: 210px;
+        border-radius: 12px;
+        margin-bottom: 10px;
+        > p {
+          color: var(--colorCode);
+          backdrop-filter: invert(100%);
+        }
+      }
+
+      .color-name {
+        @extend .fontMd;
+        font-weight: 500;
+        margin-bottom: 5px;
+        text-transform: capitalize;
+        word-wrap: break-word;
+      }
+
+      .color-code {
+        @extend .fontSm;
+        font-weight: 400;
+        color: var(--text-color);
+      }
+    }
+  }
+}

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

@@ -1,16 +1,16 @@
-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;
+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 +1,67 @@
-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;
+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;