@companix/uikit 0.0.1

package/playground/checkbox/index.tsx

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+@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;
+}

package/playground/index.scss

@@ -0,0 +1,270 @@
+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;
+  }
+}