react-restyle-components 0.2.39 → 0.2.40

package/README.md

@@ -9,10 +9,6 @@ yarn add react-restyle-components
 
 ```
 
-## IMP : Please use before 0.2.34 version.
-
-Currently WIP
-
 ### 📚 Storybook
 
 https://appasaheb4.github.io/react-restyle-components

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "private": false,
   "description": "Easy use restyle components",
   "author": {

package/lib/src/core-components/atoms/button/Button.stories.d.ts

@@ -31,7 +31,7 @@ declare const meta: {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
+        autoCapitalize?: (string & {}) | "off" | "on" | "none" | "sentences" | "words" | "characters" | undefined;
         autoFocus?: boolean | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
@@ -72,7 +72,7 @@ declare const meta: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -86,7 +86,7 @@ declare const meta: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "true" | "false" | "date" | "page" | "step" | "location" | undefined;
+        "aria-current"?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;

package/lib/src/core-components/atoms/pdf/pdf-images.components.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Style } from '@react-pdf/types';
+interface PdfImageProps {
+    src?: string | any;
+    style?: Style | Style[];
+    fixed?: boolean;
+}
+export declare const PdfImage: ({ src, style, }: PdfImageProps) => React.JSX.Element;
+export {};

package/lib/src/core-components/atoms/pdf/pdf-images.components.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Image } from '@react-pdf/renderer';
+export const PdfImage = ({ src = 'https://picsum.photos/200/300', style, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Image, { style: {
+                ...style,
+            }, src: src })));
+};

package/lib/src/core-components/atoms/pdf/pdf-table.components.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Style } from '@react-pdf/types';
+interface PdfTableProps {
+    style?: Style;
+    headerStyle?: Style;
+    headerFixed?: boolean;
+    fields: Array<any>;
+    data: Array<any>;
+}
+export declare const PdfTable: ({ headerFixed, fields, data, style, headerStyle, }: PdfTableProps) => React.JSX.Element;
+export {};

package/lib/src/core-components/atoms/pdf/pdf-table.components.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { PdfSmall } from './pdf-typography.components';
+import { PdfBorderView } from './pdf-wrapped-view.components';
+const styles = StyleSheet.create({
+    table: {
+        borderColor: '#000000',
+        borderWidth: 1,
+        marginHorizontal: 20,
+        flexFlow: 1,
+    },
+    tableRow: {
+        flexDirection: 'row',
+    },
+    headerBg: {
+        backgroundColor: '#aaa',
+        borderStyle: 'solid',
+        borderColor: '#000000',
+        borderWidth: 1,
+    },
+    tableCellHeader: {
+        margin: 2,
+        fontSize: 10,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    tableCell: {
+        margin: 2,
+        fontSize: 12,
+    },
+    textCenter: {
+        textAlign: 'center',
+    },
+});
+export const PdfTable = ({ headerFixed = false, fields, data, style, headerStyle, }) => (React.createElement(View, { style: [styles.table, { ...style }] },
+    React.createElement(View, { style: [styles.tableRow, styles.headerBg, { ...headerStyle }], fixed: headerFixed }, fields.map((item, index) => (React.createElement(View, { key: index, style: [{ width: item.width + '%' }] },
+        React.createElement(Text, { style: [styles.tableCellHeader] }, item?.title))))),
+    data?.map((item, index) => (React.createElement(View, { key: index, style: styles.tableRow }, Object.entries(item).map((_item, _idx) => (React.createElement(PdfBorderView, { key: _idx, style: {
+            width: fields[_idx]?.width + '%',
+            borderStyle: 'solid',
+        }, mh: 0, mv: 0, p: 0, bw: 1, borderColor: "#000000" }, typeof _item[1] == 'object' ? (React.createElement(React.Fragment, null,
+        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.panelDesc
+            ? `Panel Description : ${_item[1]?.panelDesc} \n`
+            : ''),
+        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.panelMethodName
+            ? `Panel Method Name: ${_item[1]?.panelMethodName} \n`
+            : ''),
+        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.testMethodName
+            ? `Test Method Name: ${_item[1]?.testMethodName} \n`
+            : ''),
+        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.analyteDesc
+            ? `Analyte Description: ${_item[1]?.analyteDesc} \n`
+            : ''),
+        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.analyteMethodName
+            ? `Analyte Method Name: ${_item[1]?.analyteMethodName}`
+            : ''))) : (React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1] || ''))))))))));

package/lib/src/core-components/atoms/pdf/pdf-typography.components.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Style } from '@react-pdf/types';
+interface PdfTextProps {
+    fontWeight?: 'bold' | 'medium' | 'normal';
+    fontSize?: number;
+    fontFamily?: 'ArimaRegular' | 'ArimaBold' | string;
+    textAlign?: 'center' | 'left' | 'right';
+    style?: Style | Style[];
+    lineHeight?: number;
+    bottom?: number;
+    fixed?: boolean;
+    children?: React.ReactNode;
+}
+export declare const PdfHeading: ({ fontWeight, fontSize, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
+export declare const PdfSubHeading: ({ fontWeight, fontSize, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
+export declare const PdfMedium: ({ fontWeight, fontSize, textAlign, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
+export declare const PdfRegular: ({ fontWeight, fontSize, textAlign, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
+export declare const PdfSmall: ({ fontSize, fontFamily, fontWeight, textAlign, lineHeight, fixed, style, children, }: PdfTextProps) => React.JSX.Element;
+export declare const PdfPageNumber: ({ style, bottom }: PdfTextProps) => React.JSX.Element;
+export {};

package/lib/src/core-components/atoms/pdf/pdf-typography.components.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text, Font } from '@react-pdf/renderer';
+Font.register({
+    family: 'ArimaBold',
+    fonts: [
+        {
+            src: '../../../library/assets/fonts/arima/arima-bold.ttf',
+            fontStyle: 'normal',
+            fontWeight: 'bold',
+        },
+    ],
+});
+Font.register({
+    family: 'ArimaRegular',
+    src: '../../../library/assets/fonts/arima/arima-regular.ttf',
+});
+export const PdfHeading = ({ fontWeight = 'bold', fontSize = 22, fontFamily = 'ArimaRegular', style, children, }) => {
+    return (React.createElement(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            ...style,
+        } }, children));
+};
+export const PdfSubHeading = ({ fontWeight = 'bold', fontSize = 20, fontFamily = 'ArimaRegular', style, children, }) => {
+    return (React.createElement(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            ...style,
+        } }, children));
+};
+export const PdfMedium = ({ fontWeight = 'medium', fontSize = 16, textAlign = 'left', fontFamily = 'ArimaRegular', style, children, }) => {
+    return (React.createElement(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            textAlign: textAlign,
+            ...style,
+        } }, children));
+};
+export const PdfRegular = ({ fontWeight = 'normal', fontSize = 12, textAlign = 'left', fontFamily = 'ArimaRegular', style, children, }) => {
+    return (React.createElement(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            textAlign: textAlign,
+            ...style,
+        } }, children));
+};
+export const PdfSmall = ({ fontSize = 10, fontFamily = 'ArimaRegular', fontWeight = 'normal', textAlign = 'left', lineHeight = 0, fixed = false, style, children, }) => {
+    return (React.createElement(Text, { style: {
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            fontWeight: fontWeight,
+            lineHeight: lineHeight,
+            textAlign: textAlign,
+            ...style,
+        }, fixed: fixed }, children));
+};
+export const PdfPageNumber = ({ style, bottom = 55 }) => {
+    return (React.createElement(Text, { style: {
+            position: 'absolute',
+            bottom: bottom,
+            right: 14,
+            fontSize: 10,
+            color: 'black',
+            ...style,
+        }, render: ({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`, fixed: true }));
+};

