@infonomic/uikit 2.0.0 → 2.1.1

package/src/components/card/card.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'> {
+  class?: string
+  hover?: boolean
+  href?: string
+  target?: string
+  as?: 'div' | 'a'
+}
+
+import styles from './card.module.css'
+
+const {
+  class: className,
+  hover,
+  as = 'div',
+  href,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  ...rest
+} = Astro.props as Props
+
+const componentType = href != null ? 'a' : as
+---
+
+{
+  componentType === 'a' ? (
+    <a
+      href={href}
+      target={target}
+      class:list={[styles.card, { [styles.cardHover]: hover }, className]}
+      {...rest}
+    >
+      <slot />
+    </a>
+  ) : (
+    <div class:list={[styles.card, { [styles.cardHover]: hover }, className]} {...rest}>
+      <slot />
+    </div>
+  )
+}

package/src/components/card/card.module.css

@@ -0,0 +1,67 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .card {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    width: 100%;
+    max-width: 100%;
+    color: var(--foreground);
+    background: var(--canvas-25);
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm)
+  }
+
+  .card:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .cardHover {
+    transition: background 0.2s ease-in-out;
+  }
+
+  .cardHover:hover {
+    background: oklch(from var(--theme-50) 1 0.03 h);
+  }
+
+  .cardHover:hover:is(:global(.dark) *) {
+    background: oklch(from var(--canvas-800) 0.2 c h);
+  }
+
+  .cardHeader {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+  }
+
+  .cardTitle {
+    color: var(--headings);
+    font-size: 1.8rem;
+    font-weight: bold;
+    line-height: 1;
+    letter-spacing: -0.015em;
+  }
+
+  .cardDescription {
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+
+  .cardContent {
+    flex: 1;
+    padding: 1rem;
+    padding-top: 0;
+  }
+
+  .cardFooter {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    padding-top: 0;
+  }
+}

package/src/components/card/card.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta } from '@storybook/react-vite'
+
+import { Button } from '../button/button.js'
+
+import { Card as CardComponent } from './card.js'
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components',
+  component: CardComponent,
+}
+
+export default meta
+
+export const Card = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }} className="mb-6">
+        <div style={{ maxWidth: '400px', marginBottom: '24px' }}>
+          <CardComponent>
+            <CardComponent.Header>
+              <CardComponent.Title>
+                <h2>Normal Card</h2>
+              </CardComponent.Title>
+              <CardComponent.Description>
+                <p>Card description here.</p>
+              </CardComponent.Description>
+            </CardComponent.Header>
+            <CardComponent.Content>
+              <p>Card body with some text here.</p>
+            </CardComponent.Content>
+            <CardComponent.Footer>
+              <Button size="sm">A Button</Button>
+            </CardComponent.Footer>
+          </CardComponent>
+        </div>
+        <div style={{ maxWidth: '400px', marginBottom: '24px' }}>
+          <CardComponent hover={true}>
+            <CardComponent.Header>
+              <CardComponent.Title>
+                <h2>Card Hover</h2>
+              </CardComponent.Title>
+              <CardComponent.Description>
+                <p>Card description here.</p>
+              </CardComponent.Description>
+            </CardComponent.Header>
+            <CardComponent.Content>
+              <p>Card body with some text here.</p>
+            </CardComponent.Content>
+            <CardComponent.Footer>
+              <Button size="sm">A Button</Button>
+            </CardComponent.Footer>
+          </CardComponent>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/card/card.tsx

@@ -0,0 +1,86 @@
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+import type React from 'react'
+
+import styles from './card.module.css'
+
+export type AsDiv = {
+  asChild?: false
+} & React.ComponentPropsWithoutRef<'div'>
+
+export interface AsSlot {
+  asChild?: true
+}
+
+export type CardRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
+
+export type CardProps<C extends React.ElementType = 'div'> = {
+  children: React.ReactNode
+  className?: string
+  hover?: boolean
+  asChild?: boolean
+  ref?: CardRefType<C>
+} & (AsSlot | AsDiv)
+
+const Card = <C extends React.ElementType = 'div'>({
+  className,
+  hover,
+  children,
+  asChild,
+  ref,
+  ...rest
+}: CardProps<C>) => {
+  const Comp: React.ElementType = asChild === true ? Slot : 'div'
+  const hoverClasses = hover != null && hover === true ? styles.cardHover : undefined
+  const classes = cx(styles.card, hoverClasses, className)
+
+  return (
+    <Comp ref={ref} className={classes} {...rest}>
+      {children}
+    </Comp>
+  )
+}
+
+Card.displayName = 'Card'
+
+interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
+  ref?: React.Ref<HTMLDivElement>
+}
+
+const Header = ({ className, ref, ...props }: OtherProps) => (
+  <div ref={ref} className={cx(styles.cardHeader, className)} {...props} />
+)
+
+Header.displayName = 'CardHeader'
+
+const Title = ({ className, ref, ...props }: OtherProps) => (
+  <div
+    ref={ref as React.Ref<HTMLDivElement>}
+    className={cx(styles.cardTitle, className)}
+    {...props}
+  />
+)
+Title.displayName = 'CardTitle'
+
+const Description = ({ className, ref, ...props }: OtherProps) => (
+  <div ref={ref} className={cx(styles.cardDescription, className)} {...props} />
+)
+Description.displayName = 'CardDescription'
+
+const Content = ({ className, ref, ...props }: OtherProps) => (
+  <div ref={ref} className={cx(styles.cardContent, className)} {...props} />
+)
+Content.displayName = 'CardContent'
+
+const Footer = ({ className, ref, ...props }: OtherProps) => (
+  <div ref={ref} className={cx(styles.cardFooter, className)} {...props} />
+)
+Footer.displayName = 'CardFooter'
+
+Card.Header = Header
+Card.Title = Title
+Card.Description = Description
+Card.Content = Content
+Card.Footer = Footer
+
+export { Card }

