fix: lerna setup

.eslintrc

@@ -59,5 +59,12 @@
         "no-console": "off"
       }
     }
-  ]
+  ],
+  "settings": {
+    "import/resolver": {
+      "eslint-import-resolver-lerna": {
+        "packages": "packages"
+      }
+    }
+  }
 }

.gitignore

@@ -5,7 +5,8 @@ node_modules
 reports
 out
 .history
-.jest-test-results.json
+.jest-*
+yarn.lock
 
 # Reports
 reports
@@ -17,3 +18,5 @@ flow-typed
 docs
 
 .cache
+
+packages/**/lib

.storybook/config.js

@@ -7,6 +7,7 @@ import { withDesign } from 'storybook-addon-designs';
 import { withTests } from '@storybook/addon-jest';
 import { withA11y } from '@storybook/addon-a11y';
 import { ThemeProvider } from 'styled-components';
+
 import theme from '../lib/styles/themes/base/index';
 import '../lib/styles/cssIncludes';
 import GlobalStyles from '../lib/styles';
@@ -59,7 +60,7 @@ addParameters({
   },
 });
 
-const req = require.context('../lib/components/', true, /.stories\.(js|mdx)$/);
+const req = require.context('../packages', true, /.stories\.(js|mdx)$/);
 function loadStories() {
   req.keys().forEach((filename) => req(filename));
 }

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
-  stories: ['../lib/components/**/**/*.stories.mdx'],
+  stories: ['../packages/**/*.stories.mdx'],
   addons: ['@storybook/addon-docs'],
 };

.travis.yml

@@ -6,7 +6,7 @@ before_install:
   - export PATH=$HOME/.yarn/bin:$PATH
 script:
   - commitlint-travis
-  - eslint --fix ./lib
+  - eslint --fix ./packages
   - yarn validate
   - yarn run build-storybook
 install:

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: ['babel-plugin-styled-components'],
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

config/jest.config.js

@@ -2,35 +2,35 @@ module.exports = {
   rootDir: '../',
   setupFiles: ['<rootDir>/config/jest.setup.js'],
   moduleDirectories: ['node_modules'],
-  testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/out/'],
+  testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/out/', '<rootDir>/packages/(?:.+?)/lib/'],
   testResultsProcessor: 'jest-sonar-reporter',
   // collectCoverage: true,
   coverageDirectory: '<rootDir>/reports/coverage',
   collectCoverageFrom: [
-    '**lib/components/**/*.js',
-    '**lib/core/**/*.js',
-    '!**lib/components/**/*.mock.js',
-    '!**lib/components/**/*.story.js',
-    '!**lib/components/**/*.styles.js',
+    '**packages/**/*.js',
+    '!**packages/**/*.mock.js',
+    '!**packages/**/*.story.js',
+    '!**packages/**/*.styles.js',
     '!**lib/styles/**/*.js',
     '!**/node_modules/**',
   ],
   coveragePathIgnorePatterns: [
     // exceptions.
     '/node_modules/',
+    '<rootDir>/packages/(?:.+?)/lib/',
   ],
   coverageReporters: ['lcov', 'json', 'text-summary'],
   coverageThreshold: {
     global: {
-      branches: 45,
-      functions: 45,
-      lines: 65,
-      statements: 60,
+      branches: 40,
+      functions: 40,
+      lines: 40,
+      statements: 40,
     },
   },
   snapshotSerializers: ['enzyme-to-json/serializer'],
   verbose: true,
-  testMatch: ['<rootDir>/lib/**/*.test.js'],
+  testMatch: ['<rootDir>/packages/**/*.test.js'],
   moduleNameMapper: {
     '\\.(css|svg)$': 'identity-obj-proxy',
   },

lerna.json

@@ -0,0 +1,6 @@
+{
+  "packages": ["packages/*"],
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "independent"
+}

lib/components/molecules/Carousel/Carousel.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import stylesCarousel from './Carousel.style';
 import List from '../List';
 import Button from '../../atoms/Button';
-import useInterval from '../../../hooks/SetInterval/useSetInterval.hook';
+import useInterval from '../../../hooks/useSetInterval';
 
 const CarouselContext = React.createContext({});
 

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@xt-pagesource/atomic-react-pattern-lib",
   "version": "1.2.1",
+  "private": true,
   "description": "Atomic React Pattern Library",
   "sideEffects": false,
   "main": "dist/index.js",
@@ -11,24 +12,29 @@
     "dist",
     "es"
   ],
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
+    "bootstrap": "lerna bootstrap --use-workspaces",
     "test": "cross-env NODE_ENV=test jest --config ./config/jest.config.js --collectCoverage --json --outputFile=.jest-test-results.json",
     "test:staged": "cross-env NODE_ENV=test jest --config ./config/jest.config.js --passWithNoTests",
     "test:snap": "yarn run test -u",
     "test:watch": "yarn run test --watch --verbose",
     "audit": "yarn run build -- --report",
     "clean:dist": "rimraf dist",
