From f82c0838f67f008c42f2ba985b355d5efa2da6ee Mon Sep 17 00:00:00 2001 From: Dmitry Date: Wed, 28 Aug 2024 13:10:28 +0300 Subject: [PATCH 1/7] fix: formatter --- generators/icons/src/svgr.ts | 5 ++++- .../style-generators/appearance.style-generator.ts | 10 ++++++---- ui-admin/design/src/index.ts | 2 +- ui-admin/icons/svgr.ts | 4 ++-- .../src/placeholder-link/placeholder-link.css.ts | 2 +- ui-admin/upload/src/upload.component.tsx | 6 +++--- .../use-addon-pagination/use-addon-pagination.hook.ts | 4 ++-- ui-parts/progress/src/circle/circle.utils.ts | 4 +++- ui-parts/progress/src/line/line.component.tsx | 9 +++++---- ui-parts/switch/src/handle/handle.component.tsx | 11 +++++------ ui-parts/switch/src/hooks/use-keyboard.ts | 5 ++++- utils/use-popover/src/use-popover.hook.ts | 6 +++++- utils/use-select/src/use-select.hook.tsx | 5 +++-- 13 files changed, 44 insertions(+), 29 deletions(-) diff --git a/generators/icons/src/svgr.ts b/generators/icons/src/svgr.ts index 8af6671d..123b77d6 100644 --- a/generators/icons/src/svgr.ts +++ b/generators/icons/src/svgr.ts @@ -35,7 +35,10 @@ const read = (files: Array) => })) ) -const compile = (icons: Array<{ name: string, source: string }>, replacements: Record) => +const compile = ( + icons: Array<{ name: string; source: string }>, + replacements: Record +) => Promise.all( icons.map(async (icon) => ({ name: icon.name, diff --git a/generators/input/src/style-generators/appearance.style-generator.ts b/generators/input/src/style-generators/appearance.style-generator.ts index 6cf996da..1b9de2e7 100644 --- a/generators/input/src/style-generators/appearance.style-generator.ts +++ b/generators/input/src/style-generators/appearance.style-generator.ts @@ -1,10 +1,12 @@ -import { pretty } from '@atls-ui-generators/utils' -import { getStylesName } from '@atls-ui-generators/utils' -import { writeFileSync } from 'fs' +import { writeFileSync } from 'fs' + +import { pretty } from '@atls-ui-generators/utils' +import { getStylesName } from '@atls-ui-generators/utils' import { InputColorSchemes } from '../input-generator.interfaces.js' -const getAppearanceStylesName = (variant: string, state: string) => getStylesName('appearance', variant, state) +const getAppearanceStylesName = (variant: string, state: string) => + getStylesName('appearance', variant, state) export class InputAppearanceStyleGenerator { readonly requiredImports = [ diff --git a/ui-admin/design/src/index.ts b/ui-admin/design/src/index.ts index 19edc155..e572e069 100644 --- a/ui-admin/design/src/index.ts +++ b/ui-admin/design/src/index.ts @@ -1,5 +1,5 @@ +import cors from 'cors' import express from 'express' -import cors from 'cors' const app = express() const port = 3000 diff --git a/ui-admin/icons/svgr.ts b/ui-admin/icons/svgr.ts index 8a39fbbc..65b8b1e6 100644 --- a/ui-admin/icons/svgr.ts +++ b/ui-admin/icons/svgr.ts @@ -36,7 +36,7 @@ const read = (files: Array) => })) ) -const compile = (icons: Array<{ filename: string, name: string, source: string }>) => +const compile = (icons: Array<{ filename: string; name: string; source: string }>) => Promise.all( icons.map(async (icon) => ({ filename: icon.filename, @@ -53,7 +53,7 @@ const compile = (icons: Array<{ filename: string, name: string, source: string } })) ) -const save = async (sources: Array<{ filename: string, code: string }>) => +const save = async (sources: Array<{ filename: string; code: string }>) => Promise.all( sources.map((source) => fs.writeFileAsync( diff --git a/ui-admin/upload/src/placeholder-link/placeholder-link.css.ts b/ui-admin/upload/src/placeholder-link/placeholder-link.css.ts index 1d6245ae..2569a357 100644 --- a/ui-admin/upload/src/placeholder-link/placeholder-link.css.ts +++ b/ui-admin/upload/src/placeholder-link/placeholder-link.css.ts @@ -4,7 +4,7 @@ import { vars } from '@atls-ui-admin/theme' export const basePlaceholderLinkStyles = style({ padding: `${vars.space.g8} ${vars.space.zero}`, -// @ts-expect-error index + // @ts-expect-error index color: vars.colors['text.blue'], textDecoration: 'underline', fontFamily: vars.fonts.primary, diff --git a/ui-admin/upload/src/upload.component.tsx b/ui-admin/upload/src/upload.component.tsx index 455e2106..360c9e28 100644 --- a/ui-admin/upload/src/upload.component.tsx +++ b/ui-admin/upload/src/upload.component.tsx @@ -7,9 +7,9 @@ import { useEffect } from 'react' import { useDropzone } from 'react-dropzone' import React from 'react' -import { Container } from './container/index.js' -import { Placeholder } from './placeholder/index.js' -import { useUpload } from './use-upload/index.js' +import { Container } from './container/index.js' +import { Placeholder } from './placeholder/index.js' +import { useUpload } from './use-upload/index.js' interface UploadProps { accept?: Record diff --git a/ui-parts/carousel/src/hooks/use-addon-pagination/use-addon-pagination.hook.ts b/ui-parts/carousel/src/hooks/use-addon-pagination/use-addon-pagination.hook.ts index 9259e777..6e29e07e 100644 --- a/ui-parts/carousel/src/hooks/use-addon-pagination/use-addon-pagination.hook.ts +++ b/ui-parts/carousel/src/hooks/use-addon-pagination/use-addon-pagination.hook.ts @@ -1,5 +1,5 @@ -import { createElement } from 'react' -import { useCallback } from 'react' +import { createElement } from 'react' +import { useCallback } from 'react' import { AddonInputOptions } from '../use-carousel/index.js' import { UseAddonPaginationResult } from './use-addon-pagination.interfaces.js' diff --git a/ui-parts/progress/src/circle/circle.utils.ts b/ui-parts/progress/src/circle/circle.utils.ts index 630160f4..2201033e 100644 --- a/ui-parts/progress/src/circle/circle.utils.ts +++ b/ui-parts/progress/src/circle/circle.utils.ts @@ -1,4 +1,6 @@ -export const toArray = (symArray: Array | string | number): Array => (Array.isArray(symArray) ? symArray : [symArray]) +export const toArray = ( + symArray: Array | string | number +): Array => (Array.isArray(symArray) ? symArray : [symArray]) export const getGradientId = (strokeColor: Array | string) => { const id: string[] = [] diff --git a/ui-parts/progress/src/line/line.component.tsx b/ui-parts/progress/src/line/line.component.tsx index f35f00fa..fc4bbac4 100644 --- a/ui-parts/progress/src/line/line.component.tsx +++ b/ui-parts/progress/src/line/line.component.tsx @@ -43,14 +43,15 @@ export const Line: FunctionComponent = ({ trailColor, strokeWeight = 8, }) => { - // @ts-expect-error any - const getThemeColor = (color: Array | string) => (vars.colors && vars.colors[color]) || color + const getThemeColor = (color: Array | string) => + // @ts-expect-error any + (vars.colors && vars.colors[color]) || color const percentList = Array.isArray(percent) ? percent : [percent] const strokeColorList = Array.isArray(strokeColor) ? getThemeColor(strokeColor) - // @ts-expect-error types mismatch - : [getThemeColor(strokeColor)] + : // @ts-expect-error types mismatch + [getThemeColor(strokeColor)] const [keysList, setKeysList] = useState([]) const getKey = (index: number) => { diff --git a/ui-parts/switch/src/handle/handle.component.tsx b/ui-parts/switch/src/handle/handle.component.tsx index bed2c405..434c0c14 100644 --- a/ui-parts/switch/src/handle/handle.component.tsx +++ b/ui-parts/switch/src/handle/handle.component.tsx @@ -1,11 +1,10 @@ -import { clsx } from 'clsx' -import { RefObject } from 'react' -import { FC } from 'react' +import { FC } from 'react' import { PropsWithChildren } from 'react' -import React from 'react' +import { clsx } from 'clsx' +import React from 'react' -import { baseHandleStyles } from './handle.css.js' -import { handleSprinkles } from './handle.css.js' +import { baseHandleStyles } from './handle.css.js' +import { handleSprinkles } from './handle.css.js' export const Handle: FC = ({ children, ...props }) => { const { className, style, otherProps } = handleSprinkles(props) diff --git a/ui-parts/switch/src/hooks/use-keyboard.ts b/ui-parts/switch/src/hooks/use-keyboard.ts index 106bf04e..f8fc642a 100644 --- a/ui-parts/switch/src/hooks/use-keyboard.ts +++ b/ui-parts/switch/src/hooks/use-keyboard.ts @@ -2,7 +2,10 @@ import { KeyboardEventHandler } from 'react' import { RefObject } from 'react' import { useEffect } from 'react' -export const useKeyboard = (node: RefObject, setChecked: (value: boolean) => void) => { +export const useKeyboard = ( + node: RefObject, + setChecked: (value: boolean) => void +) => { useEffect(() => { const onKeyDownHandler: KeyboardEventHandler = ({ key }) => { if (key === 'ArrowLeft') { diff --git a/utils/use-popover/src/use-popover.hook.ts b/utils/use-popover/src/use-popover.hook.ts index 4e6c336c..da73826f 100644 --- a/utils/use-popover/src/use-popover.hook.ts +++ b/utils/use-popover/src/use-popover.hook.ts @@ -3,7 +3,11 @@ import { PlacementType } from 'react-laag/dist/PlacementType.js' import { useState } from 'react' import { useLayer } from 'react-laag' -export const usePopover = (placement: PlacementType, offset: number = 9, trigger: 'click' | 'hover' = 'click') => { +export const usePopover = ( + placement: PlacementType, + offset: number = 9, + trigger: 'click' | 'hover' = 'click' +) => { const [isOpen, setIsOpen] = useState(false) const close = () => setIsOpen(false) diff --git a/utils/use-select/src/use-select.hook.tsx b/utils/use-select/src/use-select.hook.tsx index 2526cfaf..e7209296 100644 --- a/utils/use-select/src/use-select.hook.tsx +++ b/utils/use-select/src/use-select.hook.tsx @@ -1,6 +1,6 @@ import { AnimatePresence } from 'framer-motion' -import { useSelect as useDownshiftSelect } from 'downshift' import { ReactNode } from 'react' +import { useSelect as useDownshiftSelect } from 'downshift' import { useEffect } from 'react' import { useLayer } from 'react-laag' import React from 'react' @@ -34,7 +34,8 @@ const useSelect = ({ items, onChange, placement = 'bottom-center', ...props }: U triggerBounds, } const getMenuItemProps = (item: string, index: number) => getItemProps({ item, index }) - const renderMenu = (menu: ReactNode) => renderLayer({isOpen && menu}) + const renderMenu = (menu: ReactNode) => + renderLayer({isOpen && menu}) return { labelProps, From a25cb8256c0243b84188e568556fbc67a1c2bc77 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Wed, 28 Aug 2024 13:11:11 +0300 Subject: [PATCH 2/7] fix: @atls-ui-parts/design build --- ui-parts/design/package.json | 20 ++++++++++---------- ui-parts/design/{server.js => src/index.ts} | 8 +------- 2 files changed, 11 insertions(+), 17 deletions(-) rename ui-parts/design/{server.js => src/index.ts} (70%) diff --git a/ui-parts/design/package.json b/ui-parts/design/package.json index ee361ae6..6b3ed6cc 100644 --- a/ui-parts/design/package.json +++ b/ui-parts/design/package.json @@ -5,18 +5,11 @@ "license": "BSD-3-Clause", "type": "module", "scripts": { - "build": "storybook build --config-dir ./src -o dist --quiet", + "build": "storybook build --config-dir ./src -o dist --quiet && run build:server", + "build:server": "yarn service build", "dev": "storybook dev --config-dir ./src -p 3001", "prepack": "run build", - "start": "node server.js" - }, - "dependencies": { - "@vanilla-extract/css": "1.15.3", - "@vanilla-extract/dynamic": "2.1.1", - "cors": "2.8.5", - "express": "4.19.2", - "react": "18.2.0", - "react-dom": "18.2.0" + "start": "node dist/index.js" }, "devDependencies": { "@atls-ui-parts/theme": "workspace:*", @@ -31,11 +24,18 @@ "@storybook/react-webpack5": "8.1.11", "@storybook/test": "8.1.11", "@storybook/types": "8.1.11", + "@types/express": "4.17.21", "@types/react": "18.2.48", "@types/react-dom": "18.2.18", + "@vanilla-extract/css": "1.15.3", + "@vanilla-extract/dynamic": "2.1.1", "@vanilla-extract/webpack-plugin": "patch:@vanilla-extract/webpack-plugin@npm%3A2.3.11#~/.yarn/patches/@vanilla-extract-webpack-plugin-npm-2.3.11-96bc4d2d50.patch", + "cors": "2.8.5", "css-loader": "7.1.2", + "express": "4.19.2", "mini-css-extract-plugin": "2.9.0", + "react": "18.2.0", + "react-dom": "18.2.0", "storybook": "8.1.11", "style-loader": "4.0.0", "webpack": "5.92.1" diff --git a/ui-parts/design/server.js b/ui-parts/design/src/index.ts similarity index 70% rename from ui-parts/design/server.js rename to ui-parts/design/src/index.ts index c1abf6af..85726e60 100644 --- a/ui-parts/design/server.js +++ b/ui-parts/design/src/index.ts @@ -1,15 +1,9 @@ import express from 'express' -import cors from 'cors' const app = express() + const port = 3000 -app.use( - cors({ - credentials: true, - origin: true, - }) -) app.use(express.static('dist')) app.listen(port, () => { From fdbe40ead4e78ee4e6831b1f0c72e6d18c4e4858 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Thu, 29 Aug 2024 06:28:38 +0300 Subject: [PATCH 3/7] fix: linter and typecheck --- .pnp.cjs | 1 + generators/button/src/generator.ts | 6 +- .../appearance.style-generator.ts | 98 +++++++++---------- .../generate-button-appearance-styles.test.ts | 4 +- generators/icons/src/generator.ts | 4 +- .../icons/src/get-color-replacement.util.ts | 4 +- generators/icons/src/svgr.ts | 35 ++++--- generators/input/src/generator.ts | 6 +- .../appearance.style-generator.ts | 82 ++++++++-------- .../generate-input-appearance-styles.test.ts | 4 +- generators/locales/src/generator.ts | 4 +- .../merge-locales/merge-locales.interfaces.ts | 2 +- .../src/merge-locales/merge-locales.ts | 12 +-- .../process-directory.interfaces.ts | 2 +- .../process-directory/process-directory.ts | 13 +-- .../remove-empty-locale.interfaces.ts | 2 +- .../remove-empty-locale.ts | 14 +-- generators/utils/src/get-styles-name.util.ts | 2 +- generators/utils/src/pretty.util.ts | 4 +- ui-admin/button/src/button.component.tsx | 23 +++-- ui-admin/button/src/button.stories.tsx | 11 ++- ui-admin/design/src/main.ts | 5 +- ui-admin/design/src/preview.tsx | 2 +- ui-admin/icon/src/icon.component.tsx | 6 +- ui-admin/icon/src/icon.interfaces.ts | 2 +- ui-admin/icons/src/bag.icon.tsx | 9 +- ui-admin/icons/src/chart.icon.tsx | 9 +- ui-admin/icons/src/check.icon.tsx | 9 +- ui-admin/icons/src/close.icon.tsx | 9 +- ui-admin/icons/src/drag.icon.tsx | 9 +- ui-admin/icons/src/loading.icon.tsx | 9 +- ui-admin/icons/src/logo.icon.tsx | 9 +- ui-admin/icons/src/pencil.icon.tsx | 9 +- ui-admin/icons/src/ruby.icon.tsx | 9 +- ui-admin/icons/src/trash.icon.tsx | 9 +- ui-admin/icons/src/upload.icon.tsx | 9 +- ui-admin/icons/src/user.icon.tsx | 9 +- ui-admin/icons/src/users.icon.tsx | 9 +- ui-admin/icons/svgr.ts | 24 +++-- ui-admin/layout/src/box/box.component.tsx | 11 ++- ui-admin/layout/src/box/box.interfaces.ts | 4 +- .../layout/src/column/column.component.tsx | 9 +- ui-admin/layout/src/grid/grid.component.tsx | 11 ++- ui-admin/layout/src/grid/grid.interfaces.ts | 4 +- .../layout/src/layout/layout.component.tsx | 11 ++- .../layout/src/layout/layout.interfaces.ts | 4 +- ui-admin/layout/src/row/row.component.tsx | 9 +- ui-admin/text/src/text.stories.tsx | 30 +++--- ui-admin/text/src/text/text.component.tsx | 11 ++- ui-admin/text/src/text/text.interfaces.ts | 4 +- ui-admin/theme/src/theme.provider.tsx | 5 +- ui-admin/theme/src/theme/dark/borders.ts | 2 +- ui-admin/theme/src/theme/dark/colors.ts | 2 +- ui-admin/theme/src/theme/dark/font-sizes.ts | 2 +- ui-admin/theme/src/theme/dark/font-weights.ts | 2 +- ui-admin/theme/src/theme/dark/fonts.css.ts | 4 +- ui-admin/theme/src/theme/dark/line-heights.ts | 2 +- ui-admin/theme/src/theme/dark/radii.ts | 2 +- ui-admin/theme/src/theme/dark/shadows.ts | 2 +- ui-admin/theme/src/theme/dark/space.ts | 2 +- ui-admin/theme/src/theme/light/borders.ts | 2 +- ui-admin/theme/src/theme/light/font-sizes.ts | 2 +- .../theme/src/theme/light/font-weights.ts | 2 +- ui-admin/theme/src/theme/light/fonts.css.ts | 4 +- .../theme/src/theme/light/line-heights.ts | 2 +- ui-admin/theme/src/theme/light/radii.ts | 2 +- ui-admin/theme/src/theme/light/shadows.ts | 2 +- ui-admin/theme/src/theme/light/space.ts | 2 +- .../src/container/container.component.tsx | 3 +- .../src/container/container.interfaces.ts | 2 +- .../src/dropzone-placeholder.component.tsx | 9 +- .../placeholder-accept.component.tsx | 5 +- .../placeholder-icon.component.tsx | 5 +- .../placeholder-link.component.tsx | 5 +- .../src/placeholder/placeholder.component.tsx | 5 +- ui-admin/upload/src/upload.component.tsx | 32 +++--- ui-admin/upload/src/upload.stories.tsx | 11 ++- .../upload/src/use-upload/use-upload.hook.ts | 40 ++++---- .../src/arrow/arrow.component.tsx | 6 +- .../src/arrow/arrow.interfaces.ts | 2 +- .../src/autocomplete.component.tsx | 39 ++++---- .../src/autocomplete.interfaces.ts | 2 +- .../autocomplete/src/autocomplete.stories.tsx | 26 ++--- .../src/indicator/indicator.component.tsx | 3 +- .../src/indicator/indicator.interfaces.ts | 4 +- .../src/layer/layer.component.tsx | 9 +- .../src/menu-item/menu-item.component.tsx | 3 +- .../src/menu-item/menu-item.interfaces.ts | 2 +- .../autocomplete/src/menu/menu.component.tsx | 3 +- .../autocomplete/src/menu/menu.interfaces.ts | 4 +- .../avatar-fallback.component.tsx | 3 +- .../avatar-fallback.interfaces.ts | 6 +- .../avatar-image/avatar-image.component.tsx | 3 +- .../avatar-image/avatar-image.interfaces.ts | 4 +- ui-parts/avatar/src/avatar.stories.tsx | 18 ++-- .../src/avatar/avatar-fallback.component.tsx | 13 +-- .../avatar/src/avatar/avatar.interfaces.ts | 6 +- ui-parts/button/src/button.component.tsx | 25 +++-- ui-parts/button/src/button.interfaces.ts | 6 +- ui-parts/button/src/button.stories.tsx | 6 +- .../src/content/content/content.component.tsx | 7 +- .../src/content/content/content.interfaces.ts | 2 +- .../src/content/divider/divider.component.tsx | 13 +-- .../button/src/content/divider/divider.css.ts | 3 +- .../src/content/divider/divider.interfaces.ts | 4 +- .../hooks/use-divided-children.hook.ts | 15 +-- ui-parts/button/src/ghost-button.stories.tsx | 17 ++-- .../ghost-button/ghost-button.component.tsx | 3 +- .../create-appearance-styles.interfaces.ts | 2 +- .../create-appearance-styles.util.ts | 6 +- .../create-shape-styles.interfaces.ts | 4 +- .../create-shape-styles.util.ts | 6 +- ui-parts/card/package.json | 1 + .../src/animation/use-card-controls.hook.ts | 48 +++++---- .../card/src/backdrop/backdrop.component.tsx | 13 +-- ui-parts/card/src/card.stories.tsx | 32 +++--- .../src/container/container.component.tsx | 13 +-- .../card/src/renderer/renderer.component.tsx | 11 ++- .../card/src/renderer/renderer.interfaces.ts | 2 +- ui-parts/carousel/src/carousel.interfaces.ts | 4 +- ui-parts/carousel/src/carousel.stories.tsx | 40 ++++---- .../src/container/container.component.tsx | 11 ++- .../use-addon-navigation.hook.ts | 16 +-- .../use-addon-pagination.hook.ts | 18 ++-- .../use-addon-pagination.interfaces.ts | 4 +- .../hooks/use-carousel/use-carousel.hook.ts | 44 +++++---- .../use-carousel/use-carousel.interfaces.ts | 20 ++-- .../src/navigation/navigation.component.tsx | 7 +- .../src/navigation/navigation.interfaces.ts | 17 +++- .../src/navigation/navigation.utils.ts | 12 ++- .../src/pagination/pagination.component.tsx | 5 +- .../src/pagination/pagination.interfaces.ts | 4 +- .../carousel/src/slide/slide.component.tsx | 11 ++- .../src/wrapper/wrapper.component.tsx | 3 +- .../src/wrapper/wrapper.interfaces.ts | 4 +- ui-parts/checkbox/src/checkbox.component.tsx | 9 +- ui-parts/checkbox/src/checkbox.interfaces.ts | 8 +- ui-parts/checkbox/src/checkbox.stories.tsx | 16 +-- .../condition/src/condition.component.tsx | 11 ++- ui-parts/condition/src/condition.interface.ts | 2 +- .../src/conditional-render.factory.ts | 17 ++-- .../datepicker/src/datepicker.component.tsx | 10 +- .../datepicker/src/datepicker.interface.ts | 8 +- .../datepicker/src/datepicker.stories.tsx | 26 ++--- .../create-appearance-styles.interfaces.ts | 2 +- .../create-appearance-styles.util.ts | 23 +++-- .../create-shape-styles.interfaces.ts | 4 +- .../create-shape-styles.util.ts | 16 +-- .../register-locales/register-locales.util.ts | 2 +- ui-parts/design/src/main.ts | 5 +- ui-parts/design/src/preview.tsx | 13 +-- .../convert-pixel-to-value.util.ts | 2 +- .../use-window-size.constants.ts | 2 +- .../use-window-size/use-window-size.hook.ts | 15 +-- .../src/events-state.interfaces.ts | 10 +- .../events-state/src/events-state.utils.ts | 6 +- .../src/forward-events-state.component.ts | 14 +-- .../events-state/src/use-events-state.hook.ts | 26 ++--- ui-parts/image/src/image.component.tsx | 27 ++--- ui-parts/image/src/image.css.ts | 3 +- ui-parts/input/src/addon/addon.component.tsx | 7 +- ui-parts/input/src/addon/addon.interfaces.ts | 8 +- .../utils/get-rounding-styles.interfaces.ts | 6 ++ .../addon/utils/get-rounding-styles.util.ts | 13 +-- .../src/attachment/attachment.component.tsx | 5 +- .../src/attachment/attachment.interfaces.ts | 4 +- ui-parts/input/src/divided-fields.stories.tsx | 18 +++- .../divided-fields-container.component.tsx | 9 +- .../divided-fields-container.interfaces.ts | 4 +- .../hidden-input/hidden-input.component.tsx | 11 ++- ui-parts/input/src/input.component.tsx | 11 ++- ui-parts/input/src/input.interfaces.ts | 6 +- ui-parts/input/src/input.stories.tsx | 6 +- .../src/raw-input/raw-input.component.tsx | 11 ++- ui-parts/input/src/textarea.stories.tsx | 28 ++++-- .../textarea/textarea-container.component.tsx | 5 +- .../textarea/textarea-container.interfaces.ts | 6 +- .../utils/get-rounding-styles.interfaces.ts | 7 ++ .../utils/get-rounding-styles.util.ts | 15 +-- .../create-appearance-styles.interfaces.ts | 2 +- .../create-appearance-styles.util.ts | 6 +- .../create-shape-styles.interfaces.ts | 2 +- .../create-shape-styles.util.ts | 6 +- ui-parts/layout/src/box/box.component.tsx | 11 ++- ui-parts/layout/src/box/box.element.tsx | 7 +- ui-parts/layout/src/box/box.interfaces.ts | 6 +- .../layout/src/column/column.component.tsx | 9 +- ui-parts/layout/src/grid/grid.component.tsx | 11 ++- ui-parts/layout/src/grid/grid.element.tsx | 7 +- ui-parts/layout/src/grid/grid.interfaces.ts | 6 +- .../layout/src/layout/layout.component.tsx | 11 ++- ui-parts/layout/src/layout/layout.element.tsx | 7 +- .../layout/src/layout/layout.interfaces.ts | 6 +- ui-parts/layout/src/row/row.component.tsx | 9 +- ui-parts/link/src/link.component.tsx | 5 +- ui-parts/link/src/link.css.ts | 3 +- ui-parts/link/src/link.interfaces.ts | 4 +- .../src/mapbox-cluster/marker-cluster.ts | 13 +-- .../modal/src/backdrop/backdrop.component.tsx | 6 +- .../modal/src/backdrop/backdrop.interfaces.ts | 2 +- .../src/container/container.component.tsx | 5 +- ui-parts/modal/src/modal.component.tsx | 6 +- ui-parts/modal/src/modal.interfaces.ts | 2 +- ui-parts/modal/src/modal.stories.tsx | 12 ++- .../next-image/src/next-image.component.tsx | 3 +- ui-parts/next-image/src/next-image.d.ts | 2 +- .../next-image/src/next-image.interfaces.ts | 2 +- .../parallax/src/context/parallax.store.ts | 21 ++-- .../parallax/src/context/use-parallax.hook.ts | 20 ++-- .../src/in-view-box/in-view-box.component.tsx | 5 +- .../parallax-box/parallax-box.component.tsx | 11 ++- .../src/parallax-box/parallax-box.element.tsx | 30 +++--- .../parallax-box/parallax-box.interfaces.ts | 14 ++- .../src/parallax-box/parallax-box.utils.ts | 14 +-- .../parallax-screen.component.tsx | 11 ++- .../src/parallax/parallax.component.tsx | 6 +- .../src/parallax/parallax.interfaces.ts | 2 +- ...background-image-placeholder.component.tsx | 12 ++- ...background-image-placeholder.interfaces.ts | 4 +- .../image-box-placeholder.component.tsx | 12 ++- .../image-box-placeholder.interfaces.ts | 2 +- .../image-placeholder.component.tsx | 8 +- .../image-placeholder.interfaces.ts | 2 +- .../logo-placeholder.component.tsx | 14 +-- .../logo-placeholder.interfaces.ts | 2 +- .../placeholder/src/placeholder.stories.tsx | 5 +- .../container-inner.component.tsx | 5 +- .../container-title.component.tsx | 5 +- .../src/container/container.component.tsx | 24 ++--- .../src/container/container.contants.ts | 7 ++ .../src/container/container.interfaces.ts | 11 +-- ui-parts/popover/src/popover.component.tsx | 30 +++--- ui-parts/popover/src/popover.interfaces.ts | 5 +- ui-parts/popover/src/popover.stories.tsx | 31 +++--- ui-parts/popover/src/use-popover.hook.tsx | 15 +-- ui-parts/portal/src/portal.component.tsx | 11 ++- .../progress/src/circle/circle.component.tsx | 46 +++++---- .../progress/src/circle/circle.interfaces.ts | 22 ++++- ui-parts/progress/src/circle/circle.utils.ts | 28 +++--- .../line-container.component.tsx | 7 +- .../line-container.interfaces.ts | 6 +- .../line-percent/line-percent.component.tsx | 7 +- .../line-percent/line-percent.interfaces.ts | 6 +- ui-parts/progress/src/line/line.component.tsx | 41 ++++---- ui-parts/progress/src/line/line.interfaces.ts | 10 +- ui-parts/progress/src/progress.interfaces.ts | 4 +- ui-parts/progress/src/progress.stories.tsx | 29 +++--- .../src/hooks/use-scale.hook.ts | 4 +- .../src/hooks/use-scale.interfaces.ts | 4 +- .../src/scalable-content.component.tsx | 14 +-- .../src/scalable-content.interfaces.ts | 4 +- ui-parts/select/src/item/item.component.tsx | 6 +- ui-parts/select/src/item/item.interfaces.ts | 2 +- ui-parts/select/src/select.component.tsx | 9 +- ui-parts/select/src/select.interfaces.ts | 4 +- ui-parts/select/src/select.stories.tsx | 17 ++-- .../src/container/container.component.tsx | 11 ++- .../src/expander/expander.component.tsx | 3 +- .../src/expander/expander.interfaces.ts | 2 +- .../sidebar/src/expander/expander.motion.ts | 2 +- .../src/hooks/use-pinned-state.hook.ts | 4 +- .../item/item-component/item.component.tsx | 6 +- .../item/item-component/item.interfaces.ts | 2 +- .../item/item-icon/item-icon.component.tsx | 11 ++- .../item/item-label/item-label.component.tsx | 11 ++- .../sidebar/src/items/items.component.tsx | 11 ++- .../sidebar/src/pinner/pinner.component.tsx | 11 ++- ui-parts/sidebar/src/sidebar.component.tsx | 23 ++--- ui-parts/sidebar/src/sidebar.stories.tsx | 19 ++-- .../sidebar/src/wrapper/wrapper.component.tsx | 6 +- .../sidebar/src/wrapper/wrapper.interfaces.ts | 2 +- ui-parts/swiper/src/swiper.component.tsx | 9 +- ui-parts/swiper/src/swiper.stories.tsx | 21 ++-- .../switch/src/handle/handle.component.tsx | 15 +-- ui-parts/switch/src/hooks/hooks.interfaces.ts | 2 +- ui-parts/switch/src/hooks/use-keyboard.ts | 11 ++- ui-parts/switch/src/hooks/use-switch-state.ts | 16 +-- ui-parts/switch/src/hooks/use-switch.ts | 13 +-- ui-parts/switch/src/switch.component.tsx | 16 +-- ui-parts/switch/src/switch.interfaces.ts | 6 +- ui-parts/switch/src/switch.stories.tsx | 16 +-- ui-parts/switch/src/thumb/thumb.component.tsx | 10 +- ui-parts/switch/src/thumb/thumb.interfaces.ts | 4 +- .../src/text-transform.component.tsx | 15 ++- ui-parts/text/src/currency.stories.tsx | 7 +- .../text/src/currency/currency.component.tsx | 13 +-- .../text/src/currency/currency.interfaces.ts | 4 +- ui-parts/text/src/space/space.component.tsx | 15 +-- ui-parts/text/src/space/space.interfaces.ts | 4 +- ui-parts/text/src/text.stories.tsx | 15 +-- ui-parts/text/src/text/text.component.tsx | 11 ++- ui-parts/text/src/text/text.element.tsx | 10 +- ui-parts/text/src/text/text.interfaces.ts | 6 +- .../src/container/container.component.tsx | 22 ++--- .../src/container/container.contants.ts | 7 ++ .../src/container/container.interfaces.ts | 8 +- ui-parts/tooltip/src/hooks/use-click.hook.ts | 12 ++- .../src/hooks/use-context-menu.hook.ts | 16 ++- ui-parts/tooltip/src/tooltip.component.tsx | 32 +++--- ui-parts/tooltip/src/tooltip.interfaces.ts | 16 +-- ui-parts/tooltip/src/tooltip.stories.tsx | 28 ++++-- ui-parts/tooltip/src/use-tooltip.hook.tsx | 42 ++++---- .../upload/src/simple-upload.component.tsx | 21 ++-- ui/design/src/intro.stories.tsx | 19 ++-- ui/design/src/main.ts | 9 +- ui/design/src/preview.tsx | 13 +-- utils/use-popover/src/use-popover.hook.ts | 33 +++++-- utils/use-select/src/select.interfaces.ts | 6 +- utils/use-select/src/use-select.hook.tsx | 14 ++- yarn.lock | 1 + 310 files changed, 1851 insertions(+), 1420 deletions(-) create mode 100644 ui-parts/input/src/addon/utils/get-rounding-styles.interfaces.ts create mode 100644 ui-parts/input/src/textarea/utils/get-rounding-styles.interfaces.ts create mode 100644 ui-parts/popover/src/container/container.contants.ts create mode 100644 ui-parts/tooltip/src/container/container.contants.ts diff --git a/.pnp.cjs b/.pnp.cjs index 2c8a9405..42e0b360 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -1048,6 +1048,7 @@ const RAW_RUNTIME_STATE = ["@storybook/react-webpack5", "virtual:5d5a2d83c74dbbb6a29a65ad5d9fce09aed4258bbc7c7bef7d0ae41fe2cbed3efa30eb23487731e7ba540c2485008f2e2cdc8aa4b98cd0d0d6df800a358cdf39#npm:8.1.11"],\ ["@storybook/test", "npm:8.1.11"],\ ["@storybook/types", "npm:8.1.11"],\ + ["@types/express", "npm:4.17.21"],\ ["@types/react", "npm:18.2.48"],\ ["@types/react-dom", "npm:18.2.18"],\ ["@vanilla-extract/css", "npm:1.15.3"],\ diff --git a/generators/button/src/generator.ts b/generators/button/src/generator.ts index 2282fa17..d60623a9 100644 --- a/generators/button/src/generator.ts +++ b/generators/button/src/generator.ts @@ -10,7 +10,7 @@ const command = new Command() .name('Button styles generator') .argument('path ', 'Path to save the styles') .option('-t, --theme path ', 'Path to colors file') - .action((path, options) => { + .action((path: string, options: Record) => { assert.ok(options.theme, 'Theme colors path is required') const colorsFile = readFileSync(join(process.cwd(), options.theme)).toString('utf-8') @@ -18,8 +18,8 @@ const command = new Command() if (!code) throw Error('Could not read the file') - // eslint-disable-next-line no-eval - const colors = eval(code) + // eslint-disable-next-line no-eval, security/detect-eval-with-expression + const colors: Record = eval(code) const generator = new ButtonAppearanceStyleGenerator(colors) diff --git a/generators/button/src/style-generators/appearance.style-generator.ts b/generators/button/src/style-generators/appearance.style-generator.ts index aa2616d9..6178276d 100644 --- a/generators/button/src/style-generators/appearance.style-generator.ts +++ b/generators/button/src/style-generators/appearance.style-generator.ts @@ -1,11 +1,11 @@ -import { writeFileSync } from 'fs' +import type { ButtonColorSchemes } from '../button-generator.interfaces.js' -import { pretty } from '@atls-ui-generators/utils' -import { getStylesName } from '@atls-ui-generators/utils' +import { writeFileSync } from 'fs' -import { ButtonColorSchemes } from '../button-generator.interfaces.js' +import { pretty } from '@atls-ui-generators/utils' +import { getStylesName } from '@atls-ui-generators/utils' -const getAppearanceStylesName = (variant: string, state: string) => +const getAppearanceStylesName = (variant: string, state: string): string => getStylesName('appearance', variant, state) export class ButtonAppearanceStyleGenerator { @@ -14,10 +14,10 @@ export class ButtonAppearanceStyleGenerator { { import: '{ createAppearanceStyles }', from: '@atls-ui-parts/button' }, ] - #variants: string[] = [] + #variants: Array = [] constructor(private readonly colorSchemes: ButtonColorSchemes) { - const allVariants = Object.keys(colorSchemes).reduce( + const allVariants = Object.keys(colorSchemes).reduce>( (array, key) => (key.startsWith('button.') ? [...array, key.split('.')[1]] : array), [] ) @@ -27,39 +27,7 @@ export class ButtonAppearanceStyleGenerator { this.#variants = uniqueVariants } - private generateVariantStatefulStyles(variant: string) { - const lines: string[] = [] - - const allStates: string[] = Object.keys(this.colorSchemes).reduce( - (array, key) => (key.startsWith(`button.${variant}`) ? [...array, key.split('.')[2]] : array), - [] - ) - - const uniqueStates = [...new Set(allStates)] - - for (const state of uniqueStates) { - lines.push(`const ${getAppearanceStylesName(variant, state)} = createAppearanceStyles({ - fontColor: vars.colors['button.${variant}.${state}.font'], - backgroundColor: vars.colors['button.${variant}.${state}.background'], - borderColor: vars.colors['button.${variant}.${state}.border'], - })`) - } - - return lines.join('\n\n') - } - - private generateVariantAppearanceStyles( - variants: string[], - state: string, - addSuffix: boolean = true - ) { - const suffix = addSuffix ? state : '' - return variants - .map((variant) => `${variant}${suffix}: ${getAppearanceStylesName(variant, state)},`) - .join('\n') - } - - generateAppearanceStyles() { + generateAppearanceStyles(): Record<'appearanceStyles' | 'imports' | 'statefulStyles', string> { const statefulStyles = pretty( this.#variants.map((variant) => this.generateVariantStatefulStyles(variant)).join('\n\n') ) @@ -67,19 +35,19 @@ export class ButtonAppearanceStyleGenerator { const appearanceStyles = pretty(` export const appearanceVariant = { ${this.generateVariantAppearanceStyles(this.#variants, 'Default', false)} - } + } export const appearanceHover = { ${this.generateVariantAppearanceStyles(this.#variants, 'Hover')} - } - - export const appearancePressed = { + } + + export const appearancePressed = { ${this.generateVariantAppearanceStyles(this.#variants, 'Pressed')} - } + } export const appearanceDisabled = { ${this.generateVariantAppearanceStyles(this.#variants, 'Disabled')} - }`) + }`) const imports = pretty( this.requiredImports @@ -90,12 +58,12 @@ export class ButtonAppearanceStyleGenerator { return { statefulStyles, appearanceStyles, imports } } - generateFile(path: string, filename = 'appearance.css.ts') { + generateFile(path: string, filename = 'appearance.css.ts'): void { const generated = this.generateAppearanceStyles() const code = pretty(` - ${generated.imports} - ${generated.statefulStyles} + ${generated.imports} + ${generated.statefulStyles} ${generated.appearanceStyles} `) @@ -105,4 +73,36 @@ export class ButtonAppearanceStyleGenerator { writeFileSync(`${path}/${filename}`, code) } + + private generateVariantStatefulStyles(variant: string): string { + const lines: Array = [] + + const allStates: Array = Object.keys(this.colorSchemes).reduce>( + (array, key) => (key.startsWith(`button.${variant}`) ? [...array, key.split('.')[2]] : array), + [] + ) + + const uniqueStates = [...new Set(allStates)] + + for (const state of uniqueStates) { + lines.push(`const ${getAppearanceStylesName(variant, state)} = createAppearanceStyles({ + fontColor: vars.colors['button.${variant}.${state}.font'], + backgroundColor: vars.colors['button.${variant}.${state}.background'], + borderColor: vars.colors['button.${variant}.${state}.border'], + })`) + } + + return lines.join('\n\n') + } + + private generateVariantAppearanceStyles( + variants: Array, + state: string, + addSuffix: boolean = true + ): string { + const suffix = addSuffix ? state : '' + return variants + .map((variant) => `${variant}${suffix}: ${getAppearanceStylesName(variant, state)},`) + .join('\n') + } } diff --git a/generators/button/src/tests/generate-button-appearance-styles.test.ts b/generators/button/src/tests/generate-button-appearance-styles.test.ts index a086f41b..dfdc06f5 100644 --- a/generators/button/src/tests/generate-button-appearance-styles.test.ts +++ b/generators/button/src/tests/generate-button-appearance-styles.test.ts @@ -126,7 +126,9 @@ export const appearanceDisabled = { if (!existsSync(`${__dirname}/generated`)) mkdirSync(`${__dirname}/generated`) - expect(() => generator.generateFile(`${__dirname}/generated/`)).toThrowError() + expect(() => { + generator.generateFile(`${__dirname}/generated/`) + }).toThrowError() }) it('should generate appearance styles file', () => { diff --git a/generators/icons/src/generator.ts b/generators/icons/src/generator.ts index a08e85a7..ea282671 100644 --- a/generators/icons/src/generator.ts +++ b/generators/icons/src/generator.ts @@ -14,7 +14,7 @@ const command = new Command() .argument('path ', 'Path to save icons') .option('-i, --icons path ', 'Path to icons dir') .option('-r, --replacements path ', 'Path to replacements file') - .action(async (path, options) => { + .action(async (path: string, options: Record) => { assert.ok(options.icons, 'Icons dir path is required') const iconsPath = join(process.cwd(), options.icons) @@ -37,7 +37,7 @@ const command = new Command() if (!code) throw Error('Could not read the file') - // eslint-disable-next-line no-eval + // eslint-disable-next-line no-eval, security/detect-eval-with-expression replacements = eval(code) } diff --git a/generators/icons/src/get-color-replacement.util.ts b/generators/icons/src/get-color-replacement.util.ts index 6611152b..960b6ebb 100644 --- a/generators/icons/src/get-color-replacement.util.ts +++ b/generators/icons/src/get-color-replacement.util.ts @@ -3,7 +3,9 @@ export interface GetColorReplacementOptions { color: string } -export const getColorReplacement = (options: GetColorReplacementOptions) => ({ +export const getColorReplacement = ( + options: GetColorReplacementOptions +): Record => ({ [options.color]: `{(vars.colors${(options.themePaths || []).reduce( (str, prop) => `${str}.${prop}`, '' diff --git a/generators/icons/src/svgr.ts b/generators/icons/src/svgr.ts index 123b77d6..a32d629b 100644 --- a/generators/icons/src/svgr.ts +++ b/generators/icons/src/svgr.ts @@ -11,13 +11,15 @@ import parserBabel from 'prettier/parser-babel' import parserTypescript from 'prettier/parser-typescript' // @ts-expect-error types -const svgrTemplate = ({ template }, opts, { componentName, jsx }) => { +const svgrTemplate = ({ template }, opts, { componentName, jsx }): any => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call const typeScriptTpl = template.smart({ plugins: ['typescript', 'prettier'] }) + // eslint-disable-next-line return typeScriptTpl.ast` import React from 'react' import { vars } from '@ui/theme' - import { IconProps } from '../icons.interfaces' + import type { IconProps } from '../icons.interfaces' export const ${componentName} = React.memo((props: IconProps) => ( ${jsx} @@ -25,7 +27,7 @@ const svgrTemplate = ({ template }, opts, { componentName, jsx }) => { ` } -const read = (files: Array) => +const read = async (files: Array): Promise> => Promise.all( files.map(async (iconPath) => ({ name: `${camelcase(path.basename(iconPath, path.extname(iconPath)), { @@ -35,13 +37,14 @@ const read = (files: Array) => })) ) -const compile = ( +const compile = async ( icons: Array<{ name: string; source: string }>, replacements: Record -) => +): Promise> => Promise.all( icons.map(async (icon) => ({ name: icon.name, + // eslint-disable-next-line @typescript-eslint/no-unsafe-call code: await svgr( icon.source.replace(/mask0/g, icon.name), { @@ -54,13 +57,16 @@ const compile = ( })) ) -const save = async (sources: Array<{ name: string }>, targetDir: string) => +const save = async ( + sources: Array<{ name: string; code?: string }>, + targetDir: string +): Promise> => Promise.all( sources.map((source) => fs.writeFileAsync( path.join(targetDir, `${source.name}.tsx`), - // @ts-ignore - format(`/* eslint-disable */\n${source.code}`, { + // @ts-expect-error + format(`/* eslint-disable */\n${source?.code || ''}`, { ...prettierConfig, filepath: path.join(targetDir, `${source.name}.tsx`), plugins: [parserTypescript, parserBabel, prettierPlugin], @@ -68,14 +74,21 @@ const save = async (sources: Array<{ name: string }>, targetDir: string) => )) ) -const createIndex = (sources: Array<{ name: string }>, targetDir: string) => +const createIndex = ( + sources: Array<{ name: string }>, + targetDir: string +): ReturnType => fs.writeFileAsync( path.join(targetDir, 'index.ts'), `${sources.map((source) => `export * from './${source.name}'`).join('\n')}\n` ) -export const build = async (iconsPath: string, targetDir: string, replacements: object) => { - const prettifyIconsPath = () => { +export const build = async ( + iconsPath: string, + targetDir: string, + replacements: object +): Promise => { + const prettifyIconsPath = (): string => { const parts = iconsPath.split('') if (parts[parts.length - 1] === '/') { parts.pop() diff --git a/generators/input/src/generator.ts b/generators/input/src/generator.ts index a95aef4b..8c83a03c 100644 --- a/generators/input/src/generator.ts +++ b/generators/input/src/generator.ts @@ -10,7 +10,7 @@ const command = new Command() .name('Input styles generator') .argument('path ', 'Path to save the styles') .option('-t, --theme path ', 'Path to colors file') - .action((path, options) => { + .action((path: string, options: Record) => { assert.ok(options.theme, 'Theme colors path is required') const colorsFile = readFileSync(join(process.cwd(), options.theme)).toString('utf-8') @@ -18,8 +18,8 @@ const command = new Command() if (!code) throw Error('Could not read the file') - // eslint-disable-next-line no-eval - const colors = eval(code) + // eslint-disable-next-line no-eval, security/detect-eval-with-expression + const colors: Record = eval(code) const generator = new InputAppearanceStyleGenerator(colors) diff --git a/generators/input/src/style-generators/appearance.style-generator.ts b/generators/input/src/style-generators/appearance.style-generator.ts index 1b9de2e7..f1c9df3b 100644 --- a/generators/input/src/style-generators/appearance.style-generator.ts +++ b/generators/input/src/style-generators/appearance.style-generator.ts @@ -1,11 +1,11 @@ -import { writeFileSync } from 'fs' +import type { InputColorSchemes } from '../input-generator.interfaces.js' -import { pretty } from '@atls-ui-generators/utils' -import { getStylesName } from '@atls-ui-generators/utils' +import { writeFileSync } from 'fs' -import { InputColorSchemes } from '../input-generator.interfaces.js' +import { pretty } from '@atls-ui-generators/utils' +import { getStylesName } from '@atls-ui-generators/utils' -const getAppearanceStylesName = (variant: string, state: string) => +const getAppearanceStylesName = (variant: string, state: string): string => getStylesName('appearance', variant, state) export class InputAppearanceStyleGenerator { @@ -14,10 +14,10 @@ export class InputAppearanceStyleGenerator { { import: '{ createAppearanceStyles }', from: '@atls-ui-parts/input' }, ] - #variants: string[] = [] + #variants: Array = [] constructor(private readonly colorSchemes: InputColorSchemes) { - const allVariants = Object.keys(colorSchemes).reduce( + const allVariants = Object.keys(colorSchemes).reduce>( (array, key) => (key.startsWith('input.') ? [...array, key.split('.')[1]] : array), [] ) @@ -25,39 +25,7 @@ export class InputAppearanceStyleGenerator { this.#variants = [...new Set(allVariants)] } - private generateVariantStatefulStyles(variant: string) { - const lines: string[] = [] - - const allStates: string[] = Object.keys(this.colorSchemes).reduce( - (array, key) => (key.startsWith(`input.${variant}`) ? [...array, key.split('.')[2]] : array), - [] - ) - - const uniqueStates = [...new Set(allStates)] - - for (const state of uniqueStates) { - lines.push(`const ${getAppearanceStylesName(variant, state)} = createAppearanceStyles({ - fontColor: vars.colors['input.${variant}.${state}.font'], - backgroundColor: vars.colors['input.${variant}.${state}.background'], - borderColor: vars.colors['input.${variant}.${state}.border'], - })`) - } - - return lines.join('\n\n') - } - - private generateVariantAppearanceStyles( - variants: string[], - state: string, - addSuffix: boolean = true - ) { - const suffix = addSuffix ? state : '' - return variants - .map((variant) => `${variant}${suffix}: ${getAppearanceStylesName(variant, state)},`) - .join('\n') - } - - generateAppearanceStyles() { + generateAppearanceStyles(): Record<'appearanceStyles' | 'imports' | 'statefulStyles', string> { const statefulStyles = pretty( this.#variants.map((variant) => this.generateVariantStatefulStyles(variant)).join('\n\n') ) @@ -92,7 +60,7 @@ export class InputAppearanceStyleGenerator { return { statefulStyles, appearanceStyles, imports } } - generateFile(path: string, filename = 'appearance.css.ts') { + generateFile(path: string, filename = 'appearance.css.ts'): void { const generated = this.generateAppearanceStyles() const code = pretty(` @@ -107,4 +75,36 @@ export class InputAppearanceStyleGenerator { writeFileSync(`${path}/${filename}`, code) } + + private generateVariantStatefulStyles(variant: string): string { + const lines: Array = [] + + const allStates: Array = Object.keys(this.colorSchemes).reduce>( + (array, key) => (key.startsWith(`input.${variant}`) ? [...array, key.split('.')[2]] : array), + [] + ) + + const uniqueStates = [...new Set(allStates)] + + for (const state of uniqueStates) { + lines.push(`const ${getAppearanceStylesName(variant, state)} = createAppearanceStyles({ + fontColor: vars.colors['input.${variant}.${state}.font'], + backgroundColor: vars.colors['input.${variant}.${state}.background'], + borderColor: vars.colors['input.${variant}.${state}.border'], + })`) + } + + return lines.join('\n\n') + } + + private generateVariantAppearanceStyles( + variants: Array, + state: string, + addSuffix: boolean = true + ): string { + const suffix = addSuffix ? state : '' + return variants + .map((variant) => `${variant}${suffix}: ${getAppearanceStylesName(variant, state)},`) + .join('\n') + } } diff --git a/generators/input/src/tests/generate-input-appearance-styles.test.ts b/generators/input/src/tests/generate-input-appearance-styles.test.ts index f8e71f53..30d2b42c 100644 --- a/generators/input/src/tests/generate-input-appearance-styles.test.ts +++ b/generators/input/src/tests/generate-input-appearance-styles.test.ts @@ -149,7 +149,9 @@ export const appearanceDisabled = { if (!existsSync(`${__dirname}/generated`)) mkdirSync(`${__dirname}/generated`) - expect(() => generator.generateFile(`${__dirname}/generated/`)).toThrowError() + expect(() => { + generator.generateFile(`${__dirname}/generated/`) + }).toThrowError() }) it('should generate appearance styles file', () => { diff --git a/generators/locales/src/generator.ts b/generators/locales/src/generator.ts index 04d732b3..bb5d7097 100644 --- a/generators/locales/src/generator.ts +++ b/generators/locales/src/generator.ts @@ -16,6 +16,8 @@ process.argv.slice(2).forEach((arg) => { }) const paths = argPaths.length ? argPaths : defaultPaths -paths.forEach((path) => processDirectory(path, 'locales', allLocales, outputFile)) +paths.forEach((path): void => { + processDirectory(path, 'locales', allLocales, outputFile) +}) mergeLocales(allLocales, `./locales/${outputFile}.json`) diff --git a/generators/locales/src/merge-locales/merge-locales.interfaces.ts b/generators/locales/src/merge-locales/merge-locales.interfaces.ts index 8f82ec0c..8f632157 100644 --- a/generators/locales/src/merge-locales/merge-locales.interfaces.ts +++ b/generators/locales/src/merge-locales/merge-locales.interfaces.ts @@ -1 +1 @@ -export type MergeLocalesType = (files: string[], outputPath: string) => void +export type MergeLocalesType = (files: Array, outputPath: string) => void diff --git a/generators/locales/src/merge-locales/merge-locales.ts b/generators/locales/src/merge-locales/merge-locales.ts index 26f7d9b7..dac5b4c9 100644 --- a/generators/locales/src/merge-locales/merge-locales.ts +++ b/generators/locales/src/merge-locales/merge-locales.ts @@ -1,10 +1,10 @@ -import { existsSync } from 'fs' -import { readFileSync } from 'fs' -import { mkdirSync } from 'fs' -import { writeFileSync } from 'fs' -import { dirname } from 'path' +import type { MergeLocalesType } from './merge-locales.interfaces.js' -import { MergeLocalesType } from './merge-locales.interfaces.js' +import { existsSync } from 'fs' +import { readFileSync } from 'fs' +import { mkdirSync } from 'fs' +import { writeFileSync } from 'fs' +import { dirname } from 'path' export const mergeLocales: MergeLocalesType = (files, outputPath) => { if (!files.length) return diff --git a/generators/locales/src/process-directory/process-directory.interfaces.ts b/generators/locales/src/process-directory/process-directory.interfaces.ts index 8e5bf9d9..d9c12cb2 100644 --- a/generators/locales/src/process-directory/process-directory.interfaces.ts +++ b/generators/locales/src/process-directory/process-directory.interfaces.ts @@ -1,6 +1,6 @@ export type ProcessDirectoryType = ( startPath: string, folderName: string, - allLocales: string[], + allLocales: Array, outputLocale: string ) => void diff --git a/generators/locales/src/process-directory/process-directory.ts b/generators/locales/src/process-directory/process-directory.ts index 7409bde1..e090d566 100644 --- a/generators/locales/src/process-directory/process-directory.ts +++ b/generators/locales/src/process-directory/process-directory.ts @@ -1,12 +1,13 @@ /* eslint-disable no-console */ -import { execSync } from 'child_process' -import { existsSync } from 'fs' -import { readdirSync } from 'fs' -import { join } from 'path' +import type { ProcessDirectoryType } from './process-directory.interfaces.js' -import { ProcessDirectoryType } from './process-directory.interfaces.js' -import { removeEmptyLocale } from '../remove-empty-locale/index.js' +import { execSync } from 'child_process' +import { existsSync } from 'fs' +import { readdirSync } from 'fs' +import { join } from 'path' + +import { removeEmptyLocale } from '../remove-empty-locale/index.js' export const processDirectory: ProcessDirectoryType = ( startPath, diff --git a/generators/locales/src/remove-empty-locale/remove-empty-locale.interfaces.ts b/generators/locales/src/remove-empty-locale/remove-empty-locale.interfaces.ts index 24bbcbb1..2e47b289 100644 --- a/generators/locales/src/remove-empty-locale/remove-empty-locale.interfaces.ts +++ b/generators/locales/src/remove-empty-locale/remove-empty-locale.interfaces.ts @@ -2,5 +2,5 @@ export type RemoveEmptyLocaleType = ( outputFilePath: string, localePath: string, folderName: string, - allLocales: string[] + allLocales: Array ) => void diff --git a/generators/locales/src/remove-empty-locale/remove-empty-locale.ts b/generators/locales/src/remove-empty-locale/remove-empty-locale.ts index 24ea8dc5..1c16b6cc 100644 --- a/generators/locales/src/remove-empty-locale/remove-empty-locale.ts +++ b/generators/locales/src/remove-empty-locale/remove-empty-locale.ts @@ -1,11 +1,11 @@ -import { existsSync } from 'fs' -import { readFileSync } from 'fs' -import { readdirSync } from 'fs' -import { rmSync } from 'fs' -import { unlinkSync } from 'fs' -import { join } from 'path' +import type { RemoveEmptyLocaleType } from './remove-empty-locale.interfaces.js' -import { RemoveEmptyLocaleType } from './remove-empty-locale.interfaces.js' +import { existsSync } from 'fs' +import { readFileSync } from 'fs' +import { readdirSync } from 'fs' +import { rmSync } from 'fs' +import { unlinkSync } from 'fs' +import { join } from 'path' export const removeEmptyLocale: RemoveEmptyLocaleType = ( outputFilePath, diff --git a/generators/utils/src/get-styles-name.util.ts b/generators/utils/src/get-styles-name.util.ts index 60fb15be..531b4ece 100644 --- a/generators/utils/src/get-styles-name.util.ts +++ b/generators/utils/src/get-styles-name.util.ts @@ -1,6 +1,6 @@ import camelcase from 'camelcase' -const getStylesName = (type: 'shape' | 'appearance', variant: string, state: string): string => +const getStylesName = (type: 'appearance' | 'shape', variant: string, state: string): string => camelcase(`${type} ${variant} ${state} styles`) export { getStylesName } diff --git a/generators/utils/src/pretty.util.ts b/generators/utils/src/pretty.util.ts index 7e39bf44..73c4d663 100644 --- a/generators/utils/src/pretty.util.ts +++ b/generators/utils/src/pretty.util.ts @@ -4,8 +4,8 @@ import { format } from 'prettier/standalone' import parserBabel from 'prettier/parser-babel' import parserTypescript from 'prettier/parser-typescript' -const pretty = (string: string) => - // @ts-ignore +const pretty = (string: string): string => + // @ts-expect-error format(string, { ...prettierConfig, parser: 'babel', diff --git a/ui-admin/button/src/button.component.tsx b/ui-admin/button/src/button.component.tsx index d7ddbb21..9120d0da 100644 --- a/ui-admin/button/src/button.component.tsx +++ b/ui-admin/button/src/button.component.tsx @@ -1,11 +1,12 @@ -import { forwardRef } from 'react' -import { useState } from 'react' -import React from 'react' +import type { ButtonProps } from '@atls-ui-parts/button' -import { ButtonProps } from '@atls-ui-parts/button' -import { useHover } from '@atls-utils/use-hover' +import { forwardRef } from 'react' +import { useState } from 'react' +import React from 'react' -import { buttonStyles } from './styles/index.js' +import { useHover } from '@atls-utils/use-hover' + +import { buttonStyles } from './styles/index.js' export const Button = forwardRef(( { children, icon, iconPlacement, size = 'huge', variant = 'blue', disabled, ...props }, @@ -13,13 +14,18 @@ export const Button = forwardRef(( ) => { const [pressed, setPressed] = useState(false) const [hover, hoverProps] = useHover() - const onMouseDown = () => setPressed(true) - const onMouseUp = () => setPressed(false) + const onMouseDown = (): void => { + setPressed(true) + } + const onMouseUp = (): void => { + setPressed(false) + } return ( + {/* eslint-disable-next-line react/jsx-no-leaked-render */} {isOpen && renderMenu( diff --git a/ui-parts/select/src/select.interfaces.ts b/ui-parts/select/src/select.interfaces.ts index 394a72e5..6eb7d228 100644 --- a/ui-parts/select/src/select.interfaces.ts +++ b/ui-parts/select/src/select.interfaces.ts @@ -1,9 +1,9 @@ -import { BaseMenuSprinkles } from './menu/index.js' +import type { BaseMenuSprinkles } from './menu/index.js' export interface SelectProps extends BaseMenuSprinkles { label: string value: string onChangeValue: (nextValue: string) => void placeholder: string - items: string[] + items: Array } diff --git a/ui-parts/select/src/select.stories.tsx b/ui-parts/select/src/select.stories.tsx index 7b75675a..5cdba41e 100644 --- a/ui-parts/select/src/select.stories.tsx +++ b/ui-parts/select/src/select.stories.tsx @@ -1,15 +1,16 @@ /* eslint-disable react-hooks/rules-of-hooks */ -import { Meta } from '@storybook/react' -import { StoryObj } from '@storybook/react' -import { useState } from 'react' -import React from 'react' +import type { Meta } from '@storybook/react' +import type { StoryObj } from '@storybook/react' -import { Column } from '@atls-ui-parts/layout' -import { Row } from '@atls-ui-parts/layout' -import { Layout } from '@atls-ui-parts/layout' +import { useState } from 'react' +import React from 'react' -import { Select } from './select.component.js' +import { Column } from '@atls-ui-parts/layout' +import { Row } from '@atls-ui-parts/layout' +import { Layout } from '@atls-ui-parts/layout' + +import { Select } from './select.component.js' const meta: Meta = { title: 'Components/Select', diff --git a/ui-parts/sidebar/src/container/container.component.tsx b/ui-parts/sidebar/src/container/container.component.tsx index 4f65a78a..822ff89c 100644 --- a/ui-parts/sidebar/src/container/container.component.tsx +++ b/ui-parts/sidebar/src/container/container.component.tsx @@ -1,9 +1,10 @@ -import { FC } from 'react' -import { HTMLAttributes } from 'react' -import { clsx } from 'clsx' -import React from 'react' +import type { FC } from 'react' +import type { HTMLAttributes } from 'react' -import { containerStyles } from './container.css.js' +import { clsx } from 'clsx' +import React from 'react' + +import { containerStyles } from './container.css.js' export const Container: FC> = ({ children, diff --git a/ui-parts/sidebar/src/expander/expander.component.tsx b/ui-parts/sidebar/src/expander/expander.component.tsx index 637aa560..a417c194 100644 --- a/ui-parts/sidebar/src/expander/expander.component.tsx +++ b/ui-parts/sidebar/src/expander/expander.component.tsx @@ -1,9 +1,10 @@ +import type { ExpanderProps } from './expander.interfaces.js' + import { clsx } from 'clsx' import { motion } from 'framer-motion' import { forwardRef } from 'react' import React from 'react' -import { ExpanderProps } from './expander.interfaces.js' import { expanderStyles } from './expander.css.js' import { expanderMotionVariants } from './expander.motion.js' diff --git a/ui-parts/sidebar/src/expander/expander.interfaces.ts b/ui-parts/sidebar/src/expander/expander.interfaces.ts index 60db0eb4..a575306b 100644 --- a/ui-parts/sidebar/src/expander/expander.interfaces.ts +++ b/ui-parts/sidebar/src/expander/expander.interfaces.ts @@ -1,4 +1,4 @@ -import { HTMLMotionProps } from 'framer-motion' +import type { HTMLMotionProps } from 'framer-motion' export interface ExpanderProps extends HTMLMotionProps<'div'> { opened?: boolean diff --git a/ui-parts/sidebar/src/expander/expander.motion.ts b/ui-parts/sidebar/src/expander/expander.motion.ts index 78f59521..d55b7d53 100644 --- a/ui-parts/sidebar/src/expander/expander.motion.ts +++ b/ui-parts/sidebar/src/expander/expander.motion.ts @@ -1,4 +1,4 @@ -import { Variants } from 'framer-motion' +import type { Variants } from 'framer-motion' export const expanderMotionVariants: Variants = { hidden: { diff --git a/ui-parts/sidebar/src/hooks/use-pinned-state.hook.ts b/ui-parts/sidebar/src/hooks/use-pinned-state.hook.ts index b2217cac..7c7876aa 100644 --- a/ui-parts/sidebar/src/hooks/use-pinned-state.hook.ts +++ b/ui-parts/sidebar/src/hooks/use-pinned-state.hook.ts @@ -1,9 +1,9 @@ import { useState } from 'react' -export const usePinnedState = () => { +export const usePinnedState = (): [boolean, (nextValue: any) => void] => { const [pinned, setPinned] = useState(false) - const change = (nextValue: any) => { + const change = (nextValue: any): void => { setPinned(typeof nextValue === 'boolean' ? nextValue : !pinned) } diff --git a/ui-parts/sidebar/src/item/item-component/item.component.tsx b/ui-parts/sidebar/src/item/item-component/item.component.tsx index 7efc6af2..693e89f4 100644 --- a/ui-parts/sidebar/src/item/item-component/item.component.tsx +++ b/ui-parts/sidebar/src/item/item-component/item.component.tsx @@ -1,8 +1,10 @@ -import { FC } from 'react' +import type { FC } from 'react' + +import type { ItemProps } from './item.interfaces.js' + import { clsx } from 'clsx' import React from 'react' -import { ItemProps } from './item.interfaces.js' import { activeItemStyles } from './item.css.js' import { baseItemStyles } from './item.css.js' diff --git a/ui-parts/sidebar/src/item/item-component/item.interfaces.ts b/ui-parts/sidebar/src/item/item-component/item.interfaces.ts index b52c920d..84c1176a 100644 --- a/ui-parts/sidebar/src/item/item-component/item.interfaces.ts +++ b/ui-parts/sidebar/src/item/item-component/item.interfaces.ts @@ -1,4 +1,4 @@ -import { AnchorHTMLAttributes } from 'react' +import type { AnchorHTMLAttributes } from 'react' export interface ItemProps extends AnchorHTMLAttributes { active?: boolean diff --git a/ui-parts/sidebar/src/item/item-icon/item-icon.component.tsx b/ui-parts/sidebar/src/item/item-icon/item-icon.component.tsx index 271bff5f..2ed748f1 100644 --- a/ui-parts/sidebar/src/item/item-icon/item-icon.component.tsx +++ b/ui-parts/sidebar/src/item/item-icon/item-icon.component.tsx @@ -1,9 +1,10 @@ -import { FC } from 'react' -import { HTMLAttributes } from 'react' -import { clsx } from 'clsx' -import React from 'react' +import type { FC } from 'react' +import type { HTMLAttributes } from 'react' -import { itemIconStyles } from './item-icon.css.js' +import { clsx } from 'clsx' +import React from 'react' + +import { itemIconStyles } from './item-icon.css.js' export const ItemIcon: FC> = ({ children, className, ...props }) => (
diff --git a/ui-parts/sidebar/src/item/item-label/item-label.component.tsx b/ui-parts/sidebar/src/item/item-label/item-label.component.tsx index 0d1d10f8..631a8743 100644 --- a/ui-parts/sidebar/src/item/item-label/item-label.component.tsx +++ b/ui-parts/sidebar/src/item/item-label/item-label.component.tsx @@ -1,9 +1,10 @@ -import { FC } from 'react' -import { HTMLAttributes } from 'react' -import { clsx } from 'clsx' -import React from 'react' +import type { FC } from 'react' +import type { HTMLAttributes } from 'react' -import { itemLabelStyles } from './item-label.css.js' +import { clsx } from 'clsx' +import React from 'react' + +import { itemLabelStyles } from './item-label.css.js' export const ItemLabel: FC> = ({ children, diff --git a/ui-parts/sidebar/src/items/items.component.tsx b/ui-parts/sidebar/src/items/items.component.tsx index 4749c760..0ad86f32 100644 --- a/ui-parts/sidebar/src/items/items.component.tsx +++ b/ui-parts/sidebar/src/items/items.component.tsx @@ -1,9 +1,10 @@ -import { FC } from 'react' -import { HTMLAttributes } from 'react' -import { clsx } from 'clsx' -import React from 'react' +import type { FC } from 'react' +import type { HTMLAttributes } from 'react' -import { itemsStyles } from './items.css.js' +import { clsx } from 'clsx' +import React from 'react' + +import { itemsStyles } from './items.css.js' export const Items: FC> = ({ children, className, ...props }) => (
diff --git a/ui-parts/sidebar/src/pinner/pinner.component.tsx b/ui-parts/sidebar/src/pinner/pinner.component.tsx index a02f8b14..2fd2d982 100644 --- a/ui-parts/sidebar/src/pinner/pinner.component.tsx +++ b/ui-parts/sidebar/src/pinner/pinner.component.tsx @@ -1,9 +1,10 @@ -import { FC } from 'react' -import { HTMLAttributes } from 'react' -import { clsx } from 'clsx' -import React from 'react' +import type { FC } from 'react' +import type { HTMLAttributes } from 'react' -import { pinnerStyles } from './pinner.css.js' +import { clsx } from 'clsx' +import React from 'react' + +import { pinnerStyles } from './pinner.css.js' export const Pinner: FC> = ({ children, className, ...props }) => (
diff --git a/ui-parts/sidebar/src/sidebar.component.tsx b/ui-parts/sidebar/src/sidebar.component.tsx index 1544be9b..5e112c9e 100644 --- a/ui-parts/sidebar/src/sidebar.component.tsx +++ b/ui-parts/sidebar/src/sidebar.component.tsx @@ -1,16 +1,17 @@ -import { FC } from 'react' -import { PropsWithChildren } from 'react' -import React from 'react' +import type { FC } from 'react' +import type { PropsWithChildren } from 'react' -import { Switch } from '@atls-ui-parts/switch' -import { useHover } from '@atls-utils/use-hover' +import React from 'react' -import { Container } from './container/index.js' -import { Expander } from './expander/index.js' -import { Items } from './items/index.js' -import { Pinner } from './pinner/index.js' -import { Wrapper } from './wrapper/index.js' -import { usePinnedState } from './hooks/index.js' +import { Switch } from '@atls-ui-parts/switch' +import { useHover } from '@atls-utils/use-hover' + +import { Container } from './container/index.js' +import { Expander } from './expander/index.js' +import { Items } from './items/index.js' +import { Pinner } from './pinner/index.js' +import { Wrapper } from './wrapper/index.js' +import { usePinnedState } from './hooks/index.js' export const Sidebar: FC = ({ children }) => { const [hovered, hoverProps] = useHover() diff --git a/ui-parts/sidebar/src/sidebar.stories.tsx b/ui-parts/sidebar/src/sidebar.stories.tsx index 3e5e7821..16f569b0 100644 --- a/ui-parts/sidebar/src/sidebar.stories.tsx +++ b/ui-parts/sidebar/src/sidebar.stories.tsx @@ -1,14 +1,15 @@ -import { Meta } from '@storybook/react' -import { StoryObj } from '@storybook/react' -import React from 'react' +import type { Meta } from '@storybook/react' +import type { StoryObj } from '@storybook/react' -import { Column } from '@atls-ui-parts/layout' -import { Layout } from '@atls-ui-parts/layout' +import React from 'react' -import { Item } from './item/index.js' -import { ItemIcon } from './item/index.js' -import { ItemLabel } from './item/index.js' -import { Sidebar } from './sidebar.component.js' +import { Column } from '@atls-ui-parts/layout' +import { Layout } from '@atls-ui-parts/layout' + +import { Item } from './item/index.js' +import { ItemIcon } from './item/index.js' +import { ItemLabel } from './item/index.js' +import { Sidebar } from './sidebar.component.js' const meta: Meta = { title: 'Components/Sidebar', diff --git a/ui-parts/sidebar/src/wrapper/wrapper.component.tsx b/ui-parts/sidebar/src/wrapper/wrapper.component.tsx index 9a09a003..20541820 100644 --- a/ui-parts/sidebar/src/wrapper/wrapper.component.tsx +++ b/ui-parts/sidebar/src/wrapper/wrapper.component.tsx @@ -1,8 +1,10 @@ -import { FC } from 'react' +import type { FC } from 'react' + +import type { WrapperProps } from './wrapper.interfaces.js' + import { clsx } from 'clsx' import React from 'react' -import { WrapperProps } from './wrapper.interfaces.js' import { pinnedWrapperStyles } from './wrapper.css.js' import { baseWrapperStyles } from './wrapper.css.js' diff --git a/ui-parts/sidebar/src/wrapper/wrapper.interfaces.ts b/ui-parts/sidebar/src/wrapper/wrapper.interfaces.ts index a47f1237..58b7bd9a 100644 --- a/ui-parts/sidebar/src/wrapper/wrapper.interfaces.ts +++ b/ui-parts/sidebar/src/wrapper/wrapper.interfaces.ts @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'react' +import type { HTMLAttributes } from 'react' export interface WrapperProps extends HTMLAttributes { pinned?: boolean diff --git a/ui-parts/swiper/src/swiper.component.tsx b/ui-parts/swiper/src/swiper.component.tsx index 3f7e5906..7d126482 100644 --- a/ui-parts/swiper/src/swiper.component.tsx +++ b/ui-parts/swiper/src/swiper.component.tsx @@ -1,9 +1,10 @@ import 'swiper/css' -import { FC } from 'react' -import { Swiper } from 'swiper/react' -import { SwiperProps } from 'swiper/react' -import React from 'react' +import type { FC } from 'react' +import type { SwiperProps } from 'swiper/react' + +import { Swiper } from 'swiper/react' +import React from 'react' export const BaseSwiper: FC = ({ width, style, ...props }) => ( {Array.from({ length: 7 }, (_, index) => ( diff --git a/ui-parts/switch/src/handle/handle.component.tsx b/ui-parts/switch/src/handle/handle.component.tsx index 434c0c14..92309a50 100644 --- a/ui-parts/switch/src/handle/handle.component.tsx +++ b/ui-parts/switch/src/handle/handle.component.tsx @@ -1,10 +1,11 @@ -import { FC } from 'react' -import { PropsWithChildren } from 'react' -import { clsx } from 'clsx' -import React from 'react' +import type { FC } from 'react' +import type { PropsWithChildren } from 'react' -import { baseHandleStyles } from './handle.css.js' -import { handleSprinkles } from './handle.css.js' +import { clsx } from 'clsx' +import React from 'react' + +import { baseHandleStyles } from './handle.css.js' +import { handleSprinkles } from './handle.css.js' export const Handle: FC = ({ children, ...props }) => { const { className, style, otherProps } = handleSprinkles(props) @@ -13,7 +14,7 @@ export const Handle: FC = ({ children, ...props }) => {