@meduza/ui-kit-2 0.8.5 → 0.8.7

package/dist/utils/BlockContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const BlockContext: React.Context<{
+    lightBox: any;
+}>;
+export declare const BlockProvider: React.Provider<{
+    lightBox: any;
+}>;
+export default BlockContext;

package/dist/utils/DangerousHtml.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type DangerousHtmlProps = {
+    className?: string;
+    html: string;
+    tagName?: keyof JSX.IntrinsicElements;
+};
+declare const DangerousHTML: React.FC<DangerousHtmlProps>;
+export default DangerousHTML;

package/dist/utils/capitalizeFirstLetter.d.ts

@@ -0,0 +1 @@
+export declare const capitalizeFirstLetter: (string: string) => string;

package/dist/utils/converCase.d.ts

@@ -0,0 +1,2 @@
+export declare const toCamel: (s: string) => string;
+export declare const toCapitalize: (s: string) => string;

package/dist/utils/generateGradient.d.ts

@@ -0,0 +1,2 @@
+declare const generateGradient: (color: string, type: string) => string;
+export default generateGradient;

package/dist/utils/getElementPositionRelativeToViewport.d.ts

@@ -0,0 +1,2 @@
+declare const getElementPositionRelativeToViewport: (element: HTMLElement) => number;
+export default getElementPositionRelativeToViewport;

package/dist/utils/makeStyleContext.d.ts

@@ -0,0 +1,3 @@
+import { ClassNames } from './makeClassName';
+declare const makeStyleContext: (classNames: ClassNames, styleContext: string[] | string, styles: Record<string, string>) => ClassNames;
+export default makeStyleContext;

package/dist/utils/pluralize.d.ts

@@ -0,0 +1,2 @@
+declare const pluralize: (number: number, one: string, two: string, five: string) => string;
+export default pluralize;

package/dist/utils/postMessage.d.ts

@@ -0,0 +1,2 @@
+declare const postMessage: (category: string, element: string, action: string) => void;
+export default postMessage;

package/dist/utils/viewportSize.d.ts

@@ -0,0 +1,6 @@
+type viewportSize = {
+    width: number;
+    height: number;
+};
+declare const _default: () => viewportSize;
+export default _default;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.5",
+  "version": "0.8.7",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/ListViewSwitcher/ListViewSwitcher.module.css

@@ -0,0 +1,109 @@
+.root {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+
+  cursor: pointer;
+  user-select: none;
+
+  border-radius: 40px;
+  background-color: #fff;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  visibility: hidden;
+}
+
+.knob {
+  position: relative;
+  z-index: $zIndex-2;
+
+  display: block;
+
+  transition: 0.25s ease-in-out;
+
+  border-radius: 15px;
+  background: #000;
+}
+
+.sm {
+  width: 35px;
+  height: 18px;
+  padding: 2px;
+}
+
+.md {
+  width: 52px;
+  height: 26px;
+  padding: 2px 3px;
+}
+
+.md .knob {
+  width: 22px;
+  height: 22px;
+}
+
+.grid,
+.list {
+  position: absolute;
+
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.grid {
+  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='.5' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3Crect x='6.938' y='7.078' width='5.42' height='5.42' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
+}
+
+.list {
+  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.359' y='.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3Crect x='.359' y='9.5' width='12' height='3' rx='1.044' fill='%23000'/%3E%3C/svg%3E");
+}
+
+.md .input:checked ~ .knob {
+  transform: translateX(24px);
+}
+
+.md .grid,
+.md .list {
+  width: 13px;
+  height: 13px;
+  top: 7px;
+}
+
+.md .grid {
+  left: 10px;
+}
+
+.md .list {
+  right: 10px;
+}
+
+.sm .grid {
+  left: 5px;
+}
+
+.sm .list {
+  right: 5px;
+}
+
+.sm .knob {
+  width: 14px;
+  height: 14px;
+}
+
+.sm .grid,
+.sm .list {
+  width: 8px;
+  height: 8px;
+  top: 5px;
+}
+
+.sm .input:checked ~ .knob {
+  transform: translateX(16px);
+}

package/src/ListViewSwitcher/ListViewSwitcher.stories.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  flex-flow: row wrap;
+
+  gap: 24px;
+}

