@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

package/src/ui/utils/hooks/useWindowSize.js

@@ -0,0 +1,32 @@
+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/src/ui/utils/index.js

@@ -0,0 +1 @@
+export { useWindowSize, useDynamicPosition } from './hooks'

package/stylelint.config.js

@@ -1,45 +1,3 @@
 module.exports = {
-  extends: [
-    'stylelint-config-palantir',
-    'stylelint-config-palantir/sass.js',
-  ],
-  rules: {
-    indentation: 2,
-    'number-leading-zero': 'never',
-    'at-rule-no-unknown': [true,
-      {
-        ignoreAtRules: [
-        // additional scss at-rules:
-          'content', 'each', 'else', 'error', 'extend', 'for', 'function', 'if', 'include', 'mixin', 'return', 'use', 'forward',
-        ],
-      },
-    ],
-    'at-rule-empty-line-before': ['always', {
-      except: ['after-same-name', 'inside-block'],
-      ignoreAtRules: ['include', 'mixin', 'function'],
-    }],
-    'order/order': [
-      [
-        'custom-properties',
-        'at-variables',
-        'dollar-variables',
-        'less-mixins',
-        /*
-        {
-          "type": "at-rule",
-          "name": "include"
-        }, */
-        'declarations',
-        'rules',
-      ],
-      { unspecified: 'ignore' },
-    ],
-    'property-no-unknown': [
-      true,
-      {
-        ignoreProperties: ['text-stroke', 'font-smooth'],
-      },
-    ],
-    'max-nesting-depth': 5,
-  },
+  extends:['@pareto-engineering/stylelint-config'],
 }

package/.githooks/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/sh
-
-echo "\n\n** PRE-COMMIT => Running tests"
-#npm run test
-

package/.github/workflows/push-main-branches.yaml

@@ -1,89 +0,0 @@
-name: (push -> main branches) Test, Push to Chromatic
-on:
-  # Trigger the workflow on push or pull request,
-  # but only for the main branch
-  push:
-    branches:
-      - development
-      - staging
-      - production
-#on:
-#  push:
-#    branches: [ $default-branch ]
-#  pull_request:
-#    branches: [ $default-branch ]
-
-jobs:
-  test:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        #node-version: [12.x, 14.x]
-        node-version: [14.x]
-
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    #- run: npm ci
-    - id: cache-modules
-      uses: actions/cache@v1
-      with:
-        path: ./node_modules
-        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-    
-    - name: Install dependencies
-      if: steps.cache-pipenv.outputs.cache-hit != 'true'
-      run: |
-        npm install
-    
-    #- run: npm run build --if-present
-    #- name: Test
-    #  env:
-    #    CI: true
-    #    #run: npm run test
-
-    - name: Lint SCSS
-      run: npm run test:stylelint
-
-    - name: Test with Storyshots (Take Snapshots -> Compare)
-      run: npm run test:jest
-
-    - name: Test with Eslint
-      run: npm run test:eslint
-
-    #- name: Test with TSC
-    #run: npm run test:tsc
-
-  chromatic-deployment:
-    needs: test
-    # Operating System
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      - uses: actions/checkout@v1
-
-      - id: cache-modules
-        uses: actions/cache@v1
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-      
-      - name: Install dependencies
-        if: steps.cache-pipenv.outputs.cache-hit != 'true'
-        run: |
-          npm install
-
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        # Chromatic GitHub Action options
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing, in case there are changes (but no errors)

package/.github/workflows/push-pr.yaml

@@ -1,83 +0,0 @@
-name: (pr) Test, and deploy to chromatic
-
-on:
-  push:
-    branches-ignore:
-      - development
-      - staging
-      - production
-
-jobs:
-  test:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        #node-version: [12.x, 14.x]
-        node-version: [14.x]
-
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    #- run: npm ci
-    - id: cache-modules
-      uses: actions/cache@v1
-      with:
-        path: ./node_modules
-        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-    
-    - name: Install dependencies
-      if: steps.cache-pipenv.outputs.cache-hit != 'true'
-      run: |
-        npm install
-    
-    #- run: npm run build --if-present
-    #- name: Test
-    #  env:
-    #    CI: true
-    #    #run: npm run test
-
-    - name: Lint SCSS
-      run: npm run test:stylelint
-
-    - name: Test with Storyshots (Take Snapshots -> Compare)
-      run: npm run test:jest
-
-    - name: Test with Eslint
-      run: npm run test:eslint
-
-    #- name: Test with TSC
-    #  run: npm run test:tsc
-  
-  chromatic-deployment:
-    needs: test
-    # Operating System
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      - uses: actions/checkout@v1
-
-      - id: cache-modules
-        uses: actions/cache@v1
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-      
-      - name: Install dependencies
-        if: steps.cache-pipenv.outputs.cache-hit != 'true'
-        run: |
-          npm install
-
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        # Chromatic GitHub Action options
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing, in case there are changes (but no errors)

package/.github/workflows.old/push-production.yaml

