react-jupiter 5.11.34 → 6.0.0-beta.1

package/src/docs/components/side-navigation/index.js

@@ -0,0 +1,167 @@
+import React, { createContext, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const NavContext = createContext();
+
+const Container = styled.div`
+  direction: ${({ ltr }) => (ltr ? 'ltr' : 'rtl')};
+  width: 100%;
+`;
+
+const NavTitle = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: #666;
+  padding: 16px 24px 8px;
+  text-transform: uppercase;
+`;
+
+const NavItemContainer = styled.div`
+  padding: 8px 24px;
+  cursor: pointer;
+  color: ${({ selected }) => (selected ? '#000' : '#666')};
+  background-color: ${({ selected }) => (selected ? '#f5f5f5' : 'transparent')};
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+
+const NavItemTitle = styled.span`
+  font-size: 14px;
+`;
+
+const Link = styled.a`
+  text-decoration: none;
+  color: inherit;
+  display: block;
+`;
+
+const NavItem = ({ title, ltr = false, id }) => {
+  const { selectedId, setSelectedId } = useContext(NavContext);
+  const selected = selectedId === id;
+
+  return (
+    <NavItemContainer 
+      selected={selected} 
+      ltr={ltr}
+      onClick={() => setSelectedId(id)}
+    >
+      <NavItemTitle>{title}</NavItemTitle>
+    </NavItemContainer>
+  );
+};
+
+NavItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  ltr: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+};
+
+const Nav = ({ children, id }) => {
+  const { selectedId } = useContext(NavContext);
+  const selected = selectedId === id;
+
+  return React.cloneElement(children, { selected });
+};
+
+Nav.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+const SideNav = ({ children, defaultSelectedPath }) => {
+  const [selectedId, setSelectedId] = useState(defaultSelectedPath);
+
+  return (
+    <NavContext.Provider value={{ selectedId, setSelectedId }}>
+      {children}
+    </NavContext.Provider>
+  );
+};
+
+SideNav.propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultSelectedPath: PropTypes.string.isRequired,
+};
+
+const SideNavigation = ({ ltr = false }) => (
+  <Container ltr={ltr}>
+    <NavTitle>معرفی</NavTitle>
+    <SideNav defaultSelectedPath="1">
+      <Nav id="1">
+        <Link href="/">
+          <NavItem title="چرا؟" ltr={ltr} id="1" />
+        </Link>
+      </Nav>
+      <Nav id="2">
+        <NavItem title="ویژگی‌ها" ltr={ltr} id="2" />
+      </Nav>
+      <Nav id="3">
+        <NavItem title="منابع" ltr={ltr} id="3" />
+      </Nav>
+      <NavTitle>شروع و راه اندازی</NavTitle>
+      <Nav id="4">
+        <NavItem title="نصب" ltr={ltr} id="4" />
+      </Nav>
+      <Nav id="5">
+        <NavItem title="راه اندازی" ltr={ltr} id="5" />
+      </Nav>
+      <Nav id="6">
+        <NavItem title="مفاهیم" ltr={ltr} id="6" />
+      </Nav>
+      <NavTitle>کامپوننت‌ها</NavTitle>
+      <Nav id="7">
+        <Link href="/components/typography">
+          <NavItem title="تایپوگرافی" ltr={ltr} id="7" />
+        </Link>
+      </Nav>
+      <Nav id="8">
+        <Link href="/components/button">
+          <NavItem title="دکمه‌ها" ltr={ltr} id="8" />
+        </Link>
+      </Nav>
+      <Nav id="9">
+        <Link href="/components/avatar">
+          <NavItem title="آواتار" ltr={ltr} id="9" />
+        </Link>
+      </Nav>
+      <Nav id="10">
+        <Link href="/components/icon">
+          <NavItem title="آیکون" ltr={ltr} id="10" />
+        </Link>
+      </Nav>
+      <Nav id="11">
+        <Link href="/components/icons">
+          <NavItem title="آیکون‌ها" ltr={ltr} id="11" />
+        </Link>
+      </Nav>
+      <Nav id="12">
+        <Link href="/components/card">
+          <NavItem title="کارت" ltr={ltr} id="12" />
+        </Link>
+      </Nav>
+      <Nav id="13">
+        <Link href="/components/cover">
+          <NavItem title="کاور" ltr={ltr} id="13" />
+        </Link>
+      </Nav>
+      <Nav id="14">
+        <Link href="/components/form">
+          <NavItem title="فرم" ltr={ltr} id="14" />
+        </Link>
+      </Nav>
+      <Nav id="15">
+        <Link href="/components/product">
+          <NavItem title="کامپوننت های پروداکت" ltr={ltr} id="15" />
+        </Link>
+      </Nav>
+    </SideNav>
+  </Container>
+);
+
+SideNavigation.propTypes = {
+  ltr: PropTypes.bool,
+};
+
+export default SideNavigation;

