@companix/uikit 0.0.2 → 0.0.4

package/playground/animation-test-2/index.scss

@@ -1,62 +0,0 @@
-// Описание test-2-animation: анимация запускается через transform, а исчезает через opacity
-
-// Данный пример необходим для понимания прерывания enter анимации
-// Анимация появления (data-enter) намеренно сделана долгой, чтобы запустить завершение анимации ещё до окончания анимации enter.
-// В случае если анимация enter была бы окончена, вызов завершения анимации запускал бы этап [data-leave], однако при вызове завершения
-// в моменте выполнения enter, [data-leave] не будет вызван, а вместо этого будет добавлен атрибут [data-closed], который запустит анимацию вспять, до initial состояния, которое описано в [data-closed][data-enter]
-
-.test-2-animation {
-  // initial - начальное состояние (перед появлением)
-  &[data-closed][data-enter] {
-    transform: scale(0.3);
-  }
-
-  // animate from initial - анимация до конечного состояния, от начального
-  &[data-enter] {
-    transform: scale(1);
-    transition-delay: 0;
-    transition-duration: 2s;
-    transition-property: transform;
-    transition-timing-function: linear;
-  }
-
-  // exit - анимация завершения
-  &[data-leave] {
-    transition-delay: 0;
-    transition-duration: 1s;
-    transition-property: opacity;
-    transition-timing-function: linear;
-    opacity: 0;
-  }
-}
-
-// В данном примере, анимировано прерывание enter
-
-.test-2-completed-animation {
-  // начальное состояние
-  // также будет запускаться при прерывании enter-анимации
-  &[data-closed][data-enter] {
-    // описываем начальное состояние (перед появлением). Обращаю внимание что "opacity: 0" не будет учтен при data-enter анимации
-    transform: scale(0.3);
-    opacity: 0;
-    // стили использующиеся при прерывании data-enter анимации (переход в начальное состояние)
-    transition-duration: 200ms;
-    transition-property: transform, opacity; // учитываем opacity
-  }
-
-  // animate - анимация появления запускаемая от начального до конечного состояния
-  &[data-enter] {
-    transform: scale(1);
-    transition-duration: 2s;
-    transition-property: transform;
-    transition-timing-function: linear;
-  }
-
-  // exit - анимация завершения
-  &[data-leave] {
-    transition-duration: 1s;
-    transition-property: opacity;
-    transition-timing-function: linear;
-    opacity: 0;
-  }
-}

package/playground/animation-test-2/index.tsx

@@ -1,32 +0,0 @@
-import './index.scss'
-// import { useState } from 'react'
-
-export const Test2Animation = () => {
-  // const [open, setOpen] = useState(false)
-
-  return (
-    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
-      <div style={{ padding: '10px', width: '200px' }}>
-        {/* <button onClick={() => setOpen((open) => !open)}>Animation 2(*1)</button> */}
-        {/* <Transition show={open}> */}
-        <div className="test-2-animation box-styles">Target element</div>
-        {/* </Transition> */}
-      </div>
-    </div>
-  )
-}
-
-export const Test2CompletedAnimation = () => {
-  // const [open, setOpen] = useState(false)
-
-  return (
-    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
-      <div style={{ padding: '10px', width: '200px' }}>
-        {/* <button onClick={() => setOpen((open) => !open)}>Animation 2(*2)</button> */}
-        {/* <Transition show={open}> */}
-        <div className="test-2-completed-animation box-styles">Target element</div>
-        {/* </Transition> */}
-      </div>
-    </div>
-  )
-}

package/playground/bootstrap.tsx

@@ -1,19 +0,0 @@
-import './styles.scss'
-
-import './index.scss'
-import './index.css'
-import '../src/theme.scss'
-
-import { createRoot } from 'react-dom/client'
-import { App } from './App'
-// import { TestApp } from './Test'
-
-createRoot(document.getElementById('root')!).render(<App />)
-
-const error = console.error
-console.error = (...args: any) => {
-  if (/defaultProps/.test(args[0])) return
-  if (/findDOMNode/.test(args[0])) return
-
-  error(...args)
-}

