@eliseubatista99/react-scaffold-core 0.1.1 → 0.1.3

package/README.md

@@ -1,21 +1,21 @@
-<h1 align="center">Core</h1>
-
----
-
-A library which provides basic components, hooks, helpers and providers to easily build a React application and avoid repeating the usual code.
-
-## Installation
-
-```shell
-npm i @eliseubatista99/react-scaffold-core
-```
-
-## Content
-
-- [Providers](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/providers): Useful providers to handle complex actions like navigation and showing, hiding and managing feedback components;
-
-- [Hooks](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/hooks): Hooks that handle atomic actions, like fetching and endpoint.
-
-- [Helpers](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/helpers): Classes to help with generic repetitive tasks, like transforming a string into Pascal Case.
-
-- [Components](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/components): Basic, customizable components with pre-configured styles and behaviors.
+<h1 align="center">Core</h1>
+
+---
+
+A library which provides basic components, hooks, helpers and providers to easily build a React application and avoid repeating the usual code.
+
+## Installation
+
+```shell
+npm i @eliseubatista99/react-scaffold-core
+```
+
+## Content
+
+- [Providers](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/providers): Useful providers to handle complex actions like navigation and showing, hiding and managing feedback components;
+
+- [Hooks](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/hooks): Hooks that handle atomic actions, like fetching and endpoint.
+
+- [Helpers](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/helpers): Classes to help with generic repetitive tasks, like transforming a string into Pascal Case.
+
+- [Components](https://github.com/eliseubatista99/react-scaffold/tree/main/src/packages/core/src/components): Basic, customizable components with pre-configured styles and behaviors.

package/dist/components/button/button.d.ts

@@ -0,0 +1,7 @@
+import { default as React, CSSProperties } from 'react';
+export type ButtonProps = {
+    onClick: () => void;
+    children?: React.ReactNode;
+    styles?: CSSProperties;
+};
+export declare const Button: ({ children, onClick, styles }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/dist/components/button/stories/button.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ children, onClick, styles }: import('../button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        children: string;
+        onClick: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const XboxPrimary: Story;
+export declare const XboxSecondary: Story;

package/dist/components/drawer/drawer.hook.d.ts

@@ -6,7 +6,4 @@ export declare const useDrawerHelper: ({ id, onCloseDrawer, drawerCloseOffset, }
     drawerRef: React.RefObject<HTMLDivElement | null>;
     drawerBottomDistance: number;
     handleRef: React.RefObject<HTMLDivElement | null>;
-    onDragStart: (e: React.PointerEvent<HTMLDivElement>) => void;
-    onDrag: (e: React.PointerEvent<HTMLDivElement>) => void;
-    onDragEnd: (_: React.PointerEvent<HTMLDivElement>) => void;
 };

package/dist/components/form/form.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface FormFieldOutputData {
+    name: string;
+    value?: unknown;
+}
+export interface FormFieldInputData {
+    name: string;
+    content: JSX.Element;
+}
+export interface FormSubmitButton {
+    styles?: React.CSSProperties;
+    content: React.ReactNode;
+}
+export interface FormProps {
+    fields: FormFieldInputData[];
+    submitButton: FormSubmitButton;
+    onSubmit: (data: FormFieldOutputData[]) => void;
+    styles?: React.CSSProperties;
+}
+export declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/form.hook.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { FormProps } from './form';
+export type FormFieldValidation = (value: string) => string | undefined;
+export declare const useFormHelper: ({ onSubmit, fields }: FormProps) => {
+    ref: React.RefObject<HTMLFormElement | null>;
+    submitForm: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    handleFormSubmission: (event: React.FormEvent<HTMLFormElement>) => void;
+};

package/dist/components/form/index.d.ts

@@ -0,0 +1 @@
+export * from './form';

package/dist/components/form/stories/form.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (props: import('../form').FormProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        fields: {
+            name: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        submitButton: {
+            content: import("react/jsx-runtime").JSX.Element;
+        };
+        onSubmit: (data: import('../form').FormFieldOutputData[]) => void;
+        styles: {
+            width: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/image/image.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export type ImageProps = {
+    src: string;
+    alt?: string;
+    onClick?: () => void;
+    styles?: CSSProperties;
+};
+export declare const Image: ({ src, alt, onClick, styles }: ImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/image/index.d.ts

@@ -0,0 +1 @@
+export * from './image';

package/dist/components/index.d.ts

@@ -1,4 +1,11 @@
+export * from './button';
 export * from './drawer';
+export * from './form';
+export * from './image';
+export * from './inputField';
+export * from './loader';
 export * from './modal';
+export * from './pageLayout';
+export * from './svgImage';
 export * from './toast';
 export * from './typography';

package/dist/components/inputField/index.d.ts

@@ -0,0 +1 @@
+export * from './inputField';

package/dist/components/inputField/inputField.d.ts

@@ -0,0 +1,18 @@
+import { HTMLInputAutoCompleteAttribute, CSSProperties, HTMLInputTypeAttribute } from 'react';
+export interface InputFieldProps {
+    name: string;
+    label?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    bottomMessage?: React.ReactNode;
+    step?: string | number;
+    placeHolder?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    value?: string;
+    initialValue?: string;
+    type?: HTMLInputTypeAttribute;
+    onChange?: (value: string) => void;
+    inputStyles?: CSSProperties;
+    containerProps?: CSSProperties;
+}
+export declare const InputField: ({ name, label, leftIcon, rightIcon, bottomMessage, placeHolder, autoComplete, value, initialValue, type, onChange, inputStyles, containerProps, step, }: InputFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputField/stories/inputField.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ name, label, leftIcon, rightIcon, bottomMessage, placeHolder, autoComplete, value, initialValue, type, onChange, inputStyles, containerProps, step, }: import('../inputField').InputFieldProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        name: string;
+        placeHolder: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithErrorMessage: Story;
+export declare const CountrySearch: Story;
+export declare const SearchInput: Story;

package/dist/components/loader/index.d.ts

@@ -0,0 +1 @@
+export * from './loader';

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,6 @@
+export interface LoaderProps {
+    id: string;
+    children?: React.ReactNode;
+    styles?: React.CSSProperties;
+}
+export declare const Loader: ({ id, styles, children }: LoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/loader/stories/loader.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (props: import('../loader').LoaderProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        id: string;
+        styles: {
+            background: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Opaque: Story;
+export declare const Transparent: Story;

package/dist/components/loader/stories/setup.d.ts

@@ -0,0 +1,2 @@
+import { LoaderProps } from '../loader';
+export declare const LoaderStoriesSetup: (props: LoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pageLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './pageLayout';

package/dist/components/pageLayout/pageLayout.d.ts

@@ -0,0 +1,15 @@
+export interface PageLayoutHeaderAndFooterProps {
+    content: React.ReactNode;
+    visibility?: "always" | "fixed";
+    styles?: React.CSSProperties;
+}
+export interface PageLayoutProps {
+    header?: PageLayoutHeaderAndFooterProps;
+    footer?: PageLayoutHeaderAndFooterProps;
+    floatingContent?: React.ReactNode;
+    allowScroll?: boolean;
+    containerStyles?: React.CSSProperties;
+    pageStyles?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare const PageLayout: ({ header, containerStyles, pageStyles, children, allowScroll, footer, floatingContent, }: PageLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pageLayout/stories/pageLayout.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+import { PageLayoutProps } from '../pageLayout';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: PageLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: PageLayoutProps;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHeaderAlwaysVisible: Story;
+export declare const WithFixedHeader: Story;
+export declare const WithFooterAlwaysVisible: Story;
+export declare const WithFixedFooter: Story;
+export declare const NoHeaderAndNoFooter: Story;

package/dist/components/pageLayout/stories/setup.d.ts

@@ -0,0 +1,2 @@
+import { PageLayoutProps } from '../pageLayout';
+export declare const PageLayoutStoriesSetup: ({ children, ...props }: PageLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/svgImage/index.d.ts

@@ -0,0 +1 @@
+export * from './svgImage';

package/dist/components/svgImage/svgImage.d.ts

@@ -0,0 +1,14 @@
+import { Property } from 'csstype';
+import { default as React, CSSProperties } from 'react';
+export type SvgImageProps = {
+    viewBox?: string;
+    width?: Property.Width;
+    height?: Property.Height;
+    fill?: Property.Fill;
+    stroke?: Property.Stroke;
+    src: React.ReactElement<React.SVGProps<SVGElement>>;
+    alt?: string;
+    onClick?: () => void;
+    styles?: CSSProperties;
+};
+export declare const SvgImage: ({ src, width, height, stroke, viewBox, fill, alt, onClick, styles, }: SvgImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/index.d.ts

@@ -1,4 +1,6 @@
 export * from './useDidMount';
+export * from './useDrag';
 export * from './useFetch';
+export * from './usePointer';
 export * from './useResponsive';
 export * from './useTranslations';

package/dist/hooks/useDrag/index.d.ts

@@ -0,0 +1 @@
+export * from './useDrag';

package/dist/hooks/useDrag/useDrag.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface DragData {
+    startPosX?: number;
+    startPosY?: number;
+    posX?: number;
+    posY?: number;
+    distanceX?: number;
+    distanceY?: number;
+    isDragging: boolean;
+}
+export interface UseDragInput {
+    ref?: React.RefObject<HTMLDivElement | null>;
+    onDragStart?: (data: DragData) => void;
+    onDrag?: (data: DragData) => void;
+    onDragEnd?: (data: DragData) => void;
+}
+export declare const useDrag: ({ ref, onDrag, onDragStart, onDragEnd, }: UseDragInput) => void;

package/dist/hooks/usePointer/index.d.ts

@@ -0,0 +1 @@
+export * from './usePointer';

package/dist/hooks/usePointer/usePointer.d.ts

@@ -0,0 +1,8 @@
+export type MousePositionData = {
+    x?: number;
+    y?: number;
+};
+export declare const usePointer: () => {
+    pointerPosition: MousePositionData;
+    isPointerDown: boolean;
+};

package/dist/hooks/useResponsive/useResponsive.d.ts

@@ -4,6 +4,7 @@ export type BreakpointConfiguration = Record<Breakpoint, number>;
 export declare const defaultBreakpoints: BreakpointConfiguration;
 export interface UseResponsiveOutput {
     currentWidth: number;
+    currentHeight: number;
     currentBreakpoint: Breakpoint;
     currentSize: Size;
 }