@companix/uikit 0.0.2 → 0.0.4

package/playground/index.scss

@@ -1,270 +0,0 @@
-body {
-  background-color: color(display-p3 0.976 0.976 0.984);
-}
-
-// SIMPLE TEST
-
-.box-styles {
-  background: red;
-  color: rgb(255, 255, 255);
-  width: 120px;
-  height: 60px;
-}
-
-// CLASSNAMES USAGE
-
-.enterFrom {
-  opacity: 0;
-}
-
-.enter {
-  transition: opacity;
-  transition-timing-function: linear;
-  transition-duration: 10s;
-}
-
-.enterTo {
-  opacity: 1;
-}
-
-// leave
-
-.leaveFrom {
-  opacity: 1;
-}
-
-.leave {
-  transition: all;
-  transition-timing-function: linear;
-  transition-duration: 5s;
-}
-
-.leaveTo {
-  opacity: 0;
-}
-
-.col-group {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.row-group {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.examples-list {
-  display: flex;
-  flex-direction: column;
-  gap: 60px;
-  padding: 20px 120px;
-}
-
-.spinner-border {
-  animation: none;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.docs-popover-placement-example {
-  display: flex;
-  justify-content: center;
-}
-
-.docs-popover-placement-example .docs-example-grid {
-  display: grid;
-  gap: 10px;
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-template-rows: 1fr 2fr 1fr;
-  justify-content: stretch;
-  margin: 0;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-1 {
-  grid-column: 1/2;
-  grid-row: 1/2;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-2 {
-  grid-column: 2/3;
-  grid-row: 1/2;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-3 {
-  grid-column: 3/4;
-  grid-row: 1/2;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-1 {
-  grid-column: 1/2;
-  grid-row: 2/3;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-2 {
-  grid-column: 2/3;
-  grid-row: 2/3;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-3 {
-  grid-column: 3/4;
-  grid-row: 2/3;
-}
-
-.docs-popover-placement-example .docs-example-grid-3-1 {
-  grid-column: 1/2;
-  grid-row: 3/4;
-}
-
-.docs-popover-placement-example .docs-example-grid-3-2 {
-  grid-column: 2/3;
-  grid-row: 3/4;
-}
-
-.docs-popover-placement-example .docs-example-grid-3-3 {
-  grid-column: 3/4;
-  grid-row: 3/4;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-1 {
-  align-self: end;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-2,
-.docs-popover-placement-example .docs-example-grid-2-1 {
-  align-self: stretch;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-3,
-.docs-popover-placement-example .docs-example-grid-3-1 {
-  align-self: start;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-2,
-.docs-popover-placement-example .docs-example-grid-2-1 {
-  align-self: end;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-2 {
-  align-self: stretch;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-3,
-.docs-popover-placement-example .docs-example-grid-3-2 {
-  align-self: start;
-}
-
-.docs-popover-placement-example .docs-example-grid-1-3,
-.docs-popover-placement-example .docs-example-grid-3-1 {
-  align-self: end;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-3,
-.docs-popover-placement-example .docs-example-grid-3-2 {
-  align-self: stretch;
-}
-
-.docs-popover-placement-example .docs-example-grid-3-3 {
-  align-self: start;
-}
-
-.docs-popover-placement-example .docs-example-grid-2-2 {
-  align-self: center;
-  text-align: center;
-}
-
-.docs-popover-placement-example em {
-  display: inline-block;
-  max-width: 250px;
-}
-
-.bp6-dark .docs-popover-placement-example em {
-  color: #abb3bf;
-}
-
-.docs-popover-placement-example-content .bp6-popover-content {
-  line-height: 2;
-  padding: 10px 20px;
-  text-align: center;
-}
-
-.docs-popover-placement-example-content code {
-  font-weight: 600;
-}
-
-.docs-popover-placement-value-code-block {
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-}
-
-.sample {
-  border: 1px solid #00000024;
-  padding: 28px;
-  border-radius: 10px;
-  background-color: #ffffff;
-  box-shadow: 0px 4px 18px #0000000a, 0px 2.025px 7.84688px rgba(0, 0, 0, 0.027),
-    0px 0.8px 2.925px #00000005, 0px 0.175px 1.04062px rgba(0, 0, 0, 0.013);
-
-  &-name {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 18px;
-  }
-}
-
-.help-tip {
-  margin-left: 6px;
-  margin-top: -2px;
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0.3;
-}
-
-.form-slot {
-  pointer-events: auto;
-  padding: 0px var(--form_space, 0);
-
-  &[data-side='right'] {
-    border-left: var(--form_border);
-    margin-left: var(--form_space, 0);
-  }
-
-  &[data-side='left'] {
-    border-right: var(--form_border);
-    margin-right: var(--form_space, 0);
-  }
-
-  &:hover {
-    svg {
-      color: #858585;
-    }
-  }
-}
-
-.dialog-close {
-  position: absolute;
-  outline: none;
-  top: 14px;
-  right: 14px;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 8px;
-  color: var(--dialog-close-color);
-
-  &:hover {
-    background-color: var(--dialog-close-hover-background);
-  }
-
-  &:active {
-    background-color: var(--dialog-close-active-background);
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-}

package/playground/input/index.tsx

@@ -1,112 +0,0 @@
-import { Icon } from '@/Icon'
-import { Form } from '@/Form'
-import { faEye, faEyeSlash, faSearch } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-const sizes = ['lg', 'md', 'sm'] as const
-
-export const InputsExample = () => {
-  return (
-    <div className="col-group">
-      <div className="row-group">
-        <PasswordInput />
-        <PasswordInput2 />
-        <ChangeSize />
-        <Form
-          fill
-          placeholder="Fullwidth input"
-          leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
-        />
-      </div>
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <div className="flex gap-10">
-        <div className="flex flex-col gap-10">
-          {sizes.map((size) => {
-            return <Form key={`input-size-${size}`} size={size} placeholder={`Input size ${size}`} />
-          })}
-        </div>
-        <div className="flex flex-col gap-10">
-          {sizes.map((size) => {
-            return (
-              <Form
-                key={`input-size-${size}-disabled`}
-                size={size}
-                placeholder={`Input disabled ${size}`}
-                leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
-                disabled
-              />
-            )
-          })}
-        </div>
-        <div className="flex flex-col gap-10">
-          {sizes.map((size) => {
-            return (
-              <Form
-                key={`input-size-${size}-required`}
-                size={size}
-                placeholder={`Input required ${size}`}
-                leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
-                required
-              />
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const PasswordInput = () => {
-  const [state, setState] = useState(false)
-
-  return (
-    <Form
-      placeholder={`Slot right`}
-      rightElement={
-        <div
-          onClick={() => setState((x) => !x)}
-          data-side={'right'}
-          className="form-slot center h-full cursor-pointer"
-        >
-          {state ? <Icon size="xxs" icon={faEye} /> : <Icon size="xxs" icon={faEyeSlash} />}
-        </div>
-      }
-    />
-  )
-}
-
-const PasswordInput2 = () => {
-  return (
-    <Form
-      placeholder={`Slot left`}
-      leftElement={
-        <div data-side={'left'} className="form-slot center h-full gap-6 cursor-pointer">
-          <Icon size="xxs" icon={faEye} />
-        </div>
-      }
-    />
-  )
-}
-
-const ChangeSize = () => {
-  const [value, setValue] = useState('')
-
-  return (
-    <Form
-      placeholder="Dynamic element"
-      value={value}
-      onValueChange={setValue}
-      leftElement={<Icon size="xxs" icon={faSearch} className="quieter form-space-margin" />}
-      rightElement={
-        <div className="form-space-margin flex items-center h-full cursor-pointer">
-          <div
-            className="rounded-md px-4 pointer-events-auto"
-            style={{ backgroundColor: 'rgba(143, 153, 168, .15)' }}
-          >
-            {Math.floor(10000 / Math.max(1, Math.pow(value.length, 2)))}
-          </div>
-        </div>
-      }
-    />
-  )
-}

package/playground/number-inputs/index.tsx

@@ -1,50 +0,0 @@
-import { useState } from 'react'
-import { StepperInput } from '@/Stepper'
-import { NumberInput } from '@/NumberInput'
-
-export const NumberInputs = () => {
-  return (
-    <div className="flex flex-col gap-22" style={{ width: '200px' }}>
-      <div>NumberInputs</div>
-      <div>
-        <NumbInput1 />
-      </div>
-      <div>
-        <NumbInput2 />
-      </div>
-      <div>
-        <NumbInput3 />
-      </div>
-    </div>
-  )
-}
-
-const NumbInput1 = () => {
-  const [value, onChange] = useState(0)
-  return (
-    <div className="flex flex-col">
-      <StepperInput buttons step={0.01} value={value} onChange={onChange} />
-      <div onClick={() => onChange(0)}>set 0</div>
-    </div>
-  )
-}
-
-const NumbInput2 = () => {
-  const [value, onChange] = useState(0)
-
-  return <StepperInput step={1} value={value} onChange={onChange} />
-}
-
-const NumbInput3 = () => {
-  const [value, onChange] = useState<number | null>(0)
-
-  console.log(value)
-
-  return (
-    <div>
-      <NumberInput value={value} onChange={onChange} />
-      <div onClick={() => onChange(1122)}>Set 1122</div>
-      <div onClick={() => onChange(null)}>Set null</div>
-    </div>
-  )
-}

package/playground/popovers/index.tsx

@@ -1,70 +0,0 @@
-import { Button } from '@/Button'
-import { Popover, PopoverProps } from '@/Popover'
-import { useState } from 'react'
-
-export const PopoversExample = () => {
-  const [minimal] = useState(false)
-  const [arrows] = useState(true)
-
-  return (
-    <div className="docs-popover-placement-example">
-      <div className="docs-example-grid">
-        <div className="docs-example-grid-1-1" />
-        <div className="docs-example-grid-1-2">
-          <div style={{ display: 'flex', gap: '10px' }}>
-            <PlacementPopover side="bottom" align="start" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="bottom" align="center" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="bottom" align="end" minimal={minimal} showArrows={arrows} />
-          </div>
-        </div>
-        <div className="docs-example-grid-1-3" />
-        <div className="docs-example-grid-2-1">
-          <div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>
-            <PlacementPopover side="right" align="start" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="right" align="center" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="right" align="end" minimal={minimal} showArrows={arrows} />
-          </div>
-        </div>
-        <div className="docs-example-grid-2-2">
-          <em>Button positions are flipped here so that all popovers open inward.</em>
-        </div>
-        <div className="docs-example-grid-2-3">
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-            <PlacementPopover side="left" align="start" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="left" align="center" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="left" align="end" minimal={minimal} showArrows={arrows} />
-          </div>
-        </div>
-        <div className="docs-example-grid-3-1" />
-        <div className="docs-example-grid-3-2">
-          <div style={{ display: 'flex', gap: '10px' }}>
-            <PlacementPopover side="top" align="start" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="top" align="center" minimal={minimal} showArrows={arrows} />
-            <PlacementPopover side="top" align="end" minimal={minimal} showArrows={arrows} />
-          </div>
-        </div>
-        <div className="docs-example-grid-3-3" />
-      </div>
-    </div>
-  )
-}
-
-const PlacementPopover = (props: Omit<PopoverProps, 'content' | 'children'>) => {
-  return (
-    <Popover
-      {...props}
-      // sideOffset={0}
-
-      content={() => (
-        <div className="p-12">
-          <div>Popover content: {props.align}</div>
-          <div>Popover content: {props.side}</div>
-        </div>
-      )}
-    >
-      <Button fill>
-        {props.side} {props.align}
-      </Button>
-    </Popover>
-  )
-}

package/playground/radio-group/index.tsx

@@ -1,69 +0,0 @@
-import { RadioGroup } from '@/Radio'
-import { useState } from 'react'
-
-export const RadioGroupExample = () => {
-  return (
-    <div className="col-group">
-      <div className="flex gap-24">
-        <RadioGroupControl
-          size="md"
-          options={[
-            { value: 'soup', label: 'Soup with tomatos' },
-            { value: 'salat', label: 'Salat olivie' },
-            { value: 'sandwich', label: 'Sandwich S7 Airlines' }
-          ]}
-        />
-        <RadioGroupControl
-          size="sm"
-          options={[
-            { value: 'soup', label: 'Soup with tomatos' },
-            { value: 'salat', label: 'Salat olivie' },
-            { value: 'sandwich', label: 'Sandwich S7 Airlines' }
-          ]}
-        />
-        <RadioGroupControl
-          size="sm"
-          disabled
-          options={[
-            { value: 'soup', label: 'Soup with tomatos' },
-            { value: 'salat', label: 'Salat olivie' },
-            { value: 'sandwich', label: 'Sandwich S7 Airlines' }
-          ]}
-        />
-      </div>
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <RadioGroupControl
-        options={[
-          { value: 'soup', label: 'Basic plan' },
-          { value: 'salat', label: 'Professional plan' },
-          {
-            value: 'sandwich',
-            label:
-              'This plan includes full access to all features, priority customer support, advanced security options, detailed analytics, and the ability to customize the system to fit internal processes. It is intended for companies that need reliability, scalability, and long-term support across multiple departments.'
-          }
-        ]}
-      />
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <RadioGroupControl
-        required
-        options={[
-          { value: 'soup', label: 'New York' },
-          { value: 'salat', label: 'Beijing' }
-        ]}
-      />
-    </div>
-  )
-}
-
-interface Props<T> {
-  size?: 'sm' | 'md'
-  options: { value: T; label: string }[]
-  disabled?: boolean
-  required?: boolean
-}
-
-const RadioGroupControl = <T extends string>(props: Props<T>) => {
-  const [value, setValue] = useState<null | T>(null)
-
-  return <RadioGroup {...props} value={value} onChange={setValue} />
-}

package/playground/select/index.tsx

@@ -1,72 +0,0 @@
-import { useState } from 'react'
-import { Select } from '@/Select'
-import { Icon } from '@/Icon'
-import { faGift } from '@fortawesome/free-solid-svg-icons'
-
-export const SelectExample = () => {
-  return (
-    <div className="col-group">
-      <div className="row-group">
-        <div style={{ minWidth: '200px', width: '200px' }}>
-          <SelectItem />
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'center', minWidth: '240px', width: '240px' }}>
-          <SelectItem
-            clearButton
-            icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />}
-          />
-        </div>
-        <div style={{ minWidth: 0, width: '100%' }}>
-          <SelectItem fill icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />} />
-        </div>
-      </div>
-      {/* <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <div className="row-group">
-        <div style={{ minWidth: '200px', width: '200px' }}>
-          <SelectItem />
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'center', minWidth: '240px', width: '240px' }}>
-          <SelectItem
-            clearButton
-            icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />}
-          />
-        </div>
-        <div style={{ minWidth: 0, width: '100%' }}>
-          <SelectItem fill icon={<Icon icon={faGift} size="xxs" className="form-space-margin" />} />
-        </div>
-      </div> */}
-    </div>
-  )
-}
-
-interface ItemProps {
-  fill?: boolean
-  clearButton?: boolean
-  icon?: React.ReactNode
-  size?: 'sm' | 'md' | 'lg'
-}
-
-const SelectItem = ({ fill, clearButton, icon, size }: ItemProps) => {
-  const [value, onChange] = useState<null | number>(null)
-
-  return (
-    <Select<number>
-      value={value}
-      onChange={onChange}
-      leftElement={icon}
-      fill={fill}
-      size={size}
-      clearButton={clearButton}
-      placeholder="Не выбрано"
-      options={[
-        { value: 1, title: 'Vladimir Putin' },
-        { value: 2, title: 'Donald Trump' },
-        { value: 3, title: 'Sergey Lavrov' },
-        ...new Array(10).fill(0).map((_, i) => ({
-          title: `Value ${i + 4}`,
-          value: i + 4
-        }))
-      ]}
-    />
-  )
-}

package/playground/select-tags/index.tsx

@@ -1,36 +0,0 @@
-import { SelectTags } from '@/SelectTags'
-import { useState } from 'react'
-
-export const SelectTagsExample = () => {
-  return (
-    <div className="col-group">
-      <div className="row-group">
-        <div style={{ maxWidth: '380px' }}>
-          <SelectTagsControl />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const SelectTagsControl = ({ fill }: { fill?: boolean } = {}) => {
-  const [value, onChange] = useState<number[]>([])
-
-  return (
-    <SelectTags<number>
-      value={value}
-      onChange={onChange}
-      fill={fill}
-      placeholder="Выберите варианты"
-      options={[
-        { value: 1, title: 'Vladimir Putin' },
-        { value: 2, title: 'Donald Trump' },
-        { value: 3, title: 'Sergey Lavrov' },
-        ...new Array(10).fill(0).map((_, i) => ({
-          title: `Value ${i + 4}`,
-          value: i + 4
-        }))
-      ]}
-    />
-  )
-}

package/playground/styles.scss

@@ -1,2 +0,0 @@
-@use '../themes/classic/classic.scss';
-@use '../src/index.scss';