paris 0.0.1 → 0.2.0

package/scripts/text.ts

@@ -0,0 +1,118 @@
+#!/usr/bin/env ts-node --esm
+
+/**
+ * @file Generates CSS modules and Storybook stories for typography classes.
+ */
+
+import fs from 'fs/promises';
+import * as cp from 'child_process';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+import type { StoryObj } from '@storybook/react';
+import { pascalCase } from 'change-case';
+import type { FontDefinition, Theme } from '../src/stories/theme';
+import { theme, pvar, LightTheme } from '../src/stories/theme';
+import type { Text } from '../src/stories/text';
+
+jss.setup({
+    ...preset(),
+    createGenerateId: () => (rule) => rule.key,
+});
+
+/**
+ * Generates a CSS module with all the typography classes.
+ */
+export const text = async () => {
+    const styles = Object.fromEntries(
+        (Object.entries(theme.typography.styles) as Array<[keyof Theme['typography']['styles'], FontDefinition]>)
+            .map(([fontClass, value]) => [
+                fontClass,
+                Object.fromEntries(
+                    (Object.keys(value) as Array<keyof FontDefinition>).map((attr) => [
+                        attr,
+                        pvar(`typography.styles.${fontClass}.${attr}`),
+                    ]),
+                ),
+            ]),
+    );
+    // const { styles } = theme.typography;
+    const css = `/* Auto-generated with \`pnpm generate:text\` on ${new Date().toString()} */\n/* Do not edit manually; instead, edit the \`generateTextClasses\` function in \`scripts/text.ts\` and run \`pnpm generate:text -c\`. */\n\n${jss.createStyleSheet(styles).toString()}`;
+    await fs.writeFile('src/stories/text/Typography.module.css', css
+        // Add a newline after each class
+        .replaceAll('}', '}\n'));
+};
+
+/**
+ * Generates Storybook stories for each typography class.
+ */
+export const generateTextStories = async () => {
+    const stories: Array<[string, StoryObj<typeof Text>]> = Object.keys(LightTheme.typography.styles)
+        .map((style) => ([
+            style,
+            {
+                args: {
+                    children: 'In an alleyway, drinking champagne',
+                    kind: style,
+                },
+            } as StoryObj<typeof Text>,
+        ]));
+
+    // Retrieve current stories
+    const currentStories = await fs.readFile('src/stories/text/Text.stories.ts', 'utf-8');
+
+    // Look for `// @auto-generated-start` and `// @auto-generated-end`
+    const start = currentStories.indexOf('// @auto-generated-start');
+    const end = currentStories.indexOf('// @auto-generated-end');
+
+    // Generate the new stories
+    const out = stories.map((story) => `export const ${pascalCase(story[0] as string).replace('Xx', 'XX')}: Story = ${JSON.stringify(story[1], null, 4)};`).join('\n\n');
+
+    // If the start and end tags are found, replace the content between them
+    if (start !== -1 && end !== -1) {
+        const newStories = `${currentStories.slice(0, start + '// @auto-generated-start\n\n'.length)}${
+            out
+        }\n\n${
+            currentStories.slice(end)}`;
+        await fs.writeFile('src/stories/text/Text.stories.ts', newStories);
+    } else {
+    // Otherwise, append the new stories to the end of the file and add the start and end tags
+        const newStories = `${currentStories
+        }\n\n// @auto-generated-start\n\n${
+            out
+        }\n\n// @auto-generated-end`;
+        await fs.writeFile('src/stories/text/Text.stories.ts', newStories);
+    }
+
+    // const storyFile = stories.map((story) => `export const ${pascalCase(story.storyName as string)}: Story = ${JSON.stringify(story, null, 4)};`).join('\n\n');
+    // await fs.writeFile('src/stories/text/Text.generated-stories.ts', storyFile);
+};
+
+(async function main() {
+    let argReceived = false;
+    if (process.argv.includes('--stories') || process.argv.includes('-s')) {
+        const startS = Date.now();
+        argReceived = true;
+        await generateTextStories();
+        try {
+            cp.execSync('eslint --fix src/stories/text/Text.stories.ts');
+        } catch (e: any) {
+            console.error('❌   Failed to lint generated stories.');
+            if (e?.stdout) {
+                console.error(e?.stdout?.toString());
+            }
+            process.exit(1);
+        }
+        console.info(`✅   Successfully generated stories in ${Date.now() - startS}ms`);
+    }
+    if (process.argv.includes('--classes') || process.argv.includes('-c')) {
+        const startC = Date.now();
+        argReceived = true;
+        await text();
+        console.info(`✅   Successfully generated classes in ${Date.now() - startC}ms`);
+    }
+    if (!argReceived) {
+        console.error('❌   No arguments received. Please specify either --stories, --classes, or both.');
+        process.exit(1);
+    }
+    process.exit(0);
+}());

package/src/pages/_app.tsx

@@ -0,0 +1,7 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import '@/styles/globals.css';
+import type { AppProps } from 'next/app';
+
+export default function App({ Component, pageProps }: AppProps) {
+    return <Component {...pageProps} />;
+}

package/src/pages/_document.tsx

@@ -0,0 +1,15 @@
+import {
+    Html, Head, Main, NextScript,
+} from 'next/document';
+
+export default function Document() {
+    return (
+        <Html lang="en">
+            <Head />
+            <body>
+                <Main />
+                <NextScript />
+            </body>
+        </Html>
+    );
+}

package/src/pages/index.tsx

@@ -0,0 +1,132 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import { Inter } from 'next/font/google';
+import styles from '@/styles/Home.module.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function Home() {
+    return (
+        <>
+            <Head>
+                <title>Create Next App</title>
+                <meta name="description" content="Generated by create next app" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+            <main className={styles.main}>
+                <div className={styles.description}>
+                    <p>
+                        Get started by editing&nbsp;
+                        <code className={styles.code}>src/pages/index.tsx</code>
+                    </p>
+                    <div>
+                        <a
+                            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            By
+                            {' '}
+                            <Image
+                                src="/vercel.svg"
+                                alt="Vercel Logo"
+                                className={styles.vercelLogo}
+                                width={100}
+                                height={24}
+                                priority
+                            />
+                        </a>
+                    </div>
+                </div>
+
+                <div className={styles.center}>
+                    <Image
+                        className={styles.logo}
+                        src="/next.svg"
+                        alt="Next.js Logo"
+                        width={180}
+                        height={37}
+                        priority
+                    />
+                    <div className={styles.thirteen}>
+                        <Image
+                            src="/thirteen.svg"
+                            alt="13"
+                            width={40}
+                            height={31}
+                            priority
+                        />
+                    </div>
+                </div>
+
+                <div className={styles.grid}>
+                    <a
+                        href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+                        className={styles.card}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <h2 className={inter.className}>
+                            Docs
+                            {' '}
+                            <span>-&gt;</span>
+                        </h2>
+                        <p className={inter.className}>
+                            Find in-depth information about Next.js features and&nbsp;API.
+                        </p>
+                    </a>
+
+                    <a
+                        href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+                        className={styles.card}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <h2 className={inter.className}>
+                            Learn
+                            {' '}
+                            <span>-&gt;</span>
+                        </h2>
+                        <p className={inter.className}>
+                            Learn about Next.js in an interactive course with&nbsp;quizzes!
+                        </p>
+                    </a>
+
+                    <a
+                        href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+                        className={styles.card}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <h2 className={inter.className}>
+                            Templates
+                            {' '}
+                            <span>-&gt;</span>
+                        </h2>
+                        <p className={inter.className}>
+                            Discover and deploy boilerplate example Next.js&nbsp;projects.
+                        </p>
+                    </a>
+
+                    <a
+                        href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+                        className={styles.card}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <h2 className={inter.className}>
+                            Deploy
+                            {' '}
+                            <span>-&gt;</span>
+                        </h2>
+                        <p className={inter.className}>
+                            Instantly deploy your Next.js site to a shareable URL
+                            with&nbsp;Vercel.
+                        </p>
+                    </a>
+                </div>
+            </main>
+        </>
+    );
+}

