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

package/src/components/progress-bar/index.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ProgressBar as Bar, Names, Numbers } from './index.styles';
-import { toPersianNumber } from '../utils/numbers';
-import Icon from '../icon';
-
-const ProgressBar = ({ width, labels, points }) => {
-  const percentWidth = (width * 100) / points.colleague;
-
-  return (
-    <>
-      <Names points={points}>
-        {labels.map((label, key) => (
-          <span key={key}>
-            {label}
-            <Icon name="arrow-drop-down" size="sm" />
-          </span>
-        ))}
-      </Names>
-      <Bar width={percentWidth}>
-        <div className="filled">
-          <span>
-            امتیاز شما:
-            {toPersianNumber(width, {})}
-          </span>
-        </div>
-      </Bar>
-      <Numbers points={points}>
-        <span>۰</span>
-        <span>{toPersianNumber(points.partner)}</span>
-        <span>{toPersianNumber(points.colleague)}</span>
-      </Numbers>
-    </>
-  );
-};
-
-ProgressBar.propTypes = {
-  width: PropTypes.number.isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  points: PropTypes.instanceOf({
-    partner: PropTypes.number,
-    colleague: PropTypes.number,
-  }).isRequired,
-};
-
-export default ProgressBar;

package/src/components/progress-bar/index.stories.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import ProgressBar from './index';
-
-export default {
-  title: 'Components/ProgressBar',
-  component: ProgressBar,
-  argTypes: {
-    width: {
-      control: 'number',
-      description: 'Current progress value',
-    },
-    labels: {
-      control: 'array',
-      description: 'Labels for different thresholds',
-    },
-    points: {
-      control: 'object',
-      description: 'Object containing partner and colleague threshold points',
-    },
-  },
-};
-
-const Template = (args) => <ProgressBar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  width: 50,
-  labels: ['Label 1', 'Label 2'],
-  points: {
-    partner: 75,
-    colleague: 100,
-  },
-};

package/src/components/progress-bar/index.styles.js

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-import defaultTheme from '../themes';
-
-export const ProgressBar = styled.div`
-    background-color: rgb(167, 167, 167);
-    color: rgb(68, 68, 68);
-    height: 20px;
-    border-radius: 16px;
-
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-
-    & div.filled {
-        min-width: 50px;
-        max-width: 100%;
-        width: ${(props) => props.width}%;
-        height: 20px;
-        background: rgb(80, 89, 117);
-        border-radius: 16px;
-        display: flex;
-        align-items: center;
-        @media only screen and (min-width: ${defaultTheme.breakpoints.sm}px) {
-            font-size: 15px;
-        }
-        @media only screen and (max-width: ${defaultTheme.breakpoints.sm - 1}px) {
-            font-size: 8px;
-        }
-        font-weight: bold;
-        color: #fff;
-        justify-content: center;
-        float: right;
-      }
-    }
-`;
-
-export const Names = styled.div`
-    display: flex;
-    justify-content: space-between;
-    direction: rtl;
-    position: relative;
-    width: 100%;
-    font-family: 'IranSharp';
-    & span > i {
-        display: block;
-    }
-    & span:first-child {
-        position: relative;
-        right: ${(props) => ((props.points.partner * 100) / props.points.colleague) - 2}%;
-    }
-`;
-
-export const Numbers = styled.div`
-    display: flex;
-    justify-content: space-between;
-    direction: rtl;
-    font-family: 'IranSharp';
-    position: relative;
-    & span:nth-child(2) {
-        position: absolute;
-        right: ${(props) => (props.points.partner * 100) / props.points.colleague}%
-    }
-`;

package/src/components/responsive/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useMediaQuery } from 'react-responsive';
-
-const Responsive = (props) => {
-  const { option, children } = props;
-  const { isDefault } = option;
-  const generateQueryObject = () => {
-    const { greaterThan, lessThan } = option;
-    let query;
-    if (greaterThan !== undefined && lessThan !== undefined) {
-      query = { minWidth: greaterThan, maxWidth: lessThan };
-    } else if (greaterThan !== undefined) {
-      query = { minWidth: greaterThan };
-    } else {
-      query = { maxWidth: lessThan };
-    }
-    return query;
-  };
-
-  const screen = useMediaQuery(generateQueryObject());
-  return ((isDefault || screen) && <>{children}</>);
-};
-
-Responsive.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  option: PropTypes.shape({
-    lessThan: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    greaterThan: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    isDefault: PropTypes.bool,
-  }).isRequired,
-};
-
-export default Responsive;

package/src/components/show-date/index.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Text } from '../typography';
-import { convertToJalaali } from '../utils/date';
-import { englishNumberToPersianInString } from '../utils/numbers';
-
-const ShowDate = ({ fontSize = 12, color = 'default', date }) => (
-  <Text size={fontSize} color={color} data-test="show-date">
-    {englishNumberToPersianInString(convertToJalaali(date, 'dddd jD jMMMM jYYYY ساعت HH:mm'))}
-  </Text>
-);
-
-ShowDate.propTypes = {
-  date: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]).isRequired,
-  fontSize: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  color: PropTypes.oneOf(['default', 'red', 'green', 'blue', 'yellow', 'white', 'darkBlue', 'gray']),
-};
-
-export default ShowDate;

