feat: project cleanup

.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
 	useTabs: true,
 	tabWidth: 4,
-	printWidth: 80,
+	printWidth: 100,
 	singleQuote: true,
 	trailingComma: 'es5',
 	bracketSpacing: true,

.storybook/main.js

@@ -1,10 +1,16 @@
+const path = require('path');
+
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/preset-scss',
-    '@storybook/addon-actions',
-    '@storybook/addon-postcss',
-  ],
+	stories: [
+		'../src/**/*.stories.mdx',
+		'../src/**/*.stories.@(js|jsx|ts|tsx)',
+	],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/preset-scss',
+	],
+	framework: '@storybook/react',
+	staticDirs: ['../public'],
 };

.storybook/manager.js

@@ -1,5 +1,6 @@
 import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';
+
 import theme from './cheesebit-theme';
 
 addons.setConfig({

.storybook/preview-head.html

@@ -1,7 +1,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Karla:wght@200;400;500;700display=swap"
-  rel="stylesheet"
+	href="https://fonts.googleapis.com/css2?family=Karla:wght@200;400;500;700display=swap"
+	rel="stylesheet"
 />
-<link rel="stylesheet" href="styles.css" />
+<script src="https://cdn.tailwindcss.com"></script>

.storybook/webpack.config.js

@@ -1,22 +1,23 @@
 const path = require('path');
 
 module.exports = ({ config }) => {
-  let rule = config.module.rules.find(
-    r =>
-      // it can be another rule with file loader
-      // we should get only svg related
-      r.test &&
-      r.test.toString().includes('svg') &&
-      // file-loader might be resolved to js file path so "endsWith" is not reliable enough
-      r.loader &&
-      r.loader.includes('file-loader'),
-  );
-  rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
+	let rule = config.module.rules.find(
+		(r) =>
+			// it can be another rule with file loader
+			// we should get only svg related
+			r.test &&
+			r.test.toString().includes('svg') &&
+			// file-loader might be resolved to js file path so "endsWith" is not reliable enough
+			r.loader &&
+			r.loader.includes('file-loader')
+	);
+	rule.test =
+		/\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
 
-  config.module.rules.push({
-    test: /\.svg$/,
-    use: ['@svgr/webpack'],
-  });
+	config.module.rules.push({
+		test: /\.svg$/,
+		use: ['@svgr/webpack'],
+	});
 
-  return config;
+	return config;
 };

rollup.config.js

@@ -1,6 +1,6 @@
 import { terser } from 'rollup-plugin-terser';
 import analyze from 'rollup-plugin-analyzer';
-import autoprefixer from 'autoprefixer';
+
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import cssnano from 'cssnano';
@@ -12,6 +12,7 @@ import postcss from 'postcss';
 import resolve from '@rollup/plugin-node-resolve';
 import scss from 'rollup-plugin-scss';
 import svgr from '@svgr/rollup';
+
 import pkg from './package.json';
 
 const ATOMS_PATH_PREFIX = './src/atoms';
@@ -21,32 +22,32 @@ const HOC_PATH_PREFIX = './src/hocs';
 
 module.exports = {
 	input: {
-		badge: `${ATOMS_PATH_PREFIX}/badge/index`,
-		button: `${ATOMS_PATH_PREFIX}/button/index`,
-		checkbox: `${ATOMS_PATH_PREFIX}/checkbox/index`,
-		icon: `${ATOMS_PATH_PREFIX}/icon/index`,
-		image: `${ATOMS_PATH_PREFIX}/image/index`,
-		input: `${ATOMS_PATH_PREFIX}/input/index`,
-		label: `${ATOMS_PATH_PREFIX}/label/index`,
-		link: `${ATOMS_PATH_PREFIX}/link/index`,
-		list: `${ATOMS_PATH_PREFIX}/list/index`,
-		overlay: `${ATOMS_PATH_PREFIX}/overlay/index`,
-		page: `${ATOMS_PATH_PREFIX}/page/index`,
-		panels: `${ATOMS_PATH_PREFIX}/panels/index`,
-		radio: `${ATOMS_PATH_PREFIX}/radio/index`,
-		spinner: `${ATOMS_PATH_PREFIX}/spinner/index`,
-		tooltip: `${ATOMS_PATH_PREFIX}/tooltip/index`,
-		// card: `${MOLECULES_PATH_PREFIX}/card/index`,
-		dropdown: `${MOLECULES_PATH_PREFIX}/dropdown/index`,
-		pagination: `${MOLECULES_PATH_PREFIX}/pagination/index`,
-		select: `${MOLECULES_PATH_PREFIX}/select/index`,
-		tabs: `${MOLECULES_PATH_PREFIX}/tabs/index`,
-		calendar: `${ORGANISMS_PATH_PREFIX}/calendar/index`,
-		'date-picker': `${ORGANISMS_PATH_PREFIX}/date-picker/index`,
-		form: `${ORGANISMS_PATH_PREFIX}/form/index`,
-		tabbed: `${ORGANISMS_PATH_PREFIX}/tabbed/index`,
-		table: `${ORGANISMS_PATH_PREFIX}/table/index`,
-		wizard: `${ORGANISMS_PATH_PREFIX}/wizard/index`,
+		badge: `${ATOMS_PATH_PREFIX}/badge/index.js`,
+		button: `${ATOMS_PATH_PREFIX}/button/index.js`,
+		checkbox: `${ATOMS_PATH_PREFIX}/checkbox/index.js`,
+		icon: `${ATOMS_PATH_PREFIX}/icon/index.js`,
+		image: `${ATOMS_PATH_PREFIX}/image/index.js`,
+		input: `${ATOMS_PATH_PREFIX}/input/index.js`,
+		label: `${ATOMS_PATH_PREFIX}/label/index.js`,
+		link: `${ATOMS_PATH_PREFIX}/link/index.js`,
+		list: `${ATOMS_PATH_PREFIX}/list/index.js`,
+		overlay: `${ATOMS_PATH_PREFIX}/overlay/index.js`,
+		page: `${ATOMS_PATH_PREFIX}/page/index.js`,
+		panels: `${ATOMS_PATH_PREFIX}/panels/index.js`,
+		radio: `${ATOMS_PATH_PREFIX}/radio/index.js`,
+		spinner: `${ATOMS_PATH_PREFIX}/spinner/index.js`,
+		tooltip: `${ATOMS_PATH_PREFIX}/tooltip/index.js`,
+		// card: `${MOLECULES_PATH_PREFIX}/card/index.js`,
+		dropdown: `${MOLECULES_PATH_PREFIX}/dropdown/index.js`,
+		pagination: `${MOLECULES_PATH_PREFIX}/pagination/index.js`,
+		select: `${MOLECULES_PATH_PREFIX}/select/index.js`,
+		tabs: `${MOLECULES_PATH_PREFIX}/tabs/index.js`,
+		calendar: `${ORGANISMS_PATH_PREFIX}/calendar/index.js`,
+		'date-picker': `${ORGANISMS_PATH_PREFIX}/date-picker/index.js`,
+		form: `${ORGANISMS_PATH_PREFIX}/form/index.js`,
+		tabbed: `${ORGANISMS_PATH_PREFIX}/tabbed/index.js`,
+		table: `${ORGANISMS_PATH_PREFIX}/table/index.js`,
+		wizard: `${ORGANISMS_PATH_PREFIX}/wizard/index.js`,
 		'click-outside': `${HOC_PATH_PREFIX}/click-outside/index.js`,
 		'media-query-watcher': `${HOC_PATH_PREFIX}/media-query-watcher/index.js`,
 		'overflow-watcher': `${HOC_PATH_PREFIX}/overflow-watcher/index.js`,
@@ -65,16 +66,18 @@ module.exports = {
 @import "./src/styles/_tools.scss";
 `,
 			processor: (css) =>
-				postcss([autoprefixer, cssnano])
+				postcss([cssnano])
 					.process(css)
 					.then((result) => result.css),
 		}),
 		babel({
 			exclude: 'node_modules/**', // only transpile our source code
 			babelHelpers: 'bundled',
+			extensions: ['.js', '.jsx'],
 		}),
 		resolve({
 			preferBuiltins: true,
+			extensions: ['.js', '.jsx'],
 		}),
 		commonjs(),
 		json(),

src/atoms/badge/badge.js → src/atoms/badge/badge.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useClassy } from '@cheesebit/classy';
+import useClassy from '@cheesebit/classy';
 import PropTypes from 'prop-types';
 
 import './badge.scss';

src/atoms/badge/badge.stories.js → src/atoms/badge/badge.stories.jsx

@@ -25,9 +25,7 @@ export default {
 export function Playground(args) {
 	return (
 		<div className="block">
-			<p className="mb-2">
-				This is me, a cool Badge ready to be played around. Try me :)
-			</p>
+			<p className="mb-2">This is me, a cool Badge ready to be played around. Try me :)</p>
 			<Badge {...args} />
 		</div>
 	);

src/atoms/box/box.js → src/atoms/box/box.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useClassy } from '@cheesebit/classy';
+import useClassy from '@cheesebit/classy';
 
 import { omit, isNil } from 'common/toolset';
 import { evaluateBorderless, evaluatePaddingless } from 'common/props-toolset';
@@ -49,9 +49,7 @@ const Box = React.forwardRef(
 		}
 
 		function renderChildren() {
-			return (
-				!isNil(children) && <span className="children">{children}</span>
-			);
+			return !isNil(children) && <span className="children">{children}</span>;
 		}
 
 		function renderTrailing() {

src/atoms/box/box.scss

@@ -31,4 +31,12 @@
 	& > .children:not(:empty) + .trailing {
 		@include var(margin-left, spacing-2);
 	}
+
+	&.-block {
+		width: 100%;
+
+		& > .children {
+			flex: 1;
+		}
+	}
 }

src/atoms/button/button.js → src/atoms/button/button.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useClassy } from '@cheesebit/classy';
+import useClassy from '@cheesebit/classy';
 
 import { Box } from '../box';
 import { Icon } from '../icon';

src/atoms/button/button.stories.js → src/atoms/button/button.stories.jsx

@@ -17,9 +17,9 @@ export default {
 			},
 		},
 		icon: {
+			options: keys(icons),
 			control: {
 				type: 'select',
-				options: keys(icons),
 			},
 		},
 		leading: {
@@ -44,9 +44,7 @@ export default {
 export function Playground(args) {
 	return (
 		<div className="block">
-			<p className="mb-2">
-				This is me, a cool Button ready to be played around. Try me :)
-			</p>
+			<p className="mb-2">This is me, a cool Button ready to be played around. Try me :)</p>
 			<Button {...args} />
 		</div>
 	);

src/atoms/checkbox/checkbox.js → src/atoms/checkbox/checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useClassy } from '@cheesebit/classy';
+import useClassy from '@cheesebit/classy';
 import PropTypes from 'prop-types';
 
 import { Box } from '../box';
@@ -36,11 +36,7 @@ function Checkbox(props) {
 		<Box
 			data-testid="cb-checkbox"
 			as="label"
-			className={classy(
-				'cb-checkbox',
-				{ 'is-disabled': disabled },
-				className
-			)}
+			className={classy('cb-checkbox', { 'is-disabled': disabled }, className)}
 			borderless={borderless}
 			paddingless={paddingless}
 			block={block}

src/atoms/checkbox/checkbox.stories.js → src/atoms/checkbox/checkbox.stories.jsx

@@ -19,8 +19,7 @@ export function Playground(args) {
 	return (
 		<div className="block">
 			<p className="mb-2">
-				This is me, a cool Checkbox family ready to be played around.
-				Try me :)
+				This is me, a cool Checkbox family ready to be played around. Try me :)
 			</p>
 			<div className="flex flex-col space-y-2">
 				<Checkbox {...args} />
@@ -38,8 +37,7 @@ export function Group(args) {
 	return (
 		<div className="block">
 			<p className="mb-2">
-				This is me, a cool Checkbox family ready to be played around.
-				Try me :)
+				This is me, a cool Checkbox family ready to be played around. Try me :)
 			</p>
 			<div className="flex flex-col space-y-2">
 				<Checkbox {...args}>{generator.name()}</Checkbox>

src/atoms/icon/icon.js → src/atoms/icon/icon.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import clsx from 'clsx';
+import { classy } from '@cheesebit/classy';
 import PropTypes from 'prop-types';
 
 import { equals, isNil, pick } from 'common/toolset';
@@ -14,7 +14,7 @@ class Icon extends React.PureComponent {
 	get classes() {
 		const { className, variant } = this.props;
 
-		return clsx(
+		return classy(
 			'cb-icon',
 			{
 				'-danger': equals(variant, 'danger'),

src/atoms/icon/icon.stories.js → src/atoms/icon/icon.stories.jsx

@@ -10,9 +10,9 @@ export default {
 
 	argTypes: {
 		name: {
+			options: keys(icons),
 			control: {
 				type: 'select',
-				options: keys(icons),
 			},
 		},
 	},
@@ -21,9 +21,7 @@ export default {
 export function Playground(args) {
 	return (
 		<div className="block">
-			<p className="mb-2">
-				This is me, a cool Icon ready to be played around. Try me :)
-			</p>
+			<p className="mb-2">This is me, a cool Icon ready to be played around. Try me :)</p>
 
 			<Icon {...args} />
 		</div>