@frontify/fondue-components 0.1.0-beta.0

package/.eslintignore

@@ -0,0 +1,4 @@
+storybook-static
+playwright-report
+dist
+test-results

package/.eslintrc.cjs

@@ -0,0 +1,33 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    root: true,
+    extends: ['@frontify/eslint-config-react', 'plugin:storybook/recommended'],
+    plugins: ['notice'],
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+    parserOptions: {
+        project: ['tsconfig.json', 'tsconfig.node.json'],
+        tsconfigRootDir: __dirname,
+        sourceType: 'module',
+    },
+    overrides: [
+        {
+            files: ['*.js', '*.ts', '*.tsx'],
+            rules: {
+                'notice/notice': [
+                    'error',
+                    {
+                        template: '/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n',
+                        messages: {
+                            whenFailedToMatch: 'No Frontify copyright header set.',
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};

package/.prettierignore

@@ -0,0 +1 @@
+CHANGELOG.md

package/.prettierrc

@@ -0,0 +1,17 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "overrides": [
+        {
+            "files": ["tsconfig.json", "tsconfig.*.json"],
+            "options": {
+                "parser": "json",
+                "trailingComma": "none"
+            }
+        }
+    ]
+}

package/.storybook/DocumentationTemplate.mdx

@@ -0,0 +1,25 @@
+import { ArgTypes, Canvas, Controls, Description, Markdown, Meta, Source, Stories, Title } from '@storybook/blocks';
+
+<div className="tw-mx-5 sb-unstyled">
+
+    <Meta isTemplate />
+
+    <Title />
+
+    <Description />
+
+    ## Preview
+
+    <Canvas sourceState="shown" />
+
+    ## Controls
+
+    <Controls />
+
+    ## API
+
+    <ArgTypes />
+
+    <Stories />
+
+</div>

package/.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@etchteam/storybook-addon-status',
+        '@storybook/addon-a11y',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-links',
+        'storybook-dark-mode',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+        defaultName: 'Documentation',
+    },
+    viteFinal(config) {
+        // @ts-expect-error untyped name property
+        config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts');
+
+        return config;
+    },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,53 @@
+import '../src/styles.css';
+import type { Preview } from '@storybook/react';
+import DocumentationTemplate from './DocumentationTemplate.mdx';
+
+const preview: Preview = {
+    parameters: {
+        docs: {
+            page: DocumentationTemplate,
+            toc: {
+                title: 'Table of contents',
+                headingSelector: 'h2, h3',
+            },
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        status: {
+            type: 'legacy',
+            statuses: {
+                released: {
+                    background: 'rgb(50, 210, 182)',
+                    color: '#ffffff',
+                    description: 'This component is stable and released',
+                },
+                in_progress: {
+                    background: 'rgb(154, 126, 254)',
+                    color: '#ffffff',
+                    description: 'This component is in progress',
+                },
+                planned: {
+                    background: 'rgb(254, 194, 50)',
+                    color: '#ffffff',
+                    description: 'This component is planned to be revamped',
+                },
+                legacy: {
+                    background: 'rgb(129, 132, 132)',
+                    color: '#ffffff',
+                    description: 'This is a legacy component',
+                },
+                deprecated: {
+                    background: 'rgb(153, 33, 54)',
+                    color: '#ffffff',
+                    description: 'This is a legacy component',
+                },
+            },
+        },
+    },
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @frontify/fondue-components
+
+## 0.1.0-beta.0
+
+### Minor Changes
+
+-   [#1731](https://github.com/Frontify/fondue/pull/1731) [`ef0519d`](https://github.com/Frontify/fondue/commit/ef0519d8021204b280b65812c98686b4ce3b909e) Thanks [@noahwaldner](https://github.com/noahwaldner)! - added export for the new components in fondue

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@frontify/fondue-components",
+  "type": "module",
+  "version": "0.1.0-beta.0",
+  "homepage": "https://github.com/Frontify/fondue",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Frontify/fondue",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/frontify/fondue/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fondue-components.js"
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "@frontify/fondue-icons": "^0.1.44"
+  },
+  "dependencies": {
+    "@radix-ui/react-progress": "^1.0.3"
+  },
+  "devDependencies": {
+    "@etchteam/storybook-addon-status": "^4.2.4",
+    "@frontify/eslint-config-react": "^0.17.6",
+    "@frontify/fondue-tokens": "^3.4.0",
+    "@playwright/experimental-ct-react": "1.41.2",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@tailwindcss/forms": "^0.5.7",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.1",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.77",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/ui": "^1.4.0",
+    "chalk": "^5.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-notice": "^0.9.10",
+    "happy-dom": "^14.7.1",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.0.8",
+    "storybook-dark-mode": "^4.0.1",
+    "tailwind-merge": "^2.2.2",
+    "tailwind-variants": "^0.2.1",
+    "tailwindcss": "^3.4.3",
+    "tsx": "^4.7.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-dts": "^3.8.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.4.0",
+    "@frontify/fondue-icons": "^0.1.44"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:storybook": "storybook build",
+    "install:playwright": "playwright install --with-deps",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "storybook": "storybook dev -p 6006",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest",
+    "test:components": "playwright test --ui",
+    "test:components:ci": "playwright test",
+    "create:component": "tsx scripts/createNewComponent.ts"
+  }
+}

package/playwright/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Testing Page</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./index.ts"></script>
+    </body>
+</html>

package/playwright/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import '../src/styles.css';

package/playwright.config.ts

@@ -0,0 +1,29 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import tsConfigPaths from 'vite-tsconfig-paths';
+
+// https://playwright.dev/docs/test-configuration
+export default defineConfig({
+    testDir: './src',
+    snapshotDir: './__snapshots__',
+    timeout: 10_000,
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: 'html',
+    testMatch: '**/*.ct.{ts,tsx}',
+    use: {
+        trace: 'on-first-retry',
+        ctPort: 3100,
+        ctViteConfig: {
+            plugins: [tsConfigPaths()],
+        },
+    },
+    projects: [
+        { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+        { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+        { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    ],
+});

package/postcss.config.cjs

@@ -0,0 +1,8 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/scripts/createNewComponent.ts

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+
+import chalk from 'chalk';
+
+import templates from './templates';
+
+(() => {
+    const componentName = process.argv[3] || process.argv[2];
+
+    if (!componentName) {
+        console.error(chalk.red('You need to supply a component name.'));
+        process.exit(1);
+    }
+
+    console.log(`Creating ${componentName} component...`);
+
+    const componentDirectory = `./src/components/${componentName}`;
+
+    if (existsSync(componentDirectory)) {
+        console.error(chalk.red(`Component ${componentName} already exists.`));
+        process.exit(1);
+    }
+
+    const generatedTemplates = templates.map((template) => template(componentName));
+
+    mkdirSync(componentDirectory);
+
+    for (const template of generatedTemplates) {
+        let directory = componentDirectory;
+        if (template.subdirectory) {
+            directory = `${componentDirectory}/${template.subdirectory}`;
+            if (!existsSync(directory)) {
+                mkdirSync(`${componentDirectory}/${template.subdirectory}`);
+            }
+        }
+        writeFileSync(`${directory}/${componentName}${template.extension}`, template.content);
+    }
+
+    console.log(chalk.green(`Component created in ${componentDirectory}`));
+})();

package/scripts/templates/__tests__/component.ct.tsx

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { toKebabCase } from '../../transforms';
+import { type ComponentFileBuilderResponse } from '../../types';
+
+export const Setup = (componentName: string): ComponentFileBuilderResponse => ({
+    content: `/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { expect, test } from '@playwright/experimental-ct-react';
+
+import { ${componentName} } from "../${componentName}";
+
+const ${componentName}_TEST_ID = "test-${toKebabCase(componentName)}";
+const ${componentName}_TEXT = "sample ${toKebabCase(componentName)}";
+
+test('should render without error', async ({ mount }) => {
+    const component = await mount(<${componentName} data-test-id={${componentName}_TEST_ID}>{${componentName}_TEXT}</${componentName}>);
+    await expect(component).toBeVisible()
+    await expect(component).toContainText(${componentName}_TEXT)
+});
+
+`,
+    extension: '.ct.tsx',
+    subdirectory: '__tests__',
+});

package/scripts/templates/__tests__/component.spec.tsx

@@ -0,0 +1,24 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { toKebabCase } from '../../transforms';
+import { type ComponentFileBuilderResponse } from '../../types';
+
+export const Setup = (componentName: string): ComponentFileBuilderResponse => ({
+    content: `/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ${componentName} } from "../${componentName}";
+
+const ${componentName}_TEST_ID = "test-${toKebabCase(componentName)}";
+const ${componentName}_TEXT = "sample ${toKebabCase(componentName)}";
+
+describe("${componentName} Component", () => {
+    it("should render foo text correctly", () => {
+        const { getByTestId } = render(<${componentName} data-test-id={${componentName}_TEST_ID}>{${componentName}_TEXT}</${componentName}>);
+        const component = getByTestId(${componentName}_TEST_ID);
+        expect(component).toContain(${componentName}_TEXT);
+    });
+});
+`,
+    extension: '.spec.tsx',
+    subdirectory: '__tests__',
+});

package/scripts/templates/component.stories.ts

@@ -0,0 +1,35 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ComponentFileBuilderResponse } from '../types';
+
+// We aren't really in a story
+// eslint-disable-next-line storybook/default-exports
+export const Setup = (componentName: string): ComponentFileBuilderResponse => ({
+    content: `/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type Meta, type StoryObj } from "@storybook/react";
+
+import { ${componentName} } from "./${componentName}";
+
+type Story = StoryObj<typeof ${componentName}>;
+const meta: Meta<typeof ${componentName}> = {
+    component: ${componentName},
+    tags: ['autodocs'],
+    parameters: {
+        status: {
+            type: 'in_progress',
+        },
+    },
+    args: {},
+};
+export default meta;
+
+export const Default: Story = {
+    name: 'Text Label Only',
+    args: {
+        children: 'Hello World',
+    },
+};
+`,
+    extension: '.stories.ts',
+});

package/scripts/templates/component.ts

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { toKebabCase } from '../transforms';
+import { type ComponentFileBuilderResponse } from '../types';
+
+export const Setup = (componentName: string): ComponentFileBuilderResponse => ({
+    content: `/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ReactNode } from "react";
+
+import { ${componentName}Styles } from './styles/${componentName}Styles';
+
+export type ${componentName}Props = { children?: ReactNode; };
+
+export const ${componentName} = ({ children }: ${componentName}Props) => {
+    return (
+        <div className={${componentName}Styles()} data-test-id="${toKebabCase(componentName)}">
+            {children}
+        </div>
+    );
+};
+${componentName}.displayName = "${componentName}";
+`,
+    extension: '.tsx',
+});

package/scripts/templates/index.ts

@@ -0,0 +1,15 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import * as componentVisualTests from './__tests__/component.ct';
+import * as componentFunctionalTests from './__tests__/component.spec';
+import * as component from './component';
+import * as componentStories from './component.stories';
+import * as componentStyles from './styles/componentStyles';
+
+export default [
+    component.Setup,
+    componentStories.Setup,
+    componentFunctionalTests.Setup,
+    componentVisualTests.Setup,
+    componentStyles.Setup,
+];

package/scripts/templates/styles/componentStyles.tsx

@@ -0,0 +1,16 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ComponentFileBuilderResponse } from '../../types';
+
+export const Setup = (componentName: string): ComponentFileBuilderResponse => ({
+    content: `/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { sv } from '#/utilities/styleUtilities';
+
+export const ${componentName}Styles = sv({
+    base: "tw-block",
+})
+`,
+    extension: 'Styles.tsx',
+    subdirectory: 'styles',
+});

package/scripts/transforms.ts

@@ -0,0 +1,13 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+/**
+ * Converts any give input to kebab-case
+ *
+ * @param name String in any case (PascalCase, camelCase, ...)
+ * @returns String in kebab-case
+ */
+export const toKebabCase = (name: string): string =>
+    name
+        .replaceAll(/([a-z])([A-Z])/g, '$1-$2')
+        .replaceAll(/[\s_]+/g, '-')
+        .toLowerCase();

package/scripts/types.ts

@@ -0,0 +1,7 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export type ComponentFileBuilderResponse = {
+    content: string;
+    extension: string;
+    subdirectory?: string;
+};

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,57 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconColorFan, IconIcon } from '@frontify/fondue-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+type Story = StoryObj<typeof Button>;
+const meta: Meta<typeof Button> = {
+    component: Button,
+    tags: ['autodocs'],
+    parameters: {
+        status: {
+            type: 'released',
+        },
+    },
+    args: {
+        type: 'button',
+        style: 'default',
+        emphasis: 'default',
+        size: 'medium',
+        rounding: 'medium',
+        hideLabel: false,
+        disabled: false,
+        hugWidth: true,
+        children: 'Button Text',
+    },
+};
+export default meta;
+
+export const Default: Story = {
+    name: 'Text Label Only',
+};
+
+export const WithIcon: Story = {
+    name: 'Icon Only',
+    args: {
+        hideLabel: true,
+        icon: <IconIcon />,
+    },
+};
+
+export const WithRoundedIcon: Story = {
+    name: 'Icon Only Rounded',
+    args: {
+        rounding: 'full',
+        icon: <IconIcon />,
+        hideLabel: true,
+    },
+};
+
+export const WithIconAndLabel: Story = {
+    name: 'Icon and Text Label',
+    args: {
+        icon: <IconColorFan />,
+    },
+};