package/src/components/show-date/index.stories.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import ShowDate from './index';
-
-export default {
-  title: 'Components/ShowDate',
-  component: ShowDate,
-  argTypes: {
-    date: {
-      control: 'date',
-      description: 'Date to display',
-    },
-    format: {
-      control: 'text',
-      description: 'Date format string',
-    },
-    fontSize: {
-      control: 'number',
-      description: 'Font size in pixels',
-    },
-    color: {
-      control: 'color',
-      description: 'Text color',
-    },
-  },
-};
-
-const Template = (args) => <ShowDate {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  date: new Date('2024-03-10'),
-  format: 'YYYY-MM-DD',
-  fontSize: 16,
-  color: '#000000',
-};
-
-export const CustomFormat = Template.bind({});
-CustomFormat.args = {
-  date: new Date('2024-03-10'),
-  format: 'MMM DD, YYYY',
-  fontSize: 16,
-  color: '#000000',
-};
-
-export const CustomStyle = Template.bind({});
-CustomStyle.args = {
-  date: new Date('2024-03-10'),
-  format: 'YYYY-MM-DD',
-  fontSize: 24,
-  color: '#2196F3',
-};

package/src/components/show-date/index.style.js

@@ -1 +0,0 @@
-

package/src/components/show-date/index.test.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import 'jest-styled-components';
-
-import ShowDate from './index';
-import findByTestAtrr from '../utils/test';
-
-const setupShallow = (props = {}) => (
-  shallow(
-    <ShowDate
-      date={props.date}
-      dateFormat={props.dateFormat}
-      {...props}
-    />,
-  )
-);
-
-describe('ShowDate component', () => {
-  it('should render correctly', () => {
-    const component = setupShallow({ date: new Date() });
-    const DateBookmark = findByTestAtrr(component, 'show-date');
-    expect(DateBookmark.length).toBe(1);
-  });
-});

package/src/components/spacing/core.js

@@ -1,106 +0,0 @@
-import styled from 'styled-components';
-
-// Helper to add units if needed
-const addPxIfNeeded = (value) => (typeof value === 'number' ? `${value}px` : value);
-
-export const _m = (values, theme) => {
-  if (!values || !theme?.spacing) return ''; // Check theme.spacing exists
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return ''; // Handle missing key
-  return `margin: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _mx = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  const formattedValue = addPxIfNeeded(spacingValue);
-  return `margin-left: ${formattedValue}; margin-right: ${formattedValue};`;
-};
-
-export const _my = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  const formattedValue = addPxIfNeeded(spacingValue);
-  return `margin-top: ${formattedValue}; margin-bottom: ${formattedValue};`;
-};
-
-export const _mt = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `margin-top: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _mr = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `margin-right: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _mb = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `margin-bottom: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _ml = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `margin-left: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _p = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `padding: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _px = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  const formattedValue = addPxIfNeeded(spacingValue);
-  return `padding-left: ${formattedValue}; padding-right: ${formattedValue};`;
-};
-
-export const _py = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  const formattedValue = addPxIfNeeded(spacingValue);
-  return `padding-top: ${formattedValue}; padding-bottom: ${formattedValue};`;
-};
-
-export const _pt = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `padding-top: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _pr = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `padding-right: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _pb = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `padding-bottom: ${addPxIfNeeded(spacingValue)};`;
-};
-
-export const _pl = (values, theme) => {
-  if (!values || !theme?.spacing) return '';
-  const spacingValue = theme.spacing[values];
-  if (spacingValue === undefined) return '';
-  return `padding-left: ${addPxIfNeeded(spacingValue)};`;
-}; 

package/src/components/spacing/index.js

@@ -1,10 +0,0 @@
-import Margin from './margin';
-import Padding from './padding';
-
-export { default as Margin } from './margin';
-export { default as Padding } from './padding';
-
-export default {
-  Margin,
-  Padding,
-};

package/src/components/spacing/margin/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { _m, _mx, _my, _mt, _mr, _mb, _ml } from '../core';
-import { ThemeProvider } from 'styled-components';
-import defaultTheme from '../../themes';
-
-export const Margin = styled.div`
-  ${({ inline }) => inline && 'display: inline-block;'}
-  ${({ all, theme }) => _m(all, theme)}
-  ${({ horizontal, theme }) => _mx(horizontal, theme)} 
-  ${({ vertical, theme }) => _my(vertical, theme)} 
-  ${({ top, theme }) => _mt(top, theme)} 
-  ${({ right, theme }) => _mr(right, theme)} 
-  ${({ bottom, theme }) => _mb(bottom, theme)} 
-  ${({ left, theme }) => _ml(left, theme)} 
-`;
-
-Margin.displayName = 'Margin';
-
-const Margined = (props) => (
-  <ThemeProvider theme={defaultTheme}>
-    <Margin {...props} />
-  </ThemeProvider>
-);
-
-export default Margined;