package/src/docs/components/side-navigation/index.styles.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const Container = styled.div`
+  background: #fff;
+  min-width: 180px;
+  color: #444;
+  ${({ ltr }) => (ltr ? 'border-right: 1px solid #e5e5e5' : 'border-left: 1px solid #e5e5e5')}
+  float: right;
+  position: absolute;
+  height: 100%;
+`;
+
+
+export const NavTitle = styled.div`
+  padding: 8px;
+  margin-bottom: -8px;
+  font-size: 0.92em;
+  color: #a5a5a5;
+`;
+
+export const NavItemContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 8px 16px;
+  background: ${(props) => (props.selected ? '#F5F5F5' : 'inherit')};
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  ${({ ltr, selected }) => (!ltr
+    ? `border-right: 4px solid ${selected ? '#DE0A5F' : 'transparent'}`
+    : `border-left: 4px solid ${selected ? '#DE0A5F' : 'transparent'}`
+  )}
+  &:hover {
+    background: #f5f5f5;
+  }
+`;
+export const NavItemTitle = styled.div`
+  padding-left: 6px;
+  line-height: 22px;
+`;
+
+export const Link = styled(RouterLink)`
+  color: #444;
+  text-decoration: none;
+`;

package/src/docs/containers/avatar/index.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, Avatar, FileItem } from '../../../components';
+
+const AvatarWrapper = styled(Avatar)`
+  border: 1px solid red;
+`;
+
+const { Heading, Link } = Typography;
+
+const AvatarPage = () => (
+  <>
+    <Heading level={1}>
+      آواتار
+    </Heading>
+    <br />
+    <br />
+
+    <Heading level={2}>
+      آواتار با حداقل پارامتر ها
+    </Heading>
+    <Avatar src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqkhWwKzw6iSa0JBXxtse4JPKKR5VVmRXwBF0j_Bqooq9nVDoZ" />
+    <br />
+
+    <Heading level={2}>
+      آواتار همراه با لینک
+    </Heading>
+    <Link to="http://yahoo.com" external>
+      <Avatar alt="cat" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqkhWwKzw6iSa0JBXxtse4JPKKR5VVmRXwBF0j_Bqooq9nVDoZ" />
+    </Link>
+    <br />
+
+    <Heading level={2}>
+      آواتار در اندازه های متفاوت
+    </Heading>
+
+    <Heading level={3}>
+      sm size
+    </Heading>
+    <Avatar alt="cat" size="sm" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqkhWwKzw6iSa0JBXxtse4JPKKR5VVmRXwBF0j_Bqooq9nVDoZ" />
+    <br />
+
+    <Heading level={3}>
+      md size (default)
+    </Heading>
+    <Avatar alt="cat" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqkhWwKzw6iSa0JBXxtse4JPKKR5VVmRXwBF0j_Bqooq9nVDoZ" />
+    <br />
+
+    <Heading level={3}>
+      lg size
+    </Heading>
+    <Avatar alt="cat" size="lg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqkhWwKzw6iSa0JBXxtse4JPKKR5VVmRXwBF0j_Bqooq9nVDoZ" />
+    <br />
+
+    <Heading level={2}>
+      آواتار با
+      wrapper
+      ای که ویژگی های آن را تغییر میدهد
+    </Heading>
+    <AvatarWrapper alt="cat" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqkhWwKzw6iSa0JBXxtse4JPKKR5VVmRXwBF0j_Bqooq9nVDoZ" />
+    <br />
+
+    <Heading level={2}>
+      آواتار با آدرس دهی نا موجود
+    </Heading>
+    <Avatar alt="گربه ی ناز نازی" src="wrong-src" />
+    <br />
+
+    <Heading level={2}>
+      آواتار  بدون آدرس دهی
+    </Heading>
+    <Avatar alt="گربه ی ناز نازی" />
+    <br />
+
+
+    <Heading level={2}>
+      تست فایل
+    </Heading>
+    <FileItem
+      description="متن توضیحات"
+      fileSize="۵ مگابایت"
+      onClick={() => (window.console.log('finallyyyyy'))}
+      price="۶۰۰۰ تومن"
+      title="فایل جلسه اول ما"
+      type="zip"
+    />
+    <br />
+
+  </>
+);
+
+export default AvatarPage;

package/src/docs/containers/button/index.js

@@ -0,0 +1,295 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Typography, Button } from '../../../components';
+
+const { Heading } = Typography;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+`;
+
+const ButtonPage = () => (
+  <>
+    <Heading level={1}>
+      دکمه ها
+    </Heading>
+    <br />
+    <br />
+
+    <Heading level={2}>
+      نمونه دکمه پیشفرض
+    </Heading>
+    <Button>
+      دکمه
+    </Button>
+    <br />
+
+    <Heading level={2}>
+      دکمه آیکون دار
+    </Heading>
+    <Button icon="watch-later">
+      دکمه آیکون دار
+    </Button>
+    <br />
+
+    <Heading level={2}>
+      دکمه full-width
+    </Heading>
+    <Button wide size="sm">
+      دکمه full-width (sm size)
+    </Button>
+    <Button wide>
+      دکمه full-width(md size - default)
+    </Button>
+    <Button wide size="lg">
+      دکمه full-width(lg size)
+    </Button>
+    <br />
+
+    <Heading level={2}>
+      دکمه در اندازه های متفاوت
+    </Heading>
+
+    <Heading level={3}>
+      sm size
+    </Heading>
+    <Button size="sm">
+      دکمه
+    </Button>
+    <Button size="sm" icon="watch-later">
+      دکمه
+    </Button>
+    <br />
+
+    <Heading level={3}>
+      md size (default)
+    </Heading>
+    <Button size="md">
+      دکمه
+    </Button>
+    <Button size="md" icon="watch-later">
+      دکمه
+    </Button>
+    <br />
+
+    <Heading level={3}>
+      lg size
+    </Heading>
+    <Button size="lg">
+      دکمه
+    </Button>
+    <Button size="lg" icon="watch-later">
+      دکمه
+    </Button>
+    <br />
+
+    <Heading level={2}>
+      دکمه ها در استایل ها متفاوت و رنگ های متفاوت
+    </Heading>
+    <Heading level={3}>
+      رنگ قرمز
+    </Heading>
+    <Heading level={4}>
+      رنگ قرمز - normal
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="red">
+        دکمه primary (default)
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="red">
+        دکمه secondary
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="red">
+        دکمه tertiary
+      </Button>
+    </ButtonWrapper>
+    <Heading level={4}>
+      رنگ قرمز - disabled
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="red" disabled>
+        دکمه primary (default) - disabled
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="red" disabled>
+        دکمه secondary - disabled
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="red" disabled>
+        دکمه tertiary - disabled
+      </Button>
+    </ButtonWrapper>
+    <hr />
+    <Heading level={3}>
+      رنگ سبز
+    </Heading>
+    <Heading level={4}>
+      رنگ سبز - normal
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="green">
+        دکمه primary (default)
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="green">
+        دکمه secondary
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="green">
+        دکمه tertiary
+      </Button>
+    </ButtonWrapper>
+    <Heading level={4}>
+      رنگ سبز - disabled
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="green" disabled>
+        دکمه primary (default) - disabled
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="green" disabled>
+        دکمه secondary - disabled
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="green" disabled>
+        دکمه tertiary - disabled
+      </Button>
+    </ButtonWrapper>
+    <hr />
+    <Heading level={3}>
+      رنگ زرد
+    </Heading>
+    <Heading level={4}>
+      رنگ زرد - normal
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="yellow">
+        دکمه primary (default)
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="yellow">
+        دکمه secondary
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="yellow">
+        دکمه tertiary
+      </Button>
+    </ButtonWrapper>
+    <Heading level={4}>
+      رنگ زرد - disabled
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="yellow" disabled>
+        دکمه primary (default) - disabled
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="yellow" disabled>
+        دکمه secondary - disabled
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="yellow" disabled>
+        دکمه tertiary - disabled
+      </Button>
+    </ButtonWrapper>
+    <hr />
+    <Heading level={3}>
+      رنگ آبی
+    </Heading>
+    <Heading level={4}>
+      رنگ آبی - normal
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="blue">
+        دکمه primary (default)
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="blue">
+        دکمه secondary
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="blue">
+        دکمه tertiary
+      </Button>
+    </ButtonWrapper>
+    <Heading level={4}>
+      رنگ آبی - disabled
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" mainColor="blue" disabled>
+        دکمه primary (default) - disabled
+      </Button>
+      <Button styleType="secondary" icon="watch-later" mainColor="blue" disabled>
+        دکمه secondary - disabled
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" mainColor="blue" disabled>
+        دکمه tertiary - disabled
+      </Button>
+    </ButtonWrapper>
+    <hr />
+    <Heading level={3}>
+      رنگ آبی تیره - پیشفرض
+    </Heading>
+    <Heading level={4}>
+      رنگ آبی تیره - پیشفرض - normal
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later">
+        دکمه primary (default)
+      </Button>
+      <Button styleType="secondary" icon="watch-later">
+        دکمه secondary
+      </Button>
+      <Button styleType="tertiary" icon="watch-later">
+        دکمه tertiary
+      </Button>
+    </ButtonWrapper>
+    <Heading level={4}>
+      رنگ آبی تیره - پیشفرض - disabled
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" disabled>
+        دکمه primary (default) - disabled
+      </Button>
+      <Button styleType="secondary" icon="watch-later" disabled>
+        دکمه secondary - disabled
+      </Button>
+      <Button styleType="tertiary" icon="watch-later" disabled>
+        دکمه tertiary - disabled
+      </Button>
+    </ButtonWrapper>
+    <br />
+
+    <Heading level={2}>
+      دکمه لینک دار
+    </Heading>
+    <ButtonWrapper>
+      <Button linkTo="/avatar">
+        دکمه لینک ساده با تنظیمات پیشفرض
+      </Button>
+      <Button styleType="secondary" icon="watch-later" linkTo="https://sciencebusiness.net/categories/dfgdfg" linkTarget="_blank">
+        دکمه لینک با لینک خارجی
+      </Button>
+      <Button
+        styleType="tertiary"
+        icon="watch-later"
+        renderLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+        linkTarget="_self"
+      >
+        دکمه لینک داخلی (نمونه کامل)
+      </Button>
+    </ButtonWrapper>
+    <Heading level={4}>
+      دکمه لینک دار - disabled
+    </Heading>
+    <ButtonWrapper>
+      <Button styleType="primary" icon="watch-later" linkTo="/avatar" disabled>
+        دکمه لینک ساده با تنظیمات پیشفرض - disabled
+      </Button>
+      <Button styleType="secondary" icon="watch-later" linkTo="https://sciencebusiness.net/categories/dfgdfg" linkTarget="_blank" disabled>
+        دکمه لینک با لینک خارجی - disabled
+      </Button>
+      <Button
+        styleType="tertiary"
+        icon="watch-later"
+        linkTarget="_self"
+        renderLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+        disabled
+      >
+        دکمه لینک داخلی (نمونه کامل) - disabled
+      </Button>
+    </ButtonWrapper>
+    <br />
+
+  </>
+);
+
+export default ButtonPage;