cc-ui-library 1.0.1

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,25 @@
+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'
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+
+import '../index.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: {  },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      source: {
+        language: 'tsx',
+      },
+    },
+  },
+
+  tags: ['autodocs']
+};
+
+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-ui
+```
+
+## Documentation
+
+[Click Here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/)
+
+## Example
+
+```bash
+import { Button } from 'fireflink-ui'
+
+...
+<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/assets/utils/functionUtils.d.ts

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

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

@@ -0,0 +1,7 @@
+import './Button.scss';
+import { ButtonProps } from './types';
+/**
+ * Primary UI component for user interaction
+ */
+declare const Button: ({ variant, backgroundColor, size, onClick, label, disabled, children, type, className, style, transparentBackground, withIcon, iconName, iconPosition, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

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

@@ -0,0 +1,10 @@
+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 Danger: Story;
+export declare const Success: Story;
+export declare const ButtonWithIcon: 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,68 @@
+import { ReactNode } from 'react';
+export interface ButtonProps {
+    /**
+     * Variant of the button
+     */
+    variant: 'primary' | 'secondary' | 'danger' | 'success';
+    /**
+     * 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;
+    /**
+     * Pass true for transparentBackground button
+     */
+    transparentBackground?: boolean;
+    /**
+     * Pass true if button should be with icon
+     */
+    withIcon?: boolean;
+    /**
+     * 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';
+}

package/lib/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import './Icons.scss';
+import { IconProps } from './types';
+declare const Icon: ({ name, height, width, onClick, color, hoverEffect, className, disabled, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Icon;

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

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

package/lib/components/Icon/iconList.d.ts

@@ -0,0 +1,2 @@
+declare let Components: any;
+export default Components;

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

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

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

@@ -0,0 +1,10 @@
+export interface IconProps {
+    name: string;
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    onClick?: (data?: any) => void;
+    hoverEffect?: boolean;
+    disabled?: boolean;
+}

package/lib/components/Toggle/Toggle.d.ts

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+export interface ToggleProps {
+    /**
+     * Optional onChange handler
+     */
+    onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /**
+     * Optional disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Optional checked state
+     */
+    checked?: boolean;
+    /**
+     * Optional id
+     */
+    id?: string;
+    /**
+     * What background color to occur upon toggled
+     */
+    variant?: 'primary' | 'secondary';
+}

package/lib/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+declare const useClickOutside: (ref: React.RefObject<HTMLElement>, callback: () => void) => void;
+export default useClickOutside;

package/lib/index.d.ts

@@ -0,0 +1,118 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode } from 'react';
+
+interface ButtonProps {
+    /**
+     * Variant of the button
+     */
+    variant: 'primary' | 'secondary' | 'danger' | 'success';
+    /**
+     * 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;
+    /**
+     * Pass true for transparentBackground button
+     */
+    transparentBackground?: boolean;
+    /**
+     * Pass true if button should be with icon
+     */
+    withIcon?: boolean;
+    /**
+     * 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';
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+declare const Button: ({ variant, backgroundColor, size, onClick, label, disabled, children, type, className, style, transparentBackground, withIcon, iconName, iconPosition, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface IconProps {
+    name: string;
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    onClick?: (data?: any) => void;
+    hoverEffect?: boolean;
+    disabled?: boolean;
+}
+
+declare const Icon: ({ name, height, width, onClick, color, hoverEffect, className, disabled, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
+
+interface ToggleProps {
+    /**
+     * Optional onChange handler
+     */
+    onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /**
+     * Optional disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Optional checked state
+     */
+    checked?: boolean;
+    /**
+     * Optional id
+     */
+    id?: string;
+    /**
+     * What background color to occur upon toggled
+     */
+    variant?: 'primary' | 'secondary';
+}
+
+declare const Toggle: React$1.FC<ToggleProps>;
+
+type valueType = any;
+declare const checkEmpty: (value: valueType) => boolean;
+
+export { Button, Icon, Toggle, checkEmpty };