diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..d63f192 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,11 @@ +{ + "extends": ["next", "prettier"], + "settings": { + "next": { + "rootDir": "src" + } + }, + "rules": { + "react/no-unescaped-entities": "off" + } +} diff --git a/.gitignore b/.gitignore index 14e9bf4..8bf20ec 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,10 @@ .env.production.local .vscode +# Next.js +.next +out + npm-debug.log* yarn-debug.log* yarn-error.log* diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..5540215 --- /dev/null +++ b/next.config.js @@ -0,0 +1,11 @@ +module.exports = { + webpack(config) { + config.module.rules.push({ + test: /\.svg$/i, + issuer: /\.[jt]sx?$/, + use: ['@svgr/webpack'] + }); + + return config; + } +}; diff --git a/package.json b/package.json index a488711..918cd0f 100644 --- a/package.json +++ b/package.json @@ -8,31 +8,32 @@ "@reach/dialog": "^0.16.2", "@reach/menu-button": "^0.16.2", "@reach/visually-hidden": "^0.16.0", + "@types/jest": "^29.0.0", + "@types/node": "^18.7.16", + "@types/react": "^17.0.0", + "@types/react-dom": "^18.0.6", "classnames": "^2.3.1", "color": "^4.2.3", "formik": "^2.2.9", "highlight.js": "^11.5.0", + "next": "^13.1.1", "prop-types": "^15.8.1", - "react": "^17.0.2", + "react": "^18.2.0", "react-app-polyfill": "^3.0.0", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "react-icons": "^4.3.1", - "react-router-dom": "^6.3.0", - "react-scripts": "5.0.0", "react-select": "^5.2.2", "sass": "^1.50.0", "sass-color-helpers": "^2.1.1", + "typescript": "^4.8.2", "yup": "^0.32.11" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "build:css": "sass src/scss/styles.scss build/solon.css" - }, - "eslintConfig": { - "extends": "react-app" + "lint": "next lint", + "dev": "next dev", + "build": "next build", + "start": "next start", + "build:css": "sass src/scss/styles.scss .next/solon.css" }, "browserslist": { "production": [ @@ -49,5 +50,12 @@ "ie 11", "ie 10" ] + }, + "devDependencies": { + "@svgr/webpack": "^6.5.1", + "eslint": "^8.31.0", + "eslint-config-next": "^13.1.6", + "eslint-config-prettier": "^8.6.0", + "eslint-config-react-app": "^7.0.1" } } diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 82e8059..0000000 --- a/public/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - Solon - - - -
- - diff --git a/src/App.js b/src/App.js deleted file mode 100644 index d61d87c..0000000 --- a/src/App.js +++ /dev/null @@ -1,197 +0,0 @@ -import React, { useEffect } from 'react'; -import classnames from 'classnames'; -import { useLocation, NavLink } from 'react-router-dom'; - -import { - FaFileAlt, - FaHeart, - FaPalette, - FaPuzzlePiece, - FaTools, - FaJsSquare, - FaFont, - FaGithub, - FaChevronLeft, - FaCog, - FaUniversalAccess -} from 'react-icons/fa'; -import { ReactComponent as SolonLogo } from './svg/solon_logo.svg'; -import { ReactComponent as SolonIcon } from './svg/solon_icon.svg'; -import { asc } from './utils/sorts'; -import useDisabledLinks from './hooks/useDisabledLinks'; -import classNames from 'classnames'; -import AppRoutes from './AppRoutes'; -import VisuallyHidden from '@reach/visually-hidden'; - -export const componentsNav = [ - ['/components/badges', 'Badges'], - ['/components/breadcrumbs', 'Breadcrumbs'], - ['/components/buttons', 'Buttons'], - ['/components/flashes', 'Flashes (alerts)'], - ['/components/forms', 'Forms'], - ['/components/formatted-currency', 'Formatted Currency'], - ['/components/formatted-plural', 'Formatted Plural'], - ['/components/loading', 'Loading'], - ['/components/modal', 'Modal'], - ['/components/pagination', 'Pagination'], - ['/components/progress-bar', 'Progress Bar'] -]; - -componentsNav.sort((a, b) => asc(a[1], b[1])); - -export const utilsNav = [ - ['/utils/breakpoints', 'Breakpoints'], - ['/utils/spacing', 'Spacing'], - ['/utils/colors', 'Colors'], - ['/utils/grids', 'Grids'], - ['/utils/borders', 'Borders'], - ['/utils/display', 'Display'] -]; - -utilsNav.sort((a, b) => asc(a[1], b[1])); - -const App = () => { - const medium = window.matchMedia('(max-width: 768px)'); - const [collapseSidebar, setCollapseSidebar] = React.useState(medium.matches); - const location = useLocation(); - useDisabledLinks(); - - useEffect(() => { - window.scrollTo(0, 0); - }, [location.pathname]); - - return ( -
- -
-
- -
-
- - Built with by Findaway, - in CLE. - -
-
-
- ); -}; - -export default App; diff --git a/src/AppRoutes.jsx b/src/AppRoutes.jsx deleted file mode 100644 index 09baa3c..0000000 --- a/src/AppRoutes.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Routes, Route } from 'react-router-dom'; -import ComponentsPage from './pages/Components'; -import ContentPage from './pages/Content'; -import UtilsPage from './pages/Utils'; -import HomePage from './pages/Home'; -import JSPage from './pages/Javascript'; -import ColorTester from './pages/ColorTester'; -import FontTester from './pages/FontTester'; -import BadgesPage from './pages/Components/BadgesPage'; -import BreadcrumbsPage from './pages/Components/BreadcrumbsPage'; -import ButtonsPage from './pages/Components/ButtonsPage'; -import FlashesPage from './pages/Components/FlashesPage'; -import FormattedCurrencyPage from './pages/Components/FormattedCurrencyPage'; -import FormattedPluralPage from './pages/Components/FormattedPluralPage'; -import PaginationPage from './pages/Components/PaginationPage'; -import LoadingPage from './pages/Components/LoadingPage'; -import ModalPage from './pages/Components/ModalPage'; -import FormsPage from './pages/Components/FormsPage'; -import BrandSettings from './pages/BrandSettings'; -import ColorsPage from './pages/Utils/ColorsPage'; -import SpacingPage from './pages/Utils/SpacingPage'; -import BreakpointsPage from './pages/Utils/BreakpointsPage'; -import GridsPage from './pages/Utils/GridsPage'; -import BorderRadiusPage from './pages/Utils/BorderRadiusPage'; -import ProgressBarPage from './pages/Components/ProgressBar'; -import Accessibility from './pages/Accessibility'; -import DisplayPage from './pages/Utils/Display'; - -const AppRoutes = () => { - return ( - - } /> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - } /> - } /> - } /> - } /> - - ); -}; -export default AppRoutes; diff --git a/src/components/Breadcrumbs.jsx b/src/components/Breadcrumbs.tsx similarity index 53% rename from src/components/Breadcrumbs.jsx rename to src/components/Breadcrumbs.tsx index 4a13345..963ac92 100644 --- a/src/components/Breadcrumbs.jsx +++ b/src/components/Breadcrumbs.tsx @@ -1,8 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; import classnames from 'classnames'; -export const Breadcrumbs = ({ children, className }) => { +interface BreadcrumbsProps { + className?: string; +} + +export const Breadcrumbs: React.FC = ({ children, className }) => { return (