-    "build": "yarn run clean:dist && node scripts/build.js",
+    "build:old": "yarn run clean:dist && node scripts/build.js",
+    "build": "lerna exec --parallel -- babel --root-mode upward src -d lib --ignore **/*.story.js,**/*.spec.js,**/*.test.js",
     "generate": "plop --plopfile generators/index.js",
     "storybook": "start-storybook -s ./public,./lib/static -p 6006",
     "build-storybook": "build-storybook -c .storybook -o ./out",
     "deploy-storybook": "storybook-to-ghpages --existing-output-dir=./out --host-token-env-variable=GITHUB_TOKEN --ci",
-    "lint:js": "eslint lib/",
+    "lint:js": "eslint packages/**/src",
     "lint:js:fix": "yarn run lint:js --fix",
-    "lint:css": "stylelint lib/**/*.js",
+    "lint:css": "stylelint packages/**/*.js",
     "lint": "yarn run lint:js && yarn run lint:css",
     "pretty": "prettier --write **/*.{js,json,css}",
-    "validate": "yarn run lint && yarn run test && yarn run build",
+    "validate": "yarn run lint && yarn run build && yarn run test",
     "auditNPM": "yarn audit --verbose --json",
     "prepublishOnly": "yarn validate",
     "npm-publish": "yarn publish --verbose --access=public"
@@ -86,6 +92,7 @@
     "eslint": "^6.5.1",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.1",
+    "eslint-import-resolver-lerna": "^1.1.0",
     "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-extra-rules": "0.8.1",
     "eslint-plugin-import": "^2.20.1",
@@ -98,6 +105,7 @@
     "jest": "^25.2.3",
     "jest-sonar-reporter": "^2.0.0",
     "jest-styled-components": "^7.0.0",
+    "lerna": "^3.22.1",
     "lint-staged": "^10.0.9",
     "mini-css-extract-plugin": "^0.9.0",
     "plop": "^2.6.0",

packages/atomic-react-anchor/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@xt-pagesource/atomic-react-anchor",
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "dependencies": {
+    "@xt-pagesource/atomic-react-utils": "1.0.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.0.1"
+  },
+  "license": "MIT"
+}

packages/atomic-react-anchor/src/Anchor.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { buildUrl, getLabelFromChildren } from '@xt-pagesource/atomic-react-utils';
+import styles from './Anchor.style';
+
+const Anchor = ({
+  children,
+  to,
+  as,
+  className,
+  elementLocator,
+  inheritedStyles,
+  handleLinkClick,
+  shallow,
+  scroll,
+  forceClick,
+  target,
+  ...others
+}) => (
+  <a
+    {...others}
+    href={buildUrl(to)}
+    className={className}
+    onClick={handleLinkClick}
+    target={target}
+    data-locator={elementLocator || `link-${getLabelFromChildren(children)}`}
+  >
+    {children}
+  </a>
+);
+
+Anchor.propTypes = {
+  to: PropTypes.string.isRequired,
+  as: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  elementLocator: PropTypes.string,
+  inheritedStyles: PropTypes.string,
+  handleLinkClick: PropTypes.func,
+  shallow: PropTypes.bool,
+  scroll: PropTypes.bool,
+  target: PropTypes.oneOf(['', '_self', '_blank', '_parent', '_top']),
+  forceClick: PropTypes.bool,
+};
+
+Anchor.defaultProps = {
+  as: '',
+  inheritedStyles: '',
+  shallow: false,
+  scroll: false,
+  forceClick: false,
+  className: '',
+  elementLocator: '',
+  target: '',
+  handleLinkClick: () => {},
+};
+
+const StyledAnchor = styled(Anchor)`
+  ${styles};
+`;
+export default StyledAnchor;
+
+export { Anchor as AnchorVanilla };