package/src/components/container/container.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  class?: string
+}
+
+import styles from './container.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles.container, className]} {...rest}>
+  <slot />
+</div>

package/src/components/container/container.module.css

@@ -0,0 +1,28 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .container {
+    width: 100%;
+    padding: 0 16px;
+    margin: 0 auto;
+    max-width: 900px;
+  }
+
+  @media (min-width: 1100px) {
+    .container {
+      max-width: 1050px;
+    }
+  }
+
+  @media (min-width: 1300px) {
+    .container {
+      max-width: 1200px;
+    }
+  }
+
+  @media (min-width: 1536px) {
+    .container {
+      max-width: 1400px;
+    }
+  }
+}

package/src/components/container/container.stories.tsx

@@ -0,0 +1,42 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Section } from '../section/section.js'
+import { Container as ContainerComponent } from './container.js'
+
+const meta: Meta<typeof ContainerComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Container',
+  component: ContainerComponent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContainerComponent>
+
+export const Container = (): React.JSX.Element => {
+  return (
+    <Section style={{ height: '100vh' }}>
+      <ContainerComponent
+        style={{
+          backgroundColor: 'lightblue',
+          height: '400px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <p>I'm in a container</p>
+      </ContainerComponent>
+    </Section>
+  )
+}
+
+// export const Default: Story = {
+//   render: () => <DivDemo />,
+// }

package/src/components/container/container.tsx

@@ -0,0 +1,23 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './container.module.css'
+
+type ContainerIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface ContainerProps extends ContainerIntrinsicProps {}
+
+export const Container = function Container({
+  ref,
+  className,
+  children,
+  ...rest
+}: ContainerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}): React.JSX.Element {
+  return (
+    <div ref={ref} {...rest} className={cx(styles.container, className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/dropdown/dropdown.module.css

@@ -0,0 +1,131 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .dropdown-content,
+  .dropdown-subcontent {
+    z-index: 20;
+    background-color: var(--canvas-25);
+    padding: 4px;
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+
+    &[data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-1);
+    width: 100%;
+    padding: 5px 2px;
+    font-size: var(--font-size-sm);
+    transition: background-color 0.2s;
+    cursor: default;
+    outline: none;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item:focus {
+    background-color: var(--canvas-50);
+  }
+
+  .dropdown-separator {
+    margin: 0 auto;
+    width: 90%;
+    background-color: var(--border-color);
+    margin: var(--spacing-1) 0;
+    border-top-width: var(--border-width-thin);
+    border-top-color: var(--border-color);
+    border-top-style: var(--border-style-solid);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+
+    .dropdown-content:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .dropdown-subcontent:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: var(--canvas-800);
+    }
+
+    .dropdown-item:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)),
+    .dropdown-item:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: var(--canvas-700);
+    }
+  }
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+}

package/src/components/dropdown/dropdown.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { SignOutIcon } from '../../icons/sign-out-icon.js'
+import { UserIcon } from '../../icons/user-icon.js'
+import { Button } from '../button/button.js'
+import { Dropdown as DropdownComponent } from './dropdown.js'
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Dropdown',
+  component: DropdownComponent.Root,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownComponent.Root>
+
+export const Dropdown: Story = {
+  args: {
+    modal: false,
+  },
+  render: (args) => {
+    return (
+      <>
+        <style>
+          {`
+          .dropdown-item-content {
+            display: flex;
+            align-items: center;
+          }
+
+          .dropdown-item-content-icon {
+            display: inline-block;
+            width: 28px;
+          }
+
+          .dropdown-item-content-text {
+            text-align: left;
+            display: inline-block;
+            width: 100%;
+            flex: 1;
+          }
+
+        `}
+        </style>
+        <div
+          style={{
+            maxWidth: '400px',
+            marginBottom: '24px',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <DropdownComponent.Root {...args}>
+            <DropdownComponent.Trigger asChild>
+              <Button size="sm" variant="filled">
+                +
+              </Button>
+            </DropdownComponent.Trigger>
+
+            <DropdownComponent.Portal>
+              <DropdownComponent.Content align="end" sideOffset={10}>
+                <DropdownComponent.Item>
+                  <div className="dropdown-item-content">
+                    <span className="dropdown-item-content-icon">
+                      <UserIcon width="22px" height="22px" />
+                    </span>
+                    <span className="dropdown-item-content-text">Account</span>
+                  </div>
+                </DropdownComponent.Item>
+                <DropdownComponent.Item>
+                  <div className="dropdown-item-content">
+                    <span className="dropdown-item-content-icon" />
+                    <span className="dropdown-item-content-text">Menu Item 2</span>
+                  </div>
+                </DropdownComponent.Item>
+                <DropdownComponent.Separator />
+                <DropdownComponent.Item>
+                  <div className="dropdown-item-content">
+                    <span className="dropdown-item-content-icon">
+                      <SignOutIcon />
+                    </span>
+                    <span className="dropdown-item-content-text">
+                      <button
+                        type="button"
+                        className="text-left inline-block w-full flex-1 leading-none text-black dark:text-gray-300"
+                      >
+                        Sign Out
+                      </button>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>
+              </DropdownComponent.Content>
+            </DropdownComponent.Portal>
+          </DropdownComponent.Root>
+        </div>
+      </>
+    )
+  },
+}