From 69ec571972b3caaaebabcfbc6ceef67e208892d9 Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Mon, 29 Jul 2024 22:52:42 -0400 Subject: [PATCH] ConfigurationOptions.astro wip --- chromatic-config/generate-schema.ts | 3 +- chromatic-config/options.json | 6 +- src/components/Analytics.astro | 13 +-- src/components/ConfigOption.stories.tsx | 8 +- src/components/ConfigOption.tsx | 53 ++++++------ src/components/ConfigurationOptions.astro | 82 ++++--------------- src/components/Scripts.astro | 12 +++ .../configuration/configuration-reference.mdx | 3 - 8 files changed, 60 insertions(+), 120 deletions(-) diff --git a/chromatic-config/generate-schema.ts b/chromatic-config/generate-schema.ts index 31e090f6..c68fd7ff 100644 --- a/chromatic-config/generate-schema.ts +++ b/chromatic-config/generate-schema.ts @@ -10,8 +10,9 @@ export interface ConfigOption { shortFlag?: string; description: string; type: string | string[]; - example?: string; + example: string; default?: string | boolean; + defaultComment?: string; inConfigFileSchema?: boolean; deprecated?: "config-file" | "all"; } diff --git a/chromatic-config/options.json b/chromatic-config/options.json index 6866bfc9..d7d34ec7 100644 --- a/chromatic-config/options.json +++ b/chromatic-config/options.json @@ -11,7 +11,7 @@ { "option": "branchName", "flag": "--branch-name", - "description": "Override the branch name for certain CI providers or cross-fork PR comparisons.
Also accepts `:`.", + "description": "Override the branch name for certain CI providers or cross-fork PR comparisons. Also accepts `:`", "type": "string", "example": "`\"my-branch\"`", "defaultComment": "Inferred from CI or Git" @@ -38,7 +38,7 @@ { "option": "debug", "flag": "--debug", - "description": "Output verbose debugging information.
This option implies `interactive: false`.", + "description": "Output verbose debugging information. This option implies `interactive: false`", "type": "boolean", "example": "`true`", "default": false, @@ -310,7 +310,7 @@ { "option": "uploadMetadata", "flag": "--upload-metadata", - "description": "Upload Chromatic metadata files as part of the published Storybook.
This option implies `diagnosticsFile: true` and `logFile: true`.", + "description": "Upload Chromatic metadata files as part of the published Storybook. This option implies `diagnosticsFile: true` and `logFile: true`", "type": "boolean", "example": "`true`", "default": false, diff --git a/src/components/Analytics.astro b/src/components/Analytics.astro index 8f7b1fc9..8a182d62 100644 --- a/src/components/Analytics.astro +++ b/src/components/Analytics.astro @@ -1,5 +1,5 @@ --- -const baseUrl = import.meta.env.BASE_URL; + --- @@ -106,14 +106,3 @@ const baseUrl = import.meta.env.BASE_URL; } })(); - - - diff --git a/src/components/ConfigOption.stories.tsx b/src/components/ConfigOption.stories.tsx index 535ee9ff..986a545b 100644 --- a/src/components/ConfigOption.stories.tsx +++ b/src/components/ConfigOption.stories.tsx @@ -23,6 +23,7 @@ export const Basic: Story = { description: "If there are any changes to the build, automatically accept them. Only for given branch, if specified.", type: "string", + example: '"my-folder/**"', }, }; @@ -62,13 +63,6 @@ export const DefaultValueComment: Story = { }, }; -export const ExampleBasic: Story = { - args: { - ...Basic.args, - example: '"my-folder/**"', - }, -}; - export const ExampleComplex: Story = { args: { ...Basic.args, diff --git a/src/components/ConfigOption.tsx b/src/components/ConfigOption.tsx index 5698169f..e97ddf21 100644 --- a/src/components/ConfigOption.tsx +++ b/src/components/ConfigOption.tsx @@ -12,7 +12,6 @@ import { styled } from "@storybook/theming"; import type { ConfigOption as ConfigOptionType } from "../../chromatic-config/generate-schema"; const Name = styled.h3` - ${typography.heading18} font-family: ${fontFamily.mono}; color: ${color.slate800}; && { @@ -22,8 +21,6 @@ const Name = styled.h3` const Description = styled.div``; -const ExampleValue = styled.div``; - const formatOption = ({ option, flag, shortFlag, restriction }: any) => { const lead = option ? option : `${flag}`; const hasBoth = option && flag; @@ -78,9 +75,8 @@ function formatDefault(comment?: string, value?: string | boolean) { } const ConfigOptionContainer = styled(VStack)` - max-width: 512px; - margin-top: ${spacing[6]}; - margin-bottom: ${spacing[6]}; + margin-top: ${spacing[12]}; + margin-bottom: ${spacing[12]}; `; const Item = styled(HStack)` @@ -95,26 +91,27 @@ export const ConfigOption = ({ type, example, inConfigFileSchema, - deprecated, default: defaultValue, }: ConfigOptionType) => { return ( - {option} + {option} - - - CLI: - -
- {flag}{" "} - {shortFlag && ( - <> - ({shortFlag}) - - )} -
- + {flag && ( + + + CLI: + +
+ {flag}{" "} + {shortFlag && ( + <> + ({shortFlag}) + + )} +
+ + )} Type: @@ -129,14 +126,12 @@ export const ConfigOption = ({
)} - {example && ( - - - Example: - -
- - )} + + + Example: + +
+ diff --git a/src/components/ConfigurationOptions.astro b/src/components/ConfigurationOptions.astro index e485cdab..26f7c2a7 100644 --- a/src/components/ConfigurationOptions.astro +++ b/src/components/ConfigurationOptions.astro @@ -1,72 +1,24 @@ --- +import type { ConfigOption as ConfigOptionType } from "../../chromatic-config/generate-schema"; import configOptions from "../../chromatic-config/options.json"; import { markdown } from "../markdown"; - -const formatOption = ({ option, flag, shortFlag, restriction }: any) => { - const lead = option ? option : `${flag}`; - const hasBoth = option && flag; - - return [ - `${lead}`, - restriction ? ` (${restriction})` : "", - hasBoth ? "
" : "", - hasBoth && flag ? `${flag}` : "", - shortFlag ? ` (${shortFlag})` : "", - ].join(""); +import { ConfigOption } from "./ConfigOption"; + +const formatOption = async (option: ConfigOptionType) => { + return { + ...option, + option: option.option || option.flag, + description: await markdown(option.description), + example: await markdown(option.example), + default: option.default + ? `${option.default}` + : option.defaultComment, + }; }; -const formatType = (type: string | string[]) => { - if (type === "array of glob") { - return ["glob", "array of glob"].join(" or "); - } - - if (Array.isArray(type)) { - return type - .map((t) => { - return `${t}`; - }) - .join(" or "); - } - - return `${type}`; -}; - -function formatDefault(comment?: string, value?: string | boolean) { - if (comment) { - return comment; - } - - if (value !== undefined) { - return `${value}`; - } -} +const formattedOptions = await Promise.all( + (configOptions as ConfigOptionType[]).map(formatOption), +); --- -
- - - - - - - - - - - - { - configOptions.map(async (option) => ( - - - )) - } - -
Option / FlagDescriptionTypeExample valueDefault value
- - - - -
-
+{formattedOptions.map((option) => )} diff --git a/src/components/Scripts.astro b/src/components/Scripts.astro index e67679ae..b4e1c62b 100644 --- a/src/components/Scripts.astro +++ b/src/components/Scripts.astro @@ -1,6 +1,7 @@ --- import Analytics from "./Analytics.astro"; +const baseUrl = import.meta.env.BASE_URL; const isProduction = import.meta.env.MODE === "production"; --- @@ -10,3 +11,14 @@ const isProduction = import.meta.env.MODE === "production"; href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800&display=swap" /> {isProduction && } + + + diff --git a/src/content/configuration/configuration-reference.mdx b/src/content/configuration/configuration-reference.mdx index 5992d078..6eeb39af 100644 --- a/src/content/configuration/configuration-reference.mdx +++ b/src/content/configuration/configuration-reference.mdx @@ -6,7 +6,6 @@ sidebar: { order: 3 } --- import ConfigurationOptions from "../../components/ConfigurationOptions.astro"; -import { ConfigOption } from "../../components/ConfigOption"; # Configuration reference @@ -14,8 +13,6 @@ These options control how Chromatic behaves. See also [**branching docs**](/docs Flags must be passed as `--kebab-case` whereas options are `camelCase`. Flags take precedence over configuration options. When passing a flag without value, it is treated as true. Where an array is accepted, specify the flag multiple times (once for each value). - - ## Options