Fix Blockquote imports + Eslint (#83)

rad-ui · Oct 29, 2023 · bbb77ee · bbb77ee
1 parent c5ed4a2
commit bbb77ee
Show file tree

Hide file tree

Showing 40 changed files with 765 additions and 736 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -20,13 +20,41 @@ module.exports = {
     ],
     'rules': {
         'react/react-in-jsx-scope': 'off',
-        'no-multiple-empty-lines': ['error', {'max': 1, 'maxEOF': 1}],
-        'indent': ['error', 4],
+        'no-multiple-empty-lines': ['warn', {'max': 1, 'maxEOF': 1}],
+        'indent': ['warn', 4],
+        'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}],
+        'no-trailing-spaces': 'warn',
+        'no-mixed-spaces-and-tabs': 'warn',
+        'no-multi-spaces': 'warn',
+        'no-unexpected-multiline': 'warn',
+        'no-unused-vars': 'warn',
+        'no-var': 'warn',
+        'prefer-const': 'warn',
+        'space-before-blocks': 'warn',
+        'space-before-function-paren': ['warn', 'never'],
+        'space-in-parens': 'warn',
+        'spaced-comment': 'warn',
+        'arrow-spacing': 'warn',
+        'comma-style': 'warn',
+        'eol-last': 'warn',
+        'func-call-spacing': 'warn',
+        'comma-spacing': ['warn', {'before': false, 'after': true}],
+        'quotes': ['warn', 'single'],
+        'react/prop-types': 'off',
+        'prefer-rest-params': 'off',
+        'no-func-assign': 'off',
+        'no-invalid-this': 'off',
+        'react/no-unknown-property': 'off',
+        'camelcase': 'off',
+        'react/jsx-key': 'off',
+        'require-jsdoc': 'off',
+        'guard-for-in': 'off',
+        'no-empty-pattern': 'off',
 
         // ignore long strings
         'max-len': 'off',
         'semi': [
-            'error',
+            'warn',
             'always',
         ],
     },

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "build-storybook": "storybook build",
     "build": "rollup -c",
     "generate-tokens": "node ./scripts/tokenGen",
-    "publish": "npm publish --access public"
+    "publish": "npm publish --access public",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx . --fix"
   },
   "repository": {
     "type": "git",
@@ -51,6 +52,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
     "postcss": "^8.4.29",
     "prop-types": "^15.8.1",
     "rollup": "^3.29.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
     plugins: {
-      'postcss-import': {},
-      tailwindcss: {},
-      autoprefixer: {},
-    }
-  }
+        'postcss-import': {},
+        'tailwindcss': {},
+        'autoprefixer': {},
+    },
+};
diff --git a/rollup.config.js b/rollup.config.js
@@ -47,7 +47,7 @@ export default {
     onwarn(warning, warn) {
         if (
             warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
-          warning.message.includes(`use client`)
+          warning.message.includes('use client')
         ) {
             // Ignore this warning
             return;

diff --git a/scripts/tokenGen/generateAccentTokens.js b/scripts/tokenGen/generateAccentTokens.js
@@ -20,43 +20,36 @@ const COLOR_PREFIX = '--rad-ui-color-';
 
  */
 
-
-let accentColor = colors.red;
-let jsVariables = {};
+const accentColor = colors.red;
+const jsVariables = {};
 const generateAccentTokens = (theme) => {
-    let cssVariables = [];
+    const cssVariables = [];
     const color = accentColor;
 
-    let accentStyleSheet = "";
-
-    for(const colorObj in colors){
-
-        let colorName = colorObj
-        let accentColors = colors[colorObj][theme];
-        console.log(accentColors)
+    let accentStyleSheet = '';
+
+    for (const colorObj in colors) {
+        const colorName = colorObj;
+        const accentColors = colors[colorObj][theme];
+        console.log(accentColors);
 
-        //generate data-accent-color css styles
+        // generate data-accent-color css styles
         let cssVariableName = `[data-accent-color=${colorObj}]{`;
-        cssVariableName += `\n`;
+        cssVariableName += '\n';
         // plug in variables here
-        for(const [shadeName, shadeValue] of Object.entries(accentColors)){
+        for (const [shadeName, shadeValue] of Object.entries(accentColors)) {
             cssVariableName += `${COLOR_PREFIX}accent-${shadeName}: var(${COLOR_PREFIX}${colorName}-${shadeName});`;
-            cssVariableName += `\n`;
-
+            cssVariableName += '\n';
         }
 
         // close css variable
-        cssVariableName += `}`;
-        cssVariableName += `\n`;
-        console.log(cssVariableName)
+        cssVariableName += '}';
+        cssVariableName += '\n';
+        console.log(cssVariableName);
         accentStyleSheet += cssVariableName;
-
-
-
     }
 
-    return accentStyleSheet
-}
-
+    return accentStyleSheet;
+};
 
-export default generateAccentTokens;
+export default generateAccentTokens;
diff --git a/scripts/tokenGen/generateCSSTokens.js b/scripts/tokenGen/generateCSSTokens.js
@@ -2,35 +2,32 @@ import colors from '../../src/colors/index.js';
 const COLOR_PREFIX = '--rad-ui-color-';
 
 // Function to generate CSS variables based on the theme
-let jsVariables = {};
+const jsVariables = {};
 
 function generateCSSTokens(theme) {
     let cssVariables = [];
-
-
+
     // Loop through the colors
     for (const [colorName, colorShades] of Object.entries(colors)) {
-      // Loop through the shades
-      for (const [shadeName, shadeValue] of Object.entries(colorShades[theme])) {
+        // Loop through the shades
+        for (const [shadeName, shadeValue] of Object.entries(colorShades[theme])) {
         // Create the CSS variable name
-        const cssVariableName = `${COLOR_PREFIX}${colorName}-${shadeName}`;
-        // Add the CSS variable to the array
-        cssVariables.push(`${cssVariableName}: ${shadeValue};`);
-
-        // Create the JS variable name
-        const jsVariableName = `${colorName}`;
-        // Add the JS variable to the object
-        jsVariables[jsVariableName] = jsVariables[jsVariableName] || {};
-        jsVariables[jsVariableName][shadeName] = `var(${cssVariableName})`;
-
-      }
+            const cssVariableName = `${COLOR_PREFIX}${colorName}-${shadeName}`;
+            // Add the CSS variable to the array
+            cssVariables.push(`${cssVariableName}: ${shadeValue};`);
+
+            // Create the JS variable name
+            const jsVariableName = `${colorName}`;
+            // Add the JS variable to the object
+            jsVariables[jsVariableName] = jsVariables[jsVariableName] || {};
+            jsVariables[jsVariableName][shadeName] = `var(${cssVariableName})`;
+        }
     }
 
     // Return the CSS variables as a string
-    cssVariables= cssVariables.join("\n");
-
-    return {cssVariables, jsVariables}
-  }
+    cssVariables= cssVariables.join('\n');
 
+    return {cssVariables, jsVariables};
+}
 
-  export default generateCSSTokens;
+export default generateCSSTokens;
diff --git a/scripts/tokenGen/index.js b/scripts/tokenGen/index.js
@@ -1,28 +1,24 @@
-import fs from "fs"
+import fs from 'fs';
 
 import colors from '../../src/colors/index.js';
 
-import generateCSSTokens from "./generateCSSTokens.js"
-import generateAccentTokens from "./generateAccentTokens.js"
+import generateCSSTokens from './generateCSSTokens.js';
+import generateAccentTokens from './generateAccentTokens.js';
 
 // Generate CSS variables for the light theme
 
 let jsVariables = {};
 
-
-const {cssVariables: lightThemeCss, jsVariables:lightThemeJSTokens} = generateCSSTokens("light");
-jsVariables = {...jsVariables, ...lightThemeJSTokens}
-
-
+const {cssVariables: lightThemeCss, jsVariables: lightThemeJSTokens} = generateCSSTokens('light');
+jsVariables = {...jsVariables, ...lightThemeJSTokens};
 
 // Generate CSS variables for the dark theme
-const {cssVariables: DarkThemeCss, jsVariables:DarkThemeJSTokens} = generateCSSTokens("dark");
-jsVariables = {...jsVariables, ...DarkThemeJSTokens}
+const {cssVariables: DarkThemeCss, jsVariables: DarkThemeJSTokens} = generateCSSTokens('dark');
+jsVariables = {...jsVariables, ...DarkThemeJSTokens};
 
 // Generate accent colors css
 
-const accentTokens= generateAccentTokens("light");
-
+const accentTokens= generateAccentTokens('light');
 
 // Combine light and dark theme CSS
 const combinedCss = `

diff --git a/src/colors/crimson.js b/src/colors/crimson.js
@@ -1,32 +1,32 @@
 const crimson = {
     light: {
-        50: "hsl(332, 100%, 99.4%)",
-        100: "hsl(330, 100%, 98.4%)",
-        200: "hsl(331, 85.6%, 96.6%)",
-        300: "hsl(331, 78.1%, 94.2%)",
-        400: "hsl(332, 72.1%, 91.1%)",
-        500: "hsl(333, 67.0%, 86.7%)",
-        600: "hsl(335, 63.5%, 80.4%)",
-        700: "hsl(336, 62.3%, 72.9%)",
-        800: "hsl(336, 80.0%, 57.8%)",
-        900: "hsl(336, 71.3%, 52.8%)",
-        950: "hsl(336, 75.0%, 45.5%)",
-        1000: "hsl(332, 63.0%, 23.5%)",
+        50: 'hsl(332, 100%, 99.4%)',
+        100: 'hsl(330, 100%, 98.4%)',
+        200: 'hsl(331, 85.6%, 96.6%)',
+        300: 'hsl(331, 78.1%, 94.2%)',
+        400: 'hsl(332, 72.1%, 91.1%)',
+        500: 'hsl(333, 67.0%, 86.7%)',
+        600: 'hsl(335, 63.5%, 80.4%)',
+        700: 'hsl(336, 62.3%, 72.9%)',
+        800: 'hsl(336, 80.0%, 57.8%)',
+        900: 'hsl(336, 71.3%, 52.8%)',
+        950: 'hsl(336, 75.0%, 45.5%)',
+        1000: 'hsl(332, 63.0%, 23.5%)',
     },
     dark: {
-        50: "hsl(335, 20.0%, 9.6%)",
-        100: "hsl(336, 32.3%, 12.2%)",
-        200: "hsl(336, 40.2%, 16.0%)",
-        300: "hsl(336, 44.4%, 18.5%)",
-        400: "hsl(336, 48.4%, 21.3%)",
-        500: "hsl(336, 53.9%, 25.5%)",
-        600: "hsl(336, 62.7%, 32.8%)",
-        700: "hsl(336, 80.0%, 45.1%)",
-        800: "hsl(336, 80.0%, 57.8%)",
-        900: "hsl(339, 87.0%, 67.2%)",
-        950: "hsl(341, 100%, 76.0%)",
-        1000: "hsl(330, 90.0%, 91.0%)",
+        50: 'hsl(335, 20.0%, 9.6%)',
+        100: 'hsl(336, 32.3%, 12.2%)',
+        200: 'hsl(336, 40.2%, 16.0%)',
+        300: 'hsl(336, 44.4%, 18.5%)',
+        400: 'hsl(336, 48.4%, 21.3%)',
+        500: 'hsl(336, 53.9%, 25.5%)',
+        600: 'hsl(336, 62.7%, 32.8%)',
+        700: 'hsl(336, 80.0%, 45.1%)',
+        800: 'hsl(336, 80.0%, 57.8%)',
+        900: 'hsl(339, 87.0%, 67.2%)',
+        950: 'hsl(341, 100%, 76.0%)',
+        1000: 'hsl(330, 90.0%, 91.0%)',
     },
 };
 
-export default crimson
+export default crimson;