@xaypay/tui 0.0.3 → 0.0.4

package/src/components/radio/index.js

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./radio.module.css";
+
+export const Radio = ({
+  disabled,
+  defaultChecked,
+  required,
+  className,
+  name,
+  value,
+  jsonData,
+  label,
+  keyNames,
+  ...props
+}) => {
+  const classProps = classNames(styles.checkbox, className);
+  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+
+  return (
+    <>
+      {parseData.map((element, id) => {
+        return (
+          <label className={styles["radio-wrap"]} key={element.value}>
+            <input
+              type="radio"
+              className={classProps}
+              disabled={disabled}
+              required={required}
+              defaultChecked={id === 0 ? defaultChecked : ""}
+              value={value ? value : element.value}
+              name={name ? name : element.name}
+              {...props}
+            />
+            <span className={styles["radio-checkmark"]}/>
+            {element.label ? (
+              <span className={styles.labelRadio}>
+                {label ? label : element.label}
+              </span>
+            ) : (
+              ""
+            )}
+          </label>
+        );
+      })}
+    </>
+  );
+};
+
+Radio.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  jsonData: PropTypes.string,
+  label: PropTypes.string,
+  keyNames: PropTypes.object,
+};
+
+Radio.defaultProps = {
+  onChange: undefined,
+  jsonData:
+    '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]',
+};

package/src/components/radio/radio.module.css

@@ -0,0 +1,59 @@
+.radio-wrap {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin: 0 6px;
+    padding-left: 24px;
+    cursor: pointer;
+}
+.radio-wrap > input {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+
+.radio-wrap .radio-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    vertical-align: top;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #d9d9d9;
+    border-radius: 50%;
+    margin-right: 4px;
+    transition: border-color 240ms;
+}
+
+.radio-wrap > .radio-checkmark:after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #d9d9d9;
+    opacity: 0;
+    transition: opacity 240ms, background-color 240ms;
+}
+
+.radio-wrap input:checked ~ .radio-checkmark:after {
+    opacity: 1;
+    background-color: #1890ff;
+}
+
+.radio-wrap:hover input ~ .radio-checkmark:after {
+    opacity: 1;
+}
+
+.radio-wrap input:checked ~ .radio-checkmark {
+    border-color: #1890ff;
+}

package/src/components/radio/radio.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Radio } from ".";
+export default {
+  component: Radio,
+  title: "Components/Radio",
+};
+
+const Template = (args) => <Radio {...args} />;
+
+export const RadioButton = Template.bind({});

package/src/components/select/index.js

