@okam/stack-ui 1.25.3 → 1.25.6

package/src/theme/ShareButton/index.tsx

@@ -1,76 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const shareButtonContainer = tv({
-  base: 'flex print:hidden relative',
-  defaultVariants: {
-    listDirection: 'row',
-  },
-  variants: {
-    listDirection: {
-      row: 'flex-row',
-      column: 'flex-col',
-    },
-  },
-})
-
-export const shareButton = tv({
-  base: 'relative z-20 !bg-color-1-500 hover:!bg-color-1-400 w-16 h-16 flex justify-center items-center active:!bg-color-1-400 rounded-full text-white focus-ring-black',
-  variants: {
-    isOpen: {
-      true: '',
-      false: '',
-    },
-  },
-})
-
-export const shareButtonLinksList = tv({
-  base: '!bg-color-1-200 absolute opacity-0 invisible flex transition duration-300 items-center p-0 bg-primary-1 z-0 rounded-b-full rounded-t-full',
-  defaultVariants: {
-    listDirection: 'row',
-  },
-  variants: {
-    listDirection: {
-      row: 'flex-row pl-14 h-16 left-0',
-      column: 'flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0',
-    },
-    isOpen: {
-      true: 'opacity-100 visible',
-      false: '',
-    },
-  },
-})
-
-export const shareButtonLink = tv({
-  base: `
-    flex
-    items-center
-    justify-center
-    cursor-pointer
-    bg-color-1-200
-    hover:bg-color-1-300
-    w-full
-    text-color-1-500
-    rounded-none
-    p-2
-    focus-ring-black
-    z-10
-    has-focus-ring:z-20
-  `,
-  defaultVariants: {
-    listDirection: 'row',
-  },
-  variants: {
-    listDirection: {
-      row: 'last:rounded-r-full h-full',
-      column: 'last:rounded-b-full',
-    },
-  },
-})
-
-export const shareButtonIcon = tv({
-  base: 'text-white',
-})
-
-export const shareButtonLinkIcons = tv({
-  base: '',
-})

package/src/theme/SidePanel/index.ts

@@ -1,9 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const sidePanelWrapper = tv({
-  base: 'm-auto fixed right-0 top-0 bottom-0 w-full max-w-[512px] [&>div]:h-full',
-})
-
-export const sidePanelContainer = tv({ base: 'h-full w-full flex justify-end' })
-
-export const sidePanelInnerContainer = tv({ base: 'bg-black h-full w-full overflow-y-auto' })

package/src/theme/TextArea/index.ts

@@ -1,25 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const textArea = tv({
-  base: `
-    w-full
-    min-h-32
-    rounded-2xl
-    px-6
-    h-12
-    border-2
-    border-solid
-    transition
-    duration-300
-    ease-in-out
-    text-gray-2
-    placeholder:text-gray-2
-    focus-ring-black
-    
-  `,
-  variants: {
-    isError: {
-      true: 'border-red-500',
-    },
-  },
-})

package/src/theme/Typography/index.tsx

@@ -1,44 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-const typography = tv({
-  variants: {
-    size: {
-      h1: `text-5xl`,
-      h2: `text-4xl`,
-      h3: `text-3xl`,
-      h4: `text-2xl`,
-      h5: `text-xl`,
-      h6: `text-lg`,
-      leading: `text-md font-bold leading-normal`,
-      paragraph: `text-md inline`,
-      footnotes: `text-sm`,
-      xs: `text-xs`,
-    },
-    font: {
-      body: `font-body`,
-    },
-    weight: {
-      normal: `font-normal`,
-      light: `font-light`,
-      bold: 'font-bold',
-    },
-    color: {
-      gray: `text-gray-500`,
-      white: `text-white`,
-    },
-    isError: {
-      true: 'text-sm text-error py-3',
-    },
-    align: {
-      center: 'text-center',
-      left: 'text-left',
-      right: 'text-right',
-    },
-  },
-  defaultVariants: {
-    size: 'paragraph',
-    font: 'body',
-  },
-})
-
-export default typography

package/src/theme/index.tsx

