@universal-tennis/ui-shared 0.1.82 → 0.1.86

package/.eslintignore

@@ -1 +1 @@
-!.storybook
+!.storybook

package/.eslintrc.js

@@ -1,73 +1,73 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true
-  },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-    'plugin:storybook/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:storybook/recommended',
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true
-    },
-    ecmaVersion: 12,
-    sourceType: 'module'
-  },
-  plugins: ['react', '@typescript-eslint'],
-  rules: {
-    "max-len": [2, { code: 140 }],
-    'react/prop-types': 0,
-    radix: 0,
-    'no-shadow': 0,
-    'prefer-rest-params': 0,
-    'no-case-declarations': 0,
-    'import/extensions': 0,
-    'react/react-in-jsx-scope': 0,
-    'react/no-children-prop': 0,
-    'import/no-unresolved': 0,
-    'no-use-before-define': 0,
-    'import/prefer-default-export': 0,
-    'react/jsx-filename-extension': 0,
-    'react/no-array-index-key': 0,
-    '@typescript-eslint/no-empty-function': 0,
-    'import/no-named-as-default': 0,
-    'react/jsx-indent': ['error', 4],
-    'react/jsx-indent-props': ['error', 4],
-    'react/jsx-props-no-spreading': 0,
-    'no-nested-ternary': 0,
-    'no-plusplus': 0,
-    'consistent-return': 0,
-    'no-param-reassign': 0,
-    'no-await-in-loop': 0,
-    'no-return-await': 0,
-    'import/named': 0,
-    'no-console': 0,
-    'import/no-named-as-default-member': 0,
-    'linebreak-style': 0,
-    'no-unused-vars': 0,
-    'react/no-unstable-nested-components': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'no-extraneous-dependencies': 0,
-    'require-default-props': 0,
-    'comma-dangle': 0,
-    'no-trailing-spaces': 0,
-    'react/require-default-props': 0,
-    '@typescript-eslint/ban-ts-comment': 0,
-    quotes: 0
-  },
-  settings: {
-    "import/resolver": {
-      typescript: {
-        node: {
-          extensions: [".js", ".ts"],
-          moduleDirectory: ["node_modules", "src"]
-        }
-      }
-    }
-  }
-};
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+    'plugin:storybook/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:storybook/recommended',
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    "max-len": [2, { code: 140 }],
+    'react/prop-types': 0,
+    radix: 0,
+    'no-shadow': 0,
+    'prefer-rest-params': 0,
+    'no-case-declarations': 0,
+    'import/extensions': 0,
+    'react/react-in-jsx-scope': 0,
+    'react/no-children-prop': 0,
+    'import/no-unresolved': 0,
+    'no-use-before-define': 0,
+    'import/prefer-default-export': 0,
+    'react/jsx-filename-extension': 0,
+    'react/no-array-index-key': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    'import/no-named-as-default': 0,
+    'react/jsx-indent': ['error', 4],
+    'react/jsx-indent-props': ['error', 4],
+    'react/jsx-props-no-spreading': 0,
+    'no-nested-ternary': 0,
+    'no-plusplus': 0,
+    'consistent-return': 0,
+    'no-param-reassign': 0,
+    'no-await-in-loop': 0,
+    'no-return-await': 0,
+    'import/named': 0,
+    'no-console': 0,
+    'import/no-named-as-default-member': 0,
+    'linebreak-style': 0,
+    'no-unused-vars': 0,
+    'react/no-unstable-nested-components': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'no-extraneous-dependencies': 0,
+    'require-default-props': 0,
+    'comma-dangle': 0,
+    'no-trailing-spaces': 0,
+    'react/require-default-props': 0,
+    '@typescript-eslint/ban-ts-comment': 0,
+    quotes: 0
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        node: {
+          extensions: [".js", ".ts"],
+          moduleDirectory: ["node_modules", "src"]
+        }
+      }
+    }
+  }
+};

package/.storybook/preview.js

@@ -1,12 +1,17 @@
-import "./typography.css";
-import './variables.css';
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import "./typography.css";
+import './variables.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS
+  }
+};

package/.storybook/variables.css

