Skip to content

Commit

Permalink
ConfigurationOptions.astro wip
Browse files Browse the repository at this point in the history
  • Loading branch information
winkerVSbecks committed Jul 30, 2024
1 parent abaeb2d commit 69ec571
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 120 deletions.
3 changes: 2 additions & 1 deletion chromatic-config/generate-schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Expand Down
6 changes: 3 additions & 3 deletions chromatic-config/options.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{
"option": "branchName",
"flag": "--branch-name",
"description": "Override the branch name for certain CI providers or cross-fork PR comparisons.<br/>Also accepts `<owner>:<branch>`.",
"description": "Override the branch name for certain CI providers or cross-fork PR comparisons. Also accepts `<owner>:<branch>`",
"type": "string",
"example": "`\"my-branch\"`",
"defaultComment": "Inferred from CI or Git"
Expand All @@ -38,7 +38,7 @@
{
"option": "debug",
"flag": "--debug",
"description": "Output verbose debugging information.<br/>This option implies `interactive: false`.",
"description": "Output verbose debugging information. This option implies `interactive: false`",
"type": "boolean",
"example": "`true`",
"default": false,
Expand Down Expand Up @@ -310,7 +310,7 @@
{
"option": "uploadMetadata",
"flag": "--upload-metadata",
"description": "Upload Chromatic metadata files as part of the published Storybook.<br/>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,
Expand Down
13 changes: 1 addition & 12 deletions src/components/Analytics.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
const baseUrl = import.meta.env.BASE_URL;
---

<!--Segment track -->
Expand Down Expand Up @@ -106,14 +106,3 @@ const baseUrl = import.meta.env.BASE_URL;
}
})();
</script>
<!--
Adds on-hover anchors to headings: see https://www.bryanbraun.com/anchorjs/
Only using it for summary tags.
Using rehype-autolink-headings for headings
-->
<script is:inline src={`${baseUrl}/anchor.min.js`}></script>
<script is:inline>
window.onload = function () {
anchors.add("summary:not(.no-anchor)");
};
</script>
8 changes: 1 addition & 7 deletions src/components/ConfigOption.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: '<code>"my-folder/**"</code>',
},
};

Expand Down Expand Up @@ -62,13 +63,6 @@ export const DefaultValueComment: Story = {
},
};

export const ExampleBasic: Story = {
args: {
...Basic.args,
example: '<code>"my-folder/**"</code>',
},
};

export const ExampleComplex: Story = {
args: {
...Basic.args,
Expand Down
53 changes: 24 additions & 29 deletions src/components/ConfigOption.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
&& {
Expand All @@ -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 : `<code>${flag}</code>`;
const hasBoth = option && flag;
Expand Down Expand Up @@ -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)`
Expand All @@ -95,26 +91,27 @@ export const ConfigOption = ({
type,
example,
inConfigFileSchema,
deprecated,
default: defaultValue,
}: ConfigOptionType) => {
return (
<ConfigOptionContainer gap={4} align="flex-start">
<Name>{option}</Name>
<Name className="config-option">{option}</Name>
<VStack gap={1} style={{ width: "100%" }}>
<HStack align="center">
<Text fontWeight="bold" variant="body16">
CLI:
</Text>
<div>
<code>{flag}</code>{" "}
{shortFlag && (
<>
(<code>{shortFlag}</code>)
</>
)}
</div>
</HStack>
{flag && (
<HStack align="center">
<Text fontWeight="bold" variant="body16">
CLI:
</Text>
<div>
<code>{flag}</code>{" "}
{shortFlag && (
<>
(<code>{shortFlag}</code>)
</>
)}
</div>
</HStack>
)}
<HStack align="center">
<Text fontWeight="bold" variant="body16">
Type:
Expand All @@ -129,14 +126,12 @@ export const ConfigOption = ({
<div dangerouslySetInnerHTML={{ __html: defaultValue }} />
</HStack>
)}
{example && (
<Item align="center">
<Text fontWeight="bold" variant="body16">
Example:
</Text>
<div dangerouslySetInnerHTML={{ __html: example }} />
</Item>
)}
<Item align="center">
<Text fontWeight="bold" variant="body16">
Example:
</Text>
<div dangerouslySetInnerHTML={{ __html: example }} />
</Item>
</VStack>
<Description dangerouslySetInnerHTML={{ __html: description }} />
</ConfigOptionContainer>
Expand Down
82 changes: 17 additions & 65 deletions src/components/ConfigurationOptions.astro
Original file line number Diff line number Diff line change
@@ -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 : `<code>${flag}</code>`;
const hasBoth = option && flag;
return [
`<strong>${lead}</strong>`,
restriction ? ` (${restriction})` : "",
hasBoth ? "<br/>" : "",
hasBoth && flag ? `<code>${flag}</code>` : "",
shortFlag ? ` (<code>${shortFlag}</code>)` : "",
].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
? `<code>${option.default}</code>`
: option.defaultComment,
};
};
const formatType = (type: string | string[]) => {
if (type === "array of glob") {
return ["<code>glob</code>", "array of <code>glob</code>"].join(" or ");
}
if (Array.isArray(type)) {
return type
.map((t) => {
return `<code>${t}</code>`;
})
.join(" or ");
}
return `<code>${type}</code>`;
};
function formatDefault(comment?: string, value?: string | boolean) {
if (comment) {
return comment;
}
if (value !== undefined) {
return `<code>${value}</code>`;
}
}
const formattedOptions = await Promise.all(
(configOptions as ConfigOptionType[]).map(formatOption),
);
---

<div class="table-scroll" style="overflow: scroll">
<table>
<thead>
<tr>
<th>Option / Flag</th>
<th>Description</th>
<th>Type</th>
<th>Example value</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
{
configOptions.map(async (option) => (
<tr>
<td set:html={formatOption(option)} />
<td set:html={await markdown(option.description)} />
<td set:html={formatType(option.type)} />
<td set:html={await markdown(option.example)} />
<td
set:html={formatDefault(option.defaultComment, option.default)}
/>
</tr>
))
}
</tbody>
</table>
</div>
{formattedOptions.map((option) => <ConfigOption {...option} />)}
12 changes: 12 additions & 0 deletions src/components/Scripts.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import Analytics from "./Analytics.astro";
const baseUrl = import.meta.env.BASE_URL;
const isProduction = import.meta.env.MODE === "production";
---

Expand All @@ -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 && <Analytics />}
<!--
Adds on-hover anchors to headings: see https://www.bryanbraun.com/anchorjs/
Only using it for summary tags.
Using rehype-autolink-headings for headings
-->
<script is:inline src={`${baseUrl}/anchor.min.js`}></script>
<script is:inline>
window.onload = function () {
anchors.add("summary:not(.no-anchor), .config-option");
};
</script>
3 changes: 0 additions & 3 deletions src/content/configuration/configuration-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@ sidebar: { order: 3 }
---

import ConfigurationOptions from "../../components/ConfigurationOptions.astro";
import { ConfigOption } from "../../components/ConfigOption";

# Configuration reference

These options control how Chromatic behaves. See also [**branching docs**](/docs/branching-and-baselines) and [diagnosing issues](#diagnosing-issues) for when to use some of these flags. Some options are only available as a flag or as an input to the GitHub Action.

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).

<ConfigOption />

## Options

<ConfigurationOptions />
Expand Down

0 comments on commit 69ec571

Please sign in to comment.