@@ -1,178 +0,0 @@
-'use client'
-
-import React from 'react'
-import { makeTheme, createThemeProvider } from '../providers/Theme'
-import { accordionTheme } from './Accordion'
-import alertsTheme from './Alerts'
-import { container, grid, gridItem, main } from './Box'
-import button from './Button'
-import {
-  calendarCell,
-  calendarCellContainer,
-  calendarCellFormattedDate,
-  calendarContainer,
-  calendarDayLabel,
-  calendarHeaderContainer,
-  calendarNavigationButtons,
-  calendarNavigationButtonsContainer,
-  calendarTable,
-} from './Calendar'
-import carousel from './Carousel'
-import { checkBox, checkMark, checkMarkIcon, checkboxContainer, checkboxLabel } from './Checkbox'
-import { checkboxGroup, checkboxGroupItemsGroup } from './CheckboxGroup'
-import {
-  datePickerButton,
-  datePickerCalendarPopoverContainer,
-  datePickerCalendarPopoverUnderlay,
-  datePickerContainer,
-  datePickerDateField,
-  datePickerDateSegment,
-  datePickerIcon,
-  datePickerLabel,
-} from './DatePicker'
-import { imgTheme } from './Image'
-import lightboxTheme from './LightBox'
-import { radio, radioLabel, selectedMark } from './Radio'
-import { radioGroup, radioGroupItemsGroup } from './RadioGroup'
-import { searchIcon, searchInput } from './Search'
-import {
-  shareButton,
-  shareButtonContainer,
-  shareButtonIcon,
-  shareButtonLink,
-  shareButtonLinkIcons,
-  shareButtonLinksList,
-} from './ShareButton'
-import { sidePanelWrapper, sidePanelContainer, sidePanelInnerContainer } from './SidePanel'
-import { textArea } from './TextArea'
-import typography from './Typography'
-
-const BaseTheme = makeTheme({
-  main: (props) => main(props),
-  gridItem: (props) => gridItem(props),
-  grid: (props) => grid(props),
-  container: (props) => container(props),
-  accordion: accordionTheme,
-  carousel,
-  calendar: {
-    container: (props) => calendarContainer(props),
-    header: (props) => calendarHeaderContainer(props),
-    navigationButtonsContainer: (props) => calendarNavigationButtonsContainer(props),
-    navigationButtons: (props) => calendarNavigationButtons(props),
-    table: (props) => calendarTable(props),
-    dayLabel: (props) => calendarDayLabel(props),
-    cellContainer: (props) => calendarCellContainer(props),
-    cell: (props) => calendarCell(props),
-    cellDate: (props) => calendarCellFormattedDate(props),
-  },
-  datePicker: {
-    container: (props) => datePickerContainer(props),
-    button: (props) => datePickerButton(props),
-    icon: (props) => datePickerIcon(props),
-    dateField: (props) => datePickerDateField(props),
-    dateSegment: (props) => datePickerDateSegment(props),
-    label: (props) => datePickerLabel(props),
-    calendarPopover: (props) => datePickerCalendarPopoverContainer(props),
-    calendarUnderlay: (props) => datePickerCalendarPopoverUnderlay(props),
-  },
-  popover: {
-    button: (props) => button(props),
-    popover: () => 'border-2 text-black p-4 bg-gray-300',
-  },
-  typography: (props) => typography(props),
-  button: (props) => button(props),
-  sidePanel: {
-    wrapper: (props) => sidePanelWrapper(props),
-    container: (props) => sidePanelContainer(props),
-    innerContainer: (props) => sidePanelInnerContainer(props),
-  },
-  lightBox: lightboxTheme,
-  shareButton: {
-    icon: (props) => shareButtonIcon(props),
-    button: (props) => shareButton(props),
-    container: (props) => shareButtonContainer(props),
-    linksList: (props) => shareButtonLinksList(props),
-    link: (props) => shareButtonLink(props),
-    linkIcons: (props) => shareButtonLinkIcons(props),
-  },
-  checkbox: {
-    container: (props) => checkboxContainer(props),
-    label: (props) => checkboxLabel(props),
-    checkBox: (props) => checkBox(props),
-    checkMark: (props) => checkMark(props),
-    checkMarkIcon: (props) => checkMarkIcon(props),
-    errorMessage: (props) => typography(props),
-  },
-  radio: {
-    label: (props) => radioLabel(props),
-    radio: (props) => radio(props),
-    selectedMark: (props) => selectedMark(props),
-    errorMessage: (props) => typography(props),
-  },
-  radioGroup: {
-    radioGroup: (props) => radioGroup(props),
-    radioGroupItemsGroup: (props) => radioGroupItemsGroup(props),
-    errorMessage: (props) => typography(props),
-  },
-  checkboxGroup: {
-    checkboxGroup: (props) => checkboxGroup(props),
-    checkboxGroupItemsGroup: (props) => checkboxGroupItemsGroup(props),
-    errormessage: (props) => typography(props),
-  },
-  select: {
-    button: (props) => button(props),
-    ul: (props) =>
-      typography({
-        ...props,
-        className: 'outline outline-2 outline-white outline-offset-2 p-2 my-4 rounded-md w-full flex flex-col gap-6',
-      }),
-    popover: (props) => button({ ...props, className: 'w-[var(--select-container-width)]' }),
-    errorMessage: (props) => typography({ ...props, size: 'footnotes', isError: true }),
-    wrapper: () => 'flex flex-col gap-4 relative',
-    container: () => 'flex flex-col gap-4',
-    li: () => 'transition w-full hover:text-gray-300 focus-ring-white',
-  },
-  textarea: {
-    wrapper: () => 'flex flex-col',
-    container: () => 'flex items-center gap-4',
-    label: () => 'text-gray-3 px-6',
-    input: (props) => textArea(props),
-    errorMessage: (props) => typography({ ...props, size: 'footnotes', isError: true }),
-  },
-  search: {
-    wrapper: () => 'min-w-fit sm:w-80 flex flex-col gap-2',
-    container: () =>
-      'relative flex items-center outline outline-2 outline-gray-300 focus-within:outline focus-within:outline-black focus-within:outline-2',
-    label: () => 'text-gray-3',
-    input: (props) => searchInput(props),
-    icon: (props) => searchIcon(props),
-    errorMessage: (props) => typography({ ...props, size: 'footnotes', isError: true }),
-  },
-  textInput: {
-    wrapper: () =>
-      `group flex flex-col rounded-md px-4 py-1 mb-3 m-0.5 border-2 aria-disabled:pointer-events-none aria-disabled:opacity-30 focus-ring-black`,
-    label: () => 'group-has-[:required]:after:content-["_*"] group-has-[:required]:after:text-red-500 text-xs',
-    container: () => 'flex items-center gap-4',
-    input: () => '',
-    errorMessage: (props) => typography({ ...props, className: 'ml-0', size: 'footnotes', isError: true }),
-  },
-  menu: {
-    sidePanel: {
-      wrapper: () => ``,
-      container: () => '',
-      innerContainer: () => '',
-    },
-    wrapper: () => '',
-  },
-  menuItem: {
-    wrapper: () => ``,
-    container: () => ``,
-    innerContent: () => ``,
-    button: () => ``,
-    anchor: () => ``,
-  },
-  img: imgTheme,
-  alerts: alertsTheme,
-})
-
-export default React.memo(createThemeProvider(BaseTheme))

