index.stories.tsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import * as Icon from "@phosphor-icons/react/dist/ssr";
  2. import type { Meta, StoryObj } from "@storybook/react";
  3. import { Button as ButtonComponent, VARIANTS, SIZES } from "./index.js";
  4. const meta = {
  5. component: ButtonComponent,
  6. argTypes: {
  7. children: {
  8. control: "text",
  9. table: {
  10. category: "Contents",
  11. },
  12. },
  13. isDisabled: {
  14. control: "boolean",
  15. table: {
  16. category: "State",
  17. },
  18. },
  19. variant: {
  20. control: "inline-radio",
  21. options: VARIANTS,
  22. table: {
  23. category: "Variant",
  24. },
  25. },
  26. size: {
  27. control: "inline-radio",
  28. options: SIZES,
  29. table: {
  30. category: "Variant",
  31. },
  32. },
  33. rounded: {
  34. control: "boolean",
  35. table: {
  36. category: "Variant",
  37. },
  38. },
  39. hideText: {
  40. control: "boolean",
  41. table: {
  42. category: "Contents",
  43. },
  44. },
  45. beforeIcon: {
  46. control: "select",
  47. options: Object.keys(Icon),
  48. mapping: Icon,
  49. table: {
  50. category: "Contents",
  51. },
  52. },
  53. afterIcon: {
  54. control: "select",
  55. options: Object.keys(Icon),
  56. mapping: Icon,
  57. table: {
  58. category: "Contents",
  59. },
  60. },
  61. onPress: {
  62. table: {
  63. category: "Behavior",
  64. },
  65. },
  66. isPending: {
  67. control: "boolean",
  68. table: {
  69. category: "State",
  70. },
  71. },
  72. },
  73. } satisfies Meta<typeof ButtonComponent>;
  74. export default meta;
  75. export const Button = {
  76. args: {
  77. children: "Button",
  78. variant: "primary",
  79. size: "md",
  80. isDisabled: false,
  81. isPending: false,
  82. rounded: false,
  83. hideText: false,
  84. },
  85. } satisfies StoryObj<typeof ButtonComponent>;