react-jupiter 5.12.0 → 6.0.0-beta.2

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Typography, ProductProperties, ProductOwner } from '../../../components';
+
+const { Heading } = Typography;
+
+const Container = styled.div`
+  margin: 8px;
+`;
+
+const ProductPage = () => (
+  <>
+    <Heading level={1}>
+      کامپوننت های product
+    </Heading>
+    <br />
+
+    <Heading level={2}>
+      product-properties
+    </Heading>
+    <br />
+    <Container>
+      <Heading level={3}>
+        single property
+      </Heading>
+      <ProductProperties list={[{ iconName: 'watch-later', text: 'watch text' }]} />
+    </Container>
+    <br />
+
+    <Container>
+      <Heading level={3}>
+        multiple property
+      </Heading>
+      <ProductProperties
+        list={[
+          { iconName: 'watch-later', text: 'متن زیبا' },
+          { iconName: 'alarm-off', text: 'متن دیگری' },
+          { iconName: 'aspect-ratio', text: 'و باز هم متن دیگری' },
+        ]}
+      />
+    </Container>
+    <br />
+
+    <Container>
+      <Heading level={3}>
+        colorfull property
+      </Heading>
+      <ProductProperties
+        list={[
+          { iconName: 'watch-later', text: 'متن زیبا' },
+          { iconName: 'alarm-off', text: 'متن دیگری' },
+          { iconName: 'aspect-ratio', text: 'و باز هم متن دیگری' },
+        ]}
+        color="default"
+      />
+      <hr />
+      <ProductProperties
+        list={[
+          { iconName: 'watch-later', text: 'متن زیبا' },
+          { iconName: 'alarm-off', text: 'متن دیگری' },
+          { iconName: 'aspect-ratio', text: 'و باز هم متن دیگری' },
+        ]}
+        color="darkBlue"
+      />
+    </Container>
+    <br />
+
+    <Container>
+      <Heading level={3}>
+        horizontal property
+      </Heading>
+      <ProductProperties
+        isHorizontal
+        list={[
+          { iconName: 'watch-later', text: 'متن زیبا' },
+          { iconName: 'alarm-off', text: 'متن دیگری' },
+          { iconName: 'aspect-ratio', text: 'و باز هم متن دیگری' },
+        ]}
+      />
+    </Container>
+    <br />
+
+    <Heading level={2}>
+      product-owner
+    </Heading>
+    <br />
+    <Container>
+      <Heading level={3}>
+        product-owner
+      </Heading>
+      <ProductOwner
+        name="انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی
+        انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی"
+        onClickFollowMe={() => {
+          window.console.log('Follow Me Button Clicked, and it will return true or false randomly');
+          return false;
+        }}
+        onClickConnectUs={() => { window.console.log('Connect Us Button Clicked'); }}
+        renderDescriptionLink={(element) => <Link to="/tosomewherenew">{element}</Link>}
+        renderTitledAvatarLink={(element) => <Link to="/tosomewhere">{element}</Link>}
+      />
+      <br />
+      <ProductOwner
+        name="دومی"
+        onClickFollowMe={() => {
+          window.console.log('Follow Me Button Clicked, and it will return true or false randomly');
+          return new Promise(
+            (resolve) => {
+              setTimeout(() => resolve(!Math.floor(Math.random() * 2)), 3000);
+            },
+          );
+        }}
+        onClickConnectUs={() => { window.console.log('Connect Us Button Clicked'); }}
+      />
+      <br />
+    </Container>
+    <br />
+
+  </>
+);
+
+export default ProductPage;

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Typography } from '../../../components';
+
+
+const {
+  Heading, Text, Paragraph, Link,
+} = Typography;
+
+const TypographyPage = () => (
+  <>
+    <div>
+      <div>Button</div>
+      <Heading>سلام</Heading>
+      <Heading level={1}>سلام</Heading>
+      <Heading size="md" level={1}>سلام</Heading>
+      <Heading size="sm" level={1}>سلام</Heading>
+      <hr />
+      <Heading size="lg" level={2}>سلام</Heading>
+      <Heading size="md" level={2}>سلام</Heading>
+      <Heading size="sm" level={2}>سلام</Heading>
+      <hr />
+      <Heading size="lg" level={3}>سلام</Heading>
+      <Heading size="md" level={3}>سلام</Heading>
+      <Heading size="sm" level={3}>سلام</Heading>
+      <hr />
+      <Heading level={4}>سلام</Heading>
+      <Heading size="md" level={4}>سلام</Heading>
+      <Heading size="sm" level={4}>سلام</Heading>
+      <hr />
+      <Heading size="lg" level={5}>سلام</Heading>
+      <Heading size="md" level={5}>سلام</Heading>
+      <Heading size="sm" level={5}>سلام</Heading>
+      <hr />
+      <Heading size="lg" level={6}>سلام</Heading>
+      <Heading size="md" level={6}>سلام</Heading>
+      <Heading size="sm" level={6}>سلام</Heading>
+      <div />
+      <Text size={16} strong>تکست ساده استرانگ</Text>
+      <div />
+      <Text size={11} bold>تکست ساده بولد</Text>
+      <div />
+      <Text emphasized color="white">تکست ساده</Text>
+      <div />
+      <Text color="red" underline>تکست ساده</Text>
+      <div />
+      <Text color="green">تکست ساده</Text>
+      <div />
+      <Text color="light">تکست ساده</Text>
+      <div />
+      <Text color="blue">تکست ساده</Text>
+      <div />
+      <Text underline>تکست ساده</Text>
+      <div />
+      <Text marked>آنجایی</Text>
+      <div />
+      <Text lineThrough underline>تکست میکس</Text>
+      <div />
+      <Text label>آنجایی</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text strong emphasized>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Link href={(element) => <a href="/">{element}</a>} linkContent="لینک مثلاً داخلی" />
+      <div />
+      <Link href="http://yahoo.com">تکست ساده لینک خارجی</Link>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text>تکست ساده</Text>
+      <div />
+      <Text subScript>نویسنده</Text>
+    </div>
+    <Paragraph>
+      طراحان معمولاً برای طراحی، ابتدا از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند
+      تا صرفاً به مشتری یا صاحب کار خود نشان دهند که
+      صفحه طراحی یا صفحه بندی شده بعد از اینکه متن
+      در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و
+      اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از
+      <Text marked>آنجایی</Text>
+      که طراحان عموماً
+      <Text subScript>نویسنده</Text>
+        متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان
+        حال کار آنها به نوعی وابسته به متن می‌باشد
+        آنها با استفاده از محتویات ساختگی،
+        صفحه گرافیکی خود را صفحه‌آرایی می‌کنند
+        تا مرحله طراحی و صفحه‌بندی را به پایان برند.
+    </Paragraph>
+    <Paragraph size={24}>
+      طراحان معمولاً برای طراحی، ابتدا از
+      متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفاً به مشتری
+      یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده
+      بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد
+      و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از
+      <Text supScript> نویسنده </Text>
+      که طراحان عموماً نویسنده متن نیستند
+      و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال
+      کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده
+      از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی
+      می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.
+    </Paragraph>
+    <Paragraph>
+      طراحان معمولاً برای طراحی، ابتدا از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند
+      تا صرفاً به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی
+      یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه
+      به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته
+      شده‌است. از آنجایی که طراحان عموماً نویسنده متن نیستند
+      و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال
+      کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده
+      از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی
+      می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.
+    </Paragraph>
+    <Paragraph>
+      طراحان معمولاً برای طراحی، ابتدا از متن‌های آزمایشی و بی‌معنی
+      استفاده می‌کنند تا صرفاً به مشتری یا صاحب کار خود نشان دهند که صفحه
+      طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه
+      به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است.
+      از آنجایی که طراحان عموماً نویسنده متن نیستند و وظیفه رعایت حق
+      تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به
+      متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود
+      را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.
+    </Paragraph>
+  </>
+);
+
+export default TypographyPage;

