@app-studio/web 0.1.4 → 0.1.6

package/src/components/Layout/Input/FieldLayout/FieldLayout.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Typography } from 'app-studio';
-
-import { Vertical } from '../../Vertical/Vertical';
-
-import { FieldProps } from './FieldLayout/FieldLayout.props';
-
-export const FieldLayout: React.FC<FieldProps> = ({
-  children,
-  size = 'md',
-  isDisabled = false,
-  isReadOnly = false,
-  styles = { text: {} },
-  ...props
-}) => (
-  <Vertical
-    gap={2}
-    margin={0}
-    padding={0}
-    width="100%"
-    heigth="100%"
-    border="none"
-    position="relative"
-    fontSize={Typography.fontSizes[size]}
-    backgroundColor="transparent"
-    color={isDisabled ? 'theme.text.disable' : 'theme.text.normal'}
-    cursor={isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'}
-    {...styles['text']}
-    {...props}
-  >
-    {children}
-  </Vertical>
-);

package/src/components/Layout/Input/FieldWrapper/FieldWrapper.props.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-
-export interface WrapperFieldProps {
-  /**
-   * The content to be rendered inside the Wrapper Field.
-   */
-  children?: React.ReactNode;
-  /**
-   * Additional properties and attributes for the field.
-   */
-  [x: string]: any;
-}

package/src/components/Layout/Input/FieldWrapper/FieldWrapper.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Vertical } from '../../Vertical/Vertical';
-
-import { WrapperFieldProps } from './FieldWrapper.props';
-
-export const FieldWrapper: React.FC<WrapperFieldProps> = ({ children, ...props }) => (
-  <Vertical width="100%" {...props}>
-    {children}
-  </Vertical>
-);

package/src/components/Layout/Input/HelperText/HelperText.props.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { TextFieldStyles } from 'src/components/Layout/configs/Input.type';
-
-export interface HelperTextProps {
-  /**
-   * The content to be rendered inside the HelperText.
-   */
-  children: React.ReactNode;
-  /**
-   * If true, changes the input style to indicate error.
-   */
-  error?: boolean;
-  /**
-   * CSS styles applied to the HelperText.
-   */
-  styles?: TextFieldStyles;
-  /**
-   * Additional properties and attributes for the field.
-   */
-  [x: string]: any;
-}

package/src/components/Layout/Input/HelperText/HelperText.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Text } from 'src/components';
-
-import { HelperTextProps } from './HelperText.props';
-
-export const HelperText: React.FC<HelperTextProps> = ({
-  children,
-  styles = { helperText: {} },
-  error = false,
-  ...props
-}) => (
-  <Text
-    size="xs"
-    marginVertical={0}
-    marginHorizontal={0}
-    color={error ? 'theme.error' : 'theme.text.dark'}
-    {...(styles['helperText'] as any)}
-    {...props}
-  >
-    {children}
-  </Text>
-);

package/src/components/Layout/Input/index.ts

@@ -1,7 +0,0 @@
-export * from 'src/components/Layout/Input/FieldContainer/FieldContainer';
-export * from 'src/components/Layout/Input/FieldContent/FieldContent';
-export * from 'src/components/Layout/Input/FieldIcons/FieldIcons';
-export * from 'src/components/Layout/Input/FieldLabel/FieldLabel';
-export * from 'src/components/Layout/Input/FieldLayout/FieldLayout';
-export * from 'src/components/Layout/Input/FieldWrapper/FieldWrapper';
-export * from 'src/components/Layout/Input/HelperText/HelperText';

package/src/components/Layout/Vertical/Vertical/Vertical.props.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { Justify, Wrap } from '../../configs/Input.type';
-
-export interface VerticalProps {
-  /**
-   * The layout content
-   */
-  children: React.ReactNode;
-  /**
-   * It aligns the elements of the container according to the available space.
-   */
-  justify?: Justify;
-  /**
-   * To specify, if the items should be wrap or not, based on available space on the line.
-   */
-  wrap?: Wrap;
-  /**
-   * If true, the items' position on the vertical axis is reversed.
-   */
-  isReversed?: boolean;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}

package/src/components/Layout/Vertical/Vertical/Vertical.type.ts

@@ -1,3 +0,0 @@
-export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-
-export type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/src/components/Layout/Vertical/Vertical/Vertical.view.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { View } from 'app-studio';
-
-import { VerticalProps } from './Vertical.props';
-
-const VerticalView: React.FC<VerticalProps> = ({
-  children,
-  wrap = 'nowrap',
-  justify = 'flex-start',
-  isReversed = false,
-  ...props
-}) => (
-  <View
-    display="flex"
-    flexWrap={wrap}
-    flexDirection={isReversed ? 'column-reverse' : 'column'}
-    justifyContent={justify}
-    {...props}
-  >
-    {children}
-  </View>
-);
-export default VerticalView;

