diff --git a/.eslintrc.js b/.eslintrc.js index 6d0fd62b57..68e672e7c7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,28 +1,44 @@ module.exports = { - parserOptions: { - ecmaFeatures: { jsx: true }, - project: './tsconfig.json', + root: true, + env: { + node: true, + browser: true, + es6: true, }, extends: [ 'eslint:recommended', 'plugin:import/recommended', - 'plugin:import/typescript', - 'plugin:@typescript-eslint/recommended', 'plugin:jsx-a11y/recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', + 'plugin:@next/next/recommended', 'plugin:prettier/recommended', ], - env: { - node: true, - }, - parser: '@typescript-eslint/parser', + plugins: ['import', 'react', 'jsx-a11y', 'prettier'], + overrides: [ + { + // Typescript + files: ['**/*.ts?(x)'], + extends: [ + 'plugin:import/typescript', + 'plugin:@typescript-eslint/recommended', + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { jsx: true }, + project: './tsconfig.json', + }, + rules: { + '@typescript-eslint/consistent-type-exports': 'warn', + '@typescript-eslint/consistent-type-imports': 'warn', + }, + }, + ], rules: { - // Disabled because of Typescript + // Disabled because we use Typescript types for props 'react/prop-types': ['off'], 'react/jsx-no-bind': 'off', - '@typescript-eslint/consistent-type-exports': 'warn', - '@typescript-eslint/consistent-type-imports': 'warn', + 'import/no-unresolved': 'error', 'import/order': [ 'warn', { @@ -47,7 +63,8 @@ module.exports = { }, 'import/resolver': { typescript: { - project: '.', + alwaysTryTypes: true, + project: './tsconfig.json', }, }, }, diff --git a/commitlint.rules.js b/commitlint.rules.js index 819b0194d3..ac70a39ce4 100644 --- a/commitlint.rules.js +++ b/commitlint.rules.js @@ -1,5 +1,5 @@ module.exports = { - rules: { - 'subject-case': [0] - } -} \ No newline at end of file + rules: { + 'subject-case': [0], + }, +}; diff --git a/docs-components/FrontpageNavigation/FrontpageNavigation.tsx b/docs-components/FrontpageNavigation/FrontpageNavigation.tsx index 47ddeb7e84..8a51edbdca 100644 --- a/docs-components/FrontpageNavigation/FrontpageNavigation.tsx +++ b/docs-components/FrontpageNavigation/FrontpageNavigation.tsx @@ -1,5 +1,4 @@ import React from 'react'; - import { SystemFilled, Wrench, Picture } from '@navikt/ds-icons'; import type { NavigationCardProps } from '../NavigationCard/NavigationCard'; diff --git a/docs-components/NavigationCard/NavigationCard.tsx b/docs-components/NavigationCard/NavigationCard.tsx index b1056e8a5e..0c5161a1a6 100644 --- a/docs-components/NavigationCard/NavigationCard.tsx +++ b/docs-components/NavigationCard/NavigationCard.tsx @@ -1,10 +1,9 @@ import React, { useEffect, useState } from 'react'; import { SystemFilled } from '@navikt/ds-icons'; +import cn from 'classnames'; import classes from './NavigationCard.module.css'; -import cn from 'classnames'; - interface NavigationCardProps { name: string; desc: string; diff --git a/docs-components/Table/PropsTable/PropsTable.tsx b/docs-components/Table/PropsTable/PropsTable.tsx index c7469e7620..9e8fe305f9 100644 --- a/docs-components/Table/PropsTable/PropsTable.tsx +++ b/docs-components/Table/PropsTable/PropsTable.tsx @@ -1,10 +1,11 @@ import React from 'react'; + import { Table } from '../Table'; import { TableCellTag } from '../TableCells/TableCells'; const PropsTable = () => { const getRows = () => { - let arr = []; + const arr = []; arr.push({ row: [ diff --git a/package.json b/package.json index 40c8fe3376..b2b507dc96 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "add-component-core": "node scripts/add-component.mjs", "lerna:version": "lerna version --conventional-commits --no-private", "lerna:publish": "lerna publish from-git", - "build:tokens": "yarn workspace @digdir/design-system-tokens build" + "build:tokens": "yarn workspace @digdir/design-system-tokens build", + "lint": "eslint", + "lint:all": "eslint ." }, "devDependencies": { "@altinn/figma-design-tokens": "^6.0.1", @@ -32,6 +34,7 @@ "@etchteam/storybook-addon-status": "^4.2.2", "@mdx-js/react": "1.6.22", "@navikt/ds-icons": "^1.5.9", + "@next/eslint-plugin-next": "^13.2.4", "@rollup/plugin-commonjs": "^22.0.2", "@rollup/plugin-image": "^3.0.1", "@rollup/plugin-json": "^5.0.2", diff --git a/packages/icons/.gitignore b/packages/icons/.gitignore deleted file mode 100644 index 0a85c4c985..0000000000 --- a/packages/icons/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -cjs -esm -.pnpm-debug.log \ No newline at end of file diff --git a/packages/icons/build.js b/packages/icons/build.js index 98f157dfb7..9425ae7761 100644 --- a/packages/icons/build.js +++ b/packages/icons/build.js @@ -1,9 +1,9 @@ import fs from 'fs/promises'; -import rimraf from 'rimraf'; +import { rimraf } from 'rimraf'; import { transform } from '@svgr/core'; import camelcase from 'camelcase'; -import babel from '@babel/core'; +import { transformAsync } from '@babel/core'; import { minify } from 'terser'; const outputPath = './'; @@ -22,7 +22,7 @@ async function transformSVGtoJSX(file, componentName, format) { }, { componentName }, ); - const { code } = await babel.transformAsync(svgReactContent, { + const { code } = await transformAsync(svgReactContent, { presets: [['@babel/preset-react', { useBuiltIns: true }]], }); @@ -60,9 +60,9 @@ function indexFileContent(files, format, includeExtension = true) { async function buildIcons(format = 'esm') { let outDir = outputPath; if (format === 'esm') { - outDir = `${outputPath}/esm`; + outDir = `${outputPath}/dist/esm`; } else { - outDir = `${outputPath}/cjs`; + outDir = `${outputPath}/dist/cjs`; } await fs.mkdir(outDir, { recursive: true }); @@ -98,11 +98,7 @@ async function buildIcons(format = 'esm') { (function main() { console.log('🏗 Building icon package...'); - new Promise((resolve) => { - rimraf(`${outputPath}/esm`, () => { - rimraf(`${outputPath}/cjs`, resolve); - }); - }) + rimraf(`${outputPath}/dist`) .then(() => Promise.all([buildIcons('cjs'), buildIcons('esm')])) .then(() => console.log('✅ Finished building package.')); })(); diff --git a/packages/icons/package.json b/packages/icons/package.json index fbd01cd3be..d1930c7231 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -9,8 +9,8 @@ ], "license": "BSD-3-Clause", "type": "module", - "main": "./cjs/index.js", - "module": "./esm/index.js", + "main": "./dist/cjs/index.js", + "module": "./dist/esm/index.js", "files": [ "/svg", "/cjs", @@ -20,10 +20,11 @@ "scripts": { "clean": "rimraf ./optimized", "optimize": "svgo -q -p 8 -f ./svg -o ./optimized", - "build": "yarn clean && yarn optimize && node build.js && rimraf ./optimized " + "build": "yarn clean && yarn optimize && node build.js && yarn clean" }, "devDependencies": { "camelcase": "^7.0.1", + "rimraf": "^4.3.0", "svgo": "^3.0.2" }, "dependencies": { diff --git a/packages/react/test/jest.setup.ts b/packages/react/test/jest.setup.ts deleted file mode 100644 index bcd5c636f5..0000000000 --- a/packages/react/test/jest.setup.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '../../../test/jest.setup'; diff --git a/storefront/.eslintrc.json b/storefront/.eslintrc.json deleted file mode 100644 index bffb357a71..0000000000 --- a/storefront/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/storefront/components/ArgsTable/ArgsTable.tsx b/storefront/components/ArgsTable/ArgsTable.tsx index 225aec8245..33ca16e22a 100644 --- a/storefront/components/ArgsTable/ArgsTable.tsx +++ b/storefront/components/ArgsTable/ArgsTable.tsx @@ -1,8 +1,8 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import cn from 'classnames'; +import Tippy from '@tippyjs/react'; import classes from './ArgsTable.module.css'; -import Tippy from '@tippyjs/react'; interface ArgsTable { argTypes: any; diff --git a/storefront/components/Banner/Banner.tsx b/storefront/components/Banner/Banner.tsx index 7f2919b5cb..a54b305ffb 100644 --- a/storefront/components/Banner/Banner.tsx +++ b/storefront/components/Banner/Banner.tsx @@ -1,6 +1,7 @@ +import React from 'react'; import { Col, Container, Row } from 'react-bootstrap'; import cn from 'classnames'; -import { Button, ButtonSize } from '@digdir/design-system-react'; +// import { Button, ButtonSize } from '@digdir/design-system-react'; import { Tag } from '../Tag/Tag'; diff --git a/storefront/components/Card/Card.tsx b/storefront/components/Card/Card.tsx index a4a9ca7841..5532077679 100644 --- a/storefront/components/Card/Card.tsx +++ b/storefront/components/Card/Card.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Link from 'next/link'; + import classes from './Card.module.css'; interface CardProps { diff --git a/storefront/components/CodeSnippet/CodeSnippet.tsx b/storefront/components/CodeSnippet/CodeSnippet.tsx index 0bf9385d59..b04ad87cac 100644 --- a/storefront/components/CodeSnippet/CodeSnippet.tsx +++ b/storefront/components/CodeSnippet/CodeSnippet.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { Copy } from '@navikt/ds-icons'; -import classes from './CodeSnippet.module.css'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import prettier from 'prettier/standalone.js'; import parserJs from 'prettier/parser-flow.js'; @@ -10,8 +9,9 @@ import parserTs from 'prettier/parser-typescript'; import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import Tippy from '@tippyjs/react'; +import classes from './CodeSnippet.module.css'; + const CodeSnippet = ({ language = 'markup', children = '' }) => { - const [showToolTip, setShowToolTip] = useState(false); const [toolTipText, setToolTipText] = useState('Kopier'); if (language === 'css' || language === 'scss') { @@ -60,7 +60,7 @@ const CodeSnippet = ({ language = 'markup', children = '' }) => { onClick={() => onButtonClick()} className={classes['code-snippet__icon']} > - + { useEffect(() => { setControls({ children: 'Button' }); - Object.keys(argTypes).map((item, index) => { + Object.keys(argTypes).map((item) => { if (argTypes[item].control) { setControls((state) => ({ ...state, @@ -29,7 +25,7 @@ const Controls = ({ component, argTypes }: ControlsProps) => { })); } }); - }, []); + }, [argTypes]); const onRadioChanged = (prop: string, value: string | undefined) => { console.log(prop, value); diff --git a/storefront/components/Footer/Footer.tsx b/storefront/components/Footer/Footer.tsx index 424d95be13..c0bd46786b 100644 --- a/storefront/components/Footer/Footer.tsx +++ b/storefront/components/Footer/Footer.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Container } from 'react-bootstrap'; +import Image from 'next/image'; import classes from './Footer.module.css'; @@ -7,9 +8,11 @@ const Footer = () => { return (
- Logo
diff --git a/storefront/components/Header/Header.tsx b/storefront/components/Header/Header.tsx index 695d2af24f..226914f0f6 100644 --- a/storefront/components/Header/Header.tsx +++ b/storefront/components/Header/Header.tsx @@ -1,11 +1,13 @@ -import classes from './Header.module.css'; +import React, { useState } from 'react'; import { Container } from 'react-bootstrap'; import Link from 'next/link'; +import Image from 'next/image'; import { useRouter } from 'next/router'; import { Hamburger, Close } from '@navikt/ds-icons'; -import { useState } from 'react'; import cn from 'classnames'; +import classes from './Header.module.css'; + const Header = () => { const router = useRouter(); const [open, setOpen] = useState(false); @@ -37,10 +39,12 @@ const Header = () => { >
- Logo
diff --git a/storefront/components/ImageSection/ImageSection.tsx b/storefront/components/ImageSection/ImageSection.tsx index 8c99b4402b..3cae2602e4 100644 --- a/storefront/components/ImageSection/ImageSection.tsx +++ b/storefront/components/ImageSection/ImageSection.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Col, Row, Container } from 'react-bootstrap'; +import Image from 'next/image'; import classes from './ImageSection.module.css'; @@ -9,6 +10,8 @@ interface ImageSectionProps { src: string; content?: React.ReactNode; id?: string; + width: number; + height: number; } const ImageSection = ({ @@ -17,6 +20,8 @@ const ImageSection = ({ src, content, id, + width, + height, }: ImageSectionProps) => { return (
- Image diff --git a/storefront/components/Meta/Meta.tsx b/storefront/components/Meta/Meta.tsx index f8ac353d16..867b20cb7c 100644 --- a/storefront/components/Meta/Meta.tsx +++ b/storefront/components/Meta/Meta.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import Head from 'next/head'; interface MetaProps { diff --git a/storefront/components/NavigationCard/NavigationCard.tsx b/storefront/components/NavigationCard/NavigationCard.tsx index 05ec6bc50b..840e0074ca 100644 --- a/storefront/components/NavigationCard/NavigationCard.tsx +++ b/storefront/components/NavigationCard/NavigationCard.tsx @@ -1,10 +1,10 @@ -import classes from './NavigationCard.module.css'; import Link from 'next/link'; - import cn from 'classnames'; import React from 'react'; -interface NavigationCardProps { +import classes from './NavigationCard.module.css'; + +export interface NavigationCardProps { title: string; color: 'red' | 'blue' | 'yellow'; icon: React.ReactNode; @@ -13,7 +13,7 @@ interface NavigationCardProps { url?: string; } -const NavigationCard = ({ +export const NavigationCard = ({ title, color = 'red', icon, @@ -32,5 +32,3 @@ const NavigationCard = ({ ); }; - -export default NavigationCard; diff --git a/storefront/components/Preview/Preview.tsx b/storefront/components/Preview/Preview.tsx index af4fed1846..1bd19d1460 100644 --- a/storefront/components/Preview/Preview.tsx +++ b/storefront/components/Preview/Preview.tsx @@ -1,4 +1,4 @@ -import React, { useState, Children, useEffect } from 'react'; +import React, { useState, Children, useEffect, useCallback } from 'react'; import reactElementToJSXString from 'react-element-to-jsx-string'; import { CodeSnippet } from '../CodeSnippet/CodeSnippet'; @@ -22,11 +22,7 @@ const PreviewItem = ({ component, args }: PreviewItemProps) => { const Preview = ({ children, backgroundColor = 'light' }: PreviewProps) => { const [showCode, setShowCode] = useState(false); - useEffect(() => { - getString(); - }, []); - - const getString = () => { + const getString = useCallback(() => { let s = ''; if (React.Children.toArray(children).length > 1) { @@ -48,7 +44,11 @@ const Preview = ({ children, backgroundColor = 'light' }: PreviewProps) => { } return s; - }; + }, [children]); + + useEffect(() => { + getString(); + }, [getString]); return (
diff --git a/storefront/components/Section/Section.tsx b/storefront/components/Section/Section.tsx index 0a78553458..249412f53a 100644 --- a/storefront/components/Section/Section.tsx +++ b/storefront/components/Section/Section.tsx @@ -1,7 +1,9 @@ -import classes from './Section.module.css'; import { Container } from 'react-bootstrap'; import React from 'react'; import cn from 'classnames'; +import Image from 'next/image'; + +import classes from './Section.module.css'; interface SectionProps { children: React.ReactNode; @@ -22,7 +24,7 @@ const Section = ({
{title &&

{title}

} {detail && ( - {
  • Varianter @@ -18,7 +18,7 @@ const TableOfContents = () => {
  • Bruk @@ -26,7 +26,7 @@ const TableOfContents = () => {
  • Størrelser @@ -34,7 +34,7 @@ const TableOfContents = () => {
  • Tilgjengelighet diff --git a/storefront/drafts/ComponentLayout/ComponentLayout.tsx b/storefront/drafts/ComponentLayout/ComponentLayout.tsx index 9f002ff894..3957828f4e 100644 --- a/storefront/drafts/ComponentLayout/ComponentLayout.tsx +++ b/storefront/drafts/ComponentLayout/ComponentLayout.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Col, Container, Row } from 'react-bootstrap'; +import Image from 'next/image'; import Header from '../../components/Header/Header'; import { TableOfContents } from '../../components/TableOfContents/TableOfContents'; @@ -51,7 +52,7 @@ const ComponentLayout = ({ data, content, menu }: ComponentLayoutProps) => { target='_blank' rel='noreferrer' > - Storybook @@ -63,7 +64,7 @@ const ComponentLayout = ({ data, content, menu }: ComponentLayoutProps) => { target='_blank' rel='noreferrer' > - Figma @@ -75,7 +76,7 @@ const ComponentLayout = ({ data, content, menu }: ComponentLayoutProps) => { target='_blank' rel='noreferrer' > - Github @@ -87,7 +88,7 @@ const ComponentLayout = ({ data, content, menu }: ComponentLayoutProps) => { target='_blank' rel='noreferrer' > - Endringslogg diff --git a/storefront/drafts/ComponentsLayout/ComponentsLayout.tsx b/storefront/drafts/ComponentsLayout/ComponentsLayout.tsx index 31b45db610..e5eb3f39bb 100644 --- a/storefront/drafts/ComponentsLayout/ComponentsLayout.tsx +++ b/storefront/drafts/ComponentsLayout/ComponentsLayout.tsx @@ -1,8 +1,9 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { Col, Container, Row } from 'react-bootstrap'; import Link from 'next/link'; -import { capitalizeString } from '../../utils/StringHelpers'; +import Image from 'next/image'; +import { capitalizeString } from '../../utils/StringHelpers'; import Header from '../../components/Header/Header'; import { SidebarMenu } from '../../components/SidebarMenu/SidebarMenu'; @@ -38,9 +39,10 @@ const ComponentsLayout = ({ Content, data, menu }: ComponentsLayoutProps) => {
    - diff --git a/storefront/drafts/UpdateLayout/UpdateLayout.tsx b/storefront/drafts/UpdateLayout/UpdateLayout.tsx index a7e61fa9a4..0626de9e0d 100644 --- a/storefront/drafts/UpdateLayout/UpdateLayout.tsx +++ b/storefront/drafts/UpdateLayout/UpdateLayout.tsx @@ -1,7 +1,8 @@ -import Header from '../../components/Header/Header'; import React from 'react'; import { Container, Row, Col } from 'react-bootstrap'; +import Header from '../../components/Header/Header'; + import classes from './UpdateLayout.module.css'; interface PageLayoutProps { diff --git a/storefront/drafts/test.tsx b/storefront/drafts/test.tsx deleted file mode 100644 index 522c517b14..0000000000 --- a/storefront/drafts/test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -// @ts-ignore -const tomato = [ - { - name: 'Grunnleggende', - url: 'http', - children: [ - { - name: 'Design', - url: '', - }, - ], - }, -]; diff --git a/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx b/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx index 79c48b2e9f..c8fa82f82d 100644 --- a/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx +++ b/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx @@ -4,7 +4,7 @@ import { Email } from '@navikt/ds-icons'; import Header from '../../components/Header/Header'; import Section from '../../components/Section/Section'; -import NavigationCard from '../../components/NavigationCard/NavigationCard'; +import { NavigationCard } from '../../components/NavigationCard/NavigationCard'; import Banner from '../../components/Banner/Banner'; import { ImageSection } from '../../components/ImageSection/ImageSection'; @@ -66,6 +66,8 @@ const FrontpageLayout = ({ Content, data }: FrontpageLayoutProps) => { title={data.contributeSection.title} description={data.contributeSection.description} src={data.contributeSection.image} + width={data.contributeSection.imageWidth} + height={data.contributeSection.imageHeight} content={ {menu.items.map((item, index) => ( -
    +
    {item.name}
    {item.children && item.children.map((item2, index2) => ( -
    +
    --{item2.name}
    {item2.children && item2.children.map((item3, index3) => ( -
    +
    ----{item3.name}
    ))} @@ -70,7 +88,7 @@ const NavigationPageLayout = ({

    {data.description}

    - {data.sections.map((item: any, index: number) => ( + {data.sections.map((item, index: number) => (
    - {item.items.map((item: any, index: number) => ( + {item.items.map((item, index: number) => ( { return (
    -