feat(setup): add sass support

.eslintrc

@@ -36,9 +36,10 @@
       "files": ["*.js"],
       "rules": {
         "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/explicit-function-return-type": "off"
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-var-requires": "off"
       }
     }
   ],
-  "rules": { "react/prop-types": "off" }
+  "rules": { "react/prop-types": "off", "react/display-name": "off" }
 }

examples/cdn/yarn.lock

@@ -509,7 +509,7 @@ uri-js@^4.2.2:
     punycode "^2.1.0"
 
 "useful-components@file:../..":
-  version "1.0.0"
+  version "1.0.1"
 
 vary@~1.1.2:
   version "1.1.2"

examples/cra/src/App.js

@@ -1,4 +1,4 @@
-import './style.css'
+import './style.scss'
 import React from 'react'
 import { Button } from 'useful-components'
 

examples/cra/src/style.scss

@@ -0,0 +1,6 @@
+@import '../node_modules/useful-components/dist/variables';
+
+#root {
+  background-color: $analogous200;
+  padding: 1rem;
+}

examples/cra/yarn.lock

@@ -10390,7 +10390,7 @@ use@^3.1.0:
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
 useful-components@../..:
-  version "1.0.0"
+  version "1.0.1"
 
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"

examples/ssr/src/client.js

@@ -1,4 +1,4 @@
-import './style.css'
+import './style.scss'
 import React from 'react'
 import { hydrate } from 'react-dom'
 import App from './App'

examples/ssr/src/style.scss

@@ -0,0 +1,6 @@
+@import '../node_modules/useful-components/dist/variables';
+
+#root {
+  background-color: $analogous200;
+  padding: 1rem;
+}

examples/ssr/webpack.config.js

@@ -16,8 +16,13 @@ module.exports = [
         // CSS as part of the client build (or use isomorphic-style-loader).
         // See webpack-contrib/mini-css-extract-plugin#90
         {
-          test: /\.css$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader'],
+          test: /\.(sa|sc|c)ss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'postcss-loader',
+            'sass-loader',
+          ],
         },
         {
           test: /\.js$/,
@@ -59,8 +64,13 @@ module.exports = [
           },
         },
         {
-          test: /\.css$/,
-          loader: 'css-loader',
+          test: /\.(sa|sc|c)ss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'postcss-loader',
+            'sass-loader',
+          ],
         },
       ],
     },

examples/ssr/yarn.lock

@@ -3920,7 +3920,7 @@ use@^3.1.0:
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
 "useful-components@file:../..":
-  version "1.0.0"
+  version "1.0.1"
 
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   moduleNameMapper: {
-    '\\.css$': '<rootDir>/mocks/styleMock.js',
+    '\\.(css|scss)$': '<rootDir>/mocks/styleMock.js',
   },
 }

package.json

@@ -9,7 +9,7 @@
   "unpkg": "dist/bundle.min.js",
   "types": "src/index.ts",
   "sideEffects": [
-    "*.css"
+    "*.scss"
   ],
   "files": [
     "dist",
@@ -37,7 +37,7 @@
     "compile:esm": "BABEL_ENV=esm yarn compile --out-dir dist/esm",
     "bundle": "rollup -c",
     "postbuild": "run-p copy:*",
-    "copy": "rsync -zarvm --include='*/' --include='*.css' --exclude='*' src/",
+    "copy": "rsync -zarvm --include='*/' --include='*.scss' --exclude='*' src/",
     "copy:cjs": "yarn copy dist",
     "copy:esm": "yarn copy dist/esm",
     "lint": "eslint '**/*.{js,ts,tsx}'",
@@ -63,6 +63,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-knobs": "^6.0.20",
@@ -91,14 +92,18 @@
     "husky": "^4.2.5",
     "jest": "^26.4.2",
     "lint-staged": "^10.2.13",
+    "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "rollup": "^2.26.7",
-    "rollup-plugin-postcss": "^3.1.6",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
+    "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-terser": "^7.0.1",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "sass-loader": "^10.0.1",
     "serve": "^11.3.2",
     "typescript": "^4.0.2"
   },
@@ -123,8 +128,5 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
-  },
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com/"
   }
 }

rollup.config.js

@@ -39,9 +39,7 @@ export default [
         extensions,
       }),
       babel(babelOptions),
