@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.4

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -16,23 +16,22 @@ const componentClassName = 'select-input';
 /**
  * This is the component description.
  */
-const SelectInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    color,
-    options,
-    validate,
-    optional,
-    description,
-    disabled,
-    isLoading,
-    autoComplete
-    // ...otherProps
-  } = _ref;
+const SelectInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  color,
+  options,
+  validate,
+  optional,
+  description,
+  disabled,
+  isLoading,
+  autoComplete
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/f/fields/SelectInput/styles.scss

@@ -5,7 +5,7 @@
 @use "../../../form.scss";
 
 
-$default-padding: 0.75em;
+$default-padding: .75em;
 $default-margin: 1em;
 
 .#{bem.$base}.select-input {
@@ -13,7 +13,7 @@ $default-margin: 1em;
   flex-direction: column;
 
   .#{bem.$base}.label {
-    margin-bottom: $default-margin
+    margin-bottom: $default-margin;
   }
 
   .select-wrapper {
@@ -27,19 +27,19 @@ $default-margin: 1em;
     }
 
     >.input {
-      width: 100%;
-      border: var(--theme-border-style) var(--hard-y);
       background: var(--soft-y);
+      border: var(--theme-border-style) var(--hard-y);
       color: var(--on-y);
       padding: $default-padding;
+      width: 100%;
 
       &:not(:disabled):hover {
         border: var(--theme-border-style) var(--soft-background4);
       }
 
       &:disabled {
-        background-color: var(--hard-y);
         appearance: none;
+        background-color: var(--hard-y);
       }
 
       &:focus {
@@ -47,4 +47,4 @@ $default-margin: 1em;
       }
     }
   }
-}
+}

package/dist/es/f/fields/TextInput/TextInput.js

@@ -15,25 +15,24 @@ const componentClassName = 'text-input';
 /**
  * This is the component description.
  */
-const TextInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    type,
-    name,
-    label,
-    color,
-    labelColor,
-    validate,
-    oneInputLabel,
-    description,
-    disabled,
-    placeholder,
-    optional,
-    autoComplete
-    // ...otherProps
-  } = _ref;
+const TextInput = ({
+  id,
+  className: userClassName,
+  style,
+  type,
+  name,
+  label,
+  color,
+  labelColor,
+  validate,
+  oneInputLabel,
+  description,
+  disabled,
+  placeholder,
+  optional,
+  autoComplete
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/f/fields/TextInput/styles.scss

@@ -3,23 +3,23 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-$default-padding: 0.75em 0.75em 0.55em;
+$default-padding: .75em .75em .55em;
 
 .#{bem.$base}.text-input {
   display: flex;
   flex-direction: column;
 
   .input {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -15,27 +15,26 @@ const componentClassName = 'text-area-input';
 /**
  * This is the component description.
  */
-const TextareaInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    validate,
-    labelAsDescription,
-    textAreaId,
-    rows,
-    optional,
-    textAreaColor,
-    labelColor,
-    description,
-    disabled,
-    placeholder,
-    autoComplete,
-    resize
-    // ...otherProps
-  } = _ref;
+const TextareaInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  validate,
+  labelAsDescription,
+  textAreaId,
+  rows,
+  optional,
+  textAreaColor,
+  labelColor,
+  description,
+  disabled,
+  placeholder,
+  autoComplete,
+  resize
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/f/fields/TextareaInput/styles.scss

@@ -1,27 +1,28 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-padding: .5em;
 
-.#{bem.$base}.text-area-input{
+.#{bem.$base}.text-area-input {
   display: flex;
   flex-direction: column;
 
   .textarea {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 
-     &:disabled {
+    &:disabled {
       background-color: var(--hard-y);
     }
 
@@ -29,4 +30,4 @@ $default-padding: .5em;
       background: var(--soft-background4);
     }
   }
-}
+}

package/dist/es/r/SwitchRouteMap/SwitchRouteMap.js

@@ -11,27 +11,21 @@ import { PrivateRoute } from "../common";
  * **`SessionContextProvider` in case you're using PrivateRoutes. **
  * `SwitchRouteMap` generates a routing `Switch` from an array of route Props
  */