package/lib/src/core-components/atoms/pdf/pdf-wrapped-view.components.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Style } from '@react-pdf/types';
+interface PdfViewProps {
+    mh?: number;
+    mt?: number;
+    mv?: number;
+    p?: number;
+    borderColor?: string;
+    bg?: string;
+    bw?: number;
+    height?: string | number;
+    alignItems?: 'flex-end' | 'flex-start' | 'center';
+    flexDirection?: 'row' | 'column';
+    fixed?: boolean;
+    isBreak?: boolean;
+    isWrap?: boolean;
+    style?: Style | Style[] | any;
+    children?: React.ReactNode;
+}
+export declare const PdfView: ({ mh, p, flexDirection, style, fixed, isBreak, alignItems, mt, isWrap, children, }: PdfViewProps) => React.JSX.Element;
+export declare const PdfBorderView: ({ mh, mv, p, borderColor, bw, style, flexDirection, fixed, isBreak, children, }: PdfViewProps) => React.JSX.Element;
+interface PdfHeaderProps {
+    bg?: string;
+    p?: number;
+    alignItems?: React.CSSProperties['alignItems'] | any;
+    fixed?: boolean;
+    style?: React.CSSProperties | any;
+    children?: React.ReactNode;
+}
+export declare const PdfHeader: ({ bg, p, alignItems, fixed, style, children, }: PdfHeaderProps) => React.JSX.Element;
+export declare const PdfSubHeader: ({ bg, p, alignItems, fixed, style, children, }: PdfViewProps) => React.JSX.Element;
+interface PdfFooterViewProps {
+    bottom?: number;
+    left?: number;
+    right?: number;
+    bg?: string;
+    p?: number;
+    alignItems?: React.CSSProperties['alignItems'];
+    fixed?: boolean;
+    height?: string | number;
+    style?: React.CSSProperties | any;
+    children: React.ReactNode;
+}
+export declare const PdfFooterView: ({ bottom, left, right, bg, p, alignItems, fixed, height, style, children, }: PdfFooterViewProps) => React.JSX.Element;
+interface GridProps {
+    cols?: number;
+    bg?: 'transparent' | string;
+    style?: Style | Style[];
+    children?: React.ReactNode;
+}
+export declare const PdfGrid: React.FunctionComponent<GridProps>;
+export {};