package/src/transitions/AccordionTransition.tsx

@@ -1,26 +0,0 @@
-import { animated, useTransition } from 'react-spring'
-import useThemeContext from '../providers/Theme/hooks'
-import type { TTransition } from '../types/components'
-
-const AccordionTransition = (props: TTransition) => {
-  const { isVisible, children, themeName, tokens, customTheme, ...rest } = props
-  const transition = useTransition(isVisible, {
-    from: { gridTemplateRows: '0fr', paddingTop: '0', paddingBottom: '0' },
-    enter: { gridTemplateRows: '1fr', paddingTop: '1rem', paddingBottom: '1rem' },
-    leave: { gridTemplateRows: '0fr', paddingTop: '0', paddingBottom: '0' },
-  })
-
-  const transitionTheme = useThemeContext(themeName, tokens, customTheme)
-
-  return transition((styles, bool) => {
-    return (
-      bool && (
-        <animated.div {...rest} style={styles} className={transitionTheme}>
-          {children}
-        </animated.div>
-      )
-    )
-  })
-}
-
-export default AccordionTransition

package/src/transitions/ModalTransition.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { animated, config, useTransition } from 'react-spring'
-
-interface TProps {
-  isVisible: boolean
-  children: React.ReactNode
-}
-
-const ModalTransition = ({ isVisible, children }: TProps) => {
-  const transition = useTransition(isVisible, {
-    from: { opacity: 0, scale: 0.75 },
-    enter: { opacity: 1, scale: 1 },
-    leave: { opacity: 0, scale: 0.75 },
-    config: config.stiff,
-  })
-
-  return transition(
-    (styles, bool) =>
-      bool && (
-        <animated.div
-          style={{
-            position: 'fixed',
-            left: 0,
-            top: 0,
-            bottom: 0,
-            zIndex: 1000,
-            width: '100%',
-            height: '100%',
-            ...styles,
-          }}
-        >
-          {children}
-        </animated.div>
-      ),
-  )
-}
-
-export default ModalTransition

package/src/transitions/RenderWithOpacity.tsx

@@ -1,25 +0,0 @@
-import { animated, config, useTransition } from 'react-spring'
-import useThemeContext from '../providers/Theme/hooks'
-import type { TTransition } from '../types/components'
-
-const RenderWithOpacity = ({ isVisible, children, themeName, tokens, customTheme, ...rest }: TTransition) => {
-  const transition = useTransition(isVisible, {
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
-    config: config.stiff,
-  })
-
-  const transitionTheme = useThemeContext(themeName, tokens, customTheme)
-
-  return transition(
-    (styles, bool) =>
-      bool && (
-        <animated.div className={transitionTheme} style={styles} {...rest}>
-          {children}
-        </animated.div>
-      ),
-  )
-}
-
-export default RenderWithOpacity

package/src/transitions/RenderWithSlide.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import React from 'react'
-import { animated, useTransition } from 'react-spring'
-
-interface TProps {
-  isVisible: boolean
-  children: React.ReactNode
-}
-
-const RenderWithSlide = ({ isVisible, children }: TProps) => {
-  const transition = useTransition(isVisible, {
-    from: { opacity: 0, translateX: '100%' },
-    enter: { opacity: 1, translateX: '0%' },
-    leave: { opacity: 0, translateX: '25%' },
-  })
-
-  return transition((styles, bool) => bool && <animated.div style={styles}>{children}</animated.div>)
-}
-
-export default RenderWithSlide

package/src/transitions/SidePanelTransition.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { animated, config, useTransition } from 'react-spring'
-
-const fixed: 'absolute' | 'relative' | 'fixed' = 'fixed'
-
-interface TProps {
-  isVisible: boolean
-  children: React.ReactNode
-}
-
-const SidePanelTransition = ({ isVisible, children }: TProps) => {
-  const transition = useTransition(isVisible, {
-    from: {
-      opacity: 0,
-      position: fixed,
-      left: 0,
-      top: 0,
-      zIndex: 1000,
-      bottom: 0,
-      height: '100%',
-    },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
-    config: config.stiff,
-  })
-
-  return transition((styles, bool) => bool && <animated.div style={styles}>{children}</animated.div>)
-}
-
-export default SidePanelTransition

package/src/types/components.ts

@@ -1,34 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type React from 'react'
-import type { HTMLAttributes } from 'react'
-import type { RefCallBack } from 'react-hook-form'
-import type { TCustomTheme, TToken } from '../providers/Theme/interface'
-
-export interface TDefaultComponent<T = TToken> {
-  as?: React.ElementType<any>
-  customTheme?: TCustomTheme
-  tokens?: T
-  themeName?: string | null
-  children?: React.ReactNode
-}
-
-export type TReactHookForm = {
-  onBlur?: (...event: any[]) => void
-  onChange?: (...event: any[]) => void
-  fieldRef?: RefCallBack
-  min?: string | number | undefined
-  max?: string | number | undefined
-  maxLength?: number | undefined
-  minLength?: number | undefined
-  pattern?: string | undefined
-  validation?: object
-}
-
-export interface TTransition extends TDefaultComponent, HTMLAttributes<HTMLElement> {
-  isVisible: boolean
-  children: React.ReactNode
-}
-
-export type Nullable<T> = T | undefined | null
-
-export type Maybe<T> = T | null

package/tailwind.config.js

@@ -1,14 +0,0 @@
-const { createGlobPatternsForDependencies } = require('@nx/react/tailwind')
-const { join } = require('path')
-
-module.exports = {
-  content: [
-    join(__dirname, '{src,pages,components,app,theme}/**/*.{js,ts,jsx,tsx,mdx,html}'),
-    ...createGlobPatternsForDependencies(__dirname),
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  presets: [require('../../../tailwind.preset')],
-}

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./.storybook/tsconfig.json"
-    }
-  ],
-  "extends": "../../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,25 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "types": ["node", "next"]
-  },
-  "paths": { "@workspace/*": ["dist/libs/*"] },
-  "files": [
-    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../../node_modules/@nx/react/typings/image.d.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js"
-  ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
-}

package/vite.config.ts

@@ -1,58 +0,0 @@
-/* eslint-disable import/no-relative-packages */
-/// <reference types="vitest" />
-import * as path from 'path'
-
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
-import externalDeps from '../../../config/external-deps'
-
-export default defineConfig({
-  cacheDir: '../../../node_modules/.vite/stack-ui',
-
-  plugins: [
-    dts({
-      entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
-    }),
-    react(),
-    viteTsConfigPaths({
-      root: '../../../',
-    }),
-  ],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [
-  //    viteTsConfigPaths({
-  //      root: '../../../',
-  //    }),
-  //  ],
-  // },
-
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'stack-ui',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: externalDeps,
-      onwarn(warning, warn) {
-        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
-          return
-        }
-        warn(warning)
-      },
-    },
-  },
-})