From 2406f6deb450f03eaf9c96b4664d224269ee98de Mon Sep 17 00:00:00 2001 From: matheusps Date: Tue, 21 Nov 2023 13:40:03 -0300 Subject: [PATCH] feat(tokens): create tokens package --- .storybook/themeDecorator.jsx | 5 +- packages/components/package.json | 8 ++- .../src/action/stories/action.stories.tsx | 1 - packages/components/src/alert/alert.tsx | 1 + .../src/alert/stories/alert.stories.tsx | 2 - packages/components/src/bleed/bleed.tsx | 1 + .../src/bleed/stories/bleed.stories.tsx | 1 - packages/components/src/button/button.tsx | 1 + .../src/button/stories/button.stories.tsx | 1 - packages/components/src/center/center.tsx | 1 + .../src/center/stories/center.stories.tsx | 1 - packages/components/src/checkbox/checkbox.tsx | 2 +- .../stories/checkbox-integrations.stories.tsx | 2 - .../src/checkbox/stories/checkbox.stories.tsx | 2 - .../components/src/clickable/clickable.tsx | 1 + .../clickable/stories/clickable.stories.tsx | 2 - .../src/combobox/stories/combobox.stories.tsx | 1 - .../src/compose/stories/compose.stories.tsx | 1 - packages/components/src/content/content.tsx | 1 + .../src/content/stories/content.stories.tsx | 1 - packages/components/src/field/field.tsx | 1 + .../src/field/stories/field.stories.tsx | 8 +-- packages/components/src/filter/filter.tsx | 1 + .../src/filter/stories/filter.stories.tsx | 2 - packages/components/src/flex/flex.tsx | 1 + .../src/flex/stories/flex.stories.tsx | 1 - packages/components/src/grid/grid.tsx | 1 + .../src/grid/stories/grid.stories.tsx | 1 - .../src/icon-button/icon-button.tsx | 1 + .../stories/icon-button.stories.tsx | 7 +-- packages/components/src/link-box/link-box.tsx | 1 + .../src/link-box/stories/link-box.stories.tsx | 2 - packages/components/src/link/link.tsx | 1 + .../src/link/stories/link.stories.tsx | 2 - packages/components/src/menu/menu.tsx | 1 + .../src/menu/stories/menu.stories.tsx | 2 - packages/components/src/modal/modal.tsx | 2 + .../src/modal/stories/modal.stories.tsx | 2 - .../components/src/pagination/pagination.tsx | 1 + .../pagination/stories/pagination.stories.tsx | 2 - packages/components/src/popover/popover.tsx | 1 + .../src/popover/stories/popover.stories.tsx | 2 - packages/components/src/radio/radio-group.tsx | 1 + packages/components/src/radio/radio.css | 8 +-- packages/components/src/radio/radio.tsx | 1 + .../src/radio/stories/radio.stories.tsx | 4 -- .../src/scroll-area/scroll-area.tsx | 1 + .../stories/scroll-area.stories.tsx | 2 - packages/components/src/search/search.tsx | 1 + .../src/search/stories/search.stories.tsx | 3 -- .../src/select-field/select-field.tsx | 1 + .../stories/select-field.stories.tsx | 2 - packages/components/src/select/select.tsx | 1 + .../src/select/stories/select.stories.tsx | 2 - .../src/simple-table/simple-table.tsx | 1 + .../stories/clickable-rows.stories.tsx | 2 - .../stories/custom-column-widths.stories.tsx | 2 - .../simple-table/stories/detail.stories.tsx | 2 - .../stories/fixed-first-column.stories.tsx | 2 - .../stories/pagination.stories.tsx | 2 - .../stories/row-links.stories.tsx | 2 - .../stories/selection.stories.tsx | 2 - .../stories/simple-table.stories.tsx | 2 - .../simple-table/stories/sorting.stories.tsx | 3 -- .../stories/sticky-header.stories.tsx | 2 - .../stories/table-nesting.stories.tsx | 2 - packages/components/src/skeleton/skeleton.tsx | 1 + .../src/skeleton/stories/skeleton.stories.tsx | 2 - packages/components/src/spinner/spinner.tsx | 1 + .../src/spinner/stories/spinner.stories.tsx | 1 - packages/components/src/stack/stack.tsx | 1 + .../src/stack/stories/stack.stories.tsx | 1 - packages/components/src/styles.css | 37 -------------- .../src/tab/stories/tab.stories.tsx | 1 - packages/components/src/tab/tab.tsx | 1 + .../src/table/stories/table.stories.tsx | 2 - packages/components/src/table/table.tsx | 1 + .../src/tag/stories/tag.stories.tsx | 2 - packages/components/src/tag/tag.tsx | 1 + .../text-input/stories/text-input.stories.tsx | 2 - .../components/src/text-input/text-input.css | 31 ++++++----- .../components/src/text-input/text-input.tsx | 1 + .../src/text/stories/text.stories.tsx | 2 - packages/components/src/text/text.tsx | 1 + .../src/textarea/stories/textarea.stories.tsx | 2 - packages/components/src/textarea/textarea.tsx | 1 + .../src/tooltip/stories/tooltip.stories.tsx | 2 - packages/components/src/tooltip/tooltip.tsx | 1 + .../stories/visually-hidden.stories.tsx | 1 - packages/tokens/.gitignore | 2 + packages/tokens/CHANGELOG.md | 0 packages/tokens/package.json | 51 +++++++++++++++++++ .../shoreline.config.ts | 0 packages/tokens/src/index.ts | 2 + packages/tokens/src/styles.css | 1 + packages/tokens/tsconfig.json | 14 +++++ packages/tokens/tsup.config.ts | 12 +++++ pnpm-lock.yaml | 25 +++++++++ .../stories/component.stories.tsx.hbs | 2 +- 99 files changed, 174 insertions(+), 161 deletions(-) delete mode 100644 packages/components/src/styles.css create mode 100644 packages/tokens/.gitignore create mode 100644 packages/tokens/CHANGELOG.md create mode 100644 packages/tokens/package.json rename packages/{components => tokens}/shoreline.config.ts (100%) create mode 100644 packages/tokens/src/index.ts create mode 100644 packages/tokens/src/styles.css create mode 100644 packages/tokens/tsconfig.json create mode 100644 packages/tokens/tsup.config.ts diff --git a/.storybook/themeDecorator.jsx b/.storybook/themeDecorator.jsx index ea231c9177..b9700838c7 100644 --- a/.storybook/themeDecorator.jsx +++ b/.storybook/themeDecorator.jsx @@ -1,6 +1,9 @@ import React from 'react' import { ThemeProvider } from '../packages/admin-ui/dist/vtex-admin-ui.esm' +import '../packages/tokens/dist/styles.min.css' export function themeDecorator(storyFn) { - return {storyFn()} + return ( + {storyFn()} + ) } diff --git a/packages/components/package.json b/packages/components/package.json index 86fdfde68d..c18a025671 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -17,17 +17,15 @@ "import": "./dist/esm/index.js", "types": "./dist/index.d.ts" }, - "./styles": "./dist/styles.min.css" + "./styles": "./dist/index.css" }, "engines": { "node": ">=16" }, "scripts": { - "prebuild": "rm -rf dist && rm -rf shoreline && pnpm run theme", + "prebuild": "rm -rf dist", "dev": "tsup --watch", - "build": "npm run prebuild && tsup && npm run build:css", - "build:css": "lightningcss --minify --bundle --targets '>= 0.25%' ./src/styles.css -o ./dist/styles.min.css", - "theme": "shorelinecss theme" + "build": "tsup" }, "repository": { "directory": "packages/admin-ui", diff --git a/packages/components/src/action/stories/action.stories.tsx b/packages/components/src/action/stories/action.stories.tsx index 5f99d36df8..596eaa3406 100644 --- a/packages/components/src/action/stories/action.stories.tsx +++ b/packages/components/src/action/stories/action.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Action } from '../index' diff --git a/packages/components/src/alert/alert.tsx b/packages/components/src/alert/alert.tsx index ff22a9f829..c1e6394391 100644 --- a/packages/components/src/alert/alert.tsx +++ b/packages/components/src/alert/alert.tsx @@ -7,6 +7,7 @@ import { } from '@vtex/shoreline-icons' import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react' import React, { forwardRef } from 'react' +import './alert.css' import { IconButton } from '../icon-button' diff --git a/packages/components/src/alert/stories/alert.stories.tsx b/packages/components/src/alert/stories/alert.stories.tsx index 0754e20c13..fb8d37f7d0 100644 --- a/packages/components/src/alert/stories/alert.stories.tsx +++ b/packages/components/src/alert/stories/alert.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../alert.css' import React, { useState } from 'react' import { Alert } from '../index' diff --git a/packages/components/src/bleed/bleed.tsx b/packages/components/src/bleed/bleed.tsx index b731bcd27f..c250c57d67 100644 --- a/packages/components/src/bleed/bleed.tsx +++ b/packages/components/src/bleed/bleed.tsx @@ -1,6 +1,7 @@ import type { CSSProperties, ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { cssVar } from '@vtex/shoreline-utils' +import './bleed.css' const defaultBleed = '0rem' diff --git a/packages/components/src/bleed/stories/bleed.stories.tsx b/packages/components/src/bleed/stories/bleed.stories.tsx index 7d25290129..e32e1114d3 100644 --- a/packages/components/src/bleed/stories/bleed.stories.tsx +++ b/packages/components/src/bleed/stories/bleed.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Bleed } from '../index' diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx index 9292ce9cb5..719c0e7121 100644 --- a/packages/components/src/button/button.tsx +++ b/packages/components/src/button/button.tsx @@ -5,6 +5,7 @@ import { Button as BaseButton } from '@ariakit/react' import { Spinner } from '../spinner' import { Center } from '../center' import { Compose, Composable } from '../compose' +import './button.css' /** * Buttons triggers allow users to identify and start the most important actions in a container. diff --git a/packages/components/src/button/stories/button.stories.tsx b/packages/components/src/button/stories/button.stories.tsx index f45c5a08a2..b35248c1c1 100644 --- a/packages/components/src/button/stories/button.stories.tsx +++ b/packages/components/src/button/stories/button.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import './style.css' import React, { Fragment } from 'react' diff --git a/packages/components/src/center/center.tsx b/packages/components/src/center/center.tsx index 04f812288c..7ddad9f3fe 100644 --- a/packages/components/src/center/center.tsx +++ b/packages/components/src/center/center.tsx @@ -1,5 +1,6 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './center.css' export const Center = forwardRef(function Center( props, diff --git a/packages/components/src/center/stories/center.stories.tsx b/packages/components/src/center/stories/center.stories.tsx index fa5954f6c0..4a27c4f309 100644 --- a/packages/components/src/center/stories/center.stories.tsx +++ b/packages/components/src/center/stories/center.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Center } from '../index' diff --git a/packages/components/src/checkbox/checkbox.tsx b/packages/components/src/checkbox/checkbox.tsx index d58e1c5fd7..aa7c98edd2 100644 --- a/packages/components/src/checkbox/checkbox.tsx +++ b/packages/components/src/checkbox/checkbox.tsx @@ -4,9 +4,9 @@ import { IconCheckSmall, IconMinusSmall } from '@vtex/shoreline-icons' import { VisuallyHidden } from '../visually-hidden' import { useAriaCheckbox } from './use-aria-checkbox' - import type { AriaCheckboxProps } from './use-aria-checkbox' import { Text } from '../text' +import './checkbox.css' /** * Checkbox controls allow users to make multiple independent choices in a form where there are at most five options and each option is binary. diff --git a/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx b/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx index 516d89a98f..844035baf8 100644 --- a/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx +++ b/packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../checkbox.css' import React, { useMemo, useState } from 'react' import { useForm, Controller } from 'react-hook-form' import { FixedSizeList } from 'react-window' diff --git a/packages/components/src/checkbox/stories/checkbox.stories.tsx b/packages/components/src/checkbox/stories/checkbox.stories.tsx index e2435a76dd..9976f4b992 100644 --- a/packages/components/src/checkbox/stories/checkbox.stories.tsx +++ b/packages/components/src/checkbox/stories/checkbox.stories.tsx @@ -1,6 +1,4 @@ import React, { useState } from 'react' -import '../../../dist/styles.min.css' -import '../checkbox.css' import { Checkbox, CheckboxField, CheckboxGroup } from '../index' import { VisuallyHidden } from '@ariakit/react' diff --git a/packages/components/src/clickable/clickable.tsx b/packages/components/src/clickable/clickable.tsx index 9b9555460e..18292e1304 100644 --- a/packages/components/src/clickable/clickable.tsx +++ b/packages/components/src/clickable/clickable.tsx @@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Compose } from '../compose' import { hasSomeTextSelected } from '@vtex/shoreline-utils' +import './clickable.css' /** * Represents clickable surfaces diff --git a/packages/components/src/clickable/stories/clickable.stories.tsx b/packages/components/src/clickable/stories/clickable.stories.tsx index e46afee569..9a0e81e526 100644 --- a/packages/components/src/clickable/stories/clickable.stories.tsx +++ b/packages/components/src/clickable/stories/clickable.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../clickable.css' import React from 'react' import { Clickable, ClickableBubble } from '../index' diff --git a/packages/components/src/combobox/stories/combobox.stories.tsx b/packages/components/src/combobox/stories/combobox.stories.tsx index b466934b63..8923fef846 100644 --- a/packages/components/src/combobox/stories/combobox.stories.tsx +++ b/packages/components/src/combobox/stories/combobox.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React, { startTransition, useMemo, useState } from 'react' import { matchSorter } from 'match-sorter' diff --git a/packages/components/src/compose/stories/compose.stories.tsx b/packages/components/src/compose/stories/compose.stories.tsx index 365333ce24..dc22c993f2 100644 --- a/packages/components/src/compose/stories/compose.stories.tsx +++ b/packages/components/src/compose/stories/compose.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React, { useRef } from 'react' import { Compose, Composable } from '../index' diff --git a/packages/components/src/content/content.tsx b/packages/components/src/content/content.tsx index b9d515ab00..492a4a15a0 100644 --- a/packages/components/src/content/content.tsx +++ b/packages/components/src/content/content.tsx @@ -1,5 +1,6 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './content.css' import type { ContentContainerAs } from './types' diff --git a/packages/components/src/content/stories/content.stories.tsx b/packages/components/src/content/stories/content.stories.tsx index 1e536eadf9..600732147b 100644 --- a/packages/components/src/content/stories/content.stories.tsx +++ b/packages/components/src/content/stories/content.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import './styles.css' import React from 'react' diff --git a/packages/components/src/field/field.tsx b/packages/components/src/field/field.tsx index 80caac71ac..fd53e3a9a3 100644 --- a/packages/components/src/field/field.tsx +++ b/packages/components/src/field/field.tsx @@ -1,5 +1,6 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './field.css' export const Field = forwardRef(function Field( props, diff --git a/packages/components/src/field/stories/field.stories.tsx b/packages/components/src/field/stories/field.stories.tsx index f135a745a1..4f5899544d 100644 --- a/packages/components/src/field/stories/field.stories.tsx +++ b/packages/components/src/field/stories/field.stories.tsx @@ -1,13 +1,9 @@ -import '../../../dist/styles.min.css' -import './style.css' -import '../field.css' - import React from 'react' +import { Checkbox, Radio } from '@ariakit/react' import { Field, FieldLabel, FieldMessage } from '../index' import { Stack } from '../../stack' - -import { Checkbox, Radio } from '@ariakit/react' +import './style.css' export default { title: 'shoreline-components/field', diff --git a/packages/components/src/filter/filter.tsx b/packages/components/src/filter/filter.tsx index de196b8a76..05a330ddfc 100644 --- a/packages/components/src/filter/filter.tsx +++ b/packages/components/src/filter/filter.tsx @@ -6,6 +6,7 @@ import { FilterTrigger } from './filter-trigger' import type { FilterPopoverProps } from './filter-popover' import { FilterPopover } from './filter-popover' import { FilterList } from './filter-list' +import './filter.css' /** * Filter component diff --git a/packages/components/src/filter/stories/filter.stories.tsx b/packages/components/src/filter/stories/filter.stories.tsx index 96a8ccae2b..19090af334 100644 --- a/packages/components/src/filter/stories/filter.stories.tsx +++ b/packages/components/src/filter/stories/filter.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../filter.css' import React, { useState, useMemo, startTransition } from 'react' import { matchSorter } from 'match-sorter' diff --git a/packages/components/src/flex/flex.tsx b/packages/components/src/flex/flex.tsx index 5545350d0d..ecf1bc8a87 100644 --- a/packages/components/src/flex/flex.tsx +++ b/packages/components/src/flex/flex.tsx @@ -1,6 +1,7 @@ import type { CSSProperties, ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import type { CSSProperty } from '@vtex/shoreline-utils' +import './flex.css' export const Flex = forwardRef(function Flex( props, diff --git a/packages/components/src/flex/stories/flex.stories.tsx b/packages/components/src/flex/stories/flex.stories.tsx index bede22e10f..dfff98715a 100644 --- a/packages/components/src/flex/stories/flex.stories.tsx +++ b/packages/components/src/flex/stories/flex.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Flex } from '../index' diff --git a/packages/components/src/grid/grid.tsx b/packages/components/src/grid/grid.tsx index 553d373be0..4d3d22936f 100644 --- a/packages/components/src/grid/grid.tsx +++ b/packages/components/src/grid/grid.tsx @@ -1,6 +1,7 @@ import type { CSSProperties, ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import type { CSSProperty } from '@vtex/shoreline-utils' +import './grid.css' export const Grid = forwardRef(function Grid( props, diff --git a/packages/components/src/grid/stories/grid.stories.tsx b/packages/components/src/grid/stories/grid.stories.tsx index d8613fbd3a..5c57026930 100644 --- a/packages/components/src/grid/stories/grid.stories.tsx +++ b/packages/components/src/grid/stories/grid.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Grid, GridCell } from '../index' diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx index 98b70b4b1b..b240d6bf78 100644 --- a/packages/components/src/icon-button/icon-button.tsx +++ b/packages/components/src/icon-button/icon-button.tsx @@ -4,6 +4,7 @@ import React, { forwardRef } from 'react' import type { ButtonProps } from '../button' import { Button } from '../button' import { AccessibleIcon } from '../accessible-icon' +import './icon-button.css' /** * A button designed specifically for usage with a single icon. diff --git a/packages/components/src/icon-button/stories/icon-button.stories.tsx b/packages/components/src/icon-button/stories/icon-button.stories.tsx index 0a130fab80..8307987bbf 100644 --- a/packages/components/src/icon-button/stories/icon-button.stories.tsx +++ b/packages/components/src/icon-button/stories/icon-button.stories.tsx @@ -1,11 +1,8 @@ -import '../../../dist/styles.min.css' - import React, { useState } from 'react' -import { IconButton } from '../index' -import { Stack } from '../../stack' import { IconTrash } from '@vtex/shoreline-icons' - import { AccessibleIcon } from '../../accessible-icon' +import { Stack } from '../../stack' +import { IconButton } from '../index' export default { title: 'shoreline-components/icon-button', diff --git a/packages/components/src/link-box/link-box.tsx b/packages/components/src/link-box/link-box.tsx index 85bad97782..79fa1c0f6a 100644 --- a/packages/components/src/link-box/link-box.tsx +++ b/packages/components/src/link-box/link-box.tsx @@ -5,6 +5,7 @@ import type { ClickableProps } from '../clickable' import { Clickable } from '../clickable' import type { NavigationTarget } from './link-box-utils' import { navigate } from './link-box-utils' +import './link-box.css' /** * A container that acts as a link. It allows text selection and stop its children event propagation. diff --git a/packages/components/src/link-box/stories/link-box.stories.tsx b/packages/components/src/link-box/stories/link-box.stories.tsx index 4094d8e281..f6bf246900 100644 --- a/packages/components/src/link-box/stories/link-box.stories.tsx +++ b/packages/components/src/link-box/stories/link-box.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../link-box.css' import React from 'react' import { Button } from '../../button' import { Menu, MenuTrigger, MenuItem, MenuProvider } from '../../menu' diff --git a/packages/components/src/link/link.tsx b/packages/components/src/link/link.tsx index 54d94f7b80..70eaf2c353 100644 --- a/packages/components/src/link/link.tsx +++ b/packages/components/src/link/link.tsx @@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Compose } from '../compose' +import './link.css' /** * Anchor component diff --git a/packages/components/src/link/stories/link.stories.tsx b/packages/components/src/link/stories/link.stories.tsx index 3eefe7e71e..543a9e0ccb 100644 --- a/packages/components/src/link/stories/link.stories.tsx +++ b/packages/components/src/link/stories/link.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../link.css' import React from 'react' import { Link } from '../index' diff --git a/packages/components/src/menu/menu.tsx b/packages/components/src/menu/menu.tsx index 4dbe78c361..4e22d94c83 100644 --- a/packages/components/src/menu/menu.tsx +++ b/packages/components/src/menu/menu.tsx @@ -1,6 +1,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Menu as BaseMenu } from '@ariakit/react' +import './menu.css' export const Menu = forwardRef(function Menu( props, diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx index c86feec95e..ea4f047afd 100644 --- a/packages/components/src/menu/stories/menu.stories.tsx +++ b/packages/components/src/menu/stories/menu.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../menu.css' import React from 'react' import { IconCaretDown, diff --git a/packages/components/src/modal/modal.tsx b/packages/components/src/modal/modal.tsx index a77f6e09db..ae5c1970d9 100644 --- a/packages/components/src/modal/modal.tsx +++ b/packages/components/src/modal/modal.tsx @@ -1,7 +1,9 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Dialog } from '@ariakit/react' + import { Container } from '../content' +import './modal.css' export const Modal = forwardRef(function Modal( props, diff --git a/packages/components/src/modal/stories/modal.stories.tsx b/packages/components/src/modal/stories/modal.stories.tsx index af5c34bb8d..c79e288b03 100644 --- a/packages/components/src/modal/stories/modal.stories.tsx +++ b/packages/components/src/modal/stories/modal.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../modal.css' import React, { useState } from 'react' import { Modal, ModalHeader } from '../index' diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx index 66afc692ff..8881a7b9df 100644 --- a/packages/components/src/pagination/pagination.tsx +++ b/packages/components/src/pagination/pagination.tsx @@ -10,6 +10,7 @@ import { import { AccessibleIcon } from '../accessible-icon' import { VisuallyHidden } from '../visually-hidden' import { useId } from '@vtex/shoreline-utils' +import './pagination.css' /** * Pagination triggers allow merchants to view the size of a list and navigate between pages. diff --git a/packages/components/src/pagination/stories/pagination.stories.tsx b/packages/components/src/pagination/stories/pagination.stories.tsx index c5f0880616..6adac42634 100644 --- a/packages/components/src/pagination/stories/pagination.stories.tsx +++ b/packages/components/src/pagination/stories/pagination.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../pagination.css' import './style.css' import React, { useState } from 'react' diff --git a/packages/components/src/popover/popover.tsx b/packages/components/src/popover/popover.tsx index 42a7bfe121..36ab8ac6e4 100644 --- a/packages/components/src/popover/popover.tsx +++ b/packages/components/src/popover/popover.tsx @@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Popover as BasePopover } from '@ariakit/react' import { Container } from '../content' +import './popover.css' /** * Popover containers allow merchants to access and interact with more diff --git a/packages/components/src/popover/stories/popover.stories.tsx b/packages/components/src/popover/stories/popover.stories.tsx index 2307d9d0cf..83d973e84b 100644 --- a/packages/components/src/popover/stories/popover.stories.tsx +++ b/packages/components/src/popover/stories/popover.stories.tsx @@ -1,7 +1,5 @@ import React from 'react' -import '../../../dist/styles.min.css' -import '../popover.css' import './styles.css' import { Content } from '../../content' diff --git a/packages/components/src/radio/radio-group.tsx b/packages/components/src/radio/radio-group.tsx index 85a0704633..dddb865a03 100644 --- a/packages/components/src/radio/radio-group.tsx +++ b/packages/components/src/radio/radio-group.tsx @@ -9,6 +9,7 @@ import { import { Field, FieldLabel, FieldMessage } from '../field' import { Stack } from '../stack' import { useId } from '@vtex/shoreline-utils' +import './radio-group.css' export const RadioGroup = forwardRef( function Radio(props, ref) { diff --git a/packages/components/src/radio/radio.css b/packages/components/src/radio/radio.css index 6ba2aee2ae..9688046aec 100644 --- a/packages/components/src/radio/radio.css +++ b/packages/components/src/radio/radio.css @@ -22,7 +22,7 @@ &:hover { border: var(--sl-element-border-hover); - }; + } &:checked { background-color: var(--sl-element-bg-checked); @@ -30,7 +30,7 @@ &:hover { border: var(--sl-element-border-checked); - }; + } &:after { background-color: var(--sl-element-check-bg); @@ -42,7 +42,7 @@ } &:after { - content: ""; + content: ''; width: 0.5rem; height: 0.5rem; display: block; @@ -84,5 +84,5 @@ --sl-element-focus-ring-checked: none; } } - }; + } } diff --git a/packages/components/src/radio/radio.tsx b/packages/components/src/radio/radio.tsx index 041ad5b6d5..8b62d3924e 100644 --- a/packages/components/src/radio/radio.tsx +++ b/packages/components/src/radio/radio.tsx @@ -3,6 +3,7 @@ import React, { forwardRef } from 'react' import { Radio as BaseRadio } from '@ariakit/react' import { Field, FieldLabel } from '../field' import { useId } from '@vtex/shoreline-utils' +import './radio.css' export const Radio = forwardRef(function Radio( props, diff --git a/packages/components/src/radio/stories/radio.stories.tsx b/packages/components/src/radio/stories/radio.stories.tsx index 9139e324b9..2b52843adb 100644 --- a/packages/components/src/radio/stories/radio.stories.tsx +++ b/packages/components/src/radio/stories/radio.stories.tsx @@ -1,7 +1,3 @@ -import '../../../dist/styles.min.css' -import '../radio.css' -import '../radio-group.css' -import '../../field/field.css' import React, { useEffect, useState } from 'react' import { Radio, RadioGroup, useRadioState } from '../index' diff --git a/packages/components/src/scroll-area/scroll-area.tsx b/packages/components/src/scroll-area/scroll-area.tsx index 4ae1814bb8..4ae1679ea0 100644 --- a/packages/components/src/scroll-area/scroll-area.tsx +++ b/packages/components/src/scroll-area/scroll-area.tsx @@ -1,6 +1,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Root, Viewport, Scrollbar, Thumb } from '@radix-ui/react-scroll-area' +import './scroll-area.css' /** * Cross-browser scroll styling diff --git a/packages/components/src/scroll-area/stories/scroll-area.stories.tsx b/packages/components/src/scroll-area/stories/scroll-area.stories.tsx index c4e787e76f..4558d22860 100644 --- a/packages/components/src/scroll-area/stories/scroll-area.stories.tsx +++ b/packages/components/src/scroll-area/stories/scroll-area.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../scroll-area.css' import React from 'react' import { ScrollArea } from '../index' diff --git a/packages/components/src/search/search.tsx b/packages/components/src/search/search.tsx index 9bcb12959c..573a6681cc 100644 --- a/packages/components/src/search/search.tsx +++ b/packages/components/src/search/search.tsx @@ -5,6 +5,7 @@ import { IconMagnifyingGlassSmall, IconXCircle } from '@vtex/shoreline-icons' import { useId } from '@vtex/shoreline-utils' import { Spinner } from '../spinner' import { VisuallyHidden } from '../visually-hidden' +import './search.css' export const Search = forwardRef(function Search( props, diff --git a/packages/components/src/search/stories/search.stories.tsx b/packages/components/src/search/stories/search.stories.tsx index 9595ed7043..ae085833d4 100644 --- a/packages/components/src/search/stories/search.stories.tsx +++ b/packages/components/src/search/stories/search.stories.tsx @@ -1,6 +1,3 @@ -import '../../../dist/styles.min.css' -import '../search.css' - import React from 'react' import { Search } from '../index' diff --git a/packages/components/src/select-field/select-field.tsx b/packages/components/src/select-field/select-field.tsx index abdf38e45d..4cfd70f759 100644 --- a/packages/components/src/select-field/select-field.tsx +++ b/packages/components/src/select-field/select-field.tsx @@ -3,6 +3,7 @@ import React, { forwardRef } from 'react' import { Field, FieldLabel, FieldMessage } from '../field' import { IconCaretUpDownSmall } from '@vtex/shoreline-icons' import { useId } from '@vtex/shoreline-utils' +import './select-field.css' /** * Select fields allow merchants to choose a single option from a list diff --git a/packages/components/src/select-field/stories/select-field.stories.tsx b/packages/components/src/select-field/stories/select-field.stories.tsx index 2f9a2f8104..633d868f96 100644 --- a/packages/components/src/select-field/stories/select-field.stories.tsx +++ b/packages/components/src/select-field/stories/select-field.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../select-field.css' import './style.css' import React, { useState } from 'react' diff --git a/packages/components/src/select/select.tsx b/packages/components/src/select/select.tsx index e48aee554e..59627f59f7 100644 --- a/packages/components/src/select/select.tsx +++ b/packages/components/src/select/select.tsx @@ -1,6 +1,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Select as SelectTrigger } from '@ariakit/react' +import './select.css' export const Select = forwardRef( function Select(props, ref) { diff --git a/packages/components/src/select/stories/select.stories.tsx b/packages/components/src/select/stories/select.stories.tsx index ee9de5edbc..8b090cfbac 100644 --- a/packages/components/src/select/stories/select.stories.tsx +++ b/packages/components/src/select/stories/select.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../select.css' import React, { startTransition, useMemo, useState } from 'react' import { matchSorter } from 'match-sorter' diff --git a/packages/components/src/simple-table/simple-table.tsx b/packages/components/src/simple-table/simple-table.tsx index 052b710583..81078423dd 100644 --- a/packages/components/src/simple-table/simple-table.tsx +++ b/packages/components/src/simple-table/simple-table.tsx @@ -28,6 +28,7 @@ import type { NavigationTarget } from '../link-box/link-box-utils' import { LinkBox } from '../link-box' import { Clickable } from '../clickable' import { IconArrowDown, IconArrowUp } from '@vtex/shoreline-icons' +import './simple-table.css' /** * Controlled table render built on top of TanStack/Table API diff --git a/packages/components/src/simple-table/stories/clickable-rows.stories.tsx b/packages/components/src/simple-table/stories/clickable-rows.stories.tsx index 136c57062e..43661e1cde 100644 --- a/packages/components/src/simple-table/stories/clickable-rows.stories.tsx +++ b/packages/components/src/simple-table/stories/clickable-rows.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import type { ColumnDef } from '@tanstack/react-table' import { SimpleTable } from '../index' diff --git a/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx b/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx index 67cb685e5b..f507f5a092 100644 --- a/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx +++ b/packages/components/src/simple-table/stories/custom-column-widths.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import { IconCloudArrowUp, diff --git a/packages/components/src/simple-table/stories/detail.stories.tsx b/packages/components/src/simple-table/stories/detail.stories.tsx index ff03b12f72..611a406da8 100644 --- a/packages/components/src/simple-table/stories/detail.stories.tsx +++ b/packages/components/src/simple-table/stories/detail.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import { IconCaretDown, diff --git a/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx b/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx index eed149cd48..7630171fb7 100644 --- a/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx +++ b/packages/components/src/simple-table/stories/fixed-first-column.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import { IconCloudArrowUp, diff --git a/packages/components/src/simple-table/stories/pagination.stories.tsx b/packages/components/src/simple-table/stories/pagination.stories.tsx index 04c0452824..a2b5e54d51 100644 --- a/packages/components/src/simple-table/stories/pagination.stories.tsx +++ b/packages/components/src/simple-table/stories/pagination.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useEffect, useMemo, useState } from 'react' import { IconCloudArrowUp, diff --git a/packages/components/src/simple-table/stories/row-links.stories.tsx b/packages/components/src/simple-table/stories/row-links.stories.tsx index d48e90b9bf..effb09afb8 100644 --- a/packages/components/src/simple-table/stories/row-links.stories.tsx +++ b/packages/components/src/simple-table/stories/row-links.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import type { ColumnDef } from '@tanstack/react-table' import { SimpleTable } from '../index' diff --git a/packages/components/src/simple-table/stories/selection.stories.tsx b/packages/components/src/simple-table/stories/selection.stories.tsx index 54d512542c..1159e87ce3 100644 --- a/packages/components/src/simple-table/stories/selection.stories.tsx +++ b/packages/components/src/simple-table/stories/selection.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import type { HTMLProps } from 'react' import React, { useMemo } from 'react' import { diff --git a/packages/components/src/simple-table/stories/simple-table.stories.tsx b/packages/components/src/simple-table/stories/simple-table.stories.tsx index 02c2eeb304..5d33d2cb4c 100644 --- a/packages/components/src/simple-table/stories/simple-table.stories.tsx +++ b/packages/components/src/simple-table/stories/simple-table.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import type { HTMLProps } from 'react' import React, { useMemo } from 'react' import { diff --git a/packages/components/src/simple-table/stories/sorting.stories.tsx b/packages/components/src/simple-table/stories/sorting.stories.tsx index 14dedda231..12e1204e07 100644 --- a/packages/components/src/simple-table/stories/sorting.stories.tsx +++ b/packages/components/src/simple-table/stories/sorting.stories.tsx @@ -1,6 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' - import React, { useMemo, useState } from 'react' import type { ColumnDef, SortingState } from '@tanstack/react-table' diff --git a/packages/components/src/simple-table/stories/sticky-header.stories.tsx b/packages/components/src/simple-table/stories/sticky-header.stories.tsx index edf085cb54..de0e6ab495 100644 --- a/packages/components/src/simple-table/stories/sticky-header.stories.tsx +++ b/packages/components/src/simple-table/stories/sticky-header.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import { IconCloudArrowUp, diff --git a/packages/components/src/simple-table/stories/table-nesting.stories.tsx b/packages/components/src/simple-table/stories/table-nesting.stories.tsx index 135d49ca93..3cd593ab4e 100644 --- a/packages/components/src/simple-table/stories/table-nesting.stories.tsx +++ b/packages/components/src/simple-table/stories/table-nesting.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../simple-table.css' import React, { useMemo } from 'react' import type { ColumnDef } from '@tanstack/react-table' diff --git a/packages/components/src/skeleton/skeleton.tsx b/packages/components/src/skeleton/skeleton.tsx index f7104a77f8..32756d91d2 100644 --- a/packages/components/src/skeleton/skeleton.tsx +++ b/packages/components/src/skeleton/skeleton.tsx @@ -1,5 +1,6 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './skeleton.css' export const Skeleton = forwardRef( function Skeleton(props, ref) { diff --git a/packages/components/src/skeleton/stories/skeleton.stories.tsx b/packages/components/src/skeleton/stories/skeleton.stories.tsx index b41279b890..3147940d15 100644 --- a/packages/components/src/skeleton/stories/skeleton.stories.tsx +++ b/packages/components/src/skeleton/stories/skeleton.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../skeleton.css' import React from 'react' import { Skeleton } from '../index' diff --git a/packages/components/src/spinner/spinner.tsx b/packages/components/src/spinner/spinner.tsx index 6fde9eb776..0a7fc8f1da 100644 --- a/packages/components/src/spinner/spinner.tsx +++ b/packages/components/src/spinner/spinner.tsx @@ -1,5 +1,6 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './spinner.css' const DEFAULT_SIZE = 16 const DEFAULT_DESCRIPTION = 'loading' diff --git a/packages/components/src/spinner/stories/spinner.stories.tsx b/packages/components/src/spinner/stories/spinner.stories.tsx index 15cee39bfd..e0def680b2 100644 --- a/packages/components/src/spinner/stories/spinner.stories.tsx +++ b/packages/components/src/spinner/stories/spinner.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Spinner } from '../index' diff --git a/packages/components/src/stack/stack.tsx b/packages/components/src/stack/stack.tsx index 17c717c134..3c3abc8894 100644 --- a/packages/components/src/stack/stack.tsx +++ b/packages/components/src/stack/stack.tsx @@ -1,6 +1,7 @@ import type { CSSProperties, ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { cssVar } from '@vtex/shoreline-utils' +import './stack.css' export const Stack = forwardRef(function Stack( props, diff --git a/packages/components/src/stack/stories/stack.stories.tsx b/packages/components/src/stack/stories/stack.stories.tsx index b6907d9364..3b651f8cb8 100644 --- a/packages/components/src/stack/stories/stack.stories.tsx +++ b/packages/components/src/stack/stories/stack.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import { Stack } from '../index' diff --git a/packages/components/src/styles.css b/packages/components/src/styles.css deleted file mode 100644 index 865e412b26..0000000000 --- a/packages/components/src/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -@import '../shoreline/styles.css'; -/* PLOP_INJECT_STYLES */ -@import './skeleton/skeleton.css'; -@import './tab/tab.css'; -@import './tooltip/tooltip.css'; -@import './filter/filter.css'; -@import './scroll-area/scroll-area.css'; -@import './select/select.css'; -@import './clickable/clickable.css'; -@import './link/link.css'; -@import './link-box/link-box.css'; -@import './pagination/pagination.css'; -@import './modal/modal.css'; -@import './popover/popover.css'; -@import './checkbox/checkbox.css'; -@import './simple-table/simple-table.css'; -@import './alert/alert.css'; -@import './tag/tag.css'; -@import './search/search.css'; -@import './table/table.css'; -@import './menu/menu.css'; -@import './select-field/select-field.css'; -@import './radio/radio.css'; -@import './radio/radio-group.css'; -@import './bleed/bleed.css'; -@import './button/button.css'; -@import './center/center.css'; -@import './content/content.css'; -@import './flex/flex.css'; -@import './grid/grid.css'; -@import './icon-button/icon-button.css'; -@import './spinner/spinner.css'; -@import './stack/stack.css'; -@import './text/text.css'; -@import './text-input/text-input.css'; -@import './field/field.css'; -@import './textarea/textarea.css'; diff --git a/packages/components/src/tab/stories/tab.stories.tsx b/packages/components/src/tab/stories/tab.stories.tsx index 01650ba5a5..bf3809c88f 100644 --- a/packages/components/src/tab/stories/tab.stories.tsx +++ b/packages/components/src/tab/stories/tab.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import '../tab.css' import React from 'react' diff --git a/packages/components/src/tab/tab.tsx b/packages/components/src/tab/tab.tsx index 8f263c611c..7cf75bc829 100644 --- a/packages/components/src/tab/tab.tsx +++ b/packages/components/src/tab/tab.tsx @@ -1,6 +1,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Tab as BaseTab } from '@ariakit/react' +import './tab.css' /** * @example diff --git a/packages/components/src/table/stories/table.stories.tsx b/packages/components/src/table/stories/table.stories.tsx index 9a06d4957d..cdbbf8d134 100644 --- a/packages/components/src/table/stories/table.stories.tsx +++ b/packages/components/src/table/stories/table.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../table.css' import React from 'react' import { diff --git a/packages/components/src/table/table.tsx b/packages/components/src/table/table.tsx index 73daa2dd44..b6156ab335 100644 --- a/packages/components/src/table/table.tsx +++ b/packages/components/src/table/table.tsx @@ -2,6 +2,7 @@ import { constants } from '@vtex/shoreline-utils' import type { ComponentPropsWithoutRef, CSSProperties } from 'react' import React, { forwardRef } from 'react' import { Compose } from '../compose' +import './table.css' export const Table = forwardRef(function Table( props, diff --git a/packages/components/src/tag/stories/tag.stories.tsx b/packages/components/src/tag/stories/tag.stories.tsx index 5f42fb3738..3d0360152b 100644 --- a/packages/components/src/tag/stories/tag.stories.tsx +++ b/packages/components/src/tag/stories/tag.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../tag.css' import React from 'react' import { Tag } from '../index' diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx index 3f44d940da..b843cdaa95 100644 --- a/packages/components/src/tag/tag.tsx +++ b/packages/components/src/tag/tag.tsx @@ -1,5 +1,6 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './tag.css' export const Tag = forwardRef(function Tag( props, diff --git a/packages/components/src/text-input/stories/text-input.stories.tsx b/packages/components/src/text-input/stories/text-input.stories.tsx index 084b11b54c..11729f2ebb 100644 --- a/packages/components/src/text-input/stories/text-input.stories.tsx +++ b/packages/components/src/text-input/stories/text-input.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' - import React from 'react' import { TextInput } from '../index' diff --git a/packages/components/src/text-input/text-input.css b/packages/components/src/text-input/text-input.css index 4d702fffd4..fea1bbe707 100644 --- a/packages/components/src/text-input/text-input.css +++ b/packages/components/src/text-input/text-input.css @@ -1,5 +1,5 @@ @layer sl-components { - [data-sl-text-input]{ + [data-sl-text-input] { font: var(--sl-text-body-font); letter-spacing: var(--sl-text-body-letter-spacing); } @@ -15,35 +15,35 @@ border: var(--sl-border-strong); &:hover { border: var(--sl-border-strong-hover); - }; + } &:focus-within { box-shadow: var(--sl-focus-ring); - }; + } &[data-error='true'] { border: var(--sl-border-critical-strong); &:hover { border: var(--sl-border-critical-strong-hover); - }; + } &:focus-within { box-shadow: var(--sl-focus-ring-critical); - }; - }; + } + } &[data-disabled='true'] { border: var(--sl-border-disabled); background-color: var(--sl-bg-disabled); - }; + } & > [data-sl-text-input-term] { padding: var(--sl-space-3) var(--sl-space-4); height: 100%; &[data-type='prefix'] { - border-right: var(--sl-border); - }; + border-right: var(--sl-border); + } &[data-type='suffix'] { - border-left: var(--sl-border); - }; - }; + border-left: var(--sl-border); + } + } & > [data-sl-input] { padding-left: var(--sl-space-4); padding-right: var(--sl-space-4); @@ -52,8 +52,7 @@ background-color: unset; &:focus { outline: none; - }; - }; - }; + } + } + } } - diff --git a/packages/components/src/text-input/text-input.tsx b/packages/components/src/text-input/text-input.tsx index 08492c44ea..c018149a3f 100644 --- a/packages/components/src/text-input/text-input.tsx +++ b/packages/components/src/text-input/text-input.tsx @@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' import { Field, FieldLabel, FieldMessage } from '../field' import { useId } from '@vtex/shoreline-utils' +import './text-input.css' export const TextInput = forwardRef( function TextInput(props, ref) { diff --git a/packages/components/src/text/stories/text.stories.tsx b/packages/components/src/text/stories/text.stories.tsx index ecfde3858d..e8eba38655 100644 --- a/packages/components/src/text/stories/text.stories.tsx +++ b/packages/components/src/text/stories/text.stories.tsx @@ -1,8 +1,6 @@ -import '../../../dist/styles.min.css' import React, { useRef } from 'react' import { Text } from '../index' - import { Stack } from '../../stack' export default { diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx index 914129b894..21cc3cd28b 100644 --- a/packages/components/src/text/text.tsx +++ b/packages/components/src/text/text.tsx @@ -1,6 +1,7 @@ import type { AnyObject } from '@vtex/shoreline-utils' import type { ComponentPropsWithoutRef } from 'react' import React, { forwardRef } from 'react' +import './text.css' export const Text = forwardRef(function Text(props: TextProps, ref: any) { const { children, variant = 'body', ...otherProps } = props diff --git a/packages/components/src/textarea/stories/textarea.stories.tsx b/packages/components/src/textarea/stories/textarea.stories.tsx index ef89a6def0..35209379bc 100644 --- a/packages/components/src/textarea/stories/textarea.stories.tsx +++ b/packages/components/src/textarea/stories/textarea.stories.tsx @@ -1,7 +1,5 @@ -import '../../../dist/styles.min.css' import './style.css' import React from 'react' -import '../textarea.css' import { Textarea } from '../index' import { Stack } from '../../stack' diff --git a/packages/components/src/textarea/textarea.tsx b/packages/components/src/textarea/textarea.tsx index ba55ecf8e7..6d1e01fa0e 100644 --- a/packages/components/src/textarea/textarea.tsx +++ b/packages/components/src/textarea/textarea.tsx @@ -5,6 +5,7 @@ import { useId } from '@vtex/shoreline-utils' import { Field, FieldLabel } from '../field' import { Stack } from '../stack' import { Grid } from '../grid' +import './textarea.css' export const Textarea = forwardRef( function Textarea(props, ref) { diff --git a/packages/components/src/tooltip/stories/tooltip.stories.tsx b/packages/components/src/tooltip/stories/tooltip.stories.tsx index d8836c510d..5d1d06e975 100644 --- a/packages/components/src/tooltip/stories/tooltip.stories.tsx +++ b/packages/components/src/tooltip/stories/tooltip.stories.tsx @@ -1,5 +1,3 @@ -import '../../../dist/styles.min.css' -import '../tooltip.css' import React, { useState } from 'react' import { diff --git a/packages/components/src/tooltip/tooltip.tsx b/packages/components/src/tooltip/tooltip.tsx index e97b38168e..d1c69649d5 100644 --- a/packages/components/src/tooltip/tooltip.tsx +++ b/packages/components/src/tooltip/tooltip.tsx @@ -6,6 +6,7 @@ import { TooltipProvider } from './tooltip-provider' import { TooltipAnchor } from './tooltip-anchor' import { TooltipPopover } from './tooltip-popover' import { TooltipArrow } from './tooltip-arrow' +import './tooltip.css' /** * Tooltip component diff --git a/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx b/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx index 4b9a10989e..8f28d7d13f 100644 --- a/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx +++ b/packages/components/src/visually-hidden/stories/visually-hidden.stories.tsx @@ -1,4 +1,3 @@ -import '../../../dist/styles.min.css' import React from 'react' import type { Meta } from '@storybook/react' diff --git a/packages/tokens/.gitignore b/packages/tokens/.gitignore new file mode 100644 index 0000000000..b2088288e5 --- /dev/null +++ b/packages/tokens/.gitignore @@ -0,0 +1,2 @@ +# Shoreline styles +shoreline diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/tokens/package.json b/packages/tokens/package.json new file mode 100644 index 0000000000..62b2b8c252 --- /dev/null +++ b/packages/tokens/package.json @@ -0,0 +1,51 @@ +{ + "name": "@vtex/shoreline-tokens", + "version": "0.0.0", + "main": "./dist/index.js", + "module": "./dist/esm/index.js", + "types": "./dist/index.d.ts", + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org" + }, + "files": [ + "dist" + ], + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/esm/index.js", + "types": "./dist/index.d.ts" + }, + "./styles": "./dist/styles.min.css" + }, + "engines": { + "node": ">=16" + }, + "scripts": { + "prebuild": "rm -rf dist && rm -rf shoreline && pnpm run theme", + "dev": "tsup --watch", + "build": "npm run prebuild && tsup && npm run build:css", + "build:css": "lightningcss --minify --bundle --targets '>= 0.25%' ./src/styles.css -o ./dist/styles.min.css", + "theme": "shorelinecss theme" + }, + "repository": { + "directory": "packages/admin-ui", + "type": "git", + "url": "git+https://github.com/vtex/admin-ui.git" + }, + "bugs": { + "url": "https://github.com/vtex/admin-ui/issues" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "devDependencies": { + "@vtex/shoreline-cli": "workspace", + "@vtex/shoreline-preset-admin": "workspace", + "@vtex/shoreline-theme": "workspace", + "lightningcss-cli": "1.22.0", + "tsup": "7.2.0" + } +} diff --git a/packages/components/shoreline.config.ts b/packages/tokens/shoreline.config.ts similarity index 100% rename from packages/components/shoreline.config.ts rename to packages/tokens/shoreline.config.ts diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts new file mode 100644 index 0000000000..e670651d52 --- /dev/null +++ b/packages/tokens/src/index.ts @@ -0,0 +1,2 @@ +// TODO: Export theme as Object: https://github.com/vtex/shoreline/issues/1281. +export const theme = {} diff --git a/packages/tokens/src/styles.css b/packages/tokens/src/styles.css new file mode 100644 index 0000000000..61cb3264f2 --- /dev/null +++ b/packages/tokens/src/styles.css @@ -0,0 +1 @@ +@import '../shoreline/styles.css'; diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json new file mode 100644 index 0000000000..9907687682 --- /dev/null +++ b/packages/tokens/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "declarationDir": "declarations" + }, + "include": ["./src"], + "exclude": [ + "node_modules", + "dist", + "**/*.test.*", + "**/*.stories.*", + "**/*test-utils*" + ] +} diff --git a/packages/tokens/tsup.config.ts b/packages/tokens/tsup.config.ts new file mode 100644 index 0000000000..7bed58a5aa --- /dev/null +++ b/packages/tokens/tsup.config.ts @@ -0,0 +1,12 @@ +import { defineConfig } from 'tsup' + +export default defineConfig({ + entry: ['src/index.ts'], + format: ['cjs', 'esm'], + external: ['react'], + splitting: false, + sourcemap: true, + clean: true, + dts: true, + legacyOutput: true, +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cee2db254d..247194ef98 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -852,6 +852,31 @@ importers: specifier: 7.1.0 version: 7.1.0(@swc/core@1.2.241)(postcss@8.4.27)(typescript@4.9.5) + packages/tokens: + dependencies: + react: + specifier: '>=18' + version: 18.2.0 + react-dom: + specifier: '>=18' + version: 18.2.0(react@18.2.0) + devDependencies: + '@vtex/shoreline-cli': + specifier: workspace + version: link:../cli + '@vtex/shoreline-preset-admin': + specifier: workspace + version: link:../shoreline-preset-admin + '@vtex/shoreline-theme': + specifier: workspace + version: link:../theme + lightningcss-cli: + specifier: 1.22.0 + version: 1.22.0 + tsup: + specifier: 7.2.0 + version: 7.2.0(@swc/core@1.2.241)(postcss@8.4.27)(typescript@4.9.5) + packages/utils: dependencies: csstype: diff --git a/templates/component/stories/component.stories.tsx.hbs b/templates/component/stories/component.stories.tsx.hbs index 888f257394..1d55ab94e5 100644 --- a/templates/component/stories/component.stories.tsx.hbs +++ b/templates/component/stories/component.stories.tsx.hbs @@ -1,4 +1,4 @@ -import '../../../dist/styles.min.css' + import '../{{kebabCase name}}.css' import React from 'react'