package/src/ListViewSwitcher/ListViewSwitcher.stories.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { ListViewSwitcher } from '.'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
+import styles from './ListViewSwitcher.stories.module.css'
+
+export default {
+  title: 'Main / ListViewSwitcher',
+  component: ListViewSwitcher,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  const [enabledOne, setEnabledOne] = useState(false)
+  const [enabledTwo, setEnabledTwo] = useState(false)
+  return (
+    <div className={styles.root}>
+      <ListViewSwitcher
+        enabled={enabledOne}
+        size="sm"
+        onChange={(e) => setEnabledOne(e.target.checked)}
+      />
+      <ListViewSwitcher
+        enabled={enabledTwo}
+        size="md"
+        onChange={(e) => setEnabledTwo(e.target.checked)}
+      />
+    </div>
+  )
+}
+
+export const Default: React.FC = () => (
+  <PreviewWrapper theme="dark">
+    <Example />
+  </PreviewWrapper>
+)

package/src/ListViewSwitcher/ListViewSwitcher.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, fireEvent, RenderResult } from '@testing-library/react'
+import { ListViewSwitcher } from '.'
+import { ListViewSwitcherProps } from './ListViewSwitcher.types'
+
+import styles from './Switcher.module.css'
+
+describe('ListViewSwitcher', () => {
+  let props: ListViewSwitcherProps
+
+  const renderComponent = (): RenderResult =>
+    render(<ListViewSwitcher {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const switcher = getByTestId('listViewSwitcher')
+
+    expect(switcher).toHaveClass(styles.root)
+  })
+
+  it('should check on click', () => {
+    let checked = false
+    const onChange = (e): void => (checked = e.target.checked)
+    const renderComponent = (): RenderResult =>
+      render(<ListViewSwitcher onChange={onChange} {...props} />)
+    const { getByTestId } = renderComponent()
+
+    const switcher = getByTestId('listViewSwitcher')
+
+    fireEvent.click(switcher)
+
+    expect(checked).toBe(true)
+  })
+})

package/src/ListViewSwitcher/ListViewSwitcher.types.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface ListViewSwitcherProps {
+  enabled: boolean
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  size?: 'sm' | 'md'
+}

package/src/ListViewSwitcher/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { ListViewSwitcherProps } from './ListViewSwitcher.types'
+import styles from './ListViewSwitcher.module.css'
+import makeClassName from '../utils/makeClassName'
+
+export const ListViewSwitcher: React.FC<ListViewSwitcherProps> = ({
+  enabled,
+  onChange,
+  size = 'md'
+}) => (
+  <label
+    data-testid="listViewSwitcher"
+    className={makeClassName([
+      [styles.root, true],
+      [styles[size], true]
+    ])}
+  >
+    <input
+      className={styles.input}
+      type="checkbox"
+      checked={enabled}
+      onChange={onChange}
+    />
+
+    <span className={styles.knob} />
+
+    <span className={styles.grid} />
+    <span className={styles.list} />
+  </label>
+)

package/src/Switcher/Switcher.module.css

@@ -13,6 +13,8 @@
   cursor: pointer;
 
   user-select: none;
+
+  gap: 6px;
 }
 
 .dark {
@@ -93,31 +95,13 @@
   left: 18px;
 }
 
-.children.left {
-  margin-right: 6px;
-}
-
-.children.right {
-  margin-left: 6px;
-}
-
-/* panel */
-.isInPanel .children {
-
-  color: #999;
-
-  font-size: 13px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-}
-
 /* menu */
 .isInMenu {
   font-weight: normal;
 }
 