package/src/components/Layout/Vertical/Vertical.md

@@ -1,120 +0,0 @@
-### **Import**
-
-```tsx static
-import { Vertical } from "app-studio";
-```
-
-### **Default**
-
-Flex direction is set as “column.
-
-```tsx
-import { View } from "../View/View";
-
-<Vertical>
-  <View height={50} backgroundColor="theme.primary" />
-  <View height={50} backgroundColor="theme.secondary" />
-  <View height={50} backgroundColor="theme.warning" />
-</Vertical>;
-```
-
-### **Wrap**
-
-“**_wrap_**” specifies if the items should be wrap or not based on the available space on the line. By default, wrap is set to “wrap”.
-
-**Example**
-
-```tsx
-import { Horizontal } from "../Horizontal/Horizontal";
-import { View } from "../View/View";
-
-const size = {
-  width: 50,
-  height: 50,
-};
-
-<Horizontal gap={5} justify="space-evenly">
-  {["wrap", "nowrap", "wrap-reverse"].map((wrapping, index) => (
-    <View key={index}>
-      <View>{wrapping}</View>
-      <Vertical wrap={wrapping} gap={5} height={200} flex={1}>
-        <View backgroundColor="theme.primary" {...size} />
-        <View backgroundColor="theme.secondary" {...size} />
-        <View backgroundColor="theme.warning" {...size} />
-        <View backgroundColor="theme.success" {...size} />
-        <View backgroundColor="theme.error" {...size} />
-        <View backgroundColor="color.blue" {...size} />
-      </Vertical>
-    </View>
-  ))}
-</Horizontal>;
-```
-
-## **Reverse**
-
-“**_isReversed_**” renders the items in the reverse order at the end of the main axis.
-
-```tsx
-import { View } from "../View/View";
-
-<Vertical isReversed gap={5}>
-  <View height={50} backgroundColor="theme.primary" />
-  <View height={50} backgroundColor="theme.secondary" />
-  <View height={50} backgroundColor="theme.warning" />
-</Vertical>;
-```
-
-## **Justify**
-
-“**_justify_**” with type “Justify”, aligns the elements of the container according to the available space.
-
-```tsx
-import { Horizontal } from "../Horizontal/Horizontal";
-import { View } from "../View/View";
-
-const size = {
-  width: 50,
-  height: 50,
-};
-
-<Horizontal gap={20} wrap="nowrap" justify="space-between">
-  {[
-    "flex-start",
-    "flex-end",
-    "center",
-    "space-between",
-    "space-around",
-    "space-evenly",
-  ].map((justify) => (
-    <Vertical flex={1}>
-      {justify}
-      <Vertical
-        justify={justify}
-        gap={5}
-        height={300}
-        backgroundColor="lightgray"
-      >
-        <View backgroundColor="theme.primary" {...size} />
-        <View backgroundColor="theme.secondary" {...size} />
-        <View backgroundColor="theme.warning" {...size} />
-      </Vertical>
-    </Vertical>
-  ))}
-</Horizontal>;
-```
-
-## **Types**
-
-```tsx static
-type Wrap = "wrap" | "nowrap" | "wrap-reverse";
-```
-
-```tsx static
-type Justify =
-  | "flex-start"
-  | "center"
-  | "flex-end"
-  | "space-between"
-  | "space-around"
-  | "space-evenly";
-```

package/src/components/Layout/Vertical/Vertical.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { VerticalProps } from './Vertical/Vertical.props';
-import VerticalView from './Vertical/Vertical.view';
-
-/**
- * Vertical layout aligns all the elements in a container on the vertical axis.
- */
-
-const VerticalComponent: React.FC<VerticalProps> = (props) => <VerticalView {...props} />;
-
-export const Vertical = VerticalComponent;

package/src/components/Layout/Vertical/examples/Default.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components';
-import { View } from 'src/components/Layout/View/View';
-
-export const DefaultVertical = () => (
-  <Vertical>
-    <View height={50} backgroundColor="theme.primary" />
-    <View height={50} backgroundColor="theme.secondary" />
-    <View height={50} backgroundColor="theme.warning" />
-  </Vertical>
-);

package/src/components/Layout/Vertical/examples/Justify.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components';
-import { Horizontal } from 'src/components';
-import { Justify } from 'src/components/Layout/Vertical/Vertical/Vertical.type';
-import { View } from 'src/components/Layout/View/View';
-
-export const JustifyVertical = () => {
-  const size = {
-    width: 50,
-    height: 50,
-  };
-  return (
-    <Horizontal gap={20} wrap="nowrap" justify="space-between">
-      {['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'].map((justify) => (
-        <Vertical flex={1} key={justify}>
-          {justify}
-          <Vertical justify={justify as Justify} gap={5} height={300} backgroundColor="lightgray">
-            <View backgroundColor="theme.primary" {...size} />
-            <View backgroundColor="theme.secondary" {...size} />
-            <View backgroundColor="theme.warning" {...size} />
-          </Vertical>
-        </Vertical>
-      ))}
-    </Horizontal>
-  );
-};

