pixel-react 1.0.0

package/.prettierrc.js

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,26 @@
+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.ts

@@ -0,0 +1,26 @@
+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

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

package/README.md

@@ -0,0 +1,25 @@
+<h1 align="center">FireFlink UI</h1>
+
+FireFlink UI is an open-source React component library.
+
+## Installation
+
+Install the package in your project directory with:
+
+```bash
+npm install fireflink
+```
+
+## Documentation
+
+[Click Here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/)
+
+## Example
+
+```bash
+import { Button } from 'fireflink'
+
+...
+<Button label="Button Label" variant="primary" />
+...
+```

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/assets/utils/functionutils.ts","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/hooks/useclickoutside.tsx","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts"],"version":"5.6.2"}

package/lib/StyleGuide/ColorPalette/ColorPalette.d.ts

@@ -0,0 +1,3 @@
+import './ColorPalette.scss';
+declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+export default Colors;

package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts

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

package/lib/StyleGuide/ColorPalette/colorPaletteList.d.ts

@@ -0,0 +1,3 @@
+import { ColorPaletteType } from './types';
+declare const ColorPalette: ColorPaletteType;
+export default ColorPalette;

package/lib/StyleGuide/ColorPalette/index.d.ts

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

package/lib/StyleGuide/ColorPalette/types.d.ts

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

package/lib/StyleGuide/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+import './Typography.scss';
+declare const Typography: () => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/lib/StyleGuide/Typography/Typography.stories.d.ts

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

package/lib/StyleGuide/Typography/TypographyList.d.ts

@@ -0,0 +1,5 @@
+export declare const fontData: {
+    name: string;
+    fontSizePx: string;
+    fontSizeRem: string;
+}[];

package/lib/StyleGuide/Typography/types.d.ts

@@ -0,0 +1,8 @@
+export interface FontData {
+    name: string;
+    fontSizePx: string;
+    fontSizeRem: string;
+}
+export interface TypographyProps {
+    fonts: FontData[];
+}

package/lib/assets/utils/functionUtils.d.ts