-      postcss({
-        extract: 'style.css',
-      }),
+      postcss(),
     ],
   },
   {
@@ -55,11 +53,8 @@ export default [
       resolve({
         extensions,
       }),
-      babel({
-        ...babelOptions,
-      }),
+      babel(babelOptions),
       postcss({
-        extract: 'style.min.css',
         minimize: true,
       }),
       terser(),

src/Button/Button.story.tsx

@@ -1,26 +1,19 @@
 import React, { FC } from 'react'
-import { number, color } from '@storybook/addon-knobs'
+import { boolean, select } from '@storybook/addon-knobs'
 import { Button } from './'
 
-const sizeOptions = {
-  range: true,
-  min: 0.125,
-  max: 4,
-  step: 0.005,
-}
-
 export default {
   component: Button,
   title: 'Button',
 }
 
-export const basic: FC = () => <Button>Basic</Button>
-
-export const custom: FC = () => (
+export const Simple: FC = () => (
   <Button
-    fontSize={number('Size', 1, sizeOptions)}
-    backgroundColor={color('Color', '#d36ac2')}
+    disabled={boolean('Disabled', false)}
+    kind={select('Kind', ['contained', 'outlined', 'text'], 'contained')}
+    size={select('Size', ['small', 'medium', 'large'], 'medium')}
+    tier={select('Tier', ['primary', 'secondary'], 'primary')}
   >
-    Custom
+    Simple
   </Button>
 )

src/Button/Button.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { Button } from './'
+import { defaultProps } from './Button.types'
 
 it('renders correctly', (): void => {
   const tree = renderer.create(<Button />).toJSON()
@@ -10,18 +11,18 @@ it('renders correctly', (): void => {
 it('joins default class with className prop', (): void => {
   const { root } = renderer.create(<Button className='button' />)
 
-  expect(root.findByType('button').props.className).toEqual('uc-button button')
+  expect(root.findByType('button').props.className).toEqual(
+    'artio-button button'
+  )
 })
 
-it('sets CSS vars with props', (): void => {
-  const { root } = renderer.create(
-    <Button fontSize={2} backgroundColor='#d36ac2' style={{ margin: 20 }} />
-  )
-  const { style } = root.findByType('button').props
+it('check the default values', (): void => {
+  const { root } = renderer.create(<Button />)
+  const buttonProps = root.findByType('button').props
 
-  expect(style).toEqual({
-    '--uc-font-size': '2rem',
-    '--uc-background-color': '#d36ac2',
-    margin: 20,
-  })
+  expect([
+    buttonProps['data-kind'],
+    buttonProps['data-size'],
+    buttonProps['data-tier'],
+  ]).toEqual([defaultProps.kind, defaultProps.size, defaultProps.tier])
 })

src/Button/Button.tsx

@@ -1,26 +1,27 @@
-import React, { FC, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
+
 import { clsx } from '../utils'
-import { ButtonProps, ButtonRef, StyleProps } from './Button.types'
-import './button.css'
 
-const Button: FC<ButtonProps> = forwardRef<ButtonRef, ButtonProps>(
-  ({ children, backgroundColor, fontSize, style, ...props }, ref) => {
-    const varStyle: StyleProps = { ...style }
-    backgroundColor && (varStyle['--uc-background-color'] = backgroundColor)
-    fontSize && (varStyle['--uc-font-size'] = `${fontSize}rem`)
+import { ButtonProps, ButtonRef, defaultProps } from './Button.types'
+import './button.scss'
 
+const Button = forwardRef<ButtonRef, ButtonProps>(
+  ({ children, kind, size, tier, ...props }, ref) => {
     return (
       <button
+        {...props}
         ref={ref}
-        className={clsx('uc-button', props.className)}
-        style={varStyle}
+        className={clsx('artio-button', props.className)}
+        data-kind={kind}
+        data-size={size}
+        data-tier={tier}
       >
         {children}
       </button>
     )
   }
 )
 
-Button.displayName = 'Button'
+Button.defaultProps = defaultProps
 
 export default Button

src/Button/Button.types.ts

@@ -1,13 +1,16 @@
-import { ButtonHTMLAttributes, CSSProperties } from 'react'
+import { ButtonHTMLAttributes, ReactNode } from 'react'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  backgroundColor?: string
-  fontSize?: number
+  children?: ReactNode
+  size?: 'small' | 'medium' | 'large'
+  kind?: 'contained' | 'outlined' | 'text'
+  tier?: 'primary' | 'secondary'
 }
 
 export type ButtonRef = HTMLButtonElement
 
-export interface StyleProps extends CSSProperties {
-  '--uc-font-size'?: string
-  '--uc-background-color'?: string
+export const defaultProps: ButtonProps = {
+  kind: 'contained',
+  size: 'medium',
+  tier: 'primary',
 }

src/Button/__snapshots__/Button.test.tsx.snap

@@ -2,7 +2,9 @@
 
 exports[`renders correctly 1`] = `
 <button
-  className="uc-button"
-  style={Object {}}
+  className="artio-button"
+  data-kind="contained"
+  data-size="medium"
+  data-tier="primary"
 />
 `;