@infonomic/uikit 2.0.0 → 2.1.0

package/src/icons/globe-icon.tsx

@@ -0,0 +1,50 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const GlobeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], styles['stroke-none'], svgClassName)
+
+  return (
+    <IconElement className={cx('globe-icon flex items-center justify-center', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        width="20"
+        height="20"
+        viewBox="0 0 15 15"
+      >
+        <path
+          d="M7.49996 1.80002C4.35194 1.80002 1.79996 4.352 1.79996 7.50002C1.79996 10.648 4.35194 13.2 7.49996 13.2C10.648 13.2 13.2 10.648 13.2 7.50002C13.2 4.352 10.648 1.80002 7.49996 1.80002ZM0.899963 7.50002C0.899963 3.85494 3.85488 0.900024 7.49996 0.900024C11.145 0.900024 14.1 3.85494 14.1 7.50002C14.1 11.1451 11.145 14.1 7.49996 14.1C3.85488 14.1 0.899963 11.1451 0.899963 7.50002Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+        <path
+          d="M13.4999 7.89998H1.49994V7.09998H13.4999V7.89998Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+        <path
+          d="M7.09991 13.5V1.5H7.89991V13.5H7.09991zM10.375 7.49998C10.375 5.32724 9.59364 3.17778 8.06183 1.75656L8.53793 1.24341C10.2396 2.82218 11.075 5.17273 11.075 7.49998 11.075 9.82724 10.2396 12.1778 8.53793 13.7566L8.06183 13.2434C9.59364 11.8222 10.375 9.67273 10.375 7.49998zM3.99969 7.5C3.99969 5.17611 4.80786 2.82678 6.45768 1.24719L6.94177 1.75281C5.4582 3.17323 4.69969 5.32389 4.69969 7.5 4.6997 9.67611 5.45822 11.8268 6.94179 13.2472L6.45769 13.7528C4.80788 12.1732 3.9997 9.8239 3.99969 7.5z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+        <path
+          d="M7.49996 3.95801C9.66928 3.95801 11.8753 4.35915 13.3706 5.19448 13.5394 5.28875 13.5998 5.50197 13.5055 5.67073 13.4113 5.83948 13.198 5.89987 13.0293 5.8056 11.6794 5.05155 9.60799 4.65801 7.49996 4.65801 5.39192 4.65801 3.32052 5.05155 1.97064 5.8056 1.80188 5.89987 1.58866 5.83948 1.49439 5.67073 1.40013 5.50197 1.46051 5.28875 1.62927 5.19448 3.12466 4.35915 5.33063 3.95801 7.49996 3.95801zM7.49996 10.85C9.66928 10.85 11.8753 10.4488 13.3706 9.6135 13.5394 9.51924 13.5998 9.30601 13.5055 9.13726 13.4113 8.9685 13.198 8.90812 13.0293 9.00238 11.6794 9.75643 9.60799 10.15 7.49996 10.15 5.39192 10.15 3.32052 9.75643 1.97064 9.00239 1.80188 8.90812 1.58866 8.9685 1.49439 9.13726 1.40013 9.30601 1.46051 9.51924 1.62927 9.6135 3.12466 10.4488 5.33063 10.85 7.49996 10.85z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+GlobeIcon.displayName = 'GlobeIcon'

package/src/icons/google-icon.tsx

@@ -0,0 +1,44 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+export const GoogleIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = svgClassName
+
+  return (
+    <IconElement className={cx('google-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className={applied}
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.75}
+      >
+        <path
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+          fill="#4285F4"
+        />
+        <path
+          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+          fill="#34A853"
+        />
+        <path
+          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+          fill="#EA4335"
+        />
+        <path d="M1 1h22v22H1z" fill="none" />
+      </svg>
+    </IconElement>
+  )
+}
+
+GoogleIcon.displayName = 'GoogleIcon'

package/src/icons/gripper-vertical-icon.tsx

@@ -0,0 +1,43 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const GripperVerticalIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('gripper-vertical-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+      </svg>
+    </IconElement>
+  )
+}
+
+GripperVerticalIcon.displayName = 'GripperVerticalIcon'

package/src/icons/history-icon.tsx

@@ -0,0 +1,32 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const HistoryIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('history-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+        <path d="M3 3v5h5" />
+        <path d="M12 7v5l4 2" />
+      </svg>
+    </IconElement>
+  )
+}
+
+HistoryIcon.displayName = 'HistoryIcon'

package/src/icons/home-icon.tsx

@@ -0,0 +1,34 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const HomeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('home-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        viewBox="0 0 24 24"
+        strokeWidth={1.75}
+      >
+        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>{' '}
+        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>{' '}
+        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>{' '}
+      </svg>
+    </IconElement>
+  )
+}
+
+HomeIcon.displayName = 'HomeIcon'

