paris 0.4.4 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # paris
 
+## 0.5.0
+
+### Minor Changes
+
+- 8de0fe5: Table component
+- 73fb594: Tabs component
+
+### Patch Changes
+
+- 1f40b98: Text: add `!important` to ensure `weight` prop overrides other styles
+
+## 0.4.5
+
+### Patch Changes
+
+- ecfd77e: Text: change fontWeights capitalizations
+
 ## 0.4.4
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Slingshot Media, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -20,6 +20,16 @@ yarn add paris
 npm i paris
 ```
 
+Make sure your `tsconfig` module resolution is set to `nodenext`, `node16`, or `bundler` to support `paris` imports:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
+```
+
 You'll need to tell your bundler to transpile files from Paris. This is easy in Next.js 13.1+ with the `transpilePackages` option in `next.config.js`:
 
 ```js

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,8 @@
     "./input": "./src/stories/input/index.ts",
     "./pagination": "./src/stories/pagination/index.ts",
     "./select": "./src/stories/select/index.ts",
+    "./table": "./src/stories/table/index.ts",
+    "./tabs": "./src/stories/tabs/index.ts",
     "./text": "./src/stories/text/index.ts",
     "./textarea": "./src/stories/textarea/index.ts",
     "./theme": "./src/stories/theme/index.ts",
@@ -71,17 +73,17 @@
     "@changesets/cli": "^2.26.1",
     "@ssh/csstypes": "^1.1.0",
     "@ssh/eslint-config": "^1.0.0",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/addon-mdx-gfm": "^7.0.18",
-    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/manager-api": "^7.0.18",
-    "@storybook/nextjs": "^7.0.18",
-    "@storybook/react": "^7.0.18",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.18",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-mdx-gfm": "^7.5.1",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/manager-api": "^7.5.1",
+    "@storybook/nextjs": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.1",
     "@types/node": "18.15.11",
     "@types/react": "18.0.31",
     "@types/react-dom": "18.0.11",
@@ -93,7 +95,7 @@
     "eslint": "^8.2.0",
     "eslint-config-next": "13.4.2",
     "eslint-plugin-css": "^0.8.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.0",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -102,8 +104,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.62.1",
-    "storybook": "^7.0.18",
-    "storybook-dark-mode": "^3.0.0",
+    "storybook": "^7.5.1",
+    "storybook-dark-mode": "^3.0.1",
     "title-case": "^3.0.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",

package/src/stories/table/Table.module.scss

@@ -0,0 +1,41 @@
+.table {
+    width: 100%;
+
+    &, & * {
+        cursor: default;
+    }
+
+    thead {
+        text-align: left;
+        user-select: none;
+    }
+
+    th {
+        color: var(--pte-colors-contentSecondary);
+        padding: 10px 12px;
+    }
+
+    td {
+        padding: 8px 12px;
+    }
+
+    tr {
+        border-top: 1px solid var(--pte-colors-borderOpaque);
+    }
+
+    tr:last-child {
+        border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    }
+
+    tbody tr.clickable {
+        transition: background-color var(--pte-animations-interaction);
+
+        &:hover {
+            background-color: var(--pte-colors-backgroundSecondary);
+        }
+
+        &, & * {
+            cursor: pointer;
+        }
+    }
+}

package/src/stories/table/Table.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { TableProps } from './Table';
+import { Table } from './Table';
+
+const meta: Meta<typeof Table> = {
+    title: 'Content/Table',
+    component: Table,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+    args: {
+        headers: [
+            'Name',
+            'Type',
+            'Email',
+        ],
+        rows: [
+            {
+                id: 1,
+                name: 'Billie Eilish',
+                type: 'Artist',
+                email: 'billie@slingshot.fm',
+            },
+            {
+                id: 2,
+                name: 'Taylor Swift',
+                type: 'Artist',
+                email: 'taylor@slingshot.fm',
+            },
+            {
+                id: 3,
+                name: 'Valkyrae',
+                type: 'Creator',
+                email: 'valkyrae@slingshot.fm',
+            },
+        ],
+        rowRenderFn: (row) => ({
+            key: `${row.id}`,
+            cells: [row.name, row.type, row.email],
+        }),
+        onRowClick: (row) => console.log('Row clicked', row),
+    } satisfies TableProps,
+};

package/src/stories/table/Table.tsx

@@ -0,0 +1,148 @@
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { useId, useMemo } from 'react';
+import clsx from 'clsx';
+import styles from './Table.module.scss';
+import typography from '../text/Typography.module.css';
+
+export type TableLineData = [NonNullable<ReactNode>, ...ReactNode[]];
+export type RowRenderData = {
+    key: string,
+    cells: TableLineData,
+};
+
+export type TableProps<
+    RowData extends Record<string, any> = Record<string, any>,
+    HeaderNodeArray extends TableLineData = TableLineData,
+> = {
+    /**
+     * The table headers. Must include at least one header.
+     */
+    headers: HeaderNodeArray;
+    /**
+     * The table rows, as an array of objects.
+     */
+    rows: RowData[];
+    /**
+     * A function that will be called for each row to compute the row's content. If omitted, the row will render the `Object.values` of the row data.
+     *
+     * The function should return an object containing a property named `key` for the row's React key (should be a unique id), and a property named `nodes` containing an array of React nodes to be rendered as cells in the row.
+     * @param row - The data for the row being rendered.
+     * @returns An object containing a property named `key` for the row's React key (should be a unique id), and a property named `nodes` containing an array of React nodes to be rendered as cells in the row.
+     * @see RowRenderData
+     */
+    rowRenderFn?: (row: RowData) => RowRenderData;
+    /**
+     * A function that will be called when a row is clicked.
+     * @param row - The data for the row being clicked.
+     */
+    onRowClick?: (row: RowData) => void | Promise<void>;
+    /**
+     * Whether the rows should be clickable.
+     */
+    clickableRows?: boolean;
+    /**
+     * Prop overrides for rendered elements.
+     */
+    overrides?: {
+        table?: ComponentPropsWithoutRef<'table'>;
+        thead?: ComponentPropsWithoutRef<'thead'>;
+        tbody?: ComponentPropsWithoutRef<'tbody'>;
+        trHead?: ComponentPropsWithoutRef<'tr'>;
+        th?: ComponentPropsWithoutRef<'th'>;
+        trBody?: ComponentPropsWithoutRef<'tr'>;
+        td?: ComponentPropsWithoutRef<'td'>;
+    }
+};
+
+/**
+ * A Table component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Table } from 'paris/table';
+ * ```
+ * @constructor
+ */
+export const Table: FC<TableProps> = ({
+    headers,
+    rows,
+    rowRenderFn,
+    onRowClick,
+    clickableRows = true,
+    overrides,
+}) => {
+    const id = useId();
+    const rowsRenderData = useMemo(() => (
+        rows.map(
+            rowRenderFn
+            ?? ((row) => ({
+                key: Object.values(row).join('-'),
+                cells: Object.values(row),
+            })),
+        )
+    ), [rows, rowRenderFn]);
+
+    const renderedRows = useMemo(() => (
+        rowsRenderData.map(({ key, cells }, index) => (
+            <tr
+                key={`${id}-row-${key}`}
+                onClick={() => {
+                    if (clickableRows) onRowClick?.(rows[index]);
+                }}
+                {...overrides?.trBody}
+                className={clsx(
+                    clickableRows && styles.clickable,
+                    overrides?.trBody?.className,
+                )}
+            >
+                {cells.map((cell) => (
+                    <td
+                        key={`${id}-cell-${cell.toString()}`}
+                        {...overrides?.td}
+                        className={clsx(
+                            typography.paragraphXSmall,
+                        )}
+                    >
+                        {cell}
+                    </td>
+                ))}
+            </tr>
+        ))
+    ), [clickableRows, id, onRowClick, overrides?.td, overrides?.trBody, rows, rowsRenderData]);
+
+    return (
+        <table
+            {...{
+                ...overrides?.table,
+                className: clsx(
+                    styles.table,
+                    overrides?.table?.className,
+                ),
+            }}
+        >
+            <thead {...overrides?.thead}>
+                <tr {...overrides?.trHead}>
+                    {headers.map((header) => (
+                        <th
+                            {...{
+                                ...overrides?.th,
+                                className: clsx(
+                                    typography.labelXSmall,
+                                ),
+                            }}
+                            key={`${id}-header-${header}`}
+                        >
+                            {header}
+                        </th>
+                    ))}
+                </tr>
+            </thead>
+            <tbody {...overrides?.tbody}>
+                {renderedRows}
+            </tbody>
+        </table>
+    );
+};

package/src/stories/table/index.ts

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

package/src/stories/tabs/Tabs.module.scss

@@ -0,0 +1,61 @@
+.tabList {
+    //border-bottom: 4px solid var(--pte-colors-borderOpaque);
+    padding-bottom: 4px;
+    overflow-x: scroll;
+    //overflow-y: visible;
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.tabListBorder {
+    border-bottom: 4px solid var(--pte-colors-borderOpaque);
+    width: 100%;
+    margin-top: -4px;
+}
+
+.activeTabBorder {
+    position: absolute;
+    bottom: 0;
+    width: var(--tab-width);
+    height: 4px;
+    background-color: var(--pte-colors-contentPrimary);
+
+    transition: transform var(--pte-animations-duration-slow) var(--pte-animations-timing-easeInOutExpo);
+
+    //noinspection CssInvalidFunction
+    transform: translateX(calc(var(--tab-width) * var(--tab-index)));
+}
+
+.tab {
+    font-weight: 500;
+    padding: 9px 30px;
+    width: var(--tab-width);
+    flex-shrink: 0;
+    overflow: visible;
+    cursor: default;
+
+    transition: background-color var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
+
+    &[aria-selected="true"] {
+        background-color: var(--pte-colors-backgroundSecondary);
+    }
+
+    &:hover {
+        background-color: var(--pte-colors-backgroundSecondary);
+    }
+
+    &:active {
+        background-color: var(--pte-colors-backgroundTertiary);
+    }
+}
+
+.panel {
+    padding-top: 16px;
+}

package/src/stories/tabs/Tabs.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+    title: 'Surfaces/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+    args: {
+        tabs: [
+            { title: 'Tab 1', content: 'Tab 1 content' },
+            { title: 'Tab 2', content: 'Tab 2 content' },
+            { title: 'Tab 3', content: 'Tab 3 content' },
+        ],
+    },
+};

