@frontify/fondue-components 1.0.0 → 1.0.1

package/dist/style.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Menlo,Courier,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.tw-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.tw-pointer-events-none{pointer-events:none}.tw-relative{position:relative}.tw-m-0{margin:0}.tw-mx-5{margin-left:1.25rem;margin-right:1.25rem}.tw--ml-0{margin-left:-0px}.tw--ml-0\.5{margin-left:-.125rem}.tw--ml-1{margin-left:-.25rem}.tw-mb-0{margin-bottom:0}.tw-mr-1{margin-right:.25rem}.tw-mr-1\.5{margin-right:.375rem}.tw-mr-2{margin-right:.5rem}.tw-mt-0{margin-top:0}.tw-flex{display:flex}.tw-aspect-square{aspect-ratio:1 / 1}.tw-h-1{height:.25rem}.tw-h-12{height:3rem}.tw-h-2{height:.5rem}.tw-h-3{height:.75rem}.tw-h-4{height:1rem}.tw-h-6{height:1.5rem}.tw-h-9{height:2.25rem}.tw-h-full{height:100%}.tw-w-full{width:100%}.tw-w-px{width:1px}.tw-origin-left-right{transform-origin:0% 50%}.tw--translate-x-\[calc\(100\%-var\(--loading-bar-value\)\)\]{--tw-translate-x: calc(calc(100% - var(--loading-bar-value)) * -1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-loading-bar-infinite{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}.tw-animate-loading-bar-infinite{animation:tw-loading-bar-infinite 1s infinite linear}.tw-cursor-pointer{cursor:pointer}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-end{align-items:flex-end}.tw-items-center{align-items:center}.tw-justify-center{justify-content:center}.tw-self-stretch{align-self:stretch}.tw-overflow-hidden{overflow:hidden}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-border{border-width:var(--line-width)}.tw-border-2{border-width:2px}.tw-border-r{border-right-width:var(--line-width)}.tw-border-t{border-top-width:var(--line-width)}.tw-border-solid{border-style:solid}.tw-border-dashed{border-style:dashed}.tw-border-dotted{border-style:dotted}.tw-border-none{border-style:none}.tw-border-black{--tw-border-opacity: 1;border-color:rgb(45 50 50 / var(--tw-border-opacity))}.tw-border-box-selected-strong{border-color:var(--box-selected-strong-color)}.tw-border-button-border{border-color:var(--button-border-color)}.tw-border-button-danger-border{border-color:var(--button-danger-border-color)}.tw-border-button-negative-border{border-color:var(--button-negative-border-color)}.tw-border-button-positive-border{border-color:var(--button-positive-border-color)}.tw-border-button-strong-border{border-color:var(--button-strong-border-color)}.tw-border-button-strong-negative-border{border-color:var(--button-strong-negative-border-color)}.tw-border-button-strong-positive-border{border-color:var(--button-strong-positive-border-color)}.tw-border-transparent{border-color:transparent}.tw-bg-box-disabled{background-color:var(--box-disabled-color)}.tw-bg-box-negative{background-color:var(--box-negative-color)}.tw-bg-box-positive{background-color:var(--box-positive-color)}.tw-bg-box-selected{background-color:var(--box-selected-color)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.tw-bg-button-background{background-color:var(--button-background-color)}.tw-bg-button-danger-background{background-color:var(--button-danger-background-color)}.tw-bg-button-negative-background{background-color:var(--button-negative-background-color)}.tw-bg-button-positive-background{background-color:var(--button-positive-background-color)}.tw-bg-button-strong-background{background-color:var(--button-strong-background-color)}.tw-bg-button-strong-negative-background{background-color:var(--button-strong-negative-background-color)}.tw-bg-button-strong-positive-background{background-color:var(--button-strong-positive-background-color)}.tw-bg-text-interactive{background-color:var(--text-color-interactive)}.tw-bg-text-negative{background-color:var(--text-color-negative)}.tw-bg-text-positive{background-color:var(--text-color-positive)}.tw-p-2{padding:.5rem}.tw-p-8{padding:2rem}.tw-px-0{padding-left:0;padding-right:0}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-6{padding-left:1.5rem;padding-right:1.5rem}.tw-font-body{font-family:var(--body-family)}.tw-text-body-large{font-size:var(--body-size-large);line-height:var(--body-size-large-line-height)}.tw-text-body-medium{font-size:var(--body-size-medium);line-height:var(--body-size-medium-line-height)}.tw-text-body-small{font-size:var(--body-size-small);line-height:var(--body-size-small-line-height)}.tw-font-medium{font-weight:500}.tw-leading-none{line-height:1}.tw-text-box-disabled-inverse{color:var(--box-disabled-color-inverse)}.tw-text-box-selected-inverse{color:var(--box-selected-inverse-color)}.tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-text-button-danger-icon{color:var(--button-danger-icon-color)}.tw-text-button-danger-text{color:var(--button-danger-text-color)}.tw-text-button-icon{color:var(--button-icon-color)}.tw-text-button-negative-icon{color:var(--button-negative-icon-color)}.tw-text-button-negative-text{color:var(--button-negative-text-color)}.tw-text-button-positive-icon{color:var(--button-positive-icon-color)}.tw-text-button-positive-text{color:var(--button-positive-text-color)}.tw-text-button-strong-icon{color:var(--button-strong-icon-color)}.tw-text-button-strong-negative-icon{color:var(--button-strong-negative-icon-color)}.tw-text-button-strong-negative-text{color:var(--button-strong-negative-text-color)}.tw-text-button-strong-positive-icon{color:var(--button-strong-positive-icon-color)}.tw-text-button-strong-positive-text{color:var(--button-strong-positive-text-color)}.tw-text-button-text{color:var(--button-text-color)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-ring-4{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.tw-ring-inset{--tw-ring-inset: inset}.tw-ring-blue{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity))}.tw-ring-offset-2{--tw-ring-offset-width: 2px}.tw-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.focus-within\:tw-outline-none:focus-within{outline:2px solid transparent;outline-offset:2px}.focus-within\:tw-ring-4:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-within\:tw-ring-blue:focus-within{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity))}.focus-within\:tw-ring-offset-2:focus-within{--tw-ring-offset-width: 2px}.hover\:tw-border-button-border:hover{border-color:var(--button-border-color)}.hover\:tw-border-button-negative-border:hover{border-color:var(--button-negative-border-color)}.hover\:tw-border-button-positive-border:hover{border-color:var(--button-positive-border-color)}.hover\:tw-bg-box-selected-hover:hover{background-color:var(--box-selected-color-hover)}.hover\:tw-bg-box-selected-strong-hover:hover{background-color:var(--box-selected-strong-color-hover)}.hover\:tw-bg-button-background-hover:hover{background-color:var(--button-background-color-hover)}.hover\:tw-bg-button-danger-background-hover:hover{background-color:var(--button-danger-background-color-hover)}.hover\:tw-bg-button-negative-background-hover:hover{background-color:var(--button-negative-background-color-hover)}.hover\:tw-bg-button-positive-background-hover:hover{background-color:var(--button-positive-background-color-hover)}.hover\:tw-bg-button-strong-background-hover:hover{background-color:var(--button-strong-background-color-hover)}.hover\:tw-bg-button-strong-negative-background-hover:hover{background-color:var(--button-strong-negative-background-color-hover)}.hover\:tw-bg-button-strong-positive-background-hover:hover{background-color:var(--button-strong-positive-background-color-hover)}.focus-visible\:tw-outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:tw-ring-4:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:tw-ring-blue:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity))}.focus-visible\:tw-ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.active\:tw-bg-box-selected-pressed:active{background-color:var(--box-selected-color-pressed)}.active\:tw-bg-box-selected-strong-pressed:active{background-color:var(--box-selected-strong-color-pressed)}.active\:tw-bg-button-background-pressed:active{background-color:var(--button-background-color-pressed)}.active\:tw-bg-button-danger-background-pressed:active{background-color:var(--button-danger-background-color-pressed)}.active\:tw-bg-button-negative-background-pressed:active{background-color:var(--button-negative-background-color-pressed)}.active\:tw-bg-button-positive-background-pressed:active{background-color:var(--button-positive-background-color-pressed)}.active\:tw-bg-button-strong-background-pressed:active{background-color:var(--button-strong-background-color-pressed)}.active\:tw-bg-button-strong-negative-background-pressed:active{background-color:var(--button-strong-negative-background-color-pressed)}.active\:tw-bg-button-strong-positive-background-pressed:active{background-color:var(--button-strong-positive-background-color-pressed)}.tw-group:hover .group-hover\:tw-text-box-selected-inverse-hover{color:var(--box-selected-inverse-color-hover)}.tw-group:hover .group-hover\:tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-group:active .group-active\:tw-text-box-selected-inverse-pressed{color:var(--box-selected-inverse-color-pressed)}.tw-group:active .group-active\:tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.dark\:tw-ring-offset-black:is(.tw-dark *){--tw-ring-offset-color: #2d3232}.focus-within\:dark\:tw-ring-offset-black:is(.tw-dark *):focus-within{--tw-ring-offset-color: #2d3232}.focus-visible\:dark\:tw-ring-offset-black:is(.tw-dark *):focus-visible{--tw-ring-offset-color: #2d3232}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",
@@ -21,6 +21,9 @@
     },
     "./styles": "./dist/style.css"
   },
