{
54 | formik?.setFieldValue(id, event.target.checked);
55 | }
56 | }
57 | />
58 | )}
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/package/nativeComponents/inputs/NativeDatepicker.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React from "react";
3 |
4 | import { LocalizationProvider } from "@mui/x-date-pickers";
5 | import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
6 |
7 | import NativeTextField from "./NativeTextField";
8 | import { getValidDateTime } from "../../helper/helper";
9 | import { SCDatePicker } from "../../styledComponents/inputs/SCDatePicker";
10 |
11 | export default function NativeDatePicker(props) {
12 | const {
13 | id,
14 | name,
15 | label,
16 | onChange,
17 | value,
18 | disablePast,
19 | disableFuture,
20 | formik,
21 | shouldDisableDate,
22 | minDate,
23 | maxDate,
24 | } = props;
25 |
26 | return (
27 |
28 | {
37 | onChange && !formik
38 | ? onChange(value)
39 | : formik?.setFieldValue(
40 | id,
41 | value ? value?.format("YYYY-MM-DD") : null
42 | );
43 | }}
44 | fullWidth={true}
45 | disablePast={disablePast}
46 | disableFuture={disableFuture}
47 | shouldDisableDate={shouldDisableDate}
48 | renderInput={(params) => (
49 |
54 | )}
55 | />
56 |
57 | );
58 | }
--------------------------------------------------------------------------------
/package/styledComponents/navigation/SCDrawer.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 |
3 | import MuiDrawer from "@mui/material/Drawer";
4 | // eslint-disable-next-line import/no-unresolved
5 | import { StyledComponentsClasses, getEffectiveStyle } from "@wrappid/styles";
6 | import styled from "styled-components";
7 |
8 | const defaultStyleClasses = [StyledComponentsClasses.NAVIGATION.DRAWER];
9 |
10 | export const DEFAULT_DRAWER_WIDTH = 240;
11 |
12 | export const DEFAULT_MINI_DRAWER_WIDTH = 56;
13 |
14 | const openedMixin = (config, theme) => ({
15 | ...getEffectiveStyle(StyledComponentsClasses.APP_BAR.HEIGHT),
16 | transition: theme.transitions.create("width", {
17 | duration: theme.transitions.duration.enteringScreen,
18 | easing : theme.transitions.easing.sharp,
19 | }),
20 | width: `${config?.drawerWidth || DEFAULT_DRAWER_WIDTH}px`,
21 | });
22 |
23 | const closedMixin = (config, theme) => ({
24 | ...getEffectiveStyle(StyledComponentsClasses.APP_BAR.HEIGHT),
25 | transition: theme.transitions.create("width", {
26 | duration: theme.transitions.duration.leavingScreen,
27 | easing : theme.transitions.easing.sharp,
28 | }),
29 | width : 0,
30 | [theme.breakpoints.up("sm")]: { width: `${config?.miniDrawerWidth || DEFAULT_MINI_DRAWER_WIDTH}px` },
31 | });
32 |
33 | export const SCDrawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ config, open, theme }) => ({
34 | /**
35 | * @todo
36 | * Must support external styleClasses through props
37 | */
38 | ...getEffectiveStyle([...defaultStyleClasses]),
39 | ...(open && {
40 | ...openedMixin(config, theme),
41 | "& .MuiDrawer-paper": openedMixin(config, theme),
42 | }),
43 | ...(!open && {
44 | ...closedMixin(config, theme),
45 | "& .MuiDrawer-paper": closedMixin(config, theme),
46 | }),
47 | }));
48 |
--------------------------------------------------------------------------------
/package/nativeComponents/layouts/NativeGrid.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React, { useState, useEffect, Children } from "react";
3 |
4 | import { getUUID } from "../../helper/appUtils";
5 | import { getGridSizeProps } from "../../helper/componentUtil";
6 | import { SCGrid } from "../../styledComponents/layouts/SCGrid";
7 | export default function NativeGrid(props) {
8 | const [_uuid, setUuid] = useState(null);
9 | const [containerId, setContainerId] = useState(null);
10 |
11 | useEffect(()=>{
12 | setUuid(getUUID());
13 | setContainerId(props?.NativeId ? "gc_" + props.NativeId : "gc_" + _uuid);
14 | }, []);
15 |
16 | return (
17 |
25 | {props?.item
26 | ? props.children
27 | : Children.toArray(props.children).map((child, index) => {
28 | let itemId = child.props?.NativeId
29 | ? containerId + "-gi-" + index + "_" + child.props.NativeId
30 | : containerId + "-gi-" + index;
31 |
32 | return (
33 |
44 | {child}
45 |
46 | );
47 | })}
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/package/nativeComponents/dataTable/NativeDataTableToolbar.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React from "react";
3 |
4 | // eslint-disable-next-line import/no-unresolved
5 | import { UtilityClasses } from "@wrappid/styles";
6 |
7 | import NativeGrid from "../layouts/NativeGrid";
8 | import NativeStack from "../layouts/NativeStack";
9 |
10 | export default function NativeDataTableToolbar(props) {
11 | const { allTools } = props;
12 |
13 | const formPanel = (panel)=>{
14 | return
19 | {panel?.stacks &&
20 | panel?.stacks?.map((stack, index) => (
21 |
26 | {stack?.map((element) =>
27 | element?.comp
28 | ? typeof element?.comp === "function"
29 | ? element.comp()
30 | : element.comp
31 | : null
32 | )}
33 |
34 | ))}
35 | ;
36 | };
37 |
38 | return allTools?.map((row, index) => (
39 |
44 | {formPanel(row?.leftPanel)}
45 |
46 | {formPanel(row?.rightPanel)}
47 |
48 | ));
49 | }
50 |
--------------------------------------------------------------------------------
/package/helper/componentUtil.js:
--------------------------------------------------------------------------------
1 | import useScrollTrigger from "@mui/material/useScrollTrigger";
2 |
3 | import {
4 | FORM_LG_DEFAULT_GRID_SIZE,
5 | FORM_MD_DEFAULT_GRID_SIZE,
6 | FORM_SM_DEFAULT_GRID_SIZE,
7 | FORM_XL_DEFAULT_GRID_SIZE,
8 | FORM_XS_DEFAULT_GRID_SIZE
9 | } from "../form/nativeFormConstants";
10 |
11 | const XS_DEFAULT_GRID_SIZE = 12;
12 | const SM_DEFAULT_GRID_SIZE = 12;
13 | const MD_DEFAULT_GRID_SIZE = 12;
14 | const LG_DEFAULT_GRID_SIZE = 12;
15 | const XL_DEFAULT_GRID_SIZE = 12;
16 |
17 | export function getGridSizeProps(gridSize, formFlag) {
18 | let finalProps = {
19 | lg: formFlag ? FORM_LG_DEFAULT_GRID_SIZE : LG_DEFAULT_GRID_SIZE,
20 | md: formFlag ? FORM_MD_DEFAULT_GRID_SIZE : MD_DEFAULT_GRID_SIZE,
21 | sm: formFlag ? FORM_SM_DEFAULT_GRID_SIZE : SM_DEFAULT_GRID_SIZE,
22 | xl: formFlag ? FORM_XL_DEFAULT_GRID_SIZE : XL_DEFAULT_GRID_SIZE,
23 | xs: formFlag ? FORM_XS_DEFAULT_GRID_SIZE : XS_DEFAULT_GRID_SIZE,
24 | };
25 |
26 | if (gridSize && !isNaN(gridSize)) {
27 | finalProps = {
28 | lg: gridSize,
29 | md: gridSize,
30 | sm: gridSize,
31 | xl: gridSize,
32 | xs: gridSize,
33 | };
34 | } else if (gridSize) {
35 | if (gridSize.xs) {
36 | finalProps = {
37 | lg: gridSize.xs,
38 | md: gridSize.xs,
39 | sm: gridSize.xs,
40 | xl: gridSize.xs,
41 | xs: gridSize.xs,
42 | };
43 | }
44 | if (gridSize.sm) {
45 | finalProps = {
46 | ...finalProps,
47 | lg: gridSize.sm,
48 | md: gridSize.sm,
49 | sm: gridSize.sm,
50 | xl: gridSize.sm,
51 | };
52 | }
53 | if (gridSize.md) {
54 | finalProps = {
55 | ...finalProps,
56 | lg: gridSize.md,
57 | md: gridSize.md,
58 | xl: gridSize.md,
59 | };
60 | }
61 | if (gridSize.lg) {
62 | finalProps = {
63 | ...finalProps,
64 | lg: gridSize.lg,
65 | xl: gridSize.lg,
66 | };
67 | }
68 | if (gridSize.xl) {
69 | finalProps = {
70 | ...finalProps,
71 | xl: gridSize.xl,
72 | };
73 | }
74 | }
75 |
76 | return finalProps;
77 | }
78 |
79 | export { useScrollTrigger as nativeUseScrollTrigger };
80 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
106 | # test package folder
107 | src/package/*
108 |
109 | # Dependency Files
110 | package.json
111 | package-lock.json
112 | ./package/package.json
113 | ./package/package-lock.json
--------------------------------------------------------------------------------
/package/nativeComponents/navigation/NativeCustomTabs.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React from "react";
3 |
4 | import NativeTab from "./NativeTab";
5 | import NativeTabPanel from "./NativeTabPanel";
6 | import NativeTabs from "./NativeTabs";
7 | import { nativeUseLocation } from "../helper/routerHelper";
8 |
9 | export default function NativeCustomTabs(props) {
10 | const location = nativeUseLocation();
11 |
12 | {/* the below code is the real mui code that will be shifted to "NativeCustomTabs" for web -->saif */ }
13 | // return ; -->this is used in Manageappointment.js exporting the props i.e tabsContent.
14 |
15 | const { tabsContent, preHandleChangeHook, postHandleChangeHook } = props;
16 | const [tabValue, setTabValue] = React.useState(tabsContent && tabsContent.length > 0 ? tabsContent[0]?.id : 0);
17 |
18 | React.useEffect(() => {
19 | if (
20 | location?.hash &&
21 | tabsContent?.filter((tabContent) => {
22 | return tabContent?.id === location?.hash?.replace("#", "");
23 | })?.length > 0
24 | ) {
25 | setTabValue(location.hash?.replace("#", ""));
26 | } else {
27 | setTabValue(tabsContent[0]?.id);
28 | }
29 | }, [tabsContent, location]);
30 |
31 | const handleChange = (ele, value) => {
32 | preHandleChangeHook && preHandleChangeHook(ele, value);
33 | setTabValue(value);
34 | postHandleChangeHook && postHandleChangeHook(ele, value);
35 | };
36 |
37 | return (
38 | <>
39 |
44 | {tabsContent?.map((tabContent, index) => {
45 | return ;
46 | })}
47 |
48 |
49 | {tabsContent?.map((tabContent, tabIndex) => {
50 | return (
51 |
57 | {React.createElement(
58 | props.componentRegistry[tabContent.comp]?.comp
59 | )}
60 |
61 | );
62 | })}
63 |
64 | );
65 | }
--------------------------------------------------------------------------------
/package/nativeComponents/inputs/NativeJSONEditor.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React, { Component } from "react";
3 |
4 | import JSONEditor from "jsoneditor";
5 |
6 | import "jsoneditor/dist/jsoneditor.css";
7 | import NativeLabel from "../dataDisplay/paragraph/NativeLabel";
8 |
9 | export default class NativeJSONEditor extends Component {
10 | componentDidMount() {
11 | let mode = "code";
12 |
13 | if (this.props.readOnly) {
14 | mode = "view";
15 | }
16 | const options = {
17 | mode : mode,
18 | onChangeText: this.handelChange,
19 | schema : this.props.schema || {},
20 | };
21 |
22 | this.jsoneditor = new JSONEditor(this.container, options);
23 |
24 | this.jsoneditor.set(this.props.value);
25 | }
26 |
27 | componentWillUnmount() {
28 | if (this.jsoneditor) {
29 | this.jsoneditor.destroy();
30 | }
31 | }
32 |
33 | componentDidUpdate() {
34 | if (this.props.readOnly) {
35 | this.jsoneditor.setMode("view");
36 | } else {
37 | this.jsoneditor.setMode("code");
38 | }
39 |
40 | this.jsonEditorValueUpdate(this.props.value);
41 | }
42 |
43 | jsonEditorValueUpdate = (value = {}) => {
44 | if (this.jsoneditor) {
45 | let finalValue = value;
46 |
47 | try {
48 | if (typeof finalValue === "string") {
49 | finalValue = JSON.parse(finalValue);
50 | this.jsoneditor.update(finalValue);
51 | } else {
52 | this.jsoneditor.update(finalValue);
53 | }
54 | } catch (err) {
55 | // eslint-disable-next-line no-console
56 | console.warn("Not a valid json", finalValue, err);
57 | // eslint-disable-next-line etc/no-commented-out-code
58 | // this.jsoneditor.update({});
59 | }
60 | }
61 | };
62 |
63 | handelChange = (value) => {
64 | let finalValue = value;
65 |
66 | if (typeof finalValue === "string") {
67 | try{
68 | finalValue = JSON.parse(finalValue);
69 | }
70 | catch(err){
71 | // eslint-disable-next-line no-console
72 | console.log("JSON NOT CORRECT");
73 | return;
74 | }
75 | if (this.props.formik) {
76 | this.props.formik.setFieldValue(this.props.id, finalValue);
77 | }
78 | this.props.onChange(finalValue);
79 | }
80 |
81 | };
82 |
83 | render() {
84 | return (
85 | <>
86 | {this.props.label || "No Label Provided"}
87 |
88 | (this.container = elem)} />
89 |
90 | );
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@wrappid/native-web",
3 | "version": "0.0.364",
4 | "description": "This repository is combined packages of all the Styled Components for react web project.",
5 | "main": "index.js",
6 | "scripts": {
7 | "prepare": "husky install",
8 | "attributions:gen": "node ./scripts/attributions.gen.js",
9 | "test": "echo testing not yet implemented",
10 | "build": "npx babel package --out-dir dist --copy-files",
11 | "code:lint": "eslint --ignore-path .gitignore ./package",
12 | "code:format": "npm run code:lint -- --fix",
13 | "release": "standard-version --bumpFiles ./package.json ./package/package.json ./package-lock.json ./package/package-lock.json",
14 | "publish": "npm publish *.tgz --registry=https://npm.pkg.github.com --scope=@wrappid"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/wrappid/native-web.git"
19 | },
20 | "keywords": [
21 | "css-in-js",
22 | "react",
23 | "react-native"
24 | ],
25 | "license": "MIT",
26 | "author": {
27 | "name": "Wrappid",
28 | "email": "wrappid.framework@gmail.com",
29 | "url": "https://github.com/wrappid/"
30 | },
31 | "homepage": "https://github.com/wrappid/native-web",
32 | "bugs": {
33 | "url": "https://github.com/wrappid/native-web/issues"
34 | },
35 | "babel": {
36 | "presets": [
37 | "@babel/preset-react"
38 | ]
39 | },
40 | "devDependencies": {
41 | "@babel/cli": "7.21.0",
42 | "@babel/core": "7.21.0",
43 | "@babel/polyfill": "7.12.1",
44 | "@babel/preset-env": "7.20.2",
45 | "@babel/preset-react": "7.18.6",
46 | "@commitlint/cli": "17.5.0",
47 | "@commitlint/config-conventional": "17.4.4",
48 | "@commitlint/prompt-cli": "17.5.0",
49 | "@mui/icons-material": "5.15.20",
50 | "@mui/material": "5.15.20",
51 | "@mui/x-date-pickers": "5.0.8",
52 | "eslint": "8.40.0",
53 | "eslint-plugin-etc": "2.0.2",
54 | "eslint-plugin-import": "2.27.5",
55 | "eslint-plugin-react": "7.32.2",
56 | "eslint-plugin-sort-keys-fix": "1.1.2",
57 | "eslint-plugin-unused-imports": "2.0.0",
58 | "husky": "8.0.3",
59 | "jodit-react": "1.3.39",
60 | "jsoneditor": "9.10.0",
61 | "license-checker": "25.0.1",
62 | "moment": "2.29.4",
63 | "mui-color-input": "2.0.3",
64 | "mui-one-time-password-input": "1.1.0",
65 | "react-markdown": "8.0.7",
66 | "react-otp-input": "3.0.2",
67 | "react-redux": "8.0.2",
68 | "react-router-dom": "6.3.0",
69 | "react-select": "5.7.3",
70 | "standard-version": "9.5.0",
71 | "styled-components": "5.3.9"
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/package/nativeComponents/layouts/NativeList.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports, import/order
2 | import React from "react";
3 | // eslint-disable-next-line import/no-unresolved
4 | import { UtilityClasses } from "@wrappid/styles";
5 |
6 | import NativeGrid from "./NativeGrid";
7 | import { SCList } from "../../styledComponents/layouts/SCList";
8 |
9 | const defaultItemGridProps = { gridSize: { default: 6, md: 3, sm: 4 }, styleClasses: [UtilityClasses.BORDER.BORDER] };
10 |
11 | export default function NativeList(props) {
12 |
13 | const { children, itemGridProps, variant, itemStylesProps, ...restProps } = props;
14 |
15 | const listStyleClasses = () => {
16 | let styleClasses = [];
17 |
18 | if (variant == NativeList.variantConstants.HTML) {
19 | if (props.listType) {
20 | styleClasses.push(UtilityClasses.PADDING.PL5, UtilityClasses.LIST_STYLE[props.listType]);
21 | }
22 | }
23 | return [...styleClasses, ...(props?.styleClasses || [])];
24 | };
25 |
26 | const listItemStyleClasses = (childProps) => {
27 | let styleClasses = [];
28 |
29 | if (props.listType) {
30 | styleClasses.push(UtilityClasses.DISPLAY.LIST_ITEM, UtilityClasses.PADDING.P0);
31 | }
32 | if (itemStylesProps) {
33 | itemStylesProps.forEach((item) => {
34 | styleClasses.push(item);
35 | });
36 | }
37 | return [...styleClasses, ...(childProps?.styleClasses || [])];
38 | };
39 |
40 | return
43 | {variant == NativeList.variantConstants.grid ? (
44 | {
45 | React.Children.map(children, child => {
46 | if (React.isValidElement(child)) {
47 | const updatedProps = {
48 | ...child.props,
49 | gridProps : itemGridProps || defaultItemGridProps,
50 | styleClasses: listItemStyleClasses(child.props)
51 | };
52 |
53 | return React.cloneElement(child, updatedProps); // Pass both props
54 | } else {
55 | return child;
56 | }
57 | })}) :
58 | (React.Children.map(children, child => {
59 | if (React.isValidElement(child)) {
60 | const updatedProps = {
61 | ...child.props, // Spread existing props
62 | styleClasses: listItemStyleClasses(child.props)
63 | };
64 |
65 | return React.cloneElement(child, updatedProps); // Pass both props
66 | } else {
67 | return child;
68 | }
69 | }))}
70 | ;
71 | }
72 |
73 | NativeList.variantConstants = {
74 | DEFAULT: "DEFAULT",
75 | HTML : "HTML",
76 | grid : "grid"
77 | };
78 |
--------------------------------------------------------------------------------
/package/nativeComponents/inputs/NativeInput.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { useTheme } from "@mui/material";
4 |
5 | import NativeFormControl from "./NativeFormControl";
6 | import NativeInputLabel from "./NativeInputLabel";
7 | import { getUUID } from "../../helper/appUtils";
8 | import { SCInput } from "../../styledComponents/inputs/SCInput";
9 |
10 | export default function NativeInput(props) {
11 | const { NativeId = getUUID() } = props;
12 | const theme = useTheme();
13 |
14 | const defStyle = { transition: "color 5000s ease-in-out 0s, background-color 5000s ease-in-out 0s" }; /* This stops browser autofill suggestions from changing the background and text color in input field. Also I think that's a bad fix which needs to improve in future. */
15 |
16 | const [inputText, setInputText] = React.useState(props?.value || null);
17 |
18 | const onChange = (event) => {
19 | props?.onChange && props.onChange(event);
20 | setInputText(event?.target?.value);
21 | };
22 |
23 | return (
24 |
25 | 0}
27 | htmlFor={props.id}
28 | >
29 | {props.label}
30 |
31 |
32 | {
62 | // eslint-disable-next-line no-console
63 | console.log("CLICKED");
64 | props.onFormFocus(props.editId);
65 | }
66 | : () => {
67 | // eslint-disable-next-line no-console
68 | console.log("CLICKED else");
69 | }
70 | }
71 | theme={theme}
72 | />
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/package/nativeComponents/inputs/NativeFilePicker.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React, { useRef } from "react";
3 |
4 | // eslint-disable-next-line import/no-unresolved
5 | import { UtilityClasses, StyledComponentsClasses } from "@wrappid/styles";
6 |
7 | import NativeIconButton from "./NativeIconButton";
8 | import { SCInput } from "../../styledComponents/inputs/SCInput";
9 | import NativeIcon, { __IconTypes } from "../dataDisplay/NativeIcon";
10 | import NativeTypographyBody1 from "../dataDisplay/paragraph/NativeTypographyBody1";
11 | import NativeBox from "../layouts/NativeBox";
12 | import NativeGrid from "../layouts/NativeGrid";
13 |
14 | export default function NativeFilePicker(props) {
15 | const inputRef = useRef(null);
16 | const handleFileOpen = () => {
17 | inputRef.current.click();
18 | };
19 |
20 | return (
21 | <>
22 | {
32 | // eslint-disable-next-line no-console
33 | console.log("FIle Change", event.target.files[0], props.formik);
34 | props.formik.setFieldValue(props.id, event.target.files[0]);
35 | }}
36 | required={props.formik ? false : props.required}
37 | placeholder={props.placeholder}
38 | disabled={props.disabled}
39 | max={props.max}
40 | min={props.min}
41 | readOnly={props.readOnly}
42 | error={
43 | props.touched && props.error && props.error.length > 0 ? true : false
44 | }
45 | />
46 |
47 | {!props.readOnly && (
48 |
54 |
55 |
56 | {props.value ? props?.value?.name : "Upload file"}
57 |
58 |
59 | {props?.value?.name ?
63 | {props?.formik?.setFieldValue(props.id, null);}}>
64 |
65 |
66 | :
67 |
68 | }
69 |
70 |
71 |
72 | )}
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/package/nativeComponents/utils/NativeModal.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
2 | import React from "react";
3 |
4 | // eslint-disable-next-line import/no-unresolved
5 | import { UtilityClasses, StyledComponentsClasses } from "@wrappid/styles";
6 | import { useDispatch, useSelector } from "react-redux";
7 |
8 | import { SCModal } from "../../styledComponents/utils/SCModal";
9 | import NativeH6 from "../dataDisplay/heading/NativeH6";
10 | import NativeIcon, { __IconTypes } from "../dataDisplay/NativeIcon";
11 | import NativeIconButton from "../inputs/NativeIconButton";
12 | import NativeBox from "../layouts/NativeBox";
13 |
14 | export default function NativeModal(props) {
15 | const dispatch = useDispatch();
16 | const open = useSelector((state) => state.modal.modalOpen);
17 | const modalData = useSelector((state) => state.modal.modalData);
18 | const modalStyle = useSelector((state) => state.modal.modalStyle);
19 | const modalClose = useSelector((state) => state.modal.modalClose);
20 | const HandleModalClose = () => {
21 | dispatch(props.toggleModalState(null));
22 | };
23 |
24 | return (
25 |
32 |
40 |
48 |
49 | {{modalData?.heading ? modalData.heading : ""}}
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
65 | {React.isValidElement(modalData?.comp) ? modalData?.comp : null}
66 |
67 |
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/scripts/attributions.gen.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | /* eslint-disable import/order */
3 | /* eslint-disable no-console */
4 | // eslint-disable-next-line no-undef
5 | const path = require("path");
6 | // eslint-disable-next-line no-undef
7 | const licenseChecker = require("license-checker");
8 | // eslint-disable-next-line no-undef, id-length
9 | const fs = require("fs");
10 |
11 | // eslint-disable-next-line no-undef
12 | const packageJson = require("../package.json");
13 |
14 | /**
15 | * Generate ATTRIBUTIONS.md file listing third-party dependencies and their licenses.
16 | */
17 |
18 | try {
19 | // eslint-disable-next-line no-undef
20 | const packagePath = path.join(__dirname, "./../");
21 | // eslint-disable-next-line no-undef
22 | const attributionMdPath = path.join(__dirname, "./../ATTRIBUTIONS.md");
23 |
24 | // Attribution header
25 | const attributionHeader = `
26 | ## ATTRIBUTIONS
27 |
28 | This file lists the third-party libraries, frameworks, and other components used in the ${packageJson?.name} repository,
29 | along with their respective licenses.
30 | It is important to comply with the licensing terms of these components when using the code
31 | \n`;
32 |
33 | licenseChecker.init({ start: packagePath }, function(err, packages) {
34 | if (err) {
35 | throw err;
36 | } else {
37 | let markdownContent = attributionHeader + generateMarkdown(packages);
38 |
39 | fs.writeFileSync(attributionMdPath, markdownContent);
40 | console.log("ATTRIBUTIONS.md file generated successfully.");
41 | }
42 | });
43 | } catch (error) {
44 | console.error("An error occurred while generating ATTRIBUTIONS.md file.");
45 | console.error(error);
46 | }
47 |
48 | /**
49 | * Convert JSON data to markdown format.
50 | * @param {object} packages - JSON object containing package information.
51 | * @returns {string} Markdown content.
52 | */
53 | function generateMarkdown(packages) {
54 | let markdownContent = "";
55 |
56 | Object.keys(packages).forEach(packageName => {
57 | markdownContent += convertJsonToMDFormat(packageName, packages[packageName]);
58 | });
59 |
60 | return markdownContent;
61 | }
62 |
63 | /**
64 | * Convert package information to markdown format.
65 | * @param {string} packageName - Name of the package.
66 | * @param {object} packageInfo - Information about the package.
67 | * @returns {string} Markdown content.
68 | */
69 | function convertJsonToMDFormat(packageName, packageInfo) {
70 | const {
71 | licenses, repository, publisher, url, licenseFile, email
72 | } = packageInfo;
73 |
74 | const packageVersion = packageName.match(/[0-9.]+/g)?.join("") || "NA";
75 |
76 | const extractPackageName = packageName => packageName.substring(0, packageName.lastIndexOf("@")).replace("@", "");
77 |
78 | return `
79 |
80 | ${packageName}
81 |
82 | #### Basic details about the package
83 | >| Key | Value |
84 | >| --- | --- |
85 | >| **Name** | ${extractPackageName(packageName) || "NA"} |
86 | >| **Version** | ${packageVersion} |
87 | >| **Repository** | ${repository || "NA"} |
88 | >| **Licenses** | [${licenses || "NA"}](${licenseFile}) |
89 | >| **Publisher** | ${publisher || "NA"} |
90 | >| **Contact** | ${email || "NA"} |
91 | >| **Homepage** | ${url || "NA"} |
92 |
93 | #### Use this package in your project
94 | \`\`\`bash
95 | npm i ${packageName}
96 | \`\`\`
97 |
98 | `;
99 | }
--------------------------------------------------------------------------------