package/playground/buttons/index.tsx

@@ -1,132 +0,0 @@
-import { Appearance, Button, Mode, Size } from '@/Button'
-import {
-  faPlay,
-  faPause,
-  faBookmark,
-  faArrowRight,
-  faChevronRight,
-  faFolderBlank,
-  faEye,
-  faCaretDown,
-  faPen,
-  faFile
-} from '@fortawesome/free-solid-svg-icons'
-import { Icon } from '@/Icon'
-import { ButtonGroup } from '@/ButtonGroup'
-
-const appearances: Appearance[] = ['primary', 'neutral', 'positive', 'negative']
-const modes: Mode[] = ['default', 'outline', 'minimal']
-const sizes: Size[] = ['sm', 'md', 'lg']
-
-export const ButtonsExample = () => {
-  return (
-    <div className="col-group">
-      {appearances.map((appearance) => {
-        return (
-          <div className="row-group" key={`appearance-${appearance}`}>
-            {modes.map((mode) => (
-              <Button key={`mode-1-${appearance}-${mode}`} appearance={appearance} mode={mode}>
-                Button
-              </Button>
-            ))}
-            {[...modes].reverse().map((mode) => (
-              <Button key={`mode-2-${appearance}-${mode}`} appearance={appearance} mode={mode} disabled>
-                Button
-              </Button>
-            ))}
-          </div>
-        )
-      })}
-      <div className="row-group">
-        {sizes.map((size) => (
-          <Button key={`size-${size}`} icon={<Icon icon={faBookmark} size="xxxs" />} size={size}>
-            Button
-          </Button>
-        ))}
-      </div>
-      <div className="row-group">
-        <Button icon={<Icon icon={faPause} size="xxxs" />} size="md"></Button>
-        <Button icon={<Icon icon={faPlay} size="xxxs" />} size="md">
-          Button
-        </Button>
-        <Button iconRight={<Icon icon={faArrowRight} size="xxxs" />}>Button</Button>
-        <Button fill iconRight={<Icon icon={faChevronRight} size="xxxs" className="quieter" />}>
-          Button
-        </Button>
-        <Button
-          fill
-          icon={<Icon icon={faFolderBlank} size="xxxs" />}
-          iconRight={<Icon icon={faChevronRight} size="xxxs" className="quieter" />}
-        >
-          Button
-        </Button>
-      </div>
-      <div className="row-group">
-        <Button fill align="left">
-          Left
-        </Button>
-        <Button fill align="center">
-          Center
-        </Button>
-        <Button fill align="right">
-          Right
-        </Button>
-      </div>
-      <div className="row-group">
-        <Button loading>Button fullwidth</Button>
-        <Button disabled>Button disabled</Button>
-        <Button fill>Button fullwidth</Button>
-      </div>
-    </div>
-  )
-}
-
-export const ButtonsGroupExample = () => {
-  return (
-    <div className="col-group">
-      <div className="row-group">
-        <ButtonGroup>
-          <Button>Button One</Button>
-          <Button>Button Two</Button>
-          <Button>Button Three</Button>
-        </ButtonGroup>
-      </div>
-      <div className="row-group">
-        <ButtonGroup fill>
-          <Button>Secondary</Button>
-          <Button fill>Primary</Button>
-        </ButtonGroup>
-      </div>
-      <div className="row-group">
-        <ButtonGroup>
-          <Button icon={<Icon icon={faBookmark} size="xxxs" />} />
-          <Button>Button name</Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button>Button name</Button>
-          <Button icon={<Icon icon={faBookmark} size="xxxs" />} />
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button
-            icon={<Icon icon={faFile} size="xxxs" />}
-            iconRight={<Icon icon={faCaretDown} size="xxxs" className="quieter" />}
-          >
-            File
-          </Button>
-          <Button
-            icon={<Icon icon={faPen} size="xxxs" />}
-            iconRight={<Icon icon={faCaretDown} size="xxxs" className="quieter" />}
-          >
-            Edit
-          </Button>
-          <Button
-            icon={<Icon icon={faEye} size="xxxs" />}
-            iconRight={<Icon icon={faCaretDown} size="xxxs" className="quieter" />}
-          >
-            View
-          </Button>
-        </ButtonGroup>
-      </div>
-    </div>
-  )
-}

