diff --git a/src/components/Author/Author.tsx b/src/components/Author/Author.tsx index 8bb92fe..3714533 100644 --- a/src/components/Author/Author.tsx +++ b/src/components/Author/Author.tsx @@ -5,7 +5,7 @@ import { DetailContext } from '../../pages/Version'; import { isEmail } from '../../utils/url'; import Avatar from '../../muiComponents/Avatar'; -import { Heading, AuthorListItem, AuthorListItemText } from './styles'; +import { StyledText, AuthorListItem, AuthorListItemText } from './styles'; const Author: FC = () => { const { packageMeta } = useContext(DetailContext); @@ -25,7 +25,7 @@ const Author: FC = () => { const avatarComponent = ; return ( - {'Author'}}> + {'Author'}}> {!email || !isEmail(email) ? ( avatarComponent diff --git a/src/components/Author/__snapshots__/Author.test.tsx.snap b/src/components/Author/__snapshots__/Author.test.tsx.snap index bb8e3bd..1b5fd66 100644 --- a/src/components/Author/__snapshots__/Author.test.tsx.snap +++ b/src/components/Author/__snapshots__/Author.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"Authorverdaccio user"`; +exports[` component should render the component in default state 1`] = `"Authorverdaccio user"`; -exports[` component should render the component when there is no author email 1`] = `"Authorverdaccio user"`; +exports[` component should render the component when there is no author email 1`] = `"Authorverdaccio user"`; diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index 80f8d12..6341375 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -1,16 +1,15 @@ import styled from 'react-emotion'; -import Typography from '@material-ui/core/Typography'; import ListItemText from '@material-ui/core/ListItemText'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; +import Text from '../../muiComponents/Text'; -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - textTransform: 'capitalize', - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, + textTransform: 'capitalize', }); + export const AuthorListItem = styled(ListItem)({ '&&': { padding: 0, diff --git a/src/components/Dependencies/Dependencies.tsx b/src/components/Dependencies/Dependencies.tsx index a11a6fc..5dd2ca4 100644 --- a/src/components/Dependencies/Dependencies.tsx +++ b/src/components/Dependencies/Dependencies.tsx @@ -6,7 +6,7 @@ import { PackageDependencies } from '../../../types/packageMeta'; import { DetailContext } from '../../pages/Version'; import NoItems from '../NoItems'; -import { CardWrap, Heading, Tags, Tag } from './styles'; +import { CardWrap, StyledText, Tags, Tag } from './styles'; interface DependencyBlockProps { title: string; @@ -28,7 +28,7 @@ const DependencyBlock: React.FC = ({ title, dependencies } return ( - {`${title} (${deps.length})`} + {`${title} (${deps.length})`} {deps.map(([name, version]) => ( // eslint-disable-next-line diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts index 3d6ffa4..3dcea7c 100644 --- a/src/components/Dependencies/styles.ts +++ b/src/components/Dependencies/styles.ts @@ -1,9 +1,9 @@ import styled from 'react-emotion'; import Card from '@material-ui/core/Card'; -import Typography from '@material-ui/core/Typography'; import Chip from '@material-ui/core/Chip'; import { fontWeight } from '../../utils/styles/sizes'; +import Text from '../../muiComponents/Text'; export const CardWrap = styled(Card)({ '&&': { @@ -11,11 +11,9 @@ export const CardWrap = styled(Card)({ }, }); -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - textTransform: 'capitalize', - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, + textTransform: 'capitalize', }); export const Tags = styled('div')({ diff --git a/src/components/Developers/Developers.tsx b/src/components/Developers/Developers.tsx index 78c39d6..ca4f96c 100644 --- a/src/components/Developers/Developers.tsx +++ b/src/components/Developers/Developers.tsx @@ -4,7 +4,7 @@ import Add from '@material-ui/icons/Add'; import { DetailContext } from '../../pages/Version'; import { AvatarTooltip } from '../AvatarTooltip'; -import { Details, Heading, Content, Fab } from './styles'; +import { Details, StyledText, Content, Fab } from './styles'; export type DevelopersType = 'contributors' | 'maintainers'; @@ -34,7 +34,7 @@ const Developers: FC = ({ type, visibleMax }) => { return ( - {type} + {type} {listVisibleDevelopers.map(developer => ( {renderDeveloperDetails(developer, packageMeta)} diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap index 5f37f2d..4123173 100644 --- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap +++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap @@ -4,68 +4,73 @@ exports[`test Developers should render the component for contributors with items - - - - - contributors - - - - + + contributors + + + + + - - - - - maintainers - - - - + + maintainers + + + + + = ({ name, children }) => children ? ( @@ -33,7 +33,7 @@ const Dist: FC = () => { const { dist, license } = packageMeta && packageMeta.latest; return ( - {'Latest Distribution'}}> + {'Latest Distribution'}}> {dist.fileCount} {dist.unpackedSize && fileSizeSI(dist.unpackedSize)} diff --git a/src/components/Dist/__snapshots__/Dist.test.tsx.snap b/src/components/Dist/__snapshots__/Dist.test.tsx.snap index 8aa3173..629c9fa 100644 --- a/src/components/Dist/__snapshots__/Dist.test.tsx.snap +++ b/src/components/Dist/__snapshots__/Dist.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"Latest Distributionfile count: 7size: 10.00 Bytes"`; +exports[` component should render the component in default state 1`] = `"Latest Distributionfile count: 7size: 10.00 Bytes"`; -exports[` component should render the component with license as object 1`] = `"Latest Distributionfile count: 7size: 10.00 Byteslicense: MIT"`; +exports[` component should render the component with license as object 1`] = `"Latest Distributionfile count: 7size: 10.00 Byteslicense: MIT"`; -exports[` component should render the component with license as string 1`] = `"Latest Distributionfile count: 7size: 10.00 Byteslicense: MIT"`; +exports[` component should render the component with license as string 1`] = `"Latest Distributionfile count: 7size: 10.00 Byteslicense: MIT"`; diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index f3bf96b..bc8436a 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -1,17 +1,15 @@ import styled from 'react-emotion'; import { default as MuiFab } from '@material-ui/core/Fab'; import Chip from '@material-ui/core/Chip'; -import Typography from '@material-ui/core/Typography'; import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; +import Text from '../../muiComponents/Text'; -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - textTransform: 'capitalize', - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, + textTransform: 'capitalize', }); export const DistListItem = styled(ListItem)({ diff --git a/src/components/Engines/Engines.tsx b/src/components/Engines/Engines.tsx index 885bf1e..106db6a 100644 --- a/src/components/Engines/Engines.tsx +++ b/src/components/Engines/Engines.tsx @@ -7,7 +7,7 @@ import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Ver import Avatar from '../../muiComponents/Avatar'; import npm from '../Install/img/npm.svg'; -import { Heading, EngineListItem } from './styles'; +import { StyledText, EngineListItem } from './styles'; // @ts-ignore import node from './img/node.png'; @@ -60,7 +60,7 @@ class Engine extends Component { private renderListItems = (heading: string, text: string) => { return ( - {text.split('-').join(' ')}}> + {text.split('-').join(' ')}}> {ICONS[text]} diff --git a/src/components/Engines/__snapshots__/Engines.test.tsx.snap b/src/components/Engines/__snapshots__/Engines.test.tsx.snap index 0108882..6b74c1e 100644 --- a/src/components/Engines/__snapshots__/Engines.test.tsx.snap +++ b/src/components/Engines/__snapshots__/Engines.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"node JS>= 0.1.98NPM version>3"`; +exports[` component should render the component in default state 1`] = `"node JS>= 0.1.98NPM version>3"`; diff --git a/src/components/Engines/styles.ts b/src/components/Engines/styles.ts index 2dac66c..f44af79 100644 --- a/src/components/Engines/styles.ts +++ b/src/components/Engines/styles.ts @@ -1,14 +1,12 @@ import styled from 'react-emotion'; -import Typography from '@material-ui/core/Typography'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; +import Text from '../../muiComponents/Text'; -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - textTransform: 'capitalize', - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, + textTransform: 'capitalize', }); export const EngineListItem = styled(ListItem)({ diff --git a/src/components/Help/Help.tsx b/src/components/Help/Help.tsx index a4deacd..0f5585f 100644 --- a/src/components/Help/Help.tsx +++ b/src/components/Help/Help.tsx @@ -1,18 +1,19 @@ import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; -import Typography from '@material-ui/core/Typography'; import React, { Fragment } from 'react'; import { getRegistryURL } from '../../utils/url'; import CopyToClipBoard from '../CopyToClipBoard'; import Button from '../../muiComponents/Button'; +import { default as Typography } from '../../muiComponents/Heading'; +import Text from '../../muiComponents/Text'; import { CardStyled as Card, HelpTitle } from './styles'; function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode { return ( - {title} + {title} ); @@ -32,7 +33,7 @@ const Help: React.FC = () => { {renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)} {renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)} - {'3. Refresh this page.'} + {'3. Refresh this page.'} diff --git a/src/components/Help/__snapshots__/Help.test.tsx.snap b/src/components/Help/__snapshots__/Help.test.tsx.snap index ec4515d..741a4eb 100644 --- a/src/components/Help/__snapshots__/Help.test.tsx.snap +++ b/src/components/Help/__snapshots__/Help.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"No Package Published Yet.To publish your first package just:1. Loginnpm adduser --registry http://localhost2. Publishnpm publish --registry http://localhost3. Refresh this page.Learn More"`; +exports[` component should render the component in default state 1`] = `"No Package Published Yet.To publish your first package just:1. Loginnpm adduser --registry http://localhost2. Publishnpm publish --registry http://localhost3. Refresh this page.Learn More"`; diff --git a/src/components/Help/styles.ts b/src/components/Help/styles.ts index d68ec2c..f729686 100644 --- a/src/components/Help/styles.ts +++ b/src/components/Help/styles.ts @@ -1,7 +1,8 @@ import Card from '@material-ui/core/Card'; -import Typography from '@material-ui/core/Typography'; import styled from 'react-emotion'; +import { default as Typography } from '../../muiComponents/Heading'; + export const CardStyled = styled(Card)({ '&&': { width: '600px', diff --git a/src/components/Install/Install.tsx b/src/components/Install/Install.tsx index 39fac7b..b3be843 100644 --- a/src/components/Install/Install.tsx +++ b/src/components/Install/Install.tsx @@ -1,14 +1,14 @@ import React, { useContext } from 'react'; import styled from 'react-emotion'; -import Typography from '@material-ui/core/Typography'; import List from '@material-ui/core/List'; import { DetailContext } from '../../pages/Version'; import { fontWeight } from '../../utils/styles/sizes'; +import Text from '../../muiComponents/Text'; import InstallListItem, { DependencyManager } from './InstallListItem'; -const Heading = styled(Typography)({ +const StyledText = styled(Text)({ fontWeight: fontWeight.bold, textTransform: 'capitalize', }); @@ -23,7 +23,7 @@ const Install: React.FC = () => { } return ( - {'Installation'}}> + {'Installation'}}> diff --git a/src/components/NoItems/NoItems.tsx b/src/components/NoItems/NoItems.tsx index 38e8c0b..0a3b2c7 100644 --- a/src/components/NoItems/NoItems.tsx +++ b/src/components/NoItems/NoItems.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; + +import Text from '../../muiComponents/Text'; interface Props { text: string; @@ -7,9 +8,9 @@ interface Props { } const NoItems: React.FC = ({ className, text }) => ( - + {text} - + ); export default NoItems; diff --git a/src/components/NotFound/styles.ts b/src/components/NotFound/styles.ts new file mode 100644 index 0000000..ff22383 --- /dev/null +++ b/src/components/NotFound/styles.ts @@ -0,0 +1,40 @@ +import { default as MuiCard } from '@material-ui/core/Card'; +import { default as MuiList } from '@material-ui/core/List'; +import styled from 'react-emotion'; + +import { default as Typography } from '../../muiComponents/Heading'; + +export const Wrapper = styled('div')({ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + justifyContent: 'center', + flex: 1, + padding: '16px', +}); + +export const Inner = styled('div')({ + maxWidth: '650px', + display: 'flex', + flexDirection: 'column', +}); + +export const EmptyPackage = styled('img')({ + width: '150px', + margin: '0 auto', +}); + +export const Heading = styled(Typography)({ + color: '#4b5e40', +}); + +export const List = styled(MuiList)({ + '&&': { + padding: 0, + color: '#4b5e40', + }, +}); + +export const Card = styled(MuiCard)({ + marginTop: '24px', +}); diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 709bd50..d24e4ed 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import Grid from '@material-ui/core/Grid'; import List from '@material-ui/core/List'; import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; import { breakpoints } from '../../utils/styles/media'; import Ico from '../Icon'; @@ -12,6 +11,7 @@ import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; import { default as MuiIconButton } from '../../muiComponents/IconButton'; import { default as Photo } from '../../muiComponents/Avatar'; +import { default as Typography } from '../../muiComponents/Heading'; export const OverviewItem = styled('span')` && { diff --git a/src/components/RegistryInfoContent/RegistryInfoContent.tsx b/src/components/RegistryInfoContent/RegistryInfoContent.tsx index de5a4e0..bc86637 100644 --- a/src/components/RegistryInfoContent/RegistryInfoContent.tsx +++ b/src/components/RegistryInfoContent/RegistryInfoContent.tsx @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import { css } from 'emotion'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; -import Typography from '@material-ui/core/Typography'; import CopyToClipBoard from '../CopyToClipBoard'; import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils'; import { NODE_MANAGER } from '../../utils/constants'; +import { default as Typography } from '../../muiComponents/Heading'; import { CommandContainer } from './styles'; import { Props, State } from './types'; diff --git a/src/components/Repository/Repository.tsx b/src/components/Repository/Repository.tsx index 7dc865f..a03c4dd 100644 --- a/src/components/Repository/Repository.tsx +++ b/src/components/Repository/Repository.tsx @@ -9,7 +9,7 @@ import { isURL } from '../../utils/url'; import CopyToClipBoard from '../CopyToClipBoard'; import git from './img/git.png'; -import { GithubLink, Heading, RepositoryListItem, RepositoryListItemText } from './styles'; +import { GithubLink, StyledText, RepositoryListItem, RepositoryListItemText } from './styles'; class Repository extends Component { public render(): ReactElement { @@ -39,7 +39,7 @@ class Repository extends Component { return ( - {'Repository'}}> + {'Repository'}}> diff --git a/src/components/Repository/__snapshots__/Repository.test.tsx.snap b/src/components/Repository/__snapshots__/Repository.test.tsx.snap index 0d451da..3296681 100644 --- a/src/components/Repository/__snapshots__/Repository.test.tsx.snap +++ b/src/components/Repository/__snapshots__/Repository.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"Repositorygit+https://github.com/verdaccio/ui.git"`; +exports[` component should render the component in default state 1`] = `"Repositorygit+https://github.com/verdaccio/ui.git"`; diff --git a/src/components/Repository/styles.ts b/src/components/Repository/styles.ts index 4317a4d..d668870 100644 --- a/src/components/Repository/styles.ts +++ b/src/components/Repository/styles.ts @@ -1,18 +1,16 @@ import styled from 'react-emotion'; import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; import ListItemText from '@material-ui/core/ListItemText'; import Github from '../../icons/GitHub'; import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; +import Text from '../../muiComponents/Text'; import ListItem from '../../muiComponents/ListItem'; -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - textTransform: 'capitalize', - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, + textTransform: 'capitalize', }); export const GridRepo = styled(Grid)({ diff --git a/src/components/UpLinks/UpLinks.tsx b/src/components/UpLinks/UpLinks.tsx index 80d2e8c..d6fba1a 100644 --- a/src/components/UpLinks/UpLinks.tsx +++ b/src/components/UpLinks/UpLinks.tsx @@ -6,7 +6,7 @@ import NoItems from '../NoItems'; import { formatDateDistance } from '../../utils/package'; import ListItem from '../../muiComponents/ListItem'; -import { Heading, Spacer, ListItemText } from './styles'; +import { StyledText, Spacer, ListItemText } from './styles'; const UpLinks: React.FC = () => { const { packageMeta } = useContext(DetailContext); @@ -23,7 +23,7 @@ const UpLinks: React.FC = () => { return ( <> - {'Uplinks'} + {'Uplinks'} {Object.keys(uplinks) .reverse() diff --git a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap index 4fa5fc2..45d0d19 100644 --- a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap +++ b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap @@ -2,4 +2,4 @@ exports[` component should render the component in default state 1`] = `null`; -exports[` component should render the component with uplinks 1`] = `"Uplinksnpmjsover 1 year ago"`; +exports[` component should render the component with uplinks 1`] = `"Uplinksnpmjsover 1 year ago"`; diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts index f28aac6..a8ba9e8 100644 --- a/src/components/UpLinks/styles.ts +++ b/src/components/UpLinks/styles.ts @@ -1,13 +1,11 @@ import styled from 'react-emotion'; -import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; +import Text from '../../muiComponents/Text'; import { fontWeight } from '../../utils/styles/sizes'; -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, }); export const Spacer = styled('div')({ diff --git a/src/components/Versions/Versions.tsx b/src/components/Versions/Versions.tsx index fae8bd8..cb88e83 100644 --- a/src/components/Versions/Versions.tsx +++ b/src/components/Versions/Versions.tsx @@ -3,7 +3,7 @@ import React, { useContext } from 'react'; import { DetailContext } from '../../pages/Version'; import { DIST_TAGS } from '../../../lib/constants'; -import { Heading } from './styles'; +import { StyledText } from './styles'; import VersionsTagList from './VersionsTagList'; import VersionsHistoryList from './VersionsHistoryList'; @@ -26,13 +26,13 @@ const Versions: React.FC = () => { <> {distTags && Object.keys(distTags).length > 0 && ( <> - {LABEL_CURRENT_TAGS} + {LABEL_CURRENT_TAGS} > )} {versions && Object.keys(versions).length > 0 && packageName && ( <> - {LABEL_VERSION_HISTORY} + {LABEL_VERSION_HISTORY} > )} diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts index 535bd31..d87fdf3 100644 --- a/src/components/Versions/styles.ts +++ b/src/components/Versions/styles.ts @@ -1,13 +1,11 @@ import styled from 'react-emotion'; -import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; import { fontWeight } from '../../utils/styles/sizes'; +import Text from '../../muiComponents/Text'; -export const Heading = styled(Typography)({ - '&&': { - fontWeight: fontWeight.bold, - }, +export const StyledText = styled(Text)({ + fontWeight: fontWeight.bold, }); export const Spacer = styled('div')({ diff --git a/src/muiComponents/Heading/Heading.tsx b/src/muiComponents/Heading/Heading.tsx new file mode 100644 index 0000000..8505b27 --- /dev/null +++ b/src/muiComponents/Heading/Heading.tsx @@ -0,0 +1,19 @@ +import React, { forwardRef } from 'react'; +import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography'; + +type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; +type HeadingRef = HeadingType; + +interface Props extends Omit { + variant?: HeadingType; +} + +const Heading = forwardRef(function Heading(props, ref) { + return ; +}); + +Heading.defaultProps = { + variant: 'h6', +}; + +export default Heading; diff --git a/src/muiComponents/Heading/index.ts b/src/muiComponents/Heading/index.ts new file mode 100644 index 0000000..b8610c2 --- /dev/null +++ b/src/muiComponents/Heading/index.ts @@ -0,0 +1 @@ +export { default } from './Heading'; diff --git a/src/muiComponents/Text/Text.tsx b/src/muiComponents/Text/Text.tsx new file mode 100644 index 0000000..7686916 --- /dev/null +++ b/src/muiComponents/Text/Text.tsx @@ -0,0 +1,20 @@ +import React, { forwardRef } from 'react'; +import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography'; + +type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2'; +type TextRef = keyof HTMLElementTagNameMap; + +interface Props extends Omit { + variant?: TextType; +} + +// The reference is already from type of the Component, so the any below is not a problem +const Text = forwardRef(function Text(props, ref) { + return ; +}); + +Text.defaultProps = { + variant: 'subtitle1', +}; + +export default Text; diff --git a/src/muiComponents/Text/index.ts b/src/muiComponents/Text/index.ts new file mode 100644 index 0000000..ae48b29 --- /dev/null +++ b/src/muiComponents/Text/index.ts @@ -0,0 +1 @@ +export { default } from './Text';
To publish your first package just:
1. Login
2. Publish
3. Refresh this page.