@app-studio/web 0.1.0

package/src/components/Text/Text.md

@@ -0,0 +1,163 @@
+### **Import**
+
+```tsx static
+import { Text } from "app-studio";
+```
+
+### **Default**
+
+```tsx
+<Text>Some text here</Text>
+```
+
+### **Sizes**
+
+“**_size_**” changes the text-size. It has a type "Sizes" with default value “md”.
+
+```tsx
+import { Vertical } from "../Layout/Vertical/Vertical";
+
+<Vertical gap={5} alignItems="center">
+  {["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"].map(
+    (size, index) => (
+      <Text key={index} size={size}>
+        {size}
+      </Text>
+    )
+  )}
+</Vertical>;
+```
+
+### **Headings**
+
+“**_heading_**” renders a specific heading html tag. “h1” indicates the most important heading and “h6” the least important heading.
+
+```tsx
+import { Vertical } from "../Layout/Vertical/Vertical";
+<Vertical gap={2}>
+  <Text heading="h1">Heading 1</Text>
+  <Text heading="h2">Heading 2</Text>
+  <Text heading="h3">Heading 3</Text>
+  <Text heading="h4">Heading 4</Text>
+  <Text heading="h5">Heading 5</Text>
+  <Text heading="h6">Heading 6</Text>
+</Vertical>;
+```
+
+### **Strike**
+
+“**_isStriked_**” marks up a text to indicate that it is no longer valid.
+
+```tsx
+<Text color="theme.secondary" isStriked>
+  Some text here
+</Text>
+```
+
+### **Subscript**
+
+“**_isSub_**” makes text appears slightly below the baseline of the surrounding text.
+
+```tsx
+<Text>
+  H<Text isSub>2</Text>0
+</Text>
+```
+
+### **Superscript**
+
+“isSup” makes text appears slightly above the surrounding text.
+
+```tsx
+<Text>
+  H<Text isSup>2</Text>0
+</Text>
+```
+
+### **Weights**
+
+“**_weight_**” changes the font weight of the text. It have a default value of “medium”.
+
+```tsx
+import { Vertical } from "../Layout/Vertical/Vertical";
+
+<Vertical gap={5} alignItems="center">
+  {[
+    "hairline",
+    "thin",
+    "light",
+    "normal",
+    "medium",
+    "semiBold",
+    "bold",
+    "extraBold",
+    "black",
+  ].map((weight, index) => (
+    <Text key={index} weight={weight}>
+      {weight}
+    </Text>
+  ))}
+</Vertical>;
+```
+
+### **Truncate**
+
+“**_isTruncated_**” removes a part of the text and add an ellipsis to the end.
+
+```tsx
+import { Center } from "../Layout/Center/Center";
+
+<Center>
+  <Text maxLines={3} width="200px" isTruncated>
+    Pellentesque habitant morbi tristique senectus et netus et malesuada fames
+    ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
+    tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+    ultricies mi vitae est.
+  </Text>
+</Center>;
+```
+
+### **Italic**
+
+“**_isItalic_**” styles the text in italic.
+
+```tsx
+<Text isItalic>Some text here</Text>
+```
+
+### **Underline**
+
+“**_isUnderlined_**” underlines the text.
+
+```tsx
+<Text isUnderlined>Some text here</Text>
+```
+
+## **Types**
+
+```tsx static
+export type Sizes =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl";
+```
+
+```tsx static
+type TextWeights =
+  | "hairline"
+  | "thin"
+  | "light"
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold"
+  | "black";
+```

package/src/components/Text/Text.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { TextProps } from './Text/Text.props';
+import TextView from './Text/Text.view';
+
+const TextComponent: React.FC<TextProps> = (props) => {
+  return <TextView {...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 const Text = TextComponent;

package/src/components/Wrapper.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { ResponsiveProvider,ThemeProvider } from 'app-studio';
+import { RouterProvider } from 'src/providers/Router';
+
+interface WrapperProps {
+  children: ReactNode;
+}
+
+const Wrapper: React.FC<WrapperProps> = ({ children }) => {
+  return (
+    <RouterProvider>
+      <ThemeProvider>
+        <ResponsiveProvider>{children}</ResponsiveProvider>
+      </ThemeProvider>
+    </RouterProvider>
+  );
+};
+
+export default Wrapper;

package/src/components/index.tsx

@@ -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';