package/src/stories/Tokens.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/blocks';
+import { LightTheme, pget, pvar } from './theme';
+
+<Meta title="Tokens" />
+
+# Tokens
+
+Tokens are the smallest pieces of design language that can be used to build components. They are the building blocks of our design system—you can think of them as the basic variables of our design language.
+
+<br />
+
+## Colors
+
+<div
+    style={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+        gridTemplateRows: 'auto',
+        alignItems: 'center',
+        gap: '1rem',
+    }}
+>
+    {Object.entries(LightTheme.colors).map(([key, value]) => (
+        <div key={key} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+            <div
+                style={{
+                    width: '2rem',
+                    height: '2rem',
+                    backgroundColor: pvar(`colors.${key}`),
+                    borderColor: pvar(`colors.borderSelected`),
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    marginRight: '1rem',
+                    borderRadius: '100%',
+                }}
+            />
+            <div style={{ color: pvar('colors.contentPrimary') }}>
+                <span style={{ fontWeight: pvar('typography.boldFontWeight') }}>{key}</span>
+                <br />
+                <pre style={{ fontSize: '14px' }}>{pget(`colors.${key}`)}</pre>
+            </div>
+        </div>
+    ))}
+</div>
+
+<br />
+
+## Typography
+
+<div>
+    <pre style={{ color: pvar('colors.contentPrimary') }}>{JSON.stringify(LightTheme.typography, null, 4).replaceAll('"', '').replaceAll(',', '\n').replaceAll('{', '\n').replaceAll('}', '\n').replaceAll('\\', '')}</pre>
+</div>
+

package/src/stories/Welcome.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Meta } from '@storybook/blocks';
+import Readme from '../../README.md?raw';
+
+<Meta title="Welcome" />
+
+<Markdown>
+    {Readme}
+</Markdown>

package/src/stories/button/Button.module.scss

