@universal-tennis/ui-shared 0.1.96 → 0.2.0

package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx

@@ -1,86 +1,86 @@
-import React from 'react';
-
-import AvatarWithName, { AvatarWithNameProps } from './AvatarWithName';
-
-// Default
-export default {
-  title: 'Molecules/AvatarWithName',
-};
-
-// Templates
-function AvatarWithNameTemplate(args: AvatarWithNameProps) {
-  return <AvatarWithName {...args} />;  
-}
-
-// Stories
-export const Default = AvatarWithNameTemplate.bind({});
-Default.args = {
-  playerName: "Julia Gulia",
-};
-
-export const WithImage = AvatarWithNameTemplate.bind({});
-WithImage.args = {
-  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-  playerName: "Julia Gulia",
-};
-
-export const WithCustomTypography = AvatarWithNameTemplate.bind({});
-WithCustomTypography.args = {
-  playerName: "Julia Gulia",
-  avatarFontCategory: "secondary",
-  avatarFontSize: "large-medium", 
-  fontCategory: "primary",
-  fontSize: "medium-book"
-};
-
-export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
-WithCustomAvatarSize.args = {
-  playerName: "Julia Gulia",
-  avatarWidth: '26px',
-  avatarHeight: '26px',
-  avatarFontCategory: "primary",
-  avatarFontSize: "small-book", 
-};
-
-export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
-WithAvatarOnly.args = {
-  avatarOnly: true,  
-  playerName: "Julia Gulia",
-};
-
-export const WithNoImage = AvatarWithNameTemplate.bind({});
-WithNoImage.args = {
-  imgSrc: '',
-  playerName: "Julia Gulia",
-};
-
-export const WithBrokenImage = AvatarWithNameTemplate.bind({});
-WithBrokenImage.args = {
-  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
-  playerName: "Julia Gulia",
-};
-
-export const WithLink = AvatarWithNameTemplate.bind({});
-WithLink.args = {
-  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-  href: "https://www.reddit.com",
-  playerName: "Julia Gulia",
-};
-
-export const WithLowercaseName = AvatarWithNameTemplate.bind({});
-WithLowercaseName.args = {
-  playerName: "julia gulia",
-};
-
-export const WithLongName = AvatarWithNameTemplate.bind({});
-WithLongName.args = {
-  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
-};
-
-export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
-WithCustomMaxCharacterLimit.args = {
-  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
-  maxCharacterLimit: 7
-};
+import React from 'react';
+
+import AvatarWithName, { AvatarWithNameProps } from './AvatarWithName';
+
+// Default
+export default {
+  title: 'Molecules/AvatarWithName',
+};
+
+// Templates
+function AvatarWithNameTemplate(args: AvatarWithNameProps) {
+  return <AvatarWithName {...args} />;  
+}
+
+// Stories
+export const Default = AvatarWithNameTemplate.bind({});
+Default.args = {
+  playerName: "Julia Gulia",
+};
+
+export const WithImage = AvatarWithNameTemplate.bind({});
+WithImage.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  playerName: "Julia Gulia",
+};
+
+export const WithCustomTypography = AvatarWithNameTemplate.bind({});
+WithCustomTypography.args = {
+  playerName: "Julia Gulia",
+  avatarFontCategory: "secondary",
+  avatarFontSize: "large-medium", 
+  fontCategory: "primary",
+  fontSize: "medium-book"
+};
+
+export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+  playerName: "Julia Gulia",
+  avatarWidth: '26px',
+  avatarHeight: '26px',
+  avatarFontCategory: "primary",
+  avatarFontSize: "small-book", 
+};
+
+export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+  avatarOnly: true,  
+  playerName: "Julia Gulia",
+};
+
+export const WithNoImage = AvatarWithNameTemplate.bind({});
+WithNoImage.args = {
+  imgSrc: '',
+  playerName: "Julia Gulia",
+};
+
+export const WithBrokenImage = AvatarWithNameTemplate.bind({});
+WithBrokenImage.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
+  playerName: "Julia Gulia",
+};
+
+export const WithLink = AvatarWithNameTemplate.bind({});
+WithLink.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  href: "https://www.reddit.com",
+  playerName: "Julia Gulia",
+};
+
+export const WithLowercaseName = AvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+  playerName: "julia gulia",
+};
+
+export const WithLongName = AvatarWithNameTemplate.bind({});
+WithLongName.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+};
+
+export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
+WithCustomMaxCharacterLimit.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+  maxCharacterLimit: 7
+};

package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx

@@ -1,68 +1,68 @@
-import React from 'react';
-
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-
-import Typography from '../../atoms/Typography/Typography';
-
-export interface AvatarWithNameProps {
-    avatarOnly: boolean;
-    avatarFontCategory: string;
-    avatarFontSize: string;
-    avatarWidth: string;
-    avatarHeight: string;
-    href: string,
-    imgSrc: string;
-    playerName: string;
-    fontCategory: string;
-    fontSize: string;
-    maxCharacterLimit: number;
-  }
-
-export default function AvatarWithName({
-  avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '',
-  avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary', 
-  maxCharacterLimit = 24
-}) {
-  const getAcronym = (str: string) => {
-    const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
-    return acronym;
-  };
-
-  const getTruncatedName = (name: string, characterLimit: number) => (
-    name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name
-  );
-
-  const AvatarComponent = (
-      <Avatar 
-          sx={{ 
-            backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}` 
-          }} 
-          src={imgSrc}
-      >
-          <Typography 
-              sx={{ textTransform: 'uppercase' }} 
-              size={avatarFontSize} 
-              category={avatarFontCategory}
-          >
-              {getAcronym(playerName)}
-          </Typography>
-      </Avatar>
-  );
-
-  return (
-    avatarOnly ? (
-      AvatarComponent
-    ) : (
-        <Box display="flex" alignItems="center">
-            {AvatarComponent}
-            {href ? (
-                <Link href={href} sx={{ textDecoration: 'none' }}>
-                    <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName, maxCharacterLimit)}</Typography>
-                </Link>
-            ) : <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName, maxCharacterLimit)}</Typography>}
-        </Box>
-    )
-  );
-}
+import React from 'react';
+
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+
+import Typography from '../../atoms/Typography/Typography';
+
+export interface AvatarWithNameProps {
+    avatarOnly: boolean;
+    avatarFontCategory: string;
+    avatarFontSize: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    href: string,
+    imgSrc: string;
+    playerName: string;
+    fontCategory: string;
+    fontSize: string;
+    maxCharacterLimit: number;
+  }
+
+export default function AvatarWithName({
+  avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '',
+  avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary', 
+  maxCharacterLimit = 24
+}) {
+  const getAcronym = (str: string) => {
+    const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
+    return acronym;
+  };
+
+  const getTruncatedName = (name: string, characterLimit: number) => (
+    name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name
+  );
+
+  const AvatarComponent = (
+      <Avatar 
+          sx={{ 
+            backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}` 
+          }} 
+          src={imgSrc}
+      >
+          <Typography 
+              sx={{ textTransform: 'uppercase' }} 
+              size={avatarFontSize} 
+              category={avatarFontCategory}
+          >
+              {getAcronym(playerName)}
+          </Typography>
+      </Avatar>
+  );
+
+  return (
+    avatarOnly ? (
+      AvatarComponent
+    ) : (
+        <Box display="flex" alignItems="center">
+            {AvatarComponent}
+            {href ? (
+                <Link href={href} sx={{ textDecoration: 'none' }}>
+                    <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName, maxCharacterLimit)}</Typography>
+                </Link>
+            ) : <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName, maxCharacterLimit)}</Typography>}
+        </Box>
+    )
+  );
+}

package/src/stories/molecules/Cards/Cards.stories.tsx

@@ -1,76 +1,76 @@
-import React from 'react';
-
-import ContactCard from './ContactCard';
-import TeamCard from './TeamCard';
-import DrawCard from './DrawCard';
-import { DrawCardProps, TeamCardProps, ContactCardProps } from "./sharedTypes";
-
-// Default
-export default {
-  title: 'Molecules/Cards',
-};
-
-// Templates
-function ContactCardTemplate(args: ContactCardProps) {
-  return <ContactCard {...args} />;  
-}
-
-function TeamCardTemplate(args: TeamCardProps) {
-  return <TeamCard {...args} />;  
-}
-
-function DrawCardTemplate(args: DrawCardProps) {
-  return (
-      <div style={{ width: '372px' }}>
-          <DrawCard {...args} /> 
-      </div>
-  );
-}
-
-// Stories
-export const Contact = ContactCardTemplate.bind({});
-Contact.args = {
-  name: "Jessica Carson",
-  phone: "+1 222-234-4567",
-  email: "test@sample.com"
-};
-
-export const Team = TeamCardTemplate.bind({});
-Team.args = {
-  title: 'team 1',
-  description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
-};
-
-export const Draw = DrawCardTemplate.bind({});
-Draw.args = {
-  options: [
-    {
-      id: 1,
-      label: 'Team 1',
-    },
-    {
-      id: 2,
-      label: 'Team 2',
-    }
-  ],
-  selectedOptions: {
-    optionOne: 1,
-    optionTwo: 2,
-  },
-  dateLabel: 'Dec 20 at 9:00am',
-  locationLabel: 'Taube Tennis Center',
-  emptyLabel: 'Select a team',
-  isManaging: false,
-  isSelectActive: true,
-  position1Team: {
-    points: 2,
-    name: 'Team Blue'
-  },
-  position2Team: {
-    points: 4,
-    name: 'Team Red'
-  },
-  isPosition1Winner: false,
-  isPosition2Winner: true,
-  onViewClick: () => {}
-};
+import React from 'react';
+
+import ContactCard from './ContactCard';
+import TeamCard from './TeamCard';
+import DrawCard from './DrawCard';
+import { DrawCardProps, TeamCardProps, ContactCardProps } from "./sharedTypes";
+
+// Default
+export default {
+  title: 'Molecules/Cards',
+};
+
+// Templates
+function ContactCardTemplate(args: ContactCardProps) {
+  return <ContactCard {...args} />;  
+}
+
+function TeamCardTemplate(args: TeamCardProps) {
+  return <TeamCard {...args} />;  
+}
+
+function DrawCardTemplate(args: DrawCardProps) {
+  return (
+      <div style={{ width: '372px' }}>
+          <DrawCard {...args} /> 
+      </div>
+  );
+}
+
+// Stories
+export const Contact = ContactCardTemplate.bind({});
+Contact.args = {
+  name: "Jessica Carson",
+  phone: "+1 222-234-4567",
+  email: "test@sample.com"
+};
+
+export const Team = TeamCardTemplate.bind({});
+Team.args = {
+  title: 'team 1',
+  description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
+};
+
+export const Draw = DrawCardTemplate.bind({});
+Draw.args = {
+  options: [
+    {
+      id: 1,
+      label: 'Team 1',
+    },
+    {
+      id: 2,
+      label: 'Team 2',
+    }
+  ],
+  selectedOptions: {
+    optionOne: 1,
+    optionTwo: 2,
+  },
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: 'Taube Tennis Center',
+  emptyLabel: 'Select a team',
+  isManaging: false,
+  isSelectActive: true,
+  position1Team: {
+    points: 2,
+    name: 'Team Blue'
+  },
+  position2Team: {
+    points: 4,
+    name: 'Team Red'
+  },
+  isPosition1Winner: false,
+  isPosition2Winner: true,
+  onViewClick: () => {}
+};

