@pareto-engineering/design-system 5.3.0 → 5.5.0

package/dist/es/utils/formatting.js

@@ -1,117 +0,0 @@
-export const DATE_FORMATS = {
-  HUMAN_READABLE: 'human_readable',
-  HUMAN_READABLE_WITH_TIME: 'human_readable_with_time',
-  TIME: 'time',
-  DATETIME: 'datetime',
-  CHART_DATE: 'chart_date',
-  CHART_TIME: 'chart_time',
-  WEEKDAY_DATE: 'weekday_date',
-  DAY_VIEW: 'day_view'
-};
-const isValidDate = date => date instanceof Date && !Number.isNaN(date);
-const isTimeSliceFormat = input => {
-  const timeSliceRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
-  return timeSliceRegex.test(input);
-};
-const createTimeFromSlice = timeSlice => {
-  const [hours, minutes] = timeSlice.split(':').map(Number);
-  const date = new Date();
-  date.setHours(hours, minutes, 0, 0);
-  return date;
-};
-const format12Hour = date => {
-  const hour = date.getHours();
-  const ampm = hour >= 12 ? 'PM' : 'AM';
-  const hour12 = hour % 12 || 12;
-  return `${hour12} ${ampm}`;
-};
-const shouldShowYear = date => {
-  const currentYear = new Date().getFullYear();
-  return date.getFullYear() !== currentYear;
-};
-export const formatTime = seconds => {
-  if (!seconds) return '0s';
-  const hours = Math.floor(seconds / 3600);
-  const minutes = Math.floor(seconds % 3600 / 60);
-  const remainingSeconds = Math.floor(seconds % 60);
-  const parts = [];
-  if (hours > 0) parts.push(`${hours}h`);
-  if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
-  if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
-
-  // Cater for decimal seconds
-  if (parts.length === 0) return '0s';
-  return parts.join(' ');
-};
-const formatStrategies = {
-  [DATE_FORMATS.CHART_DATE]: date => {
-    const monthDay = date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      timeZone: 'UTC'
-    });
-    return shouldShowYear(date) ? `${monthDay} ${date.getFullYear()}` : monthDay;
-  },
-  [DATE_FORMATS.CHART_TIME]: date => format12Hour(date),
-  [DATE_FORMATS.HUMAN_READABLE]: date => date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    timeZone: 'UTC'
-  }),
-  [DATE_FORMATS.HUMAN_READABLE_WITH_TIME]: date => date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    timeZone: 'UTC'
-  }),
-  default: date => date.toISOString()
-};
-export const parseDate = input => {
-  if (input instanceof Date) return input;
-  if (typeof input === 'number') return new Date(input);
-  if (typeof input === 'string') {
-    if (isTimeSliceFormat(input)) {
-      return createTimeFromSlice(input);
-    }
-    const parsed = new Date(input);
-    if (isValidDate(parsed)) return parsed;
-    const timestamp = parseInt(input, 10);
-    if (!Number.isNaN(timestamp)) {
-      const date = new Date(timestamp * 1000);
-      if (isValidDate(date)) return date;
-    }
-  }
-  return null;
-};
-export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
-  try {
-    if (typeof input === 'string' && isTimeSliceFormat(input)) {
-      if (format === DATE_FORMATS.CHART_TIME || format === DATE_FORMATS.TIME) {
-        const date = createTimeFromSlice(input);
-        if (format === DATE_FORMATS.CHART_TIME) {
-          return format12Hour(date);
-        }
-        return date.toLocaleTimeString('en-US', {
-          hour: '2-digit',
-          minute: '2-digit',
-          timeZone: 'UTC'
-        });
-      }
-      return input;
-    }
-    const date = parseDate(input);
-    if (!date && (typeof input === 'string' || typeof input === 'number')) {
-      return input.toString();
-    }
-    const formatStrategy = formatStrategies[format] || formatStrategies.default;
-    return formatStrategy(date);
-  } catch (error) {
-    return 'Invalid Date';
-  }
-};
-export const snakeCaseToTitleCase = word => {
-  const result = word.replace(/([A-Z])/g, ' $1');
-  return result.charAt(0).toUpperCase() + result.slice(1);
-};

package/dist/es/utils/hooks/index.js

@@ -1,3 +0,0 @@
-export { default as useWindowSize } from "./useWindowSize";
-export { default as useDynamicPosition } from "./useDynamicPosition";
-export { default as useOutsideClick } from "./useOutsideClick";

package/dist/es/utils/hooks/useDynamicPosition.js

@@ -1,83 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import throttle from 'lodash/throttle';
-import useWindowSize from "./useWindowSize";
-const verticalPositions = ['top', 'bottom'];
-const horizontalPositions = ['left', 'right'];
-const findCompatiblePositions = (primary, secondaryArray) => {
-  if (verticalPositions.includes(primary)) {
-    return secondaryArray.filter(secondary => horizontalPositions.includes(secondary));
-  }
-  if (horizontalPositions.includes(primary)) {
-    return secondaryArray.filter(secondary => verticalPositions.includes(secondary));
-  }
-  return [];
-};
-const useDynamicPosition = ({
-  elementRef,
-  parentRef,
-  preferredPrimaryOrder,
-  preferredSecondaryOrder,
-  // offsetYPx,
-  offsetXPx,
-  throttleMs = 200
-}) => {
-  const isClient = typeof window === 'object';
-  const {
-    height: currentHeight,
-    width: currentWidth
-  } = useWindowSize();
-  const [primaryPosition, setPrimaryPosition] = useState(preferredPrimaryOrder[0]);
-  const compatibleSecondaryPositions = useMemo(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
-  const [secondaryPosition, setSecondaryPosition] = useState(compatibleSecondaryPositions[0]);
-  const handle = useCallback(throttle(() => {
-    const parentNode = parentRef?.current;
-    const elementNode = elementRef?.current;
-    const {
-      top: parentTop,
-      bottom: parentBottom,
-      right: parentRight,
-      left: parentLeft
-    } = parentNode?.getBoundingClientRect() || {};
-    const {
-      width: elementWidth,
-      height: elementHeight
-    } = elementNode?.getBoundingClientRect() || {};
-    const availablePositions = {
-      top: parentTop >= elementHeight,
-      bottom: currentHeight - parentBottom >= elementHeight,
-      right: parentRight >= elementWidth,
-      left: currentWidth - parentLeft >= elementWidth
-    };
-    for (let i = 0; i < preferredPrimaryOrder.length; i += 1) {
-      const position = preferredPrimaryOrder[i];
-      if (availablePositions[position]) {
-        setPrimaryPosition(position);
-        break;
-      }
-    }
-    for (let i = 0; i < compatibleSecondaryPositions.length; i += 1) {
-      const position = compatibleSecondaryPositions[i];
-      if (availablePositions[position]) {
-        setSecondaryPosition(position);
-        break;
-      }
-    }
-  }, throttleMs), [elementRef, offsetXPx, throttleMs]);
-  useEffect(() => {
-    if (!isClient) {
-      return false;
-    }
-    handle();
-    window.addEventListener('scroll', handle);
-    window.addEventListener('resize', handle);
-    return () => {
-      window.removeEventListener('scroll', handle);
-      window.removeEventListener('resize', handle);
-    };
-  }, [handle]);
-  return {
-    primaryPosition,
-    secondaryPosition
-  };
-};
-export default useDynamicPosition;

package/dist/es/utils/hooks/useOutsideClick.js

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-const useOutsideClick = (ref, callback) => {
-  // const ref = useRef(null)
-
-  useEffect(() => {
-    const handleClickOutside = event => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [callback]);
-};
-export default useOutsideClick;

package/dist/es/utils/hooks/useWindowSize.js

@@ -1,22 +0,0 @@
-import { useCallback, useState, useEffect } from 'react';
-import debounce from 'lodash/debounce';
-const useWindowSize = (debounceMs = 700) => {
-  const isClient = typeof window === 'object';
-  const getSize = () => ({
-    width: isClient ? window.innerWidth : undefined,
-    height: isClient ? window.innerHeight : undefined
-  });
-  const [windowSize, setWindowSize] = useState(getSize);
-  const handle = useCallback(debounce(() => {
-    setWindowSize(getSize());
-  }, debounceMs));
-  useEffect(() => {
-    if (!isClient) {
-      return false;
-    }
-    window.addEventListener('resize', handle);
-    return () => window.removeEventListener('resize', handle);
-  }, [getSize, handle, isClient]);
-  return windowSize;
-};
-export default useWindowSize;

package/dist/es/utils/index.js

@@ -1,3 +0,0 @@
-export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
-export { formatTime, formatDate, DATE_FORMATS, parseDate, snakeCaseToTitleCase } from "./formatting";
-export { applyCharacterLimit } from "./applyCharacterLimit";

package/jest.config.js

@@ -1,28 +0,0 @@
-/*
- * For a detailed explanation regarding each configuration property, visit:
- * https://jestjs.io/docs/en/configuration.html
- */
-// const esModules = ['@storybook/addon-docs', 'yay'].join('|');
-
-module.exports = {
-  cache           :false,
-  // https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files
-  moduleNameMapper:{
-    '^.+\\.(css|scss)$'                :'<rootDir>/tests/staticStub.js',
-    '^.+\\.(mdx)$'                     :'<rootDir>/tests/staticStub.js',
-    'react-markdown'                   :'<rootDir>/tests/emptyMock.js',
-    'remark-math'                      :'<rootDir>/tests/emptyMock.js',
-    'rehype-mathjax'                   :'<rootDir>/tests/emptyMock.js',
-    // https://jestjs.io/docs/webpack#mocking-css-modules
-    '^@pareto-engineering/bem$'        :'identity-obj-proxy',
-    '^@pareto-engineering/bem/exports$':'identity-obj-proxy',
-  },
-  transform:{
-    '^.+\\.[tj]sx?$':'babel-jest',
-    '^.+\\.mdx$'    :'@storybook/addon-docs/jest-transform-mdx',
-  },
-  setupFiles     :['<rootDir>/tests/test-setup.js'],
-  testEnvironment:'jsdom',
-  // transformIgnorePatterns: [`node_modules/(?!${esModules})`],
-  globalSetup    :'<rootDir>/tests/global-setup.js',
-}

package/src/stories/Introduction.stories.mdx

@@ -1,193 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

package/src/stories/StyleGuide/Sprites.stories.mdx

@@ -1,25 +0,0 @@
-import { Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
-
-import { SVG } from '../../ui'
-
-import { spritesMap } from './helpers.js'
-
-<Meta title="StyleGuide/Sprites" />
-
-
-# Sprites
-
-<div className="y-paragraph x-main3">
-  <Canvas>
-    { spritesMap.map((item) =>
-      item.targets.map((target) => 
-      <SVG
-        width="200"
-        height="200"
-        sprite={item.sprite}
-        target={target}
-        key={target}
-      />
-    ))}
-  </Canvas>
-</div>

package/src/stories/StyleGuide/ai-icons.stories.mdx

@@ -1,27 +0,0 @@
-import { Meta,  } from '@storybook/addon-docs/blocks';
-
-import {
-  charList
-} from './helpers';
-
-<Meta title="StyleGuide/Icons/ai" />
-
-# AI Icons
-
-The icons are defined in [@pareto-engineering/assets/fonts/ai-icons.woff](https://github.com/HelloPareto/front/tree/development/packages/assets/fonts),
-imported and configured in [@pareto-engineering/styles/src/mixins/_font.scss](https://github.com/HelloPareto/front/blob/development/packages/styles/src/mixins/_font.scss).
-
-To add more fonts, connect to [glyphter](https://glyphter.com).
-
-<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>
-{ charList.map(letter =>
-<div>
-<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>
-{ letter }
-</div>
-<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'ai-icons', 'font-size':'2em' }}>
-{ letter }
-</div>
-</div>
-) }
-</div>

package/src/stories/StyleGuide/colors.stories.mdx

@@ -1,73 +0,0 @@
-import { Meta, ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
-
-import { 
-  brandMap, 
-  modalsMap, 
-  uiMap ,
-  smMap,
-  monochromeMap
-} from './helpers';
-
-<Meta title="StyleGuide/Colors" />
-
-# Colors
-
-The colors are defined in [@pareto-engineering/styles/src/swatch](https://github.com/HelloPareto/styles/tree/main/src/swatch) and make use of the open source library [@aztlan/swatch](https://github.com/AztlanEngineering/swatch).
-
-## Colorschemes
-
-Color are collections of colors that put together, make a UI theme.
-
-### Light
-
- <ColorPalette>
-   { brandMap.map((e,i) =>
-     <ColorItem
-       key={i}
-       { ...e }
-     />
-   ) }
- </ColorPalette>
- <ColorPalette>
-   { modalsMap.map((e,i) =>
-     <ColorItem
-       key={i}
-       { ...e }
-     />
-   ) }
- </ColorPalette>
- <ColorPalette>
-   { uiMap.map((e,i) =>
-     <ColorItem
-       key={i}
-       { ...e }
-     />
-   ) }
- </ColorPalette>
-
-
-## Palettes
-
-Palettes are collections of colors that are independent of colorschemes. 
-
-### Monochrome
-
- <ColorPalette>
-   { monochromeMap.map((e,i) =>
-     <ColorItem
-       key={i}
-       { ...e }
-     />
-   ) }
- </ColorPalette>
-
-### Social Media
-
- <ColorPalette>
-   { smMap.map((e,i) =>
-     <ColorItem
-       key={i}
-       { ...e }
-     />
-   ) }
- </ColorPalette>

package/src/stories/StyleGuide/cssClasses.stories.mdx

@@ -1,16 +0,0 @@
-import { Meta} from '@storybook/addon-docs/blocks';
-
-<Meta title="StyleGuide/CSSClasses" />
-
-# CSS Classes
-
-The CSS classes are defined in [@pareto-engineering/styles/src/swatch](https://github.com/HelloPareto/styles/tree/main/src/swatch) and make use of the open source library [@aztlan/swatch](https://github.com/AztlanEngineering/swatch).
-
-## Font Sizes
-
-Color are collections of colors that put together, make a UI theme.
-
-## Padding / Margin
-
-Color are collections of colors that put together, make a UI theme.
-

package/src/stories/StyleGuide/helpers.js

@@ -1,64 +0,0 @@
-import {
-  THEME,
-  // WHEEL,
-  MODALS,
-  UI,
-  SM,
-  MONOCHROME,
-} from '../colors'
-
-const getColorMap = (prefix, list) => {
-  const a = []
-  list.forEach((color) => a.push({
-    title :`${prefix}.${color}`,
-    // subtitle:'',
-    colors:[
-      `var(--hard-${color})`,
-      `var(--${color})`,
-      `var(--soft-${color})`,
-      `var(--on-${color})`,
-    ],
-  }))
-  return a
-}
-
-const brandMap = getColorMap('colorschemes.light.brand', THEME)
-// const wheelMap = getColorMap('colorschemes.light.wheel', WHEEL)
-const modalsMap = getColorMap('colorschemes.light.modals', MODALS)
-const uiMap = getColorMap('colorschemes.light.ui', UI)
-
-const smMap = getColorMap('palettes.social-media', SM)
-const monochromeMap = getColorMap('palettes.momochrome', MONOCHROME)
-
-const charList = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/',
-  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?',
-  '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
-  'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`',
-  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
-  'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~']
-
-const spritesMap = [
-  {
-    sprite :'/homepage.sprite.svg',
-    targets:['grow-faster', 'secret-superpower', 'women-led'],
-  },
-  {
-    sprite :'/illustrations.sprite.svg',
-    targets:['building-1', 'building-2', 'building-3', 'building-4', 'building-5', 'woman-1', 'woman-2', 'woman-3', 'man-1', 'man-2', 'man-3'],
-  },
-  {
-    sprite :'/solutions.sprite.svg',
-    targets:['custom-data', 'vetting', 'contact-gen', 'research', 'tracking'],
-  },
-]
-
-export {
-  brandMap,
-  // wheelMap,
-  modalsMap,
-  uiMap,
-  smMap,
-  monochromeMap,
-  charList,
-  spritesMap,
-}