package/playground/checkbox/index.tsx

@@ -1,64 +0,0 @@
-import { Checkbox } from '@/Checkbox'
-import { Icon } from '@/Icon'
-import { Tooltip } from '@/Tooltip'
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-const longtext = `The expanded form makes it easy to schedule meetings: fields to fill out are displayed on the left, and the participants' schedule is shown on the right.`
-
-export const CheckboxExample = () => {
-  return (
-    <div className="col-group">
-      <div className="flex gap-24">
-        <div className="flex flex-col gap-12">
-          <CheckboxControl label="Accept terms and conditions" size="md" defaultChecked />
-          <CheckboxControl label="I want to recieve promote emails" size="sm" defaultChecked />
-        </div>
-        <div className="flex flex-col gap-12">
-          <CheckboxControl label="Accept terms and conditions" size="md" disabled defaultChecked />
-          <CheckboxControl label="I want to recieve promote emails" size="sm" disabled />
-        </div>
-      </div>
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <div className="flex flex-col gap-12">
-        <CheckboxControl label="Accept terms and conditions" size="md" defaultChecked />
-        <CheckboxControl
-          size="md"
-          defaultChecked
-          label={
-            <>
-              <span>Use the advanced form to create events</span>
-              <Tooltip side="top" content={longtext}>
-                <span className="help-tip">
-                  <Icon icon={faInfoCircle} size="xxxs" />
-                </span>
-              </Tooltip>
-            </>
-          }
-        />
-        <CheckboxControl label={longtext + ' ' + longtext} size="md" defaultChecked />
-      </div>
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <div>
-        <div className="flex flex-col gap-12">
-          <CheckboxControl label="Accept terms and conditions" size="md" required />
-          <CheckboxControl label="I want to recieve promote emails" size="sm" required />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface Props {
-  label?: React.ReactNode
-  size?: 'md' | 'sm'
-  defaultChecked?: boolean
-  disabled?: boolean
-  required?: boolean
-}
-
-const CheckboxControl = ({ defaultChecked, ...props }: Props) => {
-  const [checked, setCheck] = useState(defaultChecked ?? false)
-
-  return <Checkbox {...props} checked={checked} onCheckedChange={setCheck} />
-}

package/playground/date-input/index.tsx

@@ -1,45 +0,0 @@
-import { DateInput } from '@/DateInput'
-import { useState } from 'react'
-
-export const DateInputExample = () => {
-  return (
-    <div className="flex flex-col gap-14">
-      <div className="flex items-center gap-40">
-        <div style={{ maxWidth: '340px', width: '340px' }}>
-          <DateInputControl size="md" />
-        </div>
-        <div style={{ maxWidth: '340px', width: '340px' }}>
-          <DateInputControl size="md" disabled />
-        </div>
-        <div style={{ maxWidth: '340px', width: '340px' }}>
-          <DateInputControl size="md" required />
-        </div>
-      </div>
-      <div className="flex items-center gap-40">
-        <div style={{ maxWidth: '340px', width: '340px' }}>
-          <DateInputControl size="sm" />
-        </div>
-        <div style={{ maxWidth: '340px', width: '340px' }}>
-          <DateInputControl size="sm" disabled />
-        </div>
-        <div style={{ maxWidth: '340px', width: '340px' }}>
-          <DateInputControl size="sm" required />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface Props {
-  size: 'sm' | 'md' | 'lg'
-  disabled?: boolean
-  required?: boolean
-}
-
-const DateInputControl = ({ size, disabled, required }: Props) => {
-  const [value, onChange] = useState({ month: 0, year: 0, day: 0 })
-
-  return (
-    <DateInput value={value} size={size} onChange={onChange} disabled={disabled} required={required} />
-  )
-}

package/playground/date-picker/index.tsx

@@ -1,41 +0,0 @@
-import { DatePicker } from '@/DatePicker'
-import { Icon } from '@/Icon'
-import { faCalendar } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-export const DatePickerExample = () => {
-  return (
-    <div className="flex flex-col gap-14">
-      <div className="flex items-center gap-40">
-        <div style={{ width: '340px' }}>
-          <DatePickerControl size="md" />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface Props {
-  size: 'sm' | 'md' | 'lg'
-  disabled?: boolean
-  required?: boolean
-}
-
-export const DatePickerControl = ({ size, disabled, required }: Props) => {
-  const [value, onChange] = useState<null | Date>(new Date())
-
-  return (
-    <DatePicker
-      fill
-      clearButton
-      leftElement={<Icon icon={faCalendar} size="xxs" className="form-space-margin" />}
-      value={value}
-      size={size}
-      onChange={onChange}
-      disabled={disabled}
-      required={required}
-      placeholder="Укажите дату"
-      disableFuture
-    />
-  )
-}

package/playground/dialog/index.tsx

@@ -1,92 +0,0 @@
-import { Button, ButtonProps } from '@/Button'
-import { useState } from 'react'
-import { Dialog, DialogProps } from '@/Dialog'
-
-export const DialogExample = () => {
-  return (
-    <div className="row-group">
-      <DialogControlled buttonProps={{ text: 'Open dialog' }}>
-        {() => (
-          <div className="flex flex-col p-20 overflow-hidden">
-            <div className="overflow-y-scroll">
-              <b>
-                Data integration is the seminal problem of the digital age. For over ten years, we ve
-                helped the worlds premier organizations rise to the challenge.
-              </b>
-              <div>
-                Palantir Foundry radically reimagines the way enterprises interact with data by
-                amplifying and extending the power of data integration. With Foundry, anyone can source,
-                fuse, and transform data into any shape they desire. Business analysts become data
-                engineers — and leaders in their organizations data revolution.
-              </div>
-            </div>
-            <div className="w-full pt-20">
-              <DialogControlled buttonProps={{ fill: true }}>
-                {({ close }) => (
-                  <div className="p-20">
-                    <Button onClick={close}>Close me</Button>
-                  </div>
-                )}
-              </DialogControlled>
-            </div>
-          </div>
-        )}
-      </DialogControlled>
-      <DialogControlled size="full" buttonProps={{ text: 'Open full-size dialog' }}>
-        {() => (
-          <div className="flex flex-col h-full justify-between p-20 overflow-hidden">
-            <div className="overflow-y-scroll">
-              <b>
-                Data integration is the seminal problem of the digital age. For over ten years, we ve
-                helped the worlds premier organizations rise to the challenge.
-              </b>
-              <div>
-                Palantir Foundry radically reimagines the way enterprises interact with data by
-                amplifying and extending the power of data integration. With Foundry, anyone can source,
-                fuse, and transform data into any shape they desire. Business analysts become data
-                engineers — and leaders in their organizations data revolution.
-              </div>
-            </div>
-            <div className="w-full pt-20">
-              <DialogControlled buttonProps={{ fill: true }}>
-                {({ close }) => (
-                  <div className="p-20">
-                    <Button onClick={close}>Close me</Button>
-                  </div>
-                )}
-              </DialogControlled>
-            </div>
-          </div>
-        )}
-      </DialogControlled>
-    </div>
-  )
-}
-
-interface Props extends Pick<DialogProps, 'size'> {
-  buttonProps?: ButtonProps
-  children: (value: { close: () => void }) => JSX.Element
-}
-
-const DialogControlled = ({ size, children, buttonProps }: Props) => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <Button {...buttonProps} onClick={() => setOpen(true)}>
-        Open dialog
-      </Button>
-      <Dialog open={open} onOpenChange={setOpen} size={size}>
-        <Dialog.Close className="dialog-close">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              fill="currentColor"
-              d="M14.03 3.03 9.06 8l4.97 4.97-1.061 1.06-4.97-4.97-4.97 4.97-1.06-1.06L6.939 8l-4.97-4.97 1.06-1.06L8 6.94l4.97-4.97z"
-            />
-          </svg>
-        </Dialog.Close>
-        {children({ close: () => setOpen(false) })}
-      </Dialog>
-    </>
-  )
-}

package/playground/dialog-alert/index.tsx

@@ -1,47 +0,0 @@
-import { Button } from '@/Button'
-import { createAlertAgent } from '@/DialogAlert'
-import { Icon } from '@/Icon'
-import { faWifi } from '@fortawesome/free-solid-svg-icons'
-
-const AlertAgent = createAlertAgent({ cancelDefaultText: 'Cancel' })
-
-export const DialogAlertExample = () => {
-  return (
-    <div className="row-group">
-      <Button
-        onClick={() => {
-          AlertAgent.show({
-            title: 'Are you sure?',
-            confirm: { text: 'Move to trash' },
-            description: `Are you sure you want to move filename to Trash? You will be able to restore it later, but it will become private to you`
-          })
-        }}
-      >
-        Move to trash
-      </Button>
-      <Button
-        onClick={() => {
-          AlertAgent.show({
-            cancel: { text: 'Okay' },
-            description: `Couldn't create the file because the containing folder doesn't exist anymore. You will be redirected to your user folder`
-          })
-        }}
-      >
-        Do unable
-      </Button>
-      <Button
-        onClick={() => {
-          AlertAgent.show({
-            disableCancel: true,
-            icon: <Icon icon={faWifi} />,
-            confirm: { text: 'Reload', appearance: 'neutral', onClick: () => window.location.reload() },
-            description: `Connection is interupted. Page will be reloaded`
-          })
-        }}
-      >
-        Reconnecting
-      </Button>
-      <AlertAgent.Viewport />
-    </div>
-  )
-}

package/playground/drawer/index.tsx

@@ -1,55 +0,0 @@
-import { Button } from '@/Button'
-import { Drawer, DrawerProps } from '@/Drawer'
-import { useState } from 'react'
-
-const direction = ['left', 'top', 'bottom', 'right'] as const
-
-export const DrawerExample = () => {
-  return (
-    <div className="row-group">
-      {direction.map((direction) => (
-        <DrawerControlled
-          direction={direction}
-          key={`drawer-${direction}`}
-          size="40%"
-          button={<span className="capitalize">{direction} Drawer</span>}
-        >
-          {() => (
-            <div className="flex flex-col overflow-hidden">
-              <div className="overflow-y-scroll p-20">
-                <b>
-                  Data integration is the seminal problem of the digital age. For over ten years, we ve
-                  helped the worlds premier organizations rise to the challenge.
-                </b>
-                <div>
-                  Palantir Foundry radically reimagines the way enterprises interact with data by
-                  amplifying and extending the power of data integration. With Foundry, anyone can
-                  source, fuse, and transform data into any shape they desire. Business analysts become
-                  data engineers — and leaders in their organizations data revolution.
-                </div>
-              </div>
-            </div>
-          )}
-        </DrawerControlled>
-      ))}
-    </div>
-  )
-}
-
-interface Props extends Omit<DrawerProps, 'open' | 'onOpenChange' | 'children'> {
-  children: (value: { close: () => void }) => JSX.Element
-  button: React.ReactNode
-}
-
-const DrawerControlled = ({ children, button, ...props }: Props) => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>{button}</Button>
-      <Drawer open={open} onOpenChange={setOpen} {...props}>
-        {children({ close: () => setOpen(false) })}
-      </Drawer>
-    </>
-  )
-}

package/playground/index.css

@@ -1,33 +0,0 @@
-@layer theme, base, components, utilities;
-
-@import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/preflight.css' layer(base);
-@import 'tailwindcss/utilities.css' layer(utilities);
-
-/* @import 'tailwindcss'; */
-@config "../tailwind.config.js";
-
-.center {
-  @apply flex items-center justify-center;
-}
-
-.full {
-  @apply h-full w-full;
-}
-
-.image {
-  @apply h-full w-full bg-cover bg-center;
-  background-color: #3d3d3d17;
-}
-
-.quiet {
-  @apply opacity-75;
-}
-
-.quieter {
-  @apply opacity-50;
-}
-
-.all-0 {
-  @apply bottom-0 left-0 right-0 top-0;
-}