@@ -0,0 +1,130 @@
+import React, {useEffect, useState} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './select.module.css';
+import Icon from '../icon/Icon'
+
+
+export const SelectTheme = {
+    DEFAULT: 'select-default',
+    PRIMARY: 'select-primary',
+    SUCCESS: 'select-success',
+    INFO: 'select-info',
+    WARNING: 'select-warning',
+    DANGER: 'select-danger',
+    LINK: 'select-link'
+};
+
+export const SelectSize = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+};
+
+export const Select = ({
+                           theme,
+                           size,
+                           className,
+                           disabled,
+                           label,
+                           jsonData,
+                           eMessage,
+                           required,
+                           defaultOption,
+                           onChange,
+                           selected
+                       }) => {
+    const options = jsonData.length ? JSON.parse(jsonData) : []
+    let [opened, setOpened] = useState(false)
+    let [newSelected, setNewSelected] = useState(selected)
+    const classProps = classnames(
+        styles[theme],
+        styles[size],
+        {
+            [styles.disabled]: disabled,
+            [styles.required]: required,
+        },
+        className
+    );
+
+    return (
+        <>
+        {label ? <label className={styles['select-title']}>{label}</label> : ""}
+        <div className={styles['select-wrap']}>
+            <div className={styles['select-content']} id={styles.selector}>
+                <div
+                    className={styles['select-content-top']}
+                    onClick={() => {
+                        setOpened(!opened)
+                    }}
+                >
+                    <div className={styles['select-content-top-text']}>{newSelected ?.name || defaultOption}</div>
+                    <div className={styles['select-content-top-icon']}>
+                        <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
+                    </div>
+                </div>
+                {
+                    opened && !disabled ?
+
+                        <div className={styles['select-content-bottom']}>
+                            <div className={styles['select-content-bottom-inner']}>
+                                <div
+                                    className={styles['select-content-bottom-row']}
+                                    onClick={() => {
+                                        if (!required && !selected) {
+                                            setNewSelected(defaultOption)
+                                            onChange(defaultOption)
+                                            setOpened(!opened)
+                                        }
+                                    }
+                                    }
+                                >
+                                    {defaultOption}
+                                </div>
+                                {
+                                    options ?.map((option, i) => {
+                                    return <div
+                                    className={styles['select-content-bottom-row']}
+                                    disabled={true}
+                                    onClick={() => {
+                                    setNewSelected(option);
+                                    onChange(option);
+                                    setOpened(!opened);
+                                }
+                                }
+                                    defaultValue={option.id}
+                                    >
+                                    {option.name}
+                                    </div>
+                                })
+                                }
+                            </div>
+
+                        </div>
+                        : null
+                }
+
+            </div>
+        </div>
+        {eMessage ? <span className={styles.eMessage}>{eMessage}</span> : null}
+        </>
+    );
+};
+
+Select.propTypes = {
+    theme: PropTypes.oneOf(Object.values(SelectTheme)),
+    size: PropTypes.oneOf(Object.values(SelectSize)),
+    label: PropTypes.string,
+    eMessage: PropTypes.string,
+    defaultOption: PropTypes.string,
+    onChange: PropTypes.func,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    className: PropTypes.string,
+    selected: PropTypes.object,
+    jsonData: PropTypes.string
+};
+
+Select.defaultProps = {
+    size: 'medium'
+};

package/src/components/select/select.module.css

