@nlabs/gothamjs
Version:
Platform
155 lines (154 loc) • 10.8 kB
JavaScript
import { FormProvider, useForm } from "react-hook-form";
import { SelectField } from "./SelectField.js";
import { gothamColors } from "../../utils/colorUtils.js";
import { jsx } from "react/jsx-runtime";
const meta = {
argTypes: {
color: {
control: "select",
description: "The color of the select field",
options: gothamColors
},
defaultValue: {
control: "text",
description: "The default selected value"
},
label: {
control: "text",
description: "The label text for the select field"
},
name: {
control: "text",
description: "The name of the select field"
},
options: {
control: "object",
description: "Array of select options"
}
},
component: SelectField,
decorators: [
(Story) => {
const methods = useForm();
return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center min-h-screen w-full p-4", style: { width: "300px" }, children: /* @__PURE__ */ jsx(Story, {}) }) });
}
],
title: "Components/SelectField"
};
var SelectField_stories_default = meta;
const defaultOptions = [
{
id: 1,
label: "First Option",
value: "1"
},
{
id: 2,
label: "Second Option",
value: "2"
},
{
id: 3,
label: "Third Option",
value: "3"
}
];
const Default = {
args: {
label: "Select an Option",
name: "selectGroup",
options: defaultOptions
}
};
const WithDefaultValue = {
args: {
defaultValue: "2",
label: "Select an Option",
name: "selectGroupWithDefault",
options: defaultOptions
}
};
const WithIcons = {
args: {
label: "Select a Category",
name: "categorySelect",
options: [
{
icon: "briefcase",
id: 1,
label: "Work",
value: "work"
},
{
icon: "user",
id: 2,
label: "Personal",
value: "personal"
},
{
icon: "shopping-cart",
id: 3,
label: "Shopping",
value: "shopping"
}
]
}
};
const WithImages = {
args: {
label: "Select a Country",
name: "countrySelect",
options: [
{
id: 1,
image: "https://flagcdn.com/w20/us.png",
label: "United States",
value: "us"
},
{
id: 2,
image: "https://flagcdn.com/w20/gb.png",
label: "United Kingdom",
value: "gb"
},
{
id: 3,
image: "https://flagcdn.com/w20/ca.png",
label: "Canada",
value: "ca"
}
]
}
};
const WithLongLabels = {
args: {
label: "Select a Plan",
name: "planSelect",
options: [
{
id: 1,
label: "Basic Plan - Perfect for individuals and small projects",
value: "basic"
},
{
id: 2,
label: "Professional Plan - Ideal for growing businesses with advanced features",
value: "pro"
},
{
id: 3,
label: "Enterprise Plan - Full-featured solution with dedicated support",
value: "enterprise"
}
]
}
};
export {
Default,
WithDefaultValue,
WithIcons,
WithImages,
WithLongLabels,
SelectField_stories_default as default
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2VsZWN0RmllbGQvU2VsZWN0RmllbGQuc3Rvcmllcy50c3giXSwKICAic291cmNlc0NvbnRlbnQiOiBbImltcG9ydCB7Rm9ybVByb3ZpZGVyLCB1c2VGb3JtfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nO1xuXG5pbXBvcnQge1NlbGVjdEZpZWxkfSBmcm9tICcuL1NlbGVjdEZpZWxkLmpzJztcbmltcG9ydCB7Z290aGFtQ29sb3JzfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzLmpzJztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAbmxhYnMvbGV4L3N0b3J5Ym9vayc7XG5cblxuY29uc3QgbWV0YTogTWV0YTx0eXBlb2YgU2VsZWN0RmllbGQ+ID0ge1xuICBhcmdUeXBlczoge1xuICAgIGNvbG9yOiB7XG4gICAgICBjb250cm9sOiAnc2VsZWN0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGNvbG9yIG9mIHRoZSBzZWxlY3QgZmllbGQnLFxuICAgICAgb3B0aW9uczogZ290aGFtQ29sb3JzXG4gICAgfSxcbiAgICBkZWZhdWx0VmFsdWU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGRlZmF1bHQgc2VsZWN0ZWQgdmFsdWUnXG4gICAgfSxcbiAgICBsYWJlbDoge1xuICAgICAgY29udHJvbDogJ3RleHQnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgbGFiZWwgdGV4dCBmb3IgdGhlIHNlbGVjdCBmaWVsZCdcbiAgICB9LFxuICAgIG5hbWU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIG5hbWUgb2YgdGhlIHNlbGVjdCBmaWVsZCdcbiAgICB9LFxuICAgIG9wdGlvbnM6IHtcbiAgICAgIGNvbnRyb2w6ICdvYmplY3QnLFxuICAgICAgZGVzY3JpcHRpb246ICdBcnJheSBvZiBzZWxlY3Qgb3B0aW9ucydcbiAgICB9XG4gIH0sXG4gIGNvbXBvbmVudDogU2VsZWN0RmllbGQsXG4gIGRlY29yYXRvcnM6IFtcbiAgICAoU3RvcnkpID0+IHtcbiAgICAgIGNvbnN0IG1ldGhvZHMgPSB1c2VGb3JtKCk7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIG1pbi1oLXNjcmVlbiB3LWZ1bGwgcC00XCIgc3R5bGU9e3t3aWR0aDogJzMwMHB4J319PlxuICAgICAgICAgICAgPFN0b3J5IC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvRm9ybVByb3ZpZGVyPlxuICAgICAgKTtcbiAgICB9XG4gIF0sXG4gIHRpdGxlOiAnQ29tcG9uZW50cy9TZWxlY3RGaWVsZCdcbn07XG5cbmV4cG9ydCBkZWZhdWx0IG1ldGE7XG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIFNlbGVjdEZpZWxkPjtcblxuY29uc3QgZGVmYXVsdE9wdGlvbnMgPSBbXG4gIHtcbiAgICBpZDogMSxcbiAgICBsYWJlbDogJ0ZpcnN0IE9wdGlvbicsXG4gICAgdmFsdWU6ICcxJ1xuICB9LFxuICB7XG4gICAgaWQ6IDIsXG4gICAgbGFiZWw6ICdTZWNvbmQgT3B0aW9uJyxcbiAgICB2YWx1ZTogJzInXG4gIH0sXG4gIHtcbiAgICBpZDogMyxcbiAgICBsYWJlbDogJ1RoaXJkIE9wdGlvbicsXG4gICAgdmFsdWU6ICczJ1xuICB9XG5dO1xuXG5leHBvcnQgY29uc3QgRGVmYXVsdDogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBsYWJlbDogJ1NlbGVjdCBhbiBPcHRpb24nLFxuICAgIG5hbWU6ICdzZWxlY3RHcm91cCcsXG4gICAgb3B0aW9uczogZGVmYXVsdE9wdGlvbnNcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhEZWZhdWx0VmFsdWU6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgZGVmYXVsdFZhbHVlOiAnMicsXG4gICAgbGFiZWw6ICdTZWxlY3QgYW4gT3B0aW9uJyxcbiAgICBuYW1lOiAnc2VsZWN0R3JvdXBXaXRoRGVmYXVsdCcsXG4gICAgb3B0aW9uczogZGVmYXVsdE9wdGlvbnNcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhJY29uczogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBsYWJlbDogJ1NlbGVjdCBhIENhdGVnb3J5JyxcbiAgICBuYW1lOiAnY2F0ZWdvcnlTZWxlY3QnLFxuICAgIG9wdGlvbnM6IFtcbiAgICAgIHtcbiAgICAgICAgaWNvbjogJ2JyaWVmY2FzZScsXG4gICAgICAgIGlkOiAxLFxuICAgICAgICBsYWJlbDogJ1dvcmsnLFxuICAgICAgICB2YWx1ZTogJ3dvcmsnXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpY29uOiAndXNlcicsXG4gICAgICAgIGlkOiAyLFxuICAgICAgICBsYWJlbDogJ1BlcnNvbmFsJyxcbiAgICAgICAgdmFsdWU6ICdwZXJzb25hbCdcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGljb246ICdzaG9wcGluZy1jYXJ0JyxcbiAgICAgICAgaWQ6IDMsXG4gICAgICAgIGxhYmVsOiAnU2hvcHBpbmcnLFxuICAgICAgICB2YWx1ZTogJ3Nob3BwaW5nJ1xuICAgICAgfVxuICAgIF1cbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhJbWFnZXM6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgbGFiZWw6ICdTZWxlY3QgYSBDb3VudHJ5JyxcbiAgICBuYW1lOiAnY291bnRyeVNlbGVjdCcsXG4gICAgb3B0aW9uczogW1xuICAgICAge1xuICAgICAgICBpZDogMSxcbiAgICAgICAgaW1hZ2U6ICdodHRwczovL2ZsYWdjZG4uY29tL3cyMC91cy5wbmcnLFxuICAgICAgICBsYWJlbDogJ1VuaXRlZCBTdGF0ZXMnLFxuICAgICAgICB2YWx1ZTogJ3VzJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6IDIsXG4gICAgICAgIGltYWdlOiAnaHR0cHM6Ly9mbGFnY2RuLmNvbS93MjAvZ2IucG5nJyxcbiAgICAgICAgbGFiZWw6ICdVbml0ZWQgS2luZ2RvbScsXG4gICAgICAgIHZhbHVlOiAnZ2InXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogMyxcbiAgICAgICAgaW1hZ2U6ICdodHRwczovL2ZsYWdjZG4uY29tL3cyMC9jYS5wbmcnLFxuICAgICAgICBsYWJlbDogJ0NhbmFkYScsXG4gICAgICAgIHZhbHVlOiAnY2EnXG4gICAgICB9XG4gICAgXVxuICB9XG59O1xuXG5leHBvcnQgY29uc3QgV2l0aExvbmdMYWJlbHM6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgbGFiZWw6ICdTZWxlY3QgYSBQbGFuJyxcbiAgICBuYW1lOiAncGxhblNlbGVjdCcsXG4gICAgb3B0aW9uczogW1xuICAgICAge1xuICAgICAgICBpZDogMSxcbiAgICAgICAgbGFiZWw6ICdCYXNpYyBQbGFuIC0gUGVyZmVjdCBmb3IgaW5kaXZpZHVhbHMgYW5kIHNtYWxsIHByb2plY3RzJyxcbiAgICAgICAgdmFsdWU6ICdiYXNpYydcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGlkOiAyLFxuICAgICAgICBsYWJlbDogJ1Byb2Zlc3Npb25hbCBQbGFuIC0gSWRlYWwgZm9yIGdyb3dpbmcgYnVzaW5lc3NlcyB3aXRoIGFkdmFuY2VkIGZlYXR1cmVzJyxcbiAgICAgICAgdmFsdWU6ICdwcm8nXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogMyxcbiAgICAgICAgbGFiZWw6ICdFbnRlcnByaXNlIFBsYW4gLSBGdWxsLWZlYXR1cmVkIHNvbHV0aW9uIHdpdGggZGVkaWNhdGVkIHN1cHBvcnQnLFxuICAgICAgICB2YWx1ZTogJ2VudGVycHJpc2UnXG4gICAgICB9XG4gICAgXVxuICB9XG59OyJdLAogICJtYXBwaW5ncyI6ICJBQUFBLFNBQVEsY0FBYyxlQUFjO0FBRXBDLFNBQVEsbUJBQWtCO0FBQzFCLFNBQVEsb0JBQW1CO0FBb0NmO0FBL0JaLE1BQU0sT0FBaUM7QUFBQSxFQUNyQyxVQUFVO0FBQUEsSUFDUixPQUFPO0FBQUEsTUFDTCxTQUFTO0FBQUEsTUFDVCxhQUFhO0FBQUEsTUFDYixTQUFTO0FBQUEsSUFDWDtBQUFBLElBQ0EsY0FBYztBQUFBLE1BQ1osU0FBUztBQUFBLE1BQ1QsYUFBYTtBQUFBLElBQ2Y7QUFBQSxJQUNBLE9BQU87QUFBQSxNQUNMLFNBQVM7QUFBQSxNQUNULGFBQWE7QUFBQSxJQUNmO0FBQUEsSUFDQSxNQUFNO0FBQUEsTUFDSixTQUFTO0FBQUEsTUFDVCxhQUFhO0FBQUEsSUFDZjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsU0FBUztBQUFBLE1BQ1QsYUFBYTtBQUFBLElBQ2Y7QUFBQSxFQUNGO0FBQUEsRUFDQSxXQUFXO0FBQUEsRUFDWCxZQUFZO0FBQUEsSUFDVixDQUFDLFVBQVU7QUFDVCxZQUFNLFVBQVUsUUFBUTtBQUN4QixhQUNFLG9CQUFDLGdCQUFjLEdBQUcsU0FDaEIsOEJBQUMsU0FBSSxXQUFVLHFFQUFvRSxPQUFPLEVBQUMsT0FBTyxRQUFPLEdBQ3ZHLDhCQUFDLFNBQU0sR0FDVCxHQUNGO0FBQUEsSUFFSjtBQUFBLEVBQ0Y7QUFBQSxFQUNBLE9BQU87QUFDVDtBQUVBLElBQU8sOEJBQVE7QUFHZixNQUFNLGlCQUFpQjtBQUFBLEVBQ3JCO0FBQUEsSUFDRSxJQUFJO0FBQUEsSUFDSixPQUFPO0FBQUEsSUFDUCxPQUFPO0FBQUEsRUFDVDtBQUFBLEVBQ0E7QUFBQSxJQUNFLElBQUk7QUFBQSxJQUNKLE9BQU87QUFBQSxJQUNQLE9BQU87QUFBQSxFQUNUO0FBQUEsRUFDQTtBQUFBLElBQ0UsSUFBSTtBQUFBLElBQ0osT0FBTztBQUFBLElBQ1AsT0FBTztBQUFBLEVBQ1Q7QUFDRjtBQUVPLE1BQU0sVUFBaUI7QUFBQSxFQUM1QixNQUFNO0FBQUEsSUFDSixPQUFPO0FBQUEsSUFDUCxNQUFNO0FBQUEsSUFDTixTQUFTO0FBQUEsRUFDWDtBQUNGO0FBRU8sTUFBTSxtQkFBMEI7QUFBQSxFQUNyQyxNQUFNO0FBQUEsSUFDSixjQUFjO0FBQUEsSUFDZCxPQUFPO0FBQUEsSUFDUCxNQUFNO0FBQUEsSUFDTixTQUFTO0FBQUEsRUFDWDtBQUNGO0FBRU8sTUFBTSxZQUFtQjtBQUFBLEVBQzlCLE1BQU07QUFBQSxJQUNKLE9BQU87QUFBQSxJQUNQLE1BQU07QUFBQSxJQUNOLFNBQVM7QUFBQSxNQUNQO0FBQUEsUUFDRSxNQUFNO0FBQUEsUUFDTixJQUFJO0FBQUEsUUFDSixPQUFPO0FBQUEsUUFDUCxPQUFPO0FBQUEsTUFDVDtBQUFBLE1BQ0E7QUFBQSxRQUNFLE1BQU07QUFBQSxRQUNOLElBQUk7QUFBQSxRQUNKLE9BQU87QUFBQSxRQUNQLE9BQU87QUFBQSxNQUNUO0FBQUEsTUFDQTtBQUFBLFFBQ0UsTUFBTTtBQUFBLFFBQ04sSUFBSTtBQUFBLFFBQ0osT0FBTztBQUFBLFFBQ1AsT0FBTztBQUFBLE1BQ1Q7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGO0FBRU8sTUFBTSxhQUFvQjtBQUFBLEVBQy9CLE1BQU07QUFBQSxJQUNKLE9BQU87QUFBQSxJQUNQLE1BQU07QUFBQSxJQUNOLFNBQVM7QUFBQSxNQUNQO0FBQUEsUUFDRSxJQUFJO0FBQUEsUUFDSixPQUFPO0FBQUEsUUFDUCxPQUFPO0FBQUEsUUFDUCxPQUFPO0FBQUEsTUFDVDtBQUFBLE1BQ0E7QUFBQSxRQUNFLElBQUk7QUFBQSxRQUNKLE9BQU87QUFBQSxRQUNQLE9BQU87QUFBQSxRQUNQLE9BQU87QUFBQSxNQUNUO0FBQUEsTUFDQTtBQUFBLFFBQ0UsSUFBSTtBQUFBLFFBQ0osT0FBTztBQUFBLFFBQ1AsT0FBTztBQUFBLFFBQ1AsT0FBTztBQUFBLE1BQ1Q7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGO0FBRU8sTUFBTSxpQkFBd0I7QUFBQSxFQUNuQyxNQUFNO0FBQUEsSUFDSixPQUFPO0FBQUEsSUFDUCxNQUFNO0FBQUEsSUFDTixTQUFTO0FBQUEsTUFDUDtBQUFBLFFBQ0UsSUFBSTtBQUFBLFFBQ0osT0FBTztBQUFBLFFBQ1AsT0FBTztBQUFBLE1BQ1Q7QUFBQSxNQUNBO0FBQUEsUUFDRSxJQUFJO0FBQUEsUUFDSixPQUFPO0FBQUEsUUFDUCxPQUFPO0FBQUEsTUFDVDtBQUFBLE1BQ0E7QUFBQSxRQUNFLElBQUk7QUFBQSxRQUNKLE9BQU87QUFBQSxRQUNQLE9BQU87QUFBQSxNQUNUO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRjsiLAogICJuYW1lcyI6IFtdCn0K