@acusti/uikit-docs 0.2.0 → 0.3.0

package/stories/Button.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-    primary = false,
-    size = 'medium',
-    backgroundColor,
-    label,
-    ...props
-}: ButtonProps) => {
-    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-    return (
-        <button
-            type="button"
-            className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-            style={{ backgroundColor }}
-            {...props}
-        >
-            {label}
-        </button>
-    );
-};

package/stories/Header.stories.ts

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Header } from './Header';
-
-const meta = {
-    title: 'Example/Header',
-    component: Header,
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-    tags: ['autodocs'],
-    parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-        layout: 'fullscreen',
-    },
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
-    args: {
-        user: {
-            name: 'Jane Doe',
-        },
-    },
-};
-
-export const LoggedOut: Story = {};

package/stories/Header.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-import './header.css';
-
-type User = {
-    name: string;
-};
-
-interface HeaderProps {
-    user?: User;
-    onLogin: () => void;
-    onLogout: () => void;
-    onCreateAccount: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
-    <header>
-        <div className="storybook-header">
-            <div>
-                <svg
-                    width="32"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <g fill="none" fillRule="evenodd">
-                        <path
-                            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-                            fill="#FFF"
-                        />
-                        <path
-                            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-                            fill="#555AB9"
-                        />
-                        <path
-                            d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-                            fill="#91BAF8"
-                        />
-                    </g>
-                </svg>
-                <h1>Acme</h1>
-            </div>
-            <div>
-                {user ? (
-                    <>
-                        <span className="welcome">
-                            Welcome, <b>{user.name}</b>!
-                        </span>
-                        <Button size="small" onClick={onLogout} label="Log out" />
-                    </>
-                ) : (
-                    <>
-                        <Button size="small" onClick={onLogin} label="Log in" />
-                        <Button
-                            primary
-                            size="small"
-                            onClick={onCreateAccount}
-                            label="Sign up"
-                        />
-                    </>
-                )}
-            </div>
-        </div>
-    </header>
-);

package/stories/Page.stories.ts

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/test';
-
-import { Page } from './Page';
-
-const meta = {
-    title: 'Example/Page',
-    component: Page,
-    parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-        layout: 'fullscreen',
-    },
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedOut: Story = {};
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-export const LoggedIn: Story = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const loginButton = await canvas.getByRole('button', {
-            name: /Log in/i,
-        });
-        await userEvent.click(loginButton);
-    },
-};

package/stories/Page.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import { Header } from './Header';
-import './page.css';
-
-type User = {
-    name: string;
-};
-
-export const Page: React.FC = () => {
-    const [user, setUser] = React.useState<User>();
-
-    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/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 700;
-    border: 0;
-    border-radius: 3em;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 1;
-}
-.storybook-button--primary {
-    color: white;
-    background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-    color: #333;
-    background-color: transparent;
-    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-    font-size: 12px;
-    padding: 10px 16px;
-}
-.storybook-button--medium {
-    font-size: 14px;
-    padding: 11px 20px;
-}
-.storybook-button--large {
-    font-size: 16px;
-    padding: 12px 24px;
-}

package/stories/header.css

@@ -1,32 +0,0 @@
-.storybook-header {
-    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 15px 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.storybook-header svg {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.storybook-header h1 {
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 1;
-    margin: 6px 0 6px 10px;
-    display: inline-block;
-    vertical-align: top;
-}
-
-.storybook-header button + button {
-    margin-left: 10px;
-}
-
-.storybook-header .welcome {
-    color: #333;
-    font-size: 14px;
-    margin-right: 10px;
-}

package/stories/page.css

@@ -1,69 +0,0 @@
-.storybook-page {
-    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    padding: 48px 20px;
-    margin: 0 auto;
-    max-width: 600px;
-    color: #333;
-}
-
-.storybook-page h2 {
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 1;
-    margin: 0 0 4px;
-    display: inline-block;
-    vertical-align: top;
-}
-
-.storybook-page p {
-    margin: 1em 0;
-}
-
-.storybook-page a {
-    text-decoration: none;
-    color: #1ea7fd;
-}
-
-.storybook-page ul {
-    padding-left: 30px;
-    margin: 1em 0;
-}
-
-.storybook-page li {
-    margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #e7fdd8;
-    color: #66bf3c;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-    display: inline-block;
-    height: 12px;
-    width: 12px;
-    margin-right: 4px;
-    vertical-align: top;
-    margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-    fill: #1ea7fd;
-}