@app-studio/web 0.1.5 → 0.1.6

package/src/components/Form/TextField/examples/VariantsInputs.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { TextField } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Variant } from '../TextField/TextField.type';
-
-export const VariantsInput = () => {
-  return (
-    <Vertical gap={10} width="300px">
-      {['default', 'outline', 'unStyled'].map((variant, index) => (
-        <TextField key={index} name={variant} placeholder={variant} variant={variant as Variant} />
-      ))}
-    </Vertical>
-  );
-};

package/src/components/Form/TextField/examples/index.ts

@@ -1,17 +0,0 @@
-export * from 'src/components/Form/TextField/examples/ClearInput';
-export * from 'src/components/Form/TextField/examples/ColorScheme';
-export * from 'src/components/Form/TextField/examples/Default';
-export * from 'src/components/Form/TextField/examples/DisabledInput';
-export * from 'src/components/Form/TextField/examples/ErrorInput';
-export * from 'src/components/Form/TextField/examples/FormikErrorInput';
-export * from 'src/components/Form/TextField/examples/FormikHelperText';
-export * from 'src/components/Form/TextField/examples/HelperText';
-export * from 'src/components/Form/TextField/examples/LabelInput';
-export * from 'src/components/Form/TextField/examples/LeftChild';
-export * from 'src/components/Form/TextField/examples/Placeholder';
-export * from 'src/components/Form/TextField/examples/ReadOnlyInput';
-export * from 'src/components/Form/TextField/examples/RightChild';
-export * from 'src/components/Form/TextField/examples/ShapeInput';
-export * from 'src/components/Form/TextField/examples/SizeInput';
-export * from 'src/components/Form/TextField/examples/StylesInput';
-export * from 'src/components/Form/TextField/examples/VariantsInputs';

package/src/components/Form/TextField/styles.css

@@ -1,7 +0,0 @@
-input::-webkit-contacts-auto-fill-button {
-  visibility: hidden;
-  display: none !important;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-}

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

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { Wrap } from '../../configs/Input.type';
-
-export interface CenterProps {
-  /**
-   * To specifies if the items should be wrap or not, based on available space on the line.
-   */
-  wrap?: Wrap;
-  /**
-   * Layout content
-   */
-  children: React.ReactNode;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { View } from 'src/components/Layout/View/View';
-
-import { CenterProps } from './Center.props';
-
-const CenterView: React.FC<CenterProps> = ({ children, wrap, ...props }) => (
-  <View display="flex" justifyContent="center" alignItems="center" flexWrap={wrap} {...props}>
-    {children}
-  </View>
-);
-
-export default CenterView;

package/src/components/Layout/Center/Center.md

@@ -1,17 +0,0 @@
-### **Import**
-
-```tsx static
-import { Center } from "app-studio";
-```
-
-### **Default**
-
-The default height and width are set to 100%.
-
-```tsx
-import { Horizontal } from "../Horizontal/Horizontal";
-
-<Center height={100} width={"100%"} backgroundColor="theme.primary" color="white">
-  Hello World!
-</Center>;
-```

package/src/components/Layout/Center/Center.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { CenterProps } from './Center/Center.props';
-import CenterView from './Center/Center.view';
-
-/**
- * The Center component is a React functional component that provides a centered layout for its children using flexbox.
- */
-const CenterComponent: React.FC<CenterProps> = (props) => <CenterView {...props} />;
-
-export const Center = CenterComponent;

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

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { Justify, Wrap } from '../../configs/Input.type';
-
-export interface HorizontalProps {
-  /**
-   * The layout content
-   */
-  children: React.ReactNode;
-  /**
-   * Aligns items horizontally, when they don't fill up the entire main-axis
-   */
-  justify?: Justify;
-  /**
-   * To specifies if the items should be wrap or not, based on available space on the line.
-   */
-  wrap?: Wrap;
-  /**
-   * If true, it reverses the items order on the horizontal axis.
-   */
-  isReversed?: boolean;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { View } from 'src/components';
-
-import { HorizontalProps } from './Horizontal.props';
-
-const HorizontalView: React.FC<HorizontalProps> = ({
-  children,
-  wrap = 'wrap',
-  justify = 'flex-start',
-  isReversed = false,
-  ...props
-}) => (
-  <View
-    display="flex"
-    flexWrap={wrap}
-    flexDirection={isReversed ? 'row-reverse' : 'row'}
-    justifyContent={justify}
-    {...props}
-  >
-    {children}
-  </View>
-);
-
-export default HorizontalView;

package/src/components/Layout/Horizontal/Horizontal.md

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

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { HorizontalProps } from './Horizontal/Horizontal.props';
-import HorizontalView from './Horizontal/Horizontal.view';
-
-/**
- * Horizontal layout aligns all the elements in a container on the horizontal axis.
- */
-const HorizontalComponent: React.FC<HorizontalProps> = (props) => <HorizontalView {...props} />;
-
-export const Horizontal = HorizontalComponent;

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

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

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Horizontal } from 'src/components';
-import { Justify } from 'src/components/Layout/configs/Input.type';
-import { View } from 'src/components/Layout/View/View';
-
-export const JustifyHorizontal = () => {
-  const size = {
-    width: 50,
-    height: 50,
-  };
-  return (
-    <View>
-      {['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'].map((justify) => (
-        <View key={justify} marginTop={10}>
-          {justify}
-          <Horizontal justify={justify as Justify} gap={5} width="100%">
-            <View backgroundColor="theme.primary" {...size} />
-            <View backgroundColor="theme.secondary" {...size} />
-            <View backgroundColor="theme.warning" {...size} />
-          </Horizontal>
-        </View>
-      ))}
-    </View>
-  );
-};

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

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

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Horizontal } from 'src/components';
-import { View } from 'src/components/Layout/View/View';
-
-import { Wrap } from '../../configs/Input.type';
-
-export const WrapHorizontal = () => {
-  const size = {
-    width: 50,
-    height: 50,
-  };
-  return (
-    <View width={300}>
-      {['wrap', 'nowrap', 'wrap-reverse'].map((wrapping) => (
-        <div key={wrapping}>
-          {wrapping}
-          <Horizontal wrap={wrapping as Wrap} gap={5} marginTop={10}>
-            <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} />
-          </Horizontal>
-        </div>
-      ))}
-    </View>
-  );
-};

package/src/components/Layout/Horizontal/examples/index.ts

@@ -1,4 +0,0 @@
-export * from 'src/components/Layout/Horizontal/examples/Default';
-export * from 'src/components/Layout/Horizontal/examples/Justify';
-export * from 'src/components/Layout/Horizontal/examples/Reversed';
-export * from 'src/components/Layout/Horizontal/examples/Wrap';

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { TextFieldStyles } from 'src/components/Layout/configs/Input.type';
-
-export interface ContainerProps {
-  /**
-   * The content to be rendered inside the container.
-   */
-  children?: React.ReactNode;
-  /**
-   * Specifies whether the input field should display an error state.
-   */
-  error?: boolean;
-  /**
-   * Provides additional information or instructions about the field.
-   */
-  helperText?: string;
-  /**
-   * CSS styles for the select box and dropdown.
-   */
-  styles?: TextFieldStyles;
-  /**
-   * Additional properties and attributes for the field.
-   */
-  [x: string]: any;
-}

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

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { Vertical } from '../../Vertical/examples';
-import { HelperText } from '../HelperText/HelperText';
-
-import { ContainerProps } from './FieldContainer/FieldContainer.props';
-
-export const FieldContainer: React.FC<ContainerProps> = ({ children, helperText, error = false, styles, ...props }) => (
-  <Vertical gap={5} position="relative" {...props}>
-    {children}
-    {helperText && (
-      <HelperText error={error} {...styles}>
-        {helperText}
-      </HelperText>
-    )}
-  </Vertical>
-);

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