package/src/stories/tabs/Tabs.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import type { CSSProperties, FC, ReactNode } from 'react';
+import { Tab } from '@headlessui/react';
+import { useId, useState } from 'react';
+import clsx from 'clsx';
+import type { CSSLength } from '@ssh/csstypes';
+import styles from './Tabs.module.scss';
+import typography from '../text/Typography.module.css';
+
+export type TabsProps = {
+    tabs: {
+        title: string;
+        content: ReactNode;
+    }[];
+    tabWidth?: CSSLength;
+};
+
+/**
+ * A Tabs component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Tabs } from 'paris/tabs';
+ * ```
+ * @constructor
+ */
+export const Tabs: FC<TabsProps> = ({
+    tabs,
+    tabWidth = '150px',
+}) => {
+    const id = useId();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    return (
+        <Tab.Group
+            selectedIndex={selectedIndex}
+            onChange={setSelectedIndex}
+        >
+            <Tab.List
+                style={{
+                    '--tab-width': tabWidth,
+                    '--tab-index': `${selectedIndex}`,
+                } as CSSProperties}
+                className={clsx(
+                    styles.tabList,
+                )}
+            >
+                {tabs.map(({ title }) => (
+                    <Tab
+                        key={`${id}-tab-${title}`}
+                        className={clsx(
+                            typography.paragraphXSmall,
+                            styles.tab,
+                        )}
+                    >
+                        {title}
+                    </Tab>
+                ))}
+
+                <div key={`${id}-tab-active-border`} className={styles.activeTabBorder} />
+            </Tab.List>
+            <div className={styles.tabListBorder} />
+
+            <Tab.Panels>
+                {tabs.map(({ title, content }) => (
+                    <Tab.Panel
+                        key={`${id}-tab-${title}-content`}
+                        className={styles.panel}
+                    >
+                        {content}
+                    </Tab.Panel>
+                ))}
+            </Tab.Panels>
+        </Tab.Group>
+    );
+};

package/src/stories/tabs/index.ts

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

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

