diff --git a/.circleci/config.yml b/.circleci/config.yml index 77833ed31..9741ba3cf 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -74,6 +74,11 @@ jobs: - checkout - node/install-packages: pkg-manager: yarn + - run: + name: Prepare Packages + command: yarn workspaces run prepare + - store_artifacts: + path: ./node_modules/@espressive/cascara # check to see why we do not have @espressive/cascara - save_cache: key: cascara-MONOREPO_INSTALLED-{{ .Revision }} paths: diff --git a/.danger/README.md b/.danger/README.md new file mode 100644 index 000000000..5b3527e80 --- /dev/null +++ b/.danger/README.md @@ -0,0 +1,5 @@ +# Danger JS + +[Danger.js](https://danger.systems/js/) is being used to evaluate the most common issues we have with our pull requests. Instead of making developers ask for corrections in titles, description changes stating why dependencies were added, etc... we can instead automate checks for these items so developers can spend time evaluating code instead of evaluating if people are following our process. + +The goal is to have the team slowly add rules and tests over time to improve common, repetitive PR tasks. diff --git a/.danger/index.ts b/.danger/index.ts new file mode 100644 index 000000000..360497394 --- /dev/null +++ b/.danger/index.ts @@ -0,0 +1,66 @@ +import { danger, warn, fail, message } from 'danger'; + +// Git specific values +const modifiedFiles = danger.git.modified_files; +const newFiles = danger.git.created_files; +const changedFiles = [...modifiedFiles, ...newFiles]; + +// Github specific values +const github = { + description: danger.github.pr.body, + assignee: danger.github.pr.assignee, +}; + +// Changed file evaluations +const changed = { + fixtures: modifiedFiles.filter((file) => file.includes('fixture.js')), + packages: changedFiles.filter((file) => file.includes('package.json')), + snapshots: modifiedFiles.filter((file) => file.includes('test.snap')), +}; + +// PR description sections +const descSection = { + dependencies: '### Dependencies', + snapshots: '### Snapshots', +}; + +// Evaluates the description to see if it contains a particular section +const hasDescriptionSection = (section: keyof typeof descSection) => + github.description.includes(descSection[section]); + +// No PR is too small to include a description of why you made a change +if (github.description.length < 10) { + warn('Please include a description of your PR changes.'); +} + +// Check that someone has been assigned to this PR +if (github.assignee === null) { + warn( + 'Please assign someone to merge this PR, and optionally include people who should review.' + ); +} + +// Check if we are modifying any Cosmos fixtures +if (changed.fixtures) { + for (let file of changed.fixtures) { + message(`**${file}**: This fixture has been changed.`, file); + } +} + +// Check if we are updating or adding any package dependencies +if (changed.packages && !hasDescriptionSection('dependencies')) { + for (let file of changed.packages) { + fail( + `Please add a '${descSection.dependencies}' section to explain the reason we are changing dependencies.` + ); + } +} + +// Check if we are modifying any Jest snapshots +if (changed.snapshots && !hasDescriptionSection('snapshots')) { + for (let file of changed.snapshots) { + fail( + `Please add a '${descSection.snapshots}' section to explain the reason we are changing snapshots.` + ); + } +} diff --git a/.eslintrc.js b/.eslintrc.js index f0fe7b123..458efaef3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ // We should almost definitely not be adding rules here. Instead, we should be modifying rules in our eslint-config-espressive package module.exports = { - extends: '@espressive/eslint-config-espressive', + extends: ['@espressive', 'prettier'], // prettier must be last so we override any rules that potentially conflict with Prettier overrides: [ { files: ['**/next-*/**/*', 'docs/**/*'], diff --git a/.github/EpicComment.md b/.github/disabled/EpicComment.md similarity index 100% rename from .github/EpicComment.md rename to .github/disabled/EpicComment.md diff --git a/.github/workflows/epic_label.yml b/.github/disabled/epic_label.yml similarity index 100% rename from .github/workflows/epic_label.yml rename to .github/disabled/epic_label.yml diff --git a/.github/workflows/label.yml b/.github/disabled/label.yml similarity index 100% rename from .github/workflows/label.yml rename to .github/disabled/label.yml diff --git a/.github/labeler.yml b/.github/disabled/labeler.yml similarity index 100% rename from .github/labeler.yml rename to .github/disabled/labeler.yml diff --git a/.github/workflows/autoupdate.yml b/.github/workflows/autoupdate.yml new file mode 100644 index 000000000..9a6b67b6a --- /dev/null +++ b/.github/workflows/autoupdate.yml @@ -0,0 +1,22 @@ +# This action will update any of our PRs that are out of date with their target branch. +# tibdex/auto-update@v1 will only log the issue if there is a failure, usually due to conflicts +# https://github.com/tibdex/auto-update/issues/2 + +name: Auto-update +on: + push: + # If pull requests are always based on the same branches, only triggering the workflow when these branches receive new commits will minimize the workflow execution. + branches: + - develop + - main + +jobs: + Auto: + name: Auto-update + runs-on: ubuntu-18.04 + steps: + - uses: tibdex/auto-update@v1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + # Uncomment to ignore pull requests without the specified label. + # label: auto-update diff --git a/.github/workflows/danger.yml b/.github/workflows/danger.yml new file mode 100644 index 000000000..230fb9c76 --- /dev/null +++ b/.github/workflows/danger.yml @@ -0,0 +1,27 @@ +name: 'Danger JS' +on: + pull_request: + types: + [ + assigned, + edited, + labeled, + opened, + reopened, + synchronize, + unassigned, + unlabeled, + ] + +jobs: + danger: + name: Danger JS + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - name: Dangerfile + uses: danger/danger-js@10.6.2 + with: + args: '--dangerfile .danger/index.ts' + env: + DANGER_GITHUB_API_TOKEN: ${{ secrets.DANGER_GITHUB_API_TOKEN }} diff --git a/.vscode/settings.json b/.vscode/settings.json index 2b686f110..c1bec8603 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,6 +6,9 @@ "editor.wordWrap": "on", "editor.wrappingIndent": "same" }, + "[yaml]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, "autoSnippet.snippets": [ { "pattern": "**/[A-Z]*.js", diff --git a/app-tests/_templates/next-template/src/pages/_app.js b/app-tests/_templates/next-template/src/pages/_app.js index 2e38f5244..05db990e1 100644 --- a/app-tests/_templates/next-template/src/pages/_app.js +++ b/app-tests/_templates/next-template/src/pages/_app.js @@ -1,7 +1,15 @@ +import pt from 'prop-types'; + import '@espressive/legacy-css'; -function MyApp({ Component, pageProps }) { - return ; -} +const propTypes = { + Component: pt.element, + // eslint-disable-next-line react/forbid-prop-types -- We do not know what the object params might be in this case + pageProps: pt.object, +}; + +const MyApp = ({ Component, pageProps }) => ; + +MyApp.propTypes = propTypes; export default MyApp; diff --git a/app-tests/_templates/next-template/src/pages/api/hello.js b/app-tests/_templates/next-template/src/pages/api/hello.js index 07d9d9ba2..caffb495e 100644 --- a/app-tests/_templates/next-template/src/pages/api/hello.js +++ b/app-tests/_templates/next-template/src/pages/api/hello.js @@ -1,6 +1,8 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -export default (req, res) => { +const hello = (req, res) => { res.statusCode = 200; res.json({ name: 'John Doe' }); }; + +export default hello; diff --git a/app-tests/_templates/next-template/src/pages/index.js b/app-tests/_templates/next-template/src/pages/index.js index 3a514fb75..b6ddb67e7 100644 --- a/app-tests/_templates/next-template/src/pages/index.js +++ b/app-tests/_templates/next-template/src/pages/index.js @@ -2,7 +2,7 @@ import Head from 'next/head'; import pkg from '../../package'; import styles from '../styles/Home.module.css'; -export default function Home() { +const Home = () => { return (
@@ -17,4 +17,6 @@ export default function Home() {
); -} +}; + +export default Home; diff --git a/app-tests/next-button/src/pages/_app.js b/app-tests/next-button/src/pages/_app.js index 2e38f5244..05db990e1 100644 --- a/app-tests/next-button/src/pages/_app.js +++ b/app-tests/next-button/src/pages/_app.js @@ -1,7 +1,15 @@ +import pt from 'prop-types'; + import '@espressive/legacy-css'; -function MyApp({ Component, pageProps }) { - return ; -} +const propTypes = { + Component: pt.element, + // eslint-disable-next-line react/forbid-prop-types -- We do not know what the object params might be in this case + pageProps: pt.object, +}; + +const MyApp = ({ Component, pageProps }) => ; + +MyApp.propTypes = propTypes; export default MyApp; diff --git a/app-tests/next-button/src/pages/api/hello.js b/app-tests/next-button/src/pages/api/hello.js index 07d9d9ba2..caffb495e 100644 --- a/app-tests/next-button/src/pages/api/hello.js +++ b/app-tests/next-button/src/pages/api/hello.js @@ -1,6 +1,8 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -export default (req, res) => { +const hello = (req, res) => { res.statusCode = 200; res.json({ name: 'John Doe' }); }; + +export default hello; diff --git a/app-tests/next-button/src/pages/index.js b/app-tests/next-button/src/pages/index.js index 80f20f22e..499312d21 100644 --- a/app-tests/next-button/src/pages/index.js +++ b/app-tests/next-button/src/pages/index.js @@ -4,7 +4,7 @@ import styles from '../styles/Home.module.css'; import { Button } from '@espressive/cascara'; -export default function Home() { +const Home = () => { return (
@@ -19,4 +19,6 @@ export default function Home() {
); -} +}; + +export default Home; diff --git a/app-tests/next-layout-admin/src/pages/_app.js b/app-tests/next-layout-admin/src/pages/_app.js index 2e38f5244..05db990e1 100644 --- a/app-tests/next-layout-admin/src/pages/_app.js +++ b/app-tests/next-layout-admin/src/pages/_app.js @@ -1,7 +1,15 @@ +import pt from 'prop-types'; + import '@espressive/legacy-css'; -function MyApp({ Component, pageProps }) { - return ; -} +const propTypes = { + Component: pt.element, + // eslint-disable-next-line react/forbid-prop-types -- We do not know what the object params might be in this case + pageProps: pt.object, +}; + +const MyApp = ({ Component, pageProps }) => ; + +MyApp.propTypes = propTypes; export default MyApp; diff --git a/app-tests/next-layout-admin/src/pages/api/hello.js b/app-tests/next-layout-admin/src/pages/api/hello.js index 07d9d9ba2..caffb495e 100644 --- a/app-tests/next-layout-admin/src/pages/api/hello.js +++ b/app-tests/next-layout-admin/src/pages/api/hello.js @@ -1,6 +1,8 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -export default (req, res) => { +const hello = (req, res) => { res.statusCode = 200; res.json({ name: 'John Doe' }); }; + +export default hello; diff --git a/app-tests/next-layout-admin/src/pages/index.js b/app-tests/next-layout-admin/src/pages/index.js index 60f3a3afa..ee2af18f0 100644 --- a/app-tests/next-layout-admin/src/pages/index.js +++ b/app-tests/next-layout-admin/src/pages/index.js @@ -3,7 +3,7 @@ import pkg from '../../package'; import { Admin } from '@espressive/cascara'; -export default function Home() { +const Home = () => { return ( @@ -20,4 +20,6 @@ export default function Home() { {'Admin.Main'} ); -} +}; + +export default Home; diff --git a/babel.config.js b/babel.config.js index 050b63474..80524af4c 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,19 +1,4 @@ module.exports = { - presets: [ - [ - '@babel/preset-env', - { - modules: false, - loose: true, - }, - ], - '@babel/preset-react', - ], - plugins: [ - '@babel/plugin-proposal-export-default-from', - '@babel/plugin-proposal-optional-chaining', - ['@babel/plugin-proposal-class-properties', { loose: true }], - ], env: { // Jest test: { @@ -23,4 +8,24 @@ module.exports = { ], }, }, + plugins: [ + '@babel/plugin-proposal-export-default-from', + '@babel/plugin-proposal-optional-chaining', + [ + '@babel/plugin-proposal-class-properties', + { + loose: true, + }, + ], + ], + presets: [ + [ + '@babel/preset-env', + { + loose: true, + modules: false, + }, + ], + '@babel/preset-react', + ], }; diff --git a/docs/package.json b/docs/package.json index ade2f1582..18d771c8b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,14 +1,15 @@ { "name": "docs", - "version": "0.3.2", + "version": "0.4.0", "private": true, "scripts": { "start": "next-remote-watch ../packages/cascara", - "build": "next build" + "build": "next build", + "prepare": "echo 'No prepare scripts for this package'" }, "dependencies": { - "@espressive/cascara": "file:../packages/cascara", - "@espressive/legacy-css": "file:../utils/legacy-css", + "@espressive/cascara": "^0.4.0", + "@espressive/legacy-css": "^2.0.4", "framer-motion": "2.5.5", "next": "10.0.5", "next-mdx-remote": "1.0.0", diff --git a/docs/src/components/Asciagram/Asciagram.js b/docs/src/components/Asciagram/Asciagram.js index ede087361..dc6f13e6b 100644 --- a/docs/src/components/Asciagram/Asciagram.js +++ b/docs/src/components/Asciagram/Asciagram.js @@ -21,7 +21,7 @@ const Asciagram = ({
diff --git a/docs/src/components/Code/Code.js b/docs/src/components/Code/Code.js index d2e2d5c86..bcb2f926e 100644 --- a/docs/src/components/Code/Code.js +++ b/docs/src/components/Code/Code.js @@ -1,6 +1,8 @@ -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'; import theme from 'prism-react-renderer/themes/synthwave84'; +import pt from 'prop-types'; + import { Button } from '@espressive/cascara'; import styles from './Code.module.scss'; import MDX_COMPONENTS from '../../lib/MDX_COMPONENTS'; @@ -10,22 +12,32 @@ import MDX_COMPONENTS from '../../lib/MDX_COMPONENTS'; theme.plain.backgroundColor = undefined; theme.plain.fontFamily = undefined; +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), + className: pt.string, + live: pt.bool, + title: pt.string, +}; + const Code = ({ children, className, live = true, title, ...rest }) => { const [editorOpen, setEditorOpen] = useState(false); const language = className && className.replace(/language-/, ''); const [editorCode, setEditorCode] = useState(children.trim()); - const handleEditorToggle = () => { + const handleEditorToggle = useCallback(() => { // TODO: Make cursor focus on editor when opening // should also update styles for focus on editor so it is easier to see that it // is actually editable setEditorOpen(!editorOpen); - }; + }, [setEditorOpen, editorOpen]); - const handleCodeChange = (code) => { - setEditorCode(code.trim()); - }; + const handleCodeChange = useCallback( + (code) => { + setEditorCode(code.trim()); + }, + [setEditorCode] + ); useEffect(() => { setEditorCode(children.trim()); @@ -78,4 +90,6 @@ const Code = ({ children, className, live = true, title, ...rest }) => { ); }; +Code.propTypes = propTypes; + export default Code; diff --git a/docs/src/components/Header/Header.js b/docs/src/components/Header/Header.js index 82a7d2de9..4a821fa22 100644 --- a/docs/src/components/Header/Header.js +++ b/docs/src/components/Header/Header.js @@ -2,7 +2,7 @@ import Link from 'next/link'; import { Admin } from '@espressive/cascara'; import Logo from './Logo'; -const Header = ({ data }) => { +const Header = () => { return ( diff --git a/docs/src/components/Header/Logo.js b/docs/src/components/Header/Logo.js index 8523b1e48..2881b6148 100644 --- a/docs/src/components/Header/Logo.js +++ b/docs/src/components/Header/Logo.js @@ -1,6 +1,11 @@ import React from 'react'; +import pt from 'prop-types'; -export const Logo = ({ textColor = 'var(--document-text, #fff)', ...rest }) => ( +const propTypes = { + textColor: pt.string, +}; + +const Logo = ({ textColor = 'var(--document-text, #fff)', ...rest }) => ( ( ); +Logo.propTypes = propTypes; + export default Logo; diff --git a/docs/src/components/Main/Main.js b/docs/src/components/Main/Main.js index 46749820b..b12224d3a 100644 --- a/docs/src/components/Main/Main.js +++ b/docs/src/components/Main/Main.js @@ -1,7 +1,13 @@ -import { Admin } from '@espressive/cascara'; +import pt from 'prop-types'; import { AnimatePresence, motion } from 'framer-motion'; import { useRouter } from 'next/router'; +import { Admin } from '@espressive/cascara'; + +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), +}; + const Main = ({ children, ...rest }) => { const { query } = useRouter(); @@ -21,4 +27,6 @@ const Main = ({ children, ...rest }) => { ); }; +Main.propTypes = propTypes; + export default Main; diff --git a/docs/src/components/Nav/Nav.js b/docs/src/components/Nav/Nav.js index cf3ddd479..6ac98f667 100644 --- a/docs/src/components/Nav/Nav.js +++ b/docs/src/components/Nav/Nav.js @@ -1,12 +1,19 @@ import { Fragment } from 'react'; -import { Admin } from '@espressive/cascara'; +import pt from 'prop-types'; import { useRouter } from 'next/router'; + +import { Admin } from '@espressive/cascara'; import NavSection from './NavSection'; import NavList from './NavList'; import NavItem from './NavItem'; const docPath = (path) => path.replace('../packages/cascara/src', '/docs'); +const propTypes = { + mdxTree: pt.arrayOf(pt.shape()), + posts: pt.arrayOf(pt.shape()), +}; + const Nav = ({ mdxTree, posts }) => { const router = useRouter(); @@ -75,4 +82,6 @@ const Nav = ({ mdxTree, posts }) => { ); }; +Nav.propTypes = propTypes; + export default Nav; diff --git a/docs/src/components/Nav/NavItem.js b/docs/src/components/Nav/NavItem.js index cd99c0375..f9928ce6b 100644 --- a/docs/src/components/Nav/NavItem.js +++ b/docs/src/components/Nav/NavItem.js @@ -1,7 +1,15 @@ import Link from 'next/link'; +import pt from 'prop-types'; + import Tag from '../Tag'; import styles from './Nav.module.scss'; +const propTypes = { + content: pt.string, + isActive: pt.bool, + status: pt.string, +}; + const NavItem = ({ content, isActive, status, ...rest }) => { // We do not want the data prop on the component at all if it is not true const active = isActive ? true : undefined; @@ -23,4 +31,6 @@ const NavItem = ({ content, isActive, status, ...rest }) => { ); }; +NavItem.propTypes = propTypes; + export default NavItem; diff --git a/docs/src/components/Nav/NavList.js b/docs/src/components/Nav/NavList.js index b82001d6e..7701e20da 100644 --- a/docs/src/components/Nav/NavList.js +++ b/docs/src/components/Nav/NavList.js @@ -1,6 +1,15 @@ +import pt from 'prop-types'; + import styles from './Nav.module.scss'; +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), +}; + const NavList = ({ children }) => { return
    {children}
; }; + +NavList.propTypes = propTypes; + export default NavList; diff --git a/docs/src/components/Nav/NavSection.js b/docs/src/components/Nav/NavSection.js index bd8d96d99..971c351b9 100644 --- a/docs/src/components/Nav/NavSection.js +++ b/docs/src/components/Nav/NavSection.js @@ -1,7 +1,15 @@ +import pt from 'prop-types'; + import styles from './Nav.module.scss'; +const propTypes = { + content: pt.string, +}; + const NavSection = ({ content }) => (

{content}

); +NavSection.propTypes = propTypes; + export default NavSection; diff --git a/docs/src/components/Placeholder/Placeholder.js b/docs/src/components/Placeholder/Placeholder.js index 8eb5c5733..a034f414d 100644 --- a/docs/src/components/Placeholder/Placeholder.js +++ b/docs/src/components/Placeholder/Placeholder.js @@ -1,5 +1,12 @@ +import pt from 'prop-types'; + import styles from './Placeholder.module.css'; +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), + componentName: pt.string, +}; + const Placeholder = ({ children, componentName, ...rest }) => { const restEntries = Object.entries(rest); @@ -19,4 +26,6 @@ const Placeholder = ({ children, componentName, ...rest }) => { ); }; +Placeholder.propTypes = propTypes; + export default Placeholder; diff --git a/docs/src/components/Playground/Playground.js b/docs/src/components/Playground/Playground.js index d5bd3075a..8bcf0cc5e 100644 --- a/docs/src/components/Playground/Playground.js +++ b/docs/src/components/Playground/Playground.js @@ -1,5 +1,13 @@ +import pt from 'prop-types'; + +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), +}; + const Playground = ({ children }) => (
{children}
); +Playground.propTypes = propTypes; + export default Playground; diff --git a/docs/src/components/PropTable/PropTable.js b/docs/src/components/PropTable/PropTable.js index 949c2f885..ace7fdcc5 100644 --- a/docs/src/components/PropTable/PropTable.js +++ b/docs/src/components/PropTable/PropTable.js @@ -1,7 +1,16 @@ +import pt from 'prop-types'; + import Tag from '../Tag'; -// import {JsonPlaceholder} from '@espressive/cascara' import styles from './PropTable.module.scss'; +const propTypes = { + docData: pt.shape({ + description: pt.string, + displayName: pt.string, + props: pt.shape({}), + }), +}; + const PropTable = ({ docData, ...rest }) => { const propsArray = docData?.props ? Object.entries(docData?.props) : []; @@ -49,15 +58,15 @@ const PropTable = ({ docData, ...rest }) => { {JSON.stringify(propData?.type?.value, null, ' ')} ) : ( - /* propData.type.value.map((value, i) => { - const item = value.name ? ( - {value.name} - ) : ( - {value.value} - ); - - return item; - }) */ + // propData.type.value.map((value, i) => { + // const item = value.name ? ( + // {value.name} + // ) : ( + // {value.value} + // ); + // + // return item; + // })
                         {JSON.stringify(propData?.type?.value, null, '  ')}
                       