package/src/docs/globalStyle.js

@@ -0,0 +1,58 @@
+import styled, { createGlobalStyle } from 'styled-components';
+import IranSharpBoldWoff from './assets/fonts/iransharp_bold_web.woff';
+import IranSharpBoldWoff2 from './assets/fonts/iransharp_bold_web.woff2';
+import IranSharpRegularWoff from './assets/fonts/iransharp_regular_web.woff';
+import IranSharpRegularWoff2 from './assets/fonts/iransharp_regular_web.woff2';
+import IconMoonWoff from './assets/fonts/icomoon.woff';
+import FilesImgsWoff from './assets/fonts/filesImgs.woff';
+
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'IranSharp';
+    font-style: normal;
+    font-weight: bold;
+    src:
+      url(${IranSharpBoldWoff2}) format("woff2"),
+      url(${IranSharpBoldWoff}) format("woff");
+  }
+  @font-face {
+    font-family: 'IranSharp';
+    font-style: normal;
+    font-weight: 300;
+    src:
+      url(${IranSharpRegularWoff2}) format("woff2"),
+      url(${IranSharpRegularWoff}) format("woff");
+  }
+  @font-face {
+    font-family: 'Jupiterico';
+    font-style: normal;
+    font-weight: normal;
+    font-display: swap;
+    src: url(${IconMoonWoff}) format("woff");
+  }
+
+  @font-face {
+    font-family: 'JupiterfilesImgs';
+    font-style: normal;
+    font-weight: normal;
+    font-display: swap;
+    src: url(${FilesImgsWoff}) format("woff");
+  }
+
+  body {
+    box-sizing: border-box;
+    direction: rtl;
+    font-size: 13px;
+    height: 100%;
+  }
+
+`;
+
+export default GlobalStyle;
+
+export const ContentContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  margin-right: 180px;
+`;

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root'),
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

