pixel-react 1.7.1 → 1.7.2

package/lib/utils/checkEmpty/checkEmpty.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (value: any) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareArrays/compareArrays.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (arr1: unknown[], arr2: unknown[]) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareObjects/compareObjects.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (obj1: import("./compareObjects").AnyObject | null, obj2: import("./compareObjects").AnyObject | null) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/debounce/debounce.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, delay: number) => import("./debounce").DebouncedFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/ffID/ffID.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ffid } from './ffid';
+declare const meta: Meta<typeof ffid>;
+type Story = StoryObj;
+export declare const Primary: Story;
+export default meta;

package/lib/utils/find/findAndInsert.d.ts

@@ -0,0 +1,7 @@
+export type AnyObject = {
+    id: number;
+    [key: string]: any;
+};
+export declare function findAndInsert<T extends AnyObject>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
+    updatedArray: T[];
+} | null;

package/lib/utils/find/findAndInsert.stories.d.ts

@@ -0,0 +1,7 @@
+import { findAndInsert } from './findAndInsert';
+declare const _default: {
+    title: string;
+    component: typeof findAndInsert;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/findAndInsert/findAndInsert.stories.d.ts

@@ -0,0 +1,7 @@
+import { findAndInsert } from './findAndInsert';
+declare const _default: {
+    title: string;
+    component: typeof findAndInsert;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (data: string, publicKey: string) => string | false;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/getExtension/getExtension.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (value: string | File) => string | undefined;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/throttle/throttle.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, limit: number) => import("./throttle").ThrottledFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/truncateText/truncateText.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (text: string, maxLength: number) => string;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,81 +1,81 @@
-{
-  "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"
-  }
-}
+{
+  "name": "pixel-react",
+  "description": "Great for pixel-perfect, design-focused components in React",
+  "version": "1.7.2",
+  "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;