diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 07eda77..b54f13a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,4 +1,3 @@ module.exports = { - extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended',], - plugins: ['react-refresh'], + extends: ['@it-incubator/eslint-config'], }; \ No newline at end of file diff --git a/package.json b/package.json index c103144..afd4de9 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@it-incubator/eslint-config": "^1.0.2", "@it-incubator/prettier-config": "^0.1.2", - "@it-incubator/stylelint-config": "^1.0.3", + "@it-incubator/stylelint-config": "2.0.0", "@storybook/addon-essentials": "^8.0.9", "@storybook/addon-interactions": "^8.0.9", "@storybook/addon-links": "^8.0.9", @@ -46,8 +46,10 @@ "eslint-plugin-storybook": "^0.8.0", "sass": "^1.76.0", "storybook": "^8.0.9", - "stylelint": "^16.5.0", "typescript": "^5.4.5", + "stylelint": "^16.5.0", + "stylelint-config-clean-order": ">=5.4.2", + "stylelint-config-standard-scss": ">=13.1.0", "vite": "^4.4.5" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 88563eb..5ea8024 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,8 +37,8 @@ importers: specifier: ^0.1.2 version: 0.1.2 '@it-incubator/stylelint-config': - specifier: ^1.0.3 - version: 1.0.3(stylelint-config-clean-order@5.0.1(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5)) + specifier: 2.0.0 + version: 2.0.0(stylelint-config-clean-order@5.4.2(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5)) '@storybook/addon-essentials': specifier: ^8.0.9 version: 8.0.9(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -102,6 +102,12 @@ importers: stylelint: specifier: ^16.5.0 version: 16.5.0(typescript@5.4.5) + stylelint-config-clean-order: + specifier: '>=5.4.2' + version: 5.4.2(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-standard-scss: + specifier: '>=13.1.0' + version: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) typescript: specifier: ^5.4.5 version: 5.4.5 @@ -1056,12 +1062,12 @@ packages: '@it-incubator/prettier-config@0.1.2': resolution: {integrity: sha512-Yxy2vZHhmfEPEU4xf/JltSuQQ5GTModi+oqsiZdV5MtWbLbfSpXpv9a3rpUziEULTPtrv7MdM0mdOx9YDCgSjA==} - '@it-incubator/stylelint-config@1.0.3': - resolution: {integrity: sha512-2wmrYKDTF2ZuXGpd9C3DoCgXvq2WXPYN15x3uszmSF3cnJP9HRjVdSfWX0+uH2OmHphANfRe2FLLsqNSraZDMg==} + '@it-incubator/stylelint-config@2.0.0': + resolution: {integrity: sha512-/cJUdGrAzAKLF09GcF6rvf1rEQMDeKjRWGvM0os//nGwmjCyPv0OjAxN+wDxW/iG1h5Och88FEqfYbt1VjougA==} peerDependencies: - stylelint: 16.1.0 - stylelint-config-clean-order: 5.2.0 - stylelint-config-standard-scss: 12.0.0 + stylelint: '>=16.5.0' + stylelint-config-clean-order: '>=5.4.2' + stylelint-config-standard-scss: '>=13.1.0' '@jest/schemas@29.6.3': resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==} @@ -3616,11 +3622,11 @@ packages: peerDependencies: postcss: ^8.4.31 - postcss-scss@4.0.6: - resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==} + postcss-scss@4.0.9: + resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==} engines: {node: '>=12.0'} peerDependencies: - postcss: ^8.4.19 + postcss: ^8.4.29 postcss-selector-parser@6.0.16: resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==} @@ -4081,48 +4087,53 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - stylelint-config-clean-order@5.0.1: - resolution: {integrity: sha512-zKLXjTgrkZqiml0VXv7Syl11XLpzRErW+1/qSEjIQ+aHAFjGuRq6Uwal9OzxtDHvpoIhlc4wCYjougWDuLN5aA==} + stylelint-config-clean-order@5.4.2: + resolution: {integrity: sha512-lhPnDUL1gQbZYqG9kQx5dfEfiD/EpyVbb6jOiR7YfKzkIVv7Rw4jSKzvxr4v5PZqmRyCSzM3goc93jqfF+OZbA==} peerDependencies: stylelint: '>=14' - stylelint-config-recommended-scss@12.0.0: - resolution: {integrity: sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==} + stylelint-config-recommended-scss@14.0.0: + resolution: {integrity: sha512-HDvpoOAQ1RpF+sPbDOT2Q2/YrBDEJDnUymmVmZ7mMCeNiFSdhRdyGEimBkz06wsN+HaFwUh249gDR+I9JR7Onw==} + engines: {node: '>=18.12.0'} peerDependencies: postcss: ^8.3.3 - stylelint: ^15.5.0 + stylelint: ^16.0.2 peerDependenciesMeta: postcss: optional: true - stylelint-config-recommended@12.0.0: - resolution: {integrity: sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==} + stylelint-config-recommended@14.0.0: + resolution: {integrity: sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==} + engines: {node: '>=18.12.0'} peerDependencies: - stylelint: ^15.5.0 + stylelint: ^16.0.0 - stylelint-config-standard-scss@10.0.0: - resolution: {integrity: sha512-bChBEo1p3xUVWh/wenJI+josoMk21f2yuLDGzGjmKYcALfl2u3DFltY+n4UHswYiXghqXaA8mRh+bFy/q1hQlg==} + stylelint-config-standard-scss@13.1.0: + resolution: {integrity: sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==} + engines: {node: '>=18.12.0'} peerDependencies: postcss: ^8.3.3 - stylelint: ^15.5.0 + stylelint: ^16.3.1 peerDependenciesMeta: postcss: optional: true - stylelint-config-standard@33.0.0: - resolution: {integrity: sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==} + stylelint-config-standard@36.0.0: + resolution: {integrity: sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==} + engines: {node: '>=18.12.0'} peerDependencies: - stylelint: ^15.5.0 + stylelint: ^16.1.0 - stylelint-order@6.0.3: - resolution: {integrity: sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==} + stylelint-order@6.0.4: + resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==} peerDependencies: - stylelint: ^14.0.0 || ^15.0.0 + stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 - stylelint-scss@5.0.1: - resolution: {integrity: sha512-n87iCRZrr2J7//I/QFsDXxFLnHKw633U4qvWZ+mOW6KDAp/HLj06H+6+f9zOuTYy+MdGdTuCSDROCpQIhw5fvQ==} + stylelint-scss@6.3.0: + resolution: {integrity: sha512-8OSpiuf1xC7f8kllJsBOFAOYp/mR/C1FXMVeOFjtJPw+AFvEmC93FaklHt7MlOqU4poxuQ1TkYMyfI0V+1SxjA==} + engines: {node: '>=18.12.0'} peerDependencies: - stylelint: ^14.5.1 || ^15.0.0 + stylelint: ^16.0.2 stylelint@16.5.0: resolution: {integrity: sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==} @@ -5521,11 +5532,11 @@ snapshots: dependencies: prettier: 3.0.0 - '@it-incubator/stylelint-config@1.0.3(stylelint-config-clean-order@5.0.1(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5))': + '@it-incubator/stylelint-config@2.0.0(stylelint-config-clean-order@5.4.2(stylelint@16.5.0(typescript@5.4.5)))(stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)))(stylelint@16.5.0(typescript@5.4.5))': dependencies: stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-clean-order: 5.0.1(stylelint@16.5.0(typescript@5.4.5)) - stylelint-config-standard-scss: 10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-clean-order: 5.4.2(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-standard-scss: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) '@jest/schemas@29.6.3': dependencies: @@ -7108,7 +7119,7 @@ snapshots: css-tree@2.3.1: dependencies: mdn-data: 2.0.30 - source-map-js: 1.0.2 + source-map-js: 1.2.0 css.escape@1.5.1: {} @@ -8687,7 +8698,7 @@ snapshots: dependencies: postcss: 8.4.38 - postcss-scss@4.0.6(postcss@8.4.38): + postcss-scss@4.0.9(postcss@8.4.38): dependencies: postcss: 8.4.38 @@ -9224,45 +9235,46 @@ snapshots: strip-json-comments@3.1.1: {} - stylelint-config-clean-order@5.0.1(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-clean-order@5.4.2(stylelint@16.5.0(typescript@5.4.5)): dependencies: stylelint: 16.5.0(typescript@5.4.5) - stylelint-order: 6.0.3(stylelint@16.5.0(typescript@5.4.5)) + stylelint-order: 6.0.4(stylelint@16.5.0(typescript@5.4.5)) - stylelint-config-recommended-scss@12.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-recommended-scss@14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): dependencies: - postcss-scss: 4.0.6(postcss@8.4.38) + postcss-scss: 4.0.9(postcss@8.4.38) stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended: 12.0.0(stylelint@16.5.0(typescript@5.4.5)) - stylelint-scss: 5.0.1(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) + stylelint-scss: 6.3.0(stylelint@16.5.0(typescript@5.4.5)) optionalDependencies: postcss: 8.4.38 - stylelint-config-recommended@12.0.0(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-recommended@14.0.0(stylelint@16.5.0(typescript@5.4.5)): dependencies: stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-standard-scss@10.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): dependencies: stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended-scss: 12.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) - stylelint-config-standard: 33.0.0(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-recommended-scss: 14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-standard: 36.0.0(stylelint@16.5.0(typescript@5.4.5)) optionalDependencies: postcss: 8.4.38 - stylelint-config-standard@33.0.0(stylelint@16.5.0(typescript@5.4.5)): + stylelint-config-standard@36.0.0(stylelint@16.5.0(typescript@5.4.5)): dependencies: stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended: 12.0.0(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) - stylelint-order@6.0.3(stylelint@16.5.0(typescript@5.4.5)): + stylelint-order@6.0.4(stylelint@16.5.0(typescript@5.4.5)): dependencies: postcss: 8.4.38 postcss-sorting: 8.0.2(postcss@8.4.38) stylelint: 16.5.0(typescript@5.4.5) - stylelint-scss@5.0.1(stylelint@16.5.0(typescript@5.4.5)): + stylelint-scss@6.3.0(stylelint@16.5.0(typescript@5.4.5)): dependencies: + known-css-properties: 0.30.0 postcss-media-query-parser: 0.2.3 postcss-resolve-nested-selector: 0.1.1 postcss-selector-parser: 6.0.16 diff --git a/src/assets/icons/camera.tsx b/src/assets/icons/camera.tsx index 8b0b2e4..b7eb018 100644 --- a/src/assets/icons/camera.tsx +++ b/src/assets/icons/camera.tsx @@ -1,18 +1,29 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( - - + + ) diff --git a/src/assets/icons/check.tsx b/src/assets/icons/check.tsx index 1f35bda..10ca424 100644 --- a/src/assets/icons/check.tsx +++ b/src/assets/icons/check.tsx @@ -1,17 +1,19 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( ) diff --git a/src/assets/icons/chevron-up.tsx b/src/assets/icons/chevron-up.tsx index 15c33e1..62b2e88 100644 --- a/src/assets/icons/chevron-up.tsx +++ b/src/assets/icons/chevron-up.tsx @@ -1,23 +1,25 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const ChevronUp = (props: SVGProps, ref: Ref) => ( - + - - + + diff --git a/src/assets/icons/close.tsx b/src/assets/icons/close.tsx index 3b8a146..1519dd6 100644 --- a/src/assets/icons/close.tsx +++ b/src/assets/icons/close.tsx @@ -1,25 +1,33 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( - - + + - - + + diff --git a/src/assets/icons/edit.tsx b/src/assets/icons/edit.tsx index 586cc58..74e78af 100644 --- a/src/assets/icons/edit.tsx +++ b/src/assets/icons/edit.tsx @@ -1,27 +1,31 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( - + - - + + diff --git a/src/assets/icons/email.tsx b/src/assets/icons/email.tsx index f424822..7acb4ac 100644 --- a/src/assets/icons/email.tsx +++ b/src/assets/icons/email.tsx @@ -1,71 +1,98 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( - + - - + + - - + + ) diff --git a/src/assets/icons/eye.tsx b/src/assets/icons/eye.tsx index 12e4b70..af0c18a 100644 --- a/src/assets/icons/eye.tsx +++ b/src/assets/icons/eye.tsx @@ -1,19 +1,21 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( ) diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index adf3ef0..c135677 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,11 +1,11 @@ -export { default as Eye } from './eye' -export { default as VisibilityOff } from './visibility-off' -export { default as Check } from './check' -export { default as Email } from './email' export { default as Camera } from './camera' -export { default as Logout } from './logout' -export { default as Edit } from './edit' -export { default as Logo } from './logo' -export { default as PersonOutline } from './person-outline' +export { default as Check } from './check' export { default as ChevronUp } from './chevron-up' export { default as Close } from './close' +export { default as Edit } from './edit' +export { default as Email } from './email' +export { default as Eye } from './eye' +export { default as Logo } from './logo' +export { default as Logout } from './logout' +export { default as PersonOutline } from './person-outline' +export { default as VisibilityOff } from './visibility-off' diff --git a/src/assets/icons/logo.tsx b/src/assets/icons/logo.tsx index 0df7cbd..07fbb01 100644 --- a/src/assets/icons/logo.tsx +++ b/src/assets/icons/logo.tsx @@ -1,28 +1,32 @@ import { SVGProps } from 'react' const SvgComponent = (props: SVGProps) => ( ) diff --git a/src/assets/icons/logout.tsx b/src/assets/icons/logout.tsx index a7c19af..4b76e13 100644 --- a/src/assets/icons/logout.tsx +++ b/src/assets/icons/logout.tsx @@ -1,27 +1,31 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( - + - - + + diff --git a/src/assets/icons/person-outline.tsx b/src/assets/icons/person-outline.tsx index dd172d1..1c67727 100644 --- a/src/assets/icons/person-outline.tsx +++ b/src/assets/icons/person-outline.tsx @@ -1,19 +1,23 @@ import { SVGProps } from 'react' const SvgComponent = (props: SVGProps) => ( - - + + - - + + diff --git a/src/assets/icons/visibility-off.tsx b/src/assets/icons/visibility-off.tsx index c45f878..b4c53e2 100644 --- a/src/assets/icons/visibility-off.tsx +++ b/src/assets/icons/visibility-off.tsx @@ -1,17 +1,19 @@ -import { SVGProps, Ref, forwardRef, memo } from 'react' +import { Ref, SVGProps, forwardRef, memo } from 'react' const SvgComponent = (props: SVGProps, ref: Ref) => ( ) diff --git a/src/components/ui/button/button.stories.tsx b/src/components/ui/button/button.stories.tsx index 45907c6..e4d0c40 100644 --- a/src/components/ui/button/button.stories.tsx +++ b/src/components/ui/button/button.stories.tsx @@ -3,15 +3,15 @@ import type { Meta, StoryObj } from '@storybook/react' import { Button } from './' const meta = { - title: 'Components/Button', - component: Button, - tags: ['autodocs'], argTypes: { variant: { - options: ['primary', 'secondary', 'tertiary', 'link'], control: { type: 'radio' }, + options: ['primary', 'secondary', 'tertiary', 'link'], }, }, + component: Button, + tags: ['autodocs'], + title: 'Components/Button', } satisfies Meta export default meta @@ -19,47 +19,47 @@ type Story = StoryObj export const Primary: Story = { args: { - variant: 'primary', children: 'Primary Button', disabled: false, + variant: 'primary', }, } export const Secondary: Story = { args: { - variant: 'secondary', children: 'Secondary Button', disabled: false, + variant: 'secondary', }, } export const Tertiary: Story = { args: { - variant: 'tertiary', children: 'Tertiary Button', disabled: false, + variant: 'tertiary', }, } export const Link: Story = { args: { - variant: 'link', children: 'Tertiary Button', disabled: false, + variant: 'link', }, } export const FullWidth: Story = { args: { - variant: 'primary', children: 'Full Width Button', disabled: false, fullWidth: true, + variant: 'primary', }, } export const AsLink: Story = { args: { - variant: 'primary', - children: 'Link that looks like a button', as: 'a', + children: 'Link that looks like a button', + variant: 'primary', }, } diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx index 3e703e0..a92bd92 100644 --- a/src/components/ui/button/button.tsx +++ b/src/components/ui/button/button.tsx @@ -5,13 +5,13 @@ import s from './button.module.scss' export type ButtonProps = { as?: T children: ReactNode - variant?: 'primary' | 'secondary' | 'tertiary' | 'link' - fullWidth?: boolean className?: string + fullWidth?: boolean + variant?: 'link' | 'primary' | 'secondary' | 'tertiary' } & ComponentPropsWithoutRef export const Button = (props: ButtonProps) => { - const { variant = 'primary', fullWidth, className, as: Component = 'button', ...rest } = props + const { as: Component = 'button', className, fullWidth, variant = 'primary', ...rest } = props return ( diff --git a/src/components/ui/card/card.stories.tsx b/src/components/ui/card/card.stories.tsx index b650272..cc0656a 100644 --- a/src/components/ui/card/card.stories.tsx +++ b/src/components/ui/card/card.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react' -import { Card } from './' - import { Typography } from '@/components' +import { Card } from './' + const meta = { - title: 'Components/Card', component: Card, tags: ['autodocs'], + title: 'Components/Card', } satisfies Meta export default meta @@ -17,9 +17,9 @@ export const Default: Story = { args: { children: Card, style: { - width: '300px', height: '300px', padding: '24px', + width: '300px', }, }, } diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx index 180b8d5..4302c10 100644 --- a/src/components/ui/card/card.tsx +++ b/src/components/ui/card/card.tsx @@ -11,5 +11,5 @@ export const Card = forwardRef(({ className, ...restP root: clsx(s.root, className), } - return
+ return
}) diff --git a/src/components/ui/checkbox/checkbox.module.scss b/src/components/ui/checkbox/checkbox.module.scss index 2a82b44..03e9ec1 100644 --- a/src/components/ui/checkbox/checkbox.module.scss +++ b/src/components/ui/checkbox/checkbox.module.scss @@ -16,7 +16,6 @@ .root { cursor: pointer; - display: flex; align-items: center; justify-content: center; diff --git a/src/components/ui/checkbox/checkbox.stories.tsx b/src/components/ui/checkbox/checkbox.stories.tsx index c67fc86..82c4f23 100644 --- a/src/components/ui/checkbox/checkbox.stories.tsx +++ b/src/components/ui/checkbox/checkbox.stories.tsx @@ -4,9 +4,9 @@ import { Meta, StoryObj } from '@storybook/react' import { Checkbox } from './checkbox' const meta = { - title: 'Components/Checkbox', component: Checkbox, tags: ['autodocs'], + title: 'Components/Checkbox', } satisfies Meta export default meta @@ -14,8 +14,8 @@ export default meta type Story = StoryObj export const Uncontrolled: Story = { args: { - label: 'Click here', disabled: false, + label: 'Click here', }, } @@ -26,8 +26,8 @@ export const Controlled: Story = { return ( setChecked(!checked)} /> ) diff --git a/src/components/ui/checkbox/checkbox.tsx b/src/components/ui/checkbox/checkbox.tsx index a6c5b08..738611d 100644 --- a/src/components/ui/checkbox/checkbox.tsx +++ b/src/components/ui/checkbox/checkbox.tsx @@ -1,38 +1,37 @@ import { ComponentPropsWithoutRef, FC } from 'react' +import { Check } from '@/assets/icons' +import { Typography } from '@/components' import * as CheckboxRadix from '@radix-ui/react-checkbox' import * as LabelRadix from '@radix-ui/react-label' import { clsx } from 'clsx' import s from './checkbox.module.scss' -import { Check } from '@/assets/icons' -import { Typography } from '@/components' - export type CheckboxProps = { label?: string - position?: 'left' | 'default' + position?: 'default' | 'left' } & ComponentPropsWithoutRef export const Checkbox: FC = ({ - position = 'default', - label, className, disabled, + label, + position = 'default', ...rest }) => { const classNames = { - container: clsx(s.container, className), buttonWrapper: clsx(s.buttonWrapper, disabled && s.disabled, position === 'left' && s.left), - root: s.root, + container: clsx(s.container, className), indicator: s.indicator, label: clsx(s.label, disabled && s.disabled), + root: s.root, } return (
- +
diff --git a/src/components/ui/text-field/text-field.stories.ts b/src/components/ui/text-field/text-field.stories.ts index cbb0a88..00c5e72 100644 --- a/src/components/ui/text-field/text-field.stories.ts +++ b/src/components/ui/text-field/text-field.stories.ts @@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react' import { TextField } from './' const meta = { - title: 'Components/TextField', component: TextField, tags: ['autodocs'], + title: 'Components/TextField', } satisfies Meta export default meta @@ -28,8 +28,8 @@ export const Password: Story = { export const Error: Story = { args: { + errorMessage: 'Error message', label: 'Input with error', value: 'Wrong value', - errorMessage: 'Error message', }, } diff --git a/src/components/ui/text-field/text-field.tsx b/src/components/ui/text-field/text-field.tsx index 2ce052e..2bd8611 100644 --- a/src/components/ui/text-field/text-field.tsx +++ b/src/components/ui/text-field/text-field.tsx @@ -1,32 +1,31 @@ import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, forwardRef, useState } from 'react' +import { Eye, VisibilityOff } from '@/assets' +import { Typography } from '@/components' import { clsx } from 'clsx' import s from './text-field.module.scss' -import { VisibilityOff, Eye } from '@/assets' -import { Typography } from '@/components' - export type TextFieldProps = { - onValueChange?: (value: string) => void containerProps?: ComponentProps<'div'> - labelProps?: ComponentProps<'label'> errorMessage?: string label?: string + labelProps?: ComponentProps<'label'> + onValueChange?: (value: string) => void } & ComponentPropsWithoutRef<'input'> export const TextField = forwardRef( ( { className, - errorMessage, - placeholder, - type, containerProps, - labelProps, + errorMessage, label, + labelProps, onChange, onValueChange, + placeholder, + type, ...restProps }, ref @@ -43,41 +42,41 @@ export const TextField = forwardRef( } const classNames = { - root: clsx(s.root, containerProps?.className), - fieldContainer: clsx(s.fieldContainer), - field: clsx(s.field, !!errorMessage && s.error, className), - label: clsx(s.label, labelProps?.className), error: clsx(s.error), + field: clsx(s.field, !!errorMessage && s.error, className), + fieldContainer: clsx(s.fieldContainer), + label: clsx(s.label, labelProps?.className), + root: clsx(s.root, containerProps?.className), } return (
{label && ( - + {label} )}
{isShowPasswordButtonShown && ( )}
- + {errorMessage}
diff --git a/src/components/ui/typography/typography.stories.tsx b/src/components/ui/typography/typography.stories.tsx index c729896..12e9847 100644 --- a/src/components/ui/typography/typography.stories.tsx +++ b/src/components/ui/typography/typography.stories.tsx @@ -3,11 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react' import { Typography } from './' const meta = { - title: 'Components/Typography', - component: Typography, - tags: ['autodocs'], argTypes: { variant: { + control: { type: 'radio' }, options: [ 'large', 'h1', @@ -23,9 +21,11 @@ const meta = { 'link2', 'error', ], - control: { type: 'radio' }, }, }, + component: Typography, + tags: ['autodocs'], + title: 'Components/Typography', } satisfies Meta export default meta diff --git a/src/components/ui/typography/typography.tsx b/src/components/ui/typography/typography.tsx index b82f58a..15c6491 100644 --- a/src/components/ui/typography/typography.tsx +++ b/src/components/ui/typography/typography.tsx @@ -6,22 +6,22 @@ import s from './typography.module.scss' export interface TextProps { as?: T + children?: ReactNode + className?: string variant?: - | 'large' + | 'body1' + | 'body2' + | 'caption' + | 'error' | 'h1' | 'h2' | 'h3' - | 'body1' - | 'body2' - | 'subtitle1' - | 'subtitle2' - | 'caption' - | 'overline' + | 'large' | 'link1' | 'link2' - | 'error' - children?: ReactNode - className?: string + | 'overline' + | 'subtitle1' + | 'subtitle2' } export function Typography({ @@ -29,7 +29,7 @@ export function Typography({ className, variant = 'body1', ...restProps -}: TextProps & Omit, keyof TextProps>) { +}: Omit, keyof TextProps> & TextProps) { const classNames = clsx(s.text, s[variant], className) const Component = as || 'p' diff --git a/src/main.tsx b/src/main.tsx index 5d5ead5..7b76e1b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,12 +1,11 @@ -import '@fontsource/roboto/400.css' -import '@fontsource/roboto/700.css' -import './styles/index.scss' - import { StrictMode } from 'react' +import { App } from '@/App' import { createRoot } from 'react-dom/client' -import { App } from '@/App' +import './styles/index.scss' +import '@fontsource/roboto/400.css' +import '@fontsource/roboto/700.css' createRoot(document.getElementById('root')!).render( diff --git a/src/styles/_boilerplate.scss b/src/styles/_boilerplate.scss index 7608177..902ec1f 100644 --- a/src/styles/_boilerplate.scss +++ b/src/styles/_boilerplate.scss @@ -1,7 +1,6 @@ html { box-sizing: border-box; font-size: 100%; - -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }