@app-studio/web 0.1.0

package/dist/components/Modal/Modal/Modal.props.d.ts

@@ -0,0 +1,178 @@
+import React, { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { CloseButtonPosition, Position, Shape, Size } from './Modal.type';
+export interface ModalProps {
+    /**
+     * The content to be displayed inside the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * The color of the close button in the header.
+     */
+    buttonColor?: string;
+    /**
+     * The size of the close button in the header.
+     */
+    iconSize?: Size;
+    /**
+     * Determines whether the modal should have sharp or rounded edges.
+     */
+    shape?: Shape;
+    /**
+     * If set to true, the modal will occupy the full width and height of the screen.
+     */
+    isFullScreen?: boolean;
+    /**
+     * Indicates the presence of a close button and its position within the header.
+     */
+    buttonPosition?: CloseButtonPosition;
+    /**
+     * The callback function to be executed when the close button is clicked or pressed.
+     */
+    onClose?: () => void;
+    /**
+     * The degree of blurriness applied to the overlay.
+     */
+    blur?: number;
+    /**
+     * If set to true, the modal will be visible.
+     */
+    isOpen?: boolean;
+    /**
+     * If set to true, the modal will remain open when the overlay is clicked.
+     */
+    isClosePrevented?: boolean;
+    /**
+     * The positioning of the modal container.
+     */
+    position?: Position;
+    /**
+     * Applies a shadow effect to the button.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Additional properties.
+     */
+    [x: string]: any;
+}
+export interface ModalType extends React.FunctionComponent<ModalProps> {
+    /**
+     * The overlay component of the modal.
+     */
+    Overlay: React.FC<OverlayProps>;
+    /**
+     * The container component of the modal.
+     */
+    Container: React.FC<ContainerProps>;
+    /**
+     * The header component of the modal.
+     */
+    Header: React.FC<HeaderProps>;
+    /**
+     * The body component of the modal.
+     */
+    Body: React.FC<BodyProps>;
+    /**
+     * The footer component of the modal.
+     */
+    Footer: React.FC<FooterProps>;
+}
+export interface OverlayProps {
+    /**
+     * The content of the Overlay
+     */
+    children?: React.ReactNode;
+    /**
+     * The value of how much to blur the overlay
+     */
+    blur?: number;
+    /**
+     * If true, the modal will be visible
+     */
+    isOpen: boolean;
+    /**
+     * If true, the modal will not closed when the overlay is clicked
+     */
+    isClosePrevented?: boolean;
+    /**
+     * To position the modal container
+     */
+    position?: Position;
+    /**
+     * Action to be handled when the button close is clicked or pressed
+     */
+    onClose: () => void;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}
+export interface HeaderProps {
+    /**
+     * The content of the header
+     */
+    buttonColor?: string;
+    /**
+     * To set the close button size
+     */
+    iconSize?: Size;
+    /**
+     * The content of the header
+     */
+    children?: React.ReactNode;
+    /**
+     * Indicates if there is a button and where to position it
+     */
+    buttonPosition?: CloseButtonPosition;
+    /**
+     * Action to be handled when the button close is clicked or pressed
+     */
+    onClose?: () => void;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}
+export interface ContainerProps {
+    /**
+     * The content of the modal container
+     */
+    children: React.ReactNode;
+    /**
+     * To give a sharp or rounded edges to the modal
+     */
+    shape?: Shape;
+    /**
+     * If true, the modal will take the full width and height
+     */
+    isFullScreen?: boolean;
+    /**
+     * Set a shadow effect on the button.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}
+export interface BodyProps {
+    /**
+     * The content of the Body
+     */
+    children?: React.ReactNode;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}
+export interface FooterProps {
+    /**
+     * The content of the Footer
+     */
+    children?: React.ReactNode;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Modal/Modal/Modal.style.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import { Position, Shape, Size } from './Modal.type';
+export declare const ContainerShapes: Record<Shape, CSSProperties>;
+export declare const OverlayAlignments: Record<Position, CSSProperties>;
+export declare const HeaderIconSizes: Record<Size, number>;

package/dist/components/Modal/Modal/Modal.view.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BodyProps, ContainerProps, FooterProps, HeaderProps, OverlayProps } from '../Modal/Modal.props';
+export declare const ModalOverlay: React.FC<OverlayProps>;
+export declare const ModalContainer: React.FC<ContainerProps>;
+export declare const ModalHeader: React.FC<HeaderProps>;
+export declare const ModalBody: React.FC<BodyProps>;
+export declare const ModalFooter: React.FC<FooterProps>;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,6 @@
+import { ModalType } from './Modal/Modal.props';
+/**
+ * It is a custom content overlay that appears on top of the main screen.
+ */
+export declare const Modal: ModalType;
+export default Modal;

package/dist/components/Svg/ArrowDown.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const ArrowDownSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/ArrowUp.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const ArrowUpSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/Check.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const CheckSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/Close.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const CloseSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/CloseEye.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const CloseEyeSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/DustBin.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    [x: string]: any;
+}
+export declare const DustBinSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/Edit.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const EditSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/ExternalLink.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const ExternalLinkSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/Indeterminate.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const IndeterminateSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/OpenEye.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const OpenEyeSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/Profile.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const ProfileSvg: React.FC<SvgProps>;
+export {};