packages/atomic-react-anchor/src/Anchor.mock.js

@@ -0,0 +1,31 @@
+import { action } from '@storybook/addon-actions';
+
+const defaultAnchor = {
+  className: 'example',
+  to: 'https://nextjs.org/',
+  handleLinkClick: action('clicked'),
+};
+
+const secondaryAnchor = {
+  className: 'example',
+  to: 'https://nextjs.org/',
+  handleLinkClick: action('clicked'),
+  secondary: true,
+};
+
+const customLocatorOnAnchor = {
+  className: 'example',
+  to: 'https://nextjs.org/',
+  handleLinkClick: action('clicked'),
+  secondary: true,
+  elementLocator: 'example-custom-link',
+};
+
+const openInNewTabAnchor = {
+  className: 'example',
+  to: 'https://nextjs.org/',
+  handleLinkClick: action('clicked'),
+  target: '_blank',
+};
+
+export { secondaryAnchor, defaultAnchor, customLocatorOnAnchor, openInNewTabAnchor };

packages/atomic-react-anchor/src/Anchor.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Preview, Props  } from '@storybook/addon-docs/blocks';
+import Anchor, { AnchorVanilla } from '.';
+import { defaultAnchor, secondaryAnchor, customLocatorOnAnchor, openInNewTabAnchor } from './Anchor.mock';
+
+<Meta title="Atoms/Links" component={Anchor} />
+
+
+### Anchor Vanilla
+<Preview>
+  <Story name="Knobs">
+   <AnchorVanilla {...defaultAnchor}>Click Me</AnchorVanilla>
+  </Story>
+</Preview>
+
+### Secondary Anchor
+<Preview>
+    <Story name="Secondary Link">
+  <Anchor {...secondaryAnchor}>Click Me</Anchor>
+  </Story>
+</Preview>
+
+
+### Custom Locator On Anchor
+<Preview>
+    <Story name="Custom Locator On Link">
+  <Anchor {...customLocatorOnAnchor}>Click Me</Anchor>
+  </Story>
+</Preview>
+
+### Open In New Tab Anchor
+<Preview>
+    <Story name="Open In New Tab Link">
+  <Anchor {...openInNewTabAnchor}>Click Me</Anchor>
+  </Story>
+</Preview>
+
+## Props 🔧
+
+<Props of={AnchorVanilla} />
+

packages/atomic-react-anchor/src/Anchor.style.js

@@ -0,0 +1,15 @@
+import { css } from 'styled-components';
+
+export default css`
+  cursor: pointer;
+  ${(props) => props.theme.behaviour.LINK_DECORATION};
+  ${(props) => props.theme.colors.LINK_PRIMARY};
+  ${(props) => props.theme.typography.FONT_LINK};
+  &:focus {
+    ${(props) => props.theme.border.CTA_OUTLINE};
+    &:not(.focus-visible) {
+      outline: none;
+    }
+  }
+  ${(props) => (props.inheritedStyles ? props.inheritedStyles : '')};
+`;

packages/atomic-react-anchor/src/index.js

@@ -0,0 +1,2 @@
+export { default } from './Anchor';
+export { AnchorVanilla } from './Anchor';

packages/atomic-react-anchor/src/tests/Anchor.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow, render } from 'enzyme';
+import { AnchorVanilla } from '../Anchor';
+
+describe('Anchor Component', () => {
+  let anchor;
+
+  test('should render correctly and match snapshot', () => {
+    anchor = shallow(<AnchorVanilla to="/sample">Sample</AnchorVanilla>);
+    expect(anchor).toMatchSnapshot();
+  });
+
+  test('Should handle on typeahead focuson Events', () => {
+    const props = { noLink: true, to: '/sample', handleLinkClick: jest.fn() };
+    const event = { preventDefault: jest.fn() };
+    anchor = shallow(<AnchorVanilla {...props}>Sample</AnchorVanilla>);
+    anchor.find('a').simulate('click', event);
+    expect(props.handleLinkClick).toHaveBeenCalled();
+  });
+
+  test('should check the data attribute of anchor', () => {
+    const sampleProps = { elementLocator: 'my-custom-anchor-locator' };
+    const anchorVanilla = render(<AnchorVanilla {...sampleProps} />);
+
+    expect(anchorVanilla.attr('data-locator')).toEqual(sampleProps.elementLocator);
+  });
+});