@@ -91,4 +100,6 @@ const PropTable = ({ docData, ...rest }) => { ); }; +PropTable.propTypes = propTypes; + export default PropTable; diff --git a/docs/src/components/Props/Props.js b/docs/src/components/Props/Props.js index 829053267..c04923c42 100644 --- a/docs/src/components/Props/Props.js +++ b/docs/src/components/Props/Props.js @@ -1,3 +1,11 @@ +import pt from 'prop-types'; + +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), +}; + const Props = ({ children }) =>
{children}
; +Props.propTypes = propTypes; + export default Props; diff --git a/docs/src/components/Tabs/Tabs.js b/docs/src/components/Tabs/Tabs.js index 8f75630d6..3ac9e1d79 100644 --- a/docs/src/components/Tabs/Tabs.js +++ b/docs/src/components/Tabs/Tabs.js @@ -1,10 +1,17 @@ +import pt from 'prop-types'; + import TabsTab from './TabsTab'; import styles from './Tabs.module.scss'; +const propTypes = { + children: pt.oneOfType([pt.element, pt.arrayOf(pt.element)]), +}; + const Tabs = ({ children }) => { return
{children}
; }; Tabs.Tab = TabsTab; +Tabs.propTypes = propTypes; export default Tabs; diff --git a/docs/src/components/Tabs/TabsTab.js b/docs/src/components/Tabs/TabsTab.js index 5b2b56cd6..9ec652c08 100644 --- a/docs/src/components/Tabs/TabsTab.js +++ b/docs/src/components/Tabs/TabsTab.js @@ -1,6 +1,13 @@ +import pt from 'prop-types'; + import Link from 'next/link'; import styles from './Tabs.module.scss'; +const propTypes = { + content: pt.string, + isActive: pt.bool, +}; + const TabsTab = ({ content, isActive, ...rest }) => { // We do not want the data prop on the component at all if it is not true const active = isActive ? true : undefined; @@ -14,5 +21,6 @@ const TabsTab = ({ content, isActive, ...rest }) => { }; TabsTab.displayName = 'Tabs.Tab'; +TabsTab.propTypes = propTypes; export default TabsTab; diff --git a/docs/src/components/Tag/Tag.js b/docs/src/components/Tag/Tag.js index c5f41d054..85a48a7ad 100644 --- a/docs/src/components/Tag/Tag.js +++ b/docs/src/components/Tag/Tag.js @@ -1,5 +1,11 @@ +import pt from 'prop-types'; + import styles from './Tag.module.scss'; +const propTypes = { + content: pt.string, +}; + const Tag = ({ content, ...rest }) => { return ( @@ -8,4 +14,6 @@ const Tag = ({ content, ...rest }) => { ); }; +Tag.propTypes = propTypes; + export default Tag; diff --git a/docs/src/lib/MDX_COMPONENTS.js b/docs/src/lib/MDX_COMPONENTS.js index bc6500ec0..d02b3e12e 100644 --- a/docs/src/lib/MDX_COMPONENTS.js +++ b/docs/src/lib/MDX_COMPONENTS.js @@ -1,5 +1,3 @@ -/* eslint-disable react/no-multi-comp */ - // All components that we intend to use in our MDX files _must_ be defined here // or else they will not be rendered in our MDX files. This includes // all components in Cascara. Our implementation of MDX in these docs does @@ -31,15 +29,15 @@ import { import { Asciagram, Code, Placeholder } from '../components'; -/* eslint-disable sort-keys */ -const MDX_COMPONENTS = { - // Docs +/* eslint-disable react/display-name, react/no-multi-comp -- We need to do this in order to get all of our components into MDX */ +const docsComponents = { Asciagram: (props) => , Playground: (props) => , Props: (props) => , code: (props) => , +}; - // Cascara +const cascaraComponents = { Admin: (props) => , Button: (props) =>