package/dist/components/Svg/RightArrow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SvgProps {
+    size?: number;
+    color?: string;
+    [x: string]: any;
+}
+export declare const RightArrowSvg: React.FC<SvgProps>;
+export {};

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

@@ -0,0 +1,12 @@
+export * from './ArrowDown';
+export * from './ArrowUp';
+export * from './Check';
+export * from './Close';
+export * from './CloseEye';
+export * from './DustBin';
+export * from './Edit';
+export * from './ExternalLink';
+export * from './Indeterminate';
+export * from './OpenEye';
+export * from './Profile';
+export * from './RightArrow';

package/dist/components/Text/Text/Text.props.d.ts

@@ -0,0 +1,77 @@
+import { CSSProperties } from 'react';
+import type { TextProps as TextAppProps } from 'app-studio';
+import { Headings, Size, TextWeights } from './Text.type';
+export interface TextProps extends Omit<TextAppProps, 'children' | 'style' | 'pointerEvents'>, CSSProperties {
+    /**
+     * The content of the text.
+     */
+    children: React.ReactNode;
+    /**
+     * Specifies the HTML heading tag to use.
+     */
+    heading?: Headings;
+    /**
+     * Determines whether the text should be displayed in italic style.
+     */
+    isItalic?: boolean;
+    /**
+     * Indicates that the text is no longer valid by applying a strikethrough style.
+     */
+    isStriked?: boolean;
+    /**
+     * Adds an underline to the text.
+     */
+    isUnderlined?: boolean;
+    /**
+     * Truncates the text and adds an ellipsis at the end if it exceeds the available space.
+     */
+    isTruncated?: boolean;
+    /**
+     * Displays the text slightly below the baseline of the surrounding text.
+     */
+    isSub?: boolean;
+    /**
+     * Displays the text slightly above the surrounding text.
+     */
+    isSup?: boolean;
+    /**
+     * The maximum number of lines to display when using text truncation.
+     */
+    maxLines?: number;
+    /**
+     * Adjusts the size of the text. Can be a predefined size or a custom number.
+     */
+    size?: Size;
+    /**
+     * Specifies the font weight of the text.
+     */
+    weight?: TextWeights;
+    /**
+     * Additional properties for customization and extension.
+     */
+    [x: string]: any;
+}
+export interface ContentProps {
+    /**
+     * The content to be rendered within the component.
+     */
+    children: React.ReactNode | string;
+    /**
+     * Optional prop indicating if the content should be displayed as a subtext.
+     */
+    isSub?: boolean;
+    /**
+     * Optional prop indicating if the content should be displayed as a supertext.
+     */
+    isSup?: boolean;
+}
+export interface TruncateTextProps {
+    /**
+     * The text to be truncated.
+     */
+    text: string;
+    /**
+     * The maximum number of lines to display before truncating the text.
+     */
+    maxLines?: number;
+}

package/dist/components/Text/Text/Text.style.d.ts

@@ -0,0 +1,2 @@
+import { Headings } from './Text.type';
+export declare const HeadingSizes: Record<Headings, Record<string, number | string>>;

package/dist/components/Text/Text/Text.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextProps } from './Text.props';
+declare const TextView: React.FC<TextProps>;
+export default TextView;

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextProps } from './Text/Text.props';
+/**
+ * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
+ */
+export declare const Text: React.FC<TextProps>;

package/dist/components/Wrapper.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface WrapperProps {
+    children: ReactNode;
+}
+declare const Wrapper: React.FC<WrapperProps>;
+export default Wrapper;

package/dist/components/index.d.ts

