More UI components and React icons (#44)

* Adding svgr components * Add UI components used on new events page * Build * Try adding react as a peer dependency * Fix broken icons * Build for new icons * Add missing type file * Add license to `tsx` icons * Add license to icon exports file
oxidecomputer · Aug 22, 2023 · 6fdd4f8 · 6fdd4f8
1 parent 17df947
commit 6fdd4f8
Show file tree

Hide file tree

Showing 312 changed files with 5,398 additions and 2,992 deletions.
diff --git a/.figmaexportrc.js b/.figmaexportrc.js
@@ -8,6 +8,8 @@
 
 // @ts-check
 
+const { pascalCase } = require('@figma-export/utils')
+
 module.exports = {
   commands: [
     [
@@ -37,7 +39,7 @@ module.exports = {
         ],
         outputters: [
           require('@figma-export/output-components-as-svg')({
-            output: './icons',
+            output: './icons/svg',
             getDirname: () => '',
             getBasename: ({ basename, dirname }) => {
               // Special handing for the directional arrows which have an odd export naming convention
@@ -53,6 +55,29 @@ module.exports = {
               return `${basename}.svg`
             },
           }),
+          require('@figma-export/output-components-as-svgr')({
+            output: './icons/react',
+            getFileExtension: () => '.tsx',
+            getDirname: () => '',
+            getComponentName: ({ componentName }) =>
+              pascalCase(
+                componentName
+                  .split('/')
+                  .map((n) => `${n[0].toUpperCase()}${n.slice(1)}`)
+                  .reverse()
+                  .join('') + 'Icon',
+              ),
+            getSvgrConfig: () => {
+              return {
+                jsxRuntime: 'automatic',
+                typescript: true,
+                titleProp: true,
+                svgProps: {
+                  role: 'img',
+                },
+              }
+            },
+          }),
         ],
       },
     ],

diff --git a/components/dist/asciidoc.css b/components/dist/asciidoc.css
@@ -1,3 +1,11 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
 @layer components {
   .asciidoc-body .line-through {
     text-decoration: line-through;

diff --git a/components/dist/button.css b/components/dist/button.css
@@ -1,3 +1,11 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
 button,
 a,
 label {

diff --git a/components/dist/index.d.ts b/components/dist/index.d.ts
@@ -1,7 +1,7 @@
 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 } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { TabsProps, TabsTriggerProps, TabsListProps, TabsContentProps } from '@radix-ui/react-tabs';
 import { SetRequired } from 'type-fest';
 
@@ -53,13 +53,13 @@ interface SpinnerProps {
     variant?: SpinnerVariant;
 }
 declare const Spinner: ({ className, size, variant, }: SpinnerProps) => react_jsx_runtime.JSX.Element;
-type Props = {
+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) => react_jsx_runtime.JSX.Element;
+declare const SpinnerLoader: ({ isLoading, children, minTime }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type TabsRootProps = SetRequired<TabsProps, 'defaultValue'>;
 declare const Tabs: {
@@ -69,4 +69,49 @@ declare const Tabs: {
     Content: ({ className, ...props }: TabsContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { AsciiDocBlocks, Badge, BadgeColor, BadgeProps, BadgeVariant, Button, ButtonProps, ButtonSize, Spinner, SpinnerLoader, SpinnerSize, SpinnerVariant, Tabs, TabsRootProps, Variant, badgeColors, buttonSizes, buttonStyle, spinnerSizes, spinnerVariants, variants };
+type CheckboxProps = {
+    indeterminate?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+} & Omit<React.ComponentProps<'input'>, '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 extends string = string> = {
+    value: Value;
+} & ({
+    label: string;
+    labelString?: never;
+} | {
+    label: ReactNode;
+    labelString: string;
+});
+interface ListboxProps<Value extends string = string> {
+    selected: Value | null;
+    onChange: (value: Value) => void;
+    items: ListboxItem<Value>[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    name?: string;
+    isLoading?: boolean;
+}
+declare const Listbox: <Value extends string = string>({ name, selected, items, placeholder, className, onChange, hasError, disabled, isLoading, ...props }: ListboxProps<Value>) => 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 };