package/src/components/Layout/Vertical/examples/Reversed.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components';
-import { View } from 'src/components/Layout/View/View';
-
-export const ReversedVertical = () => (
-  <Vertical isReversed gap={5}>
-    <View height={50} backgroundColor="theme.primary" />
-    <View height={50} backgroundColor="theme.secondary" />
-    <View height={50} backgroundColor="theme.warning" />
-  </Vertical>
-);

package/src/components/Layout/Vertical/examples/Wrap.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components';
-import { Horizontal } from 'src/components';
-import { View } from 'src/components/Layout/View/View';
-
-import { Wrap } from '../Vertical/Vertical.type';
-
-export const WrapVertical = () => {
-  const size = {
-    width: 50,
-    height: 50,
-  };
-  return (
-    <Horizontal gap={5} justify="space-between">
-      {['wrap', 'nowrap', 'wrap-reverse'].map((wrapping, index) => (
-        <View key={index}>
-          <View>{wrapping}</View>
-          <Vertical wrap={wrapping as Wrap} gap={5} height={200} flex={1}>
-            <View backgroundColor="theme.primary" {...size} />
-            <View backgroundColor="theme.secondary" {...size} />
-            <View backgroundColor="theme.warning" {...size} />
-            <View backgroundColor="theme.success" {...size} />
-            <View backgroundColor="theme.error" {...size} />
-            <View backgroundColor="color.blue" {...size} />
-          </Vertical>
-        </View>
-      ))}
-    </Horizontal>
-  );
-};

package/src/components/Layout/Vertical/examples/index.tsx

@@ -1,5 +0,0 @@
-export * from '../Vertical';
-export * from './Default';
-export * from './Justify';
-export * from './Reversed';
-export * from './Wrap';

package/src/components/Layout/View/View.tsx

@@ -1,2 +0,0 @@
-export type { ViewProps } from 'app-studio';
-export { View } from 'app-studio';

package/src/components/Layout/configs/Input.style.ts

@@ -1,45 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { Shape, Size, Variant } from './Input.type';
-
-export const Shapes: Record<Shape, CSSProperties> = {
-  default: { borderTopLeftRadius: 6, borderTopRightRadius: 6, borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
-  sharp: { borderRadius: 0 },
-  rounded: { borderRadius: 4 },
-  pillShaped: { borderRadius: 24 },
-};
-
-export const LabelSizes: Record<Size, number> = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16,
-};
-
-export const InputVariants: Record<Variant, CSSProperties> = {
-  outline: {
-    borderWidth: 1,
-  },
-  default: {
-    borderWidth: 0,
-    borderBottomWidth: 2,
-  },
-  unStyled: {
-    border: 'none',
-    backgroundColor: 'transparent',
-  },
-};
-
-export const PadddingWithLabel = {
-  paddingTop: 16,
-  paddingBottom: 0,
-  paddingLeft: 16,
-  paddingRight: 35,
-};
-
-export const PaddingWithoutLabel = {
-  paddingVertical: 8,
-  paddingLeft: 16,
-  paddingRight: 35,
-};

package/src/components/Layout/configs/Input.type.ts

@@ -1,18 +0,0 @@
-import { CSSProperties } from 'react';
-
-export type Variant = 'outline' | 'default' | 'unStyled';
-
-export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
-
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type TextFieldStyles = {
-  box?: CSSProperties;
-  text?: CSSProperties;
-  label?: CSSProperties;
-  helperText?: CSSProperties;
-};
-
-export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-
-export type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/src/components/Link/Link/Link.props.ts

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { Size, Styles, TextDecorationStyle } from './Link.type';
-
-export interface LinkProps {
-  /**
-   * The content of the link.
-   */
-  children: React.ReactNode;
-  /**
-   * The style of text decoration for the link.
-   * Can be one of "default", "hover", or "underline".
-   */
-  underline?: TextDecorationStyle;
-  /**
-   * Indicates whether the link opens in a new tab.
-   */
-  isExternal?: boolean;
-  /**
-   * The size of the icon associated with the link.
-   */
-  iconSize?: Size;
-  /**
-   * Sets the color of the icon and text.
-   */
-  colorScheme?: string;
-  /**
-   * The URL or destination of the link.
-   */
-  href: string;
-  /**
-   * CSS styles for the  external icon.
-   */
-  styles?: Styles;
-  /**
-   * Additional props for customization.
-   */
-  [x: string]: any;
-}
-
-export interface LinkViewProps extends LinkProps {
-  /**
-   *  Indicates whether the link is currently being hovered
-   */
-  isHovered: boolean;
-  /**
-   *  Function to set the hovered state of the link
-   */
-  setIsHovered: Function;
-}

