react-jupiter 6.0.0-beta.1 → 6.0.0-beta.10

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

@@ -1,123 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

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

package/src/index.js

@@ -1,18 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,135 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-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(),
-  })),
-});