react-jupiter 6.0.0-beta.2 → 6.0.0-beta.4

package/src/components/accordion/index.stories.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import Accordion from '.';
-
-const items = [
-    {
-        title: 'عنوان اول',
-        mode: 'dark',
-        key: 'acc-1',
-        status: true,
-        collapse: false,
-        bold: false,
-        meta: <span>۳/۰</span>,
-        body: <div>
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-            </div>,
-    },
-    {
-        title: 'عنوان دوم',
-        mode: 'white',
-        key: 'acc-2',
-        status: false,
-        bold: true,
-        collapse: true,
-        meta: <span>حداقل امتیاز: ۵۰</span>,
-        body: <div>
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-            </div>,
-    },
-    {
-        title: 'عنوان سوم',
-        mode: 'white',
-        key: 'acc-3',
-        status: false,
-        collapse: true,
-        bold: false,
-        meta: <span>حداقل امتیاز: ۵۰</span>,
-        body: <div>
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-            </div>,
-    },
-];
-
-export default {
-  title: 'Components/Accordion',
-  component: Accordion,
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'Array of accordion items',
-    },
-  },
-};
-
-const Template = (args) => <Accordion {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  items,
-};
-
-export const WithCustomStyling = Template.bind({});
-WithCustomStyling.args = {
-  items: [
-    { title: 'Styled Item 1', content: 'Styled content 1' },
-    { title: 'Styled Item 2', content: 'Styled content 2' },
-  ],
-  style: { border: '1px solid blue', borderRadius: '8px' },
-};
-
-export const SingleItemExpanded = Template.bind({});
-SingleItemExpanded.args = {
-  items: [
-    { title: 'Expanded Item', content: 'This item starts expanded', expanded: true },
-  ],
-};
-
-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  items: [
-    { title: 'Item with Icon', content: 'Content for item with icon', icon: 'info' },
-  ],
-};

package/src/components/accordion/panel.js

@@ -1,41 +0,0 @@
-import React, { useRef } from 'react';
-import { isMobile } from '../utils/detectMobile';
-import { Panel as StyledPanel } from './index.styles';
-import Icon from '../icon';
-
-const Panel = ({ item }) => {
-  const panelRef = useRef();
-
-  const handleClick = () => {
-    const icon = document.getElementById(`icon-${item.key}`);
-
-    if (panelRef.current.classList.contains('collapse')) {
-      panelRef.current.classList.remove('collapse');
-      icon.classList.remove('new-icon-arrow-drop-down');
-      icon.classList.add('new-icon-arrow-drop-up');
-    } else {
-      panelRef.current.classList.add('collapse');
-      icon.classList.remove('new-icon-arrow-drop-up');
-      icon.classList.add('new-icon-arrow-drop-down');
-    }
-  };
-
-  return (
-    <StyledPanel className={item.mode} status={item.status} bold={item.bold}>
-      <a className="panel-heading" onClick={() => handleClick(item.key)}>
-        <h4 className="panel-title">
-          <Icon name={item.status ? 'check-circle' : 'error'} size="sm" color={item.status ? 'green' : 'gray'} />
-          <span>{item.title}</span>
-        </h4>
-        <div>
-          {!isMobile && item.meta}
-          <Icon id={`icon-${item.key}`} name="arrow-drop-down" size="sm" color={item.status ? 'white' : 'darkBlue'} />
-        </div>
-      </a>
-      <div id={item.key} ref={panelRef} className={`panel-collapse ${item.collapse && 'collapse'}`}>
-        <div className="panel-body">{item.body}</div>
-      </div>
-    </StyledPanel>
-  );
-};
-export default Panel;

package/src/components/avatar/index.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../globalStyle';
-import Image from './index.styles';
-import avatarTheme from './theme';
-
-const defaultImageUrl = 'https://static.evand.net/assets/images/defaults/avatar.svg';
-
-const Avatar = ({
-  alt = 'آواتار',
-  size = 'md',
-  sizeMobile = 'md',
-  src = defaultImageUrl,
-  round = false,
-  ...rest
-}) => (
-  <ThemeProvider theme={avatarTheme}>
-    <GlobalStyle />
-    <Image
-      src={src}
-      alt={alt}
-      size={size}
-      sizeMobile={sizeMobile}
-      data-test="avatar"
-      round={round}
-      onError={(e) => (e.target.onerror = null, e.target.src = defaultImageUrl)}
-      {...rest}
-    />
-  </ThemeProvider>
-);
-
-Avatar.propTypes = {
-  src: PropTypes.string,
-  alt: PropTypes.string,
-  round: PropTypes.bool,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
-  sizeMobile: PropTypes.oneOf(['lg', 'md', 'sm']),
-};
-
-export default Avatar;

package/src/components/avatar/index.stories.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import Avatar from './index';
-
-export default {
-  title: 'Components/Avatar',
-  component: Avatar,
-  argTypes: {
-    avatar: {
-      control: 'text',
-      description: 'URL of the avatar image',
-    },
-    size: {
-      control: 'text',
-      description: 'Size of the avatar',
-    },
-    showTooltip: {
-      control: 'boolean',
-      description: 'Whether to show a tooltip on hover',
-    },
-    tooltipText: {
-      control: 'text',
-      description: 'Text to display in the tooltip',
-    },
-  },
-};
-
-const Template = (args) => <Avatar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  avatar: 'https://via.placeholder.com/40',
-  size: "md",
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  avatar: 'https://via.placeholder.com/40',
-  size: "sm",
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
-  avatar: 'https://via.placeholder.com/60',
-  size: "md",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  avatar: 'https://via.placeholder.com/80',
-  size: "lg",
-};
-
-export const WithTooltip = Template.bind({});
-WithTooltip.args = {
-  avatar: 'https://via.placeholder.com/40',
-  size: "md",
-  showTooltip: true,
-  tooltipText: 'User Avatar',
-};

package/src/components/avatar/index.styles.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import defaultTheme from '../themes';
-
-const Image = styled.img`
-  font-family: 'IranSharp';
-  width: ${({ theme, size }) => `${theme.size[size]}px`};
-  height: ${({ theme, size }) => `${theme.size[size]}px`};
-  @media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
-    width: ${({ theme, sizeMobile }) => `${theme.size[sizeMobile]}px`};
-    height: ${({ theme, sizeMobile }) => `${theme.size[sizeMobile]}px`};
-  }
-  border-radius: ${({ theme, round }) => (round ? '50%' : `${theme.borderRadius}px`)};
-  display: block;
-  background-size: cover;
-`;
-
-export default Image;

package/src/components/avatar/index.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test-utils';
-import Avatar from './index';
-
-describe('Avatar', () => {
-  it('renders avatar component', () => {
-    render(<Avatar data-testid="avatar" />);
-    expect(screen.getByTestId('avatar')).toBeInTheDocument();
-  });
-});

package/src/components/avatar/theme.js

@@ -1,13 +0,0 @@
-import defaultTheme from '../themes';
-
-const avatarTheme = {
-  borderRadius: defaultTheme.borderRadius.low,
-  size: {
-    lg: 128,
-    md: 64,
-    sm: 32,
-    xs: 24,
-  },
-};
-
-export default avatarTheme;