@@ -0,0 +1,100 @@
+.select-title {
+    display: block;
+    text-transform: capitalize;
+    font-size: 16px;
+    color: #3C393E;
+    line-height: 22px;
+    font-weight: 500;
+    margin-bottom: 6px;
+}
+.select-content {
+    display: flex;
+    flex-direction: column;
+}
+.select-content-top {
+    display: flex;
+    flex-direction: row;
+    max-width: 400px;
+    height: 46px;
+    padding: 0 15px;
+    font-size: 16px;
+    color: #3C393E;
+    line-height: 22px;
+    font-weight: 500;
+    border: 2px solid #D1D1D1;
+    border-radius: 6px;
+    transition: border-color 240ms;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+.select-content-top.active {
+    border-color: #00236A;
+}
+.select-content-top:hover {
+    border-color: #3C393E;
+}
+.select-content-bottom {
+    position: relative;
+    top: 6px;
+    overflow: hidden;
+    max-width: 400px;
+    background: #FBFBFB;
+    box-shadow: 0 0 10px rgba(60, 57, 62, 0.08);
+    border-radius: 6px;
+    animation: select-show 640ms linear forwards;
+    max-height: 0;
+}
+.select-content-bottom-inner {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 234px;
+}
+@keyframes select-show {
+    100% {
+        max-height: 400px;
+    }
+}
+.select-content-top-text {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+.select-content-top-icon {
+    padding: 0 5px 0 20px;
+    box-sizing: border-box;
+}
+.select-content-top-icon {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+.select-content-top-icon > i{
+    font-size: 8px;
+    color: #3C393E;
+}
+.select-content-bottom-row {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    padding: 0 15px;
+    height: 46px;
+    font-size: 16px;
+    color: #3C393E;
+    line-height: 22px;
+    font-weight: 500;
+    margin-bottom: 2px;
+    box-sizing: border-box;
+    transition: background 240ms, color 240ms;
+    cursor: pointer;
+}
+.select-content-bottom-row:last-child {
+    margin-bottom: 0;
+}
+.select-content-bottom-row:hover {
+    background: unset;
+    color: #00236A;;
+}

package/src/components/select/select.stories.js

@@ -0,0 +1,21 @@
+import { Select, SelectTheme } from ".";
+
+export default {
+    component: Select,
+    title: 'Components/Select',
+};
+
+const Template = (args) => <Select label='' {...args} >Default</Select>;
+
+export const Default = Template.bind({});
+Default.args = {
+    theme: SelectTheme.DEFAULT,
+    label: 'վարչական շրջան',
+    jsonData: '[{"id":"0", "name":"Արաբկիր"}, {"id":"1", "name":"Կենտրոն"}, {"id":"2", "name":"Մալաթիա"}]',
+    onChange: (newValue)=> {
+        console.log(newValue);
+    },
+    defaultOption: 'ընտրել',
+    selected: {"id":"2", "name":"Մալաթիա"}
+};
+

package/src/components/typography/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './typography.module.css';
+import styled from "styled-components";
+
+export const TypographyType = {
+	h1: 'h1',
+	h2: 'h2',
+	h3: 'h3',
+	h4: 'h4',
+	h5: 'h5',
+	h6: 'h6',
+	span: 'span',
+	p: 'p',
+	i: 'i',
+};
+
+
+
+export const Typography = ({ variant, className, color, bold, children, ...props }) => {
+	const classProps = classnames(className,bold ? 'bold': '');
+	const CustomTag = variant;
+	
+	// const Tag = ({ className, children }) => (
+	// 	<CustomTag
+	// 		className={className}
+	// 		{...props}
+	// 	>
+	// 		{children}
+	// 	</CustomTag>
+	// );
+
+	const StyledTypograpy = styled(CustomTag)`
+		${color ? 'color: '+color+';' : '' }
+		${bold ? 'font-weight: bold;' : '' }
+	`;
+
+	return (
+		<StyledTypograpy className={classProps}> {children} </StyledTypograpy>
+	);
+};
+
+Typography.propTypes = {
+   variant: PropTypes.oneOf(Object.values(TypographyType)),
+   className: PropTypes.string,
+   bold: PropTypes.bool,
+   color: PropTypes.string
+};
+
+Typography.defaultProps = {
+	variant: 'h1'
+};

package/src/components/typography/typography.module.css

@@ -0,0 +1,60 @@
+h1 {
+    text-transform: uppercase;
+    font-size: 70px;
+    line-height: 70px;
+    font-weight: 400;
+}
+
+h2 {
+    text-transform: uppercase;
+    font-size: 50px;
+    line-height: 50px;
+    font-weight: 400;
+}
+
+h3 {
+    text-transform: uppercase;
+    font-size: 38px;
+    line-height: 38px;
+    font-weight: 400;
+}
+
+h4 {
+    text-transform: uppercase;
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: 600;
+}
+
+h5 {
+    text-transform: uppercase;
+    font-size: 20px;
+    line-height: 20px;
+    font-weight: 600;
+}
+
+h5 {
+    text-transform: capitalize;
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 600;
+}
+
+p {
+    text-transform: capitalize;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+}
+
+span {
+    text-transform: capitalize;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+}
+
+i {
+    font-family: icomoon;
+    font-style: inherit;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Typography} from './index';
+
+export default {
+    component: Typography,
+    title: 'Components/Typography',
+};
+
+const staticTag = ['h1','h2','h3','h4','h5','h6','span','p']
+
+const Template = (args) => <>
+    <Typography {...args} >Dynamic Typography</Typography>
+	{
+		staticTag.map((tag,key) => {
+			return <Typography key={key} variant={tag} >{tag}</Typography>;
+		})
+	}
+    {/* <Typography variant="h1" >Test</Typography>
+    <Typography variant="h1" >Test</Typography>
+    <Typography variant="h1" >Test</Typography>
+    <Typography variant="h1" >Test</Typography>
+    <Typography variant="h1" >Test</Typography>
+    <Typography variant="h1" >Test</Typography> */}
+</>;
+
+export const Default = Template.bind({});
+Default.args = {
+    variant: 'h1',
+};

package/src/index.js

@@ -1 +1,10 @@
-export * from './components/button';
+export * from './components/button';
+export * from './components/typography';
+export * from './components/autocomplate';
+export * from './components/checkbox';
+export * from './components/icon';
+export * from './components/input';
+export * from './components/pagination';
+export * from './components/radio';
+export * from './components/captcha';
+export * from './components/select';