From 8f5d84a55ebcdba14b22765b39b34b0c382fb862 Mon Sep 17 00:00:00 2001 From: andres Date: Wed, 15 Nov 2023 19:04:16 +0100 Subject: [PATCH] use styled-components --- package.json | 5 +- pnpm-lock.yaml | 72 ++++++++++++++++++++++-- src/components/button/button.module.scss | 44 --------------- src/components/button/button.tsx | 56 +++++++++++++++--- 4 files changed, 118 insertions(+), 59 deletions(-) delete mode 100644 src/components/button/button.module.scss diff --git a/package.json b/package.json index 349858b..17a9f5e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@ershisan99/live-demo-lib", "private": false, - "version": "0.0.2", + "version": "0.0.3", "type": "module", "main": "dist/index.js", "module": "dist/index.js", @@ -23,7 +23,8 @@ "@radix-ui/react-slider": "^1.1.2", "clsx": "^2.0.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "styled-components": "^6.1.1" }, "devDependencies": { "@it-incubator/eslint-config": "^1.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4dd5686..08f747c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + styled-components: + specifier: ^6.1.1 + version: 6.1.1(react-dom@18.2.0)(react@18.2.0) devDependencies: '@it-incubator/eslint-config': @@ -1467,6 +1470,20 @@ packages: engines: {node: '>=10.0.0'} dev: true + /@emotion/is-prop-valid@1.2.1: + resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} + dependencies: + '@emotion/memoize': 0.8.1 + dev: false + + /@emotion/memoize@0.8.1: + resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + dev: false + + /@emotion/unitless@0.8.1: + resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + dev: false + /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0): resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} peerDependencies: @@ -3771,6 +3788,10 @@ packages: '@types/node': 20.9.0 dev: true + /@types/stylis@4.2.3: + resolution: {integrity: sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==} + dev: false + /@types/unist@2.0.10: resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} dev: true @@ -4572,6 +4593,10 @@ packages: engines: {node: '>=10'} dev: true + /camelize@1.0.1: + resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} + dev: false + /caniuse-lite@1.0.30001562: resolution: {integrity: sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==} dev: true @@ -4813,11 +4838,24 @@ packages: engines: {node: '>=8'} dev: true + /css-color-keywords@1.0.0: + resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} + engines: {node: '>=4'} + dev: false + /css-functions-list@3.2.1: resolution: {integrity: sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==} engines: {node: '>=12 || >=16'} dev: true + /css-to-react-native@3.2.0: + resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} + dependencies: + camelize: 1.0.1 + css-color-keywords: 1.0.0 + postcss-value-parser: 4.2.0 + dev: false + /css-tree@2.3.1: resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -7269,7 +7307,6 @@ packages: resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: true /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} @@ -7647,7 +7684,6 @@ packages: /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} - dev: true /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} @@ -7736,7 +7772,6 @@ packages: /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true /postcss@8.4.31: resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} @@ -7745,7 +7780,6 @@ packages: nanoid: 3.3.7 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} @@ -8459,6 +8493,10 @@ packages: kind-of: 6.0.3 dev: true + /shallowequal@1.1.0: + resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} + dev: false + /shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -8516,7 +8554,6 @@ packages: /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} - dev: true /source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} @@ -8706,6 +8743,26 @@ packages: resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} dev: true + /styled-components@6.1.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==} + engines: {node: '>= 16'} + peerDependencies: + react: '>= 16.8.0' + react-dom: '>= 16.8.0' + dependencies: + '@emotion/is-prop-valid': 1.2.1 + '@emotion/unitless': 0.8.1 + '@types/stylis': 4.2.3 + css-to-react-native: 3.2.0 + csstype: 3.1.2 + postcss: 8.4.31 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + shallowequal: 1.1.0 + stylis: 4.3.0 + tslib: 2.6.2 + dev: false + /stylelint-config-clean-order@5.0.1(stylelint@15.10.1): resolution: {integrity: sha512-zKLXjTgrkZqiml0VXv7Syl11XLpzRErW+1/qSEjIQ+aHAFjGuRq6Uwal9OzxtDHvpoIhlc4wCYjougWDuLN5aA==} peerDependencies: @@ -8886,6 +8943,10 @@ packages: - typescript dev: true + /stylis@4.3.0: + resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==} + dev: false + /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -9105,7 +9166,6 @@ packages: /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - dev: true /tsutils@3.21.0(typescript@5.2.2): resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss deleted file mode 100644 index 5bb7919..0000000 --- a/src/components/button/button.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -.button { - all: unset; - - cursor: pointer; - - box-sizing: border-box; - padding: 0.5rem 1rem; - - border-radius: 0.25rem; - - &:focus-visible { - outline: 2px solid lightcoral; - outline-offset: 2px; - } -} - -.fullWidth { - width: 100%; -} - -.primary { - color: white; - background-color: blue; -} - -.secondary { - color: black; - background-color: lightblue; -} - -.tertiary { - color: blue; - border: 1px solid blue; -} - -.link { - color: blue; - text-decoration: underline; -} - -.icon { - width: 1.5rem; - height: 1.5rem; -} diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 391e752..df355c0 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -1,8 +1,6 @@ import { ComponentPropsWithoutRef, ElementType } from 'react' -import { clsx } from 'clsx' - -import s from './button.module.scss' +import { styled } from 'styled-components' export const buttonVariant = ['icon', 'link', 'primary', 'secondary', 'tertiary'] as const @@ -15,9 +13,53 @@ export type ButtonProps = { } & ComponentPropsWithoutRef export const Button = (props: ButtonProps) => { - const { as: Component = 'button', className, fullWidth, variant = 'primary', ...rest } = props + const { as: Component = 'button', fullWidth, variant = 'primary', ...rest } = props - const classNames = clsx(s.button, s[variant], fullWidth && s.fullWidth, className) - - return + return } + +const StyledButton = styled.button<{ variant: ButtonVariant }>` + all: unset; + + cursor: pointer; + + box-sizing: border-box; + padding: 0.5rem 1rem; + + border-radius: 0.25rem; + + &:focus-visible { + outline: 2px solid lightcoral; + outline-offset: 2px; + } + + ${({ variant }) => { + switch (variant) { + case 'primary': + return ` + background-color: #00f; + color: #fff; + ` + case 'secondary': + return ` + background-color: #f00; + color: #fff; + ` + case 'tertiary': + return ` + background-color: #fff; + color: #000; + ` + case 'icon': + return ` + background-color: transparent; + color: #000; + ` + case 'link': + return ` + background-color: transparent; + color: #00f; + ` + } + }} +`