@sakura-ui/sakura-ui 0.1.16 → 0.1.19

package/packages/core/src/components/IconButton.tsx

@@ -1,107 +1,78 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
+import { ComponentWithAs } from '../types/component'
+import { forwardRef } from '../libs/forward-ref'
+import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
-export interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
+export interface IconButtonProps {
   variant?: 'primary' | 'secondary'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
   iconLayout?: 'left' | 'right'
-  rounded?: string
   icon: string
+  rounded?: string
 }
 
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
+export const IconButton: ComponentWithAs<'button', IconButtonProps> =
+  forwardRef((props, ref) => {
     const {
-      className,
-      children,
-      variant,
+      as: Component = 'button',
+      variant = 'primary',
+      size = 'lg',
+      iconLayout = 'left',
       icon,
-      iconLayout,
       rounded,
+      className,
+      children,
       ...restProps
     } = props
 
-    const layout = iconLayout ?? 'left'
-
-    const align = 'center'
-
-    const style = `
-    ${rounded === 'full' ? 'aspect-square' : ''}
-    inline-block
-    p-4
-    text-button
-    text-${align}
-    rounded-${rounded ? rounded : 'lg'}
-    cursor-pointer
-    whitespace-nowrap
-    border
-    border-solid
-    border-sea-800
-    active:enabled:border-sea-800/[.8]
-    hover:enabled:border-sea-800/[.85]
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-600
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
+    const styleFontSize = `${size === 'xs' ? `scale-105` : `scale-125`}`
 
-    const primary = `
-    text-white-1000
-    bg-sea-800
-    active:enabled:bg-sea-800/[.8]
-    hover:enabled:bg-sea-800/[.85]
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-  `
-    const secondary = `
-    text-sea-800
-    bg-transparent
-    active:enabled:bg-sea-50/[.60]
-    hover:enabled:bg-sea-50
-    active:enabled:text-sea-800/[.85]
-    hover:enabled:text-sea-800/[.85]
-    disabled:text-sumi-500
-  `
+    const styleIcon = `
+      inline-block
+      align-middle
+      mb-1
+      font-icon
+      font-light
+      leading-[0px]      
+      antialiased
+    `
 
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
-
-    const iconStyle = `
-    inline-block
-    align-middle
-    font-icon
-    text-2xl
-    font-light
-    leading-4
-    antialiased
-    mb-1
-  `
+    const styleRounded = `${rounded ? `aspect-square !rounded-full !py-0` : ''}`
 
     // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
     const ariaHidden = children ? true : false
 
     return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
+      <Component
+        className={cx(
+          base,
+          getVariantStyle(variant),
+          getSizeStyle(size),
+          styleRounded,
+          className
+        )}
         {...restProps}
         ref={ref}
       >
-        {layout == 'left' && (
-          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+        {iconLayout == 'left' && (
+          <span
+            className={cx(styleIcon, styleFontSize)}
+            aria-hidden={ariaHidden}
+          >
             {icon}
           </span>
         )}
-        {children && <span className="mx-1 inline-block">{children}</span>}
-        {layout == 'right' && (
-          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+        {children && <span className="mx-1">{children}</span>}
+        {iconLayout == 'right' && (
+          <span
+            className={cx(styleIcon, styleFontSize)}
+            aria-hidden={ariaHidden}
+          >
             {icon}
           </span>
         )}
-      </button>
+      </Component>
     )
-  }
-)
+  })
 
 IconButton.displayName = 'IconButton'

package/packages/core/src/components/InfoCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface InfoCardProps
   extends React.ComponentPropsWithoutRef<'section'> {

package/packages/core/src/components/Link.tsx

@@ -1,47 +1,29 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
+import { ComponentWithAs } from '../types/component'
+import { forwardRef } from '../libs/forward-ref'
 
-const getFileType = (url: string) => {
-  const converted = url.toLowerCase()
+export interface LinkProps {}
 
-  if (converted.endsWith('.pdf')) {
-    return 'PDF'
-  }
-  if (converted.endsWith('.doc') || converted.endsWith('.docx')) {
-    return 'Word'
-  }
-  if (converted.endsWith('.xls') || converted.endsWith('.xlsx')) {
-    return 'Excel'
-  }
-  if (converted.endsWith('.csv')) {
-    return 'CSV'
-  }
-  if (converted.endsWith('.json')) {
-    return 'JSON'
-  }
-  if (converted.endsWith('.ndjson')) {
-    return 'NDJSON'
-  }
-  if (converted.includes('youtu.be')) {
-    return 'YouTube'
-  }
-  return null
-}
-
-export interface LinkProps extends React.ComponentPropsWithRef<'a'> {}
-
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
   (props, ref) => {
-    const { className, children, ...restProps } = props
-    const href = props.href ?? ''
-    const fileType = getFileType(href)
+    const {
+      as: Component = 'a',
+      href,
+      className,
+      children,
+      ...restProps
+    } = props
 
+    const styleUnderLine = `
+      underline
+      underline-offset-[0.125em]
+    `
+
+    // Make lines break at each word
     const style = `
       rounded-sm
       cursor-pointer
       text-sea-600
-      underline
-      underline-offset-[0.125em]
       hover:text-sea-800
       active:text-sea-800
       visited:text-sea-900
@@ -49,11 +31,22 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       focus:outline-2
       focus:outline-wood-500
       disabled:border-sumi-500
+      [overflow-wrap:anywhere]
+    `
+
+    const styleIcon = `
+      align-middle
+      ml-0.5
+      text-sumi-700
+      font-icon
+      font-light
+      leading-4
+      antialiased
     `
 
-    if (href.startsWith('http')) {
+    if (href?.startsWith('http')) {
       return (
-        <a
+        <Component
           className={cx(style, className)}
           href={href}
           target="_blank"
@@ -61,16 +54,23 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           {...restProps}
           ref={ref}
         >
-          {children}
-          {fileType ? `（${fileType}）` : null}
-        </a>
+          <span className={styleUnderLine}>{children}</span>
+          <span className={cx(styleIcon)} aria-hidden="true">
+            open_in_new
+          </span>
+          <span className="sr-only">Opens in new tab</span>
+        </Component>
       )
     }
     return (
-      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
+      <Component
+        className={cx(style, styleUnderLine, className)}
+        href={href}
+        {...restProps}
+        ref={ref}
+      >
         {children}
-        {fileType ? `（${fileType}）` : null}
-      </a>
+      </Component>
     )
   }
 )

package/packages/core/src/components/List.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
 

package/packages/core/src/components/Pre.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
 

package/packages/core/src/components/Table.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
 
 const styleBorder = `
   border
   border-collapse
-  border-sumi-900
+  border-[#cccccc]
 `
 
 export const Table = (props: TableProps) => {
@@ -71,7 +71,8 @@ export const Th = (props: ThProps) => {
 
   const style = `
     p-2
-    bg-sumi-100
+    bg-[#f8f8fb]
+    text-base
     text-left
   `
   return (

package/packages/core/src/components/buttonStyle.ts

@@ -0,0 +1,84 @@
+export const base = `
+  inline-block
+  text-button
+  text-center
+  cursor-pointer
+  select-none
+  touch-manipulation
+  whitespace-nowrap
+  outline-offset-2
+  border
+  border-solid
+  border-sea-800
+  active:border-sea-1200
+  hover:border-sea-900
+  focus:outline
+  focus:outline-2
+  focus:outline-wood-600
+  disabled:border-sumi-500
+  disabled:cursor-not-allowed
+`
+
+const primary = `
+  text-white-1000
+  bg-sea-800
+  active:bg-sea-1200
+  hover:bg-sea-900
+  disabled:bg-sumi-500
+  disabled:text-white-1000
+`
+
+const secondary = `
+  text-sea-800
+  bg-transparent
+  active:bg-sea-200
+  hover:bg-sea-100
+  active:text-sea-1200
+  hover:text-sea-900
+  disabled:text-sumi-500
+  disabled:bg-transparent
+`
+
+const styles: { [key: string]: string } = {
+  primary: primary,
+  secondary: secondary
+}
+
+export const getVariantStyle = (variant: 'primary' | 'secondary') => {
+  return styles[variant]
+}
+
+const params: {
+  [key: string]: string
+} = {
+  lg: `
+    p-4
+    text-button
+    rounded-lg
+  `,
+  md: `
+    px-4
+    py-3
+    text-button
+    rounded-lg
+  `,
+  sm: `
+    px-3
+    py-1.5
+    my-1
+    text-button
+    rounded-md
+  `,
+  xs: `
+    px-2
+    py-[7px]
+    my-2
+    text-button-sm
+    !leading-[14px]
+    rounded
+  `
+}
+
+export const getSizeStyle = (size: 'lg' | 'md' | 'sm' | 'xs') => {
+  return params[size]
+}

package/packages/core/src/components/index.ts

@@ -1,14 +1,31 @@
-export { Button } from './Button'
+export { Button, type ButtonProps } from './Button'
 export { Card, CardHeader, CardBody, CardFooter } from './Card'
-export { Code } from './Code'
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardBodyProps,
+  CardFooterProps
+} from './Card'
+export { Code, type CodeProps } from './Code'
 export { Faq, Question, Answer } from './Faq'
+export type { FaqProps, QuestionProps, AnswerProps } from './Faq'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'
-export { Icon } from './Icon'
-export { IconButton } from './IconButton'
-export { Link } from './Link'
-export { Ol, Ul } from './List'
-export { Pre } from './Pre'
+export type { HeadingProps } from './Heading'
+export { Icon, type IconProps } from './Icon'
+export { IconButton, type IconButtonProps } from './IconButton'
+export { Link, type LinkProps } from './Link'
+export { Ol, Ul, type OlProps, type UlProps } from './List'
+export { Pre, type PreProps } from './Pre'
 export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
+export type {
+  TableProps,
+  CaptionProps,
+  TheadProps,
+  TbodyProps,
+  ThProps,
+  TrProps,
+  TdProps
+} from './Table'
 
 /** @deprecated use Card instead */
 export { InfoCard } from './InfoCard'

package/packages/core/src/index.ts

@@ -29,3 +29,29 @@ export {
   Tr,
   Td
 } from './components'
+
+export type {
+  ButtonProps,
+  CardProps,
+  CardHeaderProps,
+  CardBodyProps,
+  CardFooterProps,
+  CodeProps,
+  FaqProps,
+  QuestionProps,
+  AnswerProps,
+  HeadingProps,
+  IconProps,
+  IconButtonProps,
+  LinkProps,
+  OlProps,
+  UlProps,
+  PreProps,
+  TableProps,
+  CaptionProps,
+  TheadProps,
+  TbodyProps,
+  ThProps,
+  TrProps,
+  TdProps
+} from './components'

package/packages/core/src/libs/forward-ref.ts

@@ -0,0 +1,41 @@
+/*
+MIT License
+
+Copyright (c) 2019 Segun Adebayo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import { ComponentProps, forwardRef as forwardReactRef } from 'react'
+import { As, ComponentWithAs, RightJoinProps } from '../types/component'
+
+export function forwardRef<Props extends object, Component extends As>(
+  component: React.ForwardRefRenderFunction<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any,
+    RightJoinProps<ComponentProps<Component>, Props> & {
+      as?: As
+    }
+  >
+) {
+  return forwardReactRef(component) as unknown as ComponentWithAs<
+    Component,
+    Props
+  >
+}

package/packages/core/src/types/component.ts

@@ -0,0 +1,82 @@
+/*
+MIT License
+
+Copyright (c) 2019 Segun Adebayo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import { ComponentProps } from 'react'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type As<Props = any> = React.ElementType<Props>
+
+export type OmitCommonProps<
+  Target,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  OmitAdditionalProps extends keyof any = never
+> = Omit<Target, 'as' | OmitAdditionalProps>
+
+export type RightJoinProps<
+  SourceProps extends object = object,
+  OverrideProps extends object = object
+> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps
+
+type MergeWithAs<
+  ComponentProps extends object,
+  AsProps extends object,
+  AdditionalProps extends object = object,
+  AsComponent extends As = As
+> = RightJoinProps<ComponentProps, AdditionalProps> &
+  RightJoinProps<AsProps, AdditionalProps> & {
+    as?: AsComponent
+  }
+
+export type PropsWithAs<
+  Component extends As,
+  Props extends object
+> = RightJoinProps<ComponentProps<Component>, Props> & {
+  as?: As
+}
+
+export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+  as?: As
+}
+
+export type ComponentWithAs<
+  Component extends As,
+  Props extends object = object
+> = {
+  <AsComponent extends As = Component>(
+    props: MergeWithAs<
+      React.ComponentProps<Component>,
+      React.ComponentProps<AsComponent>,
+      Props,
+      AsComponent
+    >
+  ): JSX.Element
+  displayName?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  propTypes?: React.WeakValidationMap<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  contextTypes?: React.ValidationMap<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultProps?: Partial<any>
+  id?: string
+}

package/packages/core/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]

package/packages/core/tsconfig.node.json

@@ -1,9 +1,6 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
+    "composite": true
   },
   "include": ["vite.config.ts"]
 }

package/packages/core/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
@@ -19,8 +20,10 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]
-    },
-    target: 'esnext',
-    sourcemap: true
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom'
   }
 })