chore: Clean up root dependencies (#200)

* 🚧 wip * ➕ Adde missing typescript * 🔧 Updated babel config * 🔥 Removed react-tippy & CodeSnippet * ♻️ Rewrote IconSearch to work without SvgModal * 🚨 Linted some mdx files * 👷 Updated package & lock files * 🔥 Removed lucide-react
digdir · Mar 6, 2023 · c6d7c23 · c6d7c23
1 parent c07a288
commit c6d7c23
Show file tree

Hide file tree

Showing 18 changed files with 213 additions and 470 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -5,7 +5,6 @@ import React from 'react';
 import { DocsContainer } from '@storybook/addon-docs';
 import '@altinn/figma-design-tokens/dist/tokens.css';
 import { TableOfContents } from '../docs-components';
-import 'react-tippy/dist/tippy.css';
 
 export const parameters = {
   status: {

diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,12 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
     '@babel/preset-typescript',
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
   ],
 };
diff --git a/docs-components/CodeSnippet/CodeSnippet.module.css b/docs-components/CodeSnippet/CodeSnippet.module.css
diff --git a/docs-components/CodeSnippet/CodeSnippet.tsx b/docs-components/CodeSnippet/CodeSnippet.tsx
diff --git a/docs-components/SvgModal/SvgModal.tsx b/docs-components/SvgModal/SvgModal.tsx
@@ -1,31 +1,28 @@
-import React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { X, Download } from 'lucide-react';
-import ReactDOMServer from 'react-dom/server';
-
-import { CodeSnippet } from '../CodeSnippet/CodeSnippet';
+import React, { cloneElement } from 'react';
+import { Close, Download } from '@navikt/ds-icons';
+import { renderToString } from 'react-dom/server';
+import { Source } from '@storybook/addon-docs';
 
 import classes from './SvgModal.module.css';
 
 interface SvgModalProps {
-  Icon: React.ReactNode;
+  icon: React.ReactElement;
   name: string;
   showModal: boolean;
-  closeModal: any;
+  closeModal: () => void;
   packageName: string;
   newIcon: boolean;
 }
 
 const SvgModal = ({
-  Icon,
+  icon,
   name,
   showModal = false,
   closeModal,
   packageName,
   newIcon,
 }: SvgModalProps) => {
-  const icon = <Icon />;
+  const Icon = cloneElement(icon, { height: 160, width: 160 });
 
   const onClickHandler = () => {
     closeModal();
@@ -35,11 +32,12 @@ const SvgModal = ({
     <>
       {showModal && (
         <div className={classes['svg-modal']}>
-          <div
-            role='button'
+          <button
             onClick={() => onClickHandler()}
             className={classes['svg-modal__opacity']}
-          ></div>
+          >
+            close
+          </button>
 
           <div className={classes['svg-modal__box']}>
             <div className={classes['svg-modal__header']}>
@@ -55,46 +53,41 @@ const SvgModal = ({
                 <button className={classes['svg-modal__svg-btn']}>
                   <Download
                     color='#1E2B3C'
-                    size={25}
-                  />{' '}
+                    scale={3}
+                  />
                   Last ned svg
                 </button>
                 <button
                   onClick={() => onClickHandler()}
                   className={classes['svg-modal__close-btn']}
                 >
-                  <X
-                    size={30}
+                  <Close
+                    scale={3}
                     color='#686868'
                   />
                 </button>
               </div>
             </div>
             <div className={classes['svg-modal__content']}>
-              <div className={classes['svg-modal__content-left']}>
-                <Icon
-                  height={160}
-                  width={160}
-                />
-              </div>
+              <div className={classes['svg-modal__content-left']}>{Icon}</div>
               <div className={classes['svg-modal__content-right']}>
                 <h3>React og SVG import</h3>
-                <CodeSnippet
+                <Source
                   language='javascript'
-                  children={`
+                  code={`
 import { ${name} }  from '${packageName}';
               `}
                 />
-                <CodeSnippet
+                <Source
                   language='javascript'
-                  children={`
+                  code={`
 import ${name} from '${packageName}/svg/${name}.svg';
               `}
                 />
                 <h3 className={classes['svg-modal__svg-title']}>SVG</h3>
-                <CodeSnippet
+                <Source
                   language='plain'
-                  children={ReactDOMServer.renderToString(icon)}
+                  code={renderToString(icon)}
                 />
               </div>
             </div>

diff --git a/docs-components/index.ts b/docs-components/index.ts
@@ -10,7 +10,6 @@ export {
 } from './Table/TableCells/TableCells';
 export { TableOfContents } from './TableOfContents/TableOfContents';
 export { SvgModal } from './SvgModal/SvgModal';
-export { CodeSnippet } from './CodeSnippet/CodeSnippet';
 export { GithubReleasesChangelog } from './GithubReleasesChangelog/GithubReleasesChangelog';
 export { Changelog } from './Changelog/Changelog';
 export { ComponentOverview } from './ComponentOverview/component-overview';

diff --git a/package.json b/package.json
@@ -25,7 +25,10 @@
     "@altinn/figma-design-tokens": "^6.0.1",
     "@babel/core": "^7.19.1",
     "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.4.1",
+    "@commitlint/config-conventional": "^17.4.0",
     "@etchteam/storybook-addon-status": "^4.2.2",
     "@mdx-js/react": "1.6.22",
     "@navikt/ds-icons": "^1.5.9",
@@ -55,8 +58,11 @@
     "@testing-library/user-event": "^14.4.3",
     "@tippyjs/react": "^4.2.6",
     "@types/jest": "^29.0.0",
+    "@types/node": "^18.11.11",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/react-syntax-highlighter": "^15.5.5",
+    "@types/rimraf": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "5.36.1",
     "@typescript-eslint/parser": "5.36.1",
@@ -81,7 +87,10 @@
     "prettier": "^2.7.1",
     "react": "^18.1.0",
     "react-dom": "^18.0.0",
+    "react-markdown": "^8.0.5",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
+    "rimraf": "^3.0.2",
     "rollup": "^2.79.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -91,34 +100,10 @@
     "sass-loader": "^13.0.2",
     "storybook-addon-designs": "^6.3.1",
     "storybook-css-modules": "^1.0.8",
-    "ts-jest": "^29.0.1",
-    "tslib": "^2.4.1"
-  },
-  "dependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@commitlint/cli": "^17.4.1",
-    "@commitlint/config-conventional": "^17.4.0",
-    "@floating-ui/react": "^0.17.0",
-    "@types/lodash.startcase": "^4.4.7",
-    "@types/node": "^18.11.11",
-    "@types/react-syntax-highlighter": "^15.5.5",
-    "@types/rimraf": "^3.0.2",
-    "axios": "^1.2.1",
-    "camelcase": "^7.0.0",
-    "date-fns": "^2.29.3",
-    "dotenv": "^16.0.3",
-    "husky": "^8.0.3",
-    "lodash.startcase": "^4.4.0",
-    "lucide-react": "^0.104.1",
-    "moment": "^2.29.4",
-    "p-limit": "^3.1.0",
-    "react-markdown": "^8.0.5",
-    "react-number-format": "^5.1.2",
-    "react-tippy": "^1.4.0",
-    "remark-gfm": "^3.0.1",
-    "rimraf": "^3.0.2",
-    "svgo": "^3.0.2",
     "terser": "^5.16.0",
-    "ts-node": "^10.9.1"
+    "ts-jest": "^29.0.1",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.5"
   }
 }