@@ -5,22 +5,22 @@
 /* Font weight theme values */
 $text-weights: (
     "thin": var(--pte-typography-fontWeights-thin),
-    "extraLight": var(--pte-typography-fontWeights-extraLight),
+    "extralight": var(--pte-typography-fontWeights-extralight),
     "light": var(--pte-typography-fontWeights-light),
     "normal": var(--pte-typography-fontWeights-normal),
     "medium": var(--pte-typography-fontWeights-medium),
-    "semiBold": var(--pte-typography-fontWeights-semiBold),
+    "semibold": var(--pte-typography-fontWeights-semibold),
     "bold": var(--pte-typography-fontWeights-bold),
-    "extraBold": var(--pte-typography-fontWeights-extraBold),
+    "extrabold": var(--pte-typography-fontWeights-extrabold),
     "black": var(--pte-typography-fontWeights-black),
-    "extraBlack": var(--pte-typography-fontWeights-extraBlack),
+    "extrablack": var(--pte-typography-fontWeights-extrablack),
 );
 
 
 @each $weight-name,
 $weight-value in $text-weights {
     .weight-#{$weight-name} {
-        font-weight: $weight-value;
+        font-weight: $weight-value !important;
     }
 }
 
@@ -35,4 +35,4 @@ $style-value in $font-styles {
     .fontStyle-#{$style-name} {
         font-style: $style-value;
     }
-}
+}

package/src/stories/text/Typography.module.css

@@ -19,6 +19,15 @@
   text-transform: var(--pte-typography-styles-displayMedium-textTransform);
 }
 
+.display {
+  font-size: var(--pte-typography-styles-display-fontSize);
+  font-style: var(--pte-typography-styles-display-fontStyle);
+  font-weight: var(--pte-typography-styles-display-fontWeight);
+  line-height: var(--pte-typography-styles-display-lineHeight);
+  letter-spacing: var(--pte-typography-styles-display-letterSpacing);
+  text-transform: var(--pte-typography-styles-display-textTransform);
+}
+
 .displaySmall {
   font-size: var(--pte-typography-styles-displaySmall-fontSize);
   font-style: var(--pte-typography-styles-displaySmall-fontStyle);

package/src/stories/theme/themes.ts

@@ -40,6 +40,7 @@ const TimingFunctions: Omit<Theme['animations']['timing'], 'default'> = {
     easeIn: 'cubic-bezier(0.42, 0.0, 1.0, 1.0)',
     easeOutQuad: 'cubic-bezier(0.5, 1, 0.89, 1)',
     easeInQuad: 'cubic-bezier(0.11, 0, 0.5, 0)',
+    easeInOutExpo: 'cubic-bezier(0.87, 0, 0.13, 1)',
 };
 
 export type Theme = {
@@ -124,15 +125,15 @@ export type Theme = {
 
         fontWeights: {
             thin: number,
-            extraLight: number,
+            extralight: number,
             light: number,
             normal: number,
             medium: number,
-            semiBold: number,
+            semibold: number,
             bold: number,
-            extraBold: number,
+            extrabold: number,
             black: number,
-            extraBlack: number,
+            extrablack: number,
         },
 
         fontStyles: {
@@ -145,6 +146,7 @@ export type Theme = {
 
             displayLarge: FontDefinition,
             displayMedium: FontDefinition,
+            display: FontDefinition,
             displaySmall: FontDefinition,
 
             // Heading
@@ -218,6 +220,7 @@ export type Theme = {
             easeIn: TimingFunction,
             easeOutQuad: TimingFunction,
             easeInQuad: TimingFunction,
+            easeInOutExpo: TimingFunction,
             default: TimingFunction,
         },
         duration: {
@@ -343,15 +346,15 @@ export const LightTheme: Theme = {
 
         fontWeights: {
             thin: 100,
-            extraLight: 200,
+            extralight: 200,
             light: 300,
             normal: 400,
             medium: 500,
-            semiBold: 600,
+            semibold: 600,
             bold: 700,
-            extraBold: 800,
+            extrabold: 800,
             black: 900,
-            extraBlack: 950,
+            extrablack: 950,
         },
 
         fontStyles: {
@@ -372,6 +375,11 @@ export const LightTheme: Theme = {
                 fontSize: '52px',
                 lineHeight: '62px',
             },
+            display: {
+                ...DisplayFontClass,
+                fontSize: '42px',
+                lineHeight: '50.4px',
+            },
             displaySmall: {
                 ...DisplayFontClass,
                 fontSize: '34px',