mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-23 03:27:27 +09:00
Generate stories with new jsx component generator (#2322)
Here added "sdk-cli" package with "generate-stories" command which looks for metas and generate stories from each one with template. This give us more insight how component would look like on published sites. Also removed old stories and added custom id support into embed template to make stories ids stable. Can be tested in local storybook
This commit is contained in:
Bogdan Chadkin authored and GitHub committed
1 parent
72c6b286ac
commit
2b52c53cbf
47 files changed
+5582
-470
No files matched your search
@@ -1,4 +1,4 @@
|
||||
export * from "./core";
|
||||
export * from "./core/index";
|
||||
export * from "./schema";
|
||||
|
||||
// necessary for sdk dts generation
|
||||
|
||||
@@ -533,9 +533,9 @@ test("generate page component with data sources", () => {
|
||||
})
|
||||
).toEqual(
|
||||
clear(`
|
||||
export const Page = (props: { scripts: ReactNode }) => {
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [variableName, set$variableName] = useState("initial")
|
||||
let onChange = (value) => {
|
||||
let onChange = (value: any) => {
|
||||
variableName = value
|
||||
set$variableName(variableName)
|
||||
}
|
||||
|
||||
@@ -198,6 +198,7 @@ export const generatePageComponent = ({
|
||||
return "";
|
||||
}
|
||||
const { variables, body: dataSourcesBody } = generateDataSources({
|
||||
typed: true,
|
||||
scope,
|
||||
dataSources,
|
||||
props,
|
||||
@@ -227,7 +228,7 @@ export const generatePageComponent = ({
|
||||
});
|
||||
|
||||
let generatedComponent = "";
|
||||
generatedComponent += `export const Page = (props: { scripts: ReactNode }) => {\n`;
|
||||
generatedComponent += `const Page = (props: { scripts?: ReactNode }) => {\n`;
|
||||
generatedComponent += `${generatedDataSources}`;
|
||||
generatedComponent += `return ${generatedJsx}`;
|
||||
generatedComponent += `}\n`;
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
import type { ExoticComponent } from "react";
|
||||
import type { Instance } from "@webstudio-is/sdk";
|
||||
import { createScope, getStyleDeclKey } from "@webstudio-is/sdk";
|
||||
import type { WsComponentMeta } from "./components/component-meta";
|
||||
import {
|
||||
WsEmbedTemplate,
|
||||
generateDataFromEmbedTemplate,
|
||||
} from "./embed-template";
|
||||
import { generateCssText } from "./css";
|
||||
import { InstanceRoot, WebstudioComponent } from "./tree";
|
||||
import { generateDataSources } from "./expression";
|
||||
import { getIndexesWithinAncestors } from "./instance-utils";
|
||||
import type { ImageLoader } from "@webstudio-is/image";
|
||||
|
||||
export const renderComponentTemplate = ({
|
||||
name,
|
||||
metas: metasRecord,
|
||||
components,
|
||||
props,
|
||||
imageLoader,
|
||||
}: {
|
||||
name: Instance["component"];
|
||||
metas: Record<string, WsComponentMeta>;
|
||||
props?: Record<string, unknown>;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
components: Record<string, ExoticComponent<any>>;
|
||||
imageLoader?: ImageLoader;
|
||||
}) => {
|
||||
const metas = new Map(Object.entries(metasRecord));
|
||||
|
||||
const template: WsEmbedTemplate = metas.get(name)?.template ?? [
|
||||
{
|
||||
type: "instance",
|
||||
component: name,
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
||||
if (template[0].type === "instance" && props !== undefined) {
|
||||
template[0].props = Object.entries(props).map(([prop, value]) => {
|
||||
if (typeof value === "string") {
|
||||
return { type: "string", name: prop, value: value };
|
||||
}
|
||||
|
||||
if (typeof value === "number") {
|
||||
return { type: "number", name: prop, value: value };
|
||||
}
|
||||
|
||||
if (typeof value === "boolean") {
|
||||
return { type: "boolean", name: prop, value: value };
|
||||
}
|
||||
throw new Error(`Unsupported prop ${props} with value ${value}`);
|
||||
});
|
||||
}
|
||||
|
||||
const data = generateDataFromEmbedTemplate(template, metas, "base");
|
||||
|
||||
const instances: [Instance["id"], Instance][] = [
|
||||
[
|
||||
"root",
|
||||
{
|
||||
type: "instance",
|
||||
id: "root",
|
||||
component: "Box",
|
||||
children: data.children,
|
||||
},
|
||||
],
|
||||
...data.instances.map(
|
||||
(instance) => [instance.id, instance] satisfies [Instance["id"], Instance]
|
||||
),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{generateCssText(
|
||||
{
|
||||
assets: [],
|
||||
breakpoints: [["base", { id: "base", label: "base" }]],
|
||||
styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
|
||||
styleSourceSelections: data.styleSourceSelections.map((item) => [
|
||||
item.instanceId,
|
||||
item,
|
||||
]),
|
||||
componentMetas: metas,
|
||||
},
|
||||
{ assetBaseUrl: "/" }
|
||||
)}
|
||||
</style>
|
||||
<InstanceRoot
|
||||
data={{
|
||||
page: {
|
||||
path: "",
|
||||
id: "",
|
||||
name: "",
|
||||
title: "",
|
||||
meta: {},
|
||||
rootInstanceId: "root",
|
||||
},
|
||||
pages: [],
|
||||
assets: [],
|
||||
build: {
|
||||
instances,
|
||||
props: data.props.map((prop) => [prop.id, prop]),
|
||||
dataSources: data.dataSources.map((dataSource) => [
|
||||
dataSource.id,
|
||||
dataSource,
|
||||
]),
|
||||
},
|
||||
}}
|
||||
utils={{
|
||||
indexesWithinAncestors: getIndexesWithinAncestors(
|
||||
metas,
|
||||
new Map(instances),
|
||||
["root"]
|
||||
),
|
||||
getDataSourcesLogic(getVariable, setVariable) {
|
||||
const { variables, body, output } = generateDataSources({
|
||||
scope: createScope(["_getVariable", "_setVariable", "_output"]),
|
||||
props: new Map(data.props.map((prop) => [prop.id, prop])),
|
||||
dataSources: new Map(
|
||||
data.dataSources.map((dataSource) => [
|
||||
dataSource.id,
|
||||
dataSource,
|
||||
])
|
||||
),
|
||||
});
|
||||
let generatedCode = "";
|
||||
for (const [dataSourceId, variable] of variables) {
|
||||
const { valueName, setterName } = variable;
|
||||
const initialValue = JSON.stringify(variable.initialValue);
|
||||
generatedCode += `let ${valueName} = _getVariable("${dataSourceId}") ?? ${initialValue};\n`;
|
||||
generatedCode += `let ${setterName} = (value) => _setVariable("${dataSourceId}", value);\n`;
|
||||
}
|
||||
generatedCode += body;
|
||||
generatedCode += `let _output = new Map();\n`;
|
||||
for (const [dataSourceId, variableName] of output) {
|
||||
generatedCode += `_output.set('${dataSourceId}', ${variableName})\n`;
|
||||
}
|
||||
generatedCode += `return _output\n`;
|
||||
|
||||
try {
|
||||
const executeFn = new Function(
|
||||
"_getVariable",
|
||||
"_setVariable",
|
||||
generatedCode
|
||||
);
|
||||
return executeFn(getVariable, setVariable);
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(error);
|
||||
}
|
||||
return new Map();
|
||||
},
|
||||
}}
|
||||
Component={WebstudioComponent}
|
||||
components={new Map(Object.entries(components))}
|
||||
imageLoader={imageLoader ?? (({ src }) => src)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -49,7 +49,7 @@ export const defaultStates: ComponentState[] = [
|
||||
{ selector: ":focus-within", label: "Focus Within" },
|
||||
];
|
||||
|
||||
const WsComponentMeta = z.object({
|
||||
export const WsComponentMeta = z.object({
|
||||
category: z.enum(componentCategories).optional(),
|
||||
// container - can accept other components with dnd or be edited as text
|
||||
// control - usually form controls like inputs, without children
|
||||
@@ -71,7 +71,9 @@ const WsComponentMeta = z.object({
|
||||
label: z.optional(z.string()),
|
||||
description: z.string().optional(),
|
||||
icon: z.string(),
|
||||
presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
|
||||
presetStyle: z.optional(
|
||||
z.record(z.string(), z.array(EmbedTemplateStyleDecl))
|
||||
),
|
||||
presetTokens: z.optional(z.record(z.string(), ComponentToken)),
|
||||
states: z.optional(z.array(ComponentState)),
|
||||
template: z.optional(WsEmbedTemplate),
|
||||
|
||||
@@ -9,7 +9,7 @@ import type {
|
||||
StyleSourceSelection,
|
||||
} from "@webstudio-is/sdk";
|
||||
import type { WsComponentMeta } from "../components/component-meta";
|
||||
import { idAttribute } from "../tree";
|
||||
import { idAttribute } from "../tree/index";
|
||||
import { addGlobalRules } from "./global-rules";
|
||||
import { getPresetStyleRules, getStyleRules } from "./style-rules";
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import type {
|
||||
StyleSourceSelections,
|
||||
} from "@webstudio-is/sdk";
|
||||
import type { PresetStyle } from "../components/component-meta";
|
||||
import { componentAttribute } from "../tree";
|
||||
import { componentAttribute } from "../tree/index";
|
||||
|
||||
type StyleRule = {
|
||||
instanceId: string;
|
||||
|
||||
@@ -157,12 +157,13 @@ const createInstancesFromTemplate = (
|
||||
styleSources: StyleSource[],
|
||||
styles: StyleDecl[],
|
||||
metas: Map<Instance["component"], WsComponentMeta>,
|
||||
defaultBreakpointId: Breakpoint["id"]
|
||||
defaultBreakpointId: Breakpoint["id"],
|
||||
generateId: () => string
|
||||
) => {
|
||||
const parentChildren: Instance["children"] = [];
|
||||
for (const item of treeTemplate) {
|
||||
if (item.type === "instance") {
|
||||
const instanceId = nanoid();
|
||||
const instanceId = generateId();
|
||||
|
||||
if (item.dataSources) {
|
||||
for (const [name, dataSource] of Object.entries(item.dataSources)) {
|
||||
@@ -172,7 +173,7 @@ const createInstancesFromTemplate = (
|
||||
if (dataSource.type === "variable") {
|
||||
dataSourceByRef.set(name, {
|
||||
type: "variable",
|
||||
id: nanoid(),
|
||||
id: generateId(),
|
||||
scopeInstanceId: instanceId,
|
||||
name,
|
||||
value: getDataSourceValue(dataSource.initialValue),
|
||||
@@ -181,7 +182,7 @@ const createInstancesFromTemplate = (
|
||||
if (dataSource.type === "expression") {
|
||||
dataSourceByRef.set(name, {
|
||||
type: "expression",
|
||||
id: nanoid(),
|
||||
id: generateId(),
|
||||
scopeInstanceId: instanceId,
|
||||
name,
|
||||
// replace all references with variable names
|
||||
@@ -199,7 +200,7 @@ const createInstancesFromTemplate = (
|
||||
// populate props
|
||||
if (item.props) {
|
||||
for (const prop of item.props) {
|
||||
const propId = nanoid();
|
||||
const propId = generateId();
|
||||
// action cannot be bound to data source
|
||||
if (prop.type === "action") {
|
||||
props.push({
|
||||
@@ -279,7 +280,7 @@ const createInstancesFromTemplate = (
|
||||
|
||||
// populate styles
|
||||
if (item.styles) {
|
||||
const styleSourceId = nanoid();
|
||||
const styleSourceId = generateId();
|
||||
styleSources.push({
|
||||
type: "local",
|
||||
id: styleSourceId,
|
||||
@@ -323,7 +324,8 @@ const createInstancesFromTemplate = (
|
||||
styleSources,
|
||||
styles,
|
||||
metas,
|
||||
defaultBreakpointId
|
||||
defaultBreakpointId,
|
||||
generateId
|
||||
);
|
||||
parentChildren.push({
|
||||
type: "id",
|
||||
@@ -344,7 +346,8 @@ const createInstancesFromTemplate = (
|
||||
export const generateDataFromEmbedTemplate = (
|
||||
treeTemplate: WsEmbedTemplate,
|
||||
metas: Map<Instance["component"], WsComponentMeta>,
|
||||
defaultBreakpointId: Breakpoint["id"]
|
||||
defaultBreakpointId: Breakpoint["id"],
|
||||
generateId: () => string = nanoid
|
||||
) => {
|
||||
const instances: Instance[] = [];
|
||||
const props: Prop[] = [];
|
||||
@@ -362,7 +365,8 @@ export const generateDataFromEmbedTemplate = (
|
||||
styleSources,
|
||||
styles,
|
||||
metas,
|
||||
defaultBreakpointId
|
||||
defaultBreakpointId,
|
||||
generateId
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
export * from "./css";
|
||||
export * from "./tree";
|
||||
export * from "./app";
|
||||
export * from "./css/index";
|
||||
export * from "./tree/index";
|
||||
export * from "./app/index";
|
||||
export * from "./components/components-utils";
|
||||
export { PropMeta } from "./prop-meta";
|
||||
export {
|
||||
type WsComponentPropsMeta,
|
||||
type WsComponentMeta,
|
||||
type ComponentState,
|
||||
type PresetStyle,
|
||||
WsComponentMeta,
|
||||
componentCategories,
|
||||
stateCategories,
|
||||
defaultStates,
|
||||
@@ -28,7 +28,6 @@ export {
|
||||
decodeDataSourceVariable,
|
||||
generateDataSources,
|
||||
} from "./expression";
|
||||
export { renderComponentTemplate } from "./component-renderer";
|
||||
export { getIndexesWithinAncestors } from "./instance-utils";
|
||||
export * from "./hook";
|
||||
export { generateUtilsExport } from "./generator";
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@webstudio-is/sdk-cli",
|
||||
"version": "0.94.0",
|
||||
"description": "Webstudio CLI for SDK development",
|
||||
"author": "Webstudio <github@webstudio.is>",
|
||||
"homepage": "https://webstudio.is",
|
||||
"type": "module",
|
||||
"bin": {
|
||||
"webstudio-sdk": "./src/bin.ts"
|
||||
},
|
||||
"files": [
|
||||
"src/*",
|
||||
"!*.{test,stories}.*"
|
||||
],
|
||||
"scripts": {
|
||||
"typecheck": "tsc",
|
||||
"checks": "pnpm typecheck"
|
||||
},
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"@webstudio-is/react-sdk": "workspace:^",
|
||||
"@webstudio-is/sdk": "workspace:^",
|
||||
"@webstudio-is/sdk-components-react": "workspace:^",
|
||||
"param-case": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.18",
|
||||
"@webstudio-is/tsconfig": "workspace:^"
|
||||
}
|
||||
}
|
||||
Executable
+2
@@ -0,0 +1,2 @@
|
||||
#!/usr/bin/env tsx --conditions=source --experimental-specifier-resolution=node --no-warnings
|
||||
import "./cli";
|
||||
@@ -0,0 +1,17 @@
|
||||
import { argv, exit } from "node:process";
|
||||
import { parseArgs } from "node:util";
|
||||
import { generateStories } from "./generate-stories";
|
||||
|
||||
const { positionals } = parseArgs({
|
||||
args: argv.slice(2),
|
||||
allowPositionals: true,
|
||||
});
|
||||
|
||||
const [command] = positionals;
|
||||
|
||||
if (command === "generate-stories") {
|
||||
await generateStories();
|
||||
exit(0);
|
||||
}
|
||||
|
||||
throw Error(`Unknown command ${command}`);
|
||||
@@ -0,0 +1,199 @@
|
||||
import { dirname, join } from "node:path";
|
||||
import { mkdir, writeFile } from "node:fs/promises";
|
||||
import { paramCase } from "param-case";
|
||||
import {
|
||||
type Instances,
|
||||
type Instance,
|
||||
type Scope,
|
||||
createScope,
|
||||
parseComponentName,
|
||||
getStyleDeclKey,
|
||||
} from "@webstudio-is/sdk";
|
||||
import {
|
||||
type WsComponentMeta,
|
||||
generateCssText,
|
||||
generateDataFromEmbedTemplate,
|
||||
generatePageComponent,
|
||||
getIndexesWithinAncestors,
|
||||
} from "@webstudio-is/react-sdk";
|
||||
import * as baseMetasExports from "@webstudio-is/sdk-components-react/metas";
|
||||
|
||||
const baseMetas = new Map(Object.entries(baseMetasExports));
|
||||
|
||||
const generateComponentImports = ({
|
||||
scope,
|
||||
metas,
|
||||
components,
|
||||
}: {
|
||||
scope: Scope;
|
||||
metas: Map<string, WsComponentMeta>;
|
||||
components: Set<string>;
|
||||
}) => {
|
||||
const namespaces = new Map<
|
||||
string,
|
||||
Set<[shortName: string, componentName: string]>
|
||||
>();
|
||||
const BASE_NAMESPACE = "@webstudio-is/sdk-components-react";
|
||||
|
||||
for (const component of components) {
|
||||
const parsed = parseComponentName(component);
|
||||
let [namespace] = parsed;
|
||||
const [_namespace, shortName] = parsed;
|
||||
if (namespace === undefined) {
|
||||
// use base as fallback namespace and consider remix overrides
|
||||
if (metas.has(shortName)) {
|
||||
namespace = "../components";
|
||||
} else {
|
||||
namespace = BASE_NAMESPACE;
|
||||
}
|
||||
}
|
||||
if (namespaces.has(namespace) === false) {
|
||||
namespaces.set(
|
||||
namespace,
|
||||
new Set<[shortName: string, componentName: string]>()
|
||||
);
|
||||
}
|
||||
namespaces.get(namespace)?.add([shortName, component]);
|
||||
}
|
||||
|
||||
let componentImports = "";
|
||||
for (const [namespace, componentsSet] of namespaces.entries()) {
|
||||
const specifiers = Array.from(componentsSet)
|
||||
.map(
|
||||
([shortName, component]) =>
|
||||
`${component} as ${scope.getName(component, shortName)}`
|
||||
)
|
||||
.join(", ");
|
||||
componentImports += `import { ${specifiers} } from "${namespace}";\n`;
|
||||
}
|
||||
return componentImports;
|
||||
};
|
||||
|
||||
const getStoriesImports = ({ hasState }: { hasState: boolean }) => `
|
||||
import { type ReactNode${hasState ? `, useState` : ""} } from "react";
|
||||
`;
|
||||
|
||||
const getStoriesExports = (name: string, css: string) => `
|
||||
export default {
|
||||
title: "Components/${name}"
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return <>
|
||||
<style>
|
||||
{\`
|
||||
${css}
|
||||
\`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
export { Story as ${name} }
|
||||
`;
|
||||
|
||||
export const generateStories = async () => {
|
||||
const metasModule = join(process.cwd(), "src/metas.ts");
|
||||
const metas = new Map<string, WsComponentMeta>(
|
||||
Object.entries(await import(metasModule))
|
||||
);
|
||||
const storiesDir = join(dirname(metasModule), "__generated__");
|
||||
await mkdir(storiesDir, { recursive: true });
|
||||
|
||||
for (const [name, meta] of metas) {
|
||||
if (meta.template === undefined) {
|
||||
continue;
|
||||
}
|
||||
const rootInstanceId = "root";
|
||||
const baseBreakpointId = "base";
|
||||
let id = 0;
|
||||
const generateStableId = () => (++id).toString();
|
||||
const data = generateDataFromEmbedTemplate(
|
||||
meta.template,
|
||||
metas,
|
||||
baseBreakpointId,
|
||||
generateStableId
|
||||
);
|
||||
const instances: Instances = new Map([
|
||||
[
|
||||
rootInstanceId,
|
||||
{
|
||||
type: "instance",
|
||||
id: rootInstanceId,
|
||||
component: "Box",
|
||||
children: data.children,
|
||||
},
|
||||
],
|
||||
...data.instances.map(
|
||||
(instance) =>
|
||||
[instance.id, instance] satisfies [Instance["id"], Instance]
|
||||
),
|
||||
]);
|
||||
const components = new Set<Instance["component"]>();
|
||||
const usedMetas = new Map<Instance["component"], WsComponentMeta>();
|
||||
const bodyMeta = baseMetas.get("Body");
|
||||
// add body styles for stories
|
||||
if (bodyMeta) {
|
||||
usedMetas.set("Body", bodyMeta);
|
||||
}
|
||||
for (const instance of instances.values()) {
|
||||
components.add(instance.component);
|
||||
const meta =
|
||||
metas.get(instance.component) ?? baseMetas.get(instance.component);
|
||||
if (meta) {
|
||||
usedMetas.set(instance.component, meta);
|
||||
}
|
||||
}
|
||||
const scope = createScope([
|
||||
"Page",
|
||||
"Story",
|
||||
"props",
|
||||
"ReactNode",
|
||||
"useState",
|
||||
]);
|
||||
let content = "";
|
||||
content += getStoriesImports({
|
||||
hasState: data.dataSources.some(
|
||||
(dataSource) => dataSource.type === "variable"
|
||||
),
|
||||
});
|
||||
content += generateComponentImports({
|
||||
scope,
|
||||
metas,
|
||||
components,
|
||||
});
|
||||
content += `\n`;
|
||||
content += generatePageComponent({
|
||||
scope,
|
||||
rootInstanceId,
|
||||
instances,
|
||||
props: new Map(data.props.map((prop) => [prop.id, prop])),
|
||||
dataSources: new Map(data.dataSources.map((prop) => [prop.id, prop])),
|
||||
indexesWithinAncestors: getIndexesWithinAncestors(usedMetas, instances, [
|
||||
rootInstanceId,
|
||||
]),
|
||||
});
|
||||
const css = generateCssText(
|
||||
{
|
||||
assets: [],
|
||||
breakpoints: [
|
||||
[baseBreakpointId, { id: baseBreakpointId, label: "base" }],
|
||||
],
|
||||
styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
|
||||
styleSourceSelections: data.styleSourceSelections.map((item) => [
|
||||
item.instanceId,
|
||||
item,
|
||||
]),
|
||||
componentMetas: usedMetas,
|
||||
},
|
||||
{ assetBaseUrl: "/" }
|
||||
);
|
||||
content += getStoriesExports(name, css);
|
||||
await writeFile(
|
||||
join(storiesDir, paramCase(name) + ".stories.tsx"),
|
||||
content
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "@webstudio-is/tsconfig/base.json"
|
||||
}
|
||||
@@ -43,6 +43,7 @@
|
||||
"build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts src/hooks.ts --outdir=lib --bundle --format=esm --packages=external",
|
||||
"build:args": "NODE_OPTIONS=--conditions=source generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' -e asChild -e modal -e defaultValue -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
|
||||
"build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
|
||||
"build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
|
||||
"dts": "tsc --project tsconfig.dts.json",
|
||||
"typecheck": "tsc",
|
||||
"checks": "pnpm typecheck",
|
||||
@@ -76,6 +77,7 @@
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@webstudio-is/css-data": "workspace:^",
|
||||
"@webstudio-is/generate-arg-types": "workspace:^",
|
||||
"@webstudio-is/sdk-cli": "workspace:^",
|
||||
"@webstudio-is/sdk-components-react": "workspace:^",
|
||||
"@webstudio-is/storybook-config": "workspace:^",
|
||||
"@webstudio-is/tsconfig": "workspace:^",
|
||||
|
||||
+447
@@ -0,0 +1,447 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
Text as Text,
|
||||
HtmlEmbed as HtmlEmbed,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Accordion as Accordion,
|
||||
AccordionItem as AccordionItem,
|
||||
AccordionHeader as AccordionHeader,
|
||||
AccordionTrigger as AccordionTrigger,
|
||||
AccordionContent as AccordionContent,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [accordionValue, set$accordionValue] = useState("0");
|
||||
let onValueChange = (value: any) => {
|
||||
accordionValue = value;
|
||||
set$accordionValue(accordionValue);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Accordion
|
||||
data-ws-id="1"
|
||||
data-ws-component="Accordion"
|
||||
collapsible={true}
|
||||
value={accordionValue}
|
||||
onValueChange={onValueChange}
|
||||
>
|
||||
<AccordionItem
|
||||
data-ws-id="6"
|
||||
data-ws-component="AccordionItem"
|
||||
data-ws-index="0"
|
||||
>
|
||||
<AccordionHeader data-ws-id="8" data-ws-component="AccordionHeader">
|
||||
<AccordionTrigger
|
||||
data-ws-id="10"
|
||||
data-ws-component="AccordionTrigger"
|
||||
>
|
||||
<Text data-ws-id="12" data-ws-component="Text">
|
||||
{"Is it accessible?"}
|
||||
</Text>
|
||||
<Box data-ws-id="13" data-ws-component="Box">
|
||||
<HtmlEmbed
|
||||
data-ws-id="15"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
<AccordionContent
|
||||
data-ws-id="17"
|
||||
data-ws-component="AccordionContent"
|
||||
>
|
||||
{"Yes. It adheres to the WAI-ARIA design pattern."}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
data-ws-id="19"
|
||||
data-ws-component="AccordionItem"
|
||||
data-ws-index="1"
|
||||
>
|
||||
<AccordionHeader data-ws-id="21" data-ws-component="AccordionHeader">
|
||||
<AccordionTrigger
|
||||
data-ws-id="23"
|
||||
data-ws-component="AccordionTrigger"
|
||||
>
|
||||
<Text data-ws-id="25" data-ws-component="Text">
|
||||
{"Is it styled?"}
|
||||
</Text>
|
||||
<Box data-ws-id="26" data-ws-component="Box">
|
||||
<HtmlEmbed
|
||||
data-ws-id="28"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
<AccordionContent
|
||||
data-ws-id="30"
|
||||
data-ws-component="AccordionContent"
|
||||
>
|
||||
{
|
||||
"Yes. It comes with default styles that matches the other components' aesthetic."
|
||||
}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
data-ws-id="32"
|
||||
data-ws-component="AccordionItem"
|
||||
data-ws-index="2"
|
||||
>
|
||||
<AccordionHeader data-ws-id="34" data-ws-component="AccordionHeader">
|
||||
<AccordionTrigger
|
||||
data-ws-id="36"
|
||||
data-ws-component="AccordionTrigger"
|
||||
>
|
||||
<Text data-ws-id="38" data-ws-component="Text">
|
||||
{"Is it animated?"}
|
||||
</Text>
|
||||
<Box data-ws-id="39" data-ws-component="Box">
|
||||
<HtmlEmbed
|
||||
data-ws-id="41"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
<AccordionContent
|
||||
data-ws-id="43"
|
||||
data-ws-component="AccordionContent"
|
||||
>
|
||||
{
|
||||
"Yes. It's animated by default, but you can disable it if you prefer."
|
||||
}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Accordion",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Accordion"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="AccordionItem"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
h3:where([data-ws-component="AccordionHeader"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px
|
||||
}
|
||||
button:where([data-ws-component="AccordionTrigger"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
div:where([data-ws-component="AccordionContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="6"] {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgba(226, 232, 240, 1)
|
||||
}
|
||||
[data-ws-id="8"] {
|
||||
display: flex
|
||||
}
|
||||
[data-ws-id="10"] {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
--accordion-trigger-icon-transform: 0deg
|
||||
}
|
||||
[data-ws-id="10"]:hover {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
[data-ws-id="10"][data-state=open] {
|
||||
--accordion-trigger-icon-transform: 180deg
|
||||
}
|
||||
[data-ws-id="13"] {
|
||||
rotate: var(--accordion-trigger-icon-transform);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
flex-grow: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms
|
||||
}
|
||||
[data-ws-id="17"] {
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
padding-bottom: 1rem
|
||||
}
|
||||
[data-ws-id="19"] {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgba(226, 232, 240, 1)
|
||||
}
|
||||
[data-ws-id="21"] {
|
||||
display: flex
|
||||
}
|
||||
[data-ws-id="23"] {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
--accordion-trigger-icon-transform: 0deg
|
||||
}
|
||||
[data-ws-id="23"]:hover {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
[data-ws-id="23"][data-state=open] {
|
||||
--accordion-trigger-icon-transform: 180deg
|
||||
}
|
||||
[data-ws-id="26"] {
|
||||
rotate: var(--accordion-trigger-icon-transform);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
flex-grow: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms
|
||||
}
|
||||
[data-ws-id="30"] {
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
padding-bottom: 1rem
|
||||
}
|
||||
[data-ws-id="32"] {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgba(226, 232, 240, 1)
|
||||
}
|
||||
[data-ws-id="34"] {
|
||||
display: flex
|
||||
}
|
||||
[data-ws-id="36"] {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
--accordion-trigger-icon-transform: 0deg
|
||||
}
|
||||
[data-ws-id="36"]:hover {
|
||||
text-decoration-line: underline
|
||||
}
|
||||
[data-ws-id="36"][data-state=open] {
|
||||
--accordion-trigger-icon-transform: 180deg
|
||||
}
|
||||
[data-ws-id="39"] {
|
||||
rotate: var(--accordion-trigger-icon-transform);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
flex-grow: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms
|
||||
}
|
||||
[data-ws-id="43"] {
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
padding-bottom: 1rem
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Accordion };
|
||||
@@ -0,0 +1,271 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
HtmlEmbed as HtmlEmbed,
|
||||
Text as Text,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Label as Label,
|
||||
Checkbox as Checkbox,
|
||||
CheckboxIndicator as CheckboxIndicator,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [checkboxChecked, set$checkboxChecked] = useState(false);
|
||||
let onCheckedChange = (checked: any) => {
|
||||
checkboxChecked = checked;
|
||||
set$checkboxChecked(checkboxChecked);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Label data-ws-id="1" data-ws-component="Label">
|
||||
<Checkbox
|
||||
data-ws-id="3"
|
||||
data-ws-component="Checkbox"
|
||||
checked={checkboxChecked}
|
||||
onCheckedChange={onCheckedChange}
|
||||
>
|
||||
<CheckboxIndicator
|
||||
data-ws-id="8"
|
||||
data-ws-component="CheckboxIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="10"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</CheckboxIndicator>
|
||||
</Checkbox>
|
||||
<Text data-ws-id="12" data-ws-component="Text" tag={"span"}>
|
||||
{"Checkbox"}
|
||||
</Text>
|
||||
</Label>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Checkbox",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
label:where([data-ws-component="Label"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Checkbox"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px
|
||||
}
|
||||
span:where([data-ws-component="CheckboxIndicator"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="1"] {
|
||||
display: flex;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
align-items: center
|
||||
}
|
||||
[data-ws-id="3"] {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
flex-grow: 0;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-top-right-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(15, 23, 42, 1);
|
||||
border-right-color: rgba(15, 23, 42, 1);
|
||||
border-bottom-color: rgba(15, 23, 42, 1);
|
||||
border-left-color: rgba(15, 23, 42, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px
|
||||
}
|
||||
[data-ws-id="3"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="3"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="3"][data-state=checked] {
|
||||
background-color: rgba(15, 23, 42, 1);
|
||||
color: rgba(248, 250, 252, 1)
|
||||
}
|
||||
[data-ws-id="8"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: currentColor
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Checkbox };
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
Button as Button,
|
||||
Text as Text,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Collapsible as Collapsible,
|
||||
CollapsibleTrigger as CollapsibleTrigger,
|
||||
CollapsibleContent as CollapsibleContent,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [collapsibleOpen, set$collapsibleOpen] = useState(false);
|
||||
let onOpenChange = (open: any) => {
|
||||
collapsibleOpen = open;
|
||||
set$collapsibleOpen(collapsibleOpen);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Collapsible
|
||||
data-ws-id="1"
|
||||
data-ws-component="Collapsible"
|
||||
open={collapsibleOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<CollapsibleTrigger
|
||||
data-ws-id="5"
|
||||
data-ws-component="CollapsibleTrigger"
|
||||
>
|
||||
<Button data-ws-id="6" data-ws-component="Button">
|
||||
{"Click to toggle content"}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent
|
||||
data-ws-id="8"
|
||||
data-ws-component="CollapsibleContent"
|
||||
>
|
||||
<Text data-ws-id="9" data-ws-component="Text">
|
||||
{"Collapsible Content"}
|
||||
</Text>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Collapsible",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Collapsible"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Button"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
text-transform: none
|
||||
}
|
||||
div:where([data-ws-component="CollapsibleContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="6"] {
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
height: 2.5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
[data-ws-id="6"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="6"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="6"]:hover {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Collapsible };
|
||||
@@ -0,0 +1,421 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
Button as Button,
|
||||
Text as Text,
|
||||
HtmlEmbed as HtmlEmbed,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Dialog as Dialog,
|
||||
DialogTrigger as DialogTrigger,
|
||||
DialogOverlay as DialogOverlay,
|
||||
DialogContent as DialogContent,
|
||||
DialogTitle as DialogTitle,
|
||||
DialogDescription as DialogDescription,
|
||||
DialogClose as DialogClose,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [dialogOpen, set$dialogOpen] = useState(false);
|
||||
let onOpenChange = (open: any) => {
|
||||
dialogOpen = open;
|
||||
set$dialogOpen(dialogOpen);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Dialog
|
||||
data-ws-id="1"
|
||||
data-ws-component="Dialog"
|
||||
open={dialogOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<DialogTrigger data-ws-id="5" data-ws-component="DialogTrigger">
|
||||
<Button data-ws-id="6" data-ws-component="Button">
|
||||
{"Button"}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay data-ws-id="8" data-ws-component="DialogOverlay">
|
||||
<DialogContent data-ws-id="10" data-ws-component="DialogContent">
|
||||
<Box data-ws-id="12" data-ws-component="Box">
|
||||
<DialogTitle data-ws-id="14" data-ws-component="DialogTitle">
|
||||
{"Dialog Title"}
|
||||
</DialogTitle>
|
||||
<DialogDescription
|
||||
data-ws-id="16"
|
||||
data-ws-component="DialogDescription"
|
||||
>
|
||||
{"Dialog description text you can edit"}
|
||||
</DialogDescription>
|
||||
</Box>
|
||||
<Text data-ws-id="18" data-ws-component="Text">
|
||||
{"The text you can edit"}
|
||||
</Text>
|
||||
<DialogClose data-ws-id="19" data-ws-component="DialogClose">
|
||||
<HtmlEmbed
|
||||
data-ws-id="21"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M13.566 2.434a.8.8 0 0 1 0 1.132L9.13 8l4.435 4.434a.8.8 0 0 1-1.132 1.132L8 9.13l-4.434 4.435a.8.8 0 0 1-1.132-1.132L6.87 8 2.434 3.566a.8.8 0 0 1 1.132-1.132L8 6.87l4.434-4.435a.8.8 0 0 1 1.132 0Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
</Dialog>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Dialog",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Button"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
text-transform: none
|
||||
}
|
||||
div:where([data-ws-component="DialogOverlay"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="DialogContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
h2:where([data-ws-component="DialogTitle"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
p:where([data-ws-component="DialogDescription"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
button:where([data-ws-component="DialogClose"]) {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
text-transform: none
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="6"] {
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
height: 2.5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
[data-ws-id="6"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="6"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="6"]:hover {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="8"] {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 50;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0 / 0.05));
|
||||
display: flex;
|
||||
overflow: auto
|
||||
}
|
||||
[data-ws-id="10"] {
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
max-width: 32rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
position: relative
|
||||
}
|
||||
[data-ws-id="12"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.25rem;
|
||||
column-gap: 0.25rem
|
||||
}
|
||||
[data-ws-id="14"] {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
line-height: 1.75rem;
|
||||
font-size: 1.125rem;
|
||||
letter-spacing: -0.025em
|
||||
}
|
||||
[data-ws-id="16"] {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgba(100, 116, 139, 1)
|
||||
}
|
||||
[data-ws-id="19"] {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-top-right-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
background-color: transparent;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px
|
||||
}
|
||||
[data-ws-id="19"]:hover {
|
||||
opacity: 1
|
||||
}
|
||||
[data-ws-id="19"]:focus {
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Dialog };
|
||||
@@ -0,0 +1,148 @@
|
||||
import { type ReactNode } from "react";
|
||||
import { Box as Box } from "@webstudio-is/sdk-components-react";
|
||||
import { Label as Label } from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Label data-ws-id="1" data-ws-component="Label">
|
||||
{"Form Label"}
|
||||
</Label>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Label",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
label:where([data-ws-component="Label"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="1"] {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
font-weight: 500
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Label };
|
||||
+1246
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,270 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
Button as Button,
|
||||
Text as Text,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Popover as Popover,
|
||||
PopoverTrigger as PopoverTrigger,
|
||||
PopoverContent as PopoverContent,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [popoverOpen, set$popoverOpen] = useState(false);
|
||||
let onOpenChange = (open: any) => {
|
||||
popoverOpen = open;
|
||||
set$popoverOpen(popoverOpen);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Popover
|
||||
data-ws-id="1"
|
||||
data-ws-component="Popover"
|
||||
open={popoverOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<PopoverTrigger data-ws-id="5" data-ws-component="PopoverTrigger">
|
||||
<Button data-ws-id="6" data-ws-component="Button">
|
||||
{"Button"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent data-ws-id="8" data-ws-component="PopoverContent">
|
||||
<Text data-ws-id="10" data-ws-component="Text">
|
||||
{"The text you can edit"}
|
||||
</Text>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Popover",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Button"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
text-transform: none
|
||||
}
|
||||
div:where([data-ws-component="PopoverContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="6"] {
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
height: 2.5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
[data-ws-id="6"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="6"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="6"]:hover {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="8"] {
|
||||
z-index: 50;
|
||||
width: 18rem;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
color: rgba(2, 8, 23, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Popover };
|
||||
+407
@@ -0,0 +1,407 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
HtmlEmbed as HtmlEmbed,
|
||||
Text as Text,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
RadioGroup as RadioGroup,
|
||||
Label as Label,
|
||||
RadioGroupItem as RadioGroupItem,
|
||||
RadioGroupIndicator as RadioGroupIndicator,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [radioGroupValue, set$radioGroupValue] = useState("");
|
||||
let onValueChange = (value: any) => {
|
||||
radioGroupValue = value;
|
||||
set$radioGroupValue(radioGroupValue);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<RadioGroup
|
||||
data-ws-id="1"
|
||||
data-ws-component="RadioGroup"
|
||||
value={radioGroupValue}
|
||||
onValueChange={onValueChange}
|
||||
>
|
||||
<Label data-ws-id="6" data-ws-component="Label">
|
||||
<RadioGroupItem
|
||||
data-ws-id="8"
|
||||
data-ws-component="RadioGroupItem"
|
||||
value={"default"}
|
||||
>
|
||||
<RadioGroupIndicator
|
||||
data-ws-id="11"
|
||||
data-ws-component="RadioGroupIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="12"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"/></svg>'
|
||||
}
|
||||
/>
|
||||
</RadioGroupIndicator>
|
||||
</RadioGroupItem>
|
||||
<Text data-ws-id="14" data-ws-component="Text">
|
||||
{"Default"}
|
||||
</Text>
|
||||
</Label>
|
||||
<Label data-ws-id="15" data-ws-component="Label">
|
||||
<RadioGroupItem
|
||||
data-ws-id="17"
|
||||
data-ws-component="RadioGroupItem"
|
||||
value={"comfortable"}
|
||||
>
|
||||
<RadioGroupIndicator
|
||||
data-ws-id="20"
|
||||
data-ws-component="RadioGroupIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="21"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"/></svg>'
|
||||
}
|
||||
/>
|
||||
</RadioGroupIndicator>
|
||||
</RadioGroupItem>
|
||||
<Text data-ws-id="23" data-ws-component="Text">
|
||||
{"Comfortable"}
|
||||
</Text>
|
||||
</Label>
|
||||
<Label data-ws-id="24" data-ws-component="Label">
|
||||
<RadioGroupItem
|
||||
data-ws-id="26"
|
||||
data-ws-component="RadioGroupItem"
|
||||
value={"compact"}
|
||||
>
|
||||
<RadioGroupIndicator
|
||||
data-ws-id="29"
|
||||
data-ws-component="RadioGroupIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="30"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"/></svg>'
|
||||
}
|
||||
/>
|
||||
</RadioGroupIndicator>
|
||||
</RadioGroupItem>
|
||||
<Text data-ws-id="32" data-ws-component="Text">
|
||||
{"Compact"}
|
||||
</Text>
|
||||
</Label>
|
||||
</RadioGroup>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/RadioGroup",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="RadioGroup"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
label:where([data-ws-component="Label"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="RadioGroupItem"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px
|
||||
}
|
||||
span:where([data-ws-component="RadioGroupIndicator"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="1"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem
|
||||
}
|
||||
[data-ws-id="6"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem
|
||||
}
|
||||
[data-ws-id="8"] {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(15, 23, 42, 1);
|
||||
border-right-color: rgba(15, 23, 42, 1);
|
||||
border-bottom-color: rgba(15, 23, 42, 1);
|
||||
border-left-color: rgba(15, 23, 42, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="8"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="8"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="15"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem
|
||||
}
|
||||
[data-ws-id="17"] {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(15, 23, 42, 1);
|
||||
border-right-color: rgba(15, 23, 42, 1);
|
||||
border-bottom-color: rgba(15, 23, 42, 1);
|
||||
border-left-color: rgba(15, 23, 42, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="17"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="17"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="24"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem
|
||||
}
|
||||
[data-ws-id="26"] {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(15, 23, 42, 1);
|
||||
border-right-color: rgba(15, 23, 42, 1);
|
||||
border-bottom-color: rgba(15, 23, 42, 1);
|
||||
border-left-color: rgba(15, 23, 42, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="26"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="26"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as RadioGroup };
|
||||
@@ -0,0 +1,504 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
HtmlEmbed as HtmlEmbed,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Select as Select,
|
||||
SelectTrigger as SelectTrigger,
|
||||
SelectValue as SelectValue,
|
||||
SelectContent as SelectContent,
|
||||
SelectViewport as SelectViewport,
|
||||
SelectItem as SelectItem,
|
||||
SelectItemIndicator as SelectItemIndicator,
|
||||
SelectItemText as SelectItemText,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [selectValue, set$selectValue] = useState("");
|
||||
let [selectOpen, set$selectOpen] = useState(false);
|
||||
let onValueChange = (value: any) => {
|
||||
selectValue = value;
|
||||
set$selectValue(selectValue);
|
||||
};
|
||||
let onOpenChange = (open: any) => {
|
||||
selectOpen = open;
|
||||
set$selectOpen(selectOpen);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Select
|
||||
data-ws-id="1"
|
||||
data-ws-component="Select"
|
||||
value={selectValue}
|
||||
onValueChange={onValueChange}
|
||||
open={selectOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<SelectTrigger data-ws-id="8" data-ws-component="SelectTrigger">
|
||||
<SelectValue
|
||||
data-ws-id="10"
|
||||
data-ws-component="SelectValue"
|
||||
placeholder={"Theme"}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent data-ws-id="12" data-ws-component="SelectContent">
|
||||
<SelectViewport data-ws-id="14" data-ws-component="SelectViewport">
|
||||
<SelectItem
|
||||
data-ws-id="16"
|
||||
data-ws-component="SelectItem"
|
||||
value={"light"}
|
||||
>
|
||||
<SelectItemIndicator
|
||||
data-ws-id="19"
|
||||
data-ws-component="SelectItemIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="21"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText
|
||||
data-ws-id="23"
|
||||
data-ws-component="SelectItemText"
|
||||
>
|
||||
{"Light"}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
data-ws-id="24"
|
||||
data-ws-component="SelectItem"
|
||||
value={"dark"}
|
||||
>
|
||||
<SelectItemIndicator
|
||||
data-ws-id="27"
|
||||
data-ws-component="SelectItemIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="29"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText
|
||||
data-ws-id="31"
|
||||
data-ws-component="SelectItemText"
|
||||
>
|
||||
{"Dark"}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
data-ws-id="32"
|
||||
data-ws-component="SelectItem"
|
||||
value={"system"}
|
||||
>
|
||||
<SelectItemIndicator
|
||||
data-ws-id="35"
|
||||
data-ws-component="SelectItemIndicator"
|
||||
>
|
||||
<HtmlEmbed
|
||||
data-ws-id="37"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText
|
||||
data-ws-id="39"
|
||||
data-ws-component="SelectItemText"
|
||||
>
|
||||
{"System"}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectViewport>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Select",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="SelectTrigger"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
text-transform: none
|
||||
}
|
||||
span:where([data-ws-component="SelectValue"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="SelectContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="SelectViewport"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="SelectItem"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
span:where([data-ws-component="SelectItemIndicator"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
span:where([data-ws-component="SelectItemText"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="8"] {
|
||||
display: flex;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
}
|
||||
[data-ws-id="8"]::placeholder {
|
||||
color: rgba(100, 116, 139, 1)
|
||||
}
|
||||
[data-ws-id="8"]:focus {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="8"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="12"] {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
min-width: 8rem;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(2, 8, 23, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
[data-ws-id="14"] {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
height: var(--radix-select-trigger-height);
|
||||
width: 100%;
|
||||
min-width: var(--radix-select-trigger-width)
|
||||
}
|
||||
[data-ws-id="16"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px
|
||||
}
|
||||
[data-ws-id="16"]:focus {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="16"][data-disabled] {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="19"] {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
display: flex;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
[data-ws-id="24"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px
|
||||
}
|
||||
[data-ws-id="24"]:focus {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="24"][data-disabled] {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="27"] {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
display: flex;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
[data-ws-id="32"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px
|
||||
}
|
||||
[data-ws-id="32"]:focus {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="32"][data-disabled] {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="35"] {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
display: flex;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Select };
|
||||
@@ -0,0 +1,430 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
Button as Button,
|
||||
HtmlEmbed as HtmlEmbed,
|
||||
Text as Text,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Dialog as Dialog,
|
||||
DialogTrigger as DialogTrigger,
|
||||
DialogOverlay as DialogOverlay,
|
||||
DialogContent as DialogContent,
|
||||
DialogTitle as DialogTitle,
|
||||
DialogDescription as DialogDescription,
|
||||
DialogClose as DialogClose,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [sheetOpen, set$sheetOpen] = useState(false);
|
||||
let onOpenChange = (open: any) => {
|
||||
sheetOpen = open;
|
||||
set$sheetOpen(sheetOpen);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Dialog
|
||||
data-ws-id="1"
|
||||
data-ws-component="Dialog"
|
||||
open={sheetOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<DialogTrigger data-ws-id="5" data-ws-component="DialogTrigger">
|
||||
<Button data-ws-id="6" data-ws-component="Button">
|
||||
<HtmlEmbed
|
||||
data-ws-id="8"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M2 5.998a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm0 5.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm0 5.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay data-ws-id="10" data-ws-component="DialogOverlay">
|
||||
<DialogContent data-ws-id="12" data-ws-component="DialogContent">
|
||||
<Box
|
||||
data-ws-id="14"
|
||||
data-ws-component="Box"
|
||||
tag={"nav"}
|
||||
role={"navigation"}
|
||||
>
|
||||
<Box data-ws-id="17" data-ws-component="Box">
|
||||
<DialogTitle data-ws-id="19" data-ws-component="DialogTitle">
|
||||
{"Sheet Title"}
|
||||
</DialogTitle>
|
||||
<DialogDescription
|
||||
data-ws-id="21"
|
||||
data-ws-component="DialogDescription"
|
||||
>
|
||||
{"Sheet description text you can edit"}
|
||||
</DialogDescription>
|
||||
</Box>
|
||||
<Text data-ws-id="23" data-ws-component="Text">
|
||||
{"The text you can edit"}
|
||||
</Text>
|
||||
</Box>
|
||||
<DialogClose data-ws-id="24" data-ws-component="DialogClose">
|
||||
<HtmlEmbed
|
||||
data-ws-id="26"
|
||||
data-ws-component="HtmlEmbed"
|
||||
code={
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M13.566 2.434a.8.8 0 0 1 0 1.132L9.13 8l4.435 4.434a.8.8 0 0 1-1.132 1.132L8 9.13l-4.434 4.435a.8.8 0 0 1-1.132-1.132L6.87 8 2.434 3.566a.8.8 0 0 1 1.132-1.132L8 6.87l4.434-4.435a.8.8 0 0 1 1.132 0Z" clip-rule="evenodd"/></svg>'
|
||||
}
|
||||
/>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
</Dialog>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Sheet",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Button"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
text-transform: none
|
||||
}
|
||||
div:where([data-ws-component="DialogOverlay"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="DialogContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
h2:where([data-ws-component="DialogTitle"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
p:where([data-ws-component="DialogDescription"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
button:where([data-ws-component="DialogClose"]) {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
text-transform: none
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="6"] {
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem
|
||||
}
|
||||
[data-ws-id="6"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="6"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="6"]:hover {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="10"] {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 50;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0 / 0.05));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto
|
||||
}
|
||||
[data-ws-id="12"] {
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
margin-right: auto;
|
||||
max-width: 24rem;
|
||||
flex-grow: 1
|
||||
}
|
||||
[data-ws-id="17"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.25rem;
|
||||
column-gap: 0.25rem
|
||||
}
|
||||
[data-ws-id="19"] {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
line-height: 1.75rem;
|
||||
font-size: 1.125rem;
|
||||
letter-spacing: -0.025em
|
||||
}
|
||||
[data-ws-id="21"] {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgba(100, 116, 139, 1)
|
||||
}
|
||||
[data-ws-id="24"] {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-top-right-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
background-color: transparent;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px
|
||||
}
|
||||
[data-ws-id="24"]:hover {
|
||||
opacity: 1
|
||||
}
|
||||
[data-ws-id="24"]:focus {
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Sheet };
|
||||
@@ -0,0 +1,247 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { Box as Box } from "@webstudio-is/sdk-components-react";
|
||||
import { Switch as Switch, SwitchThumb as SwitchThumb } from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [switchChecked, set$switchChecked] = useState(false);
|
||||
let onCheckedChange = (checked: any) => {
|
||||
switchChecked = checked;
|
||||
set$switchChecked(switchChecked);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Switch
|
||||
data-ws-id="1"
|
||||
data-ws-component="Switch"
|
||||
checked={switchChecked}
|
||||
onCheckedChange={onCheckedChange}
|
||||
>
|
||||
<SwitchThumb data-ws-id="6" data-ws-component="SwitchThumb" />
|
||||
</Switch>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Switch",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Switch"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px
|
||||
}
|
||||
span:where([data-ws-component="SwitchThumb"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="1"] {
|
||||
display: inline-flex;
|
||||
height: 24px;
|
||||
width: 44px;
|
||||
flex-grow: 0;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-top-width: 2px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-left-width: 2px;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms
|
||||
}
|
||||
[data-ws-id="1"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="1"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="1"][data-state=checked] {
|
||||
background-color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="1"][data-state=unchecked] {
|
||||
background-color: rgba(226, 232, 240, 1)
|
||||
}
|
||||
[data-ws-id="6"] {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms
|
||||
}
|
||||
[data-ws-id="6"][data-state=checked] {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
[data-ws-id="6"][data-state=unchecked] {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Switch };
|
||||
@@ -0,0 +1,340 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { Box as Box } from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Tabs as Tabs,
|
||||
TabsList as TabsList,
|
||||
TabsTrigger as TabsTrigger,
|
||||
TabsContent as TabsContent,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [tabsValue, set$tabsValue] = useState("0");
|
||||
let onValueChange = (value: any) => {
|
||||
tabsValue = value;
|
||||
set$tabsValue(tabsValue);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Tabs
|
||||
data-ws-id="1"
|
||||
data-ws-component="Tabs"
|
||||
value={tabsValue}
|
||||
onValueChange={onValueChange}
|
||||
>
|
||||
<TabsList data-ws-id="5" data-ws-component="TabsList">
|
||||
<TabsTrigger
|
||||
data-ws-id="7"
|
||||
data-ws-component="TabsTrigger"
|
||||
data-ws-index="0"
|
||||
>
|
||||
{"Account"}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
data-ws-id="9"
|
||||
data-ws-component="TabsTrigger"
|
||||
data-ws-index="1"
|
||||
>
|
||||
{"Password"}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent
|
||||
data-ws-id="11"
|
||||
data-ws-component="TabsContent"
|
||||
data-ws-index="0"
|
||||
>
|
||||
{"Make changes to your account here."}
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
data-ws-id="13"
|
||||
data-ws-component="TabsContent"
|
||||
data-ws-index="1"
|
||||
>
|
||||
{"Change your password here."}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Tabs",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Tabs"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="TabsList"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="TabsTrigger"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
border-left-width: 0px;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px
|
||||
}
|
||||
div:where([data-ws-component="TabsContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="5"] {
|
||||
display: inline-flex;
|
||||
height: 2.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
background-color: rgba(241, 245, 249, 1);
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
color: rgba(100, 116, 139, 1)
|
||||
}
|
||||
[data-ws-id="7"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms
|
||||
}
|
||||
[data-ws-id="7"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="7"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="7"][data-state=active] {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba(2, 8, 23, 1);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
|
||||
}
|
||||
[data-ws-id="9"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms
|
||||
}
|
||||
[data-ws-id="9"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="9"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="9"][data-state=active] {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba(2, 8, 23, 1);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
|
||||
}
|
||||
[data-ws-id="11"] {
|
||||
margin-top: 0.5rem
|
||||
}
|
||||
[data-ws-id="11"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="13"] {
|
||||
margin-top: 0.5rem
|
||||
}
|
||||
[data-ws-id="13"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Tabs };
|
||||
@@ -0,0 +1,268 @@
|
||||
import { type ReactNode, useState } from "react";
|
||||
import {
|
||||
Box as Box,
|
||||
Button as Button,
|
||||
Text as Text,
|
||||
} from "@webstudio-is/sdk-components-react";
|
||||
import {
|
||||
Tooltip as Tooltip,
|
||||
TooltipTrigger as TooltipTrigger,
|
||||
TooltipContent as TooltipContent,
|
||||
} from "../components";
|
||||
|
||||
const Page = (props: { scripts?: ReactNode }) => {
|
||||
let [tooltipOpen, set$tooltipOpen] = useState(false);
|
||||
let onOpenChange = (open: any) => {
|
||||
tooltipOpen = open;
|
||||
set$tooltipOpen(tooltipOpen);
|
||||
};
|
||||
return (
|
||||
<Box data-ws-id="root" data-ws-component="Box">
|
||||
<Tooltip
|
||||
data-ws-id="1"
|
||||
data-ws-component="Tooltip"
|
||||
open={tooltipOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<TooltipTrigger data-ws-id="5" data-ws-component="TooltipTrigger">
|
||||
<Button data-ws-id="6" data-ws-component="Button">
|
||||
{"Button"}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent data-ws-id="8" data-ws-component="TooltipContent">
|
||||
<Text data-ws-id="10" data-ws-component="Text">
|
||||
{"The text you can edit"}
|
||||
</Text>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{props.scripts}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Components/Tooltip",
|
||||
};
|
||||
|
||||
const Story = {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
html {margin: 0; display: grid; min-height: 100%}
|
||||
@media all {
|
||||
body:where([data-ws-component="Body"]) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
font-family: Arial, Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
div:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
address:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
article:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
aside:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
figure:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
footer:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
header:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
main:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
nav:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
section:where([data-ws-component="Box"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
button:where([data-ws-component="Button"]) {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
text-transform: none
|
||||
}
|
||||
div:where([data-ws-component="TooltipContent"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px
|
||||
}
|
||||
div:where([data-ws-component="Text"]) {
|
||||
box-sizing: border-box;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
outline-width: 1px;
|
||||
min-height: 1em
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
[data-ws-id="6"] {
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
height: 2.5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
[data-ws-id="6"]:focus-visible {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
|
||||
}
|
||||
[data-ws-id="6"]:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5
|
||||
}
|
||||
[data-ws-id="6"]:hover {
|
||||
background-color: rgba(241, 245, 249, 0.9);
|
||||
color: rgba(15, 23, 42, 1)
|
||||
}
|
||||
[data-ws-id="8"] {
|
||||
z-index: 50;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-top-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: rgba(226, 232, 240, 1);
|
||||
border-right-color: rgba(226, 232, 240, 1);
|
||||
border-bottom-color: rgba(226, 232, 240, 1);
|
||||
border-left-color: rgba(226, 232, 240, 1);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgba(2, 8, 23, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Page />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export { Story as Tooltip };
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Accordion as AccordionPrimitive } from "./accordion";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Accordion",
|
||||
component: AccordionPrimitive,
|
||||
} satisfies Meta<typeof AccordionPrimitive>;
|
||||
|
||||
export const Accordion: StoryObj<typeof AccordionPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Accordion",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
export const Accordion = forwardRef<
|
||||
HTMLDivElement,
|
||||
Omit<
|
||||
ComponentPropsWithoutRef<typeof Root>,
|
||||
Extract<ComponentPropsWithoutRef<typeof Root>, { type: "single" }>,
|
||||
"type" | "asChild" | "defaultValue" | "value" | "onValueChange"
|
||||
> & {
|
||||
value: string;
|
||||
@@ -35,10 +35,10 @@ export const Accordion = forwardRef<
|
||||
|
||||
export const AccordionItem = forwardRef<
|
||||
HTMLDivElement,
|
||||
Omit<ComponentPropsWithoutRef<typeof Item>, "asChild">
|
||||
Omit<ComponentPropsWithoutRef<typeof Item>, "value"> & { value?: string }
|
||||
>(({ value, ...props }, ref) => {
|
||||
const index = getIndexWithinAncestorFromComponentProps(props);
|
||||
return <Item ref={ref} value={value ?? index} {...props} />;
|
||||
return <Item ref={ref} value={value ?? index ?? ""} {...props} />;
|
||||
});
|
||||
|
||||
export const AccordionHeader: ForwardRefExoticComponent<
|
||||
|
||||
@@ -281,6 +281,7 @@ export const propsMetaAccordion: WsComponentPropsMeta = {
|
||||
|
||||
export const propsMetaAccordionItem: WsComponentPropsMeta = {
|
||||
props: propsAccordionItem,
|
||||
initialProps: ["value"],
|
||||
};
|
||||
|
||||
export const propsMetaAccordionHeader: WsComponentPropsMeta = {
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
import { Checkbox as CheckboxPrimitive } from "./checkbox";
|
||||
|
||||
export default {
|
||||
title: "Components/Checkbox",
|
||||
component: CheckboxPrimitive,
|
||||
} satisfies Meta<typeof CheckboxPrimitive>;
|
||||
|
||||
export const Checkbox: StoryObj<typeof CheckboxPrimitive> = {
|
||||
render: (props) =>
|
||||
renderComponentTemplate({
|
||||
name: "Checkbox",
|
||||
props: { ...props },
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Collapsible as CollapsiblePrimitive } from "./collapsible";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Collapsible",
|
||||
component: CollapsiblePrimitive,
|
||||
} satisfies Meta<typeof CollapsiblePrimitive>;
|
||||
|
||||
export const Collapsible: StoryObj<typeof CollapsiblePrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Collapsible",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Dialog as DialogPrimitive } from "./dialog";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Dialog",
|
||||
component: DialogPrimitive,
|
||||
} satisfies Meta<typeof DialogPrimitive>;
|
||||
|
||||
export const Dialog: StoryObj<typeof DialogPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Dialog",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Label as LabelPrimitive } from "./label";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Label",
|
||||
component: LabelPrimitive,
|
||||
} satisfies Meta<typeof LabelPrimitive>;
|
||||
|
||||
export const Label: StoryObj<typeof LabelPrimitive> = {
|
||||
render: (props) =>
|
||||
renderComponentTemplate({
|
||||
name: "Label",
|
||||
props: { ...props },
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { NavigationMenu as NavigationMenuPrimitive } from "./navigation-menu";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/NavigationMenu",
|
||||
component: NavigationMenuPrimitive,
|
||||
} satisfies Meta<typeof NavigationMenuPrimitive>;
|
||||
|
||||
export const NavigationMenu: StoryObj<typeof NavigationMenuPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "NavigationMenu",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Popover as PopoverPrimitive } from "./popover";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Popover",
|
||||
component: PopoverPrimitive,
|
||||
} satisfies Meta<typeof PopoverPrimitive>;
|
||||
|
||||
export const Popover: StoryObj<typeof PopoverPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Popover",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
import { RadioGroup as RadioGroupPrimitive } from "./radio-group";
|
||||
|
||||
export default {
|
||||
title: "Components/RadioGroup",
|
||||
component: RadioGroupPrimitive,
|
||||
} satisfies Meta<typeof RadioGroupPrimitive>;
|
||||
|
||||
export const RadioGroup: StoryObj<typeof RadioGroupPrimitive> = {
|
||||
render: (props) =>
|
||||
renderComponentTemplate({
|
||||
name: "RadioGroup",
|
||||
props: { ...props },
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Select as SelectPrimitive } from "./select";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Select",
|
||||
component: SelectPrimitive,
|
||||
} satisfies Meta<typeof SelectPrimitive>;
|
||||
|
||||
export const Select: StoryObj<typeof SelectPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Select",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Sheet as SheetPrimitive } from "./sheet";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Sheet",
|
||||
component: SheetPrimitive,
|
||||
} satisfies Meta<typeof SheetPrimitive>;
|
||||
|
||||
export const Sheet: StoryObj<typeof SheetPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Sheet",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
import { Switch as SwitchPrimitive } from "./switch";
|
||||
|
||||
export default {
|
||||
title: "Components/Switch",
|
||||
component: SwitchPrimitive,
|
||||
} satisfies Meta<typeof SwitchPrimitive>;
|
||||
|
||||
export const Switch: StoryObj<typeof SwitchPrimitive> = {
|
||||
render: (props) =>
|
||||
renderComponentTemplate({
|
||||
name: "Switch",
|
||||
props: { ...props },
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Tabs as TabsPrimitive } from "./tabs";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Tabs",
|
||||
component: TabsPrimitive,
|
||||
} satisfies Meta<typeof TabsPrimitive>;
|
||||
|
||||
export const Tabs: StoryObj<typeof TabsPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Tabs",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -22,18 +22,18 @@ export const TabsList = List;
|
||||
|
||||
export const TabsTrigger = forwardRef<
|
||||
HTMLButtonElement,
|
||||
ComponentPropsWithoutRef<typeof Trigger>
|
||||
Omit<ComponentPropsWithoutRef<typeof Trigger>, "value"> & { value?: string }
|
||||
>(({ value, ...props }, ref) => {
|
||||
const index = getIndexWithinAncestorFromComponentProps(props);
|
||||
return <Trigger ref={ref} value={value ?? index} {...props} />;
|
||||
return <Trigger ref={ref} value={value ?? index ?? ""} {...props} />;
|
||||
});
|
||||
|
||||
export const TabsContent = forwardRef<
|
||||
HTMLDivElement,
|
||||
ComponentPropsWithoutRef<typeof Content>
|
||||
Omit<ComponentPropsWithoutRef<typeof Content>, "value"> & { value?: string }
|
||||
>(({ value, ...props }, ref) => {
|
||||
const index = getIndexWithinAncestorFromComponentProps(props);
|
||||
return <Content ref={ref} value={value ?? index} {...props} />;
|
||||
return <Content ref={ref} value={value ?? index ?? ""} {...props} />;
|
||||
});
|
||||
|
||||
/* BUILDER HOOKS */
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { renderComponentTemplate } from "@webstudio-is/react-sdk";
|
||||
import { Tooltip as TooltipPrimitive } from "./tooltip";
|
||||
import * as baseComponents from "@webstudio-is/sdk-components-react";
|
||||
import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
|
||||
import * as radixComponents from "./components";
|
||||
import * as radixMetas from "./metas";
|
||||
|
||||
export default {
|
||||
title: "Components/Tooltip",
|
||||
component: TooltipPrimitive,
|
||||
} satisfies Meta<typeof TooltipPrimitive>;
|
||||
|
||||
export const Tooltip: StoryObj<typeof TooltipPrimitive> = {
|
||||
render: () =>
|
||||
renderComponentTemplate({
|
||||
name: "Tooltip",
|
||||
components: { ...baseComponents, ...radixComponents },
|
||||
metas: { ...baseMetas, ...radixMetas },
|
||||
}),
|
||||
};
|
||||
@@ -10,7 +10,7 @@ import { ReactSdkContext } from "@webstudio-is/react-sdk";
|
||||
|
||||
type Props = {
|
||||
code: string;
|
||||
executeScriptOnCanvas: boolean;
|
||||
executeScriptOnCanvas?: boolean;
|
||||
};
|
||||
|
||||
type ChildProps = {
|
||||
|
||||
@@ -30,5 +30,5 @@ export const propsMeta: WsComponentPropsMeta = {
|
||||
rows: 10,
|
||||
},
|
||||
},
|
||||
initialProps: [],
|
||||
initialProps: ["executeScriptOnCanvas"],
|
||||
};
|
||||
Generated
+39
@@ -1363,6 +1363,28 @@ importers:
|
||||
specifier: ^29.6.4
|
||||
version: 29.6.4(@types/node@18.13.0)
|
||||
|
||||
packages/sdk-cli:
|
||||
dependencies:
|
||||
'@webstudio-is/react-sdk':
|
||||
specifier: workspace:^
|
||||
version: link:../react-sdk
|
||||
'@webstudio-is/sdk':
|
||||
specifier: workspace:^
|
||||
version: link:../sdk
|
||||
'@webstudio-is/sdk-components-react':
|
||||
specifier: workspace:^
|
||||
version: link:../sdk-components-react
|
||||
param-case:
|
||||
specifier: ^3.0.4
|
||||
version: 3.0.4
|
||||
devDependencies:
|
||||
'@types/node':
|
||||
specifier: ^18.11.18
|
||||
version: 18.13.0
|
||||
'@webstudio-is/tsconfig':
|
||||
specifier: workspace:^
|
||||
version: link:../tsconfig
|
||||
|
||||
packages/sdk-components-react:
|
||||
dependencies:
|
||||
'@react-aria/utils':
|
||||
@@ -1478,6 +1500,9 @@ importers:
|
||||
'@webstudio-is/generate-arg-types':
|
||||
specifier: workspace:^
|
||||
version: link:../generate-arg-types
|
||||
'@webstudio-is/sdk-cli':
|
||||
specifier: workspace:^
|
||||
version: link:../sdk-cli
|
||||
'@webstudio-is/sdk-components-react':
|
||||
specifier: workspace:^
|
||||
version: link:../sdk-components-react
|
||||
@@ -9262,6 +9287,13 @@ packages:
|
||||
domhandler: 5.0.3
|
||||
dev: true
|
||||
|
||||
/dot-case@3.0.4:
|
||||
resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
|
||||
dependencies:
|
||||
no-case: 3.0.4
|
||||
tslib: 2.6.0
|
||||
dev: false
|
||||
|
||||
/dotenv-expand@10.0.0:
|
||||
resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -13632,6 +13664,13 @@ packages:
|
||||
/pako@0.2.9:
|
||||
resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
|
||||
|
||||
/param-case@3.0.4:
|
||||
resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
|
||||
dependencies:
|
||||
dot-case: 3.0.4
|
||||
tslib: 2.6.0
|
||||
dev: false
|
||||
|
||||
/parent-module@1.0.1:
|
||||
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
Reference in new issue
Block a user