react-jupiter 5.12.0 → 6.0.0-beta.1

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Typography } from '../../../components';
+import ShowDate from '../../../components/show-date';
+import CardTemplate from '../../../components/card/card-template';
+import { EventCard } from '../../../components/card';
+import TitledAvatar from '../../../components/titled-avatar';
+import OrganizationCard from '../../../components/card/organization-card';
+import NumericSummeryReport from '../../../components/numeric-summery-report';
+import Responsive from '../../../components/responsive';
+
+const { Heading } = Typography;
+
+const CardPage = () => (
+  <>
+    <Heading level={1}>
+      کارت
+    </Heading>
+    <ShowDate date={new Date()} />
+    <br />
+    <Responsive option={{ greaterThan: 1200 }}><h1>Show from to 1200px</h1></Responsive>
+    <Responsive option={{ lessThan: 1200 }}><h1>Show up to 1200px</h1></Responsive>
+    <Responsive option={{ greaterThan: 900 }}><h1>Show from 900px</h1></Responsive>
+    <Responsive option={{ greaterThan: 700, lessThan: 900 }}>
+      <h1>Show from 700px up to 900px</h1>
+    </Responsive>
+    <br />
+    <EventCard
+      type="vertical"
+      title="تایتل یک رویداد نسبتا طولانی در اینجاست که قرار است اضافه بیاید و بزند به بیرون"
+      cover="https://static.evand.net/images/events/covers/original/2e6f40ac8e1bc78304ccf3fd77b1b3d5.jpg"
+      date="2020-01-10T14:00:00+0330"
+      place="تهران"
+      price="از ۴۴۰۰۰ تومان"
+      ads
+      finished
+      organization={{
+        name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
+        logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg',
+      }}
+      clickBookmark={() => { window.console.log('handle click bookmark'); return true; }}
+      renderEventLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+    />
+    <br />
+    <EventCard
+      type="vertical"
+      title="تایتل یک رویداد اینجاست کهن"
+      date="2020-01-10T14:00:00+0330"
+      place="تهران"
+      price="از ۴۴۰۰۰ تومان"
+      ads
+      organization={{
+        name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
+        logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg',
+      }}
+      clickBookmark={() => { window.console.log('handle click bookmark'); return true; }}
+      renderEventLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+      renderOrganizationLink={(element) => <Link to="/toorganization">{element}</Link>}
+    />
+    <br />
+    <NumericSummeryReport
+      data={[
+        { id: 1, title: 'برگزار شده', count: 12 },
+        { id: 2, title: 'فعال', count: 2 },
+        { id: 3, title: 'دنبال کننده‌ها', count: 346 },
+      ]}
+    />
+    <br />
+
+    <EventCard
+      type="horizontal"
+      title="تایتل یک رویداد نسبتا طولانی در اینجاست که باید و باید و قرار است اضافه بیاید و بزند به بیرون"
+      cover="https://static.evand.net/images/events/covers/original/2e6f40ac8e1bc78304ccf3fd77b1b3d5.jpg"
+      date="2020-01-10T14:00:00+0330"
+      place="تهران"
+      price="از ۴۴۰۰۰ تومان"
+      ads
+      clickBookmark={() => { window.console.log('handle click bookmark'); }}
+      queryString="icn=trendEvents&ici=fp5"
+      renderEventLink={(element) => <Link to="/tosomewhere">{element}</Link>}
+    />
+    <EventCard
+      type="horizontal"
+      title="تایتل یک رویداد نسبتا طولانی در اینجاست که باید و باید و قرار است اضافه بیاید و بزند به بیرون"
+      date="2020-01-10T14:00:00+0330"
+      place="تهران"
+      price="از ۴۴۰۰۰ تومان"
+      finished
+      clickBookmark={() => { window.console.log('handle click bookmark'); }}
+      queryString="icn=trendEvents&ici=fp5"
+      renderEventLink={(element) => <Link to="/tosomewhere">{element}</Link>}
+    />
+    <br />
+    <CardTemplate hoverToLevel={2}><div>Hello card template.</div></CardTemplate>
+    <br />
+    <br />
+    <br />
+    <br />
+    <CardTemplate level={2} hoverToLevel={4}><div>Hello card template.</div></CardTemplate>
+    <br />
+    <br />
+    <br />
+    <br />
+    <CardTemplate level={3} maxWidth="400" renderLink={(el) => <a href="http://google.com">{el}</a>} hoverToLevel={4}>
+      <div>
+        <Heading>Hello card template. Hello card template.Hello card template.</Heading>
+      </div>
+    </CardTemplate>
+    <br />
+    <br />
+    <br />
+    <br />
+    <CardTemplate level={4}><div>Hello card template.</div></CardTemplate>
+    <br />
+    <br />
+    <br />
+    <br />
+    <CardTemplate level={5}><div>Hello card template.</div></CardTemplate>
+    <br />
+    <br />
+
+    <TitledAvatar
+      title="انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی
+      انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی"
+      avatar="https://static.evand.net/images/organizations/logos/original/96f2fd0f4770552bf2d14db5b51f4013.jpg?x-oss-process=image/resize,h_250"
+      avatarSize="sm"
+      titleSize={10}
+      renderAvatarLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+    />
+    <br />
+    <TitledAvatar
+      title="انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی
+      انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی"
+      avatar="https://static.evand.net/images/organizations/logos/original/96f2fd0f4770552bf2d14db5b51f4013.jpg?x-oss-process=image/resize,h_250"
+      renderAvatarLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+    />
+    <br />
+    <br />
+    <OrganizationCard
+      title="انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی انجمن علمی کامپیوتر دانشگاه صنعتی خواجه"
+      logo="https://static.evand.net/images/organizations/logos/original/d431e339d86b187f356055f1d6f39ddb.jpg?x-oss-process=image/resize,h_250"
+      report={{
+        heldEventsNumber: 2,
+        activeEventsNumber: 17,
+        followingNumber: 148,
+      }}
+      onClickFollow={() => { window.console.log('click on follow'); }}
+      renderLink={(element) => <Link to="/somewhere">{element}</Link>}
+    />
+  </>
+);
+
+export default CardPage;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Cover, Typography } from '../../../components';
+import sampleCover from '../../assets/cover-sample.png';
+
+const { Heading } = Typography;
+
+const CoverPage = () => (
+  <>
+    <Heading level={1}>
+      کاور
+    </Heading>
+    <br />
+    <br />
+
+    <Heading level={2}>
+      کاور ساده بدون آدرس عکس کاور
+    </Heading>
+    <Cover />
+    <br />
+
+    <Heading level={2}>
+      کاور ساده با آدرس دهی اشتباه
+    </Heading>
+    <Cover src="wrong-src" />
+    <br />
+
+    <Heading level={2}>
+      کاور ساده
+    </Heading>
+    <Cover src={sampleCover} />
+    <br />
+    <br />
+
+    <Heading level={2}>
+      کاور با لینک بیرونی
+    </Heading>
+    <Cover linkTo="http://yahoo.com" />
+    <br />
+
+    <Heading level={2}>
+      کاور با لینک درونی
+    </Heading>
+    <Cover
+      renderLink={(element) => <Link to="/components/card">{element}</Link>}
+    />
+    <br />
+
+    <Heading level={2}>
+      کاور lazy-load
+    </Heading>
+    <Cover
+      src="https://images.unsplash.com/photo-1563271963-9ff697463684?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
+      isLazy
+    />
+    <br />
+    <Cover isLazy src="https://images.unsplash.com/photo-1568292342316-60aa3d36f4b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1494&q=80" />
+    <br />
+    <Cover
+      isLazy
+      src="https://images.unsplash.com/photo-1566650141466-788ec481d69a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1055&q=80"
+      renderLink={(element) => <Link to="/components/card">{element}</Link>}
+    />
+    <br />
+    <Cover
+      isLazy
+      src="https://images.unsplash.com/photo-1543572414-f353d97a5212?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      linkTo="http://yahoo.com"
+    />
+    <br />
+    <Cover isLazy src="wrong-lazy-src" minHeight={151} />
+    <br />
+
+  </>
+);
+
+export default CoverPage;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, Form } from '../../../components';
+
+const { Heading } = Typography;
+const { TextInput } = Form;
+
+const Br = styled.br`
+  margin: 8px;
+`;
+
+const FormPage = () => (
+  <>
+    <Heading level={1}>
+      المان های فرم
+    </Heading>
+    <Br />
+    <Br />
+
+    <Heading level={2}>
+      TextInput
+    </Heading>
+    <TextInput htmlElementName="text-name-01" label="این لیبل است" />
+    <Br />
+    <TextInput htmlElementName="text-name-0100" />
+    <Br />
+    <TextInput htmlElementName="text-name" label="این لیبل است" placeholder="متن مورد نظر خود را وارد کنید" />
+    <Br />
+    <TextInput htmlElementName="disable" label="این لیبل است" placeholder="متن مورد نظر خود را وارد کنید" disabled />
+    <Br />
+    <TextInput htmlElementName="with-desc" label="این لیبل است" placeholder="متن مورد نظر خود را وارد کنید" description="توضیحات کم و بیش" />
+    <Br />
+    <TextInput type="password" htmlElementName="pass-input" label="این لیبل است" />
+    <Br />
+    <TextInput type="password" htmlElementName="err-example" label="این لیبل است" errorMessage="ارور زیبا بود در این زمانه بلا" />
+    <Br />
+
+  </>
+);
+
+export default FormPage;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+// import { Link } from 'react-router-dom';
+import { Typography } from '../../../components';
+
+const {
+  Link,
+} = Typography;
+
+const HomePage = () => (
+  <>
+    <div><Link to="/components/button">Home Page</Link></div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+    <div>Home Page</div>
+  </>
+);
+
+export default HomePage;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Typography, Icon } from '../../../components';
+
+const { Heading } = Typography;
+
+const IconPage = () => (
+  <>
+    <Heading level={1}>
+      آیکون
+    </Heading>
+    <br />
+    <br />
+
+    <Heading level={2}>
+      نمونه آیکون پیشفرض
+    </Heading>
+    <Icon name="watch-later" />
+    <br />
+
+    <Heading level={2}>
+      نمونه آیکون با کامل ترین امکانات
+    </Heading>
+    <Icon name="watch-later" size="sm" color="green" />
+    <br />
+
+    <Heading level={2}>
+      آیکون در اندازه های متفاوت
+    </Heading>
+
+    <Heading level={3}>
+      sm size
+    </Heading>
+    <div>
+      <Icon name="watch-later" size="sm" color="gray" />
+      <Icon name="watch-later" size="md" color="gray" />
+      <Icon name="watch-later" size="lg" color="gray" />
+    </div>
+    <br />
+
+    <Heading level={3}>
+      md size (default)
+    </Heading>
+    <Icon name="watch-later" size="md" />
+    <br />
+
+    <Heading level={3}>
+      lg size
+    </Heading>
+    <Icon name="watch-later" size="lg" />
+    <br />
+
+  </>
+);
+
+export default IconPage;