-.isInMenu .children {
-  margin-right: 8px;
+.isInMenu {
+  gap: 8px;
 }
 
 .isInMenu .control {
@@ -143,7 +127,6 @@
 
 /* live */
 .isInLive .children {
-
   color: #7f7f7f;
 
   font-size: 13px;

package/src/Switcher/Switcher.stories.module.css

@@ -1,26 +1,8 @@
 .root {
-  display: block;
-}
-
-.preview {
-  display: inline-block;
-  width: 100%;
-  padding: 16px;
-
-  border: 1px #e8e8e8 solid;
-  border-radius: 3px;
-}
-
-.row {
   display: flex;
-  flex-flow: row wrap;
-
-  padding: 15px;
-}
+  flex-flow: column wrap;
 
-.row[data-theme='dark'] {
-  color: #fff;
+  font-size: 16px;
 
-  background: #262626;
-  border-radius: 10px;
+  gap: 24px;
 }

package/src/Switcher/Switcher.stories.tsx

@@ -20,37 +20,19 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <div className={styles.preview}>
-          <Switcher
-            enabled={enabledOne}
-            styleContext="isInPanel"
-            onChange={(e) => setEnabledOne(e.target.checked)}
-          >
-            <span>Показывать по порядку</span>
-          </Switcher>
-        </div>
-        <div className={styles.preview}>
-          <div className={styles.row} data-theme="dark">
-            <Switcher
-              enabled={enabledTwo}
-              styleContext="isInMenu"
-              onChange={(e) => setEnabledTwo(e.target.checked)}
-              theme="dark"
-            >
-              <span>Показывать по порядку</span>
-            </Switcher>
-          </div>
-        </div>
-        <div className={styles.preview}>
-          <Switcher
-            enabled={enabledThree}
-            styleContext="isInLive"
-            onChange={(e) => setEnabledThree(e.target.checked)}
-            childrenPosition="right"
-          >
-            <span>Перевернуть трансляцию</span>
-          </Switcher>
-        </div>
+        <Switcher
+          enabled={enabledOne}
+          styleContext="isInPanel"
+          onChange={(e) => setEnabledOne(e.target.checked)}
+          childrenLeft={<span>Показывать по порядку</span>}
+        />
+
+        <Switcher
+          enabled={enabledThree}
+          styleContext="isInLive"
+          onChange={(e) => setEnabledThree(e.target.checked)}
+          childrenRight={<span>Перевернуть трансляцию</span>}
+        />
       </div>
     </>
   )

package/src/Switcher/Switcher.types.ts

@@ -4,13 +4,11 @@ export type SwitcherStyleContexts = 'isInLive' | 'isInPanel' | 'isInMenu'
 
 export type SwitcherThemes = 'light' | 'dark'
 
-export type SwitcherChildrenPositions = 'left' | 'right'
-
 export interface SwitcherProps {
   enabled: boolean
   styleContext: SwitcherStyleContexts
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   theme?: SwitcherThemes
-  children: JSX.Element[] | JSX.Element
-  childrenPosition?: SwitcherChildrenPositions
+  childrenLeft?: JSX.Element
+  childrenRight?: JSX.Element
 }

package/src/Switcher/index.tsx

@@ -5,11 +5,11 @@ import styles from './Switcher.module.css'
 
 export const Switcher: React.FC<SwitcherProps> = ({
   enabled,
-  children,
-  childrenPosition = 'left',
   onChange,
   styleContext,
-  theme = 'light'
+  theme = 'light',
+  childrenLeft,
+  childrenRight
 }) => (
   <label
     data-testid="switcher"
@@ -19,14 +19,14 @@ export const Switcher: React.FC<SwitcherProps> = ({
       [styles[styleContext], !!styles[styleContext]]
     ])}
   >
-    {children && childrenPosition === 'left' && (
+    {childrenLeft && (
       <div
         className={makeClassName([
           [styles.children, true],
           [styles.left, true]
         ])}
       >
-        {children}
+        {childrenLeft}
       </div>
     )}
     <input
@@ -38,14 +38,14 @@ export const Switcher: React.FC<SwitcherProps> = ({
     <span className={styles.control}>
       <span className={styles.knob} />
     </span>
-    {children && childrenPosition === 'right' && (
+    {childrenRight && (
       <div
         className={makeClassName([
           [styles.children, true],
           [styles.right, true]
         ])}
       >
-        {children}
+        {childrenRight}
       </div>
     )}
   </label>

package/src/_storybook/PreviewWrapper/index.tsx

@@ -17,7 +17,6 @@ export const PreviewWrapper: React.FC<PreviewWrapperProps> = ({
       [styles[theme], !!theme]
     ])}
   >
-    <h2>{theme === 'dark' ? 'Dark theme' : 'Light theme'}</h2>
     {children}
   </div>
 )

package/src/index.tsx

@@ -26,6 +26,7 @@ export * from './HalfBlock'
 export * from './RawHtmlBlock'
 export * from './ImportantLead'
 export * from './ListBlock'
+export * from './ListViewSwitcher'
 export * from './RelatedBlock'
 export * from './RichTitle'
 export * from './SimpleBlock'