tournament-brackets-ui 0.1.0

package/src/stories/Individuals/10-Player/CollapsedRight.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedRight from '../../../components/Individuals/10-Player/CollapsedRight';
+import { samplePlayers10 } from '../../data/players';
+
+export default {
+  title: 'Individuals/10-Player/CollapsedRight',
+  component: CollapsedRight,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedRight {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers10,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/10-Player/Expanded.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Expanded from '../../../components/Individuals/10-Player/Expanded';
+import { samplePlayers10 } from '../../data/players';
+
+export default {
+  title: 'Individuals/10-Player/Expanded',
+  component: Expanded,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <Expanded {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers10,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   14,
+  playerNameFontSize: 12,
+};

package/src/stories/Individuals/11-Player/CollapsedLeft.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedLeft from '../../../components/Individuals/11-Player/CollapsedLeft';
+import { samplePlayers11 } from '../../data/players';
+
+export default {
+  title: 'Individuals/11-Player/CollapsedLeft',
+  component: CollapsedLeft,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedLeft {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers11,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/11-Player/CollapsedRight.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedRight from '../../../components/Individuals/11-Player/CollapsedRight';
+import { samplePlayers11 } from '../../data/players';
+
+export default {
+  title: 'Individuals/11-Player/CollapsedRight',
+  component: CollapsedRight,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedRight {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers11,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/11-Player/Expanded.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Expanded from '../../../components/Individuals/11-Player/Expanded';
+import { samplePlayers11 } from '../../data/players';
+
+export default {
+  title: 'Individuals/11-Player/Expanded',
+  component: Expanded,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <Expanded {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers11,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   14,
+  playerNameFontSize: 12,
+};

package/src/stories/Individuals/12-Player/CollapsedLeft.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedLeft from '../../../components/Individuals/12-Player/CollapsedLeft';
+import { samplePlayers12 } from '../../data/players';
+
+export default {
+  title: 'Individuals/12-Player/CollapsedLeft',
+  component: CollapsedLeft,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedLeft {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers12,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/12-Player/CollapsedRight.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedRight from '../../../components/Individuals/12-Player/CollapsedRight';
+import { samplePlayers12 } from '../../data/players';
+
+export default {
+  title: 'Individuals/12-Player/CollapsedRight',
+  component: CollapsedRight,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedRight {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers12,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/12-Player/Expanded.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Expanded from '../../../components/Individuals/12-Player/Expanded';
+import { samplePlayers12 } from '../../data/players';
+
+export default {
+  title: 'Individuals/12-Player/Expanded',
+  component: Expanded,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <Expanded {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers12,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/13-Player/CollapsedLeft.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedLeft from '../../../components/Individuals/13-Player/CollapsedLeft';
+import { samplePlayers13 } from '../../data/players';
+
+export default {
+  title: 'Individuals/13-Player/CollapsedLeft',
+  component: CollapsedLeft,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedLeft {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers13,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/13-Player/CollapsedRight.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedRight from '../../../components/Individuals/13-Player/CollapsedRight';
+import { samplePlayers13 } from '../../data/players';
+
+export default {
+  title: 'Individuals/13-Player/CollapsedRight',
+  component: CollapsedRight,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedRight {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers13,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/13-Player/Expanded.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Expanded from '../../../components/Individuals/13-Player/Expanded';
+import { samplePlayers13 } from '../../data/players';
+
+export default {
+  title: 'Individuals/13-Player/Expanded',
+  component: Expanded,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <Expanded {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers13,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/14-Player/CollapsedLeft.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedLeft from '../../../components/Individuals/14-Player/CollapsedLeft';
+import { samplePlayers14 } from '../../data/players';
+
+export default {
+  title: 'Individuals/14-Player/CollapsedLeft',
+  component: CollapsedLeft,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedLeft {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers14,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/14-Player/CollapsedRight.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedRight from '../../../components/Individuals/14-Player/CollapsedRight';
+import { samplePlayers14 } from '../../data/players';
+
+export default {
+  title: 'Individuals/14-Player/CollapsedRight',
+  component: CollapsedRight,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedRight {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers14,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/14-Player/Expanded.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Expanded from '../../../components/Individuals/14-Player/Expanded';
+import { samplePlayers14 } from '../../data/players';
+
+export default {
+  title: 'Individuals/14-Player/Expanded',
+  component: Expanded,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <Expanded {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers14,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   14,
+  playerNameFontSize: 12,
+};

package/src/stories/Individuals/16-Player/CollapsedLeft.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedLeft from '../../../components/Individuals/16-Player/CollapsedLeft';
+import { samplePlayers16 } from '../../data/players';
+
+export default {
+  title: 'Individuals/16-Player/CollapsedLeft',
+  component: CollapsedLeft,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedLeft {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers16,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/16-Player/CollapsedRight.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CollapsedRight from '../../../components/Individuals/16-Player/CollapsedRight';
+import { samplePlayers16 } from '../../data/players';
+
+export default {
+  title: 'Individuals/16-Player/CollapsedRight',
+  component: CollapsedRight,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <CollapsedRight {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers16,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   11,
+  playerNameFontSize: 11,
+};

package/src/stories/Individuals/16-Player/Expanded.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Expanded from '../../../components/Individuals/16-Player/Expanded';
+import { samplePlayers16 } from '../../data/players';
+
+export default {
+  title: 'Individuals/16-Player/Expanded',
+  component: Expanded,
+  argTypes: {
+    players:             { control: 'object' },
+    fontFamily:          { control: 'text' },
+    playerIDFontSize:    { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'ID cell font size in pt'
+    },
+    playerNameFontSize:  { 
+      control: { type:'number', min:6, max:72, step:1 },
+      description: 'Name cell font size in pt'
+    },
+  },
+};
+
+const Template = (args) => <Expanded {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  players:            samplePlayers16,
+  fontFamily:         'Arial, sans-serif',
+  playerIDFontSize:   14,
+  playerNameFontSize: 12,
+};

package/src/stories/Page.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+export const Page = () => {
+  const [user, setUser] = React.useState();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/src/stories/Page.stories.js

@@ -0,0 +1,28 @@
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

package/src/stories/Teams/08-Team/CollapsedLeft.stories.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import CollapsedLeft from "../../../components/Teams/08-Team/CollapsedLeft";
+import { sampleTeams8 } from "../../data/teams";
+
+export default {
+  title: 'Teams/08-Team/CollapsedLeft',
+  component: CollapsedLeft,
+  argTypes: {
+    teams:            { control: 'object' },
+    teamIDFontFamily: {
+      control: 'text',
+      description: 'CSS font-family for the team-ID cell'
+    },
+    teamIDColor: {
+      control: 'color',
+      description: 'CSS text color for the team-ID cell'
+    },
+    teamIDFontSize: {
+      control:    { type: 'number', min: 6, max: 72, step: 1 },
+      description:'Font size (in points) for the team-ID cell',
+    },
+  }
+};
+
+const Template = (args) => <CollapsedLeft {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  teams:            sampleTeams8,
+  teamIDFontFamily: 'Arial, sans-serif',
+  teamIDColor:      '#c00',
+  teamIDFontSize:   11,
+};