From d8ec16943237e13d9a84e85d2b2c7efd4d4e4990 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 22 Aug 2023 12:53:24 +0100 Subject: [PATCH 01/12] Updated section and listing and linting --- .github/workflows/license-check.yaml | 2 +- .licenserc.yaml | 2 +- components/dist/index.d.ts | 117 ---- components/dist/index.js | 902 +++++++++++++------------ components/dist/index.js.map | 2 +- components/src/AsciiDoc/Admonition.tsx | 1 - components/src/AsciiDoc/Listing.tsx | 24 +- components/src/AsciiDoc/Table.tsx | 1 - components/src/AsciiDoc/index.ts | 3 +- components/src/asciidoc/Section.tsx | 69 ++ components/src/ui/badge/Badge.tsx | 1 - components/src/ui/button/Button.tsx | 1 - components/src/ui/spinner/Spinner.tsx | 1 - components/src/ui/tabs/Tabs.tsx | 1 - icons/index.ts | 296 ++++---- package-lock.json | 37 +- package.json | 3 +- tsup.config.ts | 1 - 18 files changed, 753 insertions(+), 711 deletions(-) delete mode 100644 components/dist/index.d.ts create mode 100644 components/src/asciidoc/Section.tsx diff --git a/.github/workflows/license-check.yaml b/.github/workflows/license-check.yaml index 639d7c16..ebadf5b5 100644 --- a/.github/workflows/license-check.yaml +++ b/.github/workflows/license-check.yaml @@ -10,4 +10,4 @@ jobs: steps: - uses: actions/checkout@v3 - name: Check License Header - uses: apache/skywalking-eyes/header@5dfa68f93380a5e57259faaf95088b7f133b5778 \ No newline at end of file + uses: apache/skywalking-eyes/header@5dfa68f93380a5e57259faaf95088b7f133b5778 diff --git a/.licenserc.yaml b/.licenserc.yaml index 27284bb8..314fd797 100644 --- a/.licenserc.yaml +++ b/.licenserc.yaml @@ -16,4 +16,4 @@ header: - '**/*.md' - 'LICENSE' - comment: on-failure \ No newline at end of file + comment: on-failure diff --git a/components/dist/index.d.ts b/components/dist/index.d.ts deleted file mode 100644 index 0522b874..00000000 --- a/components/dist/index.d.ts +++ /dev/null @@ -1,117 +0,0 @@ -import * as react_jsx_runtime from 'react/jsx-runtime'; -import * as _asciidoctor_core_types from '@asciidoctor/core/types'; -import * as react from 'react'; -import { ReactNode, ReactElement } from 'react'; -import { TabsProps, TabsTriggerProps, TabsListProps, TabsContentProps } from '@radix-ui/react-tabs'; -import { SetRequired } from 'type-fest'; - -declare const AsciiDocBlocks: { - Admonition: ({ node }: { - node: _asciidoctor_core_types.Block; - }) => react_jsx_runtime.JSX.Element; - Listing: ({ node }: { - node: _asciidoctor_core_types.Block; - }) => react_jsx_runtime.JSX.Element; - Table: ({ node }: { - node: _asciidoctor_core_types.Table; - }) => react_jsx_runtime.JSX.Element; -}; - -type BadgeColor = 'default' | 'destructive' | 'notice' | 'neutral' | 'purple' | 'blue'; -type BadgeVariant = 'default' | 'solid'; -interface BadgeProps { - color?: BadgeColor; - className?: string; - children: React.ReactNode; - variant?: BadgeVariant; -} -declare const badgeColors: Record>; -declare const Badge: ({ className, children, color, variant, }: BadgeProps) => react_jsx_runtime.JSX.Element; - -declare const buttonSizes: readonly ["sm", "icon", "base"]; -declare const variants: readonly ["primary", "secondary", "ghost", "danger"]; -type ButtonSize = typeof buttonSizes[number]; -type Variant = typeof variants[number]; -type ButtonStyleProps = { - size?: ButtonSize; - variant?: Variant; -}; -declare const buttonStyle: ({ size, variant, }?: ButtonStyleProps) => string; -interface ButtonProps extends React.ComponentPropsWithRef<'button'>, ButtonStyleProps { - innerClassName?: string; - loading?: boolean; -} -declare const Button: react.ForwardRefExoticComponent & react.RefAttributes>; - -declare const spinnerSizes: readonly ["base", "lg"]; -declare const spinnerVariants: readonly ["primary", "secondary", "ghost", "danger"]; -type SpinnerSize = typeof spinnerSizes[number]; -type SpinnerVariant = typeof spinnerVariants[number]; -interface SpinnerProps { - className?: string; - size?: SpinnerSize; - variant?: SpinnerVariant; -} -declare const Spinner: ({ className, size, variant, }: SpinnerProps) => react_jsx_runtime.JSX.Element; -type Props$1 = { - isLoading: boolean; - children?: ReactNode; - minTime?: number; -}; -/** Loading spinner that shows for a minimum of `minTime` */ -declare const SpinnerLoader: ({ isLoading, children, minTime }: Props$1) => react_jsx_runtime.JSX.Element; - -type TabsRootProps = SetRequired; -declare const Tabs: { - Root: ({ className, ...props }: TabsRootProps) => react_jsx_runtime.JSX.Element; - Trigger: ({ children, className, ...props }: TabsTriggerProps) => react_jsx_runtime.JSX.Element; - List: ({ className, ...props }: TabsListProps) => react_jsx_runtime.JSX.Element; - Content: ({ className, ...props }: TabsContentProps) => react_jsx_runtime.JSX.Element; -}; - -type CheckboxProps = { - indeterminate?: boolean; - children?: React.ReactNode; - className?: string; -} & Omit, 'type'>; -/** Checkbox component that handles label, styling, and indeterminate state */ -declare const Checkbox: ({ indeterminate, children, className, ...inputProps }: CheckboxProps) => react_jsx_runtime.JSX.Element; - -type Props = { - icon?: ReactElement; - title: string; - body?: string; -} & ({ - buttonText: string; - buttonTo: string; -} | { - buttonText: string; - onClick: () => void; -} | { - buttonText?: never; -}); -declare function EmptyMessage(props: Props): react_jsx_runtime.JSX.Element; - -type ListboxItem = { - value: Value; -} & ({ - label: string; - labelString?: never; -} | { - label: ReactNode; - labelString: string; -}); -interface ListboxProps { - selected: Value | null; - onChange: (value: Value) => void; - items: ListboxItem[]; - placeholder?: string; - className?: string; - disabled?: boolean; - hasError?: boolean; - name?: string; - isLoading?: boolean; -} -declare const Listbox: ({ name, selected, items, placeholder, className, onChange, hasError, disabled, isLoading, ...props }: ListboxProps) => react_jsx_runtime.JSX.Element; - -export { AsciiDocBlocks, Badge, BadgeColor, BadgeProps, BadgeVariant, Button, ButtonProps, ButtonSize, Checkbox, CheckboxProps, EmptyMessage, Listbox, ListboxItem, ListboxProps, Spinner, SpinnerLoader, SpinnerSize, SpinnerVariant, Tabs, TabsRootProps, Variant, badgeColors, buttonSizes, buttonStyle, spinnerSizes, spinnerVariants, variants }; diff --git a/components/dist/index.js b/components/dist/index.js index 3aa2784e..9969dbdf 100644 --- a/components/dist/index.js +++ b/components/dist/index.js @@ -3094,7 +3094,7 @@ var require_lib4 = __commonJS({ EncodingMode2[EncodingMode2["Attribute"] = 3] = "Attribute"; EncodingMode2[EncodingMode2["Text"] = 4] = "Text"; })(EncodingMode = exports.EncodingMode || (exports.EncodingMode = {})); - function decode(data, options) { + function decode2(data, options) { if (options === void 0) { options = EntityLevel.XML; } @@ -3105,7 +3105,7 @@ var require_lib4 = __commonJS({ } return (0, decode_js_1.decodeXML)(data); } - exports.decode = decode; + exports.decode = decode2; function decodeStrict(data, options) { var _a; if (options === void 0) { @@ -3113,7 +3113,7 @@ var require_lib4 = __commonJS({ } var opts = typeof options === "number" ? { level: options } : options; (_a = opts.mode) !== null && _a !== void 0 ? _a : opts.mode = decode_js_1.DecodingMode.Strict; - return decode(data, opts); + return decode2(data, opts); } exports.decodeStrict = decodeStrict; function encode(data, options) { @@ -6383,7 +6383,7 @@ var require_dom_to_react = __commonJS({ options = options || {}; var library = options.library || React2; var cloneElement = library.cloneElement; - var createElement = library.createElement; + var createElement2 = library.createElement; var isValidElement = library.isValidElement; var result = []; var node; @@ -6447,7 +6447,7 @@ var require_dom_to_react = __commonJS({ if (len > 1) { props.key = i; } - result.push(createElement(node.name, props, children)); + result.push(createElement2(node.name, props, children)); } return result.length === 1 ? result[0] : result; } @@ -56700,15 +56700,17 @@ var import_lib = __toESM(require_lib10(), 1); var es_default = import_lib.default; // components/src/asciidoc/Listing.tsx +var import_html_entities = require("html-entities"); var import_jsx_runtime2 = require("react/jsx-runtime"); var Listing = ({ node }) => { const document2 = node.getDocument(); const attrs = node.getAttributes(); const nowrap = node.isOption("nowrap") || !document2.hasAttribute("prewrap"); const content = (0, import_react_asciidoc2.useGetContent)(node); + const decodedContent = (0, import_html_entities.decode)(content) || content; if (node.getStyle() === "source") { const lang = attrs.language; - return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "listingblock", children: [ + return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "listingblock", ...(0, import_react_asciidoc2.getLineNumber)(node), children: [ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_asciidoc2.CaptionedTitle, { node }), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: (0, import_classnames.default)("highlight", nowrap ? " nowrap" : ""), children: lang ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( "code", @@ -56716,696 +56718,762 @@ var Listing = ({ node }) => { className: lang ? `language-${lang}` : "", "data-lang": lang, dangerouslySetInnerHTML: { - __html: es_default.getLanguage(lang) ? es_default.highlight(content, { language: lang }).value : content + __html: es_default.getLanguage(lang) ? es_default.highlight(decodedContent, { language: lang }).value : decodedContent } } - ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { dangerouslySetInnerHTML: { __html: content } }) }) }) + ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { dangerouslySetInnerHTML: { __html: decodedContent } }) }) }) ] }); } else { - return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "listingblock", children: [ + return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "listingblock", ...(0, import_react_asciidoc2.getLineNumber)(node), children: [ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_asciidoc2.CaptionedTitle, { node }), - /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: nowrap ? " nowrap" : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { dangerouslySetInnerHTML: { __html: node.getSource() } }) }) }) + /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: nowrap ? " nowrap" : "", children: node.getSource() }) }) ] }); } }; var Listing_default = Listing; -// components/src/asciidoc/Table.tsx -var import_react_asciidoc3 = require("@oxide/react-asciidoc"); -var import_jsx_runtime3 = require("react/jsx-runtime"); -var Table = ({ node }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_asciidoc3.Table, { node }) }); -var Table_default = Table; - -// components/src/asciidoc/index.ts -var AsciiDocBlocks = { - Admonition: Admonition_default, - Listing: Listing_default, - Table: Table_default -}; - -// components/src/ui/badge/Badge.tsx -var import_classnames2 = __toESM(require_classnames()); -var import_jsx_runtime4 = require("react/jsx-runtime"); -var badgeColors = { - default: { - default: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`, - destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`, - notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`, - neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`, - purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-800-rgb),0.15)]`, - blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.15)]` - }, - solid: { - default: "bg-accent text-inverse", - destructive: "bg-destructive text-inverse", - notice: "bg-notice text-inverse", - neutral: "bg-inverse-tertiary text-inverse", - purple: "bg-[var(--base-purple-700)] text-inverse", - blue: "bg-info text-inverse" - } -}; -var Badge = ({ - className, - children, - color = "default", - variant = "default" -}) => { - return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( - "span", - { - className: (0, import_classnames2.default)( - "ox-badge", - `variant-${variant}`, - "inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm", - badgeColors[variant][color], - className - ), - children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children }) - } - ); -}; - -// components/src/ui/button/Button.tsx -var import_classnames3 = __toESM(require_classnames()); -var import_react = require("react"); -var import_jsx_runtime5 = require("react/jsx-runtime"); -var buttonSizes = ["sm", "icon", "base"]; -var variants = ["primary", "secondary", "ghost", "danger"]; -var sizeStyle = { - sm: "h-8 px-3 text-mono-sm svg:w-4", - // meant for buttons that only contain a single icon - icon: "h-8 w-8 text-mono-sm svg:w-4", - base: "h-10 px-4 text-mono-sm svg:w-5" -}; -var buttonStyle = ({ - size: size2 = "base", - variant = "primary" -} = {}) => { - return (0, import_classnames3.default)( - "ox-button inline-flex items-center justify-center rounded align-top elevation-1 disabled:cursor-not-allowed", - `btn-${variant}`, - sizeStyle[size2], - variant === "danger" ? "focus:outline-destructive-secondary" : "focus:outline-accent-secondary" - ); -}; -var noop = (e) => { - e.stopPropagation(); - e.preventDefault(); -}; -var Button = (0, import_react.forwardRef)( - ({ - type = "button", - children, - size: size2, - variant, - className, - loading, - innerClassName, - disabled, - onClick, - // needs to be a spread because we sometimes get passed arbitrary