package/src/components/Link/Link/Link.state.ts

@@ -1,6 +0,0 @@
-import { useState } from 'react';
-
-export const useLinkState = () => {
-  const [isHovered, setIsHovered] = useState(false);
-  return { isHovered, setIsHovered };
-};

package/src/components/Link/Link/Link.style.ts

@@ -1,14 +0,0 @@
-import { Size } from './Link.type';
-
-export const IconSizes: Record<Size, number> = {
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 18,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 30,
-  '4xl': 36,
-  '5xl': 48,
-  '6xl': 64,
-};

package/src/components/Link/Link/Link.type.d.ts

@@ -1,8 +0,0 @@
-export type TextDecorationStyle = 'default' | 'hover' | 'underline';
-
-export type Styles = {
-  icon?: CSSProperties;
-  text?: CSSProperties;
-};
-
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';

package/src/components/Link/Link/Link.view.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Element } from 'app-studio';
-import { Link as ReactRouterLink } from 'react-router-dom';
-import { Horizontal } from 'src/components';
-import { ExternalLinkSvg } from 'src/components/Svg';
-
-import { LinkViewProps } from './Link.props';
-import { IconSizes } from './Link.style';
-
-const LinkView: React.FC<LinkViewProps> = ({
-  children,
-  href = '/',
-  iconSize = 'sm',
-  underline = 'default',
-  isHovered = false,
-  isExternal = false,
-  colorScheme = '#0072F5',
-  styles = { icon: {}, text: {} },
-  setIsHovered = () => {},
-  ...props
-}) => {
-  const handleHover = () => {
-    if (underline === 'hover') setIsHovered(true);
-  };
-  return (
-    <ReactRouterLink to={href} target={isExternal ? '_blank' : '_self'}>
-      <Element
-        color={colorScheme}
-        onMouseEnter={handleHover}
-        onMouseLeave={handleHover}
-        textDecoration={isHovered || underline === 'underline' ? 'underline !important' : 'none'}
-        {...styles.text}
-        {...props}
-      >
-        <Horizontal gap={3} alignItems="center" wrap="nowrap">
-          {children}
-          {isExternal && <ExternalLinkSvg color={colorScheme} size={IconSizes[iconSize]} style={styles.icon} />}
-        </Horizontal>
-      </Element>
-    </ReactRouterLink>
-  );
-};
-
-export default LinkView;

package/src/components/Link/Link.md

@@ -1,61 +0,0 @@
-### **Import**
-
-```tsx static
-import { Link } from "app-studio";
-```
-
-### **Default**
-
-```tsx
-<Link>Click Me</Link>
-```
-
-### **Underline**
-
-“**_underline_**” modifies the text decoration of the link. It has a type TextDecorationStyle.
-
-```tsx
-import { Vertical } from "../Layout/Vertical/Vertical";
-import { Text } from "../Text/Text";
-
-<Vertical gap={10}>
-  <Link href="https://www.npmjs.com/package/app-studio" underline="default">
-    Default
-  </Link>
-  <Link
-    href="https://www.npmjs.com/package/app-studio"
-    underline="hover"
-    color="black"
-  >
-    Hover
-  </Link>
-  <Link
-    href="https://www.npmjs.com/package/app-studio"
-    underline="underline"
-    color="theme.primary"
-  >
-    <Text>Underline</Text>
-  </Link>
-</Vertical>;
-```
-
-### **IsExternal**
-
-“**_isExternal_**” enables the opening of URL links in a new tab. When set to true, it adds an icon on the right side of the link content, visually indicating that it is an external link.
-
-```tsx
-import { Text } from "../Text/Text";
-<Link
-  href={"https://www.npmjs.com/package/app-studio"}
-  iconSize="md"
-  isExternal
->
-  <Text size="2xl">External</Text>
-</Link>;
-```
-
-### Types
-
-```tsx static
-type TextDecorationStyle = "default" | "hover" | "underline";
-```

package/src/components/Link/Link.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { LinkProps } from './Link/Link.props';
-import { useLinkState } from './Link/Link.state';
-import LinkView from './Link/Link.view';
-
-const LinkComponent: React.FC<LinkProps> = (props) => {
-  const linkStates = useLinkState();
-  return <LinkView {...linkStates} {...props} />;
-};
-
-/**
- * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
- */
-export const Link = LinkComponent;

package/src/components/Link/examples/Default.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Link } from '../Link';
-
-export const DefaultLink = () => <Link href="/">Default</Link>;