Bump to v1.2.1

- Removed strong style constraints from within the component css
- Vite integration
- Dependencies cleanup

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
+    plugins: ['@typescript-eslint', 'react-hooks', 'prettier'],
+    parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    env: {
+        browser: true,
+        node: true,
+        es6: true,
+        jest: true
+    },
+    rules: {
+        "no-control-regex": 0,
+        'no-undef': 0,
+        'no-unused-vars': 'off',
+        'react/prop-types': 0,
+        '@typescript-eslint/camelcase': 0,
+        '@typescript-eslint/no-unused-vars': 1,
+        '@typescript-eslint/no-use-before-define': 0,
+        '@typescript-eslint/ban-ts-comment': 0,
+        '@typescript-eslint/ban-ts-ignore': 0,
+        '@typescript-eslint/explicit-member-accessibility': 0,
+        '@typescript-eslint/member-delimiter-style': 0,
+        '@typescript-eslint/no-empty-function': 0,
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn'
+    },
+    settings: {
+        react: {
+            version: 'detect'
+        }
+    }
+}

.gitignore

@@ -1,6 +1,27 @@
-node_modules/
-docs-build/
-coverage/
-build/
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+
+/coverage
+
+# production
+
+/dist
+/docs-build
+
+# misc
+
+.eslintcache
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log\*
 debug.log
-.out
+.out

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "printWidth": 160,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "none",
+    "bracketSpacing": true
+}

.storybook/main.ts

@@ -1,35 +1,22 @@
-module.exports = {
-  stories: ["../src/**/*.stories.tsx"],
-  addons: ["@storybook/addon-docs", "@storybook/addon-viewport", "@storybook/addon-a11y"],
-  typescript: {
-    reactDocgen: "react-docgen-typescript",
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        outDir: "build",
-        module: "esnext",
-        target: "esnext",
-        lib: ["es6", "dom", "es2016", "es2017"],
-        sourceMap: true,
-        allowJs: false,
-        jsx: "react",
-        declaration: true,
-        forceConsistentCasingInFileNames: true,
-        noImplicitReturns: true,
-        noImplicitThis: true,
-        noImplicitAny: true,
-        strictNullChecks: true,
-        suppressImplicitAnyIndexErrors: true,
-        noUnusedLocals: false,
-        noUnusedParameters: true,
-        esModuleInterop: true
-      }
+import type { StorybookConfig } from '@storybook/react-vite'
+import { withoutVitePlugins } from '@storybook/builder-vite'
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-onboarding', '@storybook/addon-interactions'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {}
+    },
+    docs: {
+        autodocs: 'tag'
+    },
+    viteFinal: async (config) => {
+        return {
+            ...config,
+            plugins: await withoutVitePlugins(config.plugins, ['vite:lib-inject-css'])
+        }
     }
-  },
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {}
-  },
-  docs: {
-    autodocs: true
-  }
-};
+}
+
+export default config

.storybook/preview.ts

@@ -1,8 +1,10 @@
-export const parameters = {
-    a11y: {
-      element: '#root',
-      config: {},
-      options: {},
-      manual: true,
-    },
-  };
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {}
+    }
+}
+
+export default preview

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Cristiano Raimondi
+Copyright (c) 2020 - 2023 Cristiano Raimondi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -182,11 +182,11 @@ The class that contains all the colors for the light mode.
 
 The class that contains all the colors for the dark mode.
 
-### `.c-UsageBar` | `.c-UsageBar__compact`
+### `.c-UsageBar`
 
 The main div of the component.
 
-### `.o-UsageBar__bar` | `.o-UsageBar__compact__bar`
+### `.o-UsageBar__bar`
 
 The actual bar of the component.
 

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>React Usage Bar - Development</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

jsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "target": "es2020",
+      "allowSyntheticDefaultImports": false,
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["src/*"]
+      }
+    },
+    "exclude": ["node_modules", "public", "build"]
+  }