Merge branch 'main' into pr/484

.eslintrc

@@ -16,6 +16,7 @@
       "react-hooks"
     ],
     "rules": {
+      "react/button-has-type": "error",
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-non-null-assertion": "off",

.github/pull_request_template.md

@@ -49,3 +49,4 @@ If yes, please describe the impact and migration path for existing applications:
 - [ ] I have added tests to cover my changes
 - [ ] Check the ["Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating your PR.
 - [ ] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
+- [ ] By contributing to Tremor, you confirm that you have read and agreed to Tremor's [CONTRIBUTING.md](https://github.com/tremorlabs/tremor/blob/main/CONTRIBUTING.md) guideline. You also agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/License) license.

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .DS_Store
 storybook-static
-package-lock.json
+package-lock.json
+.vscode

.prettierrc.json

@@ -1,10 +1,10 @@
 {
-    "bracketSpacing": true,
-    "singleQuote": false,
-    "trailingComma": "all",
-    "tabWidth": 2,
-    "semi": true,
-    "printWidth": 100,
-    "jsxSingleQuote": false,
-    "endOfLine": "auto"
+  "bracketSpacing": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 100,
+  "jsxSingleQuote": false,
+  "endOfLine": "auto"
 }

.storybook/main.js

@@ -1,34 +1,59 @@
-var path = require('path');
+var path = require("path");
 
 module.exports = {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", {
-    name: '@storybook/addon-postcss',
-    options: {
-      cssLoaderOptions: {
-        // When you have splitted your css over multiple files
-        // and use @import('./other-styles.css')
-        importLoaders: 1,
-      },
-      postcssLoaderOptions: {
-        // When using postCSS 8
-        implementation: require('postcss'),
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-styling-webpack",
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: require.resolve("postcss-loader"),
+                options: {
+                  implementation: require.resolve("postcss"),
+                },
+              },
+            ],
+          },
+        ],
       },
     },
-  }],
-  "framework": "@storybook/react",
-  core: {
-    builder: "webpack5"
+  ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
   },
+
   features: {
     previewMdx2: true,
   },
+
   webpackFinal: async (config) => {
-    config.resolve.modules = [
-      ...(config.resolve.modules || []),
-      path.resolve(__dirname, "../src"),
-    ];
+    config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, "../src")];
 
     return config;
   },
-};
+
+  docs: {
+    autodocs: true,
+  },
+};

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+import tremorTheme from './tremorTheme';
+
+addons.setConfig({
+    theme: tremorTheme,
+});

.storybook/preview.js

@@ -1,4 +1,5 @@
-import '../src/styles.css'
+import "../src/styles.css";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -8,4 +9,28 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+  backgrounds: {
+    default: "light",
+    values: [
+      {
+        name: "light",
+        value: "#ffffff",
+      },
+      {
+        name: "dark",
+        value: "#0f172a",
+      },
+    ],
+  },
+};
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+    attributeName: "data-mode",
+  }),
+];

.storybook/tremorTheme.js

@@ -0,0 +1,21 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  brandTitle: "Tremor Storybook",
+  brandUrl: "https://storybook.tremor.so",
+  //   brandImage: 'images/tremor-logo.svg',
+  brandTarget: "_self",
+  //
+  colorSecondary: "#3b82f6",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  //   appBorderColor: '#585C6D',
+  appBorderRadius: 0,
+  //
+  barTextColor: "#9E9E9E",
+  barSelectedColor: "#3b82f6",
+  barBg: "#ffffff",
+});

README.md

@@ -2,31 +2,34 @@
 <br>
 <br>
 <div align="center">
-  <img alt="Tremor Logo" src="images/tremor-light-beta.svg" height="50"/>
+  <img alt="Tremor Logo" src="images/tremor-logo.svg" height="50"/>
 <br>
 <br>
 <br>
 
   <div align="center">
     <a href="https://www.npmjs.com/package/@tremor/react">
-      <img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=5C9BA1&label=npm&logo=npm">
+      <img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155">
     </a>
     <a href="https://tremor.so/docs/getting-started/introduction">
-      <img alt="Read the documentation" src="https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&labelColor=5c5c5c&color=5C9BA1" height="20" width="auto">
+      <img alt="Read the documentation" src="https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5" height="20" width="auto">
     </a>
     <a href="https://github.com/tremorlabs/tremor/blob/main/License">
-      <img alt="License Apache 2.0" src="https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=5C9BA1" height="20" width="auto">
+      <img alt="License Apache 2.0" src="https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=3b82f6&labelColor=334155 " height="20" width="auto">
     </a>
-    <a href="https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg">
-      <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack" alt="Join Slack" />
+    <a href="https://join.slack.com/t/tremor-community/shared_invite/zt-21ug6czv6-RckDPEAR6GdYOqfMGKOWpQ">
+      <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="Join Slack" />
     </a>
-    <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
+    <!-- <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
       <img src="https://img.shields.io/twitter/follow/tremorlabs?style=social" alt="Follow on Twitter" />
+    </a> -->
+        <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
+      <img src="https://img.shields.io/badge/Follow-important.svg?color=000000&label=@tremorlabs&logo=X&labelColor=334155&logoColor=f5f5f5" alt="Follow at Tremorlabs" />
     </a>
+
   </div>
   <h3 align="center">
     <a href="https://www.tremor.so/docs/getting-started/installation">Documentation</a> &bull;
-    <a href="https://demo.tremor.so/">Demo Dashboard</a> &bull;
     <a href="https://www.tremor.so">Website</a>
   </h3>
 
@@ -41,90 +44,43 @@
 <br>
 <br>
 
-![Tremor Banner](images/banner1.png)
+![Tremor Banner](images/banner-github-readme.png)
 
 <br>
 <br>
 
 ## Getting Started
 
-You can use tremor either within a [React](https://reactjs.org/) or [Next.js](https://nextjs.org) Project.
-For new projects, we recommend using Next.js, as it also provides a simple deployment workflow through the [Vercel](https://vercel.com/docs) platform.
-For other Frameworks, see our [Installation Guide](https://www.tremor.so/docs/getting-started/installation).
+For new projects, we recommend using Next.js 13.4+. For other frameworks, see our [Installation Guide](https://www.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project. For manual installation, refer to the installation guide on our website.
 
 <br>
 
-## Using NextJS 
+## Using NextJS
 
-In your terminal, we create a new Next project:
+In your terminal, we create a new Next project. When prompted `Would you like to use Tailwind CSS with this project?`, select `Yes`.
 
 ```bash
-npx create-next-app my-project --typescript 
+npx create-next-app@latest my-project
 cd my-project
 ```
 
-<br>
+### Installation using the Tremor CLI
 
-Install tremor from your command line via npm.
+We recommend installing Tremor with our CLI. To do so, run this command and select Next as your framework. If you prefer a manual installation, check the [installation guide](https://www.tremor.so/docs/getting-started/installation) on our website.
 
 ```bash
-npm install @tremor/react
+npx @tremor/cli@latest init
 ```
 
-<br>
-
-Install Tailwind CSS and its peer dependencies
-
-```bash
-npm install -D tailwindcss postcss autoprefixer 
-npx tailwindcss init -p
-```
-<br>
-
-Add the paths to all of your template files in your `tailwind.config.js` file.
-
-```diff
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-    content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-+   './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
-
-    // Or if using src directory:
-    "./src/**/*.{js,ts,jsx,tsx}",
-    ],
-    theme: {
-    extend: {},
-    },
-    plugins: [],
-}
-```
-
-Add the `@tailwind` directives for each Tailwind's layers to your `globals.css` file.
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-Start the dev server
+Now you are set and you can start the dev server.
 
 ```bash
 npm run dev
 ```
 
-<br>
-
-**💡 Hint:** Since we are in beta, please be aware that there might be breaking changes in the future.
-<br>
-
 ## Example
 
-With tremor creating an analytical interface is easy.
+With Tremor creating an analytical interface is easy.
 
 <br>
 
@@ -135,30 +91,29 @@ export default () => (
   <Card className="max-w-sm">
     <Text>Sales</Text>
     <Metric>$ 71,465</Metric>
-    <Flex className='mt-4'>
-        <Text>32% of annual target</Text>
-        <Text>$ 225,000</Text>
+    <Flex className="mt-4">
+      <Text>32% of annual target</Text>
+      <Text>$ 225,000</Text>
     </Flex>
-    <ProgressBar percentageValue={ 32 } className="mt-2" />
+    <ProgressBar value={32} className="mt-2" />
   </Card>
 );
 ```
+
 <br>
 
-![Tremor Banner](images/example.png)
+![Tremor Example](images/example.png)
 
 <br>
 
-If you want to see how you can build your first dashboard, have a look at our [documentation](https://tremor.so/docs/getting-started/demo-dashboard).
-
 ## Community and Contribution
 
-We are always looking for new ideas or other ways to improve tremor. If you have developed anything cool or found a bug, send us a pull request.
+We are always looking for new ideas or other ways to improve Tremor. If you have developed anything cool or found a bug, send us a pull request.
 <br>
 <br>
 
 ## License
 
 [Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/License)
 
-Copyright &copy;  2023 Tremor. All rights reserved.
+Copyright &copy; 2023 Tremor. All rights reserved.