v0.5.1 -> v0.6.0 (#122)

* Components theming (#121)

* Skeleton theming (#112)

* feat - Input toggle link theming: Revamp input, toggle, link styles (#115)

* feat #113 - Button theming (#117)

* Tooltip popover theming (#118)

* feat #119 - Notifications V2 (#120)

.storybook/index.css

@@ -1,7 +1,7 @@
 /* This is the global dassana stylesheet. It should match the global stylesheet in web-orchestrator. */
 
 @import '~normalize.css';
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
 
 html,
 body,

.storybook/preview.tsx

@@ -24,6 +24,16 @@ const { sideBySide, left, right } = LayoutTypes
 
 const { dark, light } = ThemeType
 
+// Storybook theme needs an extra "type" property to conditionally render a dark or light themed story for Popover and Tooltip components.
+export interface SbTheme extends Theme {
+	type: ThemeType.dark | ThemeType.light
+}
+
+const sbThemes = {
+	[dark]: { ...themes[dark], type: dark },
+	[light]: { ...themes[light], type: light }
+}
+
 const useStyles = createUseStyles({
 	storyContainer: {
 		display: 'flex'
@@ -70,6 +80,7 @@ const StoryWrapper: FC<StoryWrapperProps> = ({
 	const classes = useStyles()
 	const wrapperClasses = cn({
 		dark,
+		light: !dark,
 		[classes.storyWrapper]: true
 	})
 
@@ -107,12 +118,12 @@ const ThemeDecorator = (
 		case sideBySide: {
 			return (
 				<div className={classes.storyContainer}>
-					<ThemeProvider theme={themes[light]}>
+					<ThemeProvider theme={sbThemes[light]}>
 						<ThemedBlock side={left}>
 							<ComponentStory />
 						</ThemedBlock>
 					</ThemeProvider>
-					<ThemeProvider theme={themes[dark]}>
+					<ThemeProvider theme={sbThemes[dark]}>
 						<ThemedBlock side={right}>
 							<ComponentStory />
 						</ThemedBlock>
@@ -123,7 +134,7 @@ const ThemeDecorator = (
 
 		default: {
 			return (
-				<ThemeProvider theme={themes[theme]}>
+				<ThemeProvider theme={sbThemes[theme as ThemeType]}>
 					<ThemedCanvasBg />
 					<StoryWrapper dark={theme === dark}>
 						<ComponentStory />

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.5.1",
+	"version": "0.6.0",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
@@ -14,6 +14,7 @@
 		"@storybook/addon-cssresources": "^6.0.22",
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.5.0",
+		"@testing-library/react-hooks": "^3.4.2",
 		"@testing-library/user-event": "^7.2.1",
 		"@types/color": "^3.0.1",
 		"@types/jest": "^24.9.1",
@@ -24,6 +25,7 @@
 		"bytes": "^3.1.0",
 		"classnames": "^2.2.6",
 		"color": "^3.1.2",
+		"framer-motion": "^2.9.1",
 		"fuse.js": "^6.4.1",
 		"lodash": "^4.17.20",
 		"moment": "^2.27.0",
@@ -32,7 +34,8 @@
 		"react-hook-form": "^6.5.0",
 		"react-jss": "^10.4.0",
 		"react-scripts": "^3.4.3",
-		"typescript": "^3.9.7"
+		"typescript": "^3.9.7",
+		"uuid": "^8.3.1"
 	},
 	"scripts": {
 		"start": "npm run storybook",
@@ -88,6 +91,7 @@
 		"@types/enzyme": "^3.10.5",
 		"@types/enzyme-adapter-react-16": "^1.0.6",
 		"@types/lodash": "^4.14.161",
+		"@types/uuid": "^8.3.0",
 		"@typescript-eslint/eslint-plugin": "^3.9.0",
 		"@typescript-eslint/parser": "^3.9.0",
 		"chromatic": "^5.1.0",

rollup.config.ts

@@ -28,7 +28,7 @@ const rootImport = options => ({
 })
 
 export default {
-	external: ['antd', 'react'],
+	external: ['antd', 'react', 'uuid'],
 	input: 'src/components/index.ts',
 	output: [
 		{