Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-18 02:21:47 -05:00
Code Issues Activity

Merged components in Admin X Settings

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150

Setting group values and Setting group inputs components were practically the same.
This commit is contained in:
Peter Zimon 2023-05-19 09:17:26 +02:00
parent 5800b63221
commit 0c85012bdc
13 changed files with 61 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx
View file

@ -1,14 +1,12 @@
import type {Meta, StoryObj} from '@storybook/react';
import * as SettingGroupContentStories from './SettingGroupContent.stories';
import * as SettingGroupHeaderStories from './SettingGroupHeader.stories';
import * as SettingGroupInputStories from './SettingGroupInputs.stories';
import * as SettingGroupValueStories from './SettingGroupValues.stories';
import ButtonGroup from '../global/ButtonGroup';
import SettingGroup from './SettingGroup';
import SettingGroupContent from './SettingGroupContent';
import SettingGroupHeader from './SettingGroupHeader';
import SettingGroupInputs from './SettingGroupInputs';
import SettingGroupValues from './SettingGroupValues';
const meta = {
title: 'Settings / Setting Group',
@ -27,9 +25,9 @@ type Story = StoryObj<typeof meta>;
const customButtons = <ButtonGroup buttons={[{label: 'My action', color: 'green'}]} link={true} />;
const customHeader = <SettingGroupHeader {...SettingGroupHeaderStories.CustomHeader.args} />;
const singleColContent = <SettingGroupValues {...SettingGroupValueStories.SingleColumn.args} />;
const twoColView = <SettingGroupValues {...SettingGroupValueStories.TwoColumns.args} />;
const twoColEdit = <SettingGroupInputs {...SettingGroupInputStories.TwoColumns.args} />;
const singleColContent = <SettingGroupContent {...SettingGroupContentStories.SingleColumn.args} />;
const twoColView = <SettingGroupContent {...SettingGroupContentStories.TwoColumns.args} />;
const twoColEdit = <SettingGroupContent {...SettingGroupContentStories.Editing.args} />;
export const SingleColumn: Story = {
args: {

26
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.stories.tsx → ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
View file

@ -1,17 +1,19 @@
import type {Meta, StoryObj} from '@storybook/react';
import SettingGroupValues from './SettingGroupValues';
import SettingGroupContent from './SettingGroupContent';
import * as SettingValueStories from './SettingValue.stories';
import * as TextFieldStories from '../global/TextField.stories';
import TextField from '../global/TextField';
const meta = {
title: 'Settings / Setting Group Values',
component: SettingGroupValues,
title: 'Settings / Setting Group Content',
component: SettingGroupContent,
tags: ['autodocs']
} satisfies Meta<typeof SettingGroupValues>;
} satisfies Meta<typeof SettingGroupContent>;
export default meta;
type Story = StoryObj<typeof SettingGroupValues>;
type Story = StoryObj<typeof SettingGroupContent>;
const values = [
{...SettingValueStories.Default.args, key: '1', heading: 'Setting one', value: 'Value one'},
@ -31,4 +33,18 @@ export const TwoColumns: Story = {
values: values,
columns: 2
}
};
export const Editing: Story = {
args: {
columns: 2,
children: (
<>
<TextField {...TextFieldStories.WithHint.args} />
<TextField {...TextFieldStories.WithHint.args} />
<TextField {...TextFieldStories.WithHint.args} />
<TextField {...TextFieldStories.WithHint.args} />
</>
)
}
};

10
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.tsx → ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
View file

@ -3,13 +3,17 @@ import React from 'react';
import SettingValue from './SettingValue';
import {ISettingValue} from './SettingValue';
interface ISettingGroupValues {
interface ISettingGroupContent {
columns?: 1 | 2;
/**
* Use this array to display setting values with standard formatting in the content area of a setting group
*/
values?: Array<ISettingValue>;
children?: React.ReactNode;
}
const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values, children}) => {
const SettingGroupContent: React.FC<ISettingGroupContent> = ({columns, values, children}) => {
let styles = 'flex flex-col gap-6';
if (columns === 2) {
styles = 'grid grid-cols-2 gap-6';
@ -25,4 +29,4 @@ const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values, chi
);
};
export default SettingGroupValues;
export default SettingGroupContent;

40
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.stories.tsx
View file

@ -1,40 +0,0 @@
import type {Meta, StoryObj} from '@storybook/react';
import SettingGroupInputs from './SettingGroupInputs';
import TextField from '../global/TextField';
import * as TextFieldStories from '../global/TextField.stories';
const meta = {
title: 'Settings / Setting Group Inputs',
component: SettingGroupInputs,
tags: ['autodocs']
} satisfies Meta<typeof SettingGroupInputs>;
export default meta;
type Story = StoryObj<typeof SettingGroupInputs>;
export const SingleColumn: Story = {
args: {
children:
<>
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
</>
}
};
export const TwoColumns: Story = {
args: {
columns: 2,
children:
<>
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
</>
}
};

21
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.tsx
View file

@ -1,21 +0,0 @@
import React from 'react';
interface ISettingGroupInputs {
columns?: 1 | 2;
children?: React.ReactNode;
}
const SettingGroupInputs: React.FC<ISettingGroupInputs> = ({columns, children}) => {
let styles = 'flex flex-col gap-6';
if (columns === 2) {
styles = 'grid grid-cols-2 gap-6';
}
return (
<div className={styles}>
{children}
</div>
);
};
export default SettingGroupInputs;

9
ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
View file

@ -1,7 +1,6 @@
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
const DefaultRecipients: React.FC = () => {
@ -12,7 +11,7 @@ const DefaultRecipients: React.FC = () => {
};
const values = (
<SettingGroupValues
<SettingGroupContent
values={[
{
heading: 'Default Newsletter recipients',
@ -24,9 +23,9 @@ const DefaultRecipients: React.FC = () => {
);
const inputs = (
<SettingGroupInputs>
<SettingGroupContent>
</SettingGroupInputs>
</SettingGroupContent>
);
return (

9
ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
View file

@ -1,8 +1,7 @@
import Link from '../../../admin-x-ds/global/Link';
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
const MailGun: React.FC = () => {
@ -13,7 +12,7 @@ const MailGun: React.FC = () => {
};
const values = (
<SettingGroupValues
<SettingGroupContent
columns={2}
values={[
{
@ -26,9 +25,9 @@ const MailGun: React.FC = () => {
);
const inputs = (
<SettingGroupInputs>
<SettingGroupContent>
</SettingGroupInputs>
</SettingGroupContent>
);
return (

4
ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
View file

@ -1,8 +1,8 @@
import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
import React, {useContext} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import {SettingsContext} from '../../SettingsProvider';
import {getSettingValue} from '../../../utils/helpers';
@ -35,7 +35,7 @@ const PublicationLanguage: React.FC = () => {
return (
<SettingGroup customHeader={custonHeader}>
<SettingGroupValues values={viewValues} />
<SettingGroupContent values={viewValues} />
</SettingGroup>
);
};

9
ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
View file

@ -1,7 +1,6 @@
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/TextField';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
@ -13,7 +12,7 @@ const SocialAccounts: React.FC = () => {
};
const values = (
<SettingGroupValues
<SettingGroupContent
values={[
{
heading: `URL of your publication's Facebook Page`,
@ -30,7 +29,7 @@ const SocialAccounts: React.FC = () => {
);
const inputs = (
<SettingGroupInputs>
<SettingGroupContent>
<TextField
placeholder="https://www.facebook.com/ghost"
title={`URL of your publication's Facebook Page`}
@ -43,7 +42,7 @@ const SocialAccounts: React.FC = () => {
value="https://twitter.com/ghost"
onChange={() => {}}
/>
</SettingGroupInputs>
</SettingGroupContent>
);
return (

4
ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
View file

@ -1,8 +1,8 @@
import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
import React, {useContext, useEffect, useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import {SettingsContext} from '../../SettingsProvider';
import {getLocalTime, getSettingValue} from '../../../utils/helpers';
@ -47,7 +47,7 @@ const TimeZone: React.FC = () => {
return (
<SettingGroup customHeader={customHeader}>
<SettingGroupValues values={viewValues} />
<SettingGroupContent values={viewValues} />
</SettingGroup>
);
};

9
ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
View file

@ -1,7 +1,6 @@
import React, {useContext, useEffect, useRef, useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/TextField';
import {SettingsContext} from '../../SettingsProvider';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
@ -64,7 +63,7 @@ const TitleAndDescription: React.FC = () => {
];
const inputFields = (
<SettingGroupInputs columns={2}>
<SettingGroupContent columns={2}>
<TextField
hint="The name of your site"
inputRef={siteTitleRef}
@ -80,7 +79,7 @@ const TitleAndDescription: React.FC = () => {
value={siteDescription}
onChange={handleDescriptionChange}
/>
</SettingGroupInputs>
</SettingGroupContent>
);
return (
@ -91,7 +90,7 @@ const TitleAndDescription: React.FC = () => {
onSave={handleSave}
onStateChange={handleStateChange}
>
{currentState === 'view' ? <SettingGroupValues columns={2} values={viewValues} /> : inputFields }
{currentState === 'view' ? <SettingGroupContent columns={2} values={viewValues} /> : inputFields }
</SettingGroup>
);
};

9
ghost/admin-x-settings/src/components/settings/membership/Access.tsx
View file

@ -1,7 +1,6 @@
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
const Access: React.FC = () => {
@ -12,7 +11,7 @@ const Access: React.FC = () => {
};
const values = (
<SettingGroupValues
<SettingGroupContent
values={[
{
heading: 'Subscription access',
@ -34,9 +33,9 @@ const Access: React.FC = () => {
);
const inputs = (
<SettingGroupInputs>
<SettingGroupContent>
</SettingGroupInputs>
</SettingGroupContent>
);
return (

9
ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
View file

@ -1,7 +1,6 @@
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
const Analytics: React.FC = () => {
@ -12,7 +11,7 @@ const Analytics: React.FC = () => {
};
const values = (
<SettingGroupValues
<SettingGroupContent
columns={2}
values={[
{
@ -40,9 +39,9 @@ const Analytics: React.FC = () => {
);
const inputs = (
<SettingGroupInputs>
<SettingGroupContent>
</SettingGroupInputs>
</SettingGroupContent>
);
return (