@@ -1,16 +1,17 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --grey: #828B96;
-    --darkest-grey: #3b4859;
-    --cool-grey-600: #A7B2C1;
-    --cool-grey-500: #C1CCDA;
-    --cool-grey-300: #DDE3EB;
-    --cool-grey-150: #F0F4F9;
-    --blue-grey-500: #778DA9;
-    }
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --grey: #828B96;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-500: #C1CCDA;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    --blue-grey-500: #778DA9;
+    --teal: #01DFCB;
+    }
     

package/README.md

@@ -1,130 +1,130 @@
-# UI-Shared 
-
-This repo was created to help organize components across the UT ecosystem; following specific design rules: 
-
-**Stack:**
-<br />
--   React (18.2.0)
-<br />
--   TypeScript 
-<br />
--   [MUI](https://mui.com/)
-<br />
--   Styled-Components (as part of MUI)
-
-## To install:
-
-```npm install @universal-tennis/ui-shared```
-or 
-``` yarn add @universal-tennis/ui-shared```
-
-## Design rules
-
-#### Components following material and atomic design rules; 
-
-
-1.  Standard naming components; with primary/secondary/etc variations. Keeping variations minimal and purposeful.
-<br /> 
-<br /> 
-
-**Example:** 
-```
-    <Button type="primary" /> 
-    <Button type="secondary" /> 
-```
-<br />
-**NOT** 
-```
-    <Button type="team-page-button" /> 
-    <Button type="home-page-button" /> 
-```
-<br />
-<br />
-
-Buttons should be uniform across the platforms with minimal variants, not multiple buttons created for each pages. 
-
-<br />
-2.  Components broken into their smallest parts, atoms, then built up from there.
-<br />
-<br />
-    **Example:** 
-    ```
-        <Card> // Molecule
-            <Typography> // Atom
-                Sample Header
-            </Typography>
-            <Button> // Atom
-                Sample Button
-            </Button>
-        </Card>
-    ```
-<br />
-<br />
-    A component that uses these cards in combination with other components would be considered an organism.
-
-<br />
-3.   Components should all be "dumb" components - keeping only local state or logic specific to the component, minimizing side effects. 
-<br />
-[Functional Programming - Side Effects](https://www.yld.io/blog/the-not-so-scary-guide-to-functional-programming/#:~:text=A%20side%20effect%20is%20when,described%20as%20having%20side%20effects.)
-
-<br />
-4.  Common colors, BBM sizing, common functionality are standardized in the same way we write components. 
-<br />
-<br />
-     **Example:** 
-     <br />
-     -  "Primary"/ "secondary" vs "Team-card-header-blue-color" - minimzing number of color variations.
-
-<br />
-*To read more:*
-<br />
-[Material design rules](https://m2.material.io/design/color/the-color-system.html)
-<br />
-[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
-
-
-## Bitbucket CICD flow Publishing the Repo
-
-1. Pull the latest from master -> make changes to a PR back into master.
-First when creating a new component, make sure to add it to the `components.jsx` file.
-2. In the `package.json` file, make sure to pump to the next minor version.
-3. After merging back into master, tag the commit with the same `package.json` version number. 
-This will then trigger a NPM package build with the version listed in the `package.json`; make sure the release tags are the same for consistency.  
-
-It can now be accessed in another repo like this:
-<br />
-`import {Button} from "@universal-tennis/ui-shared";`
-
-#### Manually Publishing the Repo (Should be done via CICD flow)
-
-1. First when creating a new component, make sure to add it to the `components.jsx` file.
-2. Then Run `yarn run publish:npm` to build a optimized build for all the components, this is configured for TS. 
-3. In the `package.json` file, make sure to pump to the next minor version.
-4. Finally `yarn run publish-package` to deploy this version to NPM. 
-
-It can now be accessed in another repo like this:
-<br />
-`import {Button} from "@universal-tennis/ui-shared";`
-
-### Development on Local
-
-1. Create a new branch and make changes: (for this example "sample-link-branch")
-2. Push changes to the branch / test before with storybook. 
-3. Run `npm install https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch` from the other repo to view these updates. 
-In this url (https://<USER>@bitbucket.org/<ORG>/<REPO>#<BRANCH>)
-4. You can now see the changes from your npm branch in a different repo. 
-you'll now see in your package.json:         
-```"@universal-tennis/ui-shared": "git+https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch"```
-
-
-## Available Scripts
-
-### `npm start` using npm 16.14.0
-
-Runs the storybook app in localhost.
-<br />
-Open [http://localhost:6006](http://localhost:6006) to view storybook in your browser.
-<br />
-The page will reload when you make changes.
-<br />
+# UI-Shared 
+
+This repo was created to help organize components across the UT ecosystem; following specific design rules: 
+
+**Stack:**
+<br />
+-   React (18.2.0)
+<br />
+-   TypeScript 
+<br />
+-   [MUI](https://mui.com/)
+<br />
+-   Styled-Components (as part of MUI)
+
+## To install:
+
+```npm install @universal-tennis/ui-shared```
+or 
+``` yarn add @universal-tennis/ui-shared```
+
+## Design rules
+
+#### Components following material and atomic design rules; 
+
+
+1.  Standard naming components; with primary/secondary/etc variations. Keeping variations minimal and purposeful.
+<br /> 
+<br /> 
+
+**Example:** 
+```
+    <Button type="primary" /> 
+    <Button type="secondary" /> 
+```
+<br />
+**NOT** 
+```
+    <Button type="team-page-button" /> 
+    <Button type="home-page-button" /> 
+```
+<br />
+<br />
+
+Buttons should be uniform across the platforms with minimal variants, not multiple buttons created for each pages. 
+
+<br />
+2.  Components broken into their smallest parts, atoms, then built up from there.
+<br />
+<br />
+    **Example:** 
+    ```
+        <Card> // Molecule
+            <Typography> // Atom
+                Sample Header
+            </Typography>
+            <Button> // Atom
+                Sample Button
+            </Button>
+        </Card>
+    ```
+<br />
+<br />
+    A component that uses these cards in combination with other components would be considered an organism.
+
+<br />
+3.   Components should all be "dumb" components - keeping only local state or logic specific to the component, minimizing side effects. 
+<br />
+[Functional Programming - Side Effects](https://www.yld.io/blog/the-not-so-scary-guide-to-functional-programming/#:~:text=A%20side%20effect%20is%20when,described%20as%20having%20side%20effects.)
+
+<br />
+4.  Common colors, BBM sizing, common functionality are standardized in the same way we write components. 
+<br />
+<br />
+     **Example:** 
+     <br />
+     -  "Primary"/ "secondary" vs "Team-card-header-blue-color" - minimzing number of color variations.
+
+<br />
+*To read more:*
+<br />
+[Material design rules](https://m2.material.io/design/color/the-color-system.html)
+<br />
+[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
+
+
+## Bitbucket CICD flow Publishing the Repo
+
+1. Pull the latest from master -> make changes to a PR back into master.
+First when creating a new component, make sure to add it to the `components.jsx` file.
+2. In the `package.json` file, make sure to pump to the next minor version.
+3. After merging back into master, tag the commit with the same `package.json` version number. 
+This will then trigger a NPM package build with the version listed in the `package.json`; make sure the release tags are the same for consistency.  
+
+It can now be accessed in another repo like this:
+<br />
+`import {Button} from "@universal-tennis/ui-shared";`
+
+#### Manually Publishing the Repo (Should be done via CICD flow)
+
+1. First when creating a new component, make sure to add it to the `components.jsx` file.
+2. Then Run `yarn run publish:npm` to build a optimized build for all the components, this is configured for TS. 
+3. In the `package.json` file, make sure to pump to the next minor version.
+4. Finally `yarn run publish-package` to deploy this version to NPM. 
+
+It can now be accessed in another repo like this:
+<br />
+`import {Button} from "@universal-tennis/ui-shared";`
+
+### Development on Local
+
+1. Create a new branch and make changes: (for this example "sample-link-branch")
+2. Push changes to the branch / test before with storybook. 
+3. Run `npm install https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch` from the other repo to view these updates. 
+In this url (https://<USER>@bitbucket.org/<ORG>/<REPO>#<BRANCH>)
+4. You can now see the changes from your npm branch in a different repo. 
+you'll now see in your package.json:         
+```"@universal-tennis/ui-shared": "git+https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch"```
+
+
+## Available Scripts
+
+### `npm start` using npm 16.14.0
+
+Runs the storybook app in localhost.
+<br />
+Open [http://localhost:6006](http://localhost:6006) to view storybook in your browser.
+<br />
+The page will reload when you make changes.
+<br />
 You may also see any lint errors in the console.

package/dist/App.d.ts

@@ -1,2 +1,2 @@
-export default App;
-declare function App(): JSX.Element;
+export default App;
+declare function App(): JSX.Element;

package/dist/App.js

@@ -1,13 +1,13 @@
-function App() {
-    return (React.createElement("div", { className: "App" },
-        React.createElement("header", { className: "App-header" },
-            React.createElement("p", null,
-                "Edit",
-                ' ',
-                React.createElement("code", null, "src/App.js"),
-                ' ',
-                "and save to reload."),
-            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
-}
-export default App;
+function App() {
+    return (React.createElement("div", { className: "App" },
+        React.createElement("header", { className: "App-header" },
+            React.createElement("p", null,
+                "Edit",
+                ' ',
+                React.createElement("code", null, "src/App.js"),
+                ' ',
+                "and save to reload."),
+            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
+}
+export default App;
 //# sourceMappingURL=App.js.map

package/dist/components.d.ts

@@ -1,37 +1,38 @@
-export { default as Button } from "./stories/atoms/Button/Button";
-export { default as UTMap } from "./stories/atoms/UTMap/UTMap";
-export { default as Typography } from "./stories/atoms/Typography/Typography";
-export { default as AddIcon } from "./stories/atoms/Icons/AddIcon";
-export { default as AvailabilityMaybeIcon } from "./stories/atoms/Icons/AvailabilityMaybeIcon";
-export { default as AvailabilityNoIcon } from "./stories/atoms/Icons/AvailabilityNoIcon";
-export { default as AvailabilityYesIcon } from "./stories/atoms/Icons/AvailabilityYesIcon";
-export { default as AvailabilityNotSetIcon } from "./stories/atoms/Icons/AvailabilityNotSetIcon";
-export { default as CalendarIcon } from "./stories/atoms/Icons/CalendarIcon";
-export { default as ClockIcon } from "./stories/atoms/Icons/ClockIcon";
-export { default as CloseIcon } from "./stories/atoms/Icons/CloseIcon";
-export { default as DeleteIcon } from "./stories/atoms/Icons/DeleteIcon";
-export { default as DoublePersonIcon } from "./stories/atoms/Icons/DoublePersonIcon";
-export { default as EditIcon } from "./stories/atoms/Icons/EditIcon";
-export { default as LocationIcon } from "./stories/atoms/Icons/LocationIcon";
-export { default as LeftChevronIcon } from "./stories/atoms/Icons/LeftChevronIcon";
-export { default as LineIcon } from "./stories/atoms/Icons/LineIcon";
-export { default as MessageIcon } from "./stories/atoms/Icons/MessageIcon";
-export { default as RightChevronIcon } from "./stories/atoms/Icons/RightChevronIcon";
-export { default as SessionIcon } from "./stories/atoms/Icons/SessionIcon";
-export { default as SinglePersonIcon } from "./stories/atoms/Icons/SinglePersonIcon";
-export { default as SwapIcon } from "./stories/atoms/Icons/SwapIcon";
-export { default as SwapNoBorderIcon } from "./stories/atoms/Icons/SwapNoBorderIcon";
-export { default as VerifiedIcon } from "./stories/atoms/Icons/VerifiedIcon";
-export { default as VisibilityIcon } from "./stories/atoms/Icons/VisibilityIcon";
-export { default as VisibilityOffIcon } from "./stories/atoms/Icons/VisibilityOffIcon";
-export { default as WinnerIndicatorIcon } from "./stories/atoms/Icons/WinnerIndicatorIcon";
-export { default as AvatarWithName } from "./stories/molecules/AvatarWithName/AvatarWithName";
-export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
-export { default as DrawCard } from "./stories/molecules/Cards/DrawCard";
-export { default as SquareAvatarWithName } from "./stories/molecules/SquareAvatarWithName/SquareAvatarWithName";
-export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";
-export { default as TeamDrawCard } from "./stories/molecules/Cards/TeamDrawCard";
-export { default as DrawCardTable } from "./stories/organisms/Tables/DrawCardTable";
-export { default as FullPageModal } from "./stories/organisms/Modals/FullPageModal";
-export { default as SortableTable } from "./stories/organisms/Tables/SortableTable";
-export { default as TeamDrawCardTable } from "./stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable";
+export { default as Button } from "./stories/atoms/Button/Button";
+export { default as UTMap } from "./stories/atoms/UTMap/UTMap";
+export { default as Typography } from "./stories/atoms/Typography/Typography";
+export { default as AddIcon } from "./stories/atoms/Icons/AddIcon";
+export { default as AvailabilityMaybeIcon } from "./stories/atoms/Icons/AvailabilityMaybeIcon";
+export { default as AvailabilityNoIcon } from "./stories/atoms/Icons/AvailabilityNoIcon";
+export { default as AvailabilityYesIcon } from "./stories/atoms/Icons/AvailabilityYesIcon";
+export { default as AvailabilityNotSetIcon } from "./stories/atoms/Icons/AvailabilityNotSetIcon";
+export { default as CalendarIcon } from "./stories/atoms/Icons/CalendarIcon";
+export { default as ClockIcon } from "./stories/atoms/Icons/ClockIcon";
+export { default as CloseIcon } from "./stories/atoms/Icons/CloseIcon";
+export { default as DeleteIcon } from "./stories/atoms/Icons/DeleteIcon";
+export { default as DoublePersonIcon } from "./stories/atoms/Icons/DoublePersonIcon";
+export { default as EditIcon } from "./stories/atoms/Icons/EditIcon";
+export { default as LocationIcon } from "./stories/atoms/Icons/LocationIcon";
+export { default as LeftChevronIcon } from "./stories/atoms/Icons/LeftChevronIcon";
+export { default as LineIcon } from "./stories/atoms/Icons/LineIcon";
+export { default as MessageIcon } from "./stories/atoms/Icons/MessageIcon";
+export { default as RightChevronIcon } from "./stories/atoms/Icons/RightChevronIcon";
+export { default as SessionIcon } from "./stories/atoms/Icons/SessionIcon";
+export { default as SinglePersonIcon } from "./stories/atoms/Icons/SinglePersonIcon";
+export { default as SwapIcon } from "./stories/atoms/Icons/SwapIcon";
+export { default as SwapNoBorderIcon } from "./stories/atoms/Icons/SwapNoBorderIcon";
+export { default as VerifiedIcon } from "./stories/atoms/Icons/VerifiedIcon";
+export { default as VisibilityIcon } from "./stories/atoms/Icons/VisibilityIcon";
+export { default as VisibilityOffIcon } from "./stories/atoms/Icons/VisibilityOffIcon";
+export { default as WinnerIndicatorIcon } from "./stories/atoms/Icons/WinnerIndicatorIcon";
+export { default as AvatarWithName } from "./stories/molecules/AvatarWithName/AvatarWithName";
+export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
+export { default as DrawCard } from "./stories/molecules/Cards/DrawCard";
+export { default as SquareAvatarWithName } from "./stories/molecules/SquareAvatarWithName/SquareAvatarWithName";
+export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";
+export { default as TeamDrawCard } from "./stories/molecules/Cards/TeamDrawCard";
+export { default as DrawCardTable } from "./stories/organisms/Tables/DrawCardTable";
+export { default as FullPageModal } from "./stories/organisms/Modals/FullPageModal";
+export { default as SortableTable } from "./stories/organisms/Tables/SortableTable";
+export { default as TeamDrawCardTable } from "./stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable";
+export { default as Footer } from "./stories/organisms/Footer/Footer";