@@ -1,34 +0,0 @@
-name: (push -> production) Node.js CI
-
-on: [pull_request]
-#on:
-#  push:
-#    branches: [ $default-branch ]
-#  pull_request:
-#    branches: [ $default-branch ]
-
-jobs:
-  test:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        #node-version: [12.x, 14.x]
-        node-version: [14.x]
-
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    #- run: npm ci
-    - run: npm i
-    #- run: npm run build --if-present
-    - name: Test
-      env:
-        CI: true
-      run: npm run test
-

package/.github/workflows.old/push-staging.yaml

@@ -1,34 +0,0 @@
-name: (push -> staging) Test, Push to Chromatic, and Publish Beta
-
-on: [pull_request]
-#on:
-#  push:
-#    branches: [ $default-branch ]
-#  pull_request:
-#    branches: [ $default-branch ]
-
-jobs:
-  test:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        #node-version: [12.x, 14.x]
-        node-version: [14.x]
-
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    #- run: npm ci
-    - run: npm i
-    #- run: npm run build --if-present
-    - name: Test
-      env:
-        CI: true
-      run: npm run test
-

package/.github/workflows.old/test-publish.no

@@ -1,63 +0,0 @@
-name: Node.js CI
-
-on: [push, pull_request]
-#on:
-#  push:
-#    branches: [ $default-branch ]
-#  pull_request:
-#    branches: [ $default-branch ]
-
-jobs:
-  test:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        #node-version: [12.x, 14.x]
-        node-version: [14.x]
-
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    #- run: npm ci
-    - run: npm i
-    #- run: npm run build --if-present
-    - name: Test
-      env:
-        CI: true
-      run: npm run test
-
-  publish:
-    needs: test
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v2
-      #with:
-        #token: secrets.GH_PERSONAL_ACCESS_TOKEN
-    - uses: nelonoel/branch-name@v1.0.1
-    - name: Detect branch
-      run: echo "Currently on branch $BRANCH_NAME, will publish to npm"
-
-    - name: If branch development version bump alpha
-      if: env.BRANCH_NAME == 'development'
-      uses: phips28/gh-action-bump-version@master
-      env:
-        #GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}#this is the default but it doesnt work since gh cannot push to protected branches. This is why we used the PAT of tasks@HP.com
-        GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
-      with:
-        default: prerelease --preid=alpha
-
-    - run: |
-          echo "name: ${{ steps.pkg.outputs.name }}"
-          echo "version: ${{ steps.pkg.outputs.version }}"
-          echo "release: ${{ steps.pkg.outputs.release }}"
-        #uses: JS-DevTools/npm-publish@v1
-        #  with:
-        #    token: ${{ secrets.NPM_AUTOMATION_KEY }}
-        #    tag: "latest"

package/.github/workflows.old/test-publish.yaml

@@ -1,68 +0,0 @@
-name: Node.js CI
-on:
-  # Trigger the workflow on push or pull request,
-  # but only for the main branch
-  push:
-    branches:
-      - production
-
-#on:
-#  push:
-#    branches: [ $default-branch ]
-#  pull_request:
-#    branches: [ $default-branch ]
-
-jobs:
-  Test:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        #node-version: [12.x, 14.x]
-        node-version: [14.x]
-
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    #- run: npm ci
-    - run: npm i
-    #- run: npm run build --if-present
-    - name: Test
-      env:
-        CI: true
-      run: npm run test
-
-  publish:
-    needs: test
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v2
-      #with:
-        #token: secrets.GH_PERSONAL_ACCESS_TOKEN
-    - uses: nelonoel/branch-name@v1.0.1
-    - name: Detect branch
-      run: echo "Currently on branch $BRANCH_NAME, will publish to npm"
-
-    - name: If branch development version bump alpha
-      if: env.BRANCH_NAME == 'development'
-      uses: phips28/gh-action-bump-version@master
-      env:
-        #GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}#this is the default but it doesnt work since gh cannot push to protected branches. This is why we used the PAT of tasks@HP.com
-        GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
-      with:
-        default: prerelease --preid=alpha
-
-    - run: |
-          echo "name: ${{ steps.pkg.outputs.name }}"
-          echo "version: ${{ steps.pkg.outputs.version }}"
-          echo "release: ${{ steps.pkg.outputs.release }}"
-        #uses: JS-DevTools/npm-publish@v1
-        #  with:
-        #    token: ${{ secrets.NPM_AUTOMATION_KEY }}
-        #    tag: "latest"

package/dist/cjs/a/GradientBackground/GradientBackground.js

@@ -1,140 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
-/**
- * This is the component description.
- */
-
-var GradientBackground = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    pin,
-    shape,
-    height,
-    width // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin,
-      '--height': height,
-      '--width': width
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "triangle"
-  }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "up"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "down"
-  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipse"
-  }), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
-    className: "diamonds"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-right"
-  })), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
-    className: "rectangles"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "center"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom"
-  })), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipse"
-  }), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
-    className: "circle"
-  }), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
-    className: "half-circle"
-  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "first"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "second"
-  })), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
-    className: "spiral"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-two"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-three"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-four"
-  }))));
-};
-
-GradientBackground.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * Where to pin the shapes
-   */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
-};
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
-};
-var _default = GradientBackground;
-exports.default = _default;

package/dist/cjs/a/GradientBackground/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.default;
-  }
-});
-
-var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }