@sakura-ui/sakura-ui 0.1.21 → 0.3.0

package/packages/tailwind-theme-plugin/vite.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vitest" />
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import { peerDependencies } from './package.json'
 

package/packages/config/src/index.ts

@@ -1,347 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-const booleans = [
-  'atomic',
-  'busy',
-  'checked',
-  'current',
-  'disabled',
-  'expanded',
-  'grabbed',
-  'haspopup',
-  'hidden',
-  'invalid',
-  'live',
-  'modal',
-  'multiline',
-  'multiselectable',
-  'pressed',
-  'readonly',
-  'required',
-  'selected'
-]
-
-const enumerables = {
-  autocomplete: ['both', 'inline', 'list', 'none'],
-  current: ['date', 'location', 'page', 'step', 'time'],
-  dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
-  haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
-  orientation: ['horizontal', 'undefined', 'vertial'],
-  relevant: ['additions', 'all', 'removals', 'text'],
-  sort: ['ascending', 'descending', 'none', 'other']
-}
-
-const sakuraPlugin = plugin(
-  ({ addBase, addVariant }) => {
-    addBase({
-      '@font-face': {
-        fontFamily: 'Material Symbols Outlined',
-        fontWeight: '300',
-        fontStyle: 'normal'
-      }
-    })
-    const addAriaVariant = (name: string, value: string) => {
-      addVariant(name, `[${name}="${value}"]&`)
-      addVariant(`peer-${name}`, `:merge(.peer)[${name}="${value}"] ~ &`)
-      addVariant(`group-${name}`, `:merge(.group)[${name}="${value}"] &`)
-    }
-    const addAriaEnumVariant = (name: string, value: string) => {
-      addVariant(`${name}-${value}`, `[${name}="${value}"]&`)
-      addVariant(
-        `peer-${name}-${value}`,
-        `:merge(.peer)[${name}="${value}"] ~ &`
-      )
-      addVariant(
-        `group-${name}-${value}`,
-        `:merge(.group)[${name}="${value}"] &`
-      )
-    }
-
-    for (const attribute of booleans) {
-      addAriaVariant(`aria-${attribute}`, 'true')
-    }
-
-    for (const [attribute, values] of Object.entries(enumerables)) {
-      for (const value of values) {
-        addAriaEnumVariant(`aria-${attribute}`, value)
-      }
-    }
-  },
-  {
-    theme: {
-      extend: {
-        fontSize: {
-          'h-xxl': [
-            '57px',
-            {
-              lineHeight: '1.4',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'h-xl': [
-            '45px',
-            {
-              lineHeight: '1.4',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          // h1
-          'h-lg': [
-            '36px',
-            {
-              lineHeight: '1.4',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'h-lg-m': [
-            '32px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          // h2
-          'h-med': [
-            '32px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'h-med-m': [
-            '28px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          // h3
-          'h-sm': [
-            '28px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'h-sm-m': [
-            '24px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          // h4
-          'h-xs': [
-            '24px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'h-xs-m': [
-            '20px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          // h5 h6
-          'h-xxs': [
-            '20px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'h-xxs-m': [
-            '16px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          base: [
-            '16px',
-            {
-              lineHeight: '1.7',
-              letterSpacing: '0.04em',
-              fontWeight: '400'
-            }
-          ],
-          'base-sm': [
-            '14px',
-            {
-              lineHeight: '1.7',
-              letterSpacing: '0.04em',
-              fontWeight: '400'
-            }
-          ],
-          sup: [
-            '12px',
-            {
-              lineHeight: '1.7',
-              letterSpacing: '0.02em',
-              fontWeight: '400'
-            }
-          ],
-          'sup-sm': [
-            '10px',
-            {
-              lineHeight: '1.7',
-              letterSpacing: '0.02em',
-              fontWeight: '400'
-            }
-          ],
-          button: [
-            '16px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          'button-sm': [
-            '14px',
-            {
-              lineHeight: '14px',
-              letterSpacing: '0.04em',
-              fontWeight: '700'
-            }
-          ],
-          label: [
-            '14px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '500'
-            }
-          ],
-          'label-sm': [
-            '12px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '500'
-            }
-          ],
-          code: [
-            '16px',
-            {
-              lineHeight: '1.7',
-              letterSpacing: '0.04em',
-              fontWeight: '400'
-            }
-          ]
-        },
-        colors: {
-          white: {
-            1000: '#FFFFFF'
-          },
-          sea: {
-            1200: '#00004F',
-            1100: '#000060',
-            1000: '#000071',
-            900: '#000082',
-            800: '#0017C1',
-            700: '#0031D8',
-            600: '#1A3EE8',
-            500: '#264AF4',
-            400: '#4979F5',
-            300: '#7096F8',
-            200: '#9DB7F9',
-            100: '#C5D7FB',
-            50: '#E8F1FE'
-          },
-          sumi: {
-            1200: '#000000',
-            1100: '#080808',
-            1000: '#111111',
-            900: '#1A1A1C',
-            800: '#414143',
-            700: '#626264',
-            600: '#757578',
-            500: '#949497',
-            400: '#B4B4B7',
-            300: '#D8D8DB',
-            200: '#E8E8EB',
-            100: '#F1F1F4',
-            50: '#F8F8FB'
-          },
-          forest: {
-            1200: '#032213',
-            1100: '#08351F',
-            1000: '#0C472A',
-            900: '#115A36',
-            800: '#197A4B',
-            700: '#1D8B56',
-            600: '#259D63',
-            500: '#2CAC6E',
-            400: '#51B883',
-            300: '#71C598',
-            200: '#9BD4B5',
-            100: '#C2E5D1',
-            50: '#E6F5EC'
-          },
-          wood: {
-            1200: '#662E00',
-            1100: '#833B00',
-            1000: '#9C4600',
-            900: '#B65200',
-            800: '#C16800',
-            700: '#C87504',
-            600: '#CD820A',
-            500: '#D18D0F',
-            400: '#D69C2B',
-            300: '#DCAC4D',
-            200: '#E1C383',
-            100: '#E7D8B9',
-            50: '#F3EEE5'
-          },
-          sun: {
-            1200: '#640101',
-            1100: '#890101',
-            1000: '#AF0000',
-            900: '#D50000',
-            800: '#EC0000',
-            700: '#FA1606',
-            600: '#FF220D',
-            500: '#FF4B36',
-            400: '#FF5838',
-            300: '#FF7B5C',
-            200: '#FFA28B',
-            100: '#FFC8B8',
-            50: '#FFE7E6'
-          }
-        },
-        fontFamily: {
-          sans: [
-            'Noto Sans JP',
-            '-apple-system',
-            'blinkmacsystemfont',
-            'Segoe UI',
-            'Hiragino Kaku Gothic ProN',
-            'BIZ UDPGothic',
-            'meiryo',
-            'sans-serif'
-          ],
-          code: ['Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace'],
-          icon: ['Material Symbols Outlined']
-        }
-      }
-    }
-  }
-)
-
-export default sakuraPlugin

package/packages/config/tests/index.test.ts

@@ -1,13 +0,0 @@
-import sakuraPlugin from '../src'
-
-describe('run tests', () => {
-  it('tests the sakuraConfig', () => {
-    const config = {
-      mode: 'jit',
-      content: ['./src/components/**/*.{js,ts,jsx,tsx}'],
-      plugins: [sakuraPlugin]
-    }
-    console.log(config)
-    expect(1 + 2).toBe(3)
-  })
-})

package/packages/core/.eslintrc.json

@@ -1,25 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:jsx-a11y/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["@typescript-eslint", "react", "jsx-a11y"],
-  "rules": {},
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

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

@@ -1,50 +0,0 @@
-import React from 'react'
-import { cx } from '../libs/cx'
-
-export interface InfoCardProps
-  extends React.ComponentPropsWithoutRef<'section'> {
-  title?: string
-}
-
-export const InfoCard = (props: InfoCardProps) => {
-  const { className, children, title, ...restProps } = props
-
-  const style = `
-    border
-    border-solid
-    border-sumi-300
-    rounded-2xl
-    sm:rounded-3xl
-    text-sumi-900
-  `
-
-  const topStyle = `
-    pt-6
-    px-6
-    text-h-xxs-m
-    sm:text-h-xxs
-    leading-none
-    mb-2
-  `
-
-  const bottmStyle = `
-    pb-6
-    px-6
-    text-base
-  `
-
-  const headingId = React.useId()
-
-  return (
-    <section
-      aria-labelledby={headingId}
-      className={cx(style, className)}
-      {...restProps}
-    >
-      <h2 id={headingId} className={topStyle}>
-        {title}
-      </h2>
-      <p className={bottmStyle}>{children}</p>
-    </section>
-  )
-}

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

@@ -1,41 +0,0 @@
-/*
-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

@@ -1,82 +0,0 @@
-/*
-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
-}