Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Fixed type antipattern in Admin X Settings

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-19 06:13:22 +02:00
parent 3dd4d3943b
commit 61e5068081
9 changed files with 32 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,6 @@
import type {Meta, StoryObj} from '@storybook/react';
import Button from './Button';
import {ButtonColors} from './Button';
const meta = {
title: 'Global / Button',
@ -9,8 +8,7 @@ const meta = {
tags: ['autodocs'],
argTypes: {
color: {
control: 'select',
options: ButtonColors
control: 'select'
}
}
} satisfies Meta<typeof Button>;
@ -27,28 +25,28 @@ export const Default: Story = {
export const Black: Story = {
args: {
label: 'Button',
color: ButtonColors.Black
color: 'black'
}
};
export const Green: Story = {
args: {
label: 'Button',
color: ButtonColors.Green
color: 'green'
}
};
export const Red: Story = {
args: {
label: 'Button',
color: ButtonColors.Red
color: 'red'
}
};
export const Link: Story = {
args: {
label: 'Button',
color: ButtonColors.Green,
color: 'green',
link: true
}
};

33
ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx
View file

@ -1,17 +1,6 @@
import React from 'react';
export interface ButtonColorsType {
Clear: string;
Black: string;
Green: string;
Red: string;
}
export const ButtonColors: ButtonColorsType = {
Clear: 'Clear',
Black: 'Black',
Green: 'Green',
Red: 'Red'
};
export type ButtonColor = 'clear' | 'black' | 'green' | 'red';
export interface IButton {
label: string;
@ -33,25 +22,25 @@ const Button: React.FC<IButton> = ({
...props
}) => {
if (!color) {
color = ButtonColors.Clear;
color = 'clear';
}
let styles = 'flex items-center justify-center rounded-sm text-sm';
styles += ((link && color !== ButtonColors.Clear && color !== ButtonColors.Black) || (!link && color !== ButtonColors.Clear)) ? ' font-bold' : ' font-semibold';
let styles = 'transition flex items-center justify-center rounded-sm text-sm';
styles += ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? ' font-bold' : ' font-semibold';
styles += !link ? ' px-4 h-9' : '';
switch (color) {
case ButtonColors.Black:
styles += link ? ' text-black' : ' bg-black text-white';
case 'black':
styles += link ? ' text-black hover:text-grey-800' : ' bg-black text-white hover:bg-grey-900';
break;
case ButtonColors.Green:
styles += link ? ' text-green' : ' bg-green text-white';
case 'green':
styles += link ? ' text-green hover:text-green-400' : ' bg-green text-white hover:bg-green-400';
break;
case ButtonColors.Red:
styles += link ? ' text-red' : ' bg-red text-white';
case 'red':
styles += link ? ' text-red hover:text-red-400' : ' bg-red text-white hover:bg-red-400';
break;
default:
styles += link ? ' text-black' : ' bg-transparent text-black';
styles += link ? ' text-black hover:text-grey-800' : ' bg-transparent text-black hover:text-grey-800';
break;
}

11
ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx
View file

@ -1,7 +1,6 @@
import type {Meta, StoryObj} from '@storybook/react';
import ButtonGroup from './ButtonGroup';
import {ButtonColors} from './Button';
const ButtonGroupMeta = {
title: 'Global / Button Group',
@ -16,13 +15,12 @@ type Story = StoryObj<typeof ButtonGroupMeta>;
const defaultButtons = [
{
label: 'Cancel',
key: 'cancel',
color: ButtonColors.Clear
key: 'cancel'
},
{
label: 'Save',
key: 'save',
color: ButtonColors.Black
color: 'black'
}
];
@ -36,13 +34,12 @@ export const Default: Story = {
const linkButtons = [
{
label: 'Cancel',
key: 'cancel',
color: ButtonColors.Clear
key: 'cancel'
},
{
label: 'Save',
key: 'save',
color: ButtonColors.Green
color: 'green'
}
];

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

@ -9,7 +9,6 @@ import SettingGroup from './SettingGroup';
import SettingGroupHeader from './SettingGroupHeader';
import SettingGroupInputs from './SettingGroupInputs';
import SettingGroupValues from './SettingGroupValues';
import {ButtonColors} from '../global/Button';
const meta = {
title: 'Settings / Setting Group',
@ -21,7 +20,7 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
const customButtons = <ButtonGroup buttons={[{label: 'My action', color: ButtonColors.Green}]} link={true} />;
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} />;

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

@ -1,7 +1,7 @@
import ButtonGroup from '../global/ButtonGroup';
import React, {useState} from 'react';
import SettingGroupHeader from './SettingGroupHeader';
import {ButtonColors, IButton} from '../global/Button';
import {IButton} from '../global/Button';
export type TSettingGroupStates = 'view' | 'edit' | 'unsaved';
@ -64,7 +64,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, c
{
label: 'Edit',
key: 'edit',
color: ButtonColors.Green,
color: 'green',
onClick: handleEdit
}
];
@ -82,7 +82,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, c
{
label: 'Save',
key: 'save',
color: ButtonColors.Green,
color: 'green',
onClick: handleSave
}
);

11
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.stories.tsx
View file

@ -4,7 +4,6 @@ import ButtonGroup from '../global/ButtonGroup';
import SettingGroupHeader from './SettingGroupHeader';
import Heading from '../global/Heading';
import {ButtonColors} from '../global/Button';
const meta = {
title: 'Settings / Setting Group Header',
@ -20,11 +19,7 @@ export const Default: Story = {
title: 'Section group title',
description: 'Section group description',
children: <ButtonGroup
buttons={
[
{label: 'Edit', color: ButtonColors.Green}
]
}
buttons={[{label: 'Edit', color: 'green'}]}
link={true}
/>
}
@ -38,7 +33,7 @@ export const Editing: Story = {
buttons={
[
{label: 'Cancel'},
{label: 'Save', color: ButtonColors.Green}
{label: 'Save', color: 'green'}
]
}
link={true}
@ -56,7 +51,7 @@ export const CustomHeader: Story = {
<span className='text-xs text-grey-500'>cristofer@example.com</span>
</div>
<ButtonGroup
buttons={[{label: 'Invite users', color: ButtonColors.Green}]}
buttons={[{label: 'Invite users', color: 'green'}]}
link={true}
/>
</>

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

@ -3,7 +3,6 @@ import React, {useContext} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import {ButtonColors} from '../../../admin-x-ds/global/Button';
import {SettingsContext} from '../../SettingsProvider';
import {getSettingValue} from '../../../utils/helpers';
@ -13,7 +12,7 @@ const PublicationLanguage: React.FC = () => {
const buttons = [
{
label: 'Edit',
color: ButtonColors.Green
color: 'green'
}
];

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

@ -3,7 +3,6 @@ import React, {useContext, useEffect, useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
import {ButtonColors} from '../../../admin-x-ds/global/Button';
import {SettingsContext} from '../../SettingsProvider';
import {getLocalTime, getSettingValue} from '../../../utils/helpers';
@ -25,7 +24,7 @@ const TimeZone: React.FC = () => {
const buttons = [
{
label: 'Edit',
color: ButtonColors.Green
color: 'green'
}
];

3
ghost/admin-x-settings/tailwind.config.cjs
View file

@ -184,6 +184,9 @@ module.exports = {
tight: '1.35em',
tighter: '1.25em',
supertight: '1.1em'
},
transition: {
basic: 'all 0.4 ease'
}
}
}