package/lib/src/core-components/atoms/pdf/pdf-wrapped-view.components.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View } from '@react-pdf/renderer';
+export const PdfView = ({ mh = 20, p = 2, flexDirection = 'column', style, fixed = false, isBreak = false, alignItems, mt, isWrap = true, children, }) => {
+    return (React.createElement(View, { break: isBreak, style: {
+            marginHorizontal: mh,
+            marginTop: mt,
+            padding: p,
+            flexDirection: flexDirection,
+            alignItems: alignItems,
+            ...style,
+        }, fixed: fixed, wrap: isWrap }, children));
+};
+export const PdfBorderView = ({ mh = 20, mv = 50, p = 2, borderColor = 'gray', bw = 2, style, flexDirection = 'column', fixed = false, isBreak = false, children, }) => {
+    return (React.createElement(View, { break: isBreak, style: {
+            flexDirection: flexDirection,
+            marginHorizontal: mh,
+            marginVertical: mv,
+            padding: p,
+            borderColor: borderColor,
+            borderWidth: bw,
+            ...style,
+        }, fixed: fixed }, children));
+};
+export const PdfHeader = ({ bg = 'orange', p = 10, alignItems = 'flex-start', fixed = false, style, children, }) => {
+    return (React.createElement(View, { style: {
+            backgroundColor: bg,
+            alignItems: alignItems,
+            padding: p,
+            ...style,
+        }, fixed: fixed }, children));
+};
+export const PdfSubHeader = ({ bg = 'yellow', p = 4, alignItems = 'flex-end', fixed = false, style, children, }) => {
+    return (React.createElement(View, { style: {
+            backgroundColor: bg,
+            alignItems: alignItems,
+            padding: p,
+            ...style,
+        }, fixed: fixed }, children));
+};
+export const PdfFooterView = ({ bottom = 0, left = 0, right = 0, bg = 'orange', p = 10, alignItems = 'center', fixed = false, height = '100%', style, children, }) => {
+    return (React.createElement(View, { style: [
+            { position: 'absolute', bottom, left, right, height },
+            { backgroundColor: bg, padding: p, alignItems: alignItems, ...style },
+        ], fixed: fixed }, children));
+};
+export const PdfGrid = ({ cols = 1, bg = 'white', style, children, }) => (React.createElement(View, { style: {
+        width: `${100 / cols}%`,
+        backgroundColor: bg,
+        ...style,
+    } }, children));

package/lib/src/core-components/index.d.ts

@@ -1,2 +1,33 @@
+import * as Form from './atoms/form/form.component';
 export * from './atoms/button/button.component';
+export * from './atoms/button/buttonGroup/buttonGroup.component';
+export * from './atoms/check-box/checkBox.component';
+export * from './atoms/date-picker/date-picker.component';
+export * from './atoms/input/input-otp.component';
+export * from './atoms/input/input-pin.component';
+export * from './atoms/input/input.component';
+export * from './atoms/input-dropdown/input-dropdown.component';
+export * from './atoms/loader/loader.component';
+export * from './atoms/radio/radio.component';
+export * from './atoms/stepper/stepper.component';
+export * from './atoms/timer/timer.component';
+export * from './atoms/tooltip/tooltip.component';
+export * from './atoms/icons/icons.component';
 export * from './atoms/tabs/tabs.component';
