@xaypay/tui 0.0.53 → 0.0.55

package/src/components/typography/index.js

@@ -17,34 +17,88 @@ export const TypographyType = {
 
 export const Typography = ({
 	size,
+	color,
 	weight,
-	onClick,
+	radius,
+	border,
+	cursor,
+	margin,
+	padding,
 	variant,
+	bgColor,
+	onClick,
 	children,
+	textAlign,
+	fontStyle,
 	className,
+	textShadow,
+	lineHeight,
+	colorHover,
+	fontFamily,
+	textTransform,
+	textDecoration,
 	...props
 }) => {
-	const [validVariant, setValidVariant] = useState(false);
-
 	const configStyles = compereConfigs();
 	const classProps = classnames(className);
 
+	const [isHover, setIsHover] = useState(false);
+	const [validVariant, setValidVariant] = useState(false);
+	const [style, setStyle] = useState({
+		border: border ? border : configStyles.TYPOGRAPHY.border,
+		cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
+		borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
+		fontSize: size ? size : configStyles.TYPOGRAPHY['size'+variant],
+		margin: margin ? margin : configStyles.TYPOGRAPHY['margin'+variant],
+		fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight'+variant],
+		padding: padding ? padding : configStyles.TYPOGRAPHY['padding'+variant],
+		textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
+		textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign'+variant],
+		backgroundColor: bgColor ? bgColor : configStyles.TYPOGRAPHY['bgColor'+variant],
+		fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle'+variant],
+		lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight'+variant],
+		fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily'+variant],
+		textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform'+variant],
+		textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration'+variant],
+		color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
+
+	});
+
 	useEffect(() => {
 		if (!Object.values(TypographyType).includes(variant)) {
 			setValidVariant(true);
 		}
 	}, [variant]);
 
+	useEffect(() => {
+		if (color) {
+			setStyle(prev => {
+				return {
+					...prev,
+					color: color
+				}
+			})
+		}
+	}, [color]);
+
+	const handleMouseEnter = () => {
+		setIsHover(true);
+	};
+	  
+	const handleMouseLeave = () => {
+		setIsHover(false);
+	};
+
 	const tagT = React.createElement(
 		variant,
 		{
+			style,
 			...props,
 			className: classProps,
-			style: {
-				fontSize: size ? size : configStyles.TYPOGRAPHY['fSize'+variant],
-				fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight'+variant]
-			},
 			onClick: onClick ? onClick : _ => _,
+			onMouseEnter: handleMouseEnter,
+      		onMouseLeave: handleMouseLeave
+
 		},
 		[children]
 	);
@@ -56,8 +110,23 @@ export const Typography = ({
 
 Typography.propTypes = {
 	size: PropTypes.string,
-	weight: PropTypes.string,
+	color: PropTypes.string,
 	onClick: PropTypes.func,
+	weight: PropTypes.string,
+	border: PropTypes.string,
+	cursor: PropTypes.string,
+	margin: PropTypes.string,
+	radius: PropTypes.string,
+	bgColor: PropTypes.string,
+	padding: PropTypes.string,
+	textAlign: PropTypes.string,
 	className: PropTypes.string,
+	fontStyle: PropTypes.string,
+	lineHeight: PropTypes.string,
+	textShadow: PropTypes.string,
+	fontFamily: PropTypes.string,
+	colorHover: PropTypes.string,
+	textTransform: PropTypes.string,
+	textDecoration: PropTypes.string,
 	variant: PropTypes.oneOf(Object.values(TypographyType)).isRequired,
 };

package/src/components/typography/typography.stories.js

@@ -9,10 +9,16 @@ export default {
 const staticTag = ['h1','h2','h3','h4','h5','h6','span','p']
 
 export const Template = (args) => <>
-    <Typography {...args} variant="h1">Dynamic Typography</Typography>
+    <Typography {...args}>Dynamic Typography</Typography>
 	{
 		staticTag.map((tag,key) => {
-			return <Typography key={key} size="12px" variant={tag}>{tag}</Typography>;
+			return <Typography
+				key={key}
+				variant={tag} 
+				color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}
+			>
+				{tag}
+			</Typography>;
 		})
 	}
 </>;

package/src/index.js

@@ -1,15 +1,15 @@
-export * from './components/tooltip';
-export * from './components/button';
-export * from './components/typography';
-export * from './components/autocomplate';
-export * from './components/checkbox';
-export * from './components/icon/Icon';
+export * from './components/file';
+export * from './components/table';
+export * from './components/modal';
 export * from './components/input';
-export * from './components/pagination';
 export * from './components/radio';
+export * from './components/button';
+export * from './components/select';
+export * from './components/tooltip';
 export * from './components/captcha';
 export * from './components/stepper';
-export * from './components/select';
-export * from './components/file';
-export * from './components/modal';
-export * from './components/table';
+export * from './components/checkbox';
+export * from './components/icon/Icon';
+export * from './components/typography';
+export * from './components/pagination';
+export * from './components/autocomplate';

package/src/stories/Introduction.stories.mdx

@@ -1,17 +1,17 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
+import { Meta } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Intro/Introduction" />
 
 <style>
-  {`
+    {`
     .subheading {
       --mediumdark: '#999999';
       font-weight: 900;
@@ -27,7 +27,7 @@ import StackAlt from './assets/stackalt.svg';
     .link-list {
       display: grid;
       grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
+      grid-template-rows: 1fr 0fr;
       row-gap: 10px;
     }
 
@@ -42,8 +42,8 @@ import StackAlt from './assets/stackalt.svg';
     @media all and (-ms-high-contrast:none) {
     .link-list {
         display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
+        -ms-grid-columns: 1fr 0fr;
+        -ms-grid-rows: 1fr 0fr;
       }
     }
 
@@ -114,98 +114,87 @@ import StackAlt from './assets/stackalt.svg';
   `}
 </style>
 
-# Welcome to Storybook
+# Welcome to TUI
 
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+TUI provides a lot of UI components to enrich your web applications, and we will improve components experience consistently
 
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+TUI is fully configurable. You can change color, size, border and etc... Yes. You can configurable what you want. box-shadow on hover as well )))) 
 
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
+    <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
+        <img src={Plugin} alt="plugin" />
+        <span>
+            <strong>Presets for popular tools</strong>
+            Easy setup for TypeScript, SCSS and more.
+        </span>
+    </a>
+    <a className="link-item" href="../?path=/story/intro-configuration--page">
+        <img src={StackAlt} alt="Build" />
+        <span>
+            <strong>Build configuration</strong>
+            How to customize TUI
+        </span>
+    </a>
+    
 </div>
 
 <div className="subheading">Learn</div>
 
 <div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
+    <a className="link-item" href="../?path=/docs/intro-documentation--page">
+        <img src={Repo} alt="repo" />
+        <span>
+            <strong>TUI documentation</strong>
+            Configure, customize, and extend
+        </span>
+    </a>
+    <a className="link-item" href="http://gitlab.yerevan.am/rubo/tui" target="_blank">
+        <img src={Code} alt="code" />
+        <span>
+            <strong>GitHub project</strong>
+            View the source and add issues
+        </span>
+    </a>
 </div>
 
+<!--
+<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+        <img src={Direction} alt="direction" />
+        <span>
+            <strong>In-depth guides</strong>
+            Best practices from leading teams
+        </span>
+    </a>
+<a className="link-item" href="https://discord.gg/storybook" target="_blank">
+        <img src={Comments} alt="comments" />
+        <span>
+            <strong>Discord chat</strong>
+            Chat with maintainers and the community
+        </span>
+    </a> 
 <div className="tip-wrapper">
   <span className="tip">Tip</span>Edit the Markdown in{' '}
   <code>stories/Introduction.stories.mdx</code>
 </div>
+
+<a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
+        <img src={Colors} alt="colors" />
+        <span>
+            <strong>Styling</strong>
+            How to load and configure CSS libraries
+        </span>
+    </a>
+    <a
+        className="link-item"
+        href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+        target="_blank"
+    >
+        <img src={Flow} alt="flow" />
+        <span>
+            <strong>Data</strong>
+            Providers and mocking for data libraries
+        </span>
+    </a>
+-->

package/src/stories/changelog.stories.mdx

@@ -0,0 +1,118 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Intro/Changelog" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Documentation
+