mirror of
https://github.com/actualbudget/actual.git
synced 2026-04-30 18:00:06 -05:00
🎨 Reorganising Storybook and more component stories (#6924)
* reorg of storybook docs and add some new components * releaes notes * Update meta tags for Actual Budget Design System * Increase sidebar item font size from 14px to 16px
This commit is contained in:
Michael Clark
GitHub
@@ -13,7 +13,8 @@ function getAbsolutePath(value: string) {
|
||||
}
|
||||
const config: StorybookConfig = {
|
||||
stories: [
|
||||
'../src/Introduction.mdx',
|
||||
'../src/Concepts/*.mdx',
|
||||
'../src/Themes/*.mdx',
|
||||
'../src/**/*.mdx',
|
||||
'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
|
||||
],
|
||||
|
||||
99
packages/component-library/.storybook/manager-head.html
Normal file
99
packages/component-library/.storybook/manager-head.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!--
|
||||
Override the default favicon used in the Storybook in the browser tab.
|
||||
-->
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href="https://design.actualbudget.org/favicon.ico"
|
||||
/>
|
||||
<link href="/global-styles.css" rel="stylesheet" />
|
||||
|
||||
<!-- Primary meta tags -->
|
||||
<meta name="title" content="Actual Budget Design System" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Actual Budget is a super fast and privacy-focused app for managing your finances. At its heart is the well proven and much loved Envelope Budgeting methodology."
|
||||
/>
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://design.actualbudget.org" />
|
||||
<meta property="og:title" content="Actual Budget Design System" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Actual Budget is a super fast and privacy-focused app for managing your finances. At its heart is the well proven and much loved Envelope Budgeting methodology."
|
||||
/>
|
||||
<meta property="og:locale" content="en" />
|
||||
<meta property="og:image" content="https://design.actualbudget.org/og.webp" />
|
||||
<meta property="og:image:type" content="image/webp" />
|
||||
<meta property="og:image:alt" content="Actual Budget Design System" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:image" content="https://design.actualbudget.org/og.webp" />
|
||||
|
||||
<!--
|
||||
Override the default styles used in the Storybook svg icons for the left tree panel.
|
||||
|
||||
@see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches
|
||||
|
||||
> 💡 NOTE:
|
||||
>
|
||||
> This is brittle way for providing custom non thenable styles for manager UI
|
||||
>
|
||||
> Those selectors might change on any storybook version bump.
|
||||
-->
|
||||
|
||||
<style>
|
||||
#storybook-explorer-searchfield {
|
||||
font-weight: 400 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
|
||||
.sidebar-item svg,
|
||||
.sidebar-svg-icon {
|
||||
color: #272630 !important;
|
||||
}
|
||||
|
||||
.sidebar-item[data-selected='true'] svg,
|
||||
.sidebar-item[data-selected='true'] .sidebar-svg-icon {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.sidebar-subheading button,
|
||||
button[data-action='collapse-ref'] {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
letter-spacing: -0.01em !important;
|
||||
text-transform: none !important;
|
||||
color: #272630 !important;
|
||||
}
|
||||
|
||||
.sidebar-subheading:hover button,
|
||||
button[data-action='collapse-ref']:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
align-items: center !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
color: #272630 !important;
|
||||
}
|
||||
|
||||
.sidebar-item a {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.sidebar-item[data-selected='true'] {
|
||||
font-weight: 600 !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
BIN
packages/component-library/.storybook/public/favicon.ico
Normal file
BIN
packages/component-library/.storybook/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1 @@
|
||||
/* Custom Storybook Styling */
|
||||
BIN
packages/component-library/.storybook/public/og.webp
Normal file
BIN
packages/component-library/.storybook/public/og.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { AlignedText } from './AlignedText';
|
||||
|
||||
const meta = {
|
||||
title: 'AlignedText',
|
||||
title: 'Components/AlignedText',
|
||||
component: AlignedText,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Block } from './Block';
|
||||
import { theme } from './theme';
|
||||
|
||||
const meta = {
|
||||
title: 'Block',
|
||||
title: 'Components/Block',
|
||||
component: Block,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
@@ -4,7 +4,7 @@ import { fn } from 'storybook/test';
|
||||
import { Button } from './Button';
|
||||
|
||||
const meta = {
|
||||
title: 'Button',
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Paragraph } from './Paragraph';
|
||||
import { theme } from './theme';
|
||||
|
||||
const meta = {
|
||||
title: 'Card',
|
||||
title: 'Components/Card',
|
||||
component: Card,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Button } from './Button';
|
||||
import { ColorPicker } from './ColorPicker';
|
||||
|
||||
const meta = {
|
||||
title: 'ColorPicker',
|
||||
title: 'Components/ColorPicker',
|
||||
component: ColorPicker,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta title="Introduction" />
|
||||
<Meta title="Concepts/Introduction" />
|
||||
|
||||
# Actual Budget Component Library
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Input } from './Input';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'FormError',
|
||||
title: 'Components/FormError',
|
||||
component: FormError,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
86
packages/component-library/src/InitialFocus.stories.tsx
Normal file
86
packages/component-library/src/InitialFocus.stories.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { type Ref } from 'react';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { InitialFocus } from './InitialFocus';
|
||||
import { Input } from './Input';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/InitialFocus',
|
||||
component: InitialFocus,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof InitialFocus>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const WithInput: Story = {
|
||||
args: {
|
||||
children: <Input placeholder="This input will be focused on mount" />,
|
||||
},
|
||||
render: args => (
|
||||
<View style={{ width: 300 }}>
|
||||
<InitialFocus {...args} />
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'InitialFocus automatically focuses its child element when the component mounts. The input will receive focus and have its text selected.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithFunctionChild: Story = {
|
||||
args: {
|
||||
children: <Input placeholder="Focused via function child" />,
|
||||
},
|
||||
render: () => (
|
||||
<View style={{ width: 300 }}>
|
||||
<InitialFocus>
|
||||
{ref => (
|
||||
<Input
|
||||
ref={ref as Ref<HTMLInputElement>}
|
||||
placeholder="Focused via function child"
|
||||
/>
|
||||
)}
|
||||
</InitialFocus>
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'InitialFocus can accept a function as child for components that need custom ref handling.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const MultipleInputsOnlyFirstFocused: Story = {
|
||||
args: {
|
||||
children: <Input placeholder="This one is focused" />,
|
||||
},
|
||||
render: args => (
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<InitialFocus {...args} />
|
||||
<Input placeholder="This one is not focused" />
|
||||
<Input placeholder="This one is also not focused" />
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'When multiple inputs are present, only the one wrapped in InitialFocus will receive initial focus.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
101
packages/component-library/src/InlineField.stories.tsx
Normal file
101
packages/component-library/src/InlineField.stories.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { InlineField } from './InlineField';
|
||||
import { Input } from './Input';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/InlineField',
|
||||
component: InlineField,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof InlineField>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Name',
|
||||
width: 300,
|
||||
children: <Input style={{ flex: 1 }} />,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'InlineField displays a label and input side-by-side in a horizontal layout.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCustomLabelWidth: Story = {
|
||||
args: {
|
||||
label: 'Email Address',
|
||||
labelWidth: 120,
|
||||
width: 400,
|
||||
children: <Input style={{ flex: 1 }} placeholder="user@example.com" />,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Custom label width can be specified to accommodate longer labels.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const MultipleFields: Story = {
|
||||
args: {
|
||||
label: 'First Name',
|
||||
width: 300,
|
||||
},
|
||||
render: args => (
|
||||
<View style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<InlineField {...args}>
|
||||
<Input style={{ flex: 1 }} />
|
||||
</InlineField>
|
||||
<InlineField label="Last Name" width={300}>
|
||||
<Input style={{ flex: 1 }} />
|
||||
</InlineField>
|
||||
<InlineField label="Email" width={300}>
|
||||
<Input style={{ flex: 1 }} type="email" />
|
||||
</InlineField>
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Multiple InlineFields stack vertically with consistent label alignment.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithPercentageWidth: Story = {
|
||||
args: {
|
||||
label: 'Description',
|
||||
width: '100%',
|
||||
children: <Input style={{ flex: 1 }} />,
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 400 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Width can be specified as a percentage for responsive layouts.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
215
packages/component-library/src/Input.stories.tsx
Normal file
215
packages/component-library/src/Input.stories.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { Input } from './Input';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Input',
|
||||
component: Input,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof Input>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
placeholder: 'Enter text...',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 250 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'A basic input field with placeholder text.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithValue: Story = {
|
||||
args: {
|
||||
defaultValue: 'Hello World',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 250 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Input with a pre-filled value.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
defaultValue: 'Disabled input',
|
||||
disabled: true,
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 250 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Disabled inputs prevent user interaction and display muted text.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithOnEnter: Story = {
|
||||
render: function Render() {
|
||||
const [submittedValue, setSubmittedValue] = useState('');
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: 250,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
placeholder="Press Enter to submit"
|
||||
onEnter={value => setSubmittedValue(value)}
|
||||
/>
|
||||
{submittedValue && <span>Submitted: {submittedValue}</span>}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'The onEnter callback is triggered when the user presses Enter.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithOnEscape: Story = {
|
||||
render: function Render() {
|
||||
const [escaped, setEscaped] = useState(false);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: 250,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
placeholder="Press Escape to cancel"
|
||||
onEscape={() => setEscaped(true)}
|
||||
/>
|
||||
{escaped && <span>Escape pressed!</span>}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'The onEscape callback is triggered when the user presses Escape.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithOnChangeValue: Story = {
|
||||
render: function Render() {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: 250,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
placeholder="Type something..."
|
||||
onChangeValue={newValue => setValue(newValue)}
|
||||
/>
|
||||
<span>Current value: {value}</span>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'The onChangeValue callback provides the new value on each keystroke.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const NumberInput: Story = {
|
||||
args: {
|
||||
type: 'number',
|
||||
placeholder: '0',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 150 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Input configured for numeric values.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const PasswordInput: Story = {
|
||||
args: {
|
||||
type: 'password',
|
||||
placeholder: 'Enter password',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 250 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Password input masks the entered text.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
97
packages/component-library/src/Label.stories.tsx
Normal file
97
packages/component-library/src/Label.stories.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { Input } from './Input';
|
||||
import { Label } from './Label';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Label',
|
||||
component: Label,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof Label>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: 'Username',
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'A basic label component for form fields.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInput: Story = {
|
||||
args: {
|
||||
title: 'Email Address',
|
||||
},
|
||||
render: args => (
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
|
||||
<Label {...args} />
|
||||
<Input placeholder="user@example.com" style={{ width: 250 }} />
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Label used with an input field in a vertical layout.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const MultipleLabels: Story = {
|
||||
args: {
|
||||
title: 'First Name',
|
||||
},
|
||||
render: args => (
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
|
||||
<Label {...args} />
|
||||
<Input style={{ width: 250 }} />
|
||||
</View>
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
|
||||
<Label title="Last Name" />
|
||||
<Input style={{ width: 250 }} />
|
||||
</View>
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
|
||||
<Label title="Password" />
|
||||
<Input type="password" style={{ width: 250 }} />
|
||||
</View>
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Multiple labels and inputs in a form layout.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomStyle: Story = {
|
||||
args: {
|
||||
title: 'Custom Styled Label',
|
||||
style: {
|
||||
fontSize: 16,
|
||||
color: '#007bff',
|
||||
textAlign: 'left',
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Label with custom styling applied.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
243
packages/component-library/src/Menu.stories.tsx
Normal file
243
packages/component-library/src/Menu.stories.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { SvgAdd, SvgTrash } from './icons/v1';
|
||||
import { SvgPencil1 } from './icons/v2';
|
||||
import { Menu, type MenuItem } from './Menu';
|
||||
import { Text } from './Text';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Menu',
|
||||
component: Menu,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof Menu>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const basicItems: Array<MenuItem<string>> = [
|
||||
{ name: 'edit', text: 'Edit' },
|
||||
{ name: 'duplicate', text: 'Duplicate' },
|
||||
{ name: 'delete', text: 'Delete' },
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
items: basicItems,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'A basic menu with simple text items.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIcons: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: 'add', text: 'Add New', icon: SvgAdd },
|
||||
{ name: 'edit', text: 'Edit', icon: SvgPencil1 },
|
||||
{ name: 'delete', text: 'Delete', icon: SvgTrash },
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menu items can include icons for visual clarity.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithSeparator: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: 'cut', text: 'Cut' },
|
||||
{ name: 'copy', text: 'Copy' },
|
||||
{ name: 'paste', text: 'Paste' },
|
||||
Menu.line,
|
||||
{ name: 'delete', text: 'Delete' },
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menu.line creates a visual separator between menu sections.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithLabel: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ type: Menu.label, name: 'Actions', text: 'Actions' },
|
||||
{ name: 'edit', text: 'Edit' },
|
||||
{ name: 'duplicate', text: 'Duplicate' },
|
||||
Menu.line,
|
||||
{ type: Menu.label, name: 'Danger Zone', text: 'Danger Zone' },
|
||||
{ name: 'delete', text: 'Delete' },
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menu.label items create section headers within the menu.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithDisabledItems: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: 'edit', text: 'Edit' },
|
||||
{ name: 'duplicate', text: 'Duplicate', disabled: true },
|
||||
{ name: 'delete', text: 'Delete' },
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Disabled menu items are visually muted and non-interactive.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithKeyboardShortcuts: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: 'cut', text: 'Cut', key: 'ctrl + X' },
|
||||
{ name: 'copy', text: 'Copy', key: 'ctrl + C' },
|
||||
{ name: 'paste', text: 'Paste', key: 'ctrl + V' },
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menu items can display keyboard shortcuts.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithToggle: Story = {
|
||||
args: {
|
||||
items: [],
|
||||
},
|
||||
render: function Render() {
|
||||
const [settings, setSettings] = useState({
|
||||
notifications: true,
|
||||
darkMode: false,
|
||||
autoSave: true,
|
||||
});
|
||||
|
||||
const items: Array<MenuItem<'notifications' | 'darkMode' | 'autoSave'>> = [
|
||||
{
|
||||
name: 'notifications',
|
||||
text: 'Notifications',
|
||||
toggle: settings.notifications,
|
||||
},
|
||||
{ name: 'darkMode', text: 'Dark Mode', toggle: settings.darkMode },
|
||||
{ name: 'autoSave', text: 'Auto Save', toggle: settings.autoSave },
|
||||
];
|
||||
|
||||
return (
|
||||
<Menu
|
||||
items={items}
|
||||
onMenuSelect={name => {
|
||||
setSettings(prev => ({ ...prev, [name]: !prev[name] }));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menu items can include toggles for boolean settings.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithHeaderAndFooter: Story = {
|
||||
args: {
|
||||
header: (
|
||||
<View style={{ padding: 10, borderBottom: '1px solid #ccc' }}>
|
||||
<Text style={{ fontWeight: 'bold' }}>Menu Title</Text>
|
||||
</View>
|
||||
),
|
||||
footer: (
|
||||
<View style={{ padding: 10, borderTop: '1px solid #ccc' }}>
|
||||
<Text style={{ fontSize: 11, color: '#666' }}>3 items</Text>
|
||||
</View>
|
||||
),
|
||||
items: basicItems,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menus can have custom header and footer content.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithTooltips: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: 'edit', text: 'Edit', tooltip: 'Modify this item' },
|
||||
{
|
||||
name: 'duplicate',
|
||||
text: 'Duplicate',
|
||||
tooltip: 'Create a copy of this item',
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
tooltip: 'Permanently remove this item',
|
||||
},
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Menu items can have tooltips for additional context.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const InteractiveExample: Story = {
|
||||
args: {
|
||||
items: basicItems,
|
||||
},
|
||||
render: function Render(args) {
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<View style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<Menu {...args} onMenuSelect={name => setSelected(String(name))} />
|
||||
{selected && (
|
||||
<Text style={{ textAlign: 'center' }}>Selected: {selected}</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Interactive menu that shows the selected item.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
134
packages/component-library/src/Paragraph.stories.tsx
Normal file
134
packages/component-library/src/Paragraph.stories.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { Paragraph } from './Paragraph';
|
||||
import { View } from './View';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Paragraph',
|
||||
component: Paragraph,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof Paragraph>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children:
|
||||
'This is a paragraph of text. Paragraphs are used to display blocks of text content with proper line height and spacing.',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 400 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'A basic paragraph with default styling and bottom margin.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const MultipleParagraphs: Story = {
|
||||
render: () => (
|
||||
<View style={{ width: 400 }}>
|
||||
<Paragraph>
|
||||
This is the first paragraph. It has a bottom margin to create spacing
|
||||
between itself and the next paragraph.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
This is the second paragraph. Notice the consistent spacing between
|
||||
paragraphs which improves readability.
|
||||
</Paragraph>
|
||||
<Paragraph isLast>
|
||||
This is the last paragraph. It uses the isLast prop to remove the bottom
|
||||
margin since there is no following content.
|
||||
</Paragraph>
|
||||
</View>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Multiple paragraphs stack with consistent spacing. Use isLast on the final paragraph.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const IsLast: Story = {
|
||||
args: {
|
||||
children: 'This paragraph has no bottom margin because isLast is true.',
|
||||
isLast: true,
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 400, border: '1px dashed #ccc', padding: 10 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'When isLast is true, the bottom margin is removed. Useful for the last paragraph in a section.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCustomStyle: Story = {
|
||||
args: {
|
||||
children: 'This paragraph has custom styling applied.',
|
||||
style: {
|
||||
color: '#007bff',
|
||||
fontStyle: 'italic',
|
||||
fontSize: 18,
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 400 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Custom styles can be applied to paragraphs.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LongContent: Story = {
|
||||
args: {
|
||||
children:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<View style={{ width: 400 }}>
|
||||
<Story />
|
||||
</View>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Longer paragraphs wrap properly and maintain consistent line height for readability.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
11
packages/component-library/src/Themes/Theming.mdx
Normal file
11
packages/component-library/src/Themes/Theming.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta title="Themes/Theming" />
|
||||
|
||||
# Theming
|
||||
|
||||
Actual Budget supports customizable themes that allow you to personalize the look and feel of the application. You can switch between built-in themes or create your own custom themes.
|
||||
|
||||
For detailed information on how to create and apply custom themes, please visit the official documentation:
|
||||
|
||||
**[Custom Themes Documentation](https://actualbudget.org/docs/experimental/custom-themes)**
|
||||
Reference in New Issue
Block a user