+export * from './atoms/grid/grid.component';
+export * from './atoms/list/list.component';
+export * from './atoms/pdf/pdf-images.components';
+export * from './atoms/pdf/pdf-table.components';
+export * from './atoms/pdf/pdf-typography.components';
+export * from './atoms/pdf/pdf-wrapped-view.components';
+export * from './molecules/css-multiline-input/css-multiline-input.component';
+export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
+export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
+export * from './molecules/multi-select/multi-select.component';
+export * from './molecules/multi-select-with-field/multi-select-with-field.component';
+export * from './molecules/modal-confirm/modal-confirm.component';
+export * from './molecules/autocomplete/autocomplete';
+export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
+export * from './molecules/color-picker/color-picker.component';
+export * from './molecules/color-picker-modal/color-picker-modal.component';
+export { Form };

package/lib/src/core-components/index.js

@@ -1,33 +1,33 @@
-// import * as Form from './atoms/form/form.component';
+import * as Form from './atoms/form/form.component';
 export * from './atoms/button/button.component';
-// export * from './atoms/button/buttonGroup/buttonGroup.component';
-// export * from './atoms/check-box/checkBox.component';
-// export * from './atoms/date-picker/date-picker.component';
-// export * from './atoms/input/input-otp.component';
-// export * from './atoms/input/input-pin.component';
-// export * from './atoms/input/input.component';
-// export * from './atoms/input-dropdown/input-dropdown.component';
-// export * from './atoms/loader/loader.component';
-// export * from './atoms/radio/radio.component';
-// export * from './atoms/stepper/stepper.component';
-// export * from './atoms/timer/timer.component';
-// export * from './atoms/tooltip/tooltip.component';
-// export * from './atoms/icons/icons.component';
+export * from './atoms/button/buttonGroup/buttonGroup.component';
+export * from './atoms/check-box/checkBox.component';
+export * from './atoms/date-picker/date-picker.component';
+export * from './atoms/input/input-otp.component';
+export * from './atoms/input/input-pin.component';
+export * from './atoms/input/input.component';
+export * from './atoms/input-dropdown/input-dropdown.component';
+export * from './atoms/loader/loader.component';
+export * from './atoms/radio/radio.component';
+export * from './atoms/stepper/stepper.component';
+export * from './atoms/timer/timer.component';
+export * from './atoms/tooltip/tooltip.component';
+export * from './atoms/icons/icons.component';
 export * from './atoms/tabs/tabs.component';
-// export * from './atoms/grid/grid.component';
-// export * from './atoms/list/list.component';
-// export * from './atoms/pdf/pdf-images.components';
-// export * from './atoms/pdf/pdf-table.components';
-// export * from './atoms/pdf/pdf-typography.components';
-// export * from './atoms/pdf/pdf-wrapped-view.components';
-// export * from './molecules/css-multiline-input/css-multiline-input.component';
-// export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
-// export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
-// export * from './molecules/multi-select/multi-select.component';
-// export * from './molecules/multi-select-with-field/multi-select-with-field.component';
-// export * from './molecules/modal-confirm/modal-confirm.component';
-// export * from './molecules/autocomplete/autocomplete';
-// export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
-// export * from './molecules/color-picker/color-picker.component';
-// export * from './molecules/color-picker-modal/color-picker-modal.component';
-// export {Form};
+export * from './atoms/grid/grid.component';
+export * from './atoms/list/list.component';
+export * from './atoms/pdf/pdf-images.components';
+export * from './atoms/pdf/pdf-table.components';
+export * from './atoms/pdf/pdf-typography.components';
+export * from './atoms/pdf/pdf-wrapped-view.components';
+export * from './molecules/css-multiline-input/css-multiline-input.component';
+export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
+export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
+export * from './molecules/multi-select/multi-select.component';
+export * from './molecules/multi-select-with-field/multi-select-with-field.component';
+export * from './molecules/modal-confirm/modal-confirm.component';
+export * from './molecules/autocomplete/autocomplete';
+export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
+export * from './molecules/color-picker/color-picker.component';
+export * from './molecules/color-picker-modal/color-picker-modal.component';
+export { Form };

package/lib/src/tc.module.css

@@ -37,7 +37,6 @@
 } .block { display: block;
 } .inline-block { display: inline-block;
 } .flex { display: flex;
-} .table { display: table;
 } .grid { display: grid;
 } .hidden { display: none;
 } .h-0\.5 { height: 0.125rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.39",
+  "version": "0.2.40",
   "private": false,
   "description": "Easy use restyle components",
   "author": {