package/src/stories/molecules/Cards/ContactCard.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import parsePhoneNumber from 'libphonenumber-js';
-import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
-import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
-import Link from '@mui/material/Link';
-import Button from '../../atoms/Button/Button';
-import Typography from '../../atoms/Typography/Typography';
-import ChatIcon from '../../assets/icon-chat-blue.svg';
-
-import { StyledCard } from './shared';
-import { ContactCardProps } from './sharedTypes';
-
-export default function ContactCard({
-  name, phone, email, onMessageClick, ...props 
-}: ContactCardProps) {
-  const firstName = name.split(" ")[0];
-  const parsedNumber = parsePhoneNumber(phone || '');
-  const phoneNumber = parsedNumber?.formatInternational();
-
-  return (
-      <StyledCard {...props}>
-          <Typography style={{ marginBottom: '8px' }} category="secondary" size="medium-medium">{name}</Typography>
-          {phoneNumber && (
-          <Link sx={{ display: 'flex' }} mt={1} fontSize={14} href={`tel:${phone}`}>
-              <LocalPhoneOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
-              <Typography category="secondary" size="x-small-book">{phoneNumber}</Typography>
-          </Link>
-          )}
-          {email && (
-          <Link sx={{ display: 'flex' }} mt={1} fontSize={14} href={`mailto:${email}`}>
-              <EmailOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
-              <Typography category="secondary" size="x-small-book">{email}</Typography>
-          </Link>
-          )}
-          <Button onClick={onMessageClick} category="link" style={{ marginTop: '8px' }}>
-              <>
-                  <img src={ChatIcon} alt="message" style={{ width: '20px' }} />
-                  <Typography style={{ paddingLeft: '8px' }} category="secondary" size="x-small-book">
-                      {`Message ${firstName}`}
-                  </Typography>
-              </>
-          </Button>
-      </StyledCard>
-  );
-}
+import React from 'react';
+import parsePhoneNumber from 'libphonenumber-js';
+import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import Link from '@mui/material/Link';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import ChatIcon from '../../assets/icon-chat-blue.svg';
+
+import { StyledCard } from './shared';
+import { ContactCardProps } from './sharedTypes';
+
+export default function ContactCard({
+  name, phone, email, onMessageClick, ...props 
+}: ContactCardProps) {
+  const firstName = name.split(" ")[0];
+  const parsedNumber = parsePhoneNumber(phone || '');
+  const phoneNumber = parsedNumber?.formatInternational();
+
+  return (
+      <StyledCard {...props}>
+          <Typography style={{ marginBottom: '8px' }} category="secondary" size="medium-medium">{name}</Typography>
+          {phoneNumber && (
+          <Link sx={{ display: 'flex' }} mt={1} fontSize={14} href={`tel:${phone}`}>
+              <LocalPhoneOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
+              <Typography category="secondary" size="x-small-book">{phoneNumber}</Typography>
+          </Link>
+          )}
+          {email && (
+          <Link sx={{ display: 'flex' }} mt={1} fontSize={14} href={`mailto:${email}`}>
+              <EmailOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
+              <Typography category="secondary" size="x-small-book">{email}</Typography>
+          </Link>
+          )}
+          <Button onClick={onMessageClick} category="link" style={{ marginTop: '8px' }}>
+              <>
+                  <img src={ChatIcon} alt="message" style={{ width: '20px' }} />
+                  <Typography style={{ paddingLeft: '8px' }} category="secondary" size="x-small-book">
+                      {`Message ${firstName}`}
+                  </Typography>
+              </>
+          </Button>
+      </StyledCard>
+  );
+}