diff --git a/libs/@hashintel/ds-components/figma.config.json b/libs/@hashintel/ds-components/figma.config.json deleted file mode 100644 index bb1782b4611..00000000000 --- a/libs/@hashintel/ds-components/figma.config.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "codeConnect": { - "include": ["src/components/**/*.{tsx,jsx}"], - "label": "React" - } -} diff --git a/libs/@hashintel/ds-components/package.json b/libs/@hashintel/ds-components/package.json index 77c9ef12357..1728d09dc33 100644 --- a/libs/@hashintel/ds-components/package.json +++ b/libs/@hashintel/ds-components/package.json @@ -48,6 +48,7 @@ "build:buildinfo": "panda ship --config panda.config.ts --outfile dist/panda.buildinfo.json", "build:ladle": "ladle build", "build:lib": "tsup --config tsup.config.ts", + "codemod:beta-fractal-pilots": "tsx scripts/migrate-beta-fractal-pilots.ts", "codegen": "yarn run codegen:colors && yarn run codegen:tokens && yarn run codegen:panda", "codegen:colors": "tsx scripts/generate-colors-radix.ts", "codegen:panda": "panda codegen --clean", @@ -73,14 +74,12 @@ "dependencies": { "@ark-ui/react": "5.26.2", "@hashintel/ds-helpers": "workspace:^", - "@hashintel/refractive": "workspace:^", "@pandacss/dev": "1.4.3", "@pandacss/preset-panda": "1.4.3", "canvas": "3.2.0", "motion": "12.23.24" }, "devDependencies": { - "@figma/code-connect": "1.4.3", "@fontsource-variable/geist-mono": "5.2.7", "@fontsource-variable/inter": "5.2.8", "@fontsource-variable/inter-tight": "5.2.7", @@ -120,7 +119,6 @@ "peerDependencies": { "@ark-ui/react": "^5.26.2", "@hashintel/ds-helpers": "workspace:^", - "@hashintel/refractive": "workspace:^", "react": "^19.2.0", "react-dom": "^19.2.0" } diff --git a/libs/@hashintel/ds-components/scripts/migrate-beta-fractal-pilots.test.ts b/libs/@hashintel/ds-components/scripts/migrate-beta-fractal-pilots.test.ts new file mode 100644 index 00000000000..95ecaa32d82 --- /dev/null +++ b/libs/@hashintel/ds-components/scripts/migrate-beta-fractal-pilots.test.ts @@ -0,0 +1,178 @@ +import { describe, expect, it } from "vitest"; + +import { + getRecipeSymbols, + migrateComponentModule, + migrateRecipeModule, + rewriteRelativeSpecifiers, +} from "./migrate-beta-fractal-pilots"; + +describe("rewriteRelativeSpecifiers", () => { + it("rewrites story exports when a stories root file moves to src/beta", () => { + const sourceText = `export { App as basic } from "./basic.story";\n`; + const oldFilePath = "/repo/src/beta/text/text.stories.ts"; + const newFilePath = "/repo/src/beta/text.stories.ts"; + const moveMap = new Map(); + + const nextSource = rewriteRelativeSpecifiers( + sourceText, + oldFilePath, + newFilePath, + moveMap, + ); + + expect(nextSource).toBe( + 'export { App as basic } from "./text/basic.story";\n', + ); + }); + + it("rewrites story imports when the component root file moves to src/beta", () => { + const sourceText = 'import { Text } from "./text";\n'; + const oldFilePath = "/repo/src/beta/text/basic.story.tsx"; + const newFilePath = oldFilePath; + const moveMap = new Map([ + ["/repo/src/beta/text/text", "/repo/src/beta/text"], + ]); + + const nextSource = rewriteRelativeSpecifiers( + sourceText, + oldFilePath, + newFilePath, + moveMap, + ); + + expect(nextSource).toBe('import { Text } from "../text";\n'); + }); + + it("preserves .recipe suffixes when a recipe root file moves to src/beta", () => { + const sourceText = 'import { textRecipe } from "./text.recipe";\n'; + const oldFilePath = "/repo/src/beta/text/text.tsx"; + const newFilePath = "/repo/src/beta/text.tsx"; + const moveMap = new Map([ + ["/repo/src/beta/text/text", "/repo/src/beta/text"], + ["/repo/src/beta/text/text.recipe", "/repo/src/beta/text.recipe"], + ]); + + const nextSource = rewriteRelativeSpecifiers( + sourceText, + oldFilePath, + newFilePath, + moveMap, + ); + + expect(nextSource).toBe('import { textRecipe } from "./text.recipe";\n'); + }); +}); + +describe("migrateRecipeModule", () => { + it("converts defineRecipe modules to cva recipe modules", () => { + const sourceText = [ + 'import { defineRecipe } from "@pandacss/dev";', + "", + "export const text = defineRecipe({", + ' className: "text",', + " variants: {},", + "});", + "", + ].join("\n"); + + const nextSource = migrateRecipeModule(sourceText, "text", false); + + expect(nextSource).toContain( + 'import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css";', + ); + expect(nextSource).toContain( + "export const textRecipe = cva(textRecipeDefinition);", + ); + expect(nextSource).toContain( + "export type TextRecipeProps = RecipeVariantProps;", + ); + expect(nextSource).not.toContain("@ts-expect-error"); + }); + + it("converts defineSlotRecipe modules to sva modules with a staged suppression", () => { + const sourceText = [ + 'import { tooltipAnatomy } from "@ark-ui/react/anatomy";', + 'import { defineSlotRecipe } from "@pandacss/dev";', + "", + "export const tooltip = defineSlotRecipe({", + ' className: "tooltip",', + " slots: tooltipAnatomy.keys(),", + " base: {},", + "});", + "", + ].join("\n"); + + const nextSource = migrateRecipeModule(sourceText, "tooltip", true); + + expect(nextSource).toContain( + 'import { tooltipAnatomy } from "@ark-ui/react/anatomy";', + ); + expect(nextSource).toContain( + 'import { sva, type RecipeVariantProps } from "@hashintel/ds-helpers/css";', + ); + expect(nextSource).toContain( + "// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components", + ); + expect(nextSource).toContain( + "export const tooltipSlotRecipe = sva(tooltipSlotRecipeDefinition);", + ); + expect(nextSource).toContain( + "export type TooltipSlotRecipeProps = RecipeVariantProps;", + ); + }); +}); + +describe("migrateComponentModule", () => { + it("switches generated recipe imports to local cva recipe imports", () => { + const sourceText = [ + 'import { ark } from "@ark-ui/react/factory";', + 'import { styled } from "@hashintel/ds-helpers/jsx";', + 'import { text } from "@hashintel/ds-helpers/recipes";', + "const Field = styled(ark.text, text);", + 'export const Text = styled("p", text);', + "", + ].join("\n"); + + const nextSource = migrateComponentModule(sourceText, "text"); + + expect(nextSource).toContain('import { textRecipe } from "./text.recipe";'); + expect(nextSource).toContain("const Field = styled(ark.text, textRecipe);"); + expect(nextSource).toContain( + 'export const Text = styled("p", textRecipe);', + ); + }); + + it("switches generated slot recipe imports to local slot recipe imports", () => { + const sourceText = [ + 'import { createStyleContext } from "@hashintel/ds-helpers/jsx";', + 'import { tooltip } from "@hashintel/ds-helpers/recipes";', + "const { withRootProvider } = createStyleContext(tooltip);", + "", + ].join("\n"); + + const nextSource = migrateComponentModule(sourceText, "tooltip"); + + expect(nextSource).toContain( + 'import { tooltipSlotRecipe } from "./tooltip.recipe";', + ); + expect(nextSource).toContain( + "const { withRootProvider } = createStyleContext(tooltipSlotRecipe);", + ); + }); +}); + +describe("getRecipeSymbols", () => { + it("derives explicit recipe names for cva and sva helpers", () => { + expect(getRecipeSymbols("tooltip", "cva")).toEqual({ + definitionName: "tooltipRecipeDefinition", + exportName: "tooltipRecipe", + typeName: "TooltipRecipeProps", + }); + expect(getRecipeSymbols("radio-card-group", "sva")).toEqual({ + definitionName: "radioCardGroupSlotRecipeDefinition", + exportName: "radioCardGroupSlotRecipe", + typeName: "RadioCardGroupSlotRecipeProps", + }); + }); +}); diff --git a/libs/@hashintel/ds-components/scripts/migrate-beta-fractal-pilots.ts b/libs/@hashintel/ds-components/scripts/migrate-beta-fractal-pilots.ts new file mode 100644 index 00000000000..2253ee3b79a --- /dev/null +++ b/libs/@hashintel/ds-components/scripts/migrate-beta-fractal-pilots.ts @@ -0,0 +1,543 @@ +import fs from "node:fs/promises"; +import path from "node:path"; +import { pathToFileURL } from "node:url"; +import { camelCase, pascalCase } from "case-anything"; +import * as ts from "typescript"; + +const BETA_DIR = path.resolve(import.meta.dirname, "../src/beta"); + +const DEFAULT_PILOT_COMPONENTS = ["text", "tooltip", "pagination"] as const; + +type RecipeHelper = "cva" | "sva"; + +type PilotConfig = { + name: string; + suppressRecipeTypeErrors: boolean; +}; + +type FileMove = { + oldPath: string; + newPath: string; +}; + +type ReplaceEdit = { + start: number; + end: number; + text: string; +}; + +const pilotConfigs = new Map([ + ["accordion", { name: "accordion", suppressRecipeTypeErrors: true }], + ["alert", { name: "alert", suppressRecipeTypeErrors: true }], + ["breadcrumb", { name: "breadcrumb", suppressRecipeTypeErrors: true }], + ["avatar", { name: "avatar", suppressRecipeTypeErrors: true }], + ["badge", { name: "badge", suppressRecipeTypeErrors: true }], + ["button", { name: "button", suppressRecipeTypeErrors: true }], + ["card", { name: "card", suppressRecipeTypeErrors: true }], + ["carousel", { name: "carousel", suppressRecipeTypeErrors: true }], + ["checkbox", { name: "checkbox", suppressRecipeTypeErrors: true }], + ["clipboard", { name: "clipboard", suppressRecipeTypeErrors: true }], + ["combobox", { name: "combobox", suppressRecipeTypeErrors: true }], + ["collapsible", { name: "collapsible", suppressRecipeTypeErrors: false }], + ["color-picker", { name: "color-picker", suppressRecipeTypeErrors: true }], + ["code", { name: "code", suppressRecipeTypeErrors: true }], + ["date-picker", { name: "date-picker", suppressRecipeTypeErrors: true }], + ["dialog", { name: "dialog", suppressRecipeTypeErrors: true }], + ["editable", { name: "editable", suppressRecipeTypeErrors: true }], + ["field", { name: "field", suppressRecipeTypeErrors: true }], + ["fieldset", { name: "fieldset", suppressRecipeTypeErrors: true }], + ["group", { name: "group", suppressRecipeTypeErrors: true }], + ["heading", { name: "heading", suppressRecipeTypeErrors: false }], + ["hover-card", { name: "hover-card", suppressRecipeTypeErrors: true }], + ["icon", { name: "icon", suppressRecipeTypeErrors: true }], + ["input-addon", { name: "input-addon", suppressRecipeTypeErrors: true }], + ["input-group", { name: "input-group", suppressRecipeTypeErrors: true }], + ["kbd", { name: "kbd", suppressRecipeTypeErrors: true }], + ["link", { name: "link", suppressRecipeTypeErrors: true }], + ["drawer", { name: "drawer", suppressRecipeTypeErrors: true }], + ["file-upload", { name: "file-upload", suppressRecipeTypeErrors: true }], + ["menu", { name: "menu", suppressRecipeTypeErrors: true }], + ["number-input", { name: "number-input", suppressRecipeTypeErrors: true }], + ["popover", { name: "popover", suppressRecipeTypeErrors: true }], + ["pin-input", { name: "pin-input", suppressRecipeTypeErrors: true }], + ["progress", { name: "progress", suppressRecipeTypeErrors: true }], + [ + "radio-card-group", + { name: "radio-card-group", suppressRecipeTypeErrors: true }, + ], + ["radio-group", { name: "radio-group", suppressRecipeTypeErrors: true }], + ["rating-group", { name: "rating-group", suppressRecipeTypeErrors: true }], + ["scroll-area", { name: "scroll-area", suppressRecipeTypeErrors: true }], + ["segment-group", { name: "segment-group", suppressRecipeTypeErrors: true }], + ["select", { name: "select", suppressRecipeTypeErrors: true }], + ["slider", { name: "slider", suppressRecipeTypeErrors: true }], + ["text", { name: "text", suppressRecipeTypeErrors: false }], + ["skeleton", { name: "skeleton", suppressRecipeTypeErrors: true }], + ["splitter", { name: "splitter", suppressRecipeTypeErrors: true }], + ["switch", { name: "switch", suppressRecipeTypeErrors: true }], + ["table", { name: "table", suppressRecipeTypeErrors: true }], + ["tabs", { name: "tabs", suppressRecipeTypeErrors: true }], + ["tags-input", { name: "tags-input", suppressRecipeTypeErrors: true }], + ["textarea", { name: "textarea", suppressRecipeTypeErrors: true }], + ["toast", { name: "toast", suppressRecipeTypeErrors: true }], + ["toggle-group", { name: "toggle-group", suppressRecipeTypeErrors: true }], + ["tooltip", { name: "tooltip", suppressRecipeTypeErrors: true }], + ["spinner", { name: "spinner", suppressRecipeTypeErrors: true }], + ["pagination", { name: "pagination", suppressRecipeTypeErrors: false }], +]); + +function stripExtension(filePath: string): string { + return filePath.replace( + /\.(?:stories\.ts|recipe\.ts|story\.tsx|tsx|ts|stories|recipe)$/, + "", + ); +} + +function toPosixPath(filePath: string): string { + return filePath.split(path.sep).join(path.posix.sep); +} + +function toRelativeModuleSpecifier( + fromFilePath: string, + toPathWithoutExtension: string, +) { + const relativePath = path.relative( + path.dirname(fromFilePath), + toPathWithoutExtension, + ); + + if (!relativePath) { + const targetBasename = path.basename(toPathWithoutExtension); + return `../${targetBasename}`; + } + + const posixPath = toPosixPath(relativePath); + + return posixPath.startsWith(".") ? posixPath : `./${posixPath}`; +} + +function getModuleSpecifierSuffix(specifier: string): string { + if (specifier.endsWith(".recipe")) { + return ".recipe"; + } + + if (specifier.endsWith(".stories")) { + return ".stories"; + } + + return ""; +} + +function applyEdits(sourceText: string, edits: ReplaceEdit[]): string { + return edits + .sort((left, right) => right.start - left.start) + .reduce( + (text, edit) => + `${text.slice(0, edit.start)}${edit.text}${text.slice(edit.end)}`, + sourceText, + ); +} + +function getScriptKind(filePath: string): ts.ScriptKind { + if (filePath.endsWith(".tsx")) { + return ts.ScriptKind.TSX; + } + + return ts.ScriptKind.TS; +} + +function createSourceFile(filePath: string, sourceText: string): ts.SourceFile { + return ts.createSourceFile( + filePath, + sourceText, + ts.ScriptTarget.Latest, + true, + getScriptKind(filePath), + ); +} + +function rewriteRelativeSpecifiers( + sourceText: string, + oldFilePath: string, + newFilePath: string, + moveMap: ReadonlyMap, +): string { + const sourceFile = createSourceFile(oldFilePath, sourceText); + const edits: ReplaceEdit[] = []; + + const visit = (node: ts.Node): void => { + if ( + (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) && + node.moduleSpecifier && + ts.isStringLiteral(node.moduleSpecifier) + ) { + const currentSpecifier = node.moduleSpecifier.text; + if (currentSpecifier.startsWith(".")) { + const oldResolvedPath = stripExtension( + path.resolve(path.dirname(oldFilePath), currentSpecifier), + ); + const newResolvedPath = moveMap.get(oldResolvedPath) ?? oldResolvedPath; + const nextSpecifier = `${toRelativeModuleSpecifier( + newFilePath, + newResolvedPath, + )}${getModuleSpecifierSuffix(currentSpecifier)}`; + + if (nextSpecifier !== currentSpecifier) { + edits.push({ + start: node.moduleSpecifier.getStart(sourceFile) + 1, + end: node.moduleSpecifier.getEnd() - 1, + text: nextSpecifier, + }); + } + } + } + + ts.forEachChild(node, visit); + }; + + visit(sourceFile); + + return applyEdits(sourceText, edits); +} + +function getRecipeSymbols(componentName: string, helper: RecipeHelper) { + const componentStem = camelCase(componentName); + const componentTypeStem = pascalCase(componentName); + + if (helper === "cva") { + return { + exportName: `${componentStem}Recipe`, + typeName: `${componentTypeStem}RecipeProps`, + definitionName: `${componentStem}RecipeDefinition`, + }; + } + + return { + exportName: `${componentStem}SlotRecipe`, + typeName: `${componentTypeStem}SlotRecipeProps`, + definitionName: `${componentStem}SlotRecipeDefinition`, + }; +} + +function migrateRecipeModule( + sourceText: string, + componentName: string, + suppressRecipeTypeErrors: boolean, +): string { + const sourceFile = createSourceFile(`${componentName}.recipe.ts`, sourceText); + + let helper: RecipeHelper | null = null; + let recipeConfigText: string | null = null; + const preservedImports: string[] = []; + + for (const statement of sourceFile.statements) { + if ( + ts.isImportDeclaration(statement) && + ts.isStringLiteral(statement.moduleSpecifier) + ) { + if ( + statement.moduleSpecifier.text === "@pandacss/dev" || + statement.moduleSpecifier.text === "@hashintel/ds-helpers/css" + ) { + continue; + } + + preservedImports.push( + sourceText.slice(statement.pos, statement.end).trim(), + ); + continue; + } + + if (!ts.isVariableStatement(statement)) { + continue; + } + + const declaration = statement.declarationList.declarations[0]; + if ( + !declaration || + !declaration.initializer || + !ts.isCallExpression(declaration.initializer) + ) { + continue; + } + + const expressionText = + declaration.initializer.expression.getText(sourceFile); + if ( + expressionText !== "defineRecipe" && + expressionText !== "defineSlotRecipe" && + expressionText !== "cva" && + expressionText !== "sva" + ) { + continue; + } + + helper = + expressionText === "defineRecipe" || expressionText === "cva" + ? "cva" + : "sva"; + const firstArgument = declaration.initializer.arguments[0]; + if (!firstArgument) { + throw new Error(`Missing recipe config in ${componentName}.recipe.ts`); + } + + recipeConfigText = sourceText.slice( + firstArgument.getStart(sourceFile), + firstArgument.getEnd(), + ); + } + + if (!helper || !recipeConfigText) { + throw new Error(`Could not parse recipe module for ${componentName}`); + } + + const { definitionName, exportName, typeName } = getRecipeSymbols( + componentName, + helper, + ); + const nextImports = [...preservedImports]; + nextImports.push( + `import { ${helper}, type RecipeVariantProps } from "@hashintel/ds-helpers/css";`, + ); + + const sections = [nextImports.join("\n")]; + sections.push(`const ${definitionName} = ${recipeConfigText} as const;`); + + if (suppressRecipeTypeErrors) { + sections.push( + "// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components\n" + + `export const ${exportName} = ${helper}(${definitionName});`, + ); + } else { + sections.push(`export const ${exportName} = ${helper}(${definitionName});`); + } + + sections.push( + `export type ${typeName} = RecipeVariantProps;`, + ); + + return `${sections.join("\n\n")}\n`; +} + +function renameIdentifierReferences( + sourceText: string, + filePath: string, + oldIdentifier: string, + newIdentifier: string, +): string { + const sourceFile = createSourceFile(filePath, sourceText); + const edits: ReplaceEdit[] = []; + + const visit = (node: ts.Node): void => { + if ( + ts.isIdentifier(node) && + node.text === oldIdentifier && + !(ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) + ) { + edits.push({ + start: node.getStart(sourceFile), + end: node.getEnd(), + text: newIdentifier, + }); + } + + ts.forEachChild(node, visit); + }; + + visit(sourceFile); + + return applyEdits(sourceText, edits); +} + +function migrateComponentModule( + sourceText: string, + componentName: string, +): string { + const legacyRecipeImportName = camelCase(componentName); + + const { exportName: nextRecipeImportName } = getRecipeSymbols( + componentName, + "cva", + ); + const slotRecipeName = getRecipeSymbols(componentName, "sva").exportName; + const recipeImportName = sourceText.includes( + `{ ${legacyRecipeImportName} } from "@hashintel/ds-helpers/recipes"`, + ) + ? legacyRecipeImportName + : null; + + if (!recipeImportName) { + return sourceText; + } + + const usesSlotRecipe = sourceText.includes( + `createStyleContext(${legacyRecipeImportName})`, + ); + const nextImportName = usesSlotRecipe ? slotRecipeName : nextRecipeImportName; + + const updatedImport = `import { ${nextImportName} } from "./${componentName}.recipe";`; + const nextSource = sourceText.replace( + new RegExp( + `import \\{\\s*${legacyRecipeImportName}\\s*\\} from "@hashintel/ds-helpers/recipes";`, + ), + updatedImport, + ); + + return renameIdentifierReferences( + nextSource, + `${componentName}.tsx`, + legacyRecipeImportName, + nextImportName, + ); +} + +async function collectBetaSourceFiles( + rootDirectory: string, +): Promise { + const entries = await fs.readdir(rootDirectory, { withFileTypes: true }); + const nestedResults = await Promise.all( + entries.map(async (entry) => { + const entryPath = path.join(rootDirectory, entry.name); + if (entry.isDirectory()) { + return collectBetaSourceFiles(entryPath); + } + + if (entry.name.endsWith(".ts") || entry.name.endsWith(".tsx")) { + return [entryPath]; + } + + return []; + }), + ); + + return nestedResults.flat(); +} + +function getRootFileMoves(componentName: string): FileMove[] { + return [ + { + oldPath: path.join(BETA_DIR, componentName, `${componentName}.tsx`), + newPath: path.join(BETA_DIR, `${componentName}.tsx`), + }, + { + oldPath: path.join(BETA_DIR, componentName, `${componentName}.recipe.ts`), + newPath: path.join(BETA_DIR, `${componentName}.recipe.ts`), + }, + { + oldPath: path.join( + BETA_DIR, + componentName, + `${componentName}.stories.ts`, + ), + newPath: path.join(BETA_DIR, `${componentName}.stories.ts`), + }, + ]; +} + +async function ensureFileExists(filePath: string): Promise { + try { + await fs.access(filePath); + } catch { + throw new Error(`Expected file does not exist: ${filePath}`); + } +} + +async function migratePilots(componentNames: string[]): Promise { + const configs = componentNames.map((componentName) => { + const config = pilotConfigs.get(componentName); + if (!config) { + throw new Error(`Unsupported pilot component: ${componentName}`); + } + + return config; + }); + + const fileMoves = configs.flatMap(({ name }) => getRootFileMoves(name)); + await Promise.all(fileMoves.map(({ oldPath }) => ensureFileExists(oldPath))); + + const moveMap = new Map( + fileMoves.map(({ oldPath, newPath }) => [ + stripExtension(oldPath), + stripExtension(newPath), + ]), + ); + const betaFiles = await collectBetaSourceFiles(BETA_DIR); + const transformedFiles = new Map(); + + for (const oldFilePath of betaFiles) { + const newFilePath = + fileMoves.find(({ oldPath }) => oldPath === oldFilePath)?.newPath ?? + oldFilePath; + let nextSource = await fs.readFile(oldFilePath, "utf8"); + + nextSource = rewriteRelativeSpecifiers( + nextSource, + oldFilePath, + newFilePath, + moveMap, + ); + + const recipeConfig = configs.find( + ({ name }) => + oldFilePath === path.join(BETA_DIR, name, `${name}.recipe.ts`), + ); + if (recipeConfig) { + nextSource = migrateRecipeModule( + nextSource, + recipeConfig.name, + recipeConfig.suppressRecipeTypeErrors, + ); + } + + const componentConfig = configs.find( + ({ name }) => oldFilePath === path.join(BETA_DIR, name, `${name}.tsx`), + ); + if (componentConfig) { + nextSource = migrateComponentModule(nextSource, componentConfig.name); + } + + transformedFiles.set(newFilePath, nextSource); + } + + await Promise.all( + [...transformedFiles.entries()].map(async ([filePath, sourceText]) => { + await fs.mkdir(path.dirname(filePath), { recursive: true }); + await fs.writeFile(filePath, sourceText, "utf8"); + }), + ); + + await Promise.all( + fileMoves.map(async ({ oldPath, newPath }) => { + if (oldPath !== newPath) { + await fs.unlink(oldPath); + } + }), + ); +} + +export { + DEFAULT_PILOT_COMPONENTS, + getRecipeSymbols, + migrateComponentModule, + migrateRecipeModule, + rewriteRelativeSpecifiers, +}; + +async function main() { + const explicitComponents = process.argv + .slice(2) + .filter((arg) => !arg.startsWith("--")); + const components = + explicitComponents.length > 0 + ? explicitComponents + : [...DEFAULT_PILOT_COMPONENTS]; + + await migratePilots(components); +} + +if ( + process.argv[1] && + import.meta.url === pathToFileURL(process.argv[1]).href +) { + await main(); +} diff --git a/libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.recipe.ts b/libs/@hashintel/ds-components/src/beta/absolute-center.recipe.ts similarity index 100% rename from libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.recipe.ts rename to libs/@hashintel/ds-components/src/beta/absolute-center.recipe.ts diff --git a/libs/@hashintel/ds-components/src/beta/absolute-center.stories.ts b/libs/@hashintel/ds-components/src/beta/absolute-center.stories.ts new file mode 100644 index 00000000000..fb3985033b8 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/absolute-center.stories.ts @@ -0,0 +1,3 @@ +export default { title: "Primitives/AbsoluteCenter" }; + +export { App as basic } from "./absolute-center/basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.tsx b/libs/@hashintel/ds-components/src/beta/absolute-center.tsx similarity index 100% rename from libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.tsx rename to libs/@hashintel/ds-components/src/beta/absolute-center.tsx diff --git a/libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.stories.ts b/libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.stories.ts deleted file mode 100644 index 6db5b0b9568..00000000000 --- a/libs/@hashintel/ds-components/src/beta/absolute-center/absolute-center.stories.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { title: "Primitives/AbsoluteCenter" }; - -export { App as basic } from "./basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/absolute-center/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/absolute-center/basic.story.tsx index f00921d9ea6..d45b0c3a3e6 100644 --- a/libs/@hashintel/ds-components/src/beta/absolute-center/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/absolute-center/basic.story.tsx @@ -1,6 +1,6 @@ import { Box } from "@hashintel/ds-helpers/jsx"; -import { AbsoluteCenter } from "./absolute-center"; +import { AbsoluteCenter } from "../absolute-center"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/accordion/accordion.recipe.ts b/libs/@hashintel/ds-components/src/beta/accordion.recipe.ts similarity index 82% rename from libs/@hashintel/ds-components/src/beta/accordion/accordion.recipe.ts rename to libs/@hashintel/ds-components/src/beta/accordion.recipe.ts index 686f05b6b7a..a66673b2512 100644 --- a/libs/@hashintel/ds-components/src/beta/accordion/accordion.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/accordion.recipe.ts @@ -1,7 +1,7 @@ import { accordionAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const accordion = defineSlotRecipe({ +const accordionSlotRecipeDefinition = { className: "accordion", slots: accordionAnatomy.extendWith("itemBody").keys(), base: { @@ -87,4 +87,11 @@ export const accordion = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const accordionSlotRecipe = sva(accordionSlotRecipeDefinition); + +export type AccordionSlotRecipeProps = RecipeVariantProps< + typeof accordionSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/accordion.stories.ts b/libs/@hashintel/ds-components/src/beta/accordion.stories.ts new file mode 100644 index 00000000000..75ac2888c74 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/accordion.stories.ts @@ -0,0 +1,3 @@ +export default { title: "Primitives/Accordion" }; + +export { App as basic } from "./accordion/basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/accordion/accordion.tsx b/libs/@hashintel/ds-components/src/beta/accordion.tsx similarity index 93% rename from libs/@hashintel/ds-components/src/beta/accordion/accordion.tsx rename to libs/@hashintel/ds-components/src/beta/accordion.tsx index 6aceb4ffaaf..ac9c2be592f 100644 --- a/libs/@hashintel/ds-components/src/beta/accordion/accordion.tsx +++ b/libs/@hashintel/ds-components/src/beta/accordion.tsx @@ -5,11 +5,12 @@ import { Accordion } from "@ark-ui/react/accordion"; import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { accordion } from "@hashintel/ds-helpers/recipes"; import { ChevronDownIcon } from "lucide-react"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(accordion); +import { accordionSlotRecipe } from "./accordion.recipe"; + +const { withProvider, withContext } = createStyleContext(accordionSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Accordion.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/accordion/accordion.stories.ts b/libs/@hashintel/ds-components/src/beta/accordion/accordion.stories.ts deleted file mode 100644 index 7846fee6a0a..00000000000 --- a/libs/@hashintel/ds-components/src/beta/accordion/accordion.stories.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { title: "Primitives/Accordion" }; - -export { App as basic } from "./basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/accordion/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/accordion/basic.story.tsx index 7fcf408f085..2e12c3f807f 100644 --- a/libs/@hashintel/ds-components/src/beta/accordion/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/accordion/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Accordion from "./accordion"; +import * as Accordion from "../accordion"; const faqItems = [ { diff --git a/libs/@hashintel/ds-components/src/beta/alert/alert.recipe.ts b/libs/@hashintel/ds-components/src/beta/alert.recipe.ts similarity index 84% rename from libs/@hashintel/ds-components/src/beta/alert/alert.recipe.ts rename to libs/@hashintel/ds-components/src/beta/alert.recipe.ts index a7df5c44b05..6cc8a687be4 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/alert.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/alert.recipe.ts @@ -1,6 +1,6 @@ -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const alert = defineSlotRecipe({ +const alertSlotRecipeDefinition = { className: "alert", slots: ["root", "content", "description", "indicator", "title"], base: { @@ -109,4 +109,9 @@ export const alert = defineSlotRecipe({ neutral: {}, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const alertSlotRecipe = sva(alertSlotRecipeDefinition); + +export type AlertSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/alert.stories.ts b/libs/@hashintel/ds-components/src/beta/alert.stories.ts new file mode 100644 index 00000000000..d8da36675a0 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/alert.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Alert" }; + +export { App as basic } from "./alert/basic.story"; +export { App as closable } from "./alert/closable.story"; +export { App as description } from "./alert/description.story"; +export { App as sizes } from "./alert/sizes.story"; +export { App as status } from "./alert/status.story"; +export { App as variants } from "./alert/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/alert/alert.tsx b/libs/@hashintel/ds-components/src/beta/alert.tsx similarity index 88% rename from libs/@hashintel/ds-components/src/beta/alert/alert.tsx rename to libs/@hashintel/ds-components/src/beta/alert.tsx index 00d8a26b2e1..db4950a2b40 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/alert.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert.tsx @@ -4,11 +4,12 @@ import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { alert } from "@hashintel/ds-helpers/recipes"; import { InfoIcon } from "lucide-react"; import { type ComponentProps, forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(alert); +import { alertSlotRecipe } from "./alert.recipe"; + +const { withProvider, withContext } = createStyleContext(alertSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(ark.div, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/alert/alert.stories.ts b/libs/@hashintel/ds-components/src/beta/alert/alert.stories.ts deleted file mode 100644 index 884eb7b0603..00000000000 --- a/libs/@hashintel/ds-components/src/beta/alert/alert.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Alert" }; - -export { App as basic } from "./basic.story"; -export { App as closable } from "./closable.story"; -export { App as description } from "./description.story"; -export { App as sizes } from "./sizes.story"; -export { App as status } from "./status.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/alert/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/basic.story.tsx index 5e75e2fc2c7..23a7fe2eab3 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/basic.story.tsx @@ -1,4 +1,4 @@ -import { Alert } from "./alert"; +import { Alert } from "../alert"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/alert/closable.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/closable.story.tsx index a57f0b510f7..1f5ec212e21 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/closable.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/closable.story.tsx @@ -1,5 +1,5 @@ -import { CloseButton } from "../close-button/close-button"; -import { Alert } from "./alert"; +import { Alert } from "../alert"; +import { CloseButton } from "../close-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/alert/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/closed.story.tsx index 1c3c6136c23..45eca8d5318 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type ReactElement, type ReactNode } from "react"; -import * as StyledAlert from "./alert"; +import * as StyledAlert from "../alert"; export interface AlertProps extends Omit { startElement?: ReactNode; diff --git a/libs/@hashintel/ds-components/src/beta/alert/description.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/description.story.tsx index a391f0a7832..c0cf72ee0c5 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/description.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/description.story.tsx @@ -1,4 +1,4 @@ -import { Alert } from "./alert"; +import { Alert } from "../alert"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/alert/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/sizes.story.tsx index 9ff2e15a279..c4c80228d78 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Alert } from "./alert"; +import { Alert } from "../alert"; export const App = () => { const sizes = ["md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/alert/status.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/status.story.tsx index fdf35733f4d..56d873ba923 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/status.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/status.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Alert } from "./alert"; +import { Alert } from "../alert"; export const App = () => { const statuses = ["neutral", "info", "warning", "error", "success"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/alert/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/alert/variants.story.tsx index 5011b2c1bf0..1dad2be1a5e 100644 --- a/libs/@hashintel/ds-components/src/beta/alert/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/alert/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Alert } from "./alert"; +import { Alert } from "../alert"; export const App = () => { const variants = ["solid", "surface", "subtle", "outline"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/angle-slider/angle-slider.recipe.ts b/libs/@hashintel/ds-components/src/beta/angle-slider/angle-slider.recipe.ts index 878972bc26c..486fff693a3 100644 --- a/libs/@hashintel/ds-components/src/beta/angle-slider/angle-slider.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/angle-slider/angle-slider.recipe.ts @@ -1,7 +1,7 @@ import { angleSliderAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const angleSlider = defineSlotRecipe({ +export const angleSliderSlotRecipe = sva({ className: "angleSlider", slots: angleSliderAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/avatar/avatar.recipe.ts b/libs/@hashintel/ds-components/src/beta/avatar.recipe.ts similarity index 89% rename from libs/@hashintel/ds-components/src/beta/avatar/avatar.recipe.ts rename to libs/@hashintel/ds-components/src/beta/avatar.recipe.ts index 159f6ab31d9..f25ab5d99b8 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/avatar.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/avatar.recipe.ts @@ -1,7 +1,7 @@ import { avatarAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const avatar = defineSlotRecipe({ +const avatarSlotRecipeDefinition = { className: "avatar", slots: avatarAnatomy.keys(), base: { @@ -149,4 +149,9 @@ export const avatar = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const avatarSlotRecipe = sva(avatarSlotRecipeDefinition); + +export type AvatarSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/avatar.stories.ts b/libs/@hashintel/ds-components/src/beta/avatar.stories.ts new file mode 100644 index 00000000000..18ebca973e7 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/avatar.stories.ts @@ -0,0 +1,12 @@ +export default { title: "Primitives/Avatar" }; + +export { App as badge } from "./avatar/badge.story"; +export { App as basic } from "./avatar/basic.story"; +export { App as colors } from "./avatar/colors.story"; +export { App as fallback } from "./avatar/fallback.story"; +export { App as group } from "./avatar/group.story"; +export { App as persona } from "./avatar/persona.story"; +export { App as ring } from "./avatar/ring.story"; +export { App as shapes } from "./avatar/shapes.story"; +export { App as sizes } from "./avatar/sizes.story"; +export { App as variants } from "./avatar/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/avatar/avatar.tsx b/libs/@hashintel/ds-components/src/beta/avatar.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/avatar/avatar.tsx rename to libs/@hashintel/ds-components/src/beta/avatar.tsx index cc98cf0173a..f3deb6a4c53 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/avatar.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar.tsx @@ -4,11 +4,12 @@ import { Avatar } from "@ark-ui/react/avatar"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { avatar } from "@hashintel/ds-helpers/recipes"; import { UserIcon } from "lucide-react"; import { type ComponentProps, forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(avatar); +import { avatarSlotRecipe } from "./avatar.recipe"; + +const { withProvider, withContext } = createStyleContext(avatarSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Avatar.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/avatar/avatar.stories.ts b/libs/@hashintel/ds-components/src/beta/avatar/avatar.stories.ts deleted file mode 100644 index 3c9a6e039cf..00000000000 --- a/libs/@hashintel/ds-components/src/beta/avatar/avatar.stories.ts +++ /dev/null @@ -1,12 +0,0 @@ -export default { title: "Primitives/Avatar" }; - -export { App as badge } from "./badge.story"; -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as fallback } from "./fallback.story"; -export { App as group } from "./group.story"; -export { App as persona } from "./persona.story"; -export { App as ring } from "./ring.story"; -export { App as shapes } from "./shapes.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/avatar/badge.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/badge.story.tsx index 07c9fddc770..69b2d6f1c6b 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/badge.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/badge.story.tsx @@ -1,6 +1,6 @@ import { Circle, Float } from "@hashintel/ds-helpers/jsx"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/avatar/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/basic.story.tsx index 8c14604fa68..533a8bb6c81 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/avatar/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/closed.story.tsx index bb846333e21..d11e6c20ae5 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type ImgHTMLAttributes } from "react"; -import * as StyledAvatar from "./avatar"; +import * as StyledAvatar from "../avatar"; type ImageProps = ImgHTMLAttributes; diff --git a/libs/@hashintel/ds-components/src/beta/avatar/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/colors.story.tsx index 9e3c0803934..3294b77ad99 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/colors.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; const colorPalette = [ "red", diff --git a/libs/@hashintel/ds-components/src/beta/avatar/fallback.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/fallback.story.tsx index b96668deabc..6cafeddcd2b 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/fallback.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/fallback.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/avatar/group.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/group.story.tsx index 1860912d623..8be00c0fac6 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/group.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/group.story.tsx @@ -1,7 +1,7 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Group } from "../group/group"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; +import { Group } from "../group"; const users = [ { diff --git a/libs/@hashintel/ds-components/src/beta/avatar/persona.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/persona.story.tsx index 65d936443a9..99e323059d8 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/persona.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/persona.story.tsx @@ -1,7 +1,7 @@ import { Box, HStack } from "@hashintel/ds-helpers/jsx"; -import { Text } from "../text/text"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/avatar/ring.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/ring.story.tsx index c5867d5f9ad..a3e9fb6c529 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/ring.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/ring.story.tsx @@ -1,4 +1,4 @@ -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/avatar/shapes.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/shapes.story.tsx index cff7215a7b4..e7921a4e9d3 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/shapes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/shapes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { const shapes = ["square", "rounded", "full"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/avatar/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/sizes.story.tsx index b19204e8f1e..883b6a1f784 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/sizes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl", "2xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/avatar/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/avatar/variants.story.tsx index 417b36fa4fe..6a9c21a38d0 100644 --- a/libs/@hashintel/ds-components/src/beta/avatar/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/avatar/variants.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as Avatar from "./avatar"; +import * as Avatar from "../avatar"; export const App = () => { const variants = ["solid", "surface", "subtle", "outline"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/badge/badge.recipe.ts b/libs/@hashintel/ds-components/src/beta/badge.recipe.ts similarity index 80% rename from libs/@hashintel/ds-components/src/beta/badge/badge.recipe.ts rename to libs/@hashintel/ds-components/src/beta/badge.recipe.ts index 5bd112e8e32..a05d97f4027 100644 --- a/libs/@hashintel/ds-components/src/beta/badge/badge.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/badge.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const badge = defineRecipe({ +const badgeRecipeDefinition = { className: "badge", base: { display: "inline-flex", @@ -76,4 +76,9 @@ export const badge = defineRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const badgeRecipe = cva(badgeRecipeDefinition); + +export type BadgeRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/badge.stories.ts b/libs/@hashintel/ds-components/src/beta/badge.stories.ts new file mode 100644 index 00000000000..dbe3296f7f9 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/badge.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Badge" }; + +export { App as basic } from "./badge/basic.story"; +export { App as icon } from "./badge/icon.story"; +export { App as sizes } from "./badge/sizes.story"; +export { App as variants } from "./badge/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/badge/badge.tsx b/libs/@hashintel/ds-components/src/beta/badge.tsx similarity index 66% rename from libs/@hashintel/ds-components/src/beta/badge/badge.tsx rename to libs/@hashintel/ds-components/src/beta/badge.tsx index e97089fad76..cf635a3fb37 100644 --- a/libs/@hashintel/ds-components/src/beta/badge/badge.tsx +++ b/libs/@hashintel/ds-components/src/beta/badge.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { badge } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { badgeRecipe } from "./badge.recipe"; + export type BadgeProps = ComponentProps; -export const Badge = styled(ark.div, badge); +export const Badge = styled(ark.div, badgeRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/badge/badge.stories.ts b/libs/@hashintel/ds-components/src/beta/badge/badge.stories.ts deleted file mode 100644 index 6c65363fe49..00000000000 --- a/libs/@hashintel/ds-components/src/beta/badge/badge.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Badge" }; - -export { App as basic } from "./basic.story"; -export { App as icon } from "./icon.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/badge/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/badge/basic.story.tsx index de4a592d9af..b640190709c 100644 --- a/libs/@hashintel/ds-components/src/beta/badge/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/badge/basic.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Badge } from "./badge"; +import { Badge } from "../badge"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/badge/icon.story.tsx b/libs/@hashintel/ds-components/src/beta/badge/icon.story.tsx index d1922071722..b5f8b37209a 100644 --- a/libs/@hashintel/ds-components/src/beta/badge/icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/badge/icon.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { StarIcon } from "lucide-react"; -import { Badge } from "./badge"; +import { Badge } from "../badge"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/badge/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/badge/sizes.story.tsx index 9cf86db5d4e..bfd520ce451 100644 --- a/libs/@hashintel/ds-components/src/beta/badge/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/badge/sizes.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { StarIcon } from "lucide-react"; -import { Badge } from "./badge"; +import { Badge } from "../badge"; export const App = () => { const sizes = ["sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/badge/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/badge/variants.story.tsx index 2ee2b584f62..bbb544ac387 100644 --- a/libs/@hashintel/ds-components/src/beta/badge/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/badge/variants.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Badge } from "./badge"; +import { Badge } from "../badge"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.recipe.ts b/libs/@hashintel/ds-components/src/beta/breadcrumb.recipe.ts similarity index 80% rename from libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.recipe.ts rename to libs/@hashintel/ds-components/src/beta/breadcrumb.recipe.ts index abb8b8f5213..077189790c8 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb.recipe.ts @@ -1,6 +1,6 @@ -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const breadcrumb = defineSlotRecipe({ +const breadcrumbSlotRecipeDefinition = { className: "breadcrumb", slots: ["root", "list", "link", "item", "separator", "ellipsis"], base: { @@ -74,4 +74,11 @@ export const breadcrumb = defineSlotRecipe({ variant: "plain", size: "md", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const breadcrumbSlotRecipe = sva(breadcrumbSlotRecipeDefinition); + +export type BreadcrumbSlotRecipeProps = RecipeVariantProps< + typeof breadcrumbSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb.stories.ts b/libs/@hashintel/ds-components/src/beta/breadcrumb.stories.ts new file mode 100644 index 00000000000..394073c2176 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb.stories.ts @@ -0,0 +1,10 @@ +export default { title: "Primitives/Breadcrumb" }; + +export { App as basic } from "./breadcrumb/basic.story"; +export { App as ellipsis } from "./breadcrumb/ellipsis.story"; +export { App as icon } from "./breadcrumb/icon.story"; +export { App as interactive } from "./breadcrumb/interactive.story"; +export { App as menu } from "./breadcrumb/menu.story"; +export { App as separator } from "./breadcrumb/separator.story"; +export { App as sizes } from "./breadcrumb/sizes.story"; +export { App as variants } from "./breadcrumb/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.tsx rename to libs/@hashintel/ds-components/src/beta/breadcrumb.tsx index 3b210d0f6da..5d3487fb963 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb.tsx @@ -4,11 +4,12 @@ import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { breadcrumb } from "@hashintel/ds-helpers/recipes"; import { ChevronRightIcon } from "lucide-react"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(breadcrumb); +import { breadcrumbSlotRecipe } from "./breadcrumb.recipe"; + +const { withProvider, withContext } = createStyleContext(breadcrumbSlotRecipe); export type RootProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/basic.story.tsx index 8aa798ff557..ee4d74d3555 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.stories.ts b/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.stories.ts deleted file mode 100644 index 549ac999f1a..00000000000 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/breadcrumb.stories.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { title: "Primitives/Breadcrumb" }; - -export { App as basic } from "./basic.story"; -export { App as ellipsis } from "./ellipsis.story"; -export { App as icon } from "./icon.story"; -export { App as interactive } from "./interactive.story"; -export { App as menu } from "./menu.story"; -export { App as separator } from "./separator.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/closed.story.tsx index 56905513493..2ee2f345a94 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, Fragment, type ReactNode } from "react"; -import * as StyledBreadcrumb from "./breadcrumb"; +import * as StyledBreadcrumb from "../breadcrumb"; export interface BreadcrumbProps extends StyledBreadcrumb.RootProps { items: Array<{ title: ReactNode; url?: string }>; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/ellipsis.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/ellipsis.story.tsx index 21e249aa238..d0fd9772b2b 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/ellipsis.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/ellipsis.story.tsx @@ -1,4 +1,4 @@ -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/icon.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/icon.story.tsx index 86c3ddab145..2d7bf5f5dec 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/icon.story.tsx @@ -1,6 +1,6 @@ import { ComponentIcon, FileIcon } from "lucide-react"; -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/interactive.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/interactive.story.tsx index 46aa2ed533b..9624a61d720 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/interactive.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/interactive.story.tsx @@ -1,4 +1,4 @@ -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/menu.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/menu.story.tsx index ebb1d0156bb..c534d6c3ce8 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/menu.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/menu.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { EllipsisIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import * as Menu from "../menu/menu"; -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; +import { IconButton } from "../icon-button"; +import * as Menu from "../menu"; interface BreadcrumbMenuItemProps { children: React.ReactNode; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/separator.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/separator.story.tsx index 099a6a1dc95..22afdee6ccd 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/separator.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/separator.story.tsx @@ -1,6 +1,6 @@ import { DotIcon } from "lucide-react"; -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/sizes.story.tsx index e64fbeb0a93..526ce95f8c4 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { const sizes = ["xs", "sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/breadcrumb/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/breadcrumb/variants.story.tsx index 0f49515981c..60d08cd857b 100644 --- a/libs/@hashintel/ds-components/src/beta/breadcrumb/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/breadcrumb/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Breadcrumb from "./breadcrumb"; +import * as Breadcrumb from "../breadcrumb"; export const App = () => { const variants = ["plain", "underline"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/button/button.recipe.ts b/libs/@hashintel/ds-components/src/beta/button.recipe.ts similarity index 84% rename from libs/@hashintel/ds-components/src/beta/button/button.recipe.ts rename to libs/@hashintel/ds-components/src/beta/button.recipe.ts index 24571915df5..9387878bd09 100644 --- a/libs/@hashintel/ds-components/src/beta/button/button.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/button.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva } from "@hashintel/ds-helpers/css"; -export const button = defineRecipe({ +const buttonRecipeDefinition = { className: "button", jsx: ["Button", "IconButton", "CloseButton", "ButtonGroup"], base: { @@ -149,4 +149,14 @@ export const button = defineRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const buttonRecipe = cva(buttonRecipeDefinition); + +// TODO(beta-graduation): restore `RecipeVariantProps` once +// the staged strict-token errors in this beta recipe have been fixed. +export type ButtonRecipeProps = { + size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined; + variant?: "solid" | "surface" | "subtle" | "outline" | "plain" | undefined; +}; diff --git a/libs/@hashintel/ds-components/src/beta/button.stories.ts b/libs/@hashintel/ds-components/src/beta/button.stories.ts new file mode 100644 index 00000000000..9c0be4596cf --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/button.stories.ts @@ -0,0 +1,13 @@ +export default { title: "Primitives/Button" }; + +export { App as asLink } from "./button/as-link.story"; +export { App as attached } from "./button/attached.story"; +export { App as basic } from "./button/basic.story"; +export { App as colors } from "./button/colors.story"; +export { App as disabled } from "./button/disabled.story"; +export { App as group } from "./button/group.story"; +export { App as icon } from "./button/icon.story"; +export { App as loading } from "./button/loading.story"; +export { App as ref } from "./button/ref.story"; +export { App as sizes } from "./button/sizes.story"; +export { App as variants } from "./button/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/button/button.tsx b/libs/@hashintel/ds-components/src/beta/button.tsx similarity index 66% rename from libs/@hashintel/ds-components/src/beta/button/button.tsx rename to libs/@hashintel/ds-components/src/beta/button.tsx index 9f68412726e..6bab675de85 100644 --- a/libs/@hashintel/ds-components/src/beta/button/button.tsx +++ b/libs/@hashintel/ds-components/src/beta/button.tsx @@ -4,12 +4,12 @@ import { ark } from "@ark-ui/react/factory"; import { createContext, mergeProps } from "@ark-ui/react/utils"; -import { styled } from "@hashintel/ds-helpers/jsx"; -import { button, type ButtonVariantProps } from "@hashintel/ds-helpers/recipes"; -import { type ComponentProps, forwardRef, useMemo } from "react"; +import { type HTMLStyledProps, styled } from "@hashintel/ds-helpers/jsx"; +import { forwardRef, useMemo } from "react"; -import { Group, type GroupProps } from "../group/group"; -import { Loader } from "../loader/loader"; +import { buttonRecipe, type ButtonRecipeProps } from "./button.recipe"; +import { Group, type GroupProps } from "./group"; +import { Loader } from "./loader"; interface ButtonLoadingProps { /** @@ -32,10 +32,18 @@ interface ButtonLoadingProps { spinnerPlacement?: "start" | "end" | undefined; } -type BaseButtonProps = ComponentProps; -const BaseButton = styled(ark.button, button); +interface ButtonCompositionProps { + asChild?: boolean | undefined; +} + +const BaseButton = styled(ark.button, buttonRecipe); +type BaseButtonProps = HTMLStyledProps<"button"> & + NonNullable; -export interface ButtonProps extends BaseButtonProps, ButtonLoadingProps {} +export interface ButtonProps + extends BaseButtonProps, + ButtonCompositionProps, + ButtonLoadingProps {} export const Button = forwardRef( (props, ref) => { @@ -77,12 +85,12 @@ export const Button = forwardRef( }, ); -export interface ButtonGroupProps extends GroupProps, ButtonVariantProps {} +export type ButtonGroupProps = GroupProps & NonNullable; export const ButtonGroup = forwardRef( (props, ref) => { const [variantProps, otherProps] = useMemo( - () => button.splitVariantProps(props), + () => buttonRecipe.splitVariantProps(props), [props], ); return ( @@ -93,10 +101,11 @@ export const ButtonGroup = forwardRef( }, ); -const [ButtonPropsProvider, useButtonPropsContext] = - createContext({ - name: "ButtonPropsContext", - hookName: "useButtonPropsContext", - providerName: "", - strict: false, - }); +const [ButtonPropsProvider, useButtonPropsContext] = createContext< + NonNullable +>({ + name: "ButtonPropsContext", + hookName: "useButtonPropsContext", + providerName: "", + strict: false, +}); diff --git a/libs/@hashintel/ds-components/src/beta/button/as-link.story.tsx b/libs/@hashintel/ds-components/src/beta/button/as-link.story.tsx index e1df31e695a..4bb5939ee97 100644 --- a/libs/@hashintel/ds-components/src/beta/button/as-link.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/as-link.story.tsx @@ -1,4 +1,4 @@ -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/button/attached.story.tsx b/libs/@hashintel/ds-components/src/beta/button/attached.story.tsx index 01512fd69a0..008f9e98fb3 100644 --- a/libs/@hashintel/ds-components/src/beta/button/attached.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/attached.story.tsx @@ -1,7 +1,7 @@ import { ChevronDownIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Button, ButtonGroup } from "./button"; +import { Button, ButtonGroup } from "../button"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/button/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/button/basic.story.tsx index 0fba8b36bd9..245530db4c7 100644 --- a/libs/@hashintel/ds-components/src/beta/button/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/basic.story.tsx @@ -1,4 +1,4 @@ -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/button/button.stories.ts b/libs/@hashintel/ds-components/src/beta/button/button.stories.ts deleted file mode 100644 index dfd88f6710d..00000000000 --- a/libs/@hashintel/ds-components/src/beta/button/button.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -export default { title: "Primitives/Button" }; - -export { App as asLink } from "./as-link.story"; -export { App as attached } from "./attached.story"; -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as disabled } from "./disabled.story"; -export { App as group } from "./group.story"; -export { App as icon } from "./icon.story"; -export { App as loading } from "./loading.story"; -export { App as ref } from "./ref.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/button/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/button/colors.story.tsx index cd5eaef8b43..37a884025d2 100644 --- a/libs/@hashintel/ds-components/src/beta/button/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/colors.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/button/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/button/disabled.story.tsx index 96d4d81ae18..1b2874e2ac4 100644 --- a/libs/@hashintel/ds-components/src/beta/button/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/disabled.story.tsx @@ -1,4 +1,4 @@ -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/button/group.story.tsx b/libs/@hashintel/ds-components/src/beta/button/group.story.tsx index 2a2630fb882..61433b4594d 100644 --- a/libs/@hashintel/ds-components/src/beta/button/group.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/group.story.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonGroup } from "./button"; +import { Button, ButtonGroup } from "../button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/button/icon.story.tsx b/libs/@hashintel/ds-components/src/beta/button/icon.story.tsx index 451d90e8ae6..ac6776d3101 100644 --- a/libs/@hashintel/ds-components/src/beta/button/icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/icon.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { PhoneIcon, SendIcon } from "lucide-react"; -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/button/loading.story.tsx b/libs/@hashintel/ds-components/src/beta/button/loading.story.tsx index b8cd4021392..cb8fb64c1de 100644 --- a/libs/@hashintel/ds-components/src/beta/button/loading.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/loading.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/button/ref.story.tsx b/libs/@hashintel/ds-components/src/beta/button/ref.story.tsx index cfe627ecfc1..d6300a27492 100644 --- a/libs/@hashintel/ds-components/src/beta/button/ref.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/ref.story.tsx @@ -2,7 +2,7 @@ import { useRef } from "react"; -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { const ref = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/button/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/button/sizes.story.tsx index 100348b0b14..503c5e40da2 100644 --- a/libs/@hashintel/ds-components/src/beta/button/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/sizes.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { CircleDotIcon } from "lucide-react"; -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl", "2xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/button/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/button/variants.story.tsx index 63d35a873cc..394ec513d60 100644 --- a/libs/@hashintel/ds-components/src/beta/button/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/button/variants.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "./button"; +import { Button } from "../button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/card/card.recipe.ts b/libs/@hashintel/ds-components/src/beta/card.recipe.ts similarity index 74% rename from libs/@hashintel/ds-components/src/beta/card/card.recipe.ts rename to libs/@hashintel/ds-components/src/beta/card.recipe.ts index c7f660f0f58..ebaedbc45e3 100644 --- a/libs/@hashintel/ds-components/src/beta/card/card.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/card.recipe.ts @@ -1,6 +1,6 @@ -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const card = defineSlotRecipe({ +const cardSlotRecipeDefinition = { className: "card", slots: ["root", "header", "body", "footer", "title", "description"], base: { @@ -65,4 +65,9 @@ export const card = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const cardSlotRecipe = sva(cardSlotRecipeDefinition); + +export type CardSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/card.stories.ts b/libs/@hashintel/ds-components/src/beta/card.stories.ts new file mode 100644 index 00000000000..40c77009167 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/card.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Card" }; + +export { App as avatar } from "./card/avatar.story"; +export { App as basic } from "./card/basic.story"; +export { App as form } from "./card/form.story"; +export { App as horizontal } from "./card/horizontal.story"; +export { App as image } from "./card/image.story"; +export { App as variants } from "./card/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/card/card.tsx b/libs/@hashintel/ds-components/src/beta/card.tsx similarity index 81% rename from libs/@hashintel/ds-components/src/beta/card/card.tsx rename to libs/@hashintel/ds-components/src/beta/card.tsx index d706ff8c833..375ced137dd 100644 --- a/libs/@hashintel/ds-components/src/beta/card/card.tsx +++ b/libs/@hashintel/ds-components/src/beta/card.tsx @@ -2,10 +2,11 @@ import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { card } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(card); +import { cardSlotRecipe } from "./card.recipe"; + +const { withProvider, withContext } = createStyleContext(cardSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(ark.div, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/card/avatar.story.tsx b/libs/@hashintel/ds-components/src/beta/card/avatar.story.tsx index 363a519d2ad..f7ad138e49f 100644 --- a/libs/@hashintel/ds-components/src/beta/card/avatar.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/card/avatar.story.tsx @@ -1,10 +1,10 @@ import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { CheckIcon, XIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import { Button } from "../button/button"; -import { Text } from "../text/text"; -import * as Card from "./card"; +import * as Avatar from "../avatar"; +import { Button } from "../button"; +import * as Card from "../card"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/card/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/card/basic.story.tsx index 11935f55ec7..9f2953789c6 100644 --- a/libs/@hashintel/ds-components/src/beta/card/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/card/basic.story.tsx @@ -1,7 +1,7 @@ import { Box } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Card from "./card"; +import { Button } from "../button"; +import * as Card from "../card"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/card/card.stories.ts b/libs/@hashintel/ds-components/src/beta/card/card.stories.ts deleted file mode 100644 index de79646eb86..00000000000 --- a/libs/@hashintel/ds-components/src/beta/card/card.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Card" }; - -export { App as avatar } from "./avatar.story"; -export { App as basic } from "./basic.story"; -export { App as form } from "./form.story"; -export { App as horizontal } from "./horizontal.story"; -export { App as image } from "./image.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/card/form.story.tsx b/libs/@hashintel/ds-components/src/beta/card/form.story.tsx index ca66f6d5745..d715c6faf89 100644 --- a/libs/@hashintel/ds-components/src/beta/card/form.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/card/form.story.tsx @@ -1,11 +1,11 @@ import { Divider, HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { GithubIcon, GitlabIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import { Text } from "../text/text"; -import * as Card from "./card"; +import { Button } from "../button"; +import * as Card from "../card"; +import * as Field from "../field"; +import { Input } from "../input"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/card/horizontal.story.tsx b/libs/@hashintel/ds-components/src/beta/card/horizontal.story.tsx index 4d9e8705590..618cfcdfb14 100644 --- a/libs/@hashintel/ds-components/src/beta/card/horizontal.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/card/horizontal.story.tsx @@ -1,9 +1,9 @@ import { Box, Wrap } from "@hashintel/ds-helpers/jsx"; -import { Badge } from "../badge/badge"; -import { Button } from "../button/button"; -import { Image } from "../image/image"; -import * as Card from "./card"; +import { Badge } from "../badge"; +import { Button } from "../button"; +import * as Card from "../card"; +import { Image } from "../image"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/card/image.story.tsx b/libs/@hashintel/ds-components/src/beta/card/image.story.tsx index 830a1b28dcf..776b36b47e0 100644 --- a/libs/@hashintel/ds-components/src/beta/card/image.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/card/image.story.tsx @@ -1,6 +1,6 @@ -import { Button } from "../button/button"; -import { Image } from "../image/image"; -import * as Card from "./card"; +import { Button } from "../button"; +import * as Card from "../card"; +import { Image } from "../image"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/card/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/card/variants.story.tsx index 0cfb884d841..b23d77609b0 100644 --- a/libs/@hashintel/ds-components/src/beta/card/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/card/variants.story.tsx @@ -1,7 +1,7 @@ import { Box, Grid } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Card from "./card"; +import { Button } from "../button"; +import * as Card from "../card"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/carousel/carousel.recipe.ts b/libs/@hashintel/ds-components/src/beta/carousel.recipe.ts similarity index 77% rename from libs/@hashintel/ds-components/src/beta/carousel/carousel.recipe.ts rename to libs/@hashintel/ds-components/src/beta/carousel.recipe.ts index fb7c1351759..0cbbe12486d 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/carousel.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/carousel.recipe.ts @@ -1,7 +1,7 @@ import { carouselAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const carousel = defineSlotRecipe({ +const carouselSlotRecipeDefinition = { className: "carousel", slots: carouselAnatomy.keys(), base: { @@ -72,4 +72,11 @@ export const carousel = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const carouselSlotRecipe = sva(carouselSlotRecipeDefinition); + +export type CarouselSlotRecipeProps = RecipeVariantProps< + typeof carouselSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/carousel.stories.ts b/libs/@hashintel/ds-components/src/beta/carousel.stories.ts new file mode 100644 index 00000000000..01136b74fc3 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/carousel.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Carousel" }; + +export { App as autoPlay } from "./carousel/auto-play.story"; +export { App as basic } from "./carousel/basic.story"; +export { App as images } from "./carousel/images.story"; +export { App as multiple } from "./carousel/multiple.story"; +export { App as scrollTo } from "./carousel/scroll-to.story"; +export { App as vertical } from "./carousel/vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/carousel/carousel.tsx b/libs/@hashintel/ds-components/src/beta/carousel.tsx similarity index 89% rename from libs/@hashintel/ds-components/src/beta/carousel/carousel.tsx rename to libs/@hashintel/ds-components/src/beta/carousel.tsx index 10270ea2aae..e23415eab76 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/carousel.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel.tsx @@ -4,10 +4,11 @@ import { Carousel, useCarouselContext } from "@ark-ui/react/carousel"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { carousel } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(carousel); +import { carouselSlotRecipe } from "./carousel.recipe"; + +const { withProvider, withContext } = createStyleContext(carouselSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Carousel.Root, "root", { @@ -34,11 +35,11 @@ export const IndicatorGroup = forwardRef< HTMLDivElement, ComponentProps >((props, ref) => { - const carousel = useCarouselContext(); + const carouselSlotRecipe = useCarouselContext(); return ( - {carousel.pageSnapPoints.map((_, index) => ( + {carouselSlotRecipe.pageSnapPoints.map((_, index) => ( ))} diff --git a/libs/@hashintel/ds-components/src/beta/carousel/auto-play.story.tsx b/libs/@hashintel/ds-components/src/beta/carousel/auto-play.story.tsx index 1a4d00bba76..ed83c90ceeb 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/auto-play.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel/auto-play.story.tsx @@ -1,9 +1,9 @@ import { Center } from "@hashintel/ds-helpers/jsx"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Text } from "../text/text"; -import * as Carousel from "./carousel"; +import * as Carousel from "../carousel"; +import { IconButton } from "../icon-button"; +import { Text } from "../text"; export const App = () => { const slides = 5; diff --git a/libs/@hashintel/ds-components/src/beta/carousel/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/carousel/basic.story.tsx index 12e02c4f0f7..f890f530276 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel/basic.story.tsx @@ -1,9 +1,9 @@ import { Center } from "@hashintel/ds-helpers/jsx"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Text } from "../text/text"; -import * as Carousel from "./carousel"; +import * as Carousel from "../carousel"; +import { IconButton } from "../icon-button"; +import { Text } from "../text"; export const App = () => { const slides = 5; diff --git a/libs/@hashintel/ds-components/src/beta/carousel/carousel.stories.ts b/libs/@hashintel/ds-components/src/beta/carousel/carousel.stories.ts deleted file mode 100644 index e01eb384b9f..00000000000 --- a/libs/@hashintel/ds-components/src/beta/carousel/carousel.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Carousel" }; - -export { App as autoPlay } from "./auto-play.story"; -export { App as basic } from "./basic.story"; -export { App as images } from "./images.story"; -export { App as multiple } from "./multiple.story"; -export { App as scrollTo } from "./scroll-to.story"; -export { App as vertical } from "./vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/carousel/images.story.tsx b/libs/@hashintel/ds-components/src/beta/carousel/images.story.tsx index 31b76864959..1434dbbf6e9 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/images.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel/images.story.tsx @@ -1,8 +1,8 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Image } from "../image/image"; -import * as Carousel from "./carousel"; +import * as Carousel from "../carousel"; +import { IconButton } from "../icon-button"; +import { Image } from "../image"; const images = [ "https://tinyurl.com/5b6ka8jd", diff --git a/libs/@hashintel/ds-components/src/beta/carousel/multiple.story.tsx b/libs/@hashintel/ds-components/src/beta/carousel/multiple.story.tsx index e120a1d5139..e4f6b54fdf4 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/multiple.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel/multiple.story.tsx @@ -1,9 +1,9 @@ import { Center } from "@hashintel/ds-helpers/jsx"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Text } from "../text/text"; -import * as Carousel from "./carousel"; +import * as Carousel from "../carousel"; +import { IconButton } from "../icon-button"; +import { Text } from "../text"; export const App = () => { const slides = 10; diff --git a/libs/@hashintel/ds-components/src/beta/carousel/scroll-to.story.tsx b/libs/@hashintel/ds-components/src/beta/carousel/scroll-to.story.tsx index f853430cc77..dd547e31ed3 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/scroll-to.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel/scroll-to.story.tsx @@ -4,10 +4,10 @@ import { useCarouselContext } from "@ark-ui/react/carousel"; import { Center } from "@hashintel/ds-helpers/jsx"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { Button } from "../button/button"; -import { IconButton } from "../icon-button/icon-button"; -import { Text } from "../text/text"; -import * as Carousel from "./carousel"; +import { Button } from "../button"; +import * as Carousel from "../carousel"; +import { IconButton } from "../icon-button"; +import { Text } from "../text"; const ScrollToTrigger = () => { const carousel = useCarouselContext(); diff --git a/libs/@hashintel/ds-components/src/beta/carousel/vertical.story.tsx b/libs/@hashintel/ds-components/src/beta/carousel/vertical.story.tsx index b3bb5af972f..e7f4c2918f4 100644 --- a/libs/@hashintel/ds-components/src/beta/carousel/vertical.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/carousel/vertical.story.tsx @@ -1,9 +1,9 @@ import { Center } from "@hashintel/ds-helpers/jsx"; import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Text } from "../text/text"; -import * as Carousel from "./carousel"; +import * as Carousel from "../carousel"; +import { IconButton } from "../icon-button"; +import { Text } from "../text"; export const App = () => { const slides = 5; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.recipe.ts b/libs/@hashintel/ds-components/src/beta/checkbox.recipe.ts similarity index 85% rename from libs/@hashintel/ds-components/src/beta/checkbox/checkbox.recipe.ts rename to libs/@hashintel/ds-components/src/beta/checkbox.recipe.ts index 82dc4ab132f..3adb0a08527 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/checkbox.recipe.ts @@ -1,7 +1,7 @@ import { checkboxAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const checkbox = defineSlotRecipe({ +const checkboxSlotRecipeDefinition = { slots: checkboxAnatomy.keys(), className: "checkbox", base: { @@ -105,4 +105,11 @@ export const checkbox = defineSlotRecipe({ variant: "solid", size: "md", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const checkboxSlotRecipe = sva(checkboxSlotRecipeDefinition); + +export type CheckboxSlotRecipeProps = RecipeVariantProps< + typeof checkboxSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox.stories.ts b/libs/@hashintel/ds-components/src/beta/checkbox.stories.ts new file mode 100644 index 00000000000..741600f599a --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/checkbox.stories.ts @@ -0,0 +1,13 @@ +export default { title: "Primitives/Checkbox" }; + +export { App as basic } from "./checkbox/basic.story"; +export { App as colors } from "./checkbox/colors.story"; +export { App as controlled } from "./checkbox/controlled.story"; +export { App as description } from "./checkbox/description.story"; +export { App as icon } from "./checkbox/icon.story"; +export { App as indeterminate } from "./checkbox/indeterminate.story"; +export { App as label } from "./checkbox/label.story"; +export { App as link } from "./checkbox/link.story"; +export { App as sizes } from "./checkbox/sizes.story"; +export { App as states } from "./checkbox/states.story"; +export { App as variants } from "./checkbox/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.tsx b/libs/@hashintel/ds-components/src/beta/checkbox.tsx similarity index 96% rename from libs/@hashintel/ds-components/src/beta/checkbox/checkbox.tsx rename to libs/@hashintel/ds-components/src/beta/checkbox.tsx index b258eb88473..767dd0625c5 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox.tsx @@ -4,11 +4,12 @@ import { Checkbox, useCheckboxContext } from "@ark-ui/react/checkbox"; import { createStyleContext, styled } from "@hashintel/ds-helpers/jsx"; -import { checkbox } from "@hashintel/ds-helpers/recipes"; import type { HTMLStyledProps } from "@hashintel/ds-helpers/types"; import { type ComponentProps, forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(checkbox); +import { checkboxSlotRecipe } from "./checkbox.recipe"; + +const { withProvider, withContext } = createStyleContext(checkboxSlotRecipe); export type RootProps = ComponentProps; export type HiddenInputProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/basic.story.tsx index 7e0e285e7b8..612c7689f1b 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.stories.ts b/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.stories.ts deleted file mode 100644 index cb2d5849095..00000000000 --- a/libs/@hashintel/ds-components/src/beta/checkbox/checkbox.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -export default { title: "Primitives/Checkbox" }; - -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as controlled } from "./controlled.story"; -export { App as description } from "./description.story"; -export { App as icon } from "./icon.story"; -export { App as indeterminate } from "./indeterminate.story"; -export { App as label } from "./label.story"; -export { App as link } from "./link.story"; -export { App as sizes } from "./sizes.story"; -export { App as states } from "./states.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/closed.story.tsx index 959f38fe8b0..ae90f480c1a 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/closed.story.tsx @@ -1,7 +1,7 @@ import { VisuallyHidden } from "@hashintel/ds-helpers/jsx"; import { forwardRef } from "react"; -import * as StyledCheckbox from "./checkbox"; +import * as StyledCheckbox from "../checkbox"; export type { CheckboxCheckedState } from "@ark-ui/react/checkbox"; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/colors.story.tsx index adbf805714a..c3679cc2375 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/colors.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { const colors = ["blue", "green", "amber", "red"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/controlled.story.tsx index 5dfb990ff69..484591eafbd 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { const [checked, setChecked] = useState(false); diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/description.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/description.story.tsx index 335602296aa..bc6d37f748f 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/description.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/description.story.tsx @@ -1,7 +1,7 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Text } from "../text/text"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/icon.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/icon.story.tsx index 60cf8d3b6c9..0a149c74354 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/icon.story.tsx @@ -1,6 +1,6 @@ import { PlusIcon } from "lucide-react"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/indeterminate.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/indeterminate.story.tsx index febadbd6899..93f634e5482 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/indeterminate.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/indeterminate.story.tsx @@ -3,7 +3,7 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { useState } from "react"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { const initialValues = [ diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/label.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/label.story.tsx index de74a9c35a5..4f01be1f7d1 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/label.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/label.story.tsx @@ -1,4 +1,4 @@ -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/link.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/link.story.tsx index ba3eee51ae5..dc0407ac37b 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/link.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/link.story.tsx @@ -1,5 +1,5 @@ -import { Link } from "../link/link"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; +import { Link } from "../link"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/sizes.story.tsx index 944afb243f5..4d7296d8cb3 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { const sizes = ["sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/states.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/states.story.tsx index 4050fe5ae81..a6a4defbcb9 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/states.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/states.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/checkbox/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/checkbox/variants.story.tsx index 1b452fcbd15..3ec1566063c 100644 --- a/libs/@hashintel/ds-components/src/beta/checkbox/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/checkbox/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Checkbox from "./checkbox"; +import * as Checkbox from "../checkbox"; export const App = () => { const variants = ["solid", "surface", "subtle", "outline", "plain"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/clipboard.recipe.ts b/libs/@hashintel/ds-components/src/beta/clipboard.recipe.ts new file mode 100644 index 00000000000..2fa6ba94871 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/clipboard.recipe.ts @@ -0,0 +1,28 @@ +import { clipboardAnatomy } from "@ark-ui/react/anatomy"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; + +const clipboardSlotRecipeDefinition = { + className: "clipboard", + slots: clipboardAnatomy.keys(), + base: { + root: { + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + gap: "1.5", + }, + label: { + fontWeight: "medium", + textStyle: "sm", + color: "fg.default", + gap: "0.5", + }, + }, +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const clipboardSlotRecipe = sva(clipboardSlotRecipeDefinition); + +export type ClipboardSlotRecipeProps = RecipeVariantProps< + typeof clipboardSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/clipboard.stories.ts b/libs/@hashintel/ds-components/src/beta/clipboard.stories.ts new file mode 100644 index 00000000000..11e823ce0e2 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/clipboard.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Clipboard" }; + +export { App as basic } from "./clipboard/basic.story"; +export { App as button } from "./clipboard/button.story"; +export { App as input } from "./clipboard/input.story"; +export { App as timeout } from "./clipboard/timeout.story"; diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.tsx b/libs/@hashintel/ds-components/src/beta/clipboard.tsx similarity index 95% rename from libs/@hashintel/ds-components/src/beta/clipboard/clipboard.tsx rename to libs/@hashintel/ds-components/src/beta/clipboard.tsx index 5fb0bfe8425..d95584f12ae 100644 --- a/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.tsx +++ b/libs/@hashintel/ds-components/src/beta/clipboard.tsx @@ -4,11 +4,12 @@ import { Clipboard } from "@ark-ui/react/clipboard"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { clipboard } from "@hashintel/ds-helpers/recipes"; import { CheckIcon, CopyIcon } from "lucide-react"; import { type ComponentProps, forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(clipboard); +import { clipboardSlotRecipe } from "./clipboard.recipe"; + +const { withProvider, withContext } = createStyleContext(clipboardSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Clipboard.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/clipboard/basic.story.tsx index 24602880717..84355ec2a69 100644 --- a/libs/@hashintel/ds-components/src/beta/clipboard/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/clipboard/basic.story.tsx @@ -1,5 +1,5 @@ -import { IconButton } from "../icon-button/icon-button"; -import * as Clipboard from "./clipboard"; +import * as Clipboard from "../clipboard"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/button.story.tsx b/libs/@hashintel/ds-components/src/beta/clipboard/button.story.tsx index 5eb81637412..21eb50684af 100644 --- a/libs/@hashintel/ds-components/src/beta/clipboard/button.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/clipboard/button.story.tsx @@ -1,5 +1,5 @@ -import { Button } from "../button/button"; -import * as Clipboard from "./clipboard"; +import { Button } from "../button"; +import * as Clipboard from "../clipboard"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.recipe.ts b/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.recipe.ts deleted file mode 100644 index 744835ebb25..00000000000 --- a/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.recipe.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { clipboardAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; - -export const clipboard = defineSlotRecipe({ - className: "clipboard", - slots: clipboardAnatomy.keys(), - base: { - root: { - display: "flex", - flexDirection: "column", - alignItems: "flex-start", - gap: "1.5", - }, - label: { - fontWeight: "medium", - textStyle: "sm", - color: "fg.default", - gap: "0.5", - }, - }, -}); diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.stories.ts b/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.stories.ts deleted file mode 100644 index 3ded9e6a1e6..00000000000 --- a/libs/@hashintel/ds-components/src/beta/clipboard/clipboard.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Clipboard" }; - -export { App as basic } from "./basic.story"; -export { App as button } from "./button.story"; -export { App as input } from "./input.story"; -export { App as timeout } from "./timeout.story"; diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/input.story.tsx b/libs/@hashintel/ds-components/src/beta/clipboard/input.story.tsx index 55d8b078304..7d079c4b360 100644 --- a/libs/@hashintel/ds-components/src/beta/clipboard/input.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/clipboard/input.story.tsx @@ -1,7 +1,7 @@ -import { IconButton } from "../icon-button/icon-button"; -import { Input } from "../input/input"; -import { InputGroup } from "../input-group/input-group"; -import * as Clipboard from "./clipboard"; +import * as Clipboard from "../clipboard"; +import { IconButton } from "../icon-button"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; const ClipboardIconButton = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/clipboard/timeout.story.tsx b/libs/@hashintel/ds-components/src/beta/clipboard/timeout.story.tsx index 1530872d499..35f8b852c70 100644 --- a/libs/@hashintel/ds-components/src/beta/clipboard/timeout.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/clipboard/timeout.story.tsx @@ -1,5 +1,5 @@ -import { IconButton } from "../icon-button/icon-button"; -import * as Clipboard from "./clipboard"; +import * as Clipboard from "../clipboard"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/close-button.stories.ts b/libs/@hashintel/ds-components/src/beta/close-button.stories.ts new file mode 100644 index 00000000000..dadcbf09ef9 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/close-button.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/CloseButton" }; + +export { App as basic } from "./close-button/basic.story"; +export { App as customIcon } from "./close-button/custom-icon.story"; +export { App as sizes } from "./close-button/sizes.story"; +export { App as variants } from "./close-button/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/close-button/close-button.tsx b/libs/@hashintel/ds-components/src/beta/close-button.tsx similarity index 90% rename from libs/@hashintel/ds-components/src/beta/close-button/close-button.tsx rename to libs/@hashintel/ds-components/src/beta/close-button.tsx index 707dcff2c39..741a01a29e3 100644 --- a/libs/@hashintel/ds-components/src/beta/close-button/close-button.tsx +++ b/libs/@hashintel/ds-components/src/beta/close-button.tsx @@ -3,7 +3,7 @@ import { XIcon } from "lucide-react"; import { forwardRef } from "react"; -import { IconButton, type IconButtonProps } from "../icon-button/icon-button"; +import { IconButton, type IconButtonProps } from "./icon-button"; export type CloseButtonProps = IconButtonProps; diff --git a/libs/@hashintel/ds-components/src/beta/close-button/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/close-button/basic.story.tsx index 789ec3e564e..e086bdff6c8 100644 --- a/libs/@hashintel/ds-components/src/beta/close-button/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/close-button/basic.story.tsx @@ -1,4 +1,4 @@ -import { CloseButton } from "./close-button"; +import { CloseButton } from "../close-button"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/close-button/close-button.stories.ts b/libs/@hashintel/ds-components/src/beta/close-button/close-button.stories.ts deleted file mode 100644 index 7736a1a0213..00000000000 --- a/libs/@hashintel/ds-components/src/beta/close-button/close-button.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/CloseButton" }; - -export { App as basic } from "./basic.story"; -export { App as customIcon } from "./custom-icon.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/close-button/custom-icon.story.tsx b/libs/@hashintel/ds-components/src/beta/close-button/custom-icon.story.tsx index b02f0480313..79e611d1dcd 100644 --- a/libs/@hashintel/ds-components/src/beta/close-button/custom-icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/close-button/custom-icon.story.tsx @@ -1,6 +1,6 @@ import { XCircleIcon } from "lucide-react"; -import { CloseButton } from "./close-button"; +import { CloseButton } from "../close-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/close-button/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/close-button/sizes.story.tsx index 9f4bdd4c4a4..371d780f80f 100644 --- a/libs/@hashintel/ds-components/src/beta/close-button/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/close-button/sizes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { CloseButton } from "./close-button"; +import { CloseButton } from "../close-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/close-button/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/close-button/variants.story.tsx index 53b860def04..603aa8c16b8 100644 --- a/libs/@hashintel/ds-components/src/beta/close-button/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/close-button/variants.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { CloseButton } from "./close-button"; +import { CloseButton } from "../close-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/code/code.recipe.ts b/libs/@hashintel/ds-components/src/beta/code.recipe.ts similarity index 77% rename from libs/@hashintel/ds-components/src/beta/code/code.recipe.ts rename to libs/@hashintel/ds-components/src/beta/code.recipe.ts index e9dc22b644f..9fc1c1a8596 100644 --- a/libs/@hashintel/ds-components/src/beta/code/code.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/code.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const code = defineRecipe({ +const codeRecipeDefinition = { className: "code", base: { alignItems: "center", @@ -48,4 +48,9 @@ export const code = defineRecipe({ xl: { textStyle: "md", height: "6", minWidth: "6", px: "1" }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const codeRecipe = cva(codeRecipeDefinition); + +export type CodeRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/code.stories.ts b/libs/@hashintel/ds-components/src/beta/code.stories.ts new file mode 100644 index 00000000000..aa25488a6be --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/code.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Code" }; + +export { App as basic } from "./code/basic.story"; +export { App as colors } from "./code/colors.story"; +export { App as sizes } from "./code/sizes.story"; +export { App as variants } from "./code/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/code/code.tsx b/libs/@hashintel/ds-components/src/beta/code.tsx similarity index 66% rename from libs/@hashintel/ds-components/src/beta/code/code.tsx rename to libs/@hashintel/ds-components/src/beta/code.tsx index 4bf4aef336a..5d5f69b6a25 100644 --- a/libs/@hashintel/ds-components/src/beta/code/code.tsx +++ b/libs/@hashintel/ds-components/src/beta/code.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { code } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { codeRecipe } from "./code.recipe"; + export type CodeProps = ComponentProps; -export const Code = styled(ark.code, code); +export const Code = styled(ark.code, codeRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/code/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/code/basic.story.tsx index aeda7ebb332..bbeb07cef45 100644 --- a/libs/@hashintel/ds-components/src/beta/code/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/code/basic.story.tsx @@ -1,4 +1,4 @@ -import { Code } from "./code"; +import { Code } from "../code"; export const App = () => { return {`console.log("Hello, world!")`}; diff --git a/libs/@hashintel/ds-components/src/beta/code/code.stories.ts b/libs/@hashintel/ds-components/src/beta/code/code.stories.ts deleted file mode 100644 index be66a9d749f..00000000000 --- a/libs/@hashintel/ds-components/src/beta/code/code.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Code" }; - -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/code/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/code/colors.story.tsx index a64f2e6aaef..9d7b9cd79f2 100644 --- a/libs/@hashintel/ds-components/src/beta/code/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/code/colors.story.tsx @@ -1,6 +1,6 @@ import { Stack, Wrap } from "@hashintel/ds-helpers/jsx"; -import { Code } from "./code"; +import { Code } from "../code"; export const App = () => { const colors = ["blue", "green", "amber", "red"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/code/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/code/sizes.story.tsx index e30dac0ce62..5b2efb325f4 100644 --- a/libs/@hashintel/ds-components/src/beta/code/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/code/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Code } from "./code"; +import { Code } from "../code"; export const App = () => { const sizes = ["sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/code/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/code/variants.story.tsx index 77c3092d494..36324295de3 100644 --- a/libs/@hashintel/ds-components/src/beta/code/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/code/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Code } from "./code"; +import { Code } from "../code"; export const App = () => { const variants = ["solid", "surface", "outline", "subtle", "plain"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.recipe.ts b/libs/@hashintel/ds-components/src/beta/collapsible.recipe.ts similarity index 57% rename from libs/@hashintel/ds-components/src/beta/collapsible/collapsible.recipe.ts rename to libs/@hashintel/ds-components/src/beta/collapsible.recipe.ts index 5a741a93528..9b59562facf 100644 --- a/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/collapsible.recipe.ts @@ -1,7 +1,7 @@ import { collapsibleAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const collapsible = defineSlotRecipe({ +const collapsibleSlotRecipeDefinition = { className: "collapsible", slots: collapsibleAnatomy.keys(), base: { @@ -17,4 +17,10 @@ export const collapsible = defineSlotRecipe({ }, }, }, -}); +} as const; + +export const collapsibleSlotRecipe = sva(collapsibleSlotRecipeDefinition); + +export type CollapsibleSlotRecipeProps = RecipeVariantProps< + typeof collapsibleSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/collapsible.stories.ts b/libs/@hashintel/ds-components/src/beta/collapsible.stories.ts new file mode 100644 index 00000000000..b0d5d7fe498 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/collapsible.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/Collapsible" }; + +export { App as basic } from "./collapsible/basic.story"; +export { App as lazyMount } from "./collapsible/lazy-mount.story"; +export { App as unmountOnExit } from "./collapsible/unmount-on-exit.story"; diff --git a/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.tsx b/libs/@hashintel/ds-components/src/beta/collapsible.tsx similarity index 90% rename from libs/@hashintel/ds-components/src/beta/collapsible/collapsible.tsx rename to libs/@hashintel/ds-components/src/beta/collapsible.tsx index 9720b299aae..6792b432d42 100644 --- a/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.tsx +++ b/libs/@hashintel/ds-components/src/beta/collapsible.tsx @@ -2,10 +2,11 @@ import { Collapsible } from "@ark-ui/react/collapsible"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { collapsible } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(collapsible); +import { collapsibleSlotRecipe } from "./collapsible.recipe"; + +const { withProvider, withContext } = createStyleContext(collapsibleSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Collapsible.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/collapsible/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/collapsible/basic.story.tsx index 05e97178238..c4a2eeab909 100644 --- a/libs/@hashintel/ds-components/src/beta/collapsible/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/collapsible/basic.story.tsx @@ -1,7 +1,7 @@ import { Box } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Collapsible from "./collapsible"; +import { Button } from "../button"; +import * as Collapsible from "../collapsible"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.stories.ts b/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.stories.ts deleted file mode 100644 index aa85cc9b55d..00000000000 --- a/libs/@hashintel/ds-components/src/beta/collapsible/collapsible.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/Collapsible" }; - -export { App as basic } from "./basic.story"; -export { App as lazyMount } from "./lazy-mount.story"; -export { App as unmountOnExit } from "./unmount-on-exit.story"; diff --git a/libs/@hashintel/ds-components/src/beta/collapsible/lazy-mount.story.tsx b/libs/@hashintel/ds-components/src/beta/collapsible/lazy-mount.story.tsx index de4e0bd9478..bd9a41fd4da 100644 --- a/libs/@hashintel/ds-components/src/beta/collapsible/lazy-mount.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/collapsible/lazy-mount.story.tsx @@ -1,7 +1,7 @@ import { Box } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Collapsible from "./collapsible"; +import { Button } from "../button"; +import * as Collapsible from "../collapsible"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/collapsible/unmount-on-exit.story.tsx b/libs/@hashintel/ds-components/src/beta/collapsible/unmount-on-exit.story.tsx index 630b0bf4a70..3915b245272 100644 --- a/libs/@hashintel/ds-components/src/beta/collapsible/unmount-on-exit.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/collapsible/unmount-on-exit.story.tsx @@ -1,7 +1,7 @@ import { Box } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Collapsible from "./collapsible"; +import { Button } from "../button"; +import * as Collapsible from "../collapsible"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.recipe.ts b/libs/@hashintel/ds-components/src/beta/color-picker.recipe.ts similarity index 81% rename from libs/@hashintel/ds-components/src/beta/color-picker/color-picker.recipe.ts rename to libs/@hashintel/ds-components/src/beta/color-picker.recipe.ts index 7626b832330..b6cb1968e4f 100644 --- a/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/color-picker.recipe.ts @@ -1,7 +1,7 @@ import { colorPickerAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const colorPicker = defineSlotRecipe({ +const colorPickerSlotRecipeDefinition = { className: "color-picker", slots: colorPickerAnatomy.keys(), base: { @@ -86,4 +86,11 @@ export const colorPicker = defineSlotRecipe({ borderRadius: "l2", }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const colorPickerSlotRecipe = sva(colorPickerSlotRecipeDefinition); + +export type ColorPickerSlotRecipeProps = RecipeVariantProps< + typeof colorPickerSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/color-picker.stories.ts b/libs/@hashintel/ds-components/src/beta/color-picker.stories.ts new file mode 100644 index 00000000000..6f21590dd07 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/color-picker.stories.ts @@ -0,0 +1,3 @@ +export default { title: "Primitives/ColorPicker" }; + +export { App as basic } from "./color-picker/basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.tsx b/libs/@hashintel/ds-components/src/beta/color-picker.tsx similarity index 97% rename from libs/@hashintel/ds-components/src/beta/color-picker/color-picker.tsx rename to libs/@hashintel/ds-components/src/beta/color-picker.tsx index 4481e2fbc78..0d8248156a7 100644 --- a/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.tsx +++ b/libs/@hashintel/ds-components/src/beta/color-picker.tsx @@ -2,10 +2,11 @@ import { ColorPicker } from "@ark-ui/react/color-picker"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { colorPicker } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(colorPicker); +import { colorPickerSlotRecipe } from "./color-picker.recipe"; + +const { withProvider, withContext } = createStyleContext(colorPickerSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(ColorPicker.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/color-picker/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/color-picker/basic.story.tsx index ee048e3e3c8..8663a586574 100644 --- a/libs/@hashintel/ds-components/src/beta/color-picker/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/color-picker/basic.story.tsx @@ -2,7 +2,7 @@ import { parseColor } from "@ark-ui/react/color-picker"; -import * as ColorPicker from "./color-picker"; +import * as ColorPicker from "../color-picker"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.stories.ts b/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.stories.ts deleted file mode 100644 index c1db8654a19..00000000000 --- a/libs/@hashintel/ds-components/src/beta/color-picker/color-picker.stories.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { title: "Primitives/ColorPicker" }; - -export { App as basic } from "./basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/combobox/combobox.recipe.ts b/libs/@hashintel/ds-components/src/beta/combobox.recipe.ts similarity index 83% rename from libs/@hashintel/ds-components/src/beta/combobox/combobox.recipe.ts rename to libs/@hashintel/ds-components/src/beta/combobox.recipe.ts index 82dec950341..382007cc278 100644 --- a/libs/@hashintel/ds-components/src/beta/combobox/combobox.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/combobox.recipe.ts @@ -1,9 +1,9 @@ import { comboboxAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -import { input } from "../input/input.recipe"; +import { inputRecipeConfig } from "./input.recipe"; -export const combobox = defineSlotRecipe({ +const comboboxSlotRecipeDefinition = { className: "combobox", slots: comboboxAnatomy.extendWith("indicatorGroup").keys(), base: { @@ -17,7 +17,7 @@ export const combobox = defineSlotRecipe({ textStyle: "label", }, input: { - ...input.base, + ...inputRecipeConfig.base, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", @@ -116,19 +116,19 @@ export const combobox = defineSlotRecipe({ variants: { variant: { outline: { - input: input.variants.variant.outline, + input: inputRecipeConfig.variants.variant.outline, }, surface: { - input: input.variants.variant.surface, + input: inputRecipeConfig.variants.variant.surface, }, subtle: { - input: input.variants.variant.subtle, + input: inputRecipeConfig.variants.variant.subtle, }, }, size: { xs: { input: { - ...input.variants.size.xs, + ...inputRecipeConfig.variants.size.xs, pe: "12", }, content: { p: "1", gap: "0.5", textStyle: "sm" }, @@ -140,7 +140,7 @@ export const combobox = defineSlotRecipe({ }, sm: { input: { - ...input.variants.size.sm, + ...inputRecipeConfig.variants.size.sm, pe: "14", }, content: { p: "1", gap: "0.5", textStyle: "sm" }, @@ -152,7 +152,7 @@ export const combobox = defineSlotRecipe({ }, md: { input: { - ...input.variants.size.md, + ...inputRecipeConfig.variants.size.md, pe: "14", }, content: { p: "1", gap: "0.5", textStyle: "md" }, @@ -164,7 +164,7 @@ export const combobox = defineSlotRecipe({ }, lg: { input: { - ...input.variants.size.lg, + ...inputRecipeConfig.variants.size.lg, pe: "16", }, content: { p: "1", gap: "0.5", textStyle: "md" }, @@ -176,7 +176,7 @@ export const combobox = defineSlotRecipe({ }, xl: { input: { - ...input.variants.size.xl, + ...inputRecipeConfig.variants.size.xl, pe: "16", }, content: { p: "1", gap: "1", textStyle: "lg" }, @@ -188,4 +188,11 @@ export const combobox = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const comboboxSlotRecipe = sva(comboboxSlotRecipeDefinition); + +export type ComboboxSlotRecipeProps = RecipeVariantProps< + typeof comboboxSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/combobox.stories.ts b/libs/@hashintel/ds-components/src/beta/combobox.stories.ts new file mode 100644 index 00000000000..7358f1edad6 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/combobox.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/Combobox" }; + +export { App as basic } from "./combobox/basic.story"; +export { App as sizes } from "./combobox/sizes.story"; +export { App as variants } from "./combobox/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/combobox/combobox.tsx b/libs/@hashintel/ds-components/src/beta/combobox.tsx similarity index 93% rename from libs/@hashintel/ds-components/src/beta/combobox/combobox.tsx rename to libs/@hashintel/ds-components/src/beta/combobox.tsx index a0a8952ba3a..06c1637b652 100644 --- a/libs/@hashintel/ds-components/src/beta/combobox/combobox.tsx +++ b/libs/@hashintel/ds-components/src/beta/combobox.tsx @@ -8,16 +8,17 @@ import { createStyleContext, type HTMLStyledProps, } from "@hashintel/ds-helpers/jsx"; -import { - combobox, - type ComboboxVariantProps, -} from "@hashintel/ds-helpers/recipes"; import { CheckIcon, ChevronsUpDownIcon, XIcon } from "lucide-react"; import { forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(combobox); +import { + comboboxSlotRecipe, + type ComboboxSlotRecipeProps, +} from "./combobox.recipe"; + +const { withProvider, withContext } = createStyleContext(comboboxSlotRecipe); -export type RootProps = HTMLStyledProps<"div"> & ComboboxVariantProps; +export type RootProps = HTMLStyledProps<"div"> & ComboboxSlotRecipeProps; export const Root = withProvider(Combobox.Root, "root", { defaultProps: { positioning: { sameWidth: false } }, diff --git a/libs/@hashintel/ds-components/src/beta/combobox/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/combobox/basic.story.tsx index 91bc4fb9089..5dbd7441e59 100644 --- a/libs/@hashintel/ds-components/src/beta/combobox/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/combobox/basic.story.tsx @@ -4,7 +4,7 @@ import { useListCollection } from "@ark-ui/react/collection"; import { useFilter } from "@ark-ui/react/locale"; import { Portal } from "@ark-ui/react/portal"; -import * as Combobox from "./combobox"; +import * as Combobox from "../combobox"; const frameworks = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/combobox/combobox.stories.ts b/libs/@hashintel/ds-components/src/beta/combobox/combobox.stories.ts deleted file mode 100644 index c55b3d3f48a..00000000000 --- a/libs/@hashintel/ds-components/src/beta/combobox/combobox.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/Combobox" }; - -export { App as basic } from "./basic.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/combobox/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/combobox/sizes.story.tsx index b3ca24a0fd5..a6f8ce2082f 100644 --- a/libs/@hashintel/ds-components/src/beta/combobox/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/combobox/sizes.story.tsx @@ -5,7 +5,7 @@ import { useFilter } from "@ark-ui/react/locale"; import { Portal } from "@ark-ui/react/portal"; import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Combobox from "./combobox"; +import * as Combobox from "../combobox"; const frameworks = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/combobox/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/combobox/variants.story.tsx index 378e1369c53..211968b7e9f 100644 --- a/libs/@hashintel/ds-components/src/beta/combobox/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/combobox/variants.story.tsx @@ -5,7 +5,7 @@ import { useFilter } from "@ark-ui/react/locale"; import { Portal } from "@ark-ui/react/portal"; import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Combobox from "./combobox"; +import * as Combobox from "../combobox"; const frameworks = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.recipe.ts b/libs/@hashintel/ds-components/src/beta/date-picker.recipe.ts similarity index 80% rename from libs/@hashintel/ds-components/src/beta/date-picker/date-picker.recipe.ts rename to libs/@hashintel/ds-components/src/beta/date-picker.recipe.ts index d798141f676..01073e4377f 100644 --- a/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/date-picker.recipe.ts @@ -1,7 +1,7 @@ import { datePickerAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const datePicker = defineSlotRecipe({ +const datePickerSlotRecipeDefinition = { className: "date-picker", slots: datePickerAnatomy.keys(), base: { @@ -88,4 +88,11 @@ export const datePicker = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const datePickerSlotRecipe = sva(datePickerSlotRecipeDefinition); + +export type DatePickerSlotRecipeProps = RecipeVariantProps< + typeof datePickerSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/date-picker.stories.ts b/libs/@hashintel/ds-components/src/beta/date-picker.stories.ts new file mode 100644 index 00000000000..1401322e453 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/date-picker.stories.ts @@ -0,0 +1,3 @@ +export default { title: "Primitives/DatePicker" }; + +export { App as basic } from "./date-picker/basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.tsx b/libs/@hashintel/ds-components/src/beta/date-picker.tsx similarity index 96% rename from libs/@hashintel/ds-components/src/beta/date-picker/date-picker.tsx rename to libs/@hashintel/ds-components/src/beta/date-picker.tsx index 553a85ac286..b25befbae0c 100644 --- a/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.tsx +++ b/libs/@hashintel/ds-components/src/beta/date-picker.tsx @@ -2,10 +2,11 @@ import { DatePicker } from "@ark-ui/react/date-picker"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { datePicker } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(datePicker); +import { datePickerSlotRecipe } from "./date-picker.recipe"; + +const { withProvider, withContext } = createStyleContext(datePickerSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(DatePicker.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/date-picker/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/date-picker/basic.story.tsx index b6381288e31..02cccfbd148 100644 --- a/libs/@hashintel/ds-components/src/beta/date-picker/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/date-picker/basic.story.tsx @@ -2,7 +2,7 @@ import { Portal } from "@ark-ui/react/portal"; -import * as DatePicker from "./date-picker"; +import * as DatePicker from "../date-picker"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.stories.ts b/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.stories.ts deleted file mode 100644 index b65b92a737b..00000000000 --- a/libs/@hashintel/ds-components/src/beta/date-picker/date-picker.stories.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { title: "Primitives/DatePicker" }; - -export { App as basic } from "./basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/dialog/dialog.recipe.ts b/libs/@hashintel/ds-components/src/beta/dialog.recipe.ts similarity index 92% rename from libs/@hashintel/ds-components/src/beta/dialog/dialog.recipe.ts rename to libs/@hashintel/ds-components/src/beta/dialog.recipe.ts index 39f9e1d8860..e94ff8cd296 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/dialog.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/dialog.recipe.ts @@ -1,7 +1,7 @@ import { dialogAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const dialog = defineSlotRecipe({ +const dialogSlotRecipeDefinition = { className: "dialog", slots: dialogAnatomy.extendWith("header", "body", "footer").keys(), base: { @@ -207,4 +207,9 @@ export const dialog = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const dialogSlotRecipe = sva(dialogSlotRecipeDefinition); + +export type DialogSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/dialog.stories.ts b/libs/@hashintel/ds-components/src/beta/dialog.stories.ts new file mode 100644 index 00000000000..2e6f870b0c7 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/dialog.stories.ts @@ -0,0 +1,16 @@ +export default { title: "Primitives/Dialog" }; + +export { App as alert } from "./dialog/alert.story"; +export { App as basic } from "./dialog/basic.story"; +export { App as controlled } from "./dialog/controlled.story"; +export { App as cover } from "./dialog/cover.story"; +export { App as fullscreen } from "./dialog/fullscreen.story"; +export { App as initialFocus } from "./dialog/initial-focus.story"; +export { App as insideScroll } from "./dialog/inside-scroll.story"; +export { App as motionPresets } from "./dialog/motion-presets.story"; +export { App as nested } from "./dialog/nested.story"; +export { App as nonModal } from "./dialog/non-modal.story"; +export { App as outsideScroll } from "./dialog/outside-scroll.story"; +export { App as placements } from "./dialog/placements.story"; +export { App as responsive } from "./dialog/responsive.story"; +export { App as sizes } from "./dialog/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/dialog/dialog.tsx b/libs/@hashintel/ds-components/src/beta/dialog.tsx similarity index 94% rename from libs/@hashintel/ds-components/src/beta/dialog/dialog.tsx rename to libs/@hashintel/ds-components/src/beta/dialog.tsx index a83473e84b7..b5cadbd7dd8 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/dialog.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog.tsx @@ -1,14 +1,13 @@ "use client"; -/* eslint-disable @typescript-eslint/no-shadow */ - import { Dialog, useDialogContext } from "@ark-ui/react/dialog"; import { ark } from "@ark-ui/react/factory"; import { createStyleContext, styled } from "@hashintel/ds-helpers/jsx"; -import { dialog } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, forwardRef } from "react"; -const { withRootProvider, withContext } = createStyleContext(dialog); +import { dialogSlotRecipe } from "./dialog.recipe"; + +const { withRootProvider, withContext } = createStyleContext(dialogSlotRecipe); export type RootProps = ComponentProps; export const Root = withRootProvider(Dialog.Root, { diff --git a/libs/@hashintel/ds-components/src/beta/dialog/alert.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/alert.story.tsx index 7008a5a9211..b503f8b7c8f 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/alert.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/alert.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/basic.story.tsx index c29a5cbabe5..c17fb19bf48 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/basic.story.tsx @@ -2,9 +2,9 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/controlled.story.tsx index e8666392fdb..82d7d60bf50 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/controlled.story.tsx @@ -3,9 +3,9 @@ import { Portal } from "@ark-ui/react/portal"; import { useState } from "react"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { const [open, setOpen] = useState(false); diff --git a/libs/@hashintel/ds-components/src/beta/dialog/cover.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/cover.story.tsx index 9c651f913d1..2094023097f 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/cover.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/cover.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/dialog.stories.ts b/libs/@hashintel/ds-components/src/beta/dialog/dialog.stories.ts deleted file mode 100644 index 3cb00e63386..00000000000 --- a/libs/@hashintel/ds-components/src/beta/dialog/dialog.stories.ts +++ /dev/null @@ -1,16 +0,0 @@ -export default { title: "Primitives/Dialog" }; - -export { App as alert } from "./alert.story"; -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as cover } from "./cover.story"; -export { App as fullscreen } from "./fullscreen.story"; -export { App as initialFocus } from "./initial-focus.story"; -export { App as insideScroll } from "./inside-scroll.story"; -export { App as motionPresets } from "./motion-presets.story"; -export { App as nested } from "./nested.story"; -export { App as nonModal } from "./non-modal.story"; -export { App as outsideScroll } from "./outside-scroll.story"; -export { App as placements } from "./placements.story"; -export { App as responsive } from "./responsive.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/dialog/fullscreen.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/fullscreen.story.tsx index fa476a4b264..10a1ff78084 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/fullscreen.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/fullscreen.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/initial-focus.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/initial-focus.story.tsx index cc657c36978..afdc15387d5 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/initial-focus.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/initial-focus.story.tsx @@ -3,11 +3,11 @@ import { Portal } from "@ark-ui/react/portal"; import { useRef } from "react"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { const ref = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/dialog/inside-scroll.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/inside-scroll.story.tsx index d81e77e3ebb..60acd0c0ad4 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/inside-scroll.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/inside-scroll.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { loremIpsum } from "lorem-ipsum"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/motion-presets.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/motion-presets.story.tsx index b742ae3317b..be84f7f1e12 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/motion-presets.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/motion-presets.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { const presets = ["scale", "slide-in-bottom", "slide-in-top", "none"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/dialog/nested.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/nested.story.tsx index ee34d65e0b5..e53e3d28663 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/nested.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/nested.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/non-modal.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/non-modal.story.tsx index bf2b69e10cf..b172bcb6990 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/non-modal.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/non-modal.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/outside-scroll.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/outside-scroll.story.tsx index 79d79947997..bfb5a3104e9 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/outside-scroll.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/outside-scroll.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { loremIpsum } from "lorem-ipsum"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/placements.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/placements.story.tsx index 762d0784c7f..35dd254a7e0 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/placements.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/placements.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { const placements = ["top", "center", "bottom"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/dialog/responsive.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/responsive.story.tsx index 64f855f4daf..e41ec56db82 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/responsive.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/responsive.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/dialog/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/dialog/sizes.story.tsx index cc51c3e1083..610f4dfb7f7 100644 --- a/libs/@hashintel/ds-components/src/beta/dialog/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/dialog/sizes.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "./dialog"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/display-value.stories.ts b/libs/@hashintel/ds-components/src/beta/display-value.stories.ts new file mode 100644 index 00000000000..fe3b5f0155b --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/display-value.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/DisplayValue" }; + +export { App as basic } from "./display-value/basic.story"; +export { App as withFormatting } from "./display-value/with-formatting.story"; +export { App as withNoValue } from "./display-value/with-no-value.story"; diff --git a/libs/@hashintel/ds-components/src/beta/display-value/display-value.tsx b/libs/@hashintel/ds-components/src/beta/display-value.tsx similarity index 96% rename from libs/@hashintel/ds-components/src/beta/display-value/display-value.tsx rename to libs/@hashintel/ds-components/src/beta/display-value.tsx index ada440b5091..2076c8fb881 100644 --- a/libs/@hashintel/ds-components/src/beta/display-value/display-value.tsx +++ b/libs/@hashintel/ds-components/src/beta/display-value.tsx @@ -4,7 +4,7 @@ import { VisuallyHidden } from "@hashintel/ds-helpers/jsx"; -import { Span } from "../span/span"; +import { Span } from "./span"; export interface DisplayValueProps { /** The value to display */ diff --git a/libs/@hashintel/ds-components/src/beta/display-value/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/display-value/basic.story.tsx index 488f264709b..eb41f5cb289 100644 --- a/libs/@hashintel/ds-components/src/beta/display-value/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/display-value/basic.story.tsx @@ -1,4 +1,4 @@ -import { DisplayValue } from "./display-value"; +import { DisplayValue } from "../display-value"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/display-value/display-value.stories.ts b/libs/@hashintel/ds-components/src/beta/display-value/display-value.stories.ts deleted file mode 100644 index b72383d70ad..00000000000 --- a/libs/@hashintel/ds-components/src/beta/display-value/display-value.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/DisplayValue" }; - -export { App as basic } from "./basic.story"; -export { App as withFormatting } from "./with-formatting.story"; -export { App as withNoValue } from "./with-no-value.story"; diff --git a/libs/@hashintel/ds-components/src/beta/display-value/with-formatting.story.tsx b/libs/@hashintel/ds-components/src/beta/display-value/with-formatting.story.tsx index 0a86100581c..817fcbbda3c 100644 --- a/libs/@hashintel/ds-components/src/beta/display-value/with-formatting.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/display-value/with-formatting.story.tsx @@ -2,8 +2,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Span } from "../span/span"; -import { DisplayValue } from "./display-value"; +import { DisplayValue } from "../display-value"; +import { Span } from "../span"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/display-value/with-no-value.story.tsx b/libs/@hashintel/ds-components/src/beta/display-value/with-no-value.story.tsx index ab57cbff9a2..5bc5ea1b8d9 100644 --- a/libs/@hashintel/ds-components/src/beta/display-value/with-no-value.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/display-value/with-no-value.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { DisplayValue } from "./display-value"; +import { DisplayValue } from "../display-value"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/drawer/drawer.recipe.ts b/libs/@hashintel/ds-components/src/beta/drawer.recipe.ts similarity index 91% rename from libs/@hashintel/ds-components/src/beta/drawer/drawer.recipe.ts rename to libs/@hashintel/ds-components/src/beta/drawer.recipe.ts index 7a58ee32078..b6a470995f8 100644 --- a/libs/@hashintel/ds-components/src/beta/drawer/drawer.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/drawer.recipe.ts @@ -1,7 +1,7 @@ import { dialogAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const drawer = defineSlotRecipe({ +const drawerSlotRecipeDefinition = { className: "drawer", slots: dialogAnatomy.extendWith("header", "body", "footer").keys(), base: { @@ -199,4 +199,9 @@ export const drawer = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const drawerSlotRecipe = sva(drawerSlotRecipeDefinition); + +export type DrawerSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/drawer.stories.ts b/libs/@hashintel/ds-components/src/beta/drawer.stories.ts new file mode 100644 index 00000000000..6ec5db82e42 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/drawer.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/Drawer" }; + +export { App as basic } from "./drawer/basic.story"; +export { App as placements } from "./drawer/placements.story"; +export { App as sizes } from "./drawer/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/drawer/drawer.tsx b/libs/@hashintel/ds-components/src/beta/drawer.tsx similarity index 94% rename from libs/@hashintel/ds-components/src/beta/drawer/drawer.tsx rename to libs/@hashintel/ds-components/src/beta/drawer.tsx index b627a871217..09f8154227a 100644 --- a/libs/@hashintel/ds-components/src/beta/drawer/drawer.tsx +++ b/libs/@hashintel/ds-components/src/beta/drawer.tsx @@ -3,10 +3,11 @@ import { Dialog } from "@ark-ui/react/dialog"; import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { drawer } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withRootProvider, withContext } = createStyleContext(drawer); +import { drawerSlotRecipe } from "./drawer.recipe"; + +const { withRootProvider, withContext } = createStyleContext(drawerSlotRecipe); export type RootProps = ComponentProps; export const Root = withRootProvider(Dialog.Root, { diff --git a/libs/@hashintel/ds-components/src/beta/drawer/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/drawer/basic.story.tsx index 0df220f038b..8b2595d0cd8 100644 --- a/libs/@hashintel/ds-components/src/beta/drawer/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/drawer/basic.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Drawer from "./drawer"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Drawer from "../drawer"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/drawer/drawer.stories.ts b/libs/@hashintel/ds-components/src/beta/drawer/drawer.stories.ts deleted file mode 100644 index c8d31350079..00000000000 --- a/libs/@hashintel/ds-components/src/beta/drawer/drawer.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/Drawer" }; - -export { App as basic } from "./basic.story"; -export { App as placements } from "./placements.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/drawer/placements.story.tsx b/libs/@hashintel/ds-components/src/beta/drawer/placements.story.tsx index 1fc0dea0da5..2eacb6a29b0 100644 --- a/libs/@hashintel/ds-components/src/beta/drawer/placements.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/drawer/placements.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Drawer from "./drawer"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Drawer from "../drawer"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/drawer/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/drawer/sizes.story.tsx index 05342fffb2a..3dcf3c9b1a3 100644 --- a/libs/@hashintel/ds-components/src/beta/drawer/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/drawer/sizes.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Drawer from "./drawer"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Drawer from "../drawer"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/editable/editable.recipe.ts b/libs/@hashintel/ds-components/src/beta/editable.recipe.ts similarity index 80% rename from libs/@hashintel/ds-components/src/beta/editable/editable.recipe.ts rename to libs/@hashintel/ds-components/src/beta/editable.recipe.ts index d1137cc9b8a..34a3c1f4b1e 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/editable.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/editable.recipe.ts @@ -1,7 +1,7 @@ import { editableAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const editable = defineSlotRecipe({ +const editableSlotRecipeDefinition = { slots: editableAnatomy.keys(), className: "editable", base: { @@ -71,4 +71,11 @@ export const editable = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const editableSlotRecipe = sva(editableSlotRecipeDefinition); + +export type EditableSlotRecipeProps = RecipeVariantProps< + typeof editableSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/editable.stories.ts b/libs/@hashintel/ds-components/src/beta/editable.stories.ts new file mode 100644 index 00000000000..44981f7b416 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/editable.stories.ts @@ -0,0 +1,7 @@ +export default { title: "Primitives/Editable" }; + +export { App as basic } from "./editable/basic.story"; +export { App as controlled } from "./editable/controlled.story"; +export { App as controls } from "./editable/controls.story"; +export { App as doubleClick } from "./editable/double-click.story"; +export { App as sizes } from "./editable/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/editable/editable.tsx b/libs/@hashintel/ds-components/src/beta/editable.tsx similarity index 93% rename from libs/@hashintel/ds-components/src/beta/editable/editable.tsx rename to libs/@hashintel/ds-components/src/beta/editable.tsx index 879f29106e2..3d39f586eba 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/editable.tsx +++ b/libs/@hashintel/ds-components/src/beta/editable.tsx @@ -2,10 +2,11 @@ import { Editable } from "@ark-ui/react/editable"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { editable } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(editable); +import { editableSlotRecipe } from "./editable.recipe"; + +const { withProvider, withContext } = createStyleContext(editableSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Editable.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/editable/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/editable/basic.story.tsx index 5b8e6c9c4c4..02e96088e24 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/editable/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Editable from "./editable"; +import * as Editable from "../editable"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/editable/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/editable/controlled.story.tsx index 6ff786d2db8..90e2e00c6e5 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/editable/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as Editable from "./editable"; +import * as Editable from "../editable"; export const App = () => { const [name, setName] = useState(""); diff --git a/libs/@hashintel/ds-components/src/beta/editable/controls.story.tsx b/libs/@hashintel/ds-components/src/beta/editable/controls.story.tsx index f0eb89e036b..6b4e2b73544 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/controls.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/editable/controls.story.tsx @@ -1,8 +1,8 @@ import { CheckIcon, EditIcon, XIcon } from "lucide-react"; -import { ButtonGroup } from "../button/button"; -import { IconButton } from "../icon-button/icon-button"; -import * as Editable from "./editable"; +import { ButtonGroup } from "../button"; +import * as Editable from "../editable"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/editable/double-click.story.tsx b/libs/@hashintel/ds-components/src/beta/editable/double-click.story.tsx index 39755465c6a..3e7e89ed986 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/double-click.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/editable/double-click.story.tsx @@ -1,4 +1,4 @@ -import * as Editable from "./editable"; +import * as Editable from "../editable"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/editable/editable.stories.ts b/libs/@hashintel/ds-components/src/beta/editable/editable.stories.ts deleted file mode 100644 index fa36a5ad012..00000000000 --- a/libs/@hashintel/ds-components/src/beta/editable/editable.stories.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { title: "Primitives/Editable" }; - -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as controls } from "./controls.story"; -export { App as doubleClick } from "./double-click.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/editable/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/editable/sizes.story.tsx index 6b84992d3be..dd011f398b0 100644 --- a/libs/@hashintel/ds-components/src/beta/editable/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/editable/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Editable from "./editable"; +import * as Editable from "../editable"; export const App = () => { const sizes = ["xs", "sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/field/field.recipe.ts b/libs/@hashintel/ds-components/src/beta/field.recipe.ts similarity index 64% rename from libs/@hashintel/ds-components/src/beta/field/field.recipe.ts rename to libs/@hashintel/ds-components/src/beta/field.recipe.ts index 7f7f7e3e1c5..38e1c61e9c5 100644 --- a/libs/@hashintel/ds-components/src/beta/field/field.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/field.recipe.ts @@ -1,7 +1,7 @@ import { fieldAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const field = defineSlotRecipe({ +const fieldSlotRecipeDefinition = { className: "field", slots: fieldAnatomy.keys(), base: { @@ -37,4 +37,9 @@ export const field = defineSlotRecipe({ textStyle: "sm", }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const fieldSlotRecipe = sva(fieldSlotRecipeDefinition); + +export type FieldSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/field.stories.ts b/libs/@hashintel/ds-components/src/beta/field.stories.ts new file mode 100644 index 00000000000..cfeac001e9f --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/field.stories.ts @@ -0,0 +1,7 @@ +export default { title: "Primitives/Field" }; + +export { App as basic } from "./field/basic.story"; +export { App as disabled } from "./field/disabled.story"; +export { App as helperText } from "./field/helper-text.story"; +export { App as invalid } from "./field/invalid.story"; +export { App as required } from "./field/required.story"; diff --git a/libs/@hashintel/ds-components/src/beta/field/field.tsx b/libs/@hashintel/ds-components/src/beta/field.tsx similarity index 84% rename from libs/@hashintel/ds-components/src/beta/field/field.tsx rename to libs/@hashintel/ds-components/src/beta/field.tsx index 7a94cec90df..10ecea31c55 100644 --- a/libs/@hashintel/ds-components/src/beta/field/field.tsx +++ b/libs/@hashintel/ds-components/src/beta/field.tsx @@ -2,10 +2,11 @@ import { Field } from "@ark-ui/react/field"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { field } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(field); +import { fieldSlotRecipe } from "./field.recipe"; + +const { withProvider, withContext } = createStyleContext(fieldSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Field.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/field/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/field/basic.story.tsx index 12f9704f634..4a373cbac52 100644 --- a/libs/@hashintel/ds-components/src/beta/field/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/field/basic.story.tsx @@ -1,5 +1,5 @@ -import { Input } from "../input/input"; -import * as Field from "./field"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/field/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/field/closed.story.tsx index c6969cbe50d..72a9190c2c1 100644 --- a/libs/@hashintel/ds-components/src/beta/field/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/field/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type ReactNode } from "react"; -import * as StyledField from "./field"; +import * as StyledField from "../field"; export interface FieldProps extends Omit { label?: ReactNode; diff --git a/libs/@hashintel/ds-components/src/beta/field/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/field/disabled.story.tsx index 33bdae5d548..eaa85d6d739 100644 --- a/libs/@hashintel/ds-components/src/beta/field/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/field/disabled.story.tsx @@ -1,5 +1,5 @@ -import { Input } from "../input/input"; -import * as Field from "./field"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/field/field.stories.ts b/libs/@hashintel/ds-components/src/beta/field/field.stories.ts deleted file mode 100644 index 4c07956cdbe..00000000000 --- a/libs/@hashintel/ds-components/src/beta/field/field.stories.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { title: "Primitives/Field" }; - -export { App as basic } from "./basic.story"; -export { App as disabled } from "./disabled.story"; -export { App as helperText } from "./helper-text.story"; -export { App as invalid } from "./invalid.story"; -export { App as required } from "./required.story"; diff --git a/libs/@hashintel/ds-components/src/beta/field/helper-text.story.tsx b/libs/@hashintel/ds-components/src/beta/field/helper-text.story.tsx index fe1673214d2..a8acf7e2b15 100644 --- a/libs/@hashintel/ds-components/src/beta/field/helper-text.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/field/helper-text.story.tsx @@ -1,5 +1,5 @@ -import { Input } from "../input/input"; -import * as Field from "./field"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/field/invalid.story.tsx b/libs/@hashintel/ds-components/src/beta/field/invalid.story.tsx index 1b732e89997..5eda85c566c 100644 --- a/libs/@hashintel/ds-components/src/beta/field/invalid.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/field/invalid.story.tsx @@ -1,5 +1,5 @@ -import { Input } from "../input/input"; -import * as Field from "./field"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/field/required.story.tsx b/libs/@hashintel/ds-components/src/beta/field/required.story.tsx index 602f44118b2..d9d122eedf4 100644 --- a/libs/@hashintel/ds-components/src/beta/field/required.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/field/required.story.tsx @@ -1,5 +1,5 @@ -import { Input } from "../input/input"; -import * as Field from "./field"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.recipe.ts b/libs/@hashintel/ds-components/src/beta/fieldset.recipe.ts similarity index 69% rename from libs/@hashintel/ds-components/src/beta/fieldset/fieldset.recipe.ts rename to libs/@hashintel/ds-components/src/beta/fieldset.recipe.ts index de00331cf81..5c17e5bbe7e 100644 --- a/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/fieldset.recipe.ts @@ -1,7 +1,7 @@ import { fieldsetAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const fieldset = defineSlotRecipe({ +const fieldsetSlotRecipeDefinition = { className: "fieldset", slots: fieldsetAnatomy.extendWith("content", "control").keys(), base: { @@ -43,4 +43,11 @@ export const fieldset = defineSlotRecipe({ textStyle: "sm", }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const fieldsetSlotRecipe = sva(fieldsetSlotRecipeDefinition); + +export type FieldsetSlotRecipeProps = RecipeVariantProps< + typeof fieldsetSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/fieldset.stories.ts b/libs/@hashintel/ds-components/src/beta/fieldset.stories.ts new file mode 100644 index 00000000000..895554a187f --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/fieldset.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/Fieldset" }; + +export { App as basic } from "./fieldset/basic.story"; +export { App as disabled } from "./fieldset/disabled.story"; +export { App as invalid } from "./fieldset/invalid.story"; diff --git a/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.tsx b/libs/@hashintel/ds-components/src/beta/fieldset.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/fieldset/fieldset.tsx rename to libs/@hashintel/ds-components/src/beta/fieldset.tsx index e57f9bb398d..ea3f06ea0a0 100644 --- a/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.tsx +++ b/libs/@hashintel/ds-components/src/beta/fieldset.tsx @@ -3,10 +3,11 @@ import { ark } from "@ark-ui/react/factory"; import { Fieldset } from "@ark-ui/react/fieldset"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { fieldset } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(fieldset); +import { fieldsetSlotRecipe } from "./fieldset.recipe"; + +const { withProvider, withContext } = createStyleContext(fieldsetSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Fieldset.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/fieldset/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/fieldset/basic.story.tsx index 023d8d4a071..ac6435cf0c9 100644 --- a/libs/@hashintel/ds-components/src/beta/fieldset/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/fieldset/basic.story.tsx @@ -1,6 +1,6 @@ -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import * as Fieldset from "./fieldset"; +import * as Field from "../field"; +import * as Fieldset from "../fieldset"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/fieldset/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/fieldset/disabled.story.tsx index a71e212eb10..5583844f011 100644 --- a/libs/@hashintel/ds-components/src/beta/fieldset/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/fieldset/disabled.story.tsx @@ -1,6 +1,6 @@ -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import * as Fieldset from "./fieldset"; +import * as Field from "../field"; +import * as Fieldset from "../fieldset"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.stories.ts b/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.stories.ts deleted file mode 100644 index a3031518125..00000000000 --- a/libs/@hashintel/ds-components/src/beta/fieldset/fieldset.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/Fieldset" }; - -export { App as basic } from "./basic.story"; -export { App as disabled } from "./disabled.story"; -export { App as invalid } from "./invalid.story"; diff --git a/libs/@hashintel/ds-components/src/beta/fieldset/invalid.story.tsx b/libs/@hashintel/ds-components/src/beta/fieldset/invalid.story.tsx index 1a2c1835296..962818a0494 100644 --- a/libs/@hashintel/ds-components/src/beta/fieldset/invalid.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/fieldset/invalid.story.tsx @@ -1,6 +1,6 @@ -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import * as Fieldset from "./fieldset"; +import * as Field from "../field"; +import * as Fieldset from "../fieldset"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.recipe.ts b/libs/@hashintel/ds-components/src/beta/file-upload.recipe.ts similarity index 81% rename from libs/@hashintel/ds-components/src/beta/file-upload/file-upload.recipe.ts rename to libs/@hashintel/ds-components/src/beta/file-upload.recipe.ts index 07015cf098f..4a076dd4aff 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/file-upload.recipe.ts @@ -1,7 +1,7 @@ import { fileUploadAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const fileUpload = defineSlotRecipe({ +const fileUploadSlotRecipeDefinition = { className: "file-upload", slots: fileUploadAnatomy.keys(), base: { @@ -82,4 +82,11 @@ export const fileUpload = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const fileUploadSlotRecipe = sva(fileUploadSlotRecipeDefinition); + +export type FileUploadSlotRecipeProps = RecipeVariantProps< + typeof fileUploadSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/file-upload.stories.ts b/libs/@hashintel/ds-components/src/beta/file-upload.stories.ts new file mode 100644 index 00000000000..54b25281f59 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/file-upload.stories.ts @@ -0,0 +1,10 @@ +export default { title: "Primitives/FileUpload" }; + +export { App as acceptedFiles } from "./file-upload/accepted-files.story"; +export { App as basic } from "./file-upload/basic.story"; +export { App as directory } from "./file-upload/directory.story"; +export { App as dropzone } from "./file-upload/dropzone.story"; +export { App as imagePreview } from "./file-upload/image-preview.story"; +export { App as maxFiles } from "./file-upload/max-files.story"; +export { App as mediaCapture } from "./file-upload/media-capture.story"; +export { App as withInput } from "./file-upload/with-input.story"; diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.tsx b/libs/@hashintel/ds-components/src/beta/file-upload.tsx similarity index 95% rename from libs/@hashintel/ds-components/src/beta/file-upload/file-upload.tsx rename to libs/@hashintel/ds-components/src/beta/file-upload.tsx index 1afeb00ae23..4aaf1baf6db 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload.tsx @@ -1,6 +1,6 @@ "use client"; -/* eslint-disable import/no-extraneous-dependencies, @typescript-eslint/no-shadow, @typescript-eslint/no-empty-object-type */ +/* eslint-disable import/no-extraneous-dependencies, @typescript-eslint/no-empty-object-type */ import { FileUpload, useFileUploadContext } from "@ark-ui/react/file-upload"; import { @@ -8,13 +8,13 @@ import { type HTMLStyledProps, Stack, } from "@hashintel/ds-helpers/jsx"; -import { fileUpload } from "@hashintel/ds-helpers/recipes"; import { FileIcon, XIcon } from "lucide-react"; import { type ComponentProps, forwardRef, useMemo } from "react"; -import { Span } from "../span/span"; +import { fileUploadSlotRecipe } from "./file-upload.recipe"; +import { Span } from "./span"; -const { withProvider, withContext } = createStyleContext(fileUpload); +const { withProvider, withContext } = createStyleContext(fileUploadSlotRecipe); export type RootProps = ComponentProps; export type ItemProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/accepted-files.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/accepted-files.story.tsx index 1643ee9c00d..2a3b7b5263d 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/accepted-files.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/accepted-files.story.tsx @@ -1,7 +1,7 @@ import { ImageUpIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as FileUpload from "./file-upload"; +import { Button } from "../button"; +import * as FileUpload from "../file-upload"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/basic.story.tsx index 826846967d5..09115b22166 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/basic.story.tsx @@ -1,7 +1,7 @@ import { UploadIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as FileUpload from "./file-upload"; +import { Button } from "../button"; +import * as FileUpload from "../file-upload"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/directory.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/directory.story.tsx index ef26ea84f1a..aed21ed575b 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/directory.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/directory.story.tsx @@ -1,7 +1,7 @@ import { FolderUpIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as FileUpload from "./file-upload"; +import { Button } from "../button"; +import * as FileUpload from "../file-upload"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/dropzone.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/dropzone.story.tsx index e86f977982c..ef404bb7be8 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/dropzone.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/dropzone.story.tsx @@ -1,8 +1,8 @@ import { Box } from "@hashintel/ds-helpers/jsx"; import { UploadIcon } from "lucide-react"; -import { Icon } from "../icon/icon"; -import * as FileUpload from "./file-upload"; +import * as FileUpload from "../file-upload"; +import { Icon } from "../icon"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.stories.ts b/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.stories.ts deleted file mode 100644 index e3c5bf4decb..00000000000 --- a/libs/@hashintel/ds-components/src/beta/file-upload/file-upload.stories.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { title: "Primitives/FileUpload" }; - -export { App as acceptedFiles } from "./accepted-files.story"; -export { App as basic } from "./basic.story"; -export { App as directory } from "./directory.story"; -export { App as dropzone } from "./dropzone.story"; -export { App as imagePreview } from "./image-preview.story"; -export { App as maxFiles } from "./max-files.story"; -export { App as mediaCapture } from "./media-capture.story"; -export { App as withInput } from "./with-input.story"; diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/image-preview.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/image-preview.story.tsx index 6414b7d9195..dd6720ae3b2 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/image-preview.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/image-preview.story.tsx @@ -3,9 +3,9 @@ import { useFileUploadContext } from "@ark-ui/react/file-upload"; import { ImageUpIcon, XIcon } from "lucide-react"; -import { Button } from "../button/button"; -import { IconButton } from "../icon-button/icon-button"; -import * as FileUpload from "./file-upload"; +import { Button } from "../button"; +import * as FileUpload from "../file-upload"; +import { IconButton } from "../icon-button"; const FileUploadList = () => { const fileUpload = useFileUploadContext(); diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/max-files.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/max-files.story.tsx index f3605114dab..1cbb0a17352 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/max-files.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/max-files.story.tsx @@ -1,7 +1,7 @@ import { FileUpIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as FileUpload from "./file-upload"; +import { Button } from "../button"; +import * as FileUpload from "../file-upload"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/media-capture.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/media-capture.story.tsx index 7d422e6d6df..e7cd1922b12 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/media-capture.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/media-capture.story.tsx @@ -1,7 +1,7 @@ import { WebcamIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as FileUpload from "./file-upload"; +import { Button } from "../button"; +import * as FileUpload from "../file-upload"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/file-upload/with-input.story.tsx b/libs/@hashintel/ds-components/src/beta/file-upload/with-input.story.tsx index 7905b7d4ebd..3fe1388c38a 100644 --- a/libs/@hashintel/ds-components/src/beta/file-upload/with-input.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/file-upload/with-input.story.tsx @@ -1,9 +1,9 @@ import { FileUpIcon } from "lucide-react"; -import { CloseButton } from "../close-button/close-button"; -import { Input } from "../input/input"; -import { InputGroup } from "../input-group/input-group"; -import * as FileUpload from "./file-upload"; +import { CloseButton } from "../close-button"; +import * as FileUpload from "../file-upload"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/floating-panel/floating-panel.recipe.ts b/libs/@hashintel/ds-components/src/beta/floating-panel/floating-panel.recipe.ts index d9445fbeec5..14e2e8683de 100644 --- a/libs/@hashintel/ds-components/src/beta/floating-panel/floating-panel.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/floating-panel/floating-panel.recipe.ts @@ -1,7 +1,7 @@ import { floatingPanelAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const floatingPanel = defineSlotRecipe({ +export const floatingPanelSlotRecipe = sva({ className: "floating-panel", slots: floatingPanelAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/group/group.recipe.ts b/libs/@hashintel/ds-components/src/beta/group.recipe.ts similarity index 78% rename from libs/@hashintel/ds-components/src/beta/group/group.recipe.ts rename to libs/@hashintel/ds-components/src/beta/group.recipe.ts index e5938122d45..6238eb9b8c8 100644 --- a/libs/@hashintel/ds-components/src/beta/group/group.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/group.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const group = defineRecipe({ +const groupRecipeDefinition = { className: "group", base: { display: "inline-flex", @@ -74,4 +74,9 @@ export const group = defineRecipe({ }, }, ], -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const groupRecipe = cva(groupRecipeDefinition); + +export type GroupRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/group.stories.ts b/libs/@hashintel/ds-components/src/beta/group.stories.ts new file mode 100644 index 00000000000..711d61b5462 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/group.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Group" }; + +export { App as attached } from "./group/attached.story"; +export { App as basic } from "./group/basic.story"; +export { App as grow } from "./group/grow.story"; +export { App as vertical } from "./group/vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/group/group.tsx b/libs/@hashintel/ds-components/src/beta/group.tsx similarity index 66% rename from libs/@hashintel/ds-components/src/beta/group/group.tsx rename to libs/@hashintel/ds-components/src/beta/group.tsx index 9570a75e6c9..6acaf23bb1d 100644 --- a/libs/@hashintel/ds-components/src/beta/group/group.tsx +++ b/libs/@hashintel/ds-components/src/beta/group.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { group } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { groupRecipe } from "./group.recipe"; + export type GroupProps = ComponentProps; -export const Group = styled(ark.div, group); +export const Group = styled(ark.div, groupRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/group/attached.story.tsx b/libs/@hashintel/ds-components/src/beta/group/attached.story.tsx index bbe3fa1fc1b..66f4242d0e2 100644 --- a/libs/@hashintel/ds-components/src/beta/group/attached.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/group/attached.story.tsx @@ -1,8 +1,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Badge } from "../badge/badge"; -import { Button } from "../button/button"; -import { Group } from "./group"; +import { Badge } from "../badge"; +import { Button } from "../button"; +import { Group } from "../group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/group/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/group/basic.story.tsx index c760cbe267c..2e46a4a9c8b 100644 --- a/libs/@hashintel/ds-components/src/beta/group/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/group/basic.story.tsx @@ -1,5 +1,5 @@ -import { Button } from "../button/button"; -import { Group } from "./group"; +import { Button } from "../button"; +import { Group } from "../group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/group/group.stories.ts b/libs/@hashintel/ds-components/src/beta/group/group.stories.ts deleted file mode 100644 index 632e2067037..00000000000 --- a/libs/@hashintel/ds-components/src/beta/group/group.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Group" }; - -export { App as attached } from "./attached.story"; -export { App as basic } from "./basic.story"; -export { App as grow } from "./grow.story"; -export { App as vertical } from "./vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/group/grow.story.tsx b/libs/@hashintel/ds-components/src/beta/group/grow.story.tsx index 48ecfd8d2e4..23eaae04b8e 100644 --- a/libs/@hashintel/ds-components/src/beta/group/grow.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/group/grow.story.tsx @@ -1,5 +1,5 @@ -import { Button } from "../button/button"; -import { Group } from "./group"; +import { Button } from "../button"; +import { Group } from "../group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/group/vertical.story.tsx b/libs/@hashintel/ds-components/src/beta/group/vertical.story.tsx index e885d605ff5..f4443bc18ab 100644 --- a/libs/@hashintel/ds-components/src/beta/group/vertical.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/group/vertical.story.tsx @@ -1,5 +1,5 @@ -import { Button } from "../button/button"; -import { Group } from "./group"; +import { Button } from "../button"; +import { Group } from "../group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/heading.recipe.ts b/libs/@hashintel/ds-components/src/beta/heading.recipe.ts new file mode 100644 index 00000000000..9934038c94b --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/heading.recipe.ts @@ -0,0 +1,12 @@ +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; + +const headingRecipeDefinition = { + className: "heading", + base: { + fontWeight: "semibold", + }, +} as const; + +export const headingRecipe = cva(headingRecipeDefinition); + +export type HeadingRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/heading.stories.ts b/libs/@hashintel/ds-components/src/beta/heading.stories.ts new file mode 100644 index 00000000000..d60ddf4c2fa --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/heading.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Heading" }; + +export { App as as } from "./heading/as.story"; +export { App as basic } from "./heading/basic.story"; +export { App as sizes } from "./heading/sizes.story"; +export { App as weights } from "./heading/weights.story"; diff --git a/libs/@hashintel/ds-components/src/beta/heading/heading.tsx b/libs/@hashintel/ds-components/src/beta/heading.tsx similarity index 60% rename from libs/@hashintel/ds-components/src/beta/heading/heading.tsx rename to libs/@hashintel/ds-components/src/beta/heading.tsx index b30b8cbbb00..f35461522a3 100644 --- a/libs/@hashintel/ds-components/src/beta/heading/heading.tsx +++ b/libs/@hashintel/ds-components/src/beta/heading.tsx @@ -1,6 +1,7 @@ import { styled } from "@hashintel/ds-helpers/jsx"; -import { heading } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { headingRecipe } from "./heading.recipe"; + export type HeadingProps = ComponentProps; -export const Heading = styled("h2", heading); +export const Heading = styled("h2", headingRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/heading/as.story.tsx b/libs/@hashintel/ds-components/src/beta/heading/as.story.tsx index 2be82515c65..64788d722f4 100644 --- a/libs/@hashintel/ds-components/src/beta/heading/as.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/heading/as.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Heading } from "./heading"; +import { Heading } from "../heading"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/heading/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/heading/basic.story.tsx index 463388c5a9e..1f51a34ea5e 100644 --- a/libs/@hashintel/ds-components/src/beta/heading/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/heading/basic.story.tsx @@ -1,4 +1,4 @@ -import { Heading } from "./heading"; +import { Heading } from "../heading"; export const App = () => { return Sphinx of black quartz, judge my vow.; diff --git a/libs/@hashintel/ds-components/src/beta/heading/heading.recipe.ts b/libs/@hashintel/ds-components/src/beta/heading/heading.recipe.ts deleted file mode 100644 index d7f7f600df1..00000000000 --- a/libs/@hashintel/ds-components/src/beta/heading/heading.recipe.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { defineRecipe } from "@pandacss/dev"; - -export const heading = defineRecipe({ - className: "heading", - base: { - fontWeight: "semibold", - }, -}); diff --git a/libs/@hashintel/ds-components/src/beta/heading/heading.stories.ts b/libs/@hashintel/ds-components/src/beta/heading/heading.stories.ts deleted file mode 100644 index 1c8742ea861..00000000000 --- a/libs/@hashintel/ds-components/src/beta/heading/heading.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Heading" }; - -export { App as as } from "./as.story"; -export { App as basic } from "./basic.story"; -export { App as sizes } from "./sizes.story"; -export { App as weights } from "./weights.story"; diff --git a/libs/@hashintel/ds-components/src/beta/heading/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/heading/sizes.story.tsx index c315295a6ce..fc4b6a2f03d 100644 --- a/libs/@hashintel/ds-components/src/beta/heading/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/heading/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Heading } from "./heading"; +import { Heading } from "../heading"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/heading/weights.story.tsx b/libs/@hashintel/ds-components/src/beta/heading/weights.story.tsx index 44fc045b5ae..26092319b37 100644 --- a/libs/@hashintel/ds-components/src/beta/heading/weights.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/heading/weights.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Heading } from "./heading"; +import { Heading } from "../heading"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.recipe.ts b/libs/@hashintel/ds-components/src/beta/hover-card.recipe.ts similarity index 68% rename from libs/@hashintel/ds-components/src/beta/hover-card/hover-card.recipe.ts rename to libs/@hashintel/ds-components/src/beta/hover-card.recipe.ts index f6d2802daf7..6862d67ea3f 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/hover-card.recipe.ts @@ -1,7 +1,7 @@ import { hoverCardAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const hoverCard = defineSlotRecipe({ +const hoverCardSlotRecipeDefinition = { className: "hover-card", slots: hoverCardAnatomy.keys(), base: { @@ -38,4 +38,11 @@ export const hoverCard = defineSlotRecipe({ borderInlineStartWidth: "0.5px", }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const hoverCardSlotRecipe = sva(hoverCardSlotRecipeDefinition); + +export type HoverCardSlotRecipeProps = RecipeVariantProps< + typeof hoverCardSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/hover-card.stories.ts b/libs/@hashintel/ds-components/src/beta/hover-card.stories.ts new file mode 100644 index 00000000000..388106efd8a --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/hover-card.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/HoverCard" }; + +export { App as basic } from "./hover-card/basic.story"; +export { App as controlled } from "./hover-card/controlled.story"; +export { App as delays } from "./hover-card/delays.story"; +export { App as dialog } from "./hover-card/dialog.story"; +export { App as disabled } from "./hover-card/disabled.story"; +export { App as placement } from "./hover-card/placement.story"; diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.tsx b/libs/@hashintel/ds-components/src/beta/hover-card.tsx similarity index 84% rename from libs/@hashintel/ds-components/src/beta/hover-card/hover-card.tsx rename to libs/@hashintel/ds-components/src/beta/hover-card.tsx index 546baeff90c..4a012e6d6e2 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card.tsx @@ -2,10 +2,12 @@ import { HoverCard } from "@ark-ui/react/hover-card"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { hoverCard } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withRootProvider, withContext } = createStyleContext(hoverCard); +import { hoverCardSlotRecipe } from "./hover-card.recipe"; + +const { withRootProvider, withContext } = + createStyleContext(hoverCardSlotRecipe); export type RootProps = ComponentProps; export const Root = withRootProvider(HoverCard.Root); diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/hover-card/basic.story.tsx index f8cfbbd7381..abbdded532d 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card/basic.story.tsx @@ -2,11 +2,11 @@ import { Portal } from "@ark-ui/react/portal"; import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { MapPinIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import { Icon } from "../icon/icon"; -import { Link } from "../link/link"; -import { Text } from "../text/text"; -import * as HoverCard from "./hover-card"; +import * as Avatar from "../avatar"; +import * as HoverCard from "../hover-card"; +import { Icon } from "../icon"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/hover-card/controlled.story.tsx index 8a63482c490..657396a6597 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card/controlled.story.tsx @@ -5,11 +5,11 @@ import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { MapPinIcon } from "lucide-react"; import { useState } from "react"; -import * as Avatar from "../avatar/avatar"; -import { Icon } from "../icon/icon"; -import { Link } from "../link/link"; -import { Text } from "../text/text"; -import * as HoverCard from "./hover-card"; +import * as Avatar from "../avatar"; +import * as HoverCard from "../hover-card"; +import { Icon } from "../icon"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { const [open, setOpen] = useState(false); diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/delays.story.tsx b/libs/@hashintel/ds-components/src/beta/hover-card/delays.story.tsx index bf8546215cd..629f107392b 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/delays.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card/delays.story.tsx @@ -2,11 +2,11 @@ import { Portal } from "@ark-ui/react/portal"; import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { MapPinIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import { Icon } from "../icon/icon"; -import { Link } from "../link/link"; -import { Text } from "../text/text"; -import * as HoverCard from "./hover-card"; +import * as Avatar from "../avatar"; +import * as HoverCard from "../hover-card"; +import { Icon } from "../icon"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/dialog.story.tsx b/libs/@hashintel/ds-components/src/beta/hover-card/dialog.story.tsx index b1c9577924d..8c0dae57b1c 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/dialog.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card/dialog.story.tsx @@ -2,14 +2,14 @@ import { Portal } from "@ark-ui/react/portal"; import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { MapPinIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "../dialog/dialog"; -import { Icon } from "../icon/icon"; -import { Link } from "../link/link"; -import { Text } from "../text/text"; -import * as HoverCard from "./hover-card"; +import * as Avatar from "../avatar"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; +import * as HoverCard from "../hover-card"; +import { Icon } from "../icon"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/hover-card/disabled.story.tsx index 41f3013f3b2..3696aaf2157 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card/disabled.story.tsx @@ -2,11 +2,11 @@ import { Portal } from "@ark-ui/react/portal"; import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { MapPinIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import { Icon } from "../icon/icon"; -import { Link } from "../link/link"; -import { Text } from "../text/text"; -import * as HoverCard from "./hover-card"; +import * as Avatar from "../avatar"; +import * as HoverCard from "../hover-card"; +import { Icon } from "../icon"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.stories.ts b/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.stories.ts deleted file mode 100644 index 3895b3f5ff0..00000000000 --- a/libs/@hashintel/ds-components/src/beta/hover-card/hover-card.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/HoverCard" }; - -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as delays } from "./delays.story"; -export { App as dialog } from "./dialog.story"; -export { App as disabled } from "./disabled.story"; -export { App as placement } from "./placement.story"; diff --git a/libs/@hashintel/ds-components/src/beta/hover-card/placement.story.tsx b/libs/@hashintel/ds-components/src/beta/hover-card/placement.story.tsx index 074976e8645..34f26b29823 100644 --- a/libs/@hashintel/ds-components/src/beta/hover-card/placement.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/hover-card/placement.story.tsx @@ -2,11 +2,11 @@ import { Portal } from "@ark-ui/react/portal"; import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; import { MapPinIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import { Icon } from "../icon/icon"; -import { Link } from "../link/link"; -import { Text } from "../text/text"; -import * as HoverCard from "./hover-card"; +import * as Avatar from "../avatar"; +import * as HoverCard from "../hover-card"; +import { Icon } from "../icon"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon-button.stories.ts b/libs/@hashintel/ds-components/src/beta/icon-button.stories.ts new file mode 100644 index 00000000000..e0309bfdfee --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/icon-button.stories.ts @@ -0,0 +1,7 @@ +export default { title: "Primitives/IconButton" }; + +export { App as basic } from "./icon-button/basic.story"; +export { App as colors } from "./icon-button/colors.story"; +export { App as rounded } from "./icon-button/rounded.story"; +export { App as sizes } from "./icon-button/sizes.story"; +export { App as variants } from "./icon-button/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/icon-button.tsx b/libs/@hashintel/ds-components/src/beta/icon-button.tsx similarity index 83% rename from libs/@hashintel/ds-components/src/beta/icon-button/icon-button.tsx rename to libs/@hashintel/ds-components/src/beta/icon-button.tsx index 36222fa5cd0..97439e43c3d 100644 --- a/libs/@hashintel/ds-components/src/beta/icon-button/icon-button.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon-button.tsx @@ -2,7 +2,7 @@ import { forwardRef } from "react"; -import { Button, type ButtonProps } from "../button/button"; +import { Button, type ButtonProps } from "./button"; export interface IconButtonProps extends ButtonProps {} diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/icon-button/basic.story.tsx index 044ce93bd75..f60dcfc5d57 100644 --- a/libs/@hashintel/ds-components/src/beta/icon-button/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon-button/basic.story.tsx @@ -1,6 +1,6 @@ import { SendIcon } from "lucide-react"; -import { IconButton } from "./icon-button"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/icon-button/colors.story.tsx index c289845d2b2..513240dcd7d 100644 --- a/libs/@hashintel/ds-components/src/beta/icon-button/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon-button/colors.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { SearchIcon } from "lucide-react"; -import { IconButton } from "./icon-button"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/icon-button.stories.ts b/libs/@hashintel/ds-components/src/beta/icon-button/icon-button.stories.ts deleted file mode 100644 index 49e6e7c6dad..00000000000 --- a/libs/@hashintel/ds-components/src/beta/icon-button/icon-button.stories.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { title: "Primitives/IconButton" }; - -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as rounded } from "./rounded.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/rounded.story.tsx b/libs/@hashintel/ds-components/src/beta/icon-button/rounded.story.tsx index 1c77693e9ab..91b46dc3f13 100644 --- a/libs/@hashintel/ds-components/src/beta/icon-button/rounded.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon-button/rounded.story.tsx @@ -1,6 +1,6 @@ import { SendIcon } from "lucide-react"; -import { IconButton } from "./icon-button"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/icon-button/sizes.story.tsx index 7a71a4d1f6e..fbd476e5c28 100644 --- a/libs/@hashintel/ds-components/src/beta/icon-button/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon-button/sizes.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { PhoneIcon } from "lucide-react"; -import { IconButton } from "./icon-button"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon-button/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/icon-button/variants.story.tsx index a48156dc1cd..760534aaed9 100644 --- a/libs/@hashintel/ds-components/src/beta/icon-button/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon-button/variants.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { SearchIcon } from "lucide-react"; -import { IconButton } from "./icon-button"; +import { IconButton } from "../icon-button"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon/icon.recipe.ts b/libs/@hashintel/ds-components/src/beta/icon.recipe.ts similarity index 53% rename from libs/@hashintel/ds-components/src/beta/icon/icon.recipe.ts rename to libs/@hashintel/ds-components/src/beta/icon.recipe.ts index 88be78f862e..606ccf931ef 100644 --- a/libs/@hashintel/ds-components/src/beta/icon/icon.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/icon.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const icon = defineRecipe({ +const iconRecipeDefinition = { className: "icon", base: { color: "currentcolor", @@ -22,4 +22,9 @@ export const icon = defineRecipe({ xl: { boxSize: "6" }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const iconRecipe = cva(iconRecipeDefinition); + +export type IconRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/icon.stories.ts b/libs/@hashintel/ds-components/src/beta/icon.stories.ts new file mode 100644 index 00000000000..26198ecade7 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/icon.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Icon" }; + +export { App as basic } from "./icon/basic.story"; +export { App as custom } from "./icon/custom.story"; +export { App as lucide } from "./icon/lucide.story"; +export { App as sizes } from "./icon/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/icon/icon.tsx b/libs/@hashintel/ds-components/src/beta/icon.tsx similarity index 70% rename from libs/@hashintel/ds-components/src/beta/icon/icon.tsx rename to libs/@hashintel/ds-components/src/beta/icon.tsx index 94880ca5fe1..7cb92c7da83 100644 --- a/libs/@hashintel/ds-components/src/beta/icon/icon.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon.tsx @@ -1,9 +1,10 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { icon } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { iconRecipe } from "./icon.recipe"; + export type IconProps = ComponentProps; -export const Icon = styled(ark.svg, icon, { +export const Icon = styled(ark.svg, iconRecipe, { defaultProps: { asChild: true }, }); diff --git a/libs/@hashintel/ds-components/src/beta/icon/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/icon/basic.story.tsx index 8cf71988661..c9191779f9d 100644 --- a/libs/@hashintel/ds-components/src/beta/icon/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon/basic.story.tsx @@ -1,6 +1,6 @@ import { HeartIcon } from "lucide-react"; -import { Icon } from "./icon"; +import { Icon } from "../icon"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon/custom.story.tsx b/libs/@hashintel/ds-components/src/beta/icon/custom.story.tsx index ac00e9afc1b..292747c57c7 100644 --- a/libs/@hashintel/ds-components/src/beta/icon/custom.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon/custom.story.tsx @@ -1,4 +1,4 @@ -import { Icon } from "./icon"; +import { Icon } from "../icon"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon/icon.stories.ts b/libs/@hashintel/ds-components/src/beta/icon/icon.stories.ts deleted file mode 100644 index 517ca0f5845..00000000000 --- a/libs/@hashintel/ds-components/src/beta/icon/icon.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Icon" }; - -export { App as basic } from "./basic.story"; -export { App as custom } from "./custom.story"; -export { App as lucide } from "./lucide.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/icon/lucide.story.tsx b/libs/@hashintel/ds-components/src/beta/icon/lucide.story.tsx index c3fc9022956..a3273845bd3 100644 --- a/libs/@hashintel/ds-components/src/beta/icon/lucide.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon/lucide.story.tsx @@ -1,6 +1,6 @@ import { RocketIcon } from "lucide-react"; -import { Icon } from "./icon"; +import { Icon } from "../icon"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/icon/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/icon/sizes.story.tsx index 7c204145362..1ec7432d717 100644 --- a/libs/@hashintel/ds-components/src/beta/icon/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/icon/sizes.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; import { DiamondIcon } from "lucide-react"; -import { Icon } from "./icon"; +import { Icon } from "../icon"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/image/image.tsx b/libs/@hashintel/ds-components/src/beta/image.tsx similarity index 100% rename from libs/@hashintel/ds-components/src/beta/image/image.tsx rename to libs/@hashintel/ds-components/src/beta/image.tsx diff --git a/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.recipe.ts b/libs/@hashintel/ds-components/src/beta/input-addon.recipe.ts similarity index 70% rename from libs/@hashintel/ds-components/src/beta/input-addon/input-addon.recipe.ts rename to libs/@hashintel/ds-components/src/beta/input-addon.recipe.ts index c7a0d28c806..02761373c33 100644 --- a/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/input-addon.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const inputAddon = defineRecipe({ +const inputAddonRecipeDefinition = { className: "input-addon", base: { alignItems: "center", @@ -39,4 +39,9 @@ export const inputAddon = defineRecipe({ xl: { textStyle: "lg", px: "4", _icon: { boxSize: "5.5" } }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const inputAddonRecipe = cva(inputAddonRecipeDefinition); + +export type InputAddonRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/input-addon.stories.ts b/libs/@hashintel/ds-components/src/beta/input-addon.stories.ts new file mode 100644 index 00000000000..4cb4e154e74 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/input-addon.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/InputAddon" }; + +export { App as basic } from "./input-addon/basic.story"; +export { App as sizes } from "./input-addon/sizes.story"; +export { App as variants } from "./input-addon/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.tsx b/libs/@hashintel/ds-components/src/beta/input-addon.tsx similarity index 63% rename from libs/@hashintel/ds-components/src/beta/input-addon/input-addon.tsx rename to libs/@hashintel/ds-components/src/beta/input-addon.tsx index 0997b26cea4..6f2175478ed 100644 --- a/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-addon.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { inputAddon } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { inputAddonRecipe } from "./input-addon.recipe"; + export type InputAddonProps = ComponentProps; -export const InputAddon = styled(ark.div, inputAddon); +export const InputAddon = styled(ark.div, inputAddonRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/input-addon/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/input-addon/basic.story.tsx index 1bd6b9b8d9d..7312d24720f 100644 --- a/libs/@hashintel/ds-components/src/beta/input-addon/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-addon/basic.story.tsx @@ -1,8 +1,8 @@ import { EuroIcon } from "lucide-react"; -import { Group } from "../group/group"; -import { Input } from "../input/input"; -import { InputAddon } from "./input-addon"; +import { Group } from "../group"; +import { Input } from "../input"; +import { InputAddon } from "../input-addon"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.stories.ts b/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.stories.ts deleted file mode 100644 index cccea6d9897..00000000000 --- a/libs/@hashintel/ds-components/src/beta/input-addon/input-addon.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/InputAddon" }; - -export { App as basic } from "./basic.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/input-addon/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/input-addon/sizes.story.tsx index 1c1283b3e9c..095d48fa0f2 100644 --- a/libs/@hashintel/ds-components/src/beta/input-addon/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-addon/sizes.story.tsx @@ -1,9 +1,9 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { EuroIcon } from "lucide-react"; -import { Group } from "../group/group"; -import { Input } from "../input/input"; -import { InputAddon } from "./input-addon"; +import { Group } from "../group"; +import { Input } from "../input"; +import { InputAddon } from "../input-addon"; export const App = () => { const sizes = ["sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/input-addon/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/input-addon/variants.story.tsx index 0926a4794ce..60662678d4f 100644 --- a/libs/@hashintel/ds-components/src/beta/input-addon/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-addon/variants.story.tsx @@ -1,9 +1,9 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { EuroIcon } from "lucide-react"; -import { Group } from "../group/group"; -import { Input } from "../input/input"; -import { InputAddon } from "./input-addon"; +import { Group } from "../group"; +import { Input } from "../input"; +import { InputAddon } from "../input-addon"; export const App = () => { const variants = ["outline", "subtle", "surface"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/input-group/input-group.recipe.ts b/libs/@hashintel/ds-components/src/beta/input-group.recipe.ts similarity index 84% rename from libs/@hashintel/ds-components/src/beta/input-group/input-group.recipe.ts rename to libs/@hashintel/ds-components/src/beta/input-group.recipe.ts index 16e884aa68c..fb092281813 100644 --- a/libs/@hashintel/ds-components/src/beta/input-group/input-group.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/input-group.recipe.ts @@ -1,6 +1,6 @@ -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const inputGroup = defineSlotRecipe({ +const inputGroupSlotRecipeDefinition = { className: "input-group", slots: ["root", "element"], base: { @@ -63,4 +63,10 @@ export const inputGroup = defineSlotRecipe({ }, }, }, -}); +} as const; + +export const inputGroupSlotRecipe = sva(inputGroupSlotRecipeDefinition); + +export type InputGroupSlotRecipeProps = RecipeVariantProps< + typeof inputGroupSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/input-group.stories.ts b/libs/@hashintel/ds-components/src/beta/input-group.stories.ts new file mode 100644 index 00000000000..df0fd54953c --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/input-group.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/InputGroup" }; + +export { App as basic } from "./input-group/basic.story"; +export { App as sizes } from "./input-group/sizes.story"; +export { App as variants } from "./input-group/variants.story"; +export { App as withButton } from "./input-group/with-button.story"; diff --git a/libs/@hashintel/ds-components/src/beta/input-group/input-group.tsx b/libs/@hashintel/ds-components/src/beta/input-group.tsx similarity index 93% rename from libs/@hashintel/ds-components/src/beta/input-group/input-group.tsx rename to libs/@hashintel/ds-components/src/beta/input-group.tsx index 6b22959410b..4291ef9fdec 100644 --- a/libs/@hashintel/ds-components/src/beta/input-group/input-group.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-group.tsx @@ -2,10 +2,11 @@ import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { inputGroup } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, forwardRef, type ReactNode } from "react"; -const { withProvider, withContext } = createStyleContext(inputGroup); +import { inputGroupSlotRecipe } from "./input-group.recipe"; + +const { withProvider, withContext } = createStyleContext(inputGroupSlotRecipe); type RootProps = ComponentProps; const Root = withProvider(ark.div, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/input-group/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/input-group/basic.story.tsx index fa9cc28d016..dd1ec65ebfc 100644 --- a/libs/@hashintel/ds-components/src/beta/input-group/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-group/basic.story.tsx @@ -1,7 +1,7 @@ import { EuroIcon } from "lucide-react"; -import { Input } from "../input/input"; -import { InputGroup } from "./input-group"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input-group/input-group.stories.ts b/libs/@hashintel/ds-components/src/beta/input-group/input-group.stories.ts deleted file mode 100644 index 5175e595895..00000000000 --- a/libs/@hashintel/ds-components/src/beta/input-group/input-group.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/InputGroup" }; - -export { App as basic } from "./basic.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; -export { App as withButton } from "./with-button.story"; diff --git a/libs/@hashintel/ds-components/src/beta/input-group/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/input-group/sizes.story.tsx index dfacc942c74..db621b7b187 100644 --- a/libs/@hashintel/ds-components/src/beta/input-group/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-group/sizes.story.tsx @@ -1,8 +1,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { EuroIcon, InfoIcon } from "lucide-react"; -import { Input } from "../input/input"; -import { InputGroup } from "./input-group"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/input-group/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/input-group/variants.story.tsx index c14f3b445a8..cfeb54f9e78 100644 --- a/libs/@hashintel/ds-components/src/beta/input-group/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-group/variants.story.tsx @@ -1,8 +1,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { EuroIcon, InfoIcon } from "lucide-react"; -import { Input } from "../input/input"; -import { InputGroup } from "./input-group"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; export const App = () => { const variants = ["outline", "subtle", "surface", "flushed"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/input-group/with-button.story.tsx b/libs/@hashintel/ds-components/src/beta/input-group/with-button.story.tsx index 5087163e123..0426eb26e15 100644 --- a/libs/@hashintel/ds-components/src/beta/input-group/with-button.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input-group/with-button.story.tsx @@ -1,8 +1,8 @@ import { SearchIcon } from "lucide-react"; -import { IconButton } from "../icon-button/icon-button"; -import { Input } from "../input/input"; -import { InputGroup } from "./input-group"; +import { IconButton } from "../icon-button"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input/input.recipe.ts b/libs/@hashintel/ds-components/src/beta/input.recipe.ts similarity index 89% rename from libs/@hashintel/ds-components/src/beta/input/input.recipe.ts rename to libs/@hashintel/ds-components/src/beta/input.recipe.ts index a9ecd910685..dd4df0cfe1b 100644 --- a/libs/@hashintel/ds-components/src/beta/input/input.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/input.recipe.ts @@ -1,6 +1,6 @@ -import type { RecipeConfig } from "@pandacss/dev"; +import { cva } from "@hashintel/ds-helpers/css"; -export const input = { +export const inputRecipeConfig = { className: "input", jsx: ["Input", "Field.Input"], base: { @@ -86,4 +86,7 @@ export const input = { "2xl": { textStyle: "3xl", px: "4.5", "--input-height": "sizes.16" }, }, }, -} satisfies RecipeConfig; +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const inputRecipe = cva(inputRecipeConfig); diff --git a/libs/@hashintel/ds-components/src/beta/input.stories.ts b/libs/@hashintel/ds-components/src/beta/input.stories.ts new file mode 100644 index 00000000000..b0c9d2d30c7 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/input.stories.ts @@ -0,0 +1,11 @@ +export default { title: "Primitives/Input" }; + +export { App as addon } from "./input/addon.story"; +export { App as basic } from "./input/basic.story"; +export { App as element } from "./input/element.story"; +export { App as field } from "./input/field.story"; +export { App as invalid } from "./input/invalid.story"; +export { App as required } from "./input/required.story"; +export { App as sizes } from "./input/sizes.story"; +export { App as variants } from "./input/variants.story"; +export { App as withButton } from "./input/with-button.story"; diff --git a/libs/@hashintel/ds-components/src/beta/input/input.tsx b/libs/@hashintel/ds-components/src/beta/input.tsx similarity index 65% rename from libs/@hashintel/ds-components/src/beta/input/input.tsx rename to libs/@hashintel/ds-components/src/beta/input.tsx index c0edf1ffa6b..94ad8567a01 100644 --- a/libs/@hashintel/ds-components/src/beta/input/input.tsx +++ b/libs/@hashintel/ds-components/src/beta/input.tsx @@ -1,7 +1,8 @@ import { Field } from "@ark-ui/react/field"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { input } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { inputRecipe } from "./input.recipe"; + export type InputProps = ComponentProps; -export const Input = styled(Field.Input, input); +export const Input = styled(Field.Input, inputRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/input/addon.story.tsx b/libs/@hashintel/ds-components/src/beta/input/addon.story.tsx index 543e7cea7ad..d111946a3d4 100644 --- a/libs/@hashintel/ds-components/src/beta/input/addon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/addon.story.tsx @@ -1,9 +1,9 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { AtSignIcon, EuroIcon } from "lucide-react"; -import { Group } from "../group/group"; -import { InputAddon } from "../input-addon/input-addon"; -import { Input } from "./input"; +import { Group } from "../group"; +import { Input } from "../input"; +import { InputAddon } from "../input-addon"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/input/basic.story.tsx index de3fc8e36c0..9d54e8dc70c 100644 --- a/libs/@hashintel/ds-components/src/beta/input/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/basic.story.tsx @@ -1,4 +1,4 @@ -import { Input } from "./input"; +import { Input } from "../input"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/input/element.story.tsx b/libs/@hashintel/ds-components/src/beta/input/element.story.tsx index efce03bf58a..ec4e073f82e 100644 --- a/libs/@hashintel/ds-components/src/beta/input/element.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/element.story.tsx @@ -1,8 +1,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { EuroIcon, InfoIcon, UserIcon } from "lucide-react"; -import { InputGroup } from "../input-group/input-group"; -import { Input } from "./input"; +import { Input } from "../input"; +import { InputGroup } from "../input-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input/field.story.tsx b/libs/@hashintel/ds-components/src/beta/input/field.story.tsx index 45f563084d1..3265555026c 100644 --- a/libs/@hashintel/ds-components/src/beta/input/field.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/field.story.tsx @@ -1,5 +1,5 @@ -import * as Field from "../field/field"; -import { Input } from "./input"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input/input.stories.ts b/libs/@hashintel/ds-components/src/beta/input/input.stories.ts deleted file mode 100644 index 52b63c9d703..00000000000 --- a/libs/@hashintel/ds-components/src/beta/input/input.stories.ts +++ /dev/null @@ -1,11 +0,0 @@ -export default { title: "Primitives/Input" }; - -export { App as addon } from "./addon.story"; -export { App as basic } from "./basic.story"; -export { App as element } from "./element.story"; -export { App as field } from "./field.story"; -export { App as invalid } from "./invalid.story"; -export { App as required } from "./required.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; -export { App as withButton } from "./with-button.story"; diff --git a/libs/@hashintel/ds-components/src/beta/input/invalid.story.tsx b/libs/@hashintel/ds-components/src/beta/input/invalid.story.tsx index 3e834c77f59..85637359ab8 100644 --- a/libs/@hashintel/ds-components/src/beta/input/invalid.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/invalid.story.tsx @@ -1,5 +1,5 @@ -import * as Field from "../field/field"; -import { Input } from "./input"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input/ref.story.tsx b/libs/@hashintel/ds-components/src/beta/input/ref.story.tsx index 59f878edeaf..4a14a3583b0 100644 --- a/libs/@hashintel/ds-components/src/beta/input/ref.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/ref.story.tsx @@ -2,7 +2,7 @@ import { useRef } from "react"; -import { Input } from "./input"; +import { Input } from "../input"; export const App = () => { const ref = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/input/required.story.tsx b/libs/@hashintel/ds-components/src/beta/input/required.story.tsx index ea84315dea5..07fb6279b86 100644 --- a/libs/@hashintel/ds-components/src/beta/input/required.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/required.story.tsx @@ -1,5 +1,5 @@ -import * as Field from "../field/field"; -import { Input } from "./input"; +import * as Field from "../field"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/input/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/input/sizes.story.tsx index 089f6d49598..366220204cd 100644 --- a/libs/@hashintel/ds-components/src/beta/input/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Input } from "./input"; +import { Input } from "../input"; export const App = () => { const sizes = ["sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/input/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/input/variants.story.tsx index fa904eaa688..faec506cb4c 100644 --- a/libs/@hashintel/ds-components/src/beta/input/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Input } from "./input"; +import { Input } from "../input"; export const App = () => { const variants = ["outline", "subtle", "surface", "flushed"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/input/with-button.story.tsx b/libs/@hashintel/ds-components/src/beta/input/with-button.story.tsx index 1a0fe0bfdd2..5efaaeb550b 100644 --- a/libs/@hashintel/ds-components/src/beta/input/with-button.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/input/with-button.story.tsx @@ -1,6 +1,6 @@ -import { Button } from "../button/button"; -import { Group } from "../group/group"; -import { Input } from "./input"; +import { Button } from "../button"; +import { Group } from "../group"; +import { Input } from "../input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/kbd/kbd.recipe.ts b/libs/@hashintel/ds-components/src/beta/kbd.recipe.ts similarity index 77% rename from libs/@hashintel/ds-components/src/beta/kbd/kbd.recipe.ts rename to libs/@hashintel/ds-components/src/beta/kbd.recipe.ts index 96188d14cb2..fcbda92f080 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/kbd.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/kbd.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const kbd = defineRecipe({ +const kbdRecipeDefinition = { className: "kbd", base: { display: "inline-flex", @@ -52,4 +52,9 @@ export const kbd = defineRecipe({ size: "md", variant: "subtle", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const kbdRecipe = cva(kbdRecipeDefinition); + +export type KbdRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/kbd.stories.ts b/libs/@hashintel/ds-components/src/beta/kbd.stories.ts new file mode 100644 index 00000000000..c2f8e57b09c --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/kbd.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Kbd" }; + +export { App as basic } from "./kbd/basic.story"; +export { App as combinations } from "./kbd/combinations.story"; +export { App as inline } from "./kbd/inline.story"; +export { App as modifierKeys } from "./kbd/modifier-keys.story"; +export { App as sizes } from "./kbd/sizes.story"; +export { App as variants } from "./kbd/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/kbd/kbd.tsx b/libs/@hashintel/ds-components/src/beta/kbd.tsx similarity index 69% rename from libs/@hashintel/ds-components/src/beta/kbd/kbd.tsx rename to libs/@hashintel/ds-components/src/beta/kbd.tsx index 05853e7a415..4b276bc467a 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/kbd.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { kbd } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "@hashintel/ds-helpers/types"; +import { kbdRecipe } from "./kbd.recipe"; + export type KbdProps = ComponentProps; -export const Kbd = styled(ark.kbd, kbd); +export const Kbd = styled(ark.kbd, kbdRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/kbd/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/kbd/basic.story.tsx index 65978b70b67..8f6efd676c9 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd/basic.story.tsx @@ -1,4 +1,4 @@ -import { Kbd } from "./kbd"; +import { Kbd } from "../kbd"; export const App = () => { return Shift + Tab; diff --git a/libs/@hashintel/ds-components/src/beta/kbd/combinations.story.tsx b/libs/@hashintel/ds-components/src/beta/kbd/combinations.story.tsx index a8b50d6f4bf..dcaaf368dc6 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/combinations.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd/combinations.story.tsx @@ -1,6 +1,6 @@ import { HStack } from "@hashintel/ds-helpers/jsx"; -import { Kbd } from "./kbd"; +import { Kbd } from "../kbd"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/kbd/inline.story.tsx b/libs/@hashintel/ds-components/src/beta/kbd/inline.story.tsx index 9cb12844d78..0461b04592d 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/inline.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd/inline.story.tsx @@ -1,5 +1,5 @@ -import { Text } from "../text/text"; -import { Kbd } from "./kbd"; +import { Kbd } from "../kbd"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/kbd/kbd.stories.ts b/libs/@hashintel/ds-components/src/beta/kbd/kbd.stories.ts deleted file mode 100644 index 85e5ab99b0b..00000000000 --- a/libs/@hashintel/ds-components/src/beta/kbd/kbd.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Kbd" }; - -export { App as basic } from "./basic.story"; -export { App as combinations } from "./combinations.story"; -export { App as inline } from "./inline.story"; -export { App as modifierKeys } from "./modifier-keys.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/kbd/modifier-keys.story.tsx b/libs/@hashintel/ds-components/src/beta/kbd/modifier-keys.story.tsx index cd6ff8b3795..341fd849e10 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/modifier-keys.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd/modifier-keys.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Kbd } from "./kbd"; +import { Kbd } from "../kbd"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/kbd/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/kbd/sizes.story.tsx index 22e3533dfa2..0b3c052fe36 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd/sizes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Kbd } from "./kbd"; +import { Kbd } from "../kbd"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/kbd/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/kbd/variants.story.tsx index 68397e97185..dd4957e637e 100644 --- a/libs/@hashintel/ds-components/src/beta/kbd/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/kbd/variants.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Kbd } from "./kbd"; +import { Kbd } from "../kbd"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/link/link.recipe.ts b/libs/@hashintel/ds-components/src/beta/link.recipe.ts similarity index 70% rename from libs/@hashintel/ds-components/src/beta/link/link.recipe.ts rename to libs/@hashintel/ds-components/src/beta/link.recipe.ts index b263c7b7ea1..d8c338ac9bb 100644 --- a/libs/@hashintel/ds-components/src/beta/link/link.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/link.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const link = defineRecipe({ +const linkRecipeDefinition = { className: "link", base: { alignItems: "center", @@ -39,4 +39,9 @@ export const link = defineRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const linkRecipe = cva(linkRecipeDefinition); + +export type LinkRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/link.stories.ts b/libs/@hashintel/ds-components/src/beta/link.stories.ts new file mode 100644 index 00000000000..1721b321e20 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/link.stories.ts @@ -0,0 +1,6 @@ +export default { title: "Primitives/Link" }; + +export { App as basic } from "./link/basic.story"; +export { App as icon } from "./link/icon.story"; +export { App as inline } from "./link/inline.story"; +export { App as variants } from "./link/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/link/link.tsx b/libs/@hashintel/ds-components/src/beta/link.tsx similarity index 67% rename from libs/@hashintel/ds-components/src/beta/link/link.tsx rename to libs/@hashintel/ds-components/src/beta/link.tsx index 274621b7183..fcc8865cdc4 100644 --- a/libs/@hashintel/ds-components/src/beta/link/link.tsx +++ b/libs/@hashintel/ds-components/src/beta/link.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { link } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { linkRecipe } from "./link.recipe"; + export type LinkProps = ComponentProps; -export const Link = styled(ark.a, link); +export const Link = styled(ark.a, linkRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/link/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/link/basic.story.tsx index 07544ba72f5..7feae0f3901 100644 --- a/libs/@hashintel/ds-components/src/beta/link/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/link/basic.story.tsx @@ -1,4 +1,4 @@ -import { Link } from "./link"; +import { Link } from "../link"; export const App = () => { return Visit Park UI; diff --git a/libs/@hashintel/ds-components/src/beta/link/icon.story.tsx b/libs/@hashintel/ds-components/src/beta/link/icon.story.tsx index 7fb33edac71..052f58b3215 100644 --- a/libs/@hashintel/ds-components/src/beta/link/icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/link/icon.story.tsx @@ -1,6 +1,6 @@ import { ExternalLinkIcon } from "lucide-react"; -import { Link } from "./link"; +import { Link } from "../link"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/link/inline.story.tsx b/libs/@hashintel/ds-components/src/beta/link/inline.story.tsx index c7d05c17c99..0d1622cd179 100644 --- a/libs/@hashintel/ds-components/src/beta/link/inline.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/link/inline.story.tsx @@ -1,5 +1,5 @@ -import { Text } from "../text/text"; -import { Link } from "./link"; +import { Link } from "../link"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/link/link.stories.ts b/libs/@hashintel/ds-components/src/beta/link/link.stories.ts deleted file mode 100644 index 482559c1f94..00000000000 --- a/libs/@hashintel/ds-components/src/beta/link/link.stories.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default { title: "Primitives/Link" }; - -export { App as basic } from "./basic.story"; -export { App as icon } from "./icon.story"; -export { App as inline } from "./inline.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/link/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/link/variants.story.tsx index 271b1a5cefa..c40fac3246f 100644 --- a/libs/@hashintel/ds-components/src/beta/link/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/link/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Link } from "./link"; +import { Link } from "../link"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/listbox/listbox.recipe.ts b/libs/@hashintel/ds-components/src/beta/listbox/listbox.recipe.ts index 25df1d5ca05..eebc6e77410 100644 --- a/libs/@hashintel/ds-components/src/beta/listbox/listbox.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/listbox/listbox.recipe.ts @@ -1,7 +1,7 @@ import { listboxAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const listbox = defineSlotRecipe({ +export const listboxSlotRecipe = sva({ className: "listbox", slots: listboxAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/loader/loader.tsx b/libs/@hashintel/ds-components/src/beta/loader.tsx similarity index 91% rename from libs/@hashintel/ds-components/src/beta/loader/loader.tsx rename to libs/@hashintel/ds-components/src/beta/loader.tsx index 249ce287e97..4f7d7082701 100644 --- a/libs/@hashintel/ds-components/src/beta/loader/loader.tsx +++ b/libs/@hashintel/ds-components/src/beta/loader.tsx @@ -3,9 +3,9 @@ import type { HTMLStyledProps } from "@hashintel/ds-helpers/jsx"; import { forwardRef } from "react"; -import { AbsoluteCenter } from "../absolute-center/absolute-center"; -import { Span } from "../span/span"; -import { Spinner } from "../spinner/spinner"; +import { AbsoluteCenter } from "./absolute-center"; +import { Span } from "./span"; +import { Spinner } from "./spinner"; export interface LoaderProps extends HTMLStyledProps<"span"> { /** diff --git a/libs/@hashintel/ds-components/src/beta/menu/menu.recipe.ts b/libs/@hashintel/ds-components/src/beta/menu.recipe.ts similarity index 89% rename from libs/@hashintel/ds-components/src/beta/menu/menu.recipe.ts rename to libs/@hashintel/ds-components/src/beta/menu.recipe.ts index 378e58193d7..9b000688f1b 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/menu.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/menu.recipe.ts @@ -1,7 +1,7 @@ import { menuAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const menu = defineSlotRecipe({ +const menuSlotRecipeDefinition = { className: "menu", slots: menuAnatomy.keys(), base: { @@ -120,4 +120,9 @@ export const menu = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const menuSlotRecipe = sva(menuSlotRecipeDefinition); + +export type MenuSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/menu.stories.ts b/libs/@hashintel/ds-components/src/beta/menu.stories.ts new file mode 100644 index 00000000000..2a388354ceb --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/menu.stories.ts @@ -0,0 +1,10 @@ +export default { title: "Primitives/Menu" }; + +export { App as basic } from "./menu/basic.story"; +export { App as checkbox } from "./menu/checkbox.story"; +export { App as context } from "./menu/context.story"; +export { App as group } from "./menu/group.story"; +export { App as radioGroup } from "./menu/radio-group.story"; +export { App as sizes } from "./menu/sizes.story"; +export { App as submenu } from "./menu/submenu.story"; +export { App as withAvatar } from "./menu/with-avatar.story"; diff --git a/libs/@hashintel/ds-components/src/beta/menu/menu.tsx b/libs/@hashintel/ds-components/src/beta/menu.tsx similarity index 97% rename from libs/@hashintel/ds-components/src/beta/menu/menu.tsx rename to libs/@hashintel/ds-components/src/beta/menu.tsx index e0ce4ac4489..ff91534cec1 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/menu.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu.tsx @@ -7,11 +7,12 @@ import { createStyleContext, type HTMLStyledProps, } from "@hashintel/ds-helpers/jsx"; -import { menu } from "@hashintel/ds-helpers/recipes"; import { CheckIcon, ChevronDownIcon } from "lucide-react"; import { type ComponentProps, forwardRef } from "react"; -const { withRootProvider, withContext } = createStyleContext(menu); +import { menuSlotRecipe } from "./menu.recipe"; + +const { withRootProvider, withContext } = createStyleContext(menuSlotRecipe); export type RootProps = ComponentProps; export const Root = withRootProvider(Menu.Root, { diff --git a/libs/@hashintel/ds-components/src/beta/menu/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/basic.story.tsx index 50b6c81598a..d9f08a58171 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/basic.story.tsx @@ -1,5 +1,5 @@ -import { Button } from "../button/button"; -import * as Menu from "./menu"; +import { Button } from "../button"; +import * as Menu from "../menu"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/menu/checkbox.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/checkbox.story.tsx index 189a005d015..99db2dcd86b 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/checkbox.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/checkbox.story.tsx @@ -2,8 +2,8 @@ import { useCheckboxGroup } from "@ark-ui/react/checkbox"; -import { Button } from "../button/button"; -import * as Menu from "./menu"; +import { Button } from "../button"; +import * as Menu from "../menu"; export const App = () => { const items = [ diff --git a/libs/@hashintel/ds-components/src/beta/menu/context.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/context.story.tsx index 6100d797f46..91f712f8e46 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/context.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/context.story.tsx @@ -1,7 +1,7 @@ import { Portal } from "@ark-ui/react/portal"; import { Center } from "@hashintel/ds-helpers/jsx"; -import * as Menu from "./menu"; +import * as Menu from "../menu"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/menu/group.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/group.story.tsx index 00028d9bc76..1265a07e32b 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/group.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/group.story.tsx @@ -1,7 +1,7 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import * as Menu from "./menu"; +import { Button } from "../button"; +import * as Menu from "../menu"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/menu/menu.stories.ts b/libs/@hashintel/ds-components/src/beta/menu/menu.stories.ts deleted file mode 100644 index 4ac85487681..00000000000 --- a/libs/@hashintel/ds-components/src/beta/menu/menu.stories.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { title: "Primitives/Menu" }; - -export { App as basic } from "./basic.story"; -export { App as checkbox } from "./checkbox.story"; -export { App as context } from "./context.story"; -export { App as group } from "./group.story"; -export { App as radioGroup } from "./radio-group.story"; -export { App as sizes } from "./sizes.story"; -export { App as submenu } from "./submenu.story"; -export { App as withAvatar } from "./with-avatar.story"; diff --git a/libs/@hashintel/ds-components/src/beta/menu/radio-group.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/radio-group.story.tsx index 6fd384a99aa..1cd05c49396 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/radio-group.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/radio-group.story.tsx @@ -2,8 +2,8 @@ import { useState } from "react"; -import { Button } from "../button/button"; -import * as Menu from "./menu"; +import { Button } from "../button"; +import * as Menu from "../menu"; export const App = () => { const items = [ diff --git a/libs/@hashintel/ds-components/src/beta/menu/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/sizes.story.tsx index 7c5ff94c280..23fdd8486e3 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/sizes.story.tsx @@ -1,7 +1,7 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Menu from "./menu"; +import { Button } from "../button"; +import * as Menu from "../menu"; export const App = () => { const sizes = ["xs", "sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/menu/submenu.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/submenu.story.tsx index b633f33ef03..379017833ed 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/submenu.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/submenu.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; import { ChevronRightIcon } from "lucide-react"; -import { Button } from "../button/button"; -import * as Menu from "./menu"; +import { Button } from "../button"; +import * as Menu from "../menu"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/menu/with-avatar.story.tsx b/libs/@hashintel/ds-components/src/beta/menu/with-avatar.story.tsx index 0deb2ae7709..f2e7600ad6c 100644 --- a/libs/@hashintel/ds-components/src/beta/menu/with-avatar.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/menu/with-avatar.story.tsx @@ -1,7 +1,7 @@ import { LogOutIcon, Settings2Icon, UserIcon } from "lucide-react"; -import * as Avatar from "../avatar/avatar"; -import * as Menu from "./menu"; +import * as Avatar from "../avatar"; +import * as Menu from "../menu"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/number-input.recipe.ts b/libs/@hashintel/ds-components/src/beta/number-input.recipe.ts similarity index 68% rename from libs/@hashintel/ds-components/src/beta/number-input/number-input.recipe.ts rename to libs/@hashintel/ds-components/src/beta/number-input.recipe.ts index 357c10d43d5..d2ecfc88826 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/number-input.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/number-input.recipe.ts @@ -1,7 +1,7 @@ import { numberInputAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -import { input } from "../input/input.recipe"; +import { inputRecipeConfig } from "./input.recipe"; const trigger = { alignItems: "center", @@ -22,9 +22,9 @@ const trigger = { _active: { bg: "gray.surface.bg.active", }, -}; +} as const; -export const numberInput = defineSlotRecipe({ +const numberInputSlotRecipeDefinition = { className: "number-input", slots: numberInputAnatomy.keys(), base: { @@ -49,7 +49,7 @@ export const numberInput = defineSlotRecipe({ zIndex: "1", }, input: { - ...input.base, + ...inputRecipeConfig.base, verticalAlign: "top", pe: "calc(var(--stepper-width) + 0.5rem)", }, @@ -76,34 +76,41 @@ export const numberInput = defineSlotRecipe({ control: { "--stepper-width": "sizes.4.5", }, - input: input.variants.size.sm, + input: inputRecipeConfig.variants.size.sm, }, md: { control: { "--stepper-width": "sizes.5", }, - input: input.variants.size.md, + input: inputRecipeConfig.variants.size.md, }, lg: { control: { "--stepper-width": "sizes.5.5", }, - input: input.variants.size.lg, + input: inputRecipeConfig.variants.size.lg, }, xl: { control: { "--stepper-width": "sizes.6", }, - input: input.variants.size.xl, + input: inputRecipeConfig.variants.size.xl, }, }, variant: { outline: { - input: input.variants.variant.outline, + input: inputRecipeConfig.variants.variant.outline, }, surface: { - input: input.variants.variant.surface, + input: inputRecipeConfig.variants.variant.surface, }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const numberInputSlotRecipe = sva(numberInputSlotRecipeDefinition); + +export type NumberInputSlotRecipeProps = RecipeVariantProps< + typeof numberInputSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/number-input.stories.ts b/libs/@hashintel/ds-components/src/beta/number-input.stories.ts new file mode 100644 index 00000000000..b3166ccbc98 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/number-input.stories.ts @@ -0,0 +1,14 @@ +export default { title: "Primitives/NumberInput" }; + +export { App as basic } from "./number-input/basic.story"; +export { App as controlled } from "./number-input/controlled.story"; +export { App as disabled } from "./number-input/disabled.story"; +export { App as element } from "./number-input/element.story"; +export { App as formatting } from "./number-input/formatting.story"; +export { App as helperText } from "./number-input/helper-text.story"; +export { App as invalid } from "./number-input/invalid.story"; +export { App as minMax } from "./number-input/min-max.story"; +export { App as mouseWheel } from "./number-input/mouse-wheel.story"; +export { App as scrubber } from "./number-input/scrubber.story"; +export { App as sizes } from "./number-input/sizes.story"; +export { App as step } from "./number-input/step.story"; diff --git a/libs/@hashintel/ds-components/src/beta/number-input/number-input.tsx b/libs/@hashintel/ds-components/src/beta/number-input.tsx similarity index 94% rename from libs/@hashintel/ds-components/src/beta/number-input/number-input.tsx rename to libs/@hashintel/ds-components/src/beta/number-input.tsx index cf219cfc347..5714647fae8 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/number-input.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input.tsx @@ -4,11 +4,12 @@ import { NumberInput } from "@ark-ui/react/number-input"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { numberInput } from "@hashintel/ds-helpers/recipes"; import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(numberInput); +import { numberInputSlotRecipe } from "./number-input.recipe"; + +const { withProvider, withContext } = createStyleContext(numberInputSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(NumberInput.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/number-input/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/basic.story.tsx index 5f824bb3d42..1cd63bc661c 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/basic.story.tsx @@ -1,4 +1,4 @@ -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/closed.story.tsx index 33e6bd04bb0..0ada61ab62f 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type InputHTMLAttributes, type RefObject } from "react"; -import * as StyledNumberInput from "./number-input"; +import * as StyledNumberInput from "../number-input"; export interface NumberInputProps extends StyledNumberInput.RootProps { rootRef?: RefObject; diff --git a/libs/@hashintel/ds-components/src/beta/number-input/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/controlled.story.tsx index 049598c9e36..f8d941b18a6 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { const [value, setValue] = useState("10"); diff --git a/libs/@hashintel/ds-components/src/beta/number-input/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/disabled.story.tsx index d97cad9cc4a..e6e4c492d8b 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/disabled.story.tsx @@ -1,4 +1,4 @@ -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/element.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/element.story.tsx index cb82fd6e9a1..f50015efb97 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/element.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/element.story.tsx @@ -1,7 +1,7 @@ import { DollarSignIcon } from "lucide-react"; -import { InputGroup } from "../input-group/input-group"; -import * as NumberInput from "./number-input"; +import { InputGroup } from "../input-group"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/formatting.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/formatting.story.tsx index c04c96e04d0..270fe74f384 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/formatting.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/formatting.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/helper-text.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/helper-text.story.tsx index c4279e0c820..79fdbeb0462 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/helper-text.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/helper-text.story.tsx @@ -1,5 +1,5 @@ -import * as Field from "../field/field"; -import * as NumberInput from "./number-input"; +import * as Field from "../field"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/invalid.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/invalid.story.tsx index 32c2af7c4c1..a754e95011b 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/invalid.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/invalid.story.tsx @@ -1,5 +1,5 @@ -import * as Field from "../field/field"; -import * as NumberInput from "./number-input"; +import * as Field from "../field"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/min-max.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/min-max.story.tsx index 2ffbb8672ee..3e8e9508ef1 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/min-max.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/min-max.story.tsx @@ -1,4 +1,4 @@ -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/mouse-wheel.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/mouse-wheel.story.tsx index 2068c9f2284..94bc9b7241a 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/mouse-wheel.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/mouse-wheel.story.tsx @@ -1,4 +1,4 @@ -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/number-input.stories.ts b/libs/@hashintel/ds-components/src/beta/number-input/number-input.stories.ts deleted file mode 100644 index 1df6402f677..00000000000 --- a/libs/@hashintel/ds-components/src/beta/number-input/number-input.stories.ts +++ /dev/null @@ -1,14 +0,0 @@ -export default { title: "Primitives/NumberInput" }; - -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as disabled } from "./disabled.story"; -export { App as element } from "./element.story"; -export { App as formatting } from "./formatting.story"; -export { App as helperText } from "./helper-text.story"; -export { App as invalid } from "./invalid.story"; -export { App as minMax } from "./min-max.story"; -export { App as mouseWheel } from "./mouse-wheel.story"; -export { App as scrubber } from "./scrubber.story"; -export { App as sizes } from "./sizes.story"; -export { App as step } from "./step.story"; diff --git a/libs/@hashintel/ds-components/src/beta/number-input/scrubber.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/scrubber.story.tsx index 0af19f7eae0..6cf0fdcd3a0 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/scrubber.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/scrubber.story.tsx @@ -1,7 +1,7 @@ import { ArrowLeftRightIcon } from "lucide-react"; -import { InputGroup } from "../input-group/input-group"; -import * as NumberInput from "./number-input"; +import { InputGroup } from "../input-group"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/number-input/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/sizes.story.tsx index 266dc2f4bcb..d156c7832c8 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { const sizes = ["sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/number-input/step.story.tsx b/libs/@hashintel/ds-components/src/beta/number-input/step.story.tsx index cc5754e4baa..0c4a8204491 100644 --- a/libs/@hashintel/ds-components/src/beta/number-input/step.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/number-input/step.story.tsx @@ -1,4 +1,4 @@ -import * as NumberInput from "./number-input"; +import * as NumberInput from "../number-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pagination.recipe.ts b/libs/@hashintel/ds-components/src/beta/pagination.recipe.ts new file mode 100644 index 00000000000..e4d6d201bc6 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/pagination.recipe.ts @@ -0,0 +1,14 @@ +import { paginationAnatomy } from "@ark-ui/react/anatomy"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; + +const paginationSlotRecipeDefinition = { + className: "pagination", + slots: paginationAnatomy.keys(), + base: {}, +} as const; + +export const paginationSlotRecipe = sva(paginationSlotRecipeDefinition); + +export type PaginationSlotRecipeProps = RecipeVariantProps< + typeof paginationSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/pagination.stories.ts b/libs/@hashintel/ds-components/src/beta/pagination.stories.ts new file mode 100644 index 00000000000..9de5db8b1a1 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/pagination.stories.ts @@ -0,0 +1,3 @@ +export default { title: "Primitives/Pagination" }; + +export { App as basic } from "./pagination/basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/pagination/pagination.tsx b/libs/@hashintel/ds-components/src/beta/pagination.tsx similarity index 94% rename from libs/@hashintel/ds-components/src/beta/pagination/pagination.tsx rename to libs/@hashintel/ds-components/src/beta/pagination.tsx index 3b0bce4e6d4..51f8006841f 100644 --- a/libs/@hashintel/ds-components/src/beta/pagination/pagination.tsx +++ b/libs/@hashintel/ds-components/src/beta/pagination.tsx @@ -4,13 +4,13 @@ import { Pagination, usePaginationContext } from "@ark-ui/react/pagination"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { pagination } from "@hashintel/ds-helpers/recipes"; import { EllipsisIcon } from "lucide-react"; import type { ComponentProps } from "react"; -import { IconButton } from "../icon-button/icon-button"; +import { IconButton } from "./icon-button"; +import { paginationSlotRecipe } from "./pagination.recipe"; -const { withProvider, withContext } = createStyleContext(pagination); +const { withProvider, withContext } = createStyleContext(paginationSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Pagination.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/pagination/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/pagination/basic.story.tsx index 80ee44d28fd..ce0d4ca4e87 100644 --- a/libs/@hashintel/ds-components/src/beta/pagination/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pagination/basic.story.tsx @@ -2,9 +2,9 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; -import { ButtonGroup } from "../button/button"; -import { IconButton } from "../icon-button/icon-button"; -import * as Pagination from "./pagination"; +import { ButtonGroup } from "../button"; +import { IconButton } from "../icon-button"; +import * as Pagination from "../pagination"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pagination/pagination.recipe.ts b/libs/@hashintel/ds-components/src/beta/pagination/pagination.recipe.ts deleted file mode 100644 index 1080b1e3ac3..00000000000 --- a/libs/@hashintel/ds-components/src/beta/pagination/pagination.recipe.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { paginationAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; - -export const pagination = defineSlotRecipe({ - className: "pagination", - slots: paginationAnatomy.keys(), - base: {}, -}); diff --git a/libs/@hashintel/ds-components/src/beta/pagination/pagination.stories.ts b/libs/@hashintel/ds-components/src/beta/pagination/pagination.stories.ts deleted file mode 100644 index 2fc870d6ee8..00000000000 --- a/libs/@hashintel/ds-components/src/beta/pagination/pagination.stories.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { title: "Primitives/Pagination" }; - -export { App as basic } from "./basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/password-input/password-input.recipe.ts b/libs/@hashintel/ds-components/src/beta/password-input/password-input.recipe.ts index 02e93e28ae7..22ede03474a 100644 --- a/libs/@hashintel/ds-components/src/beta/password-input/password-input.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/password-input/password-input.recipe.ts @@ -1,7 +1,7 @@ import { passwordInputAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const passwordInput = defineSlotRecipe({ +export const passwordInputSlotRecipe = sva({ className: "password-input", slots: passwordInputAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/pin-input.recipe.ts b/libs/@hashintel/ds-components/src/beta/pin-input.recipe.ts new file mode 100644 index 00000000000..f703a2c7e24 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/pin-input.recipe.ts @@ -0,0 +1,61 @@ +import { pinInputAnatomy } from "@ark-ui/react/anatomy"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; + +import { inputRecipeConfig } from "./input.recipe"; + +const pinInputSlotRecipeDefinition = { + className: "pin-input", + slots: pinInputAnatomy.keys(), + base: { + input: { + ...inputRecipeConfig.base, + textAlign: "center", + width: "var(--input-height)", + px: "1!", + }, + control: { + display: "inline-flex", + gap: "2", + isolation: "isolate", + }, + }, + defaultVariants: { + size: "md", + variant: "outline", + }, + + variants: { + size: { + xs: { + input: inputRecipeConfig.variants.size.xs, + }, + sm: { + input: inputRecipeConfig.variants.size.sm, + }, + md: { + input: inputRecipeConfig.variants.size.md, + }, + lg: { + input: inputRecipeConfig.variants.size.lg, + }, + xl: { + input: inputRecipeConfig.variants.size.xl, + }, + "2xl": { + input: inputRecipeConfig.variants.size["2xl"], + }, + }, + variant: { + outline: { input: inputRecipeConfig.variants.variant.outline }, + subtle: { input: inputRecipeConfig.variants.variant.subtle }, + flushed: { input: inputRecipeConfig.variants.variant.flushed }, + }, + }, +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const pinInputSlotRecipe = sva(pinInputSlotRecipeDefinition); + +export type PinInputSlotRecipeProps = RecipeVariantProps< + typeof pinInputSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/pin-input.stories.ts b/libs/@hashintel/ds-components/src/beta/pin-input.stories.ts new file mode 100644 index 00000000000..cb09dd5684b --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/pin-input.stories.ts @@ -0,0 +1,12 @@ +export default { title: "Primitives/PinInput" }; + +export { App as alphanumeric } from "./pin-input/alphanumberic.story"; +export { App as attached } from "./pin-input/attached.story"; +export { App as basic } from "./pin-input/basic.story"; +export { App as controlled } from "./pin-input/controlled.story"; +export { App as field } from "./pin-input/field.story"; +export { App as mask } from "./pin-input/mask.story"; +export { App as otp } from "./pin-input/otp.story"; +export { App as placeholder } from "./pin-input/placeholder.story"; +export { App as sizes } from "./pin-input/sizes.story"; +export { App as variants } from "./pin-input/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.tsx b/libs/@hashintel/ds-components/src/beta/pin-input.tsx similarity index 91% rename from libs/@hashintel/ds-components/src/beta/pin-input/pin-input.tsx rename to libs/@hashintel/ds-components/src/beta/pin-input.tsx index 0611467fa54..fcf0acf5134 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input.tsx @@ -2,10 +2,11 @@ import { PinInput } from "@ark-ui/react/pin-input"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { pinInput } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(pinInput); +import { pinInputSlotRecipe } from "./pin-input.recipe"; + +const { withProvider, withContext } = createStyleContext(pinInputSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(PinInput.Root, "root", { diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/alphanumberic.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/alphanumberic.story.tsx index 2780ec2839f..812fa8eb3ef 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/alphanumberic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/alphanumberic.story.tsx @@ -1,4 +1,4 @@ -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/attached.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/attached.story.tsx index 17d03b48fea..ff1ec553fa5 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/attached.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/attached.story.tsx @@ -1,5 +1,5 @@ -import { Group } from "../group/group"; -import * as PinInput from "./pin-input"; +import { Group } from "../group"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/basic.story.tsx index 9d95252080a..39b92bc0e5f 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/basic.story.tsx @@ -1,4 +1,4 @@ -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/closed.story.tsx index 383e52627f8..7cd0aba2983 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/closed.story.tsx @@ -2,8 +2,8 @@ import { forwardRef, type InputHTMLAttributes, type RefObject } from "react"; -import { Group } from "../group/group"; -import * as StyledPinInput from "./pin-input"; +import { Group } from "../group"; +import * as StyledPinInput from "../pin-input"; export interface PinInputProps extends StyledPinInput.RootProps { rootRef?: RefObject; diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/controlled.story.tsx index c9b069cb73d..7fd858d7627 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { const [value, setValue] = useState(["", "", "", ""]); diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/field.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/field.story.tsx index c4d438377e5..c2c0879d599 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/field.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/field.story.tsx @@ -1,5 +1,5 @@ -import * as Field from "../field/field"; -import * as PinInput from "./pin-input"; +import * as Field from "../field"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/mask.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/mask.story.tsx index 3774ebef0df..2e9695711ca 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/mask.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/mask.story.tsx @@ -1,4 +1,4 @@ -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/otp.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/otp.story.tsx index 94f9b498353..f3dbf15f7f3 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/otp.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/otp.story.tsx @@ -1,4 +1,4 @@ -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.recipe.ts b/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.recipe.ts deleted file mode 100644 index 346107d474b..00000000000 --- a/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.recipe.ts +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unnecessary-condition */ - -import { pinInputAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; - -import { input } from "../input/input.recipe"; - -export const pinInput = defineSlotRecipe({ - className: "pin-input", - slots: pinInputAnatomy.keys(), - base: { - input: { - ...input.base, - textAlign: "center", - width: "var(--input-height)", - px: "1!", - }, - control: { - display: "inline-flex", - gap: "2", - isolation: "isolate", - }, - }, - defaultVariants: { - size: "md", - variant: "outline", - }, - - variants: { - size: { - xs: { - input: input.variants?.size?.xs, - }, - sm: { - input: input.variants?.size?.sm, - }, - md: { - input: input.variants?.size?.md, - }, - lg: { - input: input.variants?.size?.lg, - }, - xl: { - input: input.variants?.size?.xl, - }, - "2xl": { - input: input.variants?.size?.["2xl"], - }, - }, - variant: { - outline: { input: input.variants?.variant?.outline }, - subtle: { input: input.variants?.variant?.subtle }, - flushed: { input: input.variants?.variant?.flushed }, - }, - }, -}); diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.stories.ts b/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.stories.ts deleted file mode 100644 index b3eec404a01..00000000000 --- a/libs/@hashintel/ds-components/src/beta/pin-input/pin-input.stories.ts +++ /dev/null @@ -1,12 +0,0 @@ -export default { title: "Primitives/PinInput" }; - -export { App as alphanumeric } from "./alphanumberic.story"; -export { App as attached } from "./attached.story"; -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as field } from "./field.story"; -export { App as mask } from "./mask.story"; -export { App as otp } from "./otp.story"; -export { App as placeholder } from "./placeholder.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/placeholder.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/placeholder.story.tsx index c3358adea55..4028b1eff36 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/placeholder.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/placeholder.story.tsx @@ -1,4 +1,4 @@ -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/sizes.story.tsx index 91d68c9bb82..b8f7fab9762 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { const sizes = ["sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/pin-input/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/pin-input/variants.story.tsx index 8f3a930d408..2b56f16c6be 100644 --- a/libs/@hashintel/ds-components/src/beta/pin-input/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/pin-input/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as PinInput from "./pin-input"; +import * as PinInput from "../pin-input"; export const App = () => { const variants = ["outline", "subtle", "flushed"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/popover/popover.recipe.ts b/libs/@hashintel/ds-components/src/beta/popover.recipe.ts similarity index 81% rename from libs/@hashintel/ds-components/src/beta/popover/popover.recipe.ts rename to libs/@hashintel/ds-components/src/beta/popover.recipe.ts index b43a9853b2c..9321d4c16b1 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/popover.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/popover.recipe.ts @@ -1,7 +1,7 @@ import { popoverAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const popover = defineSlotRecipe({ +const popoverSlotRecipeDefinition = { className: "popover", slots: popoverAnatomy.extendWith("header", "body", "footer").keys(), base: { @@ -73,4 +73,11 @@ export const popover = defineSlotRecipe({ borderInlineStartWidth: "0.5px", }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const popoverSlotRecipe = sva(popoverSlotRecipeDefinition); + +export type PopoverSlotRecipeProps = RecipeVariantProps< + typeof popoverSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/popover.stories.ts b/libs/@hashintel/ds-components/src/beta/popover.stories.ts new file mode 100644 index 00000000000..b54d636f662 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/popover.stories.ts @@ -0,0 +1,13 @@ +export default { title: "Primitives/Popover" }; + +export { App as basic } from "./popover/basic.story"; +export { App as controlled } from "./popover/controlled.story"; +export { App as customBackground } from "./popover/custom-background.story"; +export { App as dialog } from "./popover/dialog.story"; +export { App as form } from "./popover/form.story"; +export { App as initialFocus } from "./popover/initial-focus.story"; +export { App as lazyMount } from "./popover/lazy-mount.story"; +export { App as nested } from "./popover/nested.story"; +export { App as offset } from "./popover/offset.story"; +export { App as placement } from "./popover/placement.story"; +export { App as sameWidth } from "./popover/same-width.story"; diff --git a/libs/@hashintel/ds-components/src/beta/popover/popover.tsx b/libs/@hashintel/ds-components/src/beta/popover.tsx similarity index 95% rename from libs/@hashintel/ds-components/src/beta/popover/popover.tsx rename to libs/@hashintel/ds-components/src/beta/popover.tsx index 51e13e4cc42..acc9443d692 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/popover.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover.tsx @@ -3,10 +3,11 @@ import { ark } from "@ark-ui/react/factory"; import { Popover } from "@ark-ui/react/popover"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { popover } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withRootProvider, withContext } = createStyleContext(popover); +import { popoverSlotRecipe } from "./popover.recipe"; + +const { withRootProvider, withContext } = createStyleContext(popoverSlotRecipe); export type RootProps = ComponentProps; export const Root = withRootProvider(Popover.Root, { diff --git a/libs/@hashintel/ds-components/src/beta/popover/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/basic.story.tsx index 208ddefa276..6cc77ee51c5 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/basic.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/controlled.story.tsx index 44de1294f7e..5d55a18ab10 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/controlled.story.tsx @@ -3,9 +3,9 @@ import { Portal } from "@ark-ui/react/portal"; import { useState } from "react"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { const [open, setOpen] = useState(false); diff --git a/libs/@hashintel/ds-components/src/beta/popover/custom-background.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/custom-background.story.tsx index 7c8ad788714..e7a2fb0a2eb 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/custom-background.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/custom-background.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/dialog.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/dialog.story.tsx index f351721da3e..13d77104d36 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/dialog.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/dialog.story.tsx @@ -1,9 +1,9 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Dialog from "../dialog/dialog"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Dialog from "../dialog"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/form.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/form.story.tsx index 11576d66ce6..047225991a0 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/form.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/form.story.tsx @@ -1,11 +1,11 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import { Textarea } from "../textarea/textarea"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Field from "../field"; +import { Input } from "../input"; +import * as Popover from "../popover"; +import { Textarea } from "../textarea"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/initial-focus.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/initial-focus.story.tsx index 85da958c0f7..af7af18476c 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/initial-focus.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/initial-focus.story.tsx @@ -3,12 +3,12 @@ import { Portal } from "@ark-ui/react/portal"; import { useRef } from "react"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Field from "../field/field"; -import { Input } from "../input/input"; -import { Textarea } from "../textarea/textarea"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Field from "../field"; +import { Input } from "../input"; +import * as Popover from "../popover"; +import { Textarea } from "../textarea"; export const App = () => { const ref = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/popover/lazy-mount.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/lazy-mount.story.tsx index 530bd07abd9..720fd92645b 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/lazy-mount.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/lazy-mount.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/nested.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/nested.story.tsx index b1bf55f4632..4755be9ac7f 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/nested.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/nested.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/offset.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/offset.story.tsx index 38aac30ff5b..91a6c392aac 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/offset.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/offset.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/placement.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/placement.story.tsx index a249c9d05b9..e08fb406ab1 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/placement.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/placement.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/popover/popover.stories.ts b/libs/@hashintel/ds-components/src/beta/popover/popover.stories.ts deleted file mode 100644 index d0731b2e59a..00000000000 --- a/libs/@hashintel/ds-components/src/beta/popover/popover.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -export default { title: "Primitives/Popover" }; - -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as customBackground } from "./custom-background.story"; -export { App as dialog } from "./dialog.story"; -export { App as form } from "./form.story"; -export { App as initialFocus } from "./initial-focus.story"; -export { App as lazyMount } from "./lazy-mount.story"; -export { App as nested } from "./nested.story"; -export { App as offset } from "./offset.story"; -export { App as placement } from "./placement.story"; -export { App as sameWidth } from "./same-width.story"; diff --git a/libs/@hashintel/ds-components/src/beta/popover/same-width.story.tsx b/libs/@hashintel/ds-components/src/beta/popover/same-width.story.tsx index a25825c035f..f44712078c4 100644 --- a/libs/@hashintel/ds-components/src/beta/popover/same-width.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/popover/same-width.story.tsx @@ -1,8 +1,8 @@ import { Portal } from "@ark-ui/react/portal"; -import { Button } from "../button/button"; -import { CloseButton } from "../close-button/close-button"; -import * as Popover from "./popover"; +import { Button } from "../button"; +import { CloseButton } from "../close-button"; +import * as Popover from "../popover"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/progress/progress.recipe.ts b/libs/@hashintel/ds-components/src/beta/progress.recipe.ts similarity index 86% rename from libs/@hashintel/ds-components/src/beta/progress/progress.recipe.ts rename to libs/@hashintel/ds-components/src/beta/progress.recipe.ts index b4f28ebb18b..29e84cc1435 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/progress.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/progress.recipe.ts @@ -1,7 +1,7 @@ import { progressAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const progress = defineSlotRecipe({ +const progressSlotRecipeDefinition = { slots: progressAnatomy.keys(), className: "progress", base: { @@ -117,4 +117,11 @@ export const progress = defineSlotRecipe({ size: "md", shape: "rounded", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const progressSlotRecipe = sva(progressSlotRecipeDefinition); + +export type ProgressSlotRecipeProps = RecipeVariantProps< + typeof progressSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/progress.stories.ts b/libs/@hashintel/ds-components/src/beta/progress.stories.ts new file mode 100644 index 00000000000..7cd7ca74386 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/progress.stories.ts @@ -0,0 +1,11 @@ +export default { title: "Primitives/Progress" }; + +export { App as animated } from "./progress/animated.story"; +export { App as basic } from "./progress/basic.story"; +export { App as colors } from "./progress/colors.story"; +export { App as indeterminate } from "./progress/indeterminate.story"; +export { App as label } from "./progress/label.story"; +export { App as shapes } from "./progress/shapes.story"; +export { App as sizes } from "./progress/sizes.story"; +export { App as stripes } from "./progress/stripes.story"; +export { App as variants } from "./progress/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/progress/progress.tsx b/libs/@hashintel/ds-components/src/beta/progress.tsx similarity index 93% rename from libs/@hashintel/ds-components/src/beta/progress/progress.tsx rename to libs/@hashintel/ds-components/src/beta/progress.tsx index 68f8707964d..e43a30d47b8 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/progress.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress.tsx @@ -2,10 +2,11 @@ import { Progress } from "@ark-ui/react/progress"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { progress } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(progress); +import { progressSlotRecipe } from "./progress.recipe"; + +const { withProvider, withContext } = createStyleContext(progressSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Progress.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/progress/animated.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/animated.story.tsx index ddd9fad1ce6..d4ebfe642d6 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/animated.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/animated.story.tsx @@ -1,4 +1,4 @@ -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/progress/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/basic.story.tsx index 8c5a8c49611..924ef36c670 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/progress/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/closed.story.tsx index bd2ab39c57b..e68f70ed996 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type ReactNode } from "react"; -import * as StyledProgress from "./progress"; +import * as StyledProgress from "../progress"; interface ProgressProps extends StyledProgress.RootProps { showValueText?: boolean; diff --git a/libs/@hashintel/ds-components/src/beta/progress/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/colors.story.tsx index 33265cf3f79..9c4e1b55486 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/colors.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { const colors = ["blue", "green", "amber", "red"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/progress/indeterminate.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/indeterminate.story.tsx index 682c9f336c2..2825fe16442 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/indeterminate.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/indeterminate.story.tsx @@ -1,4 +1,4 @@ -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/progress/label.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/label.story.tsx index 32dd2da477e..dd848174ea0 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/label.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/label.story.tsx @@ -1,6 +1,6 @@ import { HStack } from "@hashintel/ds-helpers/jsx"; -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/progress/progress.stories.ts b/libs/@hashintel/ds-components/src/beta/progress/progress.stories.ts deleted file mode 100644 index 77575fa7de4..00000000000 --- a/libs/@hashintel/ds-components/src/beta/progress/progress.stories.ts +++ /dev/null @@ -1,11 +0,0 @@ -export default { title: "Primitives/Progress" }; - -export { App as animated } from "./animated.story"; -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as indeterminate } from "./indeterminate.story"; -export { App as label } from "./label.story"; -export { App as shapes } from "./shapes.story"; -export { App as sizes } from "./sizes.story"; -export { App as stripes } from "./stripes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/progress/shapes.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/shapes.story.tsx index 3db09d72b71..9b60285b744 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/shapes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/shapes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { const shapes = ["rounded", "full", "square"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/progress/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/sizes.story.tsx index 7daec4db723..a55bcde8830 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/progress/stripes.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/stripes.story.tsx index afcb77c3f97..8bb7a495197 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/stripes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/stripes.story.tsx @@ -1,4 +1,4 @@ -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/progress/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/progress/variants.story.tsx index aeff212cc40..e3d589ff204 100644 --- a/libs/@hashintel/ds-components/src/beta/progress/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/progress/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Progress from "./progress"; +import * as Progress from "../progress"; export const App = () => { const variants = ["solid", "subtle"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/qr-code/qr-code.recipe.ts b/libs/@hashintel/ds-components/src/beta/qr-code/qr-code.recipe.ts index a832598a1af..61425968d51 100644 --- a/libs/@hashintel/ds-components/src/beta/qr-code/qr-code.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/qr-code/qr-code.recipe.ts @@ -1,7 +1,7 @@ import { qrCodeAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const qrCode = defineSlotRecipe({ +export const qrCodeSlotRecipe = sva({ className: "qr-code", slots: qrCodeAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.recipe.ts b/libs/@hashintel/ds-components/src/beta/radio-card-group.recipe.ts similarity index 89% rename from libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.recipe.ts rename to libs/@hashintel/ds-components/src/beta/radio-card-group.recipe.ts index 006a96ee542..6463193ba85 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/radio-card-group.recipe.ts @@ -1,7 +1,7 @@ import { radioGroupAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const radioCardGroup = defineSlotRecipe({ +const radioCardGroupSlotRecipeDefinition = { className: "radio-card-group", slots: radioGroupAnatomy.keys(), base: { @@ -145,4 +145,11 @@ export const radioCardGroup = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const radioCardGroupSlotRecipe = sva(radioCardGroupSlotRecipeDefinition); + +export type RadioCardGroupSlotRecipeProps = RecipeVariantProps< + typeof radioCardGroupSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/radio-card-group.stories.ts b/libs/@hashintel/ds-components/src/beta/radio-card-group.stories.ts new file mode 100644 index 00000000000..5924d627b0d --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/radio-card-group.stories.ts @@ -0,0 +1,4 @@ +export default { title: "Primitives/RadioCardGroup" }; + +export { App as basic } from "./radio-card-group/basic.story"; +export { App as variants } from "./radio-card-group/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.tsx b/libs/@hashintel/ds-components/src/beta/radio-card-group.tsx similarity index 84% rename from libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.tsx rename to libs/@hashintel/ds-components/src/beta/radio-card-group.tsx index 4701115e1dc..aeb16d523a9 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-card-group.tsx @@ -2,10 +2,13 @@ import { RadioGroup } from "@ark-ui/react/radio-group"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { radioCardGroup } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(radioCardGroup); +import { radioCardGroupSlotRecipe } from "./radio-card-group.recipe"; + +const { withProvider, withContext } = createStyleContext( + radioCardGroupSlotRecipe, +); export type RootProps = ComponentProps; export const Root = withProvider(RadioGroup.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/radio-card-group/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-card-group/basic.story.tsx index 12b0ae68cb1..95f9e17e76e 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-card-group/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-card-group/basic.story.tsx @@ -1,6 +1,6 @@ import { HStack } from "@hashintel/ds-helpers/jsx"; -import * as RadioCardGroup from "./radio-card-group"; +import * as RadioCardGroup from "../radio-card-group"; const items = [ { value: "react", title: "React" }, diff --git a/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.stories.ts b/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.stories.ts deleted file mode 100644 index 7d07cce42ee..00000000000 --- a/libs/@hashintel/ds-components/src/beta/radio-card-group/radio-card-group.stories.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default { title: "Primitives/RadioCardGroup" }; - -export { App as basic } from "./basic.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/radio-card-group/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-card-group/variants.story.tsx index 4f2f7fb6c0b..4007b1edd85 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-card-group/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-card-group/variants.story.tsx @@ -1,6 +1,6 @@ import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; -import * as RadioCardGroup from "./radio-card-group"; +import * as RadioCardGroup from "../radio-card-group"; const items = [ { value: "react", title: "React" }, diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.recipe.ts b/libs/@hashintel/ds-components/src/beta/radio-group.recipe.ts similarity index 80% rename from libs/@hashintel/ds-components/src/beta/radio-group/radio-group.recipe.ts rename to libs/@hashintel/ds-components/src/beta/radio-group.recipe.ts index ed29af96425..67868dbc2e3 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/radio-group.recipe.ts @@ -1,7 +1,7 @@ import { radioGroupAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const radioGroup = defineSlotRecipe({ +const radioGroupSlotRecipeDefinition = { className: "radio-group", slots: radioGroupAnatomy.keys(), base: { @@ -79,4 +79,11 @@ export const radioGroup = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const radioGroupSlotRecipe = sva(radioGroupSlotRecipeDefinition); + +export type RadioGroupSlotRecipeProps = RecipeVariantProps< + typeof radioGroupSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/radio-group.stories.ts b/libs/@hashintel/ds-components/src/beta/radio-group.stories.ts new file mode 100644 index 00000000000..152a7ccd6c6 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/radio-group.stories.ts @@ -0,0 +1,7 @@ +export default { title: "Primitives/RadioGroup" }; + +export { App as basic } from "./radio-group/basic.story"; +export { App as colors } from "./radio-group/colors.story"; +export { App as controlled } from "./radio-group/controlled.story"; +export { App as disabled } from "./radio-group/disabled.story"; +export { App as sizes } from "./radio-group/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.tsx b/libs/@hashintel/ds-components/src/beta/radio-group.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/radio-group/radio-group.tsx rename to libs/@hashintel/ds-components/src/beta/radio-group.tsx index 8feb16138de..20add86fcb1 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group.tsx @@ -2,10 +2,11 @@ import { RadioGroup } from "@ark-ui/react/radio-group"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { radioGroup } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(radioGroup); +import { radioGroupSlotRecipe } from "./radio-group.recipe"; + +const { withProvider, withContext } = createStyleContext(radioGroupSlotRecipe); export type RootProps = ComponentProps; export type ItemProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-group/basic.story.tsx index 477224f1c19..5b0bb88b29f 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group/basic.story.tsx @@ -1,4 +1,4 @@ -import * as RadioGroup from "./radio-group"; +import * as RadioGroup from "../radio-group"; const items = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-group/closed.story.tsx index 1ba04a33dca..aa432a55e55 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type InputHTMLAttributes } from "react"; -import * as StyledRadioGroup from "./radio-group"; +import * as StyledRadioGroup from "../radio-group"; export interface RadioProps extends StyledRadioGroup.ItemProps { inputProps?: InputHTMLAttributes; diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-group/colors.story.tsx index 1a740786d4b..8be35d9e82a 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group/colors.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as RadioGroup from "./radio-group"; +import * as RadioGroup from "../radio-group"; const items = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-group/controlled.story.tsx index 37b2b4cb270..bf3f82d4543 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as RadioGroup from "./radio-group"; +import * as RadioGroup from "../radio-group"; const items = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-group/disabled.story.tsx index 42e7e9becf9..dcaa97995d8 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group/disabled.story.tsx @@ -1,4 +1,4 @@ -import * as RadioGroup from "./radio-group"; +import * as RadioGroup from "../radio-group"; const items = [ { label: "React", value: "react" }, diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.stories.ts b/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.stories.ts deleted file mode 100644 index 00b7f5a5a8f..00000000000 --- a/libs/@hashintel/ds-components/src/beta/radio-group/radio-group.stories.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { title: "Primitives/RadioGroup" }; - -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as controlled } from "./controlled.story"; -export { App as disabled } from "./disabled.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/radio-group/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/radio-group/sizes.story.tsx index f5785b1ed8e..984835a3335 100644 --- a/libs/@hashintel/ds-components/src/beta/radio-group/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/radio-group/sizes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as RadioGroup from "./radio-group"; +import * as RadioGroup from "../radio-group"; export const App = () => { const sizes = ["sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.recipe.ts b/libs/@hashintel/ds-components/src/beta/rating-group.recipe.ts similarity index 82% rename from libs/@hashintel/ds-components/src/beta/rating-group/rating-group.recipe.ts rename to libs/@hashintel/ds-components/src/beta/rating-group.recipe.ts index b5d87dfc9b9..8d3b43e8f97 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/rating-group.recipe.ts @@ -1,7 +1,7 @@ import { ratingGroupAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const ratingGroup = defineSlotRecipe({ +const ratingGroupSlotRecipeDefinition = { className: "rating-group", slots: ratingGroupAnatomy.extendWith("itemIndicator").keys(), base: { @@ -80,4 +80,11 @@ export const ratingGroup = defineSlotRecipe({ defaultVariants: { size: "md", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const ratingGroupSlotRecipe = sva(ratingGroupSlotRecipeDefinition); + +export type RatingGroupSlotRecipeProps = RecipeVariantProps< + typeof ratingGroupSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/rating-group.stories.ts b/libs/@hashintel/ds-components/src/beta/rating-group.stories.ts new file mode 100644 index 00000000000..d82b660d1be --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/rating-group.stories.ts @@ -0,0 +1,10 @@ +export default { title: "Primitives/RatingGroup" }; + +export { App as basic } from "./rating-group/basic.story"; +export { App as colors } from "./rating-group/colors.story"; +export { App as controlled } from "./rating-group/controlled.story"; +export { App as customIcon } from "./rating-group/custom-icon.story"; +export { App as half } from "./rating-group/half.story"; +export { App as label } from "./rating-group/label.story"; +export { App as readOnly } from "./rating-group/read-only.story"; +export { App as sizes } from "./rating-group/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.tsx b/libs/@hashintel/ds-components/src/beta/rating-group.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/rating-group/rating-group.tsx rename to libs/@hashintel/ds-components/src/beta/rating-group.tsx index 0e0308afc9f..428aac8682b 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group.tsx @@ -11,7 +11,6 @@ import { createStyleContext, type HTMLStyledProps, } from "@hashintel/ds-helpers/jsx"; -import { ratingGroup } from "@hashintel/ds-helpers/recipes"; import { StarIcon } from "lucide-react"; import { cloneElement, @@ -21,7 +20,9 @@ import { type ReactElement, } from "react"; -const { withProvider, withContext } = createStyleContext(ratingGroup); +import { ratingGroupSlotRecipe } from "./rating-group.recipe"; + +const { withProvider, withContext } = createStyleContext(ratingGroupSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(RatingGroup.Root, "root"); @@ -80,8 +81,8 @@ interface ItemsProps extends Omit, "index"> { export const Items = (props: ItemsProps) => { const { icon, ...rest } = props; - const ratingGroup = useRatingGroupContext(); - return ratingGroup.items.map((item) => ( + const ratingGroupSlotRecipe = useRatingGroupContext(); + return ratingGroupSlotRecipe.items.map((item) => ( diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/basic.story.tsx index 657c17ba3db..a09a10ad4d3 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/basic.story.tsx @@ -1,4 +1,4 @@ -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/closed.story.tsx index 0bc418c7d03..ced16bc3ac8 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/closed.story.tsx @@ -1,6 +1,6 @@ import { forwardRef, type ReactElement, type ReactNode } from "react"; -import * as StyledRatingGroup from "./rating-group"; +import * as StyledRatingGroup from "../rating-group"; export interface RatingProps extends StyledRatingGroup.RootProps { icon?: ReactElement; diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/colors.story.tsx index ec914654c98..5261595f710 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/colors.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { const colors = ["blue", "green", "amber", "red"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/controlled.story.tsx index 6c576dad590..c5c01fa4dbb 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { const [value, setValue] = useState(3); diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/custom-icon.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/custom-icon.story.tsx index fd3aaf01430..e1a9debae0a 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/custom-icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/custom-icon.story.tsx @@ -1,6 +1,6 @@ import { HeartIcon } from "lucide-react"; -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/half.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/half.story.tsx index 8441bc076b8..9494f7c12f3 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/half.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/half.story.tsx @@ -1,4 +1,4 @@ -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/label.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/label.story.tsx index c1a590c8cf4..e9a38833802 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/label.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/label.story.tsx @@ -1,4 +1,4 @@ -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.stories.ts b/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.stories.ts deleted file mode 100644 index e84a96d8f21..00000000000 --- a/libs/@hashintel/ds-components/src/beta/rating-group/rating-group.stories.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { title: "Primitives/RatingGroup" }; - -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as controlled } from "./controlled.story"; -export { App as customIcon } from "./custom-icon.story"; -export { App as half } from "./half.story"; -export { App as label } from "./label.story"; -export { App as readOnly } from "./read-only.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/read-only.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/read-only.story.tsx index 8a644ba4667..ee0dca8a643 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/read-only.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/read-only.story.tsx @@ -1,4 +1,4 @@ -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/rating-group/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/rating-group/sizes.story.tsx index ff7de0af551..eafe9175b85 100644 --- a/libs/@hashintel/ds-components/src/beta/rating-group/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/rating-group/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as RatingGroup from "./rating-group"; +import * as RatingGroup from "../rating-group"; export const App = () => { const sizes = ["xs", "sm", "md", "lg", "xl"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.recipe.ts b/libs/@hashintel/ds-components/src/beta/scroll-area.recipe.ts similarity index 87% rename from libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.recipe.ts rename to libs/@hashintel/ds-components/src/beta/scroll-area.recipe.ts index e02b0642686..85c330121f9 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/scroll-area.recipe.ts @@ -1,6 +1,6 @@ -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const scrollArea = defineSlotRecipe({ +const scrollAreaSlotRecipeDefinition = { className: "scroll-area", slots: ["root", "viewport", "content", "scrollbar", "thumb", "corner"], base: { @@ -116,4 +116,11 @@ export const scrollArea = defineSlotRecipe({ lg: { root: { "--thumb-size": "sizes.2.5" } }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const scrollAreaSlotRecipe = sva(scrollAreaSlotRecipeDefinition); + +export type ScrollAreaSlotRecipeProps = RecipeVariantProps< + typeof scrollAreaSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area.stories.ts b/libs/@hashintel/ds-components/src/beta/scroll-area.stories.ts new file mode 100644 index 00000000000..01180fe18a4 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/scroll-area.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/ScrollArea" }; + +export { App as basic } from "./scroll-area/basic.story"; +export { App as horizontal } from "./scroll-area/horizontal.story"; +export { App as infiniteScroll } from "./scroll-area/infinite-scroll.story"; +export { App as sizes } from "./scroll-area/sizes.story"; +export { App as variants } from "./scroll-area/variants.story"; +export { App as virtualization } from "./scroll-area/virtualization.story"; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.tsx rename to libs/@hashintel/ds-components/src/beta/scroll-area.tsx index 0f4677d49d9..241c381f266 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area.tsx @@ -2,10 +2,11 @@ import { ScrollArea } from "@ark-ui/react/scroll-area"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { scrollArea } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(scrollArea); +import { scrollAreaSlotRecipe } from "./scroll-area.recipe"; + +const { withProvider, withContext } = createStyleContext(scrollAreaSlotRecipe); export type RootProps = ComponentProps; export type ContentProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area/basic.story.tsx index 6de43bf86e4..1eb071e4a00 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area/basic.story.tsx @@ -1,6 +1,6 @@ import { loremIpsum } from "lorem-ipsum"; -import * as ScrollArea from "./scroll-area"; +import * as ScrollArea from "../scroll-area"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/horizontal.story.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area/horizontal.story.tsx index a2928596045..b4245ef3423 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/horizontal.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area/horizontal.story.tsx @@ -1,6 +1,6 @@ import { Center, HStack } from "@hashintel/ds-helpers/jsx"; -import * as ScrollArea from "./scroll-area"; +import * as ScrollArea from "../scroll-area"; export const App = () => ( diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/infinite-scroll.story.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area/infinite-scroll.story.tsx index 68a410aac63..cacb50e3008 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/infinite-scroll.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area/infinite-scroll.story.tsx @@ -4,7 +4,7 @@ import { Box, Center } from "@hashintel/ds-helpers/jsx"; import { useVirtualizer } from "@tanstack/react-virtual"; import { useEffect, useRef, useState } from "react"; -import * as ScrollArea from "./scroll-area"; +import * as ScrollArea from "../scroll-area"; export const App = () => { const scrollRef = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.stories.ts b/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.stories.ts deleted file mode 100644 index 77cee615f9c..00000000000 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/scroll-area.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/ScrollArea" }; - -export { App as basic } from "./basic.story"; -export { App as horizontal } from "./horizontal.story"; -export { App as infiniteScroll } from "./infinite-scroll.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; -export { App as virtualization } from "./virtualization.story"; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area/sizes.story.tsx index f7f2f12201e..2a8c12f56e4 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area/sizes.story.tsx @@ -1,8 +1,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { loremIpsum } from "lorem-ipsum"; -import { Heading } from "../heading/heading"; -import * as ScrollArea from "./scroll-area"; +import { Heading } from "../heading"; +import * as ScrollArea from "../scroll-area"; export const App = () => { const sizes = ["xs", "sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area/variants.story.tsx index 12c3559059c..88135709d46 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area/variants.story.tsx @@ -1,8 +1,8 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { loremIpsum } from "lorem-ipsum"; -import { Heading } from "../heading/heading"; -import * as ScrollArea from "./scroll-area"; +import { Heading } from "../heading"; +import * as ScrollArea from "../scroll-area"; export const App = () => { const variants = ["auto", "visible"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/scroll-area/virtualization.story.tsx b/libs/@hashintel/ds-components/src/beta/scroll-area/virtualization.story.tsx index 31e54dfe712..bc5469fa06a 100644 --- a/libs/@hashintel/ds-components/src/beta/scroll-area/virtualization.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/scroll-area/virtualization.story.tsx @@ -4,7 +4,7 @@ import { Box, Center } from "@hashintel/ds-helpers/jsx"; import { useVirtualizer } from "@tanstack/react-virtual"; import { useRef } from "react"; -import * as ScrollArea from "./scroll-area"; +import * as ScrollArea from "../scroll-area"; export const App = () => { const scrollRef = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.recipe.ts b/libs/@hashintel/ds-components/src/beta/segment-group.recipe.ts similarity index 87% rename from libs/@hashintel/ds-components/src/beta/segment-group/segment-group.recipe.ts rename to libs/@hashintel/ds-components/src/beta/segment-group.recipe.ts index 05db4768251..9009916aeea 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/segment-group.recipe.ts @@ -1,7 +1,7 @@ import { segmentGroupAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const segmentGroup = defineSlotRecipe({ +const segmentGroupSlotRecipeDefinition = { className: "segment-group", slots: segmentGroupAnatomy.keys(), base: { @@ -148,4 +148,11 @@ export const segmentGroup = defineSlotRecipe({ defaultVariants: { size: "md", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const segmentGroupSlotRecipe = sva(segmentGroupSlotRecipeDefinition); + +export type SegmentGroupSlotRecipeProps = RecipeVariantProps< + typeof segmentGroupSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group.stories.ts b/libs/@hashintel/ds-components/src/beta/segment-group.stories.ts new file mode 100644 index 00000000000..eb01e5d003a --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/segment-group.stories.ts @@ -0,0 +1,7 @@ +export default { title: "Primitives/SegmentGroup" }; + +export { App as basic } from "./segment-group/basic.story"; +export { App as fitted } from "./segment-group/fitted.story"; +export { App as icon } from "./segment-group/icon.story"; +export { App as sizes } from "./segment-group/sizes.story"; +export { App as vertical } from "./segment-group/vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.tsx b/libs/@hashintel/ds-components/src/beta/segment-group.tsx similarity index 92% rename from libs/@hashintel/ds-components/src/beta/segment-group/segment-group.tsx rename to libs/@hashintel/ds-components/src/beta/segment-group.tsx index 5ac748069da..7638beb338d 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.tsx +++ b/libs/@hashintel/ds-components/src/beta/segment-group.tsx @@ -4,10 +4,13 @@ import { SegmentGroup } from "@ark-ui/react/segment-group"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { segmentGroup } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, type ReactNode, useMemo } from "react"; -const { withProvider, withContext } = createStyleContext(segmentGroup); +import { segmentGroupSlotRecipe } from "./segment-group.recipe"; + +const { withProvider, withContext } = createStyleContext( + segmentGroupSlotRecipe, +); export type RootProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/segment-group/basic.story.tsx index df18375cc83..3a97444add2 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/segment-group/basic.story.tsx @@ -1,4 +1,4 @@ -import * as SegmentGroup from "./segment-group"; +import * as SegmentGroup from "../segment-group"; export const App = () => { const items = ["React", "Solid", "Svelte", "Vue"]; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/fitted.story.tsx b/libs/@hashintel/ds-components/src/beta/segment-group/fitted.story.tsx index c983d879eae..cf8754d828a 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/fitted.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/segment-group/fitted.story.tsx @@ -1,4 +1,4 @@ -import * as SegmentGroup from "./segment-group"; +import * as SegmentGroup from "../segment-group"; export const App = () => { const items = ["React", "Solid", "Svelte", "Vue"]; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/icon.story.tsx b/libs/@hashintel/ds-components/src/beta/segment-group/icon.story.tsx index 813d937f578..603a2f02dfd 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/icon.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/segment-group/icon.story.tsx @@ -1,7 +1,7 @@ import { HStack } from "@hashintel/ds-helpers/jsx"; import { Grid2X2Icon, ListIcon, TableIcon } from "lucide-react"; -import * as SegmentGroup from "./segment-group"; +import * as SegmentGroup from "../segment-group"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.stories.ts b/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.stories.ts deleted file mode 100644 index 0c876f1cb7a..00000000000 --- a/libs/@hashintel/ds-components/src/beta/segment-group/segment-group.stories.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { title: "Primitives/SegmentGroup" }; - -export { App as basic } from "./basic.story"; -export { App as fitted } from "./fitted.story"; -export { App as icon } from "./icon.story"; -export { App as sizes } from "./sizes.story"; -export { App as vertical } from "./vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/segment-group/sizes.story.tsx index 6a976a6a1ba..999e3424c06 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/segment-group/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as SegmentGroup from "./segment-group"; +import * as SegmentGroup from "../segment-group"; const items = ["React", "Solid", "Svelte", "Vue"]; diff --git a/libs/@hashintel/ds-components/src/beta/segment-group/vertical.story.tsx b/libs/@hashintel/ds-components/src/beta/segment-group/vertical.story.tsx index 1c4605de9ef..96e3246a9ab 100644 --- a/libs/@hashintel/ds-components/src/beta/segment-group/vertical.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/segment-group/vertical.story.tsx @@ -1,4 +1,4 @@ -import * as SegmentGroup from "./segment-group"; +import * as SegmentGroup from "../segment-group"; export const App = () => { const items = ["React", "Solid", "Svelte", "Vue"]; diff --git a/libs/@hashintel/ds-components/src/beta/select/select.recipe.ts b/libs/@hashintel/ds-components/src/beta/select.recipe.ts similarity index 92% rename from libs/@hashintel/ds-components/src/beta/select/select.recipe.ts rename to libs/@hashintel/ds-components/src/beta/select.recipe.ts index 25dcf643a66..bae63e5361f 100644 --- a/libs/@hashintel/ds-components/src/beta/select/select.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/select.recipe.ts @@ -1,7 +1,7 @@ import { selectAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const select = defineSlotRecipe({ +const selectSlotRecipeDefinition = { className: "select", slots: selectAnatomy.extendWith("indicatorGroup").keys(), base: { @@ -201,4 +201,9 @@ export const select = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const selectSlotRecipe = sva(selectSlotRecipeDefinition); + +export type SelectSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/select.stories.ts b/libs/@hashintel/ds-components/src/beta/select.stories.ts new file mode 100644 index 00000000000..331e5befd92 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/select.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/Select" }; + +export { App as basic } from "./select/basic.story"; +export { App as optionGroup } from "./select/option-group.story"; +export { App as sizes } from "./select/sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/select/select.tsx b/libs/@hashintel/ds-components/src/beta/select.tsx similarity index 91% rename from libs/@hashintel/ds-components/src/beta/select/select.tsx rename to libs/@hashintel/ds-components/src/beta/select.tsx index 66d7f0f6af3..2c9151c051e 100644 --- a/libs/@hashintel/ds-components/src/beta/select/select.tsx +++ b/libs/@hashintel/ds-components/src/beta/select.tsx @@ -10,14 +10,15 @@ import { useSelectItemContext, } from "@ark-ui/react/select"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { select, type SelectVariantProps } from "@hashintel/ds-helpers/recipes"; import type { HTMLStyledProps } from "@hashintel/ds-helpers/types"; import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import { forwardRef, type RefAttributes } from "react"; -const { withProvider, withContext } = createStyleContext(select); +import { selectSlotRecipe, type SelectSlotRecipeProps } from "./select.recipe"; -type StyleProps = SelectVariantProps & HTMLStyledProps<"div">; +const { withProvider, withContext } = createStyleContext(selectSlotRecipe); + +type StyleProps = SelectSlotRecipeProps & HTMLStyledProps<"div">; export type RootProps = Assign, StyleProps> & RefAttributes; diff --git a/libs/@hashintel/ds-components/src/beta/select/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/select/basic.story.tsx index 3c56562aa6d..bcbec768b38 100644 --- a/libs/@hashintel/ds-components/src/beta/select/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/select/basic.story.tsx @@ -2,7 +2,7 @@ import { createListCollection } from "@ark-ui/react/collection"; -import * as Select from "./select"; +import * as Select from "../select"; const collection = createListCollection({ items: ["React", "Vue", "Svelte", "Angular"], diff --git a/libs/@hashintel/ds-components/src/beta/select/option-group.story.tsx b/libs/@hashintel/ds-components/src/beta/select/option-group.story.tsx index 9032e56381d..eb27034c25c 100644 --- a/libs/@hashintel/ds-components/src/beta/select/option-group.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/select/option-group.story.tsx @@ -3,7 +3,7 @@ import { createListCollection } from "@ark-ui/react/collection"; import { Portal } from "@ark-ui/react/portal"; -import * as Select from "./select"; +import * as Select from "../select"; const collection = createListCollection({ items: [ diff --git a/libs/@hashintel/ds-components/src/beta/select/select.stories.ts b/libs/@hashintel/ds-components/src/beta/select/select.stories.ts deleted file mode 100644 index a709cc33596..00000000000 --- a/libs/@hashintel/ds-components/src/beta/select/select.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/Select" }; - -export { App as basic } from "./basic.story"; -export { App as optionGroup } from "./option-group.story"; -export { App as sizes } from "./sizes.story"; diff --git a/libs/@hashintel/ds-components/src/beta/select/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/select/sizes.story.tsx index 32f810d6ea8..924062ffb43 100644 --- a/libs/@hashintel/ds-components/src/beta/select/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/select/sizes.story.tsx @@ -4,7 +4,7 @@ import { createListCollection } from "@ark-ui/react/collection"; import { Portal } from "@ark-ui/react/portal"; import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Select from "./select"; +import * as Select from "../select"; const frameworks = createListCollection({ items: [ diff --git a/libs/@hashintel/ds-components/src/beta/signature-pad/signature-pad.recipe.ts b/libs/@hashintel/ds-components/src/beta/signature-pad/signature-pad.recipe.ts index e01619a0284..375e14e814a 100644 --- a/libs/@hashintel/ds-components/src/beta/signature-pad/signature-pad.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/signature-pad/signature-pad.recipe.ts @@ -1,7 +1,7 @@ import { signaturePadAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const signaturePad = defineSlotRecipe({ +export const signaturePadSlotRecipe = sva({ className: "signature-pad", slots: signaturePadAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.recipe.ts b/libs/@hashintel/ds-components/src/beta/skeleton.recipe.ts similarity index 79% rename from libs/@hashintel/ds-components/src/beta/skeleton/skeleton.recipe.ts rename to libs/@hashintel/ds-components/src/beta/skeleton.recipe.ts index 9b435d19014..d3ac312fcfc 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/skeleton.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const skeleton = defineRecipe({ +const skeletonRecipeDefinition = { className: "skeleton", jsx: ["Skeleton", "SkeletonCircle", "SkeletonText"], base: {}, @@ -61,4 +61,9 @@ export const skeleton = defineRecipe({ variant: "pulse", loading: true, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const skeletonRecipe = cva(skeletonRecipeDefinition); + +export type SkeletonRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/skeleton.stories.ts b/libs/@hashintel/ds-components/src/beta/skeleton.stories.ts new file mode 100644 index 00000000000..28763a213ef --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/skeleton.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Skeleton" }; + +export { App as basic } from "./skeleton/basic.story"; +export { App as customColors } from "./skeleton/custom-colors.story"; +export { App as feed } from "./skeleton/feed.story"; +export { App as loading } from "./skeleton/loading.story"; +export { App as text } from "./skeleton/text.story"; +export { App as variants } from "./skeleton/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.tsx b/libs/@hashintel/ds-components/src/beta/skeleton.tsx similarity index 83% rename from libs/@hashintel/ds-components/src/beta/skeleton/skeleton.tsx rename to libs/@hashintel/ds-components/src/beta/skeleton.tsx index a5c2536909a..c39b992ad70 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton.tsx @@ -1,14 +1,15 @@ import { ark } from "@ark-ui/react/factory"; import { Stack, type StackProps, styled } from "@hashintel/ds-helpers/jsx"; -import { skeleton } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, forwardRef } from "react"; +import { skeletonRecipe } from "./skeleton.recipe"; + export type SkeletonProps = ComponentProps; -export const Skeleton = styled(ark.div, skeleton); +export const Skeleton = styled(ark.div, skeletonRecipe); export type SkeletonCircleProps = ComponentProps; -export const SkeletonCircle = styled(ark.div, skeleton, { - defaultProps: { circle: true }, +export const SkeletonCircle = styled(ark.div, skeletonRecipe, { + defaultProps: { circle: true } as never, }); export interface SkeletonTextProps extends SkeletonProps { diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/skeleton/basic.story.tsx index 71b15e66ceb..6cb803a1a45 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton/basic.story.tsx @@ -1,6 +1,6 @@ import { Stack, Wrap } from "@hashintel/ds-helpers/jsx"; -import { Skeleton, SkeletonCircle } from "./skeleton"; +import { Skeleton, SkeletonCircle } from "../skeleton"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/custom-colors.story.tsx b/libs/@hashintel/ds-components/src/beta/skeleton/custom-colors.story.tsx index 0f01bb16f3f..65559f1472e 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/custom-colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton/custom-colors.story.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from "./skeleton"; +import { Skeleton } from "../skeleton"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/feed.story.tsx b/libs/@hashintel/ds-components/src/beta/skeleton/feed.story.tsx index b64cff44859..2ec07fbbf2b 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/feed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton/feed.story.tsx @@ -1,6 +1,6 @@ import { HStack, Stack } from "@hashintel/ds-helpers/jsx"; -import { Skeleton, SkeletonCircle, SkeletonText } from "./skeleton"; +import { Skeleton, SkeletonCircle, SkeletonText } from "../skeleton"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/loading.story.tsx b/libs/@hashintel/ds-components/src/beta/skeleton/loading.story.tsx index 74a9f6065a8..f3b64f324a8 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/loading.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton/loading.story.tsx @@ -3,9 +3,9 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; import { useState } from "react"; -import { Button } from "../button/button"; -import { Text } from "../text/text"; -import { Skeleton } from "./skeleton"; +import { Button } from "../button"; +import { Skeleton } from "../skeleton"; +import { Text } from "../text"; export const App = () => { const [loading, setLoading] = useState(true); diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.stories.ts b/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.stories.ts deleted file mode 100644 index 86ffbe18d3c..00000000000 --- a/libs/@hashintel/ds-components/src/beta/skeleton/skeleton.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Skeleton" }; - -export { App as basic } from "./basic.story"; -export { App as customColors } from "./custom-colors.story"; -export { App as feed } from "./feed.story"; -export { App as loading } from "./loading.story"; -export { App as text } from "./text.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/text.story.tsx b/libs/@hashintel/ds-components/src/beta/skeleton/text.story.tsx index 93beacc7f58..d3a16901d41 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/text.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton/text.story.tsx @@ -1,4 +1,4 @@ -import { SkeletonText } from "./skeleton"; +import { SkeletonText } from "../skeleton"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/skeleton/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/skeleton/variants.story.tsx index 1c897dbe115..0324e8742cb 100644 --- a/libs/@hashintel/ds-components/src/beta/skeleton/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/skeleton/variants.story.tsx @@ -1,7 +1,7 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Text } from "../text/text"; -import { Skeleton } from "./skeleton"; +import { Skeleton } from "../skeleton"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/slider/slider.recipe.ts b/libs/@hashintel/ds-components/src/beta/slider.recipe.ts similarity index 90% rename from libs/@hashintel/ds-components/src/beta/slider/slider.recipe.ts rename to libs/@hashintel/ds-components/src/beta/slider.recipe.ts index 08ccc801651..2d95ff69d38 100644 --- a/libs/@hashintel/ds-components/src/beta/slider/slider.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/slider.recipe.ts @@ -1,7 +1,7 @@ import { sliderAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const slider = defineSlotRecipe({ +const sliderSlotRecipeDefinition = { className: "slider", slots: sliderAnatomy.extendWith("markerIndicator").keys(), base: { @@ -171,4 +171,9 @@ export const slider = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const sliderSlotRecipe = sva(sliderSlotRecipeDefinition); + +export type SliderSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/slider.stories.ts b/libs/@hashintel/ds-components/src/beta/slider.stories.ts new file mode 100644 index 00000000000..dcefce6cfb9 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/slider.stories.ts @@ -0,0 +1,3 @@ +export default { title: "Primitives/Slider" }; + +export { App as basic } from "./slider/basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/slider/slider.tsx b/libs/@hashintel/ds-components/src/beta/slider.tsx similarity index 90% rename from libs/@hashintel/ds-components/src/beta/slider/slider.tsx rename to libs/@hashintel/ds-components/src/beta/slider.tsx index c15806782e6..4d840f25e74 100644 --- a/libs/@hashintel/ds-components/src/beta/slider/slider.tsx +++ b/libs/@hashintel/ds-components/src/beta/slider.tsx @@ -5,10 +5,11 @@ import { ark } from "@ark-ui/react/factory"; import { Slider, useSliderContext } from "@ark-ui/react/slider"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { slider } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, forwardRef } from "react"; -const { withProvider, withContext } = createStyleContext(slider); +import { sliderSlotRecipe } from "./slider.recipe"; + +const { withProvider, withContext } = createStyleContext(sliderSlotRecipe); export const Root = withProvider(Slider.Root, "root"); export const Control = withContext(Slider.Control, "control"); @@ -59,8 +60,8 @@ export const Marks = forwardRef((props, ref) => { }); export const Thumbs = (props: Omit) => { - const slider = useSliderContext(); - return slider.value.map((_, index) => ( + const sliderSlotRecipe = useSliderContext(); + return sliderSlotRecipe.value.map((_, index) => ( diff --git a/libs/@hashintel/ds-components/src/beta/slider/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/slider/basic.story.tsx index 4063571d3e2..172a2a6c66c 100644 --- a/libs/@hashintel/ds-components/src/beta/slider/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/slider/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Slider from "./slider"; +import * as Slider from "../slider"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/slider/slider.stories.ts b/libs/@hashintel/ds-components/src/beta/slider/slider.stories.ts deleted file mode 100644 index a88404ba0d9..00000000000 --- a/libs/@hashintel/ds-components/src/beta/slider/slider.stories.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default { title: "Primitives/Slider" }; - -export { App as basic } from "./basic.story"; diff --git a/libs/@hashintel/ds-components/src/beta/span/span.tsx b/libs/@hashintel/ds-components/src/beta/span.tsx similarity index 100% rename from libs/@hashintel/ds-components/src/beta/span/span.tsx rename to libs/@hashintel/ds-components/src/beta/span.tsx diff --git a/libs/@hashintel/ds-components/src/beta/spinner/spinner.recipe.ts b/libs/@hashintel/ds-components/src/beta/spinner.recipe.ts similarity index 68% rename from libs/@hashintel/ds-components/src/beta/spinner/spinner.recipe.ts rename to libs/@hashintel/ds-components/src/beta/spinner.recipe.ts index 5d9ce856c3d..941c2cb7fb0 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/spinner.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/spinner.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const spinner = defineRecipe({ +const spinnerRecipeDefinition = { className: "spinner", base: { "--spinner-track-color": "transparent", @@ -30,4 +30,9 @@ export const spinner = defineRecipe({ "2xl": { "--spinner-size": "sizes.8" }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const spinnerRecipe = cva(spinnerRecipeDefinition); + +export type SpinnerRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/spinner.stories.ts b/libs/@hashintel/ds-components/src/beta/spinner.stories.ts new file mode 100644 index 00000000000..9c1e3883034 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/spinner.stories.ts @@ -0,0 +1,9 @@ +export default { title: "Primitives/Spinner" }; + +export { App as basic } from "./spinner/basic.story"; +export { App as colors } from "./spinner/colors.story"; +export { App as label } from "./spinner/label.story"; +export { App as sizes } from "./spinner/sizes.story"; +export { App as speed } from "./spinner/speed.story"; +export { App as thickness } from "./spinner/thickness.story"; +export { App as trackColor } from "./spinner/track-color.story"; diff --git a/libs/@hashintel/ds-components/src/beta/spinner/spinner.tsx b/libs/@hashintel/ds-components/src/beta/spinner.tsx similarity index 65% rename from libs/@hashintel/ds-components/src/beta/spinner/spinner.tsx rename to libs/@hashintel/ds-components/src/beta/spinner.tsx index dc874cc7d6b..ae8c2ed8353 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/spinner.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner.tsx @@ -1,7 +1,8 @@ import { ark } from "@ark-ui/react/factory"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { spinner } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { spinnerRecipe } from "./spinner.recipe"; + export type SpinnerProps = ComponentProps; -export const Spinner = styled(ark.span, spinner); +export const Spinner = styled(ark.span, spinnerRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/spinner/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/basic.story.tsx index 7d42e832658..18fa139f9e4 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/basic.story.tsx @@ -1,4 +1,4 @@ -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/spinner/colors.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/colors.story.tsx index 136b95e57a5..3ae7ea31cfc 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/colors.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/colors.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/spinner/label.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/label.story.tsx index a599f30a531..c3a3619799b 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/label.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/label.story.tsx @@ -1,7 +1,7 @@ import { VStack } from "@hashintel/ds-helpers/jsx"; -import { Text } from "../text/text"; -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/spinner/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/sizes.story.tsx index 9f50185ca73..53197bfad2f 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/sizes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/spinner/speed.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/speed.story.tsx index 1d9e5ac86ed..b2df270366f 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/speed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/speed.story.tsx @@ -1,4 +1,4 @@ -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/spinner/spinner.stories.ts b/libs/@hashintel/ds-components/src/beta/spinner/spinner.stories.ts deleted file mode 100644 index 9198876b31f..00000000000 --- a/libs/@hashintel/ds-components/src/beta/spinner/spinner.stories.ts +++ /dev/null @@ -1,9 +0,0 @@ -export default { title: "Primitives/Spinner" }; - -export { App as basic } from "./basic.story"; -export { App as colors } from "./colors.story"; -export { App as label } from "./label.story"; -export { App as sizes } from "./sizes.story"; -export { App as speed } from "./speed.story"; -export { App as thickness } from "./thickness.story"; -export { App as trackColor } from "./track-color.story"; diff --git a/libs/@hashintel/ds-components/src/beta/spinner/thickness.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/thickness.story.tsx index 56dabbe03ea..98e1e566cec 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/thickness.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/thickness.story.tsx @@ -1,4 +1,4 @@ -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/spinner/track-color.story.tsx b/libs/@hashintel/ds-components/src/beta/spinner/track-color.story.tsx index 00fb6fea46c..a591bb4a6fc 100644 --- a/libs/@hashintel/ds-components/src/beta/spinner/track-color.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/spinner/track-color.story.tsx @@ -1,4 +1,4 @@ -import { Spinner } from "./spinner"; +import { Spinner } from "../spinner"; export const App = () => { return ; diff --git a/libs/@hashintel/ds-components/src/beta/splitter/splitter.recipe.ts b/libs/@hashintel/ds-components/src/beta/splitter.recipe.ts similarity index 58% rename from libs/@hashintel/ds-components/src/beta/splitter/splitter.recipe.ts rename to libs/@hashintel/ds-components/src/beta/splitter.recipe.ts index 1cddfe7319e..d11c3e0e051 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/splitter.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/splitter.recipe.ts @@ -1,7 +1,7 @@ import { splitterAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const splitter = defineSlotRecipe({ +const splitterSlotRecipeDefinition = { className: "splitter", slots: splitterAnatomy.keys(), base: { @@ -29,4 +29,11 @@ export const splitter = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const splitterSlotRecipe = sva(splitterSlotRecipeDefinition); + +export type SplitterSlotRecipeProps = RecipeVariantProps< + typeof splitterSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/splitter.stories.ts b/libs/@hashintel/ds-components/src/beta/splitter.stories.ts new file mode 100644 index 00000000000..7ced1e5b872 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/splitter.stories.ts @@ -0,0 +1,7 @@ +export default { title: "Primitives/Splitter" }; + +export { App as basic } from "./splitter/basic.story"; +export { App as collapsible } from "./splitter/collapsible.story"; +export { App as multiple } from "./splitter/multiple.story"; +export { App as store } from "./splitter/store.story"; +export { App as vertical } from "./splitter/vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/splitter/splitter.tsx b/libs/@hashintel/ds-components/src/beta/splitter.tsx similarity index 90% rename from libs/@hashintel/ds-components/src/beta/splitter/splitter.tsx rename to libs/@hashintel/ds-components/src/beta/splitter.tsx index eb12710bb92..eb8e603c095 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/splitter.tsx +++ b/libs/@hashintel/ds-components/src/beta/splitter.tsx @@ -2,10 +2,11 @@ import { Splitter } from "@ark-ui/react/splitter"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { splitter } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(splitter); +import { splitterSlotRecipe } from "./splitter.recipe"; + +const { withProvider, withContext } = createStyleContext(splitterSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Splitter.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/splitter/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/splitter/basic.story.tsx index 15794b7134b..e98189ca5ef 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/splitter/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Splitter from "./splitter"; +import * as Splitter from "../splitter"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/splitter/collapsible.story.tsx b/libs/@hashintel/ds-components/src/beta/splitter/collapsible.story.tsx index d8d3e5204dd..d7fc9dc1c4d 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/collapsible.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/splitter/collapsible.story.tsx @@ -1,4 +1,4 @@ -import * as Splitter from "./splitter"; +import * as Splitter from "../splitter"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/splitter/multiple.story.tsx b/libs/@hashintel/ds-components/src/beta/splitter/multiple.story.tsx index f0a6499b102..574453a7528 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/multiple.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/splitter/multiple.story.tsx @@ -1,4 +1,4 @@ -import * as Splitter from "./splitter"; +import * as Splitter from "../splitter"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/splitter/splitter.stories.ts b/libs/@hashintel/ds-components/src/beta/splitter/splitter.stories.ts deleted file mode 100644 index 823a777c02e..00000000000 --- a/libs/@hashintel/ds-components/src/beta/splitter/splitter.stories.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { title: "Primitives/Splitter" }; - -export { App as basic } from "./basic.story"; -export { App as collapsible } from "./collapsible.story"; -export { App as multiple } from "./multiple.story"; -export { App as store } from "./store.story"; -export { App as vertical } from "./vertical.story"; diff --git a/libs/@hashintel/ds-components/src/beta/splitter/store.story.tsx b/libs/@hashintel/ds-components/src/beta/splitter/store.story.tsx index 1d766f7e5e3..97f35908399 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/store.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/splitter/store.story.tsx @@ -3,8 +3,8 @@ import { useSplitter } from "@ark-ui/react/splitter"; import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Button } from "../button/button"; -import * as Splitter from "./splitter"; +import { Button } from "../button"; +import * as Splitter from "../splitter"; export const App = () => { const splitter = useSplitter({ diff --git a/libs/@hashintel/ds-components/src/beta/splitter/vertical.story.tsx b/libs/@hashintel/ds-components/src/beta/splitter/vertical.story.tsx index 449f6ff9354..d3ee2c6e267 100644 --- a/libs/@hashintel/ds-components/src/beta/splitter/vertical.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/splitter/vertical.story.tsx @@ -1,4 +1,4 @@ -import * as Splitter from "./splitter"; +import * as Splitter from "../splitter"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/steps/steps.recipe.ts b/libs/@hashintel/ds-components/src/beta/steps/steps.recipe.ts index cacf8fdd106..c317f9a0741 100644 --- a/libs/@hashintel/ds-components/src/beta/steps/steps.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/steps/steps.recipe.ts @@ -1,7 +1,7 @@ import { stepsAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { sva } from "@hashintel/ds-helpers/css"; -export const steps = defineSlotRecipe({ +export const stepsSlotRecipe = sva({ className: "steps", slots: stepsAnatomy.keys(), base: {}, diff --git a/libs/@hashintel/ds-components/src/beta/switch/switch.recipe.ts b/libs/@hashintel/ds-components/src/beta/switch.recipe.ts similarity index 89% rename from libs/@hashintel/ds-components/src/beta/switch/switch.recipe.ts rename to libs/@hashintel/ds-components/src/beta/switch.recipe.ts index ea6eaa1dd60..3494c30ccda 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/switch.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/switch.recipe.ts @@ -1,7 +1,7 @@ import { switchAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const switchRecipe = defineSlotRecipe({ +const switchSlotRecipeDefinition = { className: "switch", jsx: ["Switch", /Switch\.+/], slots: switchAnatomy.extendWith("indicator").keys(), @@ -138,4 +138,9 @@ export const switchRecipe = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const switchSlotRecipe = sva(switchSlotRecipeDefinition); + +export type SwitchSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/switch.stories.ts b/libs/@hashintel/ds-components/src/beta/switch.stories.ts new file mode 100644 index 00000000000..d19e2d529a3 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/switch.stories.ts @@ -0,0 +1,10 @@ +export default { title: "Primitives/Switch" }; + +export { App as basic } from "./switch/basic.story"; +export { App as controlled } from "./switch/controlled.story"; +export { App as disabled } from "./switch/disabled.story"; +export { App as indicator } from "./switch/indicator.story"; +export { App as invalid } from "./switch/invalid.story"; +export { App as sizes } from "./switch/sizes.story"; +export { App as thumbIndicator } from "./switch/thumb-indicator.story"; +export { App as withTooltip } from "./switch/with-tooltip.story"; diff --git a/libs/@hashintel/ds-components/src/beta/switch/switch.tsx b/libs/@hashintel/ds-components/src/beta/switch.tsx similarity index 93% rename from libs/@hashintel/ds-components/src/beta/switch/switch.tsx rename to libs/@hashintel/ds-components/src/beta/switch.tsx index e2a6277dfcd..776ff2ff35d 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/switch.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch.tsx @@ -3,10 +3,11 @@ import { ark } from "@ark-ui/react/factory"; import { Switch, useSwitchContext } from "@ark-ui/react/switch"; import { createStyleContext, styled } from "@hashintel/ds-helpers/jsx"; -import { switchRecipe } from "@hashintel/ds-helpers/recipes"; import { type ComponentProps, forwardRef, type ReactNode } from "react"; -const { withProvider, withContext } = createStyleContext(switchRecipe); +import { switchSlotRecipe } from "./switch.recipe"; + +const { withProvider, withContext } = createStyleContext(switchSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Switch.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/switch/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/basic.story.tsx index 2f785b7093b..271691ecf69 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Switch from "./switch"; +import * as Switch from "../switch"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/switch/closed.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/closed.story.tsx index f09ff20ce20..822abd03bcc 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/closed.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/closed.story.tsx @@ -5,7 +5,7 @@ import { type RefObject, } from "react"; -import * as ParkSwitch from "./switch"; +import * as ParkSwitch from "../switch"; export interface SwitchProps extends ParkSwitch.RootProps { inputProps?: InputHTMLAttributes; diff --git a/libs/@hashintel/ds-components/src/beta/switch/controlled.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/controlled.story.tsx index b00d7b0b239..2b5dee08902 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/controlled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/controlled.story.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import * as Switch from "./switch"; +import * as Switch from "../switch"; export const App = () => { const [checked, setChecked] = useState(false); diff --git a/libs/@hashintel/ds-components/src/beta/switch/disabled.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/disabled.story.tsx index 96934462f1d..d49cbd7b8f1 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/disabled.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/disabled.story.tsx @@ -1,4 +1,4 @@ -import * as Switch from "./switch"; +import * as Switch from "../switch"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/switch/indicator.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/indicator.story.tsx index ca84570e19f..f52629e8b47 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/indicator.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/indicator.story.tsx @@ -1,7 +1,7 @@ import { MoonIcon, SunIcon } from "lucide-react"; -import { Icon } from "../icon/icon"; -import * as Switch from "./switch"; +import { Icon } from "../icon"; +import * as Switch from "../switch"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/switch/invalid.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/invalid.story.tsx index 45661da940d..7c108e40dd0 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/invalid.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/invalid.story.tsx @@ -1,4 +1,4 @@ -import * as Switch from "./switch"; +import * as Switch from "../switch"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/switch/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/sizes.story.tsx index c316062873e..889f0d18248 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/sizes.story.tsx @@ -1,6 +1,6 @@ import { Wrap } from "@hashintel/ds-helpers/jsx"; -import * as Switch from "./switch"; +import * as Switch from "../switch"; export const App = () => { const sizes = ["xs", "sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/switch/switch.stories.ts b/libs/@hashintel/ds-components/src/beta/switch/switch.stories.ts deleted file mode 100644 index 42b26587125..00000000000 --- a/libs/@hashintel/ds-components/src/beta/switch/switch.stories.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { title: "Primitives/Switch" }; - -export { App as basic } from "./basic.story"; -export { App as controlled } from "./controlled.story"; -export { App as disabled } from "./disabled.story"; -export { App as indicator } from "./indicator.story"; -export { App as invalid } from "./invalid.story"; -export { App as sizes } from "./sizes.story"; -export { App as thumbIndicator } from "./thumb-indicator.story"; -export { App as withTooltip } from "./with-tooltip.story"; diff --git a/libs/@hashintel/ds-components/src/beta/switch/thumb-indicator.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/thumb-indicator.story.tsx index efcbab13bcf..9f134a3f23f 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/thumb-indicator.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/thumb-indicator.story.tsx @@ -1,6 +1,6 @@ import { CheckIcon, XIcon } from "lucide-react"; -import * as Switch from "./switch"; +import * as Switch from "../switch"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/switch/with-tooltip.story.tsx b/libs/@hashintel/ds-components/src/beta/switch/with-tooltip.story.tsx index 78f0863d834..4fe566feb33 100644 --- a/libs/@hashintel/ds-components/src/beta/switch/with-tooltip.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/switch/with-tooltip.story.tsx @@ -1,7 +1,7 @@ import { useId } from "react"; -import { Tooltip } from "../tooltip/tooltip"; -import * as Switch from "./switch"; +import * as Switch from "../switch"; +import { Tooltip } from "../tooltip"; export const App = () => { const id = useId(); diff --git a/libs/@hashintel/ds-components/src/beta/table/table.recipe.ts b/libs/@hashintel/ds-components/src/beta/table.recipe.ts similarity index 86% rename from libs/@hashintel/ds-components/src/beta/table/table.recipe.ts rename to libs/@hashintel/ds-components/src/beta/table.recipe.ts index 13fb2a81128..1fea47a04c6 100644 --- a/libs/@hashintel/ds-components/src/beta/table/table.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/table.recipe.ts @@ -1,6 +1,6 @@ -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const table = defineSlotRecipe({ +const tableSlotRecipeDefinition = { className: "table", slots: ["root", "body", "cell", "foot", "head", "header", "row", "caption"], base: { @@ -110,4 +110,9 @@ export const table = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const tableSlotRecipe = sva(tableSlotRecipeDefinition); + +export type TableSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/table.stories.ts b/libs/@hashintel/ds-components/src/beta/table.stories.ts new file mode 100644 index 00000000000..2984c32430f --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/table.stories.ts @@ -0,0 +1,10 @@ +export default { title: "Primitives/Table" }; + +export { App as basic } from "./table/basic.story"; +export { App as columnBorder } from "./table/column-border.story"; +export { App as horizontal } from "./table/horizontal.story"; +export { App as interactive } from "./table/interactive.story"; +export { App as stickyColumn } from "./table/sticky-column.story"; +export { App as stickyHeader } from "./table/sticky-header.story"; +export { App as striped } from "./table/striped.story"; +export { App as variants } from "./table/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/table/table.tsx b/libs/@hashintel/ds-components/src/beta/table.tsx similarity index 83% rename from libs/@hashintel/ds-components/src/beta/table/table.tsx rename to libs/@hashintel/ds-components/src/beta/table.tsx index cee19e18c83..b67f048e154 100644 --- a/libs/@hashintel/ds-components/src/beta/table/table.tsx +++ b/libs/@hashintel/ds-components/src/beta/table.tsx @@ -2,10 +2,11 @@ import { ark } from "@ark-ui/react/factory"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { table } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(table); +import { tableSlotRecipe } from "./table.recipe"; + +const { withProvider, withContext } = createStyleContext(tableSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(ark.table, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/table/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/table/basic.story.tsx index df2a9009633..7f9497da64b 100644 --- a/libs/@hashintel/ds-components/src/beta/table/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Table from "./table"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/column-border.story.tsx b/libs/@hashintel/ds-components/src/beta/table/column-border.story.tsx index ba66f17b7cc..a05a87ea338 100644 --- a/libs/@hashintel/ds-components/src/beta/table/column-border.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/column-border.story.tsx @@ -1,4 +1,4 @@ -import * as Table from "./table"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/horizontal.story.tsx b/libs/@hashintel/ds-components/src/beta/table/horizontal.story.tsx index 573a7a02c06..15035d24be1 100644 --- a/libs/@hashintel/ds-components/src/beta/table/horizontal.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/horizontal.story.tsx @@ -1,5 +1,5 @@ -import * as ScrollArea from "../scroll-area/scroll-area"; -import * as Table from "./table"; +import * as ScrollArea from "../scroll-area"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/interactive.story.tsx b/libs/@hashintel/ds-components/src/beta/table/interactive.story.tsx index c0a3bcfbc23..efc756a1d5a 100644 --- a/libs/@hashintel/ds-components/src/beta/table/interactive.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/interactive.story.tsx @@ -1,4 +1,4 @@ -import * as Table from "./table"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/sticky-column.story.tsx b/libs/@hashintel/ds-components/src/beta/table/sticky-column.story.tsx index 3c749cf16a9..51ee38457f8 100644 --- a/libs/@hashintel/ds-components/src/beta/table/sticky-column.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/sticky-column.story.tsx @@ -1,5 +1,5 @@ -import * as ScrollArea from "../scroll-area/scroll-area"; -import * as Table from "./table"; +import * as ScrollArea from "../scroll-area"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/sticky-header.story.tsx b/libs/@hashintel/ds-components/src/beta/table/sticky-header.story.tsx index 96d254d2482..a91a4665b48 100644 --- a/libs/@hashintel/ds-components/src/beta/table/sticky-header.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/sticky-header.story.tsx @@ -1,5 +1,5 @@ -import * as ScrollArea from "../scroll-area/scroll-area"; -import * as Table from "./table"; +import * as ScrollArea from "../scroll-area"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/striped.story.tsx b/libs/@hashintel/ds-components/src/beta/table/striped.story.tsx index 4f0b98b8636..ca31bf715e2 100644 --- a/libs/@hashintel/ds-components/src/beta/table/striped.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/striped.story.tsx @@ -1,4 +1,4 @@ -import * as Table from "./table"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/table/table.stories.ts b/libs/@hashintel/ds-components/src/beta/table/table.stories.ts deleted file mode 100644 index 83e6d8cccfc..00000000000 --- a/libs/@hashintel/ds-components/src/beta/table/table.stories.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default { title: "Primitives/Table" }; - -export { App as basic } from "./basic.story"; -export { App as columnBorder } from "./column-border.story"; -export { App as horizontal } from "./horizontal.story"; -export { App as interactive } from "./interactive.story"; -export { App as stickyColumn } from "./sticky-column.story"; -export { App as stickyHeader } from "./sticky-header.story"; -export { App as striped } from "./striped.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/table/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/table/variants.story.tsx index ffb020f7259..d5744ca5124 100644 --- a/libs/@hashintel/ds-components/src/beta/table/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/table/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Table from "./table"; +import * as Table from "../table"; const items = [ { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, diff --git a/libs/@hashintel/ds-components/src/beta/tabs/tabs.recipe.ts b/libs/@hashintel/ds-components/src/beta/tabs.recipe.ts similarity index 90% rename from libs/@hashintel/ds-components/src/beta/tabs/tabs.recipe.ts rename to libs/@hashintel/ds-components/src/beta/tabs.recipe.ts index b22b174d381..9ee5140f9ae 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/tabs.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/tabs.recipe.ts @@ -1,7 +1,7 @@ import { tabsAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const tabs = defineSlotRecipe({ +const tabsSlotRecipeDefinition = { slots: tabsAnatomy.keys(), className: "tabs", base: { @@ -174,4 +174,9 @@ export const tabs = defineSlotRecipe({ size: "md", variant: "line", }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const tabsSlotRecipe = sva(tabsSlotRecipeDefinition); + +export type TabsSlotRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/tabs.stories.ts b/libs/@hashintel/ds-components/src/beta/tabs.stories.ts new file mode 100644 index 00000000000..0733424aaf4 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/tabs.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Tabs" }; + +export { App as basic } from "./tabs/basic.story"; +export { App as fitted } from "./tabs/fitted.story"; +export { App as lazyMount } from "./tabs/lazy-mount.story"; +export { App as orientation } from "./tabs/orientation.story"; +export { App as sizes } from "./tabs/sizes.story"; +export { App as variants } from "./tabs/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/tabs/tabs.tsx b/libs/@hashintel/ds-components/src/beta/tabs.tsx similarity index 84% rename from libs/@hashintel/ds-components/src/beta/tabs/tabs.tsx rename to libs/@hashintel/ds-components/src/beta/tabs.tsx index 0b43da11372..b222b0e14d0 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/tabs.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs.tsx @@ -2,10 +2,11 @@ import { Tabs } from "@ark-ui/react/tabs"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { tabs } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(tabs); +import { tabsSlotRecipe } from "./tabs.recipe"; + +const { withProvider, withContext } = createStyleContext(tabsSlotRecipe); export type RootProps = ComponentProps; export const Root = withProvider(Tabs.Root, "root"); diff --git a/libs/@hashintel/ds-components/src/beta/tabs/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/tabs/basic.story.tsx index 951eb97b3aa..ad20347c391 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs/basic.story.tsx @@ -1,4 +1,4 @@ -import * as Tabs from "./tabs"; +import * as Tabs from "../tabs"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/tabs/fitted.story.tsx b/libs/@hashintel/ds-components/src/beta/tabs/fitted.story.tsx index b7e29b98dee..c392b9fc41e 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/fitted.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs/fitted.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Tabs from "./tabs"; +import * as Tabs from "../tabs"; export const App = () => { const variants = ["line", "subtle", "enclosed"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/tabs/lazy-mount.story.tsx b/libs/@hashintel/ds-components/src/beta/tabs/lazy-mount.story.tsx index bece680d494..0367ba13ee6 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/lazy-mount.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs/lazy-mount.story.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; -import * as Tabs from "./tabs"; +import * as Tabs from "../tabs"; const TickValue = () => { const [value, setValue] = useState(0); diff --git a/libs/@hashintel/ds-components/src/beta/tabs/orientation.story.tsx b/libs/@hashintel/ds-components/src/beta/tabs/orientation.story.tsx index 214d0270842..bf9693c15d1 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/orientation.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs/orientation.story.tsx @@ -1,4 +1,4 @@ -import * as Tabs from "./tabs"; +import * as Tabs from "../tabs"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/tabs/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/tabs/sizes.story.tsx index 6c086e9fbcf..3b3fe27029c 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Tabs from "./tabs"; +import * as Tabs from "../tabs"; export const App = () => { const sizes = ["sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/tabs/tabs.stories.ts b/libs/@hashintel/ds-components/src/beta/tabs/tabs.stories.ts deleted file mode 100644 index 5781a8fb737..00000000000 --- a/libs/@hashintel/ds-components/src/beta/tabs/tabs.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Tabs" }; - -export { App as basic } from "./basic.story"; -export { App as fitted } from "./fitted.story"; -export { App as lazyMount } from "./lazy-mount.story"; -export { App as orientation } from "./orientation.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/tabs/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/tabs/variants.story.tsx index 6e41cf98897..58b692798d1 100644 --- a/libs/@hashintel/ds-components/src/beta/tabs/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tabs/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as Tabs from "./tabs"; +import * as Tabs from "../tabs"; export const App = () => { const variants = ["line", "subtle", "enclosed"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.recipe.ts b/libs/@hashintel/ds-components/src/beta/tags-input.recipe.ts similarity index 93% rename from libs/@hashintel/ds-components/src/beta/tags-input/tags-input.recipe.ts rename to libs/@hashintel/ds-components/src/beta/tags-input.recipe.ts index b666c19ebf8..f85db9ea805 100644 --- a/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/tags-input.recipe.ts @@ -1,7 +1,7 @@ import { tagsInputAnatomy } from "@ark-ui/react/anatomy"; -import { defineSlotRecipe } from "@pandacss/dev"; +import { type RecipeVariantProps, sva } from "@hashintel/ds-helpers/css"; -export const tagsInput = defineSlotRecipe({ +const tagsInputSlotRecipeDefinition = { className: "tags-input", slots: tagsInputAnatomy.keys(), base: { @@ -228,4 +228,11 @@ export const tagsInput = defineSlotRecipe({ }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const tagsInputSlotRecipe = sva(tagsInputSlotRecipeDefinition); + +export type TagsInputSlotRecipeProps = RecipeVariantProps< + typeof tagsInputSlotRecipe +>; diff --git a/libs/@hashintel/ds-components/src/beta/tags-input.stories.ts b/libs/@hashintel/ds-components/src/beta/tags-input.stories.ts new file mode 100644 index 00000000000..ba137f48552 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/tags-input.stories.ts @@ -0,0 +1,5 @@ +export default { title: "Primitives/TagsInput" }; + +export { App as basic } from "./tags-input/basic.story"; +export { App as sizes } from "./tags-input/sizes.story"; +export { App as variants } from "./tags-input/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.tsx b/libs/@hashintel/ds-components/src/beta/tags-input.tsx similarity index 96% rename from libs/@hashintel/ds-components/src/beta/tags-input/tags-input.tsx rename to libs/@hashintel/ds-components/src/beta/tags-input.tsx index 68085bb4002..2c6a8694579 100644 --- a/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.tsx +++ b/libs/@hashintel/ds-components/src/beta/tags-input.tsx @@ -4,11 +4,12 @@ import { TagsInput, useTagsInputContext } from "@ark-ui/react/tags-input"; import { createStyleContext } from "@hashintel/ds-helpers/jsx"; -import { tagsInput } from "@hashintel/ds-helpers/recipes"; import { XIcon } from "lucide-react"; import type { ComponentProps } from "react"; -const { withProvider, withContext } = createStyleContext(tagsInput); +import { tagsInputSlotRecipe } from "./tags-input.recipe"; + +const { withProvider, withContext } = createStyleContext(tagsInputSlotRecipe); export type RootProps = ComponentProps; export type ItemProps = ComponentProps; diff --git a/libs/@hashintel/ds-components/src/beta/tags-input/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/tags-input/basic.story.tsx index d657ac645db..57814ccaa47 100644 --- a/libs/@hashintel/ds-components/src/beta/tags-input/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tags-input/basic.story.tsx @@ -1,5 +1,5 @@ -import { Span } from "../span/span"; -import * as TagsInput from "./tags-input"; +import { Span } from "../span"; +import * as TagsInput from "../tags-input"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/tags-input/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/tags-input/sizes.story.tsx index 29627db43b7..935936cedff 100644 --- a/libs/@hashintel/ds-components/src/beta/tags-input/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tags-input/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as TagsInput from "./tags-input"; +import * as TagsInput from "../tags-input"; export const App = () => { const sizes = ["xs", "sm", "md", "lg"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.stories.ts b/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.stories.ts deleted file mode 100644 index 1c18f520114..00000000000 --- a/libs/@hashintel/ds-components/src/beta/tags-input/tags-input.stories.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { title: "Primitives/TagsInput" }; - -export { App as basic } from "./basic.story"; -export { App as sizes } from "./sizes.story"; -export { App as variants } from "./variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/tags-input/variants.story.tsx b/libs/@hashintel/ds-components/src/beta/tags-input/variants.story.tsx index 20679a50262..a8915db2be4 100644 --- a/libs/@hashintel/ds-components/src/beta/tags-input/variants.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/tags-input/variants.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import * as TagsInput from "./tags-input"; +import * as TagsInput from "../tags-input"; export const App = () => { const variants = ["outline", "subtle", "surface"] as const; diff --git a/libs/@hashintel/ds-components/src/beta/text.recipe.ts b/libs/@hashintel/ds-components/src/beta/text.recipe.ts new file mode 100644 index 00000000000..fb44536a28b --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/text.recipe.ts @@ -0,0 +1,10 @@ +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; + +const textRecipeDefinition = { + className: "text", + variants: {}, +} as const; + +export const textRecipe = cva(textRecipeDefinition); + +export type TextRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/text.stories.ts b/libs/@hashintel/ds-components/src/beta/text.stories.ts new file mode 100644 index 00000000000..e2cf958290d --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/text.stories.ts @@ -0,0 +1,8 @@ +export default { title: "Primitives/Text" }; + +export { App as basic } from "./text/basic.story"; +export { App as lineClamp } from "./text/line-clamp.story"; +export { App as ref } from "./text/ref.story"; +export { App as sizes } from "./text/sizes.story"; +export { App as truncate } from "./text/truncate.story"; +export { App as weights } from "./text/weights.story"; diff --git a/libs/@hashintel/ds-components/src/beta/text/text.tsx b/libs/@hashintel/ds-components/src/beta/text.tsx similarity index 61% rename from libs/@hashintel/ds-components/src/beta/text/text.tsx rename to libs/@hashintel/ds-components/src/beta/text.tsx index 99f996988f3..0804fb7224a 100644 --- a/libs/@hashintel/ds-components/src/beta/text/text.tsx +++ b/libs/@hashintel/ds-components/src/beta/text.tsx @@ -1,6 +1,7 @@ import { styled } from "@hashintel/ds-helpers/jsx"; -import { text } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { textRecipe } from "./text.recipe"; + export type TextProps = ComponentProps; -export const Text = styled("p", text); +export const Text = styled("p", textRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/text/basic.story.tsx b/libs/@hashintel/ds-components/src/beta/text/basic.story.tsx index 180f50e45c7..7e6b6633c9c 100644 --- a/libs/@hashintel/ds-components/src/beta/text/basic.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/text/basic.story.tsx @@ -1,4 +1,4 @@ -import { Text } from "./text"; +import { Text } from "../text"; export const App = () => { return Sphinx of black quartz, judge my vow.; diff --git a/libs/@hashintel/ds-components/src/beta/text/line-clamp.story.tsx b/libs/@hashintel/ds-components/src/beta/text/line-clamp.story.tsx index f8a9a326c45..413d20d4268 100644 --- a/libs/@hashintel/ds-components/src/beta/text/line-clamp.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/text/line-clamp.story.tsx @@ -1,6 +1,6 @@ import { Flex } from "@hashintel/ds-helpers/jsx"; -import { Text } from "./text"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/text/ref.story.tsx b/libs/@hashintel/ds-components/src/beta/text/ref.story.tsx index 0e0b329de9f..cad9039e60c 100644 --- a/libs/@hashintel/ds-components/src/beta/text/ref.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/text/ref.story.tsx @@ -2,7 +2,7 @@ import { useRef } from "react"; -import { Text } from "./text"; +import { Text } from "../text"; export const App = () => { const ref = useRef(null); diff --git a/libs/@hashintel/ds-components/src/beta/text/sizes.story.tsx b/libs/@hashintel/ds-components/src/beta/text/sizes.story.tsx index da4bc397d50..ca4c985172d 100644 --- a/libs/@hashintel/ds-components/src/beta/text/sizes.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/text/sizes.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Text } from "./text"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/text/text.recipe.ts b/libs/@hashintel/ds-components/src/beta/text/text.recipe.ts deleted file mode 100644 index cad403f3f5d..00000000000 --- a/libs/@hashintel/ds-components/src/beta/text/text.recipe.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { defineRecipe } from "@pandacss/dev"; - -export const text = defineRecipe({ - className: "text", - variants: {}, -}); diff --git a/libs/@hashintel/ds-components/src/beta/text/text.stories.ts b/libs/@hashintel/ds-components/src/beta/text/text.stories.ts deleted file mode 100644 index 74877730686..00000000000 --- a/libs/@hashintel/ds-components/src/beta/text/text.stories.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { title: "Primitives/Text" }; - -export { App as basic } from "./basic.story"; -export { App as lineClamp } from "./line-clamp.story"; -export { App as ref } from "./ref.story"; -export { App as sizes } from "./sizes.story"; -export { App as truncate } from "./truncate.story"; -export { App as weights } from "./weights.story"; diff --git a/libs/@hashintel/ds-components/src/beta/text/truncate.story.tsx b/libs/@hashintel/ds-components/src/beta/text/truncate.story.tsx index d9df0b748a0..531c3dc62fd 100644 --- a/libs/@hashintel/ds-components/src/beta/text/truncate.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/text/truncate.story.tsx @@ -1,6 +1,6 @@ import { Flex } from "@hashintel/ds-helpers/jsx"; -import { Text } from "./text"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/text/weights.story.tsx b/libs/@hashintel/ds-components/src/beta/text/weights.story.tsx index 80d6582a2ff..a6809dde7e2 100644 --- a/libs/@hashintel/ds-components/src/beta/text/weights.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/text/weights.story.tsx @@ -1,6 +1,6 @@ import { Stack } from "@hashintel/ds-helpers/jsx"; -import { Text } from "./text"; +import { Text } from "../text"; export const App = () => { return ( diff --git a/libs/@hashintel/ds-components/src/beta/textarea/textarea.recipe.ts b/libs/@hashintel/ds-components/src/beta/textarea.recipe.ts similarity index 84% rename from libs/@hashintel/ds-components/src/beta/textarea/textarea.recipe.ts rename to libs/@hashintel/ds-components/src/beta/textarea.recipe.ts index 078cf5b11f7..bed84adfc78 100644 --- a/libs/@hashintel/ds-components/src/beta/textarea/textarea.recipe.ts +++ b/libs/@hashintel/ds-components/src/beta/textarea.recipe.ts @@ -1,6 +1,6 @@ -import { defineRecipe } from "@pandacss/dev"; +import { cva, type RecipeVariantProps } from "@hashintel/ds-helpers/css"; -export const textarea = defineRecipe({ +const textareaRecipeDefinition = { className: "textarea", base: { appearance: "none", @@ -79,4 +79,9 @@ export const textarea = defineRecipe({ xl: { textStyle: "lg", px: "4", py: "9px", scrollPaddingBottom: "9px" }, }, }, -}); +} as const; + +// @ts-expect-error TODO(beta-graduation): invalid strict tokens remain in this beta recipe; remove before moving to src/components +export const textareaRecipe = cva(textareaRecipeDefinition); + +export type TextareaRecipeProps = RecipeVariantProps; diff --git a/libs/@hashintel/ds-components/src/beta/textarea.stories.ts b/libs/@hashintel/ds-components/src/beta/textarea.stories.ts new file mode 100644 index 00000000000..b30c657e182 --- /dev/null +++ b/libs/@hashintel/ds-components/src/beta/textarea.stories.ts @@ -0,0 +1,11 @@ +export default { title: "Primitives/Textarea" }; + +export { App as autoresize } from "./textarea/autoresize.story"; +export { App as basic } from "./textarea/basic.story"; +export { App as field } from "./textarea/field.story"; +export { App as invalid } from "./textarea/invalid.story"; +export { App as ref } from "./textarea/ref.story"; +export { App as required } from "./textarea/required.story"; +export { App as resize } from "./textarea/resize.story"; +export { App as sizes } from "./textarea/sizes.story"; +export { App as variants } from "./textarea/variants.story"; diff --git a/libs/@hashintel/ds-components/src/beta/textarea/textarea.tsx b/libs/@hashintel/ds-components/src/beta/textarea.tsx similarity index 63% rename from libs/@hashintel/ds-components/src/beta/textarea/textarea.tsx rename to libs/@hashintel/ds-components/src/beta/textarea.tsx index fd9b1fda64b..83f0823156c 100644 --- a/libs/@hashintel/ds-components/src/beta/textarea/textarea.tsx +++ b/libs/@hashintel/ds-components/src/beta/textarea.tsx @@ -1,7 +1,8 @@ import { Field } from "@ark-ui/react/field"; import { styled } from "@hashintel/ds-helpers/jsx"; -import { textarea } from "@hashintel/ds-helpers/recipes"; import type { ComponentProps } from "react"; +import { textareaRecipe } from "./textarea.recipe"; + export type TextareaProps = ComponentProps; -export const Textarea = styled(Field.Textarea, textarea); +export const Textarea = styled(Field.Textarea, textareaRecipe); diff --git a/libs/@hashintel/ds-components/src/beta/textarea/autoresize.story.tsx b/libs/@hashintel/ds-components/src/beta/textarea/autoresize.story.tsx index 23d1203106e..11affd837a2 100644 --- a/libs/@hashintel/ds-components/src/beta/textarea/autoresize.story.tsx +++ b/libs/@hashintel/ds-components/src/beta/textarea/autoresize.story.tsx @@ -1,4 +1,4 @@ -import { Textarea } from "./textarea"; +import { Textarea } from "../textarea"; export const App = () => { return