[DS-38] feat: move all dev stuff from lib to dev dir

README.md

@@ -124,8 +124,8 @@ The example is based on the `Button` component.
 ```tsx
 import React from 'react';
 import { IconPlus } from 'static/icons';
-import { Sizes, StateMap, Priorities } from 'lib/state-map';
-import { block } from 'lib/block';
+import { Sizes, StateMap, Priorities } from 'dev/state-map';
+import { block } from 'dev/block';
 
 import { Button } from '../index';
 

gatsby-node.js

@@ -4,6 +4,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
+        dev: path.resolve(__dirname, './src/dev/'),
         lib: path.resolve(__dirname, './src/lib/'),
         static: path.resolve(__dirname, './src/static/'),
         ui: path.resolve(__dirname, './src/woly/'),

src/lib/global.ts → src/dev/global.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
+import { createPalette } from 'lib/palette';
 
-import { createPalette } from './palette';
 import { systemUi } from './font-stacks';
 
 export const Global = styled.div`

src/lib/map-generation.tsx → src/dev/map-generation.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import styled, { StyledComponent } from 'styled-components';
-import { Global } from 'lib/global';
+import { Global } from 'dev/global';
 import { Grid, Heading } from 'ui';
+import { useUniqueID } from 'lib/hooks';
 
 import { ConfiguratorName, Configurators } from './configurators';
-import { useUniqueID } from './hooks/use-unique-id';
 
 export type SizeProps = 'N' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'H';
 

src/lib/playground.tsx → src/dev/playground.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import styled from 'styled-components';
 import React, { useRef } from 'react';
+import { useUniqueID } from 'lib/hooks';
 
 import { ConfiguratorName, Configurators } from './configurators';
 import { Global } from './global';
 import { block } from './block';
-import { useUniqueID } from './hooks/use-unique-id';
 
 export { block };
 

src/lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useForceUpdate } from './use-force-update';
+export { useSyncHeight } from './use-sync-height';
+export { useUniqueID } from './use-unique-id';

src/lib/keyboard/index.ts

@@ -0,0 +1,3 @@
+export * from './keyboard-event';
+export * from './list-handlers';
+export * from './select-handlers';

src/upload/molecules/button-uploader/usage.mdx

@@ -1,5 +1,5 @@
 import {Button} from 'ui'
-import {Playground, StateEvent,FormBlock} from 'lib/playground';
+import {Playground, StateEvent,FormBlock} from 'dev/playground';
 import {IconPlus} from 'static/icons';
 import {ButtonUploader} from './index';
 

src/upload/molecules/drag-uploader/usage.mdx

@@ -1,5 +1,5 @@
 import {Button} from 'ui'
-import {Playground, StateEvent,FormBlock} from 'lib/playground';
+import {Playground, StateEvent,FormBlock} from 'dev/playground';
 import {DragUploader} from './index';
 
 # DragUploader

src/woly/atoms/avatar/usage.mdx

@@ -1,5 +1,5 @@
 import {Avatar} from 'ui'
-import {Playground, block} from 'lib/playground'
+import {Playground, block} from 'dev/playground'
 
 `Avatar` shows user avatar
 

src/woly/atoms/backdrop/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground, State} from 'lib/playground'
+import {Playground, State} from 'dev/playground'
 import {Button, Field, Input, Modal} from 'ui'
 
 `Backdrop` is a dark layer that covers full screen. It can be used in Modal windows or Aside menu panel.

src/woly/atoms/box/usage.mdx

@@ -1,6 +1,6 @@
 import {Box, BoxVertical} from './index';
 import {Text, Tooltip, Button, Accordion, TextArea, Input, Checkbox} from 'ui';
-import {block, Playground, State} from 'lib/playground';
+import {block, Playground, State} from 'dev/playground';
 import {IconInfo} from 'static/icons';
 
 `Box` and `BoxVertical` are wrapper components, that add a box model to elements that don't have it.

src/woly/atoms/button-icon/state-props.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonIcon } from 'ui';
-import { GenerateMap, SizeProps } from 'lib/map-generation';
+import { GenerateMap, SizeProps } from 'dev/map-generation';
 import { IconSearch } from 'static/icons';
 
 interface ComponentProps {

src/woly/atoms/button-icon/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground} from 'lib/playground'
+import {Playground} from 'dev/playground'
 import {IconEyeOpened, IconSearch} from 'static/icons';
 import {ButtonIcon} from 'ui';
 

src/woly/atoms/button/__screenshot-test__/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconPlus } from 'static/icons';
-import { Priorities, Sizes, StateMap } from 'lib/state-map';
-import { block } from 'lib/block';
+import { Priorities, Sizes, StateMap } from 'dev/state-map';
+import { block } from 'dev/block';
 
 import { Button } from '../index';
 

src/woly/atoms/button/state-props.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import * as React from 'react';
-import { GenerateMap } from 'lib/map-generation';
+import { GenerateMap } from 'dev/map-generation';
 import { IconSearch } from 'static/icons';
 
 import { Button } from '.';

src/woly/atoms/button/usage.mdx