package/src/components/spacing/padding/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { _p, _px, _py, _pt, _pr, _pb, _pl } from '../core';
-import { ThemeProvider } from 'styled-components';
-import defaultTheme from '../../themes';
-
-export const Padding = styled.div`
-  ${({ inline }) => inline && 'display: inline-block;'}
-  ${({ all, theme }) => _p(all, theme)}
-  ${({ horizontal, theme }) => _px(horizontal, theme)} 
-  ${({ vertical, theme }) => _py(vertical, theme)} 
-  ${({ top, theme }) => _pt(top, theme)} 
-  ${({ right, theme }) => _pr(right, theme)} 
-  ${({ bottom, theme }) => _pb(bottom, theme)} 
-  ${({ left, theme }) => _pl(left, theme)} 
-`;
-
-Padding.displayName = 'Padding';
-
-const Paddinged = (props) => (
-  <ThemeProvider theme={defaultTheme}>
-    <Padding {...props} />
-  </ThemeProvider>
-);
-
-export default Paddinged;

package/src/components/storybook.css

@@ -1,54 +0,0 @@
-/* add fonts for storybook */
-@font-face {
-  font-family: 'IranSharp';
-  font-style: normal;
-  font-weight: bold;
-  src:
-    url('../docs/assets/fonts/iransharp_bold_web.woff2') format("woff2"),
-    url('../docs/assets/fonts/iransharp_bold_web.woff') format("woff");
-}
-@font-face {
-  font-family: 'IranSharp';
-  font-style: normal;
-  font-weight: 300;
-  src:
-    url('../docs/assets/fonts/iransharp_regular_web.woff2') format("woff2"),
-    url('../docs/assets/fonts/iransharp_regular_web.woff') format("woff");
-}
-@font-face {
-  font-family: 'Jupiterico';
-  font-style: normal;
-  font-weight: normal;
-  font-display: swap;
-  src: url('../docs/assets/fonts/icomoon.woff') format("woff");
-}
-
-@font-face {
-  font-family: 'JupiterfilesImgs';
-  font-style: normal;
-  font-weight: normal;
-  font-display: swap;
-  src: url('../docs/assets/fonts/filesImgs.woff') format("woff");
-}
-
-body {
-  direction: rtl;
-}
-
-* {
-  outline: none;
-}
-
-ul, li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-};
-
-/* show-info page should be ltr and show-info button doesnt cover the main component page*/
-.info__overlay {
-  direction: ltr;
-}
-.sb-show-main {
-	margin-top: 35px;
-}

package/src/components/table/actionCell.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import Button from '../button';
-import { ActionCellContainer, ActionsContainer } from './index.style';
-
-type Props = {
-  callToActions: [{
-    props?: {},
-    text: string,
-  }]
-};
-
-function ActionCell({ callToActions }: Props) {
-  return (
-    <td>
-      <ActionCellContainer>
-        <Button
-          {...callToActions[0].props}
-          htmlType="button"
-          mainColor="blue"
-          styleType="secondary"
-          size="sm"
-          wide
-        >
-          {callToActions[0].text}
-        </Button>
-
-        {callToActions.length > 1 && (
-          <>
-            <ActionsContainer>
-              {callToActions.map((item, index) => {
-                if (index === 0) {
-                  return null;
-                }
-                return (
-                  <Button
-                    key={item.text}
-                    {...item.props}
-                    htmlType="button"
-                    mainColor="blue"
-                    styleType="tertiary"
-                    size="sm"
-                    wide
-                  >
-                    {item.text}
-                  </Button>
-                );
-              })}
-            </ActionsContainer>
-
-          </>
-        )}
-      </ActionCellContainer>
-    </td>
-  );
-}
-
-export default ActionCell;

package/src/components/table/index.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import TableHeaderRow from './tableHeaderRow';
-import TableRow from './tableRow';
-import GlobalStyle from '../globalStyle';
-import { TableContainer } from './index.style';
-import theme from './theme';
-
-type Props = {
-  columns: [
-    {
-      key: string,
-      label: string,
-      dataType: 'text' | 'action' | 'node',
-    }
-  ],
-  data: [
-    {
-      key: string,
-    },
-  ],
-};
-
-function Table(props: Props) {
-  const { columns, data } = props;
-  const actionColumnIndexNumber = columns.findIndex((columnItem) => columnItem.dataType === 'action');
-  const hasActionColumn = !(actionColumnIndexNumber === -1);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <TableContainer
-        isResponsiveView={(window && window.innerWidth < 768)}
-        data-test="jupiter-table"
-        actionColumnNumber={hasActionColumn ? actionColumnIndexNumber + 1 : null}
-      >
-        <table>
-          <thead>
-            <TableHeaderRow columns={columns} />
-          </thead>
-          <tbody>
-            {data.map((rowItem) => (
-              <TableRow
-                key={rowItem.key}
-                rowItem={rowItem}
-                columns={columns}
-              />
-            ))}
-          </tbody>
-        </table>
-      </TableContainer>
-    </ThemeProvider>
-  );
-}
-
-export default Table;