@@ -0,0 +1 @@
+export declare const isFunction: (functionToCheck: any) => any;

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+import './Accordion.scss';
+import '../../../index.scss';
+import { AccordionProps } from './types';
+/**
+ * Accordion UI component
+ */
+declare const Accordion: ({ headerTitle, color, minHeight, accordionContent, disable, disableInfoMessage, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/lib/components/Accordion/Accordion.stories.d.ts

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

package/lib/components/Accordion/index.d.ts

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

package/lib/components/Accordion/types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface AccordionProps {
+    /**
+     * Accordion Header Title
+     */
+    headerTitle: string | JSX.Element;
+    /**
+     * Content that to be shown while Accordion is expanded
+     */
+    accordionContent: ReactNode;
+    /**
+     * Custom color for the Accordion header
+     */
+    color?: string;
+    /**
+     * Minimum height for the Accordion
+     */
+    minHeight?: string;
+    /**
+     * Property to disable accordion
+     */
+    disable?: boolean;
+    /**
+     * Info message to user for disabling accordion
+     */
+    disableInfoMessage?: string;
+}

package/lib/components/AddResourceButton/AddButton.d.ts

@@ -0,0 +1,4 @@
+import './AddButton.scss';
+import { AddResourceButtonProps } from './type';
+declare const AddButton: ({ id, variant, directionalArrow, zIndex, }: AddResourceButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AddButton;

package/lib/components/AddResourceButton/AddButton.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AddButton from './AddButton';
+declare const meta: Meta<typeof AddButton>;
+type Story = StoryObj<typeof AddButton>;
+export declare const Default: Story;
+export declare const TwoArrowsButtons: Story;
+export declare const ThreeArrowsButton: Story;
+export default meta;

package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts

@@ -0,0 +1,6 @@
+import './ArrowsButton.scss';
+import { DirectionalArrowButtonProps } from '../type';
+declare const ArrowsButton: ({ direction, menuOptions, onArrowClick, }: DirectionalArrowButtonProps & {
+    isActive: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowsButton;

package/lib/components/AddResourceButton/index.d.ts

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

package/lib/components/AddResourceButton/type.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Describes the directional arrow used in the Add Resource Button component.
+ * The arrow specifies its direction (top, right, down) and associated menu options.
+ *
+ * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
+ * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
+ * If null, no menu options will be shown.
+ */
+export interface DirectionalArrow {
+    direction: 'top' | 'right' | 'down';
+    menuOptions: ({
+        label: string;
+        value: string | string[];
+        icon: string;
+        disable?: boolean;
+    })[];
+}
+/**a
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+export interface AddResourceButtonProps {
+    id?: string;
+    variant?: 'primary' | 'secondary';
+    directionalArrow: {
+        direction: 'top' | 'right' | 'down';
+        menuOptions: ({
+            label: string;
+            value: string | string[];
+            icon: string;
+            disable?: boolean;
+        })[];
+    }[];
+    zIndex?: number;
+}
+/**
+ * Props for individual directional arrow buttons.
+ *
+ * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
+ * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
+ * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
+ * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
+ */
+export interface DirectionalArrowButtonProps {
+    direction: 'top' | 'right' | 'down';
+    menuOptions: ({
+        label: string;
+        value: string | string[];
+        icon: string;
+        disable?: boolean;
+    })[];
+    onArrowClick: () => void;
+    isActive: boolean;
+    variant?: 'primary' | 'secondary';
+}
+/**
+ * Utility function to validate an array of directional arrows.
+ * Ensures there is at least one valid arrow in the array.
+ * If the array is empty, it returns a default arrow object.
+ */
+export declare const validateArrows: (arrows: DirectionalArrow[]) => DirectionalArrow[];

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import './Button.scss';
+import '../../assets/styles/_colors.scss';
+import { ButtonProps } from './types';
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/lib/components/Button/Button.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+declare const meta: Meta<typeof Button>;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Delete: Story;
+export declare const PrimaryWithIcon: Story;
+export declare const SecondaryWithIcon: Story;
+export declare const TertiaryWithIcon: Story;
+export default meta;

package/lib/components/Button/index.d.ts

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

package/lib/components/Button/types.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+export interface ButtonProps {
+    /**
+     * Variant of the button
+     */
+    variant: 'primary' | 'secondary' | 'tertiary' | 'delete';
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label?: string;
+    /**
+     * Type of the button
+     */
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * Button id
+     */
+    id?: string;
+    /**
+     * onSubmit function handler
+     */
+    onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * react ref for the button
+     */
+    ref?: any;
+    /**
+     * Classname for the button
+     */
+    className?: string;
+    /**
+     * Additional styles for the button
+     */
+    style?: React.CSSProperties;
+    /**
+     * Give icon name availble in storybook that to be on left side of button
+     */
+    iconName?: string;
+    /**
+     * Give icon name availble in storybook that to be on left side of button
+     */
+    iconPosition?: 'left' | 'right';
+    transparentBackground?: boolean;
+}

package/lib/components/Charts/DonutChart/DonutChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './DonutChart.scss';
+import { DonutChartProps } from './type';
+declare const DonutChart: React.FC<DonutChartProps>;
+export default DonutChart;

package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts

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

package/lib/components/Charts/DonutChart/index.d.ts

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

package/lib/components/Charts/DonutChart/type.d.ts

@@ -0,0 +1,13 @@
+export type Status = 'passed' | 'failed' | 'warning' | 'skipped' | 'Passed' | 'Failed' | 'Skipped' | 'Warning';
+export type StatusValue = {
+    status: Status;
+    value: number;
+};
+export type DonutChartProps = {
+    radius: number;
+    lineWidth: number;
+    statusValues: StatusValue[];
+    legendDetailsType: string;
+    isLegendDetails: boolean;
+    gapAngle?: number;
+};

package/lib/components/Charts/RadialChart/RadialChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './RadialChart.scss';
+import { RadialChartProps } from './types';
+declare const RadialChart: React.FC<RadialChartProps>;
+export default RadialChart;

package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts

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

package/lib/components/Charts/RadialChart/index.d.ts

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

package/lib/components/Charts/RadialChart/types.d.ts

@@ -0,0 +1,25 @@
+export type Status = {
+    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'passed' | 'failed' | 'warning' | 'skipped';
+    value: number;
+};
+export interface RadialChartProps {
+    radius: number;
+    lineWidth: number;
+    statusValues: Status[];
+    onClick?: (status: Status) => void;
+    fontSize: number;
+}
+export type ArcParams = {
+    x: number;
+    y: number;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+};
+export type ArcResult = string;
+export type ArcAnglesResult = {
+    endAngle: number;
+    backgroundArcPath: string;
+    foregroundArcPath: string;
+    percentage: number;
+};

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './Checkbox.scss';
+import { CheckboxProps } from './types';
+import '../../assets/styles/_colors.scss';
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/lib/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Partial: Story;
+export declare const Controlled: Story;

package/lib/components/Checkbox/index.d.ts

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

package/lib/components/Checkbox/types.d.ts

@@ -0,0 +1,30 @@
+export interface CheckboxProps {
+    /**
+     * Unique ID for the checkbox input
+     */
+    id?: string;
+    /**
+     * Name attribute for the checkbox input
+     */
+    name?: string;
+    /**
+     * Optional side label
+     */
+    label?: string;
+    /**
+     * Optional disable attribute
+     */
+    disabled?: boolean;
+    /**
+     * Optional checked attribute to prefill
+     */
+    checked?: boolean;
+    /**
+     * Optional onChange function
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * For partially checked checkbox
+     */
+    partial?: boolean;
+}

package/lib/components/Chip/Chip.d.ts

@@ -0,0 +1,4 @@
+import './Chip.scss';
+import { ChipsProps } from './types';
+declare const Chip: ({ label, fullText, variant, onClick, }: ChipsProps) => import("react/jsx-runtime").JSX.Element;
+export default Chip;

package/lib/components/Chip/Chip.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Chip from './Chip';
+import '../../assets/styles/_colors.scss';
+import './Chip.scss';
+declare const meta: Meta<typeof Chip>;
+type Story = StoryObj<typeof Chip>;
+export declare const Primary: Story;
+export declare const withoutExpand: Story;
+export declare const Group: Story;
+export declare const CustomChip: Story;
+export declare const Success: Story;
+export declare const Errors: Story;
+export declare const Warning: Story;
+export default meta;

package/lib/components/Chip/index.d.ts

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

package/lib/components/Chip/types.d.ts

@@ -0,0 +1,18 @@
+export interface ChipsProps {
+    /**
+     * The text to be displayed on the Chip.
+     */
+    label: string;
+    /**
+     * The text to be displayed on hover.
+     */
+    fullText?: string;
+    /**
+     * The variant of the Chip.
+     */
+    variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom';
+    /**
+     * The callback function to be executed when the Chip is clicked.
+     */
+    onClick?: () => void;
+}

package/lib/components/Drawer/Drawer.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps } from './Types.js';
+import './Drawer.scss';
+declare const Drawer: ({ isOpen, children, onClose, title, primaryButtonProps, secondaryButtonProps, leftPrimaryButtonProps, leftSecondaryButtonProps, showEditButton, onEdit, overlay, isFooterRequired, footerContent, size, _isExpanded, isBackButtonVisible, _isCloseModalButtonVisible, }: DrawerProps) => import("react").ReactPortal;
+export default Drawer;

package/lib/components/Drawer/Drawer.stories.d.ts

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