@@ -1,75 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Shape, Size, TextFieldStyles, Variant } from 'src/components/Layout/configs/Input.type';
-import { Elevation } from 'src/utils/elevation';
-import { Shadow } from 'app-studio';
-
-export interface ContentProps {
-  /**
-   * The color of the Content component.
-   */
-  color?: string;
-  /**
-   * Changes the color style of the field.
-   */
-  colorScheme?: string;
-  /**
-   * The content to be rendered inside the Content component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Indicates whether the field has an error.
-   */
-  error?: boolean;
-  /**
-   * Indicates whether the field has label
-   */
-  isWithLabel?: boolean;
-  /**
-   * Determines whether the Content component is disabled. Default value is false.
-   */
-  isDisabled?: boolean;
-  /**
-   * Determines wheter the field is focused or not.
-   */
-  isFocused?: boolean;
-  /**
-   * Determines whether the Content component is currently being hovered over.
-   */
-  isHovered?: boolean;
-  /**
-   * Determines whether the Content component is read-only. Default value is false.
-   */
-  isReadOnly?: boolean;
-  /**
-   * The label associated with the Content component.
-   */
-  label?: string;
-  /**
-   * The default value of the field.
-   */
-  value?: string | Array<string> | number;
-  /**
-   * Changes the Input style
-   */
-  variant?: Variant;
-  /**
-   * The shape of the Content component.
-   */
-  shape?: Shape;
-  /**
-   * The size of the Content component. Default value is "md".
-   */
-  size?: Size;
-  /**
-   * CSS styles applied to the Content component. Default value is an empty object.
-   */
-  styles?: TextFieldStyles;
-  /**
-   * The shadow effect applied to the Content component.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-  /**
-   * Additional properties and attributes for the field.
-   */
-  [x: string]: any;
-}

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Typography } from 'app-studio';
-
-import { InputVariants, PadddingWithLabel, PaddingWithoutLabel, Shapes } from '../../configs/Input.style';
-import { Horizontal } from '../../Horizontal/Horizontal';
-
-import { ContentProps } from './FieldContent/FieldContent.props';
-
-export const FieldContent: React.FC<ContentProps> = ({
-  label,
-  shadow,
-  children,
-  value,
-  size = 'md',
-  shape = 'default',
-  variant = 'default',
-  error = false,
-  isWithLabel = false,
-  isFocused = false,
-  isHovered = false,
-  isDisabled = false,
-  isReadOnly = false,
-  colorScheme = 'theme.primary',
-  styles = { pickerBox: {} },
-  ...props
-}) => {
-  const isInteractive = (isHovered || isFocused) && !isDisabled;
-  const color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
-
-  return (
-    <Horizontal
-      gap={10}
-      width="100%"
-      display="flex"
-      wrap="nowrap"
-      borderStyle="solid"
-      alignItems="center"
-      borderColor={color}
-      backgroundColor="trueGray.50"
-      transition="padding 0.2s ease"
-      justifyContent="space-between"
-      fontSize={Typography.fontSizes[size]}
-      filter={isHovered ? 'brightness(0.97)' : 'brightness(1)'}
-      cursor={isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'}
-      {...(isWithLabel ? PadddingWithLabel : PaddingWithoutLabel)}
-      {...shadow}
-      {...Shapes[shape]}
-      {...InputVariants[variant]}
-      {...styles['box']}
-      {...props}
-    >
-      {children}
-    </Horizontal>
-  );
-};

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

@@ -1,12 +0,0 @@
-import React from 'react';
-
-export interface FieldIconsProps {
-  /**
-   * 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/FieldIcons/FieldIcons.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Center } from 'src/components';
-
-import { FieldIconsProps } from './FieldIcons/FieldIcons.props';
-
-export const FieldIcons: React.FC<FieldIconsProps> = ({ children, ...props }) => (
-  <Center
-    gap={10}
-    top="50%"
-    right={16}
-    zIndex={500}
-    wrap="nowrap"
-    position="absolute"
-    transform="translateY(-50%)"
-    {...props}
-  >
-    {children}
-  </Center>
-);

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Size } from 'src/components/Layout/configs/Input.type';
-
-export interface LabelProps {
-  /**
-   * The content to be rendered inside the Label.
-   */
-  children?: React.ReactNode;
-
-  /**
-   * Indicates whether the field has an error.
-   */
-  error?: boolean;
-
-  /**
-   * The size of the Label
-   */
-  size?: Size;
-  /**
-   * The color of the Label
-   */
-  color?: string;
-  /**
-   * CSS styles applied to the Label
-   */
-  styles?: { label: any };
-  /**
-   * Additional properties and attributes for the field.
-   */
-  [x: string]: any;
-}

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Label } from 'src/components/Form/Label/Label';
-
-import { LabelSizes } from '../../configs/Input.style';
-
-import { LabelProps } from './FieldLabel/FieldLabel.props';
-
-export const FieldLabel: React.FC<LabelProps> = ({
-  children,
-  size = 'md',
-  error = false,
-  color = 'theme.primary',
-  styles = { label: {} },
-  ...props
-}) => (
-  <Label
-    top={4}
-    zIndex={1000}
-    lineHeight={15}
-    letterSpacing={0.25}
-    whiteSpace="noWrap"
-    position="absolute"
-    color={error ? 'error' : color}
-    fontSize={LabelSizes[size]}
-    {...styles['label']}
-    {...props}
-  >
-    {children}
-  </Label>
-);

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Size, TextFieldStyles } from 'src/components/Layout/configs/Input.type';
-
-export interface FieldProps {
-  /**
-   * The content to be rendered inside the Field.
-   */
-  children?: React.ReactNode;
-  /**
-   * The size of the field (default: "md").
-   */
-  size?: Size;
-  /**
-   * Determines if the field is disabled (default: false).
-   */
-  isDisabled?: boolean;
-  /**
-   * Determines if the field is read-only (default: false).
-   */
-  isReadOnly?: boolean;
-  /**
-   * CSS styles applied to the field (default: {}).
-   */
-  styles?: TextFieldStyles;
-  /**
-   * Additional properties and attributes for the field.
-   */
-  [x: string]: any;
-}