Use CSS Modules

.husky/pre-commit

@@ -2,4 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged
+nx affected:build --uncommitted
 nx affected:test --uncommitted

libs/ui-toolkit/src/components/callout/callout.tsx

@@ -1,4 +1,4 @@
-// import './callout.scss';
+import styles from './callout.module.scss';
 import React from 'react';
 
 export const Callout = ({
@@ -12,12 +12,15 @@ export const Callout = ({
   intent?: 'success' | 'error' | 'warn' | 'action';
   icon?: React.ReactNode;
 }) => {
-  const className = ['callout', intent ? `callout--${intent}` : ''].join(' ');
+  const className = [
+    styles['callout'],
+    intent ? styles[`callout--${intent}`] : '',
+  ].join(' ');
   return (
     <div data-testid="callout" className={className}>
-      {icon && <div className="callout__icon">{icon}</div>}
+      {icon && <div className={styles['callout__icon']}>{icon}</div>}
-      <div className="callout__content">
+      <div className={styles['callout__content']}>
-        {title && <h3 className="callout__title">{title}</h3>}
+        {title && <h3 className={styles['callout__title']}>{title}</h3>}
         {children}
       </div>
     </div>

libs/ui-toolkit/src/index.ts

@@ -1,7 +1,5 @@
 import * as EthereumUtils from './utils/web3';
 
-export * from './lib/ui-toolkit';
-
 export { Callout } from './components/callout';
 export { EtherscanLink } from './components/etherscan-link';
 export { EthereumUtils };

libs/ui-toolkit/src/lib/ui-toolkit.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import UiToolkit from './ui-toolkit';
-
-describe('UiToolkit', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<UiToolkit />);
-    expect(baseElement).toBeTruthy();
-  });
-});

libs/ui-toolkit/src/lib/ui-toolkit.stories.tsx

@@ -1,12 +0,0 @@
-import { Story, Meta } from '@storybook/react';
-import { UiToolkit, UiToolkitProps } from './ui-toolkit';
-
-export default {
-  component: UiToolkit,
-  title: 'UiToolkit',
-} as Meta;
-
-const Template: Story<UiToolkitProps> = (args) => <UiToolkit {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {};

libs/ui-toolkit/src/lib/ui-toolkit.tsx

@@ -1,14 +0,0 @@
-// import './ui-toolkit.module.scss';
-
-/* eslint-disable-next-line */
-export interface UiToolkitProps {}
-
-export function UiToolkit(props: UiToolkitProps) {
-  return (
-    <div>
-      <h1>Welcome to UiToolkit!</h1>
-    </div>
-  );
-}
-
-export default UiToolkit;