@@ -0,0 +1,18 @@
+export * from 'src/components/Button/Button';
+export * from 'src/components/Form/Checkbox/Checkbox';
+export * from 'src/components/Form/CountryPicker/CountryPicker';
+export * from 'src/components/Form/DatePicker/DatePicker';
+export * from 'src/components/Form/Password/Password';
+export * from 'src/components/Form/Select/Select';
+export * from 'src/components/Form/Switch/Switch';
+export * from 'src/components/Form/Switch/Switch';
+export * from 'src/components/Form/TextArea/TextArea';
+export * from 'src/components/Form/TextField/TextField';
+export * from 'src/components/Layout/Center/Center';
+export * from 'src/components/Layout/Horizontal/Horizontal';
+export * from 'src/components/Layout/Vertical/Vertical';
+export * from 'src/components/Layout/View/View';
+export * from 'src/components/Link/Link';
+export * from 'src/components/Loader/Loader';
+export * from 'src/components/Modal/Modal';
+export * from 'src/components/Text/Text';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./web.cjs.production.min.js')
+} else {
+  module.exports = require('./web.cjs.development.js')
+}

package/dist/web.cjs.development.js

@@ -0,0 +1,27 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var ReactDOM = _interopDefault(require('react-dom/client'));
+var Wrapper = _interopDefault(require('src/components/Wrapper'));
+require('core-js/modules/es6.array.map.js');
+var reactRouterDom = require('react-router-dom');
+var routes = require('src/routes/routes');
+
+var App = function App() {
+  var location = reactRouterDom.useLocation();
+  return /*#__PURE__*/React.createElement(reactRouterDom.Routes, {
+    location: location
+  }, routes.ComponentRouter.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(reactRouterDom.Route, {
+      key: index,
+      path: item.path,
+      element: item.element
+    });
+  }));
+};
+
+var root = /*#__PURE__*/ReactDOM.createRoot( /*#__PURE__*/document.getElementById('root'));
+root.render( /*#__PURE__*/React.createElement(React.StrictMode, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(App, null))));
+//# sourceMappingURL=web.cjs.development.js.map

package/dist/web.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.cjs.development.js","sources":["../src/App.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, Routes, useLocation } from 'react-router-dom';\nimport { ComponentRouter } from 'src/routes/routes';\n\nexport const App: React.FC = () => {\n  const location = useLocation();\n  return (\n    <Routes location={location}>\n      {ComponentRouter.map((item, index) => (\n        <Route key={index} path={item.path} element={item.element} />\n      ))}\n    </Routes>\n  );\n};\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Wrapper from 'src/components/Wrapper';\n\nimport { App } from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <Wrapper>\n      <App />\n    </Wrapper>\n  </React.StrictMode>\n);\n"],"names":["App","location","useLocation","React","Routes","ComponentRouter","map","item","index","Route","key","path","element","root","ReactDOM","createRoot","document","getElementById","render","StrictMode","Wrapper"],"mappings":";;;;;;;;;;;AAIO,IAAMA,GAAG,GAAa,SAAhBA,GAAGA;EACd,IAAMC,QAAQ,GAAGC,0BAAW,EAAE;EAC9B,oBACEC,oBAACC,qBAAM;IAACH,QAAQ,EAAEA;KACfI,sBAAe,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;IAAA,oBAC/BL,oBAACM,oBAAK;MAACC,GAAG,EAAEF,KAAK;MAAEG,IAAI,EAAEJ,IAAI,CAACI,IAAI;MAAEC,OAAO,EAAEL,IAAI,CAACK;MAAW;GAC9D,CAAC,CACK;AAEb,CAAC;;ACPD,IAAMC,IAAI,gBAAGC,QAAQ,CAACC,UAAU,eAACC,QAAQ,CAACC,cAAc,CAAC,MAAM,CAAgB,CAAC;AAChFJ,IAAI,CAACK,MAAM,eACTf,oBAACA,KAAK,CAACgB,UAAU,qBACfhB,oBAACiB,OAAO,qBACNjB,oBAACH,GAAG,OAAG,CACC,CACO,CACpB"}

package/dist/web.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=e(require("react")),r=e(require("react-dom/client")),n=e(require("src/components/Wrapper"));require("core-js/modules/es6.array.map.js");var o=require("react-router-dom"),u=require("src/routes/routes"),a=function(){var e=o.useLocation();return t.createElement(o.Routes,{location:e},u.ComponentRouter.map((function(e,r){return t.createElement(o.Route,{key:r,path:e.path,element:e.element})})))};r.createRoot(document.getElementById("root")).render(t.createElement(t.StrictMode,null,t.createElement(n,null,t.createElement(a,null))));
+//# sourceMappingURL=web.cjs.production.min.js.map