@@ -1,5 +1,5 @@
 import {Button} from './index'
-import {block, Playground} from 'lib/playground'
+import {block, Playground} from 'dev/playground'
 import {IconPlus, IconSearch} from 'static/icons';
 
 `Button` allows users to take actions and make choices with a single tap.

src/woly/atoms/chip/__screenshot-test__/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconClose } from 'static/icons';
-import { Priorities, Sizes, StateMap } from 'lib/state-map';
-import { block } from 'lib/block';
+import { Priorities, Sizes, StateMap } from 'dev/state-map';
+import { block } from 'dev/block';
 
 import { ButtonIcon } from '../../button-icon';
 import { Chip } from '..';

src/woly/atoms/chip/state-props.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonIcon, Chip } from 'ui';
-import { GenerateMap, SizeBlock, SizeProps } from 'lib/map-generation';
+import { GenerateMap, SizeBlock, SizeProps } from 'dev/map-generation';
 import { IconSearch } from 'static/icons';
 
 interface ChipProps {

src/woly/atoms/chip/usage.mdx

@@ -1,6 +1,6 @@
 import {ButtonIcon, Chip} from 'ui';
 import {IconClose, IconPlus} from 'static/icons';
-import {block, Playground} from 'lib/playground'
+import {block, Playground} from 'dev/playground'
 
 `Chip` is used for categorizing or markup.
 Chips allow users to enter information, make selections, filter content, or trigger actions.

src/woly/atoms/header-panel/usage.mdx

@@ -1,4 +1,4 @@
-import {block, FormBlock, Playground, State} from 'lib/playground'
+import {block, FormBlock, Playground, State} from 'dev/playground'
 import {Button, HeaderPanel, Input, Label, Surface} from 'ui'
 
 `HeaderPanel` is a navigation component that displays information and actions relating to the current screen.

src/woly/atoms/heading/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground} from 'lib/playground'
+import {Playground} from 'dev/playground'
 import {Heading} from './index';
 
 Heading component is used as a header of page.

src/woly/atoms/icon-box/usage.mdx

@@ -1,6 +1,6 @@
 import { IconBox, Box, Tooltip, Text, Input } from 'ui';
 import {IconClose, IconInfo} from 'static/icons';
-import {block, Playground} from 'lib/playground';
+import {block, Playground} from 'dev/playground';
 
 ### Example
 

src/woly/atoms/input/state-props.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GenerateMap, SizeBlock, SizeProps } from 'lib/map-generation';
+import { GenerateMap, SizeBlock, SizeProps } from 'dev/map-generation';
 import { IconSearch } from 'static/icons';
 
 import { Input } from '.';

src/woly/atoms/input/usage.mdx

@@ -1,7 +1,7 @@
 import {ButtonIcon, Input} from 'ui';
 import {IconInfo} from 'static/icons';
 
-import {block, Form, Playground} from 'lib/playground'
+import {block, Form, Playground} from 'dev/playground'
 
 `Input` is a field to accept data from the user. Input is used to create form fields that accept user input.
 They typically appear in forms and dialogs.

src/woly/atoms/label/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground} from 'lib/playground'
+import {Playground} from 'dev/playground'
 import {Label} from 'ui';
 
 The Label component lets you add captions for other elements in your project, such as other UI components that don't have their own labels.

src/woly/atoms/list/usage.mdx

@@ -1,4 +1,4 @@
-import {block, Playground, State} from 'lib/playground'
+import {block, Playground, State} from 'dev/playground'
 import {Button, Checkbox, Input, ListContainer, ListItem, Surface} from 'ui';
 import {IconInfo} from 'static/icons';
 

src/woly/atoms/loader/example.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ListContainer, ListItem } from 'ui';
-import { StateCallback } from 'lib/playground';
+import { StateCallback } from 'dev/playground';
 
 export const loadUsers = async ({ value, change }: StateCallback) => {
   change({ ...value, loading: true });

src/woly/atoms/loader/usage.mdx

@@ -1,5 +1,5 @@
 import {Loader, Button, Text} from 'ui';
-import {Playground, State, StateEvent} from 'lib/playground';
+import {Playground, State, StateEvent} from 'dev/playground';
 import {loadUsers, UsersList} from './example';
 
 `Loader` component is used when retrieving data or performing slow computations and helps to notify users that loading is underway.

src/woly/atoms/separator/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground} from 'lib/playground'
+import {Playground} from 'dev/playground'
 import {Heading, Input, Separator} from 'ui'
 
 `Sepatator` is a line that divides blocks or content.

src/woly/atoms/surface/usage.mdx

@@ -6,7 +6,7 @@ import {
   Menu,
   Playground,
   State
-} from 'lib/playground'
+} from 'dev/playground'
 import {Button, ButtonIcon, Input, Label, Surface, Popover, ListContainer, ListItem, Text} from 'ui';
 import {IconClose, Threebars} from 'static/icons';
 