@@ -0,0 +1,128 @@
+// Main styles
+.button {
+    user-select: none;
+
+    border: 1px solid;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    transition: var(--pte-animations-interaction);
+
+    &:hover {
+        cursor: default;
+        background-color: var(--pte-colors-backgroundInverseTertiary);
+    }
+
+    &:active {
+        opacity: 0.9;
+        transform: scale(0.98);
+    }
+
+    &[disabled] {
+        pointer-events: none;
+    }
+}
+
+
+/*
+ * KIND
+ */
+
+.primary {
+    color: var(--pte-colors-contentInversePrimary);
+    background-color: var(--pte-colors-backgroundInversePrimary);
+    border-color: var(--pte-colors-backgroundInversePrimary);
+
+    &:hover {
+        border-color: var(--pte-colors-backgroundInverseTertiary);
+    }
+
+    &[disabled] {
+        color: var(--pte-colors-contentDisabled);
+        background-color: var(--pte-colors-backgroundTertiary);
+        border-color: var(--pte-colors-backgroundTertiary);
+    }
+}
+
+.secondary {
+    color: var(--pte-colors-contentPrimary);
+    background-color: transparent;
+    border-color: var(--pte-colors-contentPrimary);
+
+    &[disabled] {
+        color: var(--pte-colors-contentDisabled);
+        border-color: var(--pte-colors-contentDisabled);
+    }
+}
+
+.tertiary {
+    color: var(--pte-colors-contentPrimary);
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.secondary, .tertiary {
+    &:hover {
+        background-color: var(--pte-colors-backgroundTertiary);
+    }
+
+    &[disabled] {
+        color: var(--pte-colors-contentDisabled);
+    }
+}
+
+
+/*
+ * SIZE
+ */
+
+.large {
+    height: 32px;
+    padding: 8px 15px;
+}
+
+.small {
+    height: 20px;
+    padding: 4px 15px;
+}
+
+
+/*
+ * SHAPE
+ */
+
+.pill {
+    border-radius: var(--pte-borders-radius-pill);
+}
+
+.circle {
+    border-radius: var(--pte-borders-radius-circle);
+}
+
+.rounded {
+    border-radius: var(--pte-borders-radius-rounded);
+
+    &.small {
+        border-radius: var(--pte-borders-radius-roundedSmall);
+    }
+}
+
+.square, .rectangle {
+    border-radius: var(--pte-borders-radius-rectangle);
+}
+
+.circle, .square {
+    &.large {
+        width: 32px;
+        padding: 8px;
+    }
+
+    &.small {
+        width: 20px;
+        padding: 4px;
+    }
+}

package/src/stories/button/Button.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+    title: 'Inputs/Button',
+    component: Button,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/**
+ * By default, the Button component renders a primary large pill.
+ *
+ * **Primary** buttons are intended to represent primary or leading actions, such as "Submit" or "Save".
+ */
+export const Primary: Story = {
+    args: {
+        children: 'Button',
+    },
+};
+
+/**
+ * **Secondary** buttons are intended to represent secondary or trailing actions, such as "Cancel" or "Delete".
+ */
+export const Secondary: Story = {
+    args: {
+        children: 'Button',
+        kind: 'secondary',
+    },
+};
+
+/**
+ * **Tertiary** buttons offer a visual alternative for non-primary actions.
+ */
+export const Tertiary: Story = {
+    args: {
+        children: 'Button',
+        kind: 'tertiary',
+    },
+};

package/src/stories/button/Button.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import type {
+    ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode,
+} from 'react';
+import styles from './Button.module.scss';
+import { Text } from '../text';
+
+export type ButtonProps = {
+    /**
+     * The appearance of the Button.
+     * @default primary
+     */
+    kind?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * The size of the Button.
+     * @default large
+     */
+    size?: 'large' | 'small';
+    /**
+     * The shape of the Button.
+     * @default pill
+     */
+    shape?: 'pill' | 'circle' | 'rectangle' | 'square' | 'rounded';
+    /**
+     * An icon or other element to render before the Button's text. A `size` argument is passed that should be used to determine the width & height of the content displayed.
+     *
+     * When Button shape is `circle` or `square`, this element will be the only visible content.
+     */
+    startEnhancer?: (size: number) => ReactNode;
+    /**
+     * An icon or other element to render after the Button's text. A `size` argument is passed that should be used to determine the width & height of the content displayed.
+     */
+    endEnhancer?: (size: number) => ReactNode;
+    /**
+     * Disables the Button, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The interaction handler for the Button.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The contents of the Button.
+     *
+     * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
+     */
+    children: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick'>;
+
+/**
+ * A `Button` is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+ *
+ * @constructor
+ */
+export const Button: FC<ButtonProps> = ({
+    kind,
+    size,
+    shape,
+    type,
+    startEnhancer,
+    endEnhancer,
+    onClick,
+    children,
+    ...props
+}) => (
+    <button
+        className={`${props.className} ${styles[kind || 'primary']} ${styles[shape || 'pill']} ${styles[size || 'large']} ${styles.button}`}
+        type={type || 'button'}
+        aria-details={children}
+        onClick={onClick}
+        {...props}
+    >
+        {!!startEnhancer && startEnhancer(size === 'large' ? 16 : 12)}
+        <Text kind="labelXSmall">
+            {children || 'Button'}
+        </Text>
+        {!!endEnhancer && endEnhancer(size === 'large' ? 16 : 12)}
+    </button>
+);

package/src/stories/button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/stories/text/Text.module.scss

@@ -0,0 +1,3 @@
+.text {
+    //color: var(--pte-colors-contentPrimary);
+}