package/src/icons/icon-element.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+}
+
+const { class: className, width = '22px', height = '22px', menuItem = false, ...rest } = Astro.props
+---
+
+<div
+  style={{
+    width,
+    height,
+    flex: `0 0 ${width}`,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: menuItem ? '1.2rem' : '0'
+  }}
+  class={className}
+  {...rest}
+>
+  <slot />
+</div>

package/src/icons/icon-element.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react'
+import type React from 'react'
+
+import cx from 'classnames'
+
+export interface IconElementProps extends React.ComponentProps<'div'> {
+  width?: string
+  height?: string
+  menuItem?: boolean
+  children: ReactNode
+  className?: string
+}
+
+export const IconElement = (props: IconElementProps): React.JSX.Element => {
+  const { className, children, width = '22px', height = '22px', menuItem = false, ...rest } = props
+  return (
+    <div
+      style={{
+        width,
+        height,
+        flex: `0 0 ${width}`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: menuItem != null && menuItem ? '1.2rem' : '0',
+      }}
+      className={cx('component--icon-element-root', className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}

package/src/icons/icon-sprite.tsx

@@ -0,0 +1,18 @@
+import type React from 'react'
+import ReactDOM from 'react-dom'
+
+// keep a list of the icon ids we put in the symbol
+const icons = ['icon-1', 'icon-2']
+
+export interface IconSpriteProps {
+  id: string
+}
+
+// then define an Icon component that references the
+export function IconSprite({ id, ...props }: IconSpriteProps): React.JSX.Element {
+  return (
+    <svg {...props}>
+      <use href={`/sprite.svg#${id}`} />
+    </svg>
+  )
+}

package/src/icons/icons.module.css

@@ -0,0 +1,147 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .stroke-none {
+    stroke: none;
+  }
+
+  .stroke-current {
+    stroke: currentColor;
+  }
+
+  .stroke-gray {
+    stroke: var(--gray-800);
+  }
+
+  .stroke-gray:is(:global(.dark) *) {
+    stroke: var(--gray-300);
+  }
+
+  .stroke-contrast {
+    stroke: var(--gray-950);
+  }
+
+  .stroke-contrast:is(:global(.dark) *) {
+    stroke: var(--gray-100);
+  }
+
+  .stroke-primary {
+    stroke: var(--primary-500);
+  }
+
+  .stroke-primary:is(:global(.dark) *) {
+    stroke: var(--primary-400);
+  }
+
+  .stroke-secondary {
+    stroke: var(--secondary-500);
+  }
+
+  .stroke-secondary:is(:global(.dark) *) {
+    stroke: var(--secondary-400);
+  }
+
+  .stroke-success {
+    stroke: var(--green-500);
+  }
+
+  .stroke-success:is(:global(.dark) *) {
+    stroke: var(--green-400);
+  }
+
+  .stroke-info {
+    stroke: var(--blue-500);
+  }
+
+  .stroke-info:is(:global(.dark) *) {
+    stroke: var(--blue-400);
+  }
+
+  .stroke-warning {
+    stroke: var(--yellow-500);
+  }
+
+  .stroke-warning:is(:global(.dark) *) {
+    stroke: var(--yellow-400);
+  }
+
+  .stroke-danger {
+    stroke: var(--red-500);
+  }
+
+  .stroke-danger:is(:global(.dark) *) {
+    stroke: var(--red-400);
+  }
+
+  .fill-none {
+    fill: none;
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .fill-contrast {
+    fill: black;
+  }
+
+  .fill-contrast:is(:global(.dark) *) {
+    fill: white;
+  }
+
+  .fill-gray {
+    stroke: var(--gray-700);
+  }
+
+  .fill-gray:is(:global(.dark) *) {
+    stroke: var(--gray-300);
+  }
+
+  .fill-primary {
+    fill: var(--primary-500);
+  }
+
+  .fill-primary:is(:global(.dark) *) {
+    fill: var(--primary-400);
+  }
+
+  .fill-secondary {
+    fill: var(--secondary-500);
+  }
+
+  .fill-secondary:is(:global(.dark) *) {
+    fill: var(--secondary-400);
+  }
+
+  .fill-success {
+    fill: var(--green-500);
+  }
+
+  .fill-success:is(:global(.dark) *) {
+    fill: var(--green-400);
+  }
+
+  .fill-info {
+    fill: var(--blue-500);
+  }
+
+  .fill-info:is(:global(.dark) *) {
+    fill: var(--blue-400);
+  }
+
+  .fill-warning {
+    fill: var(--yellow-500);
+  }
+
+  .fill-warning:is(:global(.dark) *) {
+    fill: var(--yellow-400);
+  }
+
+  .fill-danger {
+    fill: var(--red-500);
+  }
+
+  .fill-danger:is(:global(.dark) *) {
+    fill: var(--red-400);
+  }
+}

package/src/icons/index.stories.tsx

@@ -0,0 +1,25 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import { DangerIcon } from './danger-icon.js'
+import { InfoIcon } from './info-icon.js'
+import { SuccessIcon } from './success-icon.js'
+import { WarningIcon } from './warning-icon.js'
+
+export default {
+  title: 'Icons/Sprites',
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <div className="mb-6">
+      <div className="max-w-[800px] grid grid-cols-12">
+        <InfoIcon />
+        <WarningIcon />
+        <SuccessIcon />
+        <DangerIcon />
+      </div>
+    </div>
+  )
+}

package/src/icons/index.ts

@@ -0,0 +1,39 @@
+export * from './danger-icon.js'
+export * from './icon-element.js'
+export * from './info-icon.js'
+export * from './light-icon.js'
+export * from './moon-icon.js'
+export * from './return-icon.js'
+export * from './success-icon.js'
+export * from './warning-icon.js'
+export * from './wallet-icon.js'
+export * from './globe-icon.js'
+export * from './close-icon.js'
+export * from './search-icon.js'
+export * from './search-menu-icon.js'
+export * from './refresh-icon.js'
+export * from './copy-icon.js'
+export * from './check-icon.js'
+export * from './x-icon.js'
+export * from './calendar-icon.js'
+export * from './location-pin-icon.js'
+export * from './settings-sliders-icon.js'
+export * from './settings-gear-icon.js'
+export * from './infonomic-icon.js'
+export * from './document-icon.js'
+export * from './edit-icon.js'
+export * from './sign-out-icon.js'
+export * from './gripper-vertical-icon.js'
+export * from './plus-icon.js'
+export * from './user-icon.js'
+export * from './users-icon.js'
+export * from './roles-icon.js'
+export * from './home-icon.js'
+export * from './ellipsis-icon.js'
+export * from './email-icon.js'
+export * from './delete-icon.js'
+export * from './activity-icon.js'
+export * from './github-icon.js'
+export * from './google-icon.js'
+export * from './dashboard-icon.js'
+export * from './stopwatch-icon.js'

package/src/icons/info-icon.tsx

@@ -0,0 +1,18 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const InfoIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-info'], svgClassName)
+
+  return (
+    <IconElement className={cx('info-icon', className)} {...rest}>
+      <svg className={applied} focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"></path>
+      </svg>
+    </IconElement>
+  )
+}