storybook: add Button and Spinner examples

packages/ui/src/Button/Button.tsx

@@ -4,8 +4,10 @@ import type { UrlObject } from 'url';
 
 import Spinner from '../Spinner';
 
+export type ButtonAddOnPosition = 'end' | 'start';
 export type ButtonDisplay = 'block' | 'inline';
 export type ButtonSize = 'lg' | 'md' | 'sm';
+export type ButtonType = 'button' | 'reset' | 'submit';
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
@@ -14,7 +16,7 @@ export type ButtonVariant =
   | 'tertiary';
 
 type Props = Readonly<{
-  addonPosition?: 'end' | 'start';
+  addonPosition?: ButtonAddOnPosition;
   'aria-controls'?: string;
   className?: string;
   display?: ButtonDisplay;
@@ -26,7 +28,7 @@ type Props = Readonly<{
   label: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   size?: ButtonSize;
-  type?: 'button' | 'submit';
+  type?: ButtonType;
   variant: ButtonVariant;
 }>;
 

packages/ui/src/CounterButton.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-export function CounterButton() {
-  const [count, setCount] = React.useState(0);
-  return (
-    <div
-      style={{
-        background: `rgba(0,0,0,0.05)`,
-        borderRadius: `8px`,
-        fontWeight: 500,
-        padding: '1.5rem',
-      }}>
-      <p className="text-green-500" style={{ margin: '0 0 1.5rem 0' }}>
-        This component is from{' '}
-        <code
-          style={{
-            background: `rgba(0,0,0,0.1)`,
-            borderRadius: '0.25rem',
-            padding: '0.2rem 0.3rem',
-          }}>
-          @tih/ui
-        </code>
-      </p>
-      <div>
-        <button
-          style={{
-            background: 'black',
-            border: 'none',
-            borderRadius: '0.25rem',
-            color: 'white',
-            cursor: 'pointer',
-            display: 'inline-block',
-            padding: '0.5rem 1rem',
-          }}
-          type="button"
-          onClick={() => setCount((c) => c + 1)}>
-          Count: {count}
-        </button>
-      </div>
-    </div>
-  );
-}

packages/ui/src/NewTabLink.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-export function NewTabLink({
-  children,
-  href,
-  ...other
-}: {
-  children: React.ReactNode;
-  href: string;
-}) {
-  return (
-    <a href={href} rel="noreferrer" target="_blank" {...other}>
-      {children}
-    </a>
-  );
-}

packages/ui/src/index.tsx

@@ -1,4 +1,4 @@
 export { default as Button } from './Button';
 export * from './Button';
-export { CounterButton } from './CounterButton';
-export { NewTabLink } from './NewTabLink';
+export { default as Spinner } from './Spinner';
+export * from './Spinner';