+  "files": [
+    "dist"
+  ],
   "engines": {
     "node": ">=18"
   },

package/.eslintignore

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

package/.eslintrc.cjs

@@ -1,33 +0,0 @@
-/* (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

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

package/.prettierrc

@@ -1,17 +0,0 @@
-{
-    "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

@@ -1,25 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,54 +0,0 @@
-import "@frontify/fondue-tokens/styles";
-import type { Preview } from '@storybook/react';
-import '../src/styles.css';
-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

@@ -1,24 +0,0 @@
-# @frontify/fondue-components
-
-## 1.0.0
-
-### Minor Changes
-
-- [#1807](https://github.com/Frontify/fondue/pull/1807) [`fc35a50`](https://github.com/Frontify/fondue/commit/fc35a509e641604eaf2a4b644c573929c3440be3) Thanks [@noahwaldner](https://github.com/noahwaldner)! - refactor: Finalized Monorepo transition, added subexport for new components, added contribution guidelines and readme
-
-### Patch Changes
-
-- [#1798](https://github.com/Frontify/fondue/pull/1798) [`99c8cea`](https://github.com/Frontify/fondue/commit/99c8cea49a6148206c127ebde6f559e17f5980bf) Thanks [@noahwaldner](https://github.com/noahwaldner)! - refactor: refactored button approach to size/variants
-
-- [#1811](https://github.com/Frontify/fondue/pull/1811) [`4fa8007`](https://github.com/Frontify/fondue/commit/4fa8007bf973494ff4621f526d8f2919115f95ff) Thanks [@noahwaldner](https://github.com/noahwaldner)! - fix: housekeeping for v12 release
-
-- [#1806](https://github.com/Frontify/fondue/pull/1806) [`246dfb8`](https://github.com/Frontify/fondue/commit/246dfb8112b68341de8cfd25a71cf3729848395d) Thanks [@noahwaldner](https://github.com/noahwaldner)! - feat: add packages sub-export to `@frontify/fondue`
-
-- Updated dependencies [[`fc35a50`](https://github.com/Frontify/fondue/commit/fc35a509e641604eaf2a4b644c573929c3440be3), [`99c8cea`](https://github.com/Frontify/fondue/commit/99c8cea49a6148206c127ebde6f559e17f5980bf), [`246dfb8`](https://github.com/Frontify/fondue/commit/246dfb8112b68341de8cfd25a71cf3729848395d)]:
-  - @frontify/fondue-icons@0.2.0
-
-## 0.1.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/playwright/index.html

@@ -1,12 +0,0 @@
-<!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

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

package/playwright.config.ts

@@ -1,29 +0,0 @@
-/* (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

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

package/scripts/createNewComponent.ts

@@ -1,42 +0,0 @@
-/* (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

@@ -1,25 +0,0 @@
-/* (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

@@ -1,24 +0,0 @@
-/* (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

@@ -1,35 +0,0 @@
-/* (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

@@ -1,25 +0,0 @@
-/* (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

@@ -1,15 +0,0 @@
-/* (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

@@ -1,16 +0,0 @@
-/* (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

@@ -1,13 +0,0 @@
-/* (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

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

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

@@ -1,57 +0,0 @@
-/* (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 />,
-    },
-};