package/src/playground/index.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import styled from 'styled-components';
+import '../playground.css';
+import { Button } from '../components/button';
+import { Text } from '../components/typography/text';
+import { Heading } from '../components/typography/heading';
+import { Link } from '../components/typography/link';
+import { Avatar } from '../components/avatar';
+import { Accordion } from '../components/accordion';
+import { Table } from '../components/table';
+import { TitledAvatar } from '../components/titled-avatar';
+import { ShowDate } from '../components/show-date';
+import { ProductMenu } from '../components/product-menu';
+import { ProductProperties } from '../components/product-properties';
+import { ProgressBar } from '../components/progress-bar';
+import { NumericSummeryReport } from '../components/numeric-summery-report';
+
+const PlaygroundContainer = styled.div`
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+`;
+
+const Section = styled.section`
+  margin-bottom: 3rem;
+  padding: 2rem;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background-color: white;
+`;
+
+const SectionTitle = styled(Heading)`
+  margin-bottom: 1.5rem;
+  color: #333;
+`;
+
+const Playground = () => {
+  return (
+    <PlaygroundContainer>
+      <Section>
+        <SectionTitle level={2}>Typography</SectionTitle>
+        <Heading level={1}>Heading 1</Heading>
+        <Heading level={2}>Heading 2</Heading>
+        <Heading level={3}>Heading 3</Heading>
+        <Text>Regular text</Text>
+        <Text color="blue">Blue text</Text>
+        <Text color="red">Red text</Text>
+        <Link href="https://example.com">Example Link</Link>
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Buttons</SectionTitle>
+        <Button>Default Button</Button>
+        <Button styleType="secondary">Secondary Button</Button>
+        <Button styleType="tertiary">Tertiary Button</Button>
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Avatars</SectionTitle>
+        <Avatar src="https://via.placeholder.com/150" size="sm" />
+        <Avatar src="https://via.placeholder.com/150" size="md" />
+        <Avatar src="https://via.placeholder.com/150" size="lg" />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Titled Avatar</SectionTitle>
+        <TitledAvatar
+          title="John Doe"
+          avatar="https://via.placeholder.com/40"
+          avatarSize={40}
+          titleSize={14}
+        />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Progress Bar</SectionTitle>
+        <ProgressBar progress={50} color="#2196F3" height={8} />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Numeric Summary Report</SectionTitle>
+        <NumericSummeryReport
+          title="Total Users"
+          value={1234}
+          textColor="#000000"
+        />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Product Menu</SectionTitle>
+        <ProductMenu
+          items={[
+            { id: 1, label: 'Dashboard', icon: 'home' },
+            { id: 2, label: 'Profile', icon: 'user' },
+            { id: 3, label: 'Settings', icon: 'settings' },
+          ]}
+          onItemClick={(id) => console.log('Clicked:', id)}
+        />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Product Properties</SectionTitle>
+        <ProductProperties
+          properties={[
+            { id: 1, label: 'Category', value: 'Electronics', icon: 'category' },
+            { id: 2, label: 'Brand', value: 'Apple', icon: 'brand' },
+            { id: 3, label: 'Model', value: 'iPhone 13', icon: 'model' },
+          ]}
+          isHorizontal={false}
+          color="#000000"
+          iconColor="#666666"
+        />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Show Date</SectionTitle>
+        <ShowDate
+          date={new Date()}
+          format="YYYY-MM-DD"
+          fontSize={16}
+          color="#000000"
+        />
+      </Section>
+
+      <Section>
+        <SectionTitle level={2}>Table</SectionTitle>
+        <Table
+          columns={[
+            { id: 'name', label: 'Name' },
+            { id: 'age', label: 'Age' },
+            { id: 'city', label: 'City' },
+          ]}
+          data={[
+            { id: 1, name: 'John Doe', age: 30, city: 'New York' },
+            { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+            { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' },
+          ]}
+        />
+      </Section>
+    </PlaygroundContainer>
+  );
+};
+
+export default Playground; 

package/src/playground.css

@@ -0,0 +1,26 @@
+body {
+  direction: rtl;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  outline: none;
+  box-sizing: border-box;
+}
+
+ul, li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.App {
+  text-align: right;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+} 

package/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost'
+    // [::1] is the IPv6 localhost address.
+    || window.location.hostname === '[::1]'
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    || window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service '
+              + 'worker. To learn more, visit https://bit.ly/CRA-PWA',
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all '
+                  + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404
+        || (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.',
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister();
+    });
+  }
+}

package/src/setupTests.js

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import { configure } from '@testing-library/react';
+import 'jest-styled-components';
+
+// Configure React Testing Library
+configure({ 
+  testIdAttribute: 'data-testid',
+  throwSuggestions: true
+});
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});