-const SwitchRouteMap = _ref => {
-  let {
-    routes,
-    NotFound
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Switch, {
-    children: [...routes.map(_ref2 => {
-      let {
-        isPrivate,
-        ...routeProps
-      } = _ref2;
-      return isPrivate ? /*#__PURE__*/React.createElement(PrivateRoute, _extends({
-        key: routeProps.path
-      }, routeProps)) : /*#__PURE__*/React.createElement(Route, _extends({
-        key: routeProps.path
-      }, routeProps));
-    }), ...(NotFound ? [/*#__PURE__*/React.createElement(Route, {
-      component: NotFound
-    })] : [])]
-  });
-};
+const SwitchRouteMap = ({
+  routes,
+  NotFound
+}) => /*#__PURE__*/React.createElement(Switch, {
+  children: [...routes.map(({
+    isPrivate,
+    ...routeProps
+  }) => isPrivate ? /*#__PURE__*/React.createElement(PrivateRoute, _extends({
+    key: routeProps.path
+  }, routeProps)) : /*#__PURE__*/React.createElement(Route, _extends({
+    key: routeProps.path
+  }, routeProps))), ...(NotFound ? [/*#__PURE__*/React.createElement(Route, {
+    component: NotFound
+  })] : [])]
+});
 SwitchRouteMap.propTypes = {
   /**
    * The routes to render

package/dist/es/r/common/PrivateRoute/PrivateRoute.js

@@ -21,13 +21,12 @@ const SessionContext = /*#__PURE__*/React.createContext({});
  * Please remember this is a front-end test, and is not equivalent to back-end permission checks.
  * This component is meant to be used alongside back-end checks.
  */
-const PrivateRoute = _ref => {
-  let {
-    component: Component,
-    render,
-    test,
-    ...rest
-  } = _ref;
+const PrivateRoute = ({
+  component: Component,
+  render,
+  test,
+  ...rest
+}) => {
   const {
     currentUserData: currentUser,
     loginPath

package/dist/es/test/QueryLoader/QueryLoader.js

@@ -2,7 +2,7 @@ var _QueryLoaderHelloQuery;
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useEffect, Suspense } from 'react';
-import { useQueryLoader } from 'react-relay';
+import { useQueryLoader, graphql } from 'react-relay';
 
 // Local Definitions
 

package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -6,12 +6,11 @@ import { usePreloadedQuery } from 'react-relay';
 /**
  * This is the component description.
  */
-const PreloadedTestData = _ref => {
-  let {
-    query,
-    queryReference
-    // ...otherProps
-  } = _ref;
+const PreloadedTestData = ({
+  query,
+  queryReference
+  // ...otherProps
+}) => {
   const data = usePreloadedQuery(query, queryReference);
   return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
 };

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

@@ -12,16 +12,15 @@ const findCompatiblePositions = (primary, secondaryArray) => {
   }
   return [];
 };
-const useDynamicPosition = _ref => {
-  let {
-    elementRef,
-    parentRef,
-    preferredPrimaryOrder,
-    preferredSecondaryOrder,
-    // offsetYPx,
-    offsetXPx,
-    throttleMs = 200
-  } = _ref;
+const useDynamicPosition = ({
+  elementRef,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  // offsetYPx,
+  offsetXPx,
+  throttleMs = 200
+}) => {
   const isClient = typeof window === 'object';
   const {
     height: currentHeight,

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

@@ -1,7 +1,6 @@
 import { useCallback, useState, useEffect } from 'react';
 import debounce from 'lodash/debounce';
-const useWindowSize = function () {
-  let debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
+const useWindowSize = (debounceMs = 700) => {
   const isClient = typeof window === 'object';
   const getSize = () => ({
     width: isClient ? window.innerWidth : undefined,

package/jest.config.js

@@ -8,18 +8,18 @@ module.exports = {
   cache           :false,
   // https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files
   moduleNameMapper:{
-    '^.+\\.(css|scss)$'        :'<rootDir>/config/CSSStub.js',
-    '^.+\\.(mdx)$'             :'<rootDir>/config/CSSStub.js',
+    '^.+\\.(css|scss)$'                :'<rootDir>/tests/staticStub.js',
+    '^.+\\.(mdx)$'                     :'<rootDir>/tests/staticStub.js',
     // https://jestjs.io/docs/webpack#mocking-css-modules
-    '^@pareto-engineering/bem$':'identity-obj-proxy',
+    '^@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>/config/test-setup.js'],
+  setupFiles     :['<rootDir>/tests/test-setup.js'],
   testEnvironment:'jsdom',
   // transformIgnorePatterns: [`node_modules/(?!${esModules})`],
-  globalSetup    :'<rootDir>/config/global-setup.js',
+  globalSetup    :'<rootDir>/tests/global-setup.js',
 }

package/package.json

@@ -1,109 +1,71 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "3.0.0-alpha.29",
+  "version": "4.0.0-alpha.4",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
   "scripts": {
-    "storybook": "start-storybook --no-manager-cache -p 6006 -s ./src/assets/images,../../node_modules/@pareto-engineering/assets/images,../../node_modules/@pareto-engineering/assets/fonts",
-    "build-storybook": "build-storybook -s ./src/assets/images,../../node_modules/@pareto-engineering/assets/images,../../node_modules/@pareto-engineering/assets/fonts",
-    "vercel-build": "build-storybook --quiet -o public",
-    "copy-css:cjs": "copyfiles -u 2 src/ui/**/*.scss dist/cjs",
-    "copy-css:es": "copyfiles -u 2 src/ui/**/*.scss dist/es",
-    "compile:cjs": "COMPILE_ENV=cjs babel src/ui --extensions '.js,.jsx' --out-dir dist/cjs",
-    "compile:es": "COMPILE_ENV=es babel src/ui --extensions '.js,.jsx' --out-dir dist/es",
-    "build:cjs": "npm run compile:cjs && npm run copy-css:cjs",
-    "build:es": "npm run compile:es && npm run copy-css:es",
-    "compile": "npm run build:es && npm run build:cjs",
-    "chromatic": "chromatic --project-token=b63af653a850",
-    "prepare": "npm run compile",
-    "prepare:watch": "nodemon --watch src --ignore 'src/stories' --exec  'npm run build:es' && echo done",
-    "postinstall:old": "node ../../scripts/postinstall.js",
-    "upgrade": "../../scripts/upgrade.sh",
     "test": "npm run test:stylelint && npm run test:eslint && npm run test:jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "testconfig:stylelint": "stylelint src/local.scss",
     "testconfig:eslint": "eslint src/**/*.jsx",
     "test:jest": "jest",
     "test:jest:update": "jest --updateSnapshot",
     "test:eslint": "eslint --ext .jsx,.js src/",
-    "test:stylelint": "stylelint src/**/*.scss --rd --rdd --risd --color --formatter verbose",
+    "test:stylelint": "stylelint 'src/**/*.scss' --rd --rdd --risd --color --formatter verbose",
     "fix:stylelint": "npm run test:stylelint -- --fix",
     "fix:eslint": "npm run test:eslint -- --fix",
-    "link:assets": "npm link @pareto-engineering/assets",
-    "link:bem": "npm link @pareto-engineering/bem",
-    "link:styles": "npm link @pareto-engineering/styles",
-    "link:all": "npm run link:bem && npm run link:styles && npm run link:assets",
-    "relay": "relay-compiler",
-    "fetch-schema:prod": "node ../../scripts/fetchSchema.js -- --ref production",
-    "fetch-schema": "npm run fetch-schema:prod"
+    "copy-css:cjs": "copyfiles -u 2 src/ui/**/*.scss dist/cjs",
+    "copy-css:es": "copyfiles -u 2 src/ui/**/*.scss dist/es",
+    "compile:cjs": "TARGET=cjs babel src/ui --extensions '.js,.jsx' --out-dir dist/cjs",
+    "compile:es": "TARGET=es babel src/ui --extensions '.js,.jsx' --out-dir dist/es",
+    "build:cjs": "npm run compile:cjs && npm run copy-css:cjs",
+    "build:es": "npm run compile:es && npm run copy-css:es",
+    "compile": "npm run build:es && npm run build:cjs",
+    "prepare": "npm run compile"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.14.5",
-    "@mdx-js/react": "^2.2.1",
-    "@pareto-engineering/eslint-config": "^3.0.0-alpha.29",
-    "@pareto-engineering/stylelint-config": "^3.0.0-alpha.29",
-    "@storybook/addon-actions": "^6.3.3",
-    "@storybook/addon-essentials": "^6.3.3",
-    "@storybook/addon-links": "^6.3.3",
-    "@storybook/addon-storyshots": "^6.3.3",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.3.3",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-relay": "^13.2.0",
-    "chromatic": "^5.9.2",
+    "@babel/cli": "^7.21.0",
+    "@pareto-engineering/eslint-config": "*",
+    "@pareto-engineering/stylelint-config": "*",
+    "@storybook/addon-essentials": "^7.0.0-rc.3",
+    "@storybook/addon-interactions": "^7.0.0-rc.3",
+    "@storybook/addon-links": "^7.0.0-rc.3",
+    "@storybook/addon-storyshots": "^7.0.0-rc.3",
+    "@storybook/blocks": "^7.0.0-rc.3",
+    "@storybook/react": "^7.0.0-rc.3",
+    "@storybook/react-webpack5": "^7.0.0-rc.3",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "babel-plugin-relay": "^15.0.0",
     "copyfiles": "^2.4.1",
-    "css-mqpacker": "^7.0.0",
-    "cssnano": "^5.0.6",
-    "faker": "^5.5.3",
-    "graphql": "^15.8.0",
+    "css-loader": "^6.7.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
-    "jsonlint": "^1.6.3",
-    "nodemon": "^2.0.9",
-    "postcss": "^8.3.5",
-    "postcss-cli": "^8.3.1",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^4.0.0",
-    "relay-compiler": "^11.0.2",
-    "relay-config": "^11.0.2",
-    "sass": "^1.35.1",
-    "sass-loader": "=10.1.1",
-    "storybook-addon-themes": "^6.1.0",
-    "webpack": "^5.75.0"
+    "jest-environment-jsdom": "^29.5.0",
+    "sass-loader": "^13.2.0",
+    "storybook": "^7.0.0-rc.3",
+    "style-loader": "^3.3.1"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^3.0.0-alpha.29",
-    "@pareto-engineering/bem": "^3.0.0-alpha.29",
-    "@pareto-engineering/styles": "^3.0.0-alpha.29",
-    "date-fns": "^2.22.1",
-    "downshift": "^6.1.7",
+    "@pareto-engineering/assets": "^4.0.0-alpha.3",
+    "@pareto-engineering/bem": "^4.0.0-alpha.3",
+    "@pareto-engineering/styles": "^4.0.0-alpha.3",
+    "date-fns": "^2.29.3",
+    "downshift": "^6.1.12",
     "formik": "^2.2.9",
-    "hamburgers": "^1.1.3",
+    "hamburgers": "^1.2.1",
     "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-countup": "^4.4.0",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
-    "react-relay": "^11.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-visibility-sensor": "^5.1.1",
-    "relay-runtime": "^11.0.2",
-    "relay-test-utils": "^11.0.2",
-    "style-loader": "^3.3.1",
-    "swiper": "^6.7.5",
-    "typed.js": "^2.0.12"
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-relay": "^15.0.0",
+    "react-router-dom": "^5.3.4",
+    "relay-test-utils": "^15.0.0"
   },
-  "browserslist": "> 2%, not ie > 0, not opera > 0, not op_mini > 0",
-  "gitHead": "f4943cacda9688d55d7e496f955c6f388102d16d"
+  "browserslist": "> 2%",
+  "gitHead": "df54c3dc5048159fe8a037a3dc8feb2d91a07417"
 }

package/src/stories/b/Page.stories.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 
 import { Page } from 'ui'
+import { HelmetProvider } from 'react-helmet-async'
 
 export default {
   title        :'b/Page',
@@ -11,7 +12,7 @@ export default {
     'Page.Section':Page.Section,
   },
   decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => <HelmetProvider>{ storyfn() }</HelmetProvider>,
   ],
   argTypes:{
     id      :{ control: 'text' },

package/src/stories/original/Button.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary, backgroundColor, size, label, ...props
+}) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
+  const [state, setState] = useState('not clicked')
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+      onClick={() => setState('clicked')}
+    >
+      { state }
+      {label}
+    </button>
+  )
+}
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary        :PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor:PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size           :PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label          :PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick        :PropTypes.func,
+}
+
+Button.defaultProps = {
+  backgroundColor:null,
+  primary        :false,
+  size           :'medium',
+  onClick        :undefined,
+}