package/dist/web.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.cjs.production.min.js","sources":["../src/App.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, Routes, useLocation } from 'react-router-dom';\nimport { ComponentRouter } from 'src/routes/routes';\n\nexport const App: React.FC = () => {\n  const location = useLocation();\n  return (\n    <Routes location={location}>\n      {ComponentRouter.map((item, index) => (\n        <Route key={index} path={item.path} element={item.element} />\n      ))}\n    </Routes>\n  );\n};\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Wrapper from 'src/components/Wrapper';\n\nimport { App } from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <Wrapper>\n      <App />\n    </Wrapper>\n  </React.StrictMode>\n);\n"],"names":["App","location","useLocation","React","Routes","ComponentRouter","map","item","index","Route","key","path","element","ReactDOM","createRoot","document","getElementById","render","StrictMode","Wrapper"],"mappings":"kSAIaA,EAAgB,WAC3B,IAAMC,EAAWC,gBACjB,OACEC,gBAACC,UAAOH,SAAUA,GACfI,kBAAgBC,KAAI,SAACC,EAAMC,GAAK,OAC/BL,gBAACM,SAAMC,IAAKF,EAAOG,KAAMJ,EAAKI,KAAMC,QAASL,EAAKK,eCH7CC,EAASC,WAAWC,SAASC,eAAe,SACpDC,OACHd,gBAACA,EAAMe,gBACLf,gBAACgB,OACChB,gBAACH"}

package/dist/web.esm.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Wrapper from 'src/components/Wrapper';
+import 'core-js/modules/es6.array.map.js';
+import { useLocation, Routes, Route } from 'react-router-dom';
+import { ComponentRouter } from 'src/routes/routes';
+
+var App = function App() {
+  var location = useLocation();
+  return /*#__PURE__*/React.createElement(Routes, {
+    location: location
+  }, ComponentRouter.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Route, {
+      key: index,
+      path: item.path,
+      element: item.element
+    });
+  }));
+};
+
+var root = /*#__PURE__*/ReactDOM.createRoot( /*#__PURE__*/document.getElementById('root'));
+root.render( /*#__PURE__*/React.createElement(React.StrictMode, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(App, null))));
+//# sourceMappingURL=web.esm.js.map

package/dist/web.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.esm.js","sources":["../src/App.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, Routes, useLocation } from 'react-router-dom';\nimport { ComponentRouter } from 'src/routes/routes';\n\nexport const App: React.FC = () => {\n  const location = useLocation();\n  return (\n    <Routes location={location}>\n      {ComponentRouter.map((item, index) => (\n        <Route key={index} path={item.path} element={item.element} />\n      ))}\n    </Routes>\n  );\n};\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Wrapper from 'src/components/Wrapper';\n\nimport { App } from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <Wrapper>\n      <App />\n    </Wrapper>\n  </React.StrictMode>\n);\n"],"names":["App","location","useLocation","React","Routes","ComponentRouter","map","item","index","Route","key","path","element","root","ReactDOM","createRoot","document","getElementById","render","StrictMode","Wrapper"],"mappings":";;;;;;;AAIO,IAAMA,GAAG,GAAa,SAAhBA,GAAGA;EACd,IAAMC,QAAQ,GAAGC,WAAW,EAAE;EAC9B,oBACEC,oBAACC,MAAM;IAACH,QAAQ,EAAEA;KACfI,eAAe,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;IAAA,oBAC/BL,oBAACM,KAAK;MAACC,GAAG,EAAEF,KAAK;MAAEG,IAAI,EAAEJ,IAAI,CAACI,IAAI;MAAEC,OAAO,EAAEL,IAAI,CAACK;MAAW;GAC9D,CAAC,CACK;AAEb,CAAC;;ACPD,IAAMC,IAAI,gBAAGC,QAAQ,CAACC,UAAU,eAACC,QAAQ,CAACC,cAAc,CAAC,MAAM,CAAgB,CAAC;AAChFJ,IAAI,CAACK,MAAM,eACTf,oBAACA,KAAK,CAACgB,UAAU,qBACfhB,oBAACiB,OAAO,qBACNjB,oBAACH,GAAG,OAAG,CACC,CACO,CACpB"}