@okam/stack-ui 1.25.2 → 1.25.3

package/src/theme/Radio/index.ts

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants'
+
+export const radioLabel = tv({
+  base: `text-black flex flex-row items-center hover:cursor-pointer focus-ring-black`,
+  variants: {
+    isDisabled: {
+      true: 'text-gray-6',
+    },
+  },
+})
+
+export const radio = tv({
+  base: `w-6 h-6 mt-0.5 mr-2.5 rounded-full border-2 border-gray-2 shrink-0 hover:cursor-pointer flex items-center justify-center`,
+  variants: {
+    isDisabled: {
+      true: 'border-gray-6',
+    },
+    isFocused: {
+      true: `outline-black [outline-offset: 2px]`,
+    },
+  },
+})
+
+export const selectedMark = tv({
+  base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
+  variants: {
+    selected: {
+      true: 'block text-white',
+    },
+  },
+})

package/src/theme/RadioGroup/index.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants'
+
+export const radioGroup = tv({
+  base: `block`,
+  variants: {
+    isDisabled: {
+      true: 'opacity-60 pointer-events-none',
+    },
+  },
+})
+
+export const radioGroupItemsGroup = tv({
+  base: `flex flex-col gap-4 py-8`,
+})

package/src/theme/Search/index.ts

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants'
+
+export const searchInput = tv({
+  base: 'p-4 w-full outline-0 search-cancel:appearance-none',
+  variants: {
+    isDisabled: {
+      true: 'opacity-60 pointer-events-none',
+    },
+  },
+})
+
+export const searchIcon = tv({
+  base: `
+    box-border 
+    absolute 
+    right-4 
+    focus-ring-black
+    outline-0
+  `,
+})

package/src/theme/ShareButton/index.tsx

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,178 @@
+'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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,21 @@
+'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

@@ -0,0 +1,30 @@
+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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,20 @@
+{
+  "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

@@ -0,0 +1,25 @@
+{
+  "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"]
+}