src/woly/atoms/table/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground} from 'lib/playground'
+import {Playground} from 'dev/playground'
 import {Table, Tbody, Td, Th, Thead, Tr} from 'ui'
 
 export const tableHead = [

src/woly/atoms/text-area/usage.mdx

@@ -1,5 +1,5 @@
 import {TextArea} from 'ui';
-import {block, Playground} from 'lib/playground';
+import {block, Playground} from 'dev/playground';
 
 `TextArea` defines a multi-line text input control.
 

src/woly/atoms/text/usage.mdx

@@ -1,4 +1,4 @@
-import {Line, Playground} from 'lib/playground'
+import {Line, Playground} from 'dev/playground'
 import {Input, Text, TextArea} from 'ui';
 
 Text component is used as a simple text or a hint/error message for Input or TextArea components.

src/woly/molecules/accordion/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground} from 'lib/playground'
+import {Playground} from 'dev/playground'
 import {
   Accordion,
   Field,

src/woly/molecules/checkbox/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { IconCheckFilled, IconFilledUnchecked } from 'static/icons';
-import { Priority, keyboardEventHandle } from 'lib';
+import { Priority } from 'lib/types';
 import { boxInline } from 'ui/elements/box';
+import { keyboardEventHandle } from 'lib/keyboard';
 
 interface CheckboxProps {
   className?: string;

src/woly/molecules/checkbox/usage.mdx

@@ -1,5 +1,5 @@
 import {Checkbox} from 'ui';
-import {Playground, State} from 'lib/playground'
+import {Playground, State} from 'dev/playground'
 
 Checkboxes allow you to setup selectable options for your users - either to toggle a single setting on or off, or to allow for multiple choices.
 

src/woly/molecules/field/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground, State} from 'lib/playground';
+import {Playground, State} from 'dev/playground';
 import {Checkbox, Field, Input, InputPassword, Switch, TextArea} from 'ui'
 import {IconEyeClosed, IconEyeOpened} from 'static/icons';
 

src/woly/molecules/input-password/__screenshot-test__/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Priorities, Sizes, StateMap } from 'lib/state-map';
-import { block } from 'lib/block';
+import { Priorities, Sizes, StateMap } from 'dev/state-map';
+import { block } from 'dev/block';
 
 import { InputPassword } from '..';
 

src/woly/molecules/input-password/usage.mdx

@@ -1,5 +1,5 @@
 import {InputPassword} from './index';
-import {block, Playground, State} from 'lib/playground';
+import {block, Playground, State} from 'dev/playground';
 
 `InputPassword` provide a way for the user to securely enter a password
 The component includes a button-icon that toggle to hide and show the

src/woly/molecules/modal/usage.mdx

@@ -1,4 +1,4 @@
-import {Playground, State} from 'lib/playground'
+import {Playground, State} from 'dev/playground'
 import {Button, Field, Input, Modal, Checkbox} from 'ui';
 import {IconSearch} from 'static/icons';
 

src/woly/molecules/notification/usage.mdx

@@ -1,6 +1,6 @@
 import { Notification} from './index';
 import { Button } from 'ui';
-import { Playground, block, StateEvent, State } from 'lib/playground';
+import { Playground, block, StateEvent, State } from 'dev/playground';
 
 `Notification` display the notification message globaly.
 

src/woly/molecules/popover/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 import { Surface } from 'ui/atoms';
-import { positionRelativeGet } from 'lib';
+import { positionRelativeGet } from 'lib/position-relative';
 
 interface Props {
   className?: string;

src/woly/molecules/popover/usage.mdx

@@ -1,4 +1,4 @@
-import {block, Playground} from 'lib/playground'
+import {block, Playground} from 'dev/playground'
 import {Button, ButtonIcon, ListContainer, ListItem, Popover} from 'ui';
 import {IconSearch, IconInfo} from 'static/icons';
 

src/woly/molecules/radio-button/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
-import { keyboardEventHandle } from 'lib';
+import { keyboardEventHandle } from 'lib/keyboard';
 
 interface RadioButtonProps {
   className?: string;

src/woly/molecules/radio-button/usage.mdx

@@ -1,5 +1,5 @@
 import {RadioButton} from 'ui';
-import {Playground, State} from 'lib/playground';
+import {Playground, State} from 'dev/playground';
 
 The `RadioButton` component lets you add a radio button and assign it to a radio group.
 Users can select only one radio button at a time within a radio group.

src/woly/molecules/select/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 import { box } from 'ui/elements/box';
-import { keyHandlerGet, keyboardEventHandle } from 'lib';
+import { keyHandlerGet, keyboardEventHandle } from 'lib/keyboard';
 
 interface SelectOptionProps {
   children: React.ReactNode;

src/woly/molecules/select/usage.mdx

@@ -1,5 +1,5 @@
 import {Select} from 'ui';
-import {Playground, StateEvent} from 'lib/playground';
+import {Playground, StateEvent} from 'dev/playground';
 import {IconArrowDown} from 'static/icons';
 
 Select is a type of input that is used in forms,

src/woly/molecules/switch/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
-import { keyboardEventHandle } from 'lib';
+import { keyboardEventHandle } from 'lib/keyboard';
 
 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;