From df360ba552d71775ded3835550b4c8c22f96defb Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:59:26 +0200 Subject: [PATCH] Typescript support for Divider (#520) * First try for typescript support for Divider * In the middle of using proptables from ts components in the storybook * Lot's of lot's of tweeks to make prop tables in storybook working. This commit is kind of a proof of concept * Remove classname, key and ref from props table * Removed debug env * Removed configuration of typescript in storybook main * Remove old testing stuffs * Remove old rollup typescript plugin * Delete copy'n pasted babel typescript transpiler, we use rollup plugin instead * Remove testing stuffs --- .../stories/Divider/Divider.stories.jsx | 6 +- libraries/core-react/jest.config.js | 9 + libraries/core-react/package.json | 14 +- libraries/core-react/pnpm-lock.yaml | 392 +++++++++++++++--- libraries/core-react/rollup.config.js | 31 +- .../core-react/{rtl.setup.js => rtl.setup.ts} | 0 libraries/core-react/src/Divider/Divider.jsx | 47 --- .../{Divider.test.jsx => Divider.test.tsx} | 6 +- .../{Divider.tokens.js => Divider.tokens.ts} | 1 - libraries/core-react/src/Divider/Divider.tsx | 42 ++ .../src/Divider/{index.js => index.ts} | 1 - libraries/core-react/tsconfig.json | 6 +- 12 files changed, 427 insertions(+), 128 deletions(-) create mode 100644 libraries/core-react/jest.config.js rename libraries/core-react/{rtl.setup.js => rtl.setup.ts} (100%) delete mode 100644 libraries/core-react/src/Divider/Divider.jsx rename libraries/core-react/src/Divider/{Divider.test.jsx => Divider.test.tsx} (92%) rename libraries/core-react/src/Divider/{Divider.tokens.js => Divider.tokens.ts} (98%) create mode 100644 libraries/core-react/src/Divider/Divider.tsx rename libraries/core-react/src/Divider/{index.js => index.ts} (70%) diff --git a/apps/storybook-react/stories/Divider/Divider.stories.jsx b/apps/storybook-react/stories/Divider/Divider.stories.jsx index b2d2dd8192..9107b59036 100644 --- a/apps/storybook-react/stories/Divider/Divider.stories.jsx +++ b/apps/storybook-react/stories/Divider/Divider.stories.jsx @@ -2,15 +2,15 @@ import React from 'react' import styled from 'styled-components' import { withKnobs, select } from '@storybook/addon-knobs' import { Divider } from '@equinor/eds-core-react' -import mdx from './Divider.docs.mdx' +// import mdx from './Divider.docs.mdx' export default { title: 'Components/Divider', - parameters: { + /* parameters: { docs: { page: mdx, }, - }, + }, */ component: Divider, } diff --git a/libraries/core-react/jest.config.js b/libraries/core-react/jest.config.js new file mode 100644 index 0000000000..21c971166b --- /dev/null +++ b/libraries/core-react/jest.config.js @@ -0,0 +1,9 @@ +module.exports = { + verbose: true, + setupFilesAfterEnv: ['./rtl.setup.ts'], + transform: { + '.(ts|tsx)': 'ts-jest', + }, + testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$', + moduleFileExtensions: ['ts', 'tsx', 'js'], +} diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json index 031418102f..c27fcc6e72 100644 --- a/libraries/core-react/package.json +++ b/libraries/core-react/package.json @@ -41,16 +41,22 @@ "@babel/core": "^7.10.2", "@babel/preset-env": "^7.10.2", "@babel/preset-react": "^7.10.1", + "@babel/preset-typescript": "^7.10.4", "@rollup/plugin-babel": "^5.0.3", "@rollup/plugin-commonjs": "^13.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^8.0.1", + "@rollup/plugin-typescript": "^5.0.2", "@testing-library/jest-dom": "^5.9.0", "@testing-library/react": "^10.2.1", "@testing-library/user-event": "^10.3.2", + "@types/jest": "^26.0.10", "@types/react": "^16.9.47", "@types/react-dom": "^16.9.8", + "@types/styled-components": "^5.1.2", + "@types/testing-library__jest-dom": "^5.9.2", "babel-plugin-react-docgen": "^4.1.0", + "babel-plugin-react-docgen-typescript": "^1.4.2", "babel-plugin-styled-components": "^1.10.7", "jest": "^26.0.1", "jest-styled-components": "^6.3.4", @@ -60,8 +66,8 @@ "react-dom": "^16.13.1", "rollup": "^2.15.0", "rollup-plugin-polyfill": "^3.0.0", - "rollup-plugin-typescript2": "^0.27.2", "styled-components": "4.4.1", + "ts-jest": "^26.3.0", "tslib": "^2.0.1", "typescript": "^4.0.2" }, @@ -71,12 +77,6 @@ "react-dom": "^16.8.6", "styled-components": "^4.2.0" }, - "jest": { - "verbose": true, - "setupFilesAfterEnv": [ - "./rtl.setup.js" - ] - }, "dependencies": { "@equinor/eds-icons": "workspace:*", "@equinor/eds-tokens": "workspace:*", diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml index a500ceb7bb..00486fe5f8 100644 --- a/libraries/core-react/pnpm-lock.yaml +++ b/libraries/core-react/pnpm-lock.yaml @@ -9,16 +9,22 @@ devDependencies: '@babel/core': 7.10.2 '@babel/preset-env': 7.10.2_@babel+core@7.10.2 '@babel/preset-react': 7.10.1_@babel+core@7.10.2 + '@babel/preset-typescript': 7.10.4_@babel+core@7.10.2 '@rollup/plugin-babel': 5.0.3_@babel+core@7.10.2+rollup@2.15.0 '@rollup/plugin-commonjs': 13.0.0_rollup@2.15.0 '@rollup/plugin-json': 4.1.0_rollup@2.15.0 '@rollup/plugin-node-resolve': 8.0.1_rollup@2.15.0 + '@rollup/plugin-typescript': 5.0.2_0a1a0f524a9d27ad422e76168b31793b '@testing-library/jest-dom': 5.9.0 '@testing-library/react': 10.2.1_react-dom@16.13.1+react@16.13.1 '@testing-library/user-event': 10.4.1 + '@types/jest': 26.0.10 '@types/react': 16.9.47 '@types/react-dom': 16.9.8 + '@types/styled-components': 5.1.2 + '@types/testing-library__jest-dom': 5.9.2 babel-plugin-react-docgen: 4.1.0 + babel-plugin-react-docgen-typescript: 1.4.2_6e5b3a67faae6c4866d9a003ec605c7e babel-plugin-styled-components: 1.10.7_styled-components@4.4.1 jest: 26.0.1 jest-styled-components: 6.3.4_styled-components@4.4.1 @@ -28,8 +34,8 @@ devDependencies: react-dom: 16.13.1_react@16.13.1 rollup: 2.15.0 rollup-plugin-polyfill: 3.0.0 - rollup-plugin-typescript2: 0.27.2_rollup@2.15.0+typescript@4.0.2 styled-components: 4.4.1_4f54128445bc6f13bd713dcb3d91e98e + ts-jest: 26.3.0_jest@26.0.1+typescript@4.0.2 tslib: 2.0.1 typescript: 4.0.2 lockfileVersion: 5.1 @@ -59,6 +65,12 @@ packages: dev: true resolution: integrity: sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw== + /@babel/code-frame/7.10.4: + dependencies: + '@babel/highlight': 7.10.4 + dev: true + resolution: + integrity: sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== /@babel/compat-data/7.10.1: dependencies: browserslist: 4.12.0 @@ -99,6 +111,14 @@ packages: dev: true resolution: integrity: sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA== + /@babel/generator/7.11.4: + dependencies: + '@babel/types': 7.11.0 + jsesc: 2.5.2 + source-map: 0.5.7 + dev: true + resolution: + integrity: sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g== /@babel/helper-annotate-as-pure/7.10.1: dependencies: '@babel/types': 7.10.2 @@ -154,6 +174,20 @@ packages: '@babel/core': ^7.0.0 resolution: integrity: sha512-5C/QhkGFh1vqcziq1vAL6SI9ymzUp8BCYjFpvYVhWP4DlATIb3u5q3iUd35mvlyGs8fO7hckkW7i0tmH+5+bvQ== + /@babel/helper-create-class-features-plugin/7.10.5_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-function-name': 7.10.4 + '@babel/helper-member-expression-to-functions': 7.11.0 + '@babel/helper-optimise-call-expression': 7.10.4 + '@babel/helper-plugin-utils': 7.10.4 + '@babel/helper-replace-supers': 7.10.4 + '@babel/helper-split-export-declaration': 7.11.0 + dev: true + peerDependencies: + '@babel/core': ^7.0.0 + resolution: + integrity: sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A== /@babel/helper-create-regexp-features-plugin/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -188,12 +222,26 @@ packages: dev: true resolution: integrity: sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ== + /@babel/helper-function-name/7.10.4: + dependencies: + '@babel/helper-get-function-arity': 7.10.4 + '@babel/template': 7.10.4 + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ== /@babel/helper-get-function-arity/7.10.1: dependencies: '@babel/types': 7.10.2 dev: true resolution: integrity: sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw== + /@babel/helper-get-function-arity/7.10.4: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A== /@babel/helper-hoist-variables/7.10.1: dependencies: '@babel/types': 7.10.2 @@ -206,6 +254,12 @@ packages: dev: true resolution: integrity: sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g== + /@babel/helper-member-expression-to-functions/7.11.0: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q== /@babel/helper-module-imports/7.10.1: dependencies: '@babel/types': 7.10.2 @@ -230,10 +284,20 @@ packages: dev: true resolution: integrity: sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg== + /@babel/helper-optimise-call-expression/7.10.4: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg== /@babel/helper-plugin-utils/7.10.1: dev: true resolution: integrity: sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA== + /@babel/helper-plugin-utils/7.10.4: + dev: true + resolution: + integrity: sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== /@babel/helper-regex/7.10.1: dependencies: lodash: 4.17.15 @@ -259,6 +323,15 @@ packages: dev: true resolution: integrity: sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A== + /@babel/helper-replace-supers/7.10.4: + dependencies: + '@babel/helper-member-expression-to-functions': 7.11.0 + '@babel/helper-optimise-call-expression': 7.10.4 + '@babel/traverse': 7.11.0 + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A== /@babel/helper-simple-access/7.10.1: dependencies: '@babel/template': 7.10.1 @@ -272,10 +345,20 @@ packages: dev: true resolution: integrity: sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g== + /@babel/helper-split-export-declaration/7.11.0: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg== /@babel/helper-validator-identifier/7.10.1: dev: true resolution: integrity: sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw== + /@babel/helper-validator-identifier/7.10.4: + dev: true + resolution: + integrity: sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== /@babel/helper-wrap-function/7.10.1: dependencies: '@babel/helper-function-name': 7.10.1 @@ -301,6 +384,14 @@ packages: dev: true resolution: integrity: sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg== + /@babel/highlight/7.10.4: + dependencies: + '@babel/helper-validator-identifier': 7.10.4 + chalk: 2.4.2 + js-tokens: 4.0.0 + dev: true + resolution: + integrity: sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA== /@babel/parser/7.10.2: dev: true engines: @@ -308,6 +399,13 @@ packages: hasBin: true resolution: integrity: sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ== + /@babel/parser/7.11.4: + dev: true + engines: + node: '>=6.0.0' + hasBin: true + resolution: + integrity: sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA== /@babel/plugin-proposal-async-generator-functions/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -539,6 +637,15 @@ packages: '@babel/core': ^7.0.0-0 resolution: integrity: sha512-hgA5RYkmZm8FTFT3yu2N9Bx7yVVOKYT6yEdXXo6j2JTm0wNxgqaGeQVaSHRjhfnQbX91DtjFB6McRFSlcJH3xQ== + /@babel/plugin-syntax-typescript/7.10.4_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-plugin-utils': 7.10.4 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + resolution: + integrity: sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ== /@babel/plugin-transform-arrow-functions/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -897,6 +1004,17 @@ packages: '@babel/core': ^7.0.0-0 resolution: integrity: sha512-qX8KZcmbvA23zDi+lk9s6hC1FM7jgLHYIjuLgULgc8QtYnmB3tAVIYkNoKRQ75qWBeyzcoMoK8ZQmogGtC/w0g== + /@babel/plugin-transform-typescript/7.11.0_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-create-class-features-plugin': 7.10.5_@babel+core@7.10.2 + '@babel/helper-plugin-utils': 7.10.4 + '@babel/plugin-syntax-typescript': 7.10.4_@babel+core@7.10.2 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + resolution: + integrity: sha512-edJsNzTtvb3MaXQwj8403B7mZoGu9ElDJQZOKjGUnvilquxBA3IQoEIOvkX/1O8xfAsnHS/oQhe2w/IXrr+w0w== /@babel/plugin-transform-unicode-escapes/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -1016,6 +1134,16 @@ packages: '@babel/core': ^7.0.0-0 resolution: integrity: sha512-Rw0SxQ7VKhObmFjD/cUcKhPTtzpeviEFX1E6PgP+cYOhQ98icNqtINNFANlsdbQHrmeWnqdxA4Tmnl1jy5tp3Q== + /@babel/preset-typescript/7.10.4_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-plugin-utils': 7.10.4 + '@babel/plugin-transform-typescript': 7.11.0_@babel+core@7.10.2 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + resolution: + integrity: sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ== /@babel/runtime-corejs3/7.10.2: dependencies: core-js-pure: 3.6.5 @@ -1036,6 +1164,14 @@ packages: dev: true resolution: integrity: sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig== + /@babel/template/7.10.4: + dependencies: + '@babel/code-frame': 7.10.4 + '@babel/parser': 7.11.4 + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA== /@babel/traverse/7.10.1: dependencies: '@babel/code-frame': 7.10.1 @@ -1050,6 +1186,20 @@ packages: dev: true resolution: integrity: sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ== + /@babel/traverse/7.11.0: + dependencies: + '@babel/code-frame': 7.10.4 + '@babel/generator': 7.11.4 + '@babel/helper-function-name': 7.10.4 + '@babel/helper-split-export-declaration': 7.11.0 + '@babel/parser': 7.11.4 + '@babel/types': 7.11.0 + debug: 4.1.1 + globals: 11.12.0 + lodash: 4.17.19 + dev: true + resolution: + integrity: sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg== /@babel/types/7.10.2: dependencies: '@babel/helper-validator-identifier': 7.10.1 @@ -1058,6 +1208,14 @@ packages: dev: true resolution: integrity: sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng== + /@babel/types/7.11.0: + dependencies: + '@babel/helper-validator-identifier': 7.10.4 + lodash: 4.17.19 + to-fast-properties: 2.0.0 + dev: true + resolution: + integrity: sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA== /@bcoe/v8-coverage/0.2.3: dev: true resolution: @@ -1272,7 +1430,7 @@ packages: integrity: sha512-pPRkVkAQ91drKGbzCfDOoHN838+FSbYaEAvBXvKuWeeRRUD8FjwXkqfUNUZL6Ke48aA/1cqq/Ni7kVMCoqagWA== /@jest/types/25.5.0: dependencies: - '@types/istanbul-lib-coverage': 2.0.2 + '@types/istanbul-lib-coverage': 2.0.3 '@types/istanbul-reports': 1.1.2 '@types/yargs': 15.0.5 chalk: 3.0.0 @@ -1292,6 +1450,18 @@ packages: node: '>= 10.14.2' resolution: integrity: sha512-IbtjvqI9+eS1qFnOIEL7ggWmT+iK/U+Vde9cGWtYb/b6XgKb3X44ZAe/z9YZzoAAZ/E92m0DqrilF934IGNnQA== + /@jest/types/26.3.0: + dependencies: + '@types/istanbul-lib-coverage': 2.0.3 + '@types/istanbul-reports': 3.0.0 + '@types/node': 14.6.0 + '@types/yargs': 15.0.5 + chalk: 4.1.0 + dev: true + engines: + node: '>= 10.14.2' + resolution: + integrity: sha512-BDPG23U0qDeAvU4f99haztXwdAg3hz4El95LkAM+tHAqqhiVzRpEGHHU8EDxT/AnxOrA65YjLBwDahdJ9pTLJQ== /@rollup/plugin-babel/5.0.3_@babel+core@7.10.2+rollup@2.15.0: dependencies: '@babel/core': 7.10.2 @@ -1349,6 +1519,22 @@ packages: rollup: ^1.20.0||^2.0.0 resolution: integrity: sha512-KIeAmueDDaYMqMBnUngLVVZhURwxA12nq/YB6nGm5/JpVyOMwI1fCVU3oL/dAnnLBG7oiPXntO5LHOiMrfNXCA== + /@rollup/plugin-typescript/5.0.2_0a1a0f524a9d27ad422e76168b31793b: + dependencies: + '@rollup/pluginutils': 3.1.0_rollup@2.15.0 + resolve: 1.17.0 + rollup: 2.15.0 + tslib: 2.0.1 + typescript: 4.0.2 + dev: true + engines: + node: '>=8.0.0' + peerDependencies: + rollup: ^2.14.0 + tslib: '*' + typescript: '>=3.4.0' + resolution: + integrity: sha512-CkS028Itwjqm1uLbFVfpJgtVtnNvZ+og/m6UlNRR5wOOnNTWPcVQzOu5xGdEX+WWJxdvWIqUq2uR/RBt2ZipWg== /@rollup/pluginutils/3.1.0_rollup@2.15.0: dependencies: '@types/estree': 0.0.39 @@ -1486,23 +1672,40 @@ packages: dev: true resolution: integrity: sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ== + /@types/hoist-non-react-statics/3.3.1: + dependencies: + '@types/react': 16.9.47 + hoist-non-react-statics: 3.3.2 + dev: true + resolution: + integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== /@types/istanbul-lib-coverage/2.0.2: dev: true resolution: integrity: sha512-rsZg7eL+Xcxsxk2XlBt9KcG8nOp9iYdKCOikY9x2RFJCyOdNj4MKPQty0e8oZr29vVAzKXr1BmR+kZauti3o1w== + /@types/istanbul-lib-coverage/2.0.3: + dev: true + resolution: + integrity: sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw== /@types/istanbul-lib-report/3.0.0: dependencies: - '@types/istanbul-lib-coverage': 2.0.2 + '@types/istanbul-lib-coverage': 2.0.3 dev: true resolution: integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg== /@types/istanbul-reports/1.1.2: dependencies: - '@types/istanbul-lib-coverage': 2.0.2 + '@types/istanbul-lib-coverage': 2.0.3 '@types/istanbul-lib-report': 3.0.0 dev: true resolution: integrity: sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw== + /@types/istanbul-reports/3.0.0: + dependencies: + '@types/istanbul-lib-report': 3.0.0 + dev: true + resolution: + integrity: sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA== /@types/jest/25.2.3: dependencies: jest-diff: 25.5.0 @@ -1510,10 +1713,21 @@ packages: dev: true resolution: integrity: sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw== + /@types/jest/26.0.10: + dependencies: + jest-diff: 25.5.0 + pretty-format: 25.5.0 + dev: true + resolution: + integrity: sha512-i2m0oyh8w/Lum7wWK/YOZJakYF8Mx08UaKA1CtbmFeDquVhAEdA7znacsVSf2hJ1OQ/OfVMGN90pw/AtzF8s/Q== /@types/node/14.0.11: dev: true resolution: integrity: sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg== + /@types/node/14.6.0: + dev: true + resolution: + integrity: sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA== /@types/normalize-package-data/2.4.0: dev: true resolution: @@ -1531,6 +1745,12 @@ packages: dev: true resolution: integrity: sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA== + /@types/react-native/0.63.10: + dependencies: + '@types/react': 16.9.47 + dev: true + resolution: + integrity: sha512-9ZbfoWJFbxv7FVPTK7/Y8yRRViJ0bu62p3yKgeK3KqQmBKqQR14nvbIqBHkbBS1mtSWfGgBkPtxI2pmJni4VWQ== /@types/react-test-renderer/16.9.2: dependencies: '@types/react': 16.9.35 @@ -1561,12 +1781,27 @@ packages: dev: true resolution: integrity: sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== + /@types/styled-components/5.1.2: + dependencies: + '@types/hoist-non-react-statics': 3.3.1 + '@types/react': 16.9.47 + '@types/react-native': 0.63.10 + csstype: 3.0.3 + dev: true + resolution: + integrity: sha512-HNocYLfrsnNNm8NTS/W53OERSjRA8dx5Bn6wBd2rXXwt4Z3s+oqvY6/PbVt3e6sgtzI63GX//WiWiRhWur08qQ== /@types/testing-library__jest-dom/5.9.1: dependencies: '@types/jest': 25.2.3 dev: true resolution: integrity: sha512-yYn5EKHO3MPEMSOrcAb1dLWY+68CG29LiXKsWmmpVHqoP5+ZRiAVLyUHvPNrO2dABDdUGZvavMsaGpWNjM6N2g== + /@types/testing-library__jest-dom/5.9.2: + dependencies: + '@types/jest': 26.0.10 + dev: true + resolution: + integrity: sha512-K7nUSpH/5i8i0NagTJ+uFUDRueDlnMNhJtMjMwTGPPSqyImbWC/hgKPDCKt6Phu2iMJg2kWqlax+Ucj2DKMwpA== /@types/testing-library__react-hooks/3.2.0: dependencies: '@types/react': 16.9.35 @@ -1803,6 +2038,16 @@ packages: node: '>= 10.14.2' resolution: integrity: sha512-+AuoehOrjt9irZL7DOt2+4ZaTM6dlu1s5TTS46JBa0/qem4dy7VNW3tMb96qeEqcIh20LD73TVNtmVEeymTG7w== + /babel-plugin-react-docgen-typescript/1.4.2_6e5b3a67faae6c4866d9a003ec605c7e: + dependencies: + '@babel/core': 7.10.2 + react-docgen-typescript: 1.20.3_typescript@4.0.2 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + typescript: '*' + resolution: + integrity: sha512-PwXKu84cCMF9k1X4AlfU47V/1JR1wWJ5MDuaCb0gixnJwBWUM+wBYXWHy84Qjcn2FilR4WRy58srOKU2oiwmMw== /babel-plugin-react-docgen/4.1.0: dependencies: lodash: 4.17.15 @@ -1941,6 +2186,14 @@ packages: hasBin: true resolution: integrity: sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg== + /bs-logger/0.2.6: + dependencies: + fast-json-stable-stringify: 2.1.0 + dev: true + engines: + node: '>= 6' + resolution: + integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog== /bser/2.1.1: dependencies: node-int64: 0.4.0 @@ -2039,6 +2292,15 @@ packages: node: '>=10' resolution: integrity: sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A== + /chalk/4.1.0: + dependencies: + ansi-styles: 4.2.1 + supports-color: 7.1.0 + dev: true + engines: + node: '>=10' + resolution: + integrity: sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A== /char-regex/1.0.2: dev: true engines: @@ -2625,16 +2887,6 @@ packages: node: '>=8' resolution: integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== - /find-cache-dir/3.3.1: - dependencies: - commondir: 1.0.1 - make-dir: 3.1.0 - pkg-dir: 4.2.0 - dev: true - engines: - node: '>=8' - resolution: - integrity: sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ== /find-up/2.1.0: dependencies: locate-path: 2.0.0 @@ -2684,16 +2936,6 @@ packages: node: '>=0.10.0' resolution: integrity: sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk= - /fs-extra/8.1.0: - dependencies: - graceful-fs: 4.2.4 - jsonfile: 4.0.0 - universalify: 0.1.2 - dev: true - engines: - node: '>=6 <7 || >=8' - resolution: - integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== /fs-readdir-recursive/1.1.0: dev: true resolution: @@ -2877,6 +3119,12 @@ packages: node: '>=0.10.0' resolution: integrity: sha1-lbC2P+whRmGab+V/51Yo1aOe/k8= + /hoist-non-react-statics/3.3.2: + dependencies: + react-is: 16.13.1 + dev: true + resolution: + integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== /hosted-git-info/2.8.8: dev: true resolution: @@ -3631,6 +3879,19 @@ packages: node: '>= 10.14.2' resolution: integrity: sha512-byQ3n7ad1BO/WyFkYvlWQHTsomB6GIewBh8tlGtusiylAlaxQ1UpS0XYH0ngOyhZuHVLN79Qvl6/pMiDMSSG1g== + /jest-util/26.3.0: + dependencies: + '@jest/types': 26.3.0 + '@types/node': 14.6.0 + chalk: 4.1.0 + graceful-fs: 4.2.4 + is-ci: 2.0.0 + micromatch: 4.0.2 + dev: true + engines: + node: '>= 10.14.2' + resolution: + integrity: sha512-4zpn6bwV0+AMFN0IYhH/wnzIQzRaYVrz1A8sYnRnj4UXDXbOVtWmlaZkO9mipFqZ13okIfN87aDoJWB7VH6hcw== /jest-validate/26.0.1: dependencies: '@jest/types': 26.0.1 @@ -3768,12 +4029,6 @@ packages: hasBin: true resolution: integrity: sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA== - /jsonfile/4.0.0: - dev: true - optionalDependencies: - graceful-fs: 4.2.4 - resolution: - integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= /jsprim/1.4.1: dependencies: assert-plus: 1.0.0 @@ -3863,6 +4118,10 @@ packages: node: '>=8' resolution: integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g== + /lodash.memoize/4.1.2: + dev: true + resolution: + integrity: sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= /lodash.sortby/4.7.0: dev: true resolution: @@ -3872,7 +4131,6 @@ packages: resolution: integrity: sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== /lodash/4.17.19: - dev: false resolution: integrity: sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ== /loose-envify/1.4.0: @@ -3905,6 +4163,10 @@ packages: node: '>=8' resolution: integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== + /make-error/1.3.6: + dev: true + resolution: + integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== /makeerror/1.0.11: dependencies: tmpl: 1.0.4 @@ -4013,6 +4275,13 @@ packages: node: '>=0.10.0' resolution: integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== + /mkdirp/1.0.4: + dev: true + engines: + node: '>=10' + hasBin: true + resolution: + integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== /ms/2.0.0: dev: true resolution: @@ -4465,6 +4734,14 @@ packages: node: '>=0.6' resolution: integrity: sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== + /react-docgen-typescript/1.20.3_typescript@4.0.2: + dependencies: + typescript: 4.0.2 + dev: true + peerDependencies: + typescript: '>= 3.x' + resolution: + integrity: sha512-ISdbO2O5BbD62trroxGmcQXlkFzARRL8ylK0tdnzllGuxcMu3IbnPOFOY/dOfRl8K4LVG9U8yulEVwpyGxGNYA== /react-docgen/5.3.0: dependencies: '@babel/core': 7.10.2 @@ -4749,21 +5026,6 @@ packages: dev: true resolution: integrity: sha512-LfJ1OR/wJrJdNDVNrdhVm7CgENfaNoQlFYMaQ0vlQH3zO+BMVrBMWDX9k6HVcr9gHsKbthrkiBzWRfFU9fr0hQ== - /rollup-plugin-typescript2/0.27.2_rollup@2.15.0+typescript@4.0.2: - dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.15.0 - find-cache-dir: 3.3.1 - fs-extra: 8.1.0 - resolve: 1.17.0 - rollup: 2.15.0 - tslib: 2.0.1 - typescript: 4.0.2 - dev: true - peerDependencies: - rollup: '>=1.26.3' - typescript: '>=2.4.0' - resolution: - integrity: sha512-zarMH2F8oT/NO6p20gl/jkts+WxyzOlhOIUwUU/EDx5e6ewdDPS/flwLj5XFuijUCr64bZwqKuRVwCPdXXYefQ== /rollup/2.15.0: dev: true engines: @@ -5291,6 +5553,30 @@ packages: node: '>=8' resolution: integrity: sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg== + /ts-jest/26.3.0_jest@26.0.1+typescript@4.0.2: + dependencies: + '@types/jest': 26.0.10 + bs-logger: 0.2.6 + buffer-from: 1.1.1 + fast-json-stable-stringify: 2.1.0 + jest: 26.0.1 + jest-util: 26.3.0 + json5: 2.1.3 + lodash.memoize: 4.1.2 + make-error: 1.3.6 + mkdirp: 1.0.4 + semver: 7.3.2 + typescript: 4.0.2 + yargs-parser: 18.1.3 + dev: true + engines: + node: '>= 10' + hasBin: true + peerDependencies: + jest: '>=26 <27' + typescript: '>=3.8 <5.0' + resolution: + integrity: sha512-Jq2uKfx6bPd9+JDpZNMBJMdMQUC3sJ08acISj8NXlVgR2d5OqslEHOR2KHMgwymu8h50+lKIm0m0xj/ioYdW2Q== /tslib/2.0.1: dev: true resolution: @@ -5388,12 +5674,6 @@ packages: node: '>=0.10.0' resolution: integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg== - /universalify/0.1.2: - dev: true - engines: - node: '>= 4.0.0' - resolution: - integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== /unset-value/1.0.0: dependencies: has-value: 0.3.1 @@ -5629,19 +5909,25 @@ specifiers: '@babel/core': ^7.10.2 '@babel/preset-env': ^7.10.2 '@babel/preset-react': ^7.10.1 + '@babel/preset-typescript': ^7.10.4 '@equinor/eds-icons': 'workspace:*' '@equinor/eds-tokens': 'workspace:*' '@rollup/plugin-babel': ^5.0.3 '@rollup/plugin-commonjs': ^13.0.0 '@rollup/plugin-json': ^4.1.0 '@rollup/plugin-node-resolve': ^8.0.1 + '@rollup/plugin-typescript': ^5.0.2 '@testing-library/jest-dom': ^5.9.0 '@testing-library/react': ^10.2.1 '@testing-library/react-hooks': ^3.3.0 '@testing-library/user-event': ^10.3.2 + '@types/jest': ^26.0.10 '@types/react': ^16.9.47 '@types/react-dom': ^16.9.8 + '@types/styled-components': ^5.1.2 + '@types/testing-library__jest-dom': ^5.9.2 babel-plugin-react-docgen: ^4.1.0 + babel-plugin-react-docgen-typescript: ^1.4.2 babel-plugin-styled-components: ^1.10.7 focus-visible: ^5.1.0 jest: ^26.0.1 @@ -5653,7 +5939,7 @@ specifiers: react-dom: ^16.13.1 rollup: ^2.15.0 rollup-plugin-polyfill: ^3.0.0 - rollup-plugin-typescript2: ^0.27.2 styled-components: 4.4.1 + ts-jest: ^26.3.0 tslib: ^2.0.1 typescript: ^4.0.2 diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js index 97aa80e3b2..560dfa8c49 100644 --- a/libraries/core-react/rollup.config.js +++ b/libraries/core-react/rollup.config.js @@ -4,7 +4,8 @@ import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import babel from '@rollup/plugin-babel' import polyfill from 'rollup-plugin-polyfill' -import typescript from 'rollup-plugin-typescript2' +import typescript from '@rollup/plugin-typescript' + import pkg from './package.json' const peerDeps = Object.keys(pkg.peerDependencies || {}) @@ -17,10 +18,10 @@ const globals = { } const buildForStorybook = process.env.STORYBOOK - +const extensions = ['.jsx', '.js', '.tsx', '.ts'] export default [ { - input: 'src/index.js', + input: './src/index.js', external: peerDeps, watch: { clearScreen: true, @@ -28,19 +29,25 @@ export default [ }, plugins: [ json(), - resolve({ extensions: ['.jsx', '.js'] }), - typescript({ - tsconfig: 'tsconfig.json', - typescript: require('typescript'), - include: ['*.ts+(|x)', '**/*.ts+(|x)', '*.js+(|x)', '**/*.js+(|x)'], - exclude: ['node_modules/**'], - }), + resolve({ extensions }), + typescript(), babel({ exclude: 'node_modules/**', - presets: ['@babel/env', '@babel/preset-react'], + babelHelpers: 'bundled', + presets: ['@babel/preset-env', '@babel/preset-react'], + extensions, plugins: [ 'babel-plugin-styled-components', - ...(buildForStorybook ? ['babel-plugin-react-docgen'] : []), + ...(buildForStorybook + ? [ + [ + 'babel-plugin-react-docgen-typescript', + { + skipPropsWithName: ['ref', 'key', 'className'], + }, + ], + ] + : []), ], }), commonjs(), diff --git a/libraries/core-react/rtl.setup.js b/libraries/core-react/rtl.setup.ts similarity index 100% rename from libraries/core-react/rtl.setup.js rename to libraries/core-react/rtl.setup.ts diff --git a/libraries/core-react/src/Divider/Divider.jsx b/libraries/core-react/src/Divider/Divider.jsx deleted file mode 100644 index ca90b60a49..0000000000 --- a/libraries/core-react/src/Divider/Divider.jsx +++ /dev/null @@ -1,47 +0,0 @@ -// @ts-nocheck -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import { divider as tokens } from './Divider.tokens' - -const StyledDivider = styled.hr( - ({ backgroundColor, marginTop, marginBottom, dividerHeight: height }) => ({ - backgroundColor, - marginTop, - marginBottom, - height, - border: 'none', - width: '100%', - }), -) - -export const Divider = forwardRef(function Divider( - { color, variant, className }, - ref, -) { - const props = { - backgroundColor: tokens.color[color], - marginTop: tokens[variant].spacings.top, - marginBottom: tokens[variant].spacings.bottom, - dividerHeight: tokens.height, - } - - return -}) - -Divider.displayName = 'eds-divider' - -Divider.propTypes = { - // Valid colors - color: PropTypes.oneOf(['lighter', 'light', 'medium']), - // Vertical spacing - variant: PropTypes.oneOf(['small', 'medium']), - /** @ignore */ - className: PropTypes.string, -} - -Divider.defaultProps = { - color: 'medium', - variant: 'medium', - className: '', -} diff --git a/libraries/core-react/src/Divider/Divider.test.jsx b/libraries/core-react/src/Divider/Divider.test.tsx similarity index 92% rename from libraries/core-react/src/Divider/Divider.test.jsx rename to libraries/core-react/src/Divider/Divider.test.tsx index abf5f6ebfa..bb319d09aa 100644 --- a/libraries/core-react/src/Divider/Divider.test.jsx +++ b/libraries/core-react/src/Divider/Divider.test.tsx @@ -29,7 +29,7 @@ describe('Divider', () => { expect(container.firstChild).toHaveStyleRule('margin-top', spacingMedium) }) it('Sets backgroundColor to light according to color prop', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('background-color', light) }) it('Sets backgroundColor to lighter according to color prop', () => { @@ -41,7 +41,9 @@ describe('Divider', () => { expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) }) it('Can extend the css for the component', () => { - const { container } = render() + const { container } = render( + , + ) expect(container.firstChild).toHaveStyleRule('position', 'relative') expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) }) diff --git a/libraries/core-react/src/Divider/Divider.tokens.js b/libraries/core-react/src/Divider/Divider.tokens.ts similarity index 98% rename from libraries/core-react/src/Divider/Divider.tokens.js rename to libraries/core-react/src/Divider/Divider.tokens.ts index 23e2649f85..4fbcfd5c25 100644 --- a/libraries/core-react/src/Divider/Divider.tokens.js +++ b/libraries/core-react/src/Divider/Divider.tokens.ts @@ -1,4 +1,3 @@ -// @ts-nocheck import { tokens } from '@equinor/eds-tokens' const { diff --git a/libraries/core-react/src/Divider/Divider.tsx b/libraries/core-react/src/Divider/Divider.tsx new file mode 100644 index 0000000000..0783817dc7 --- /dev/null +++ b/libraries/core-react/src/Divider/Divider.tsx @@ -0,0 +1,42 @@ +import React, { forwardRef } from 'react' +import PropTypes from 'prop-types' +import styled from 'styled-components' +import { divider as tokens } from './Divider.tokens' + +type StyleProps = { + backgroundColor: string + marginTop: string + marginBottom: string + dividerHeight: string +} + +const StyledDivider = styled.hr` + border: none; + background-color: ${(props) => props.backgroundColor}; + margin-top: ${(props) => props.marginTop}; + margin-bottom: ${(props) => props.marginBottom}; + height: ${(props) => props.dividerHeight}; +` + +type Props = { + /** Color variants + @default medium */ + color?: 'lighter' | 'light' | 'medium' + /** Vertical spacings + @default medium */ + variant?: 'small' | 'medium' + className?: string +} + +export const Divider = forwardRef((props, ref) => { + const { color = 'medium', variant = 'medium', className } = props + const styleProps = { + backgroundColor: tokens.color[color], + marginTop: tokens[variant].spacings.top, + marginBottom: tokens[variant].spacings.bottom, + dividerHeight: tokens.height, + } + return +}) + +Divider.displayName = 'Divider' diff --git a/libraries/core-react/src/Divider/index.js b/libraries/core-react/src/Divider/index.ts similarity index 70% rename from libraries/core-react/src/Divider/index.js rename to libraries/core-react/src/Divider/index.ts index 271b490a2a..465ccc7fdb 100644 --- a/libraries/core-react/src/Divider/index.js +++ b/libraries/core-react/src/Divider/index.ts @@ -1,2 +1 @@ -// @ts-nocheck export { Divider } from './Divider' diff --git a/libraries/core-react/tsconfig.json b/libraries/core-react/tsconfig.json index dc84a49336..8ab5932e5d 100644 --- a/libraries/core-react/tsconfig.json +++ b/libraries/core-react/tsconfig.json @@ -12,7 +12,9 @@ "checkJs": true, "noEmit": true, "jsx": "react" + + //"declaration": true, }, - "include": ["src"], - "exclude": ["node_modules", "**/*.test.jsx"] + "include": ["./src"], + "exclude": ["node_modules"] }