diff --git a/.eslintrc b/.eslintrc
index 189c304a3..e83669525 100644
--- a/.eslintrc
+++ b/.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",
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml
index 09f752089..62522edde 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yaml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yaml
@@ -10,7 +10,7 @@ body:
The issue list is reserved for bug reports and feature requests. If you have a usage question, you can:
- - Read the [documentation](https://www.tremor.so/docs/getting-started/installation)
+ - Read the [documentation](https://npm.tremor.so/docs/getting-started/installation)
- Ask questions on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg)
Also try to search for your issue/feature - another user may have already requested something similar, thanks!
@@ -75,4 +75,4 @@ body:
- type: markdown
attributes:
value: |
- This bug report template was inspired by the issue template from [vuejs](https://github.com/vuejs/core)
\ No newline at end of file
+ This bug report template was inspired by the issue template from [vuejs](https://github.com/vuejs/core)
diff --git a/.github/ISSUE_TEMPLATE/config.yaml b/.github/ISSUE_TEMPLATE/config.yaml
index 6cbba17d2..35d9b5fe0 100644
--- a/.github/ISSUE_TEMPLATE/config.yaml
+++ b/.github/ISSUE_TEMPLATE/config.yaml
@@ -2,4 +2,4 @@ blank_issues_enabled: true
contact_links:
- name: Slack Community
url: https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg
- about: Please ask and answer usage questions here.
\ No newline at end of file
+ about: Please ask and answer usage questions here.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yaml b/.github/ISSUE_TEMPLATE/feature-request.yaml
index d953ece0b..319e1743f 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yaml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yaml
@@ -1,16 +1,16 @@
name: "\U0001F680 New feature proposal"
description: Suggest an idea for this project
title: "[Feature]: "
-labels: ["triage"]
+labels: ["Triage"]
body:
- type: markdown
- attributes:
- value: |
+ attributes:
+ value: |
**Before submitting a feature request**
The issue list is reserved for bug reports and feature requests. If you have a usage question, you can:
- - Read the [documentation](https://www.tremor.so/docs/getting-started/installation)
+ - Read the [documentation](https://npm.tremor.so/docs/getting-started/installation)
- Ask questions on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg)
Also try to search for your issue/feature - another user may have already requested something similar, thanks!
@@ -35,5 +35,5 @@ body:
placeholder: Assumed API
- type: markdown
attributes:
- value: |
- This bug report template was inspired by the feature template from [vuejs](https://github.com/vuejs/core)
\ No newline at end of file
+ value: |
+ This bug report template was inspired by the feature template from [vuejs](https://github.com/vuejs/core)
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 734eea64c..4346eaffb 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,9 +1,10 @@
+
**Description**
@@ -16,10 +17,12 @@ https://github.com/tremorlabs/tremor/blob/main/CONTRIBUTING.md
**What kind of change does this PR introduce?** (check at least one)
+
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New Feature (non-breaking change which adds functionality)
+- [ ] New Feature (BREAKING CHANGE which adds functionality)
- [ ] Refactor
- [ ] Build-related changes
- [ ] Other, please describe:
@@ -31,7 +34,7 @@ https://github.com/tremorlabs/tremor/blob/main/CONTRIBUTING.md
If yes, please describe the impact and migration path for existing applications:
-**How has This been tested?**
+**How has this been tested?**
@@ -39,13 +42,14 @@ If yes, please describe the impact and migration path for existing applications:
**Screenshots (if appropriate):**
-
-**The PR fulfills these requirements:**
+**The PR fulfils these requirements:**
+
- [ ] It's submitted to the `main` branch
- [ ] When resolving a specific issue, it's referenced in the related issue section above
- [ ] My change requires a change to the documentation. (Managed by Tremor Team)
- [ ] 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-npm/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-npm/blob/main/License) license.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 856147caf..cfe4ae49b 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -8,9 +8,8 @@ on:
- synchronize
push:
branches:
- - '**'
- - '!main'
-
+ - "**"
+ - "!main"
jobs:
build:
@@ -18,11 +17,11 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: checkout
- uses: actions/checkout@v2.4.2
+ uses: actions/checkout@v4
- name: node
- uses: actions/setup-node@v3.4.1
+ uses: actions/setup-node@v4
with:
- node-version: 18
+ node-version: 20
registry-url: https://registry.npmjs.org
- name: install react
run: npm i react
@@ -34,4 +33,3 @@ jobs:
run: npm run tests
- name: build
run: npm run build
-
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index c7ba213e6..a132102d2 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -13,11 +13,11 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: checkout
- uses: actions/checkout@v2.4.2
+ uses: actions/checkout@v4
- name: node
- uses: actions/setup-node@v3.4.1
+ uses: actions/setup-node@v4
with:
- node-version: 18
+ node-version: 20
registry-url: https://registry.npmjs.org
- name: install react
run: npm i react
diff --git a/.gitignore b/.gitignore
index 70f75d878..fc740099e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,6 @@ node_modules
dist
.DS_Store
storybook-static
+package-lock.json
+.vscode
+yarn.lock
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
index bd8a616c3..34d9b0533 100644
--- a/.prettierrc.json
+++ b/.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"
}
diff --git a/.storybook/main.js b/.storybook/main.js
index d67549264..274cf5770 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,34 +1,63 @@
-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.@(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"
+ "@storybook/addon-webpack5-compiler-babel",
+ "@chromatic-com/storybook",
+ ],
+
+ 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;
},
-};
\ No newline at end of file
+
+ docs: {},
+
+ typescript: {
+ reactDocgen: "react-docgen-typescript",
+ },
+};
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 000000000..18d20f308
--- /dev/null
+++ b/.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,
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 87a824856..a0e871d6c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,11 +1,36 @@
-import '../src/styles.css'
+import "../src/styles.css";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
-}
\ No newline at end of file
+ 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",
+ }),
+];
+export const tags = ["autodocs"];
diff --git a/.storybook/tremorTheme.js b/.storybook/tremorTheme.js
new file mode 100644
index 000000000..730a3489b
--- /dev/null
+++ b/.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",
+});
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index f85fe8b56..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "editor.wordWrapColumn": 100,
- "editor.rulers": [100],
- "typescript.preferences.importModuleSpecifier": "non-relative",
- "typescript.tsdk": "node_modules/typescript/lib",
-}
\ No newline at end of file
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 18c914718..afaa98fe5 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
Examples of behavior that contributes to a positive environment for our
community include:
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
+standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b218442e1..3f9289061 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,16 +1,15 @@
## **Contributing to Tremor**
-Thanks for your interest in contributing to Tremor. Please take a moment to review this document before submitting a pull request. This document will outline how to submit changes to this repository and which conventions to follow. If you are ever in doubt about anything we encourage you to reach out on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg), [open a discussion](#discussions), or [shoot us an email](mailto:hello@tremor.so).
-
+Thanks for your interest in contributing to Tremor. Please take a moment to review this document before submitting a pull request. This document will outline how to submit changes to this repository and which conventions to follow. If you are ever in doubt about anything we encourage you to reach out on [Slack](https://tremor-community.slack.com/join/shared_invite/zt-2a95vjndc-YCKurK3HVAkYtjialnT2_A#/shared-invite/email), [open a discussion](#discussions), or [shoot us an email](mailto:hello@tremor.so).
### **Prerequisites**
- You are familiar with [issues](#issues) and [pull requests](#pulls).
-- You have read the [docs](https://www.tremor.so/docs/getting-started/installation).
+- You have read the [docs](https://npm.tremor.so/docs/getting-started/installation).
### **Issues before PRs**
-1. Before you start working on a change please make sure that there is an issue for what you will be working on. You can either find an [existing issue](https://github.com/tremorlabs/tremor/issues) or [open a new issue](https://github.com/tremorlabs/tremor/issues/new/choose) if none exists.
+1. Before you start working on a change please make sure that there is an issue for what you will be working on. You can either find an [existing issue](https://github.com/tremorlabs/tremor-npm/issues) or [open a new issue](https://github.com/tremorlabs/tremor-npm/issues/new/choose) if none exists.
2. When you are ready to start working on a change you should first [fork the Tremor repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [branch out](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository) from the `main` branch.
3. Make your changes.
4. [Open a pull request towards the main branch in the Tremor repo](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork). Then, our team will review, comment and eventually approve your PR.
@@ -55,7 +54,8 @@ We encourage that you do a self-review prior to requesting a review. To do a sel
### **Documentation**
- We generally encourage you to document your changes through comments in your code.
-- If you alter user-facing behavior you must provide documentation for such changes, for reference, check out [our documentation]([url](https://www.tremor.so/docs/getting-started/introduction)).
+- If you alter user-facing behavior you must provide documentation for such changes, for reference, check out [our documentation](<[url](https://npm.tremor.so/docs/getting-started/introduction)>).
### **Licensing**
-By contributing to Tremor, you agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/License) license. By submitting your pull request, you agree to our [Contributor License Agreement (CLA)](https://www.tremor.so/contributors). This agreement clarifies our ability to incorporate your contributions.
+
+By contributing to Tremor, you agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License) license. By submitting your pull request, you agree to our [Contributor License Agreement (CLA)](https://tremor.so/contributors). This agreement clarifies our ability to incorporate your contributions.
diff --git a/README.md b/README.md
index 9cec22960..db38016ec 100644
--- a/README.md
+++ b/README.md
@@ -1,164 +1,113 @@
-
-
-
+
+
+
-[Tremor](https://tremor.so/) lets you create simple and modular components to build insightful dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
+[Tremor NPM](https://npm.tremor.so/) 20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
-
-
+
-
+
-
-
+
## 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).
-
-
-
-## Using NextJS
-
-In your terminal, we create a new Next project:
-
-```bash
-npx create-next-app my-project --typescript
-cd my-project
-```
-
-
-
-Install tremor from your command line via npm.
-
-```bash
-npm install @tremor/react
-```
-
-
-
-Install Tailwind CSS and its peer dependencies
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-
-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
-
-```bash
-npm run dev
-```
-
-
-
-**💡 Hint:** Since we are in beta, please be aware that there might be breaking changes in the future.
-
+See our [Installation Guide](https://npm.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project.
## Example
-With tremor creating an analytical interface is easy.
-
-
+With Tremor creating an analytical interface is easy.
```jsx
-//Card.tsx
-import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";
-export default () => (
-
- Sales
- $ 71,465
-
- 32% of annual target
- $ 225,000
-
-
-
-);
+"use client";
+import { AreaChart, Card } from "@tremor/react";
+
+const chartdata = [
+ {
+ date: "Jan 23",
+ "Route Requests": 289,
+ "Station Requests": 233,
+ },
+ // ...
+ {
+ date: "Oct 23",
+ "Route Requests": 283,
+ "Station Requests": 247,
+ },
+];
+
+export default function Example() {
+ return (
+
+
+ Total Requests
+
+