docs: Add Installation Instructions for RedwoodJS framework

[dthyresson]

Hi, I'm on the RedwoodJS Core Team and was just made aware of tremor -- and installing in in a RedwoodJS project is a little bit different than installing in NextJS or React. But it's super simple:

1. Use the Redwood setup command to install TailwindCSS

   yarn rw setup ui tailwindcss

2. Install tremor in the web workspace

yarn workspace web add @tremor/react  

3. Install heroicons

yarn workspace web add @heroicons/react   

4. Update tailwind config web/config/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    'src/**/*.{js,jsx,ts,tsx}',
    '../node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note: the path for node_modules is ../

and that's it.

I then generated a page:

yarn rw g page dashboard      

and added a simple area chart:

import { Grid, Col, Card, Title, AreaChart } from '@tremor/react'

import { MetaTags } from '@redwoodjs/web'

const DashboardPage = () => {
  const chartdata = [
    {
      date: 'Jan 22',
      SemiAnalysis: 2890,
      'The Pragmatic Engineer': 2338,
    },
    {
      date: 'Feb 22',
      SemiAnalysis: 2756,
      'The Pragmatic Engineer': 2103,
    },
    {
      date: 'Mar 22',
      SemiAnalysis: 3322,
      'The Pragmatic Engineer': 2194,
    },
    {
      date: 'Apr 22',
      SemiAnalysis: 3470,
      'The Pragmatic Engineer': 2108,
    },
    {
      date: 'May 22',
      SemiAnalysis: 3475,
      'The Pragmatic Engineer': 1812,
    },
    {
      date: 'Jun 22',
      SemiAnalysis: 3129,
      'The Pragmatic Engineer': 1726,
    },
  ]

  const dataFormatter = (number: number) => {
    return '$ ' + Intl.NumberFormat('us').format(number).toString()
  }

  return (
    <div className="m-12">
      <MetaTags title="Dashboard" description="Dashboard page" />

      <h1 className="text-2xl mb-12">DashboardPage</h1>
      <Grid numCols={1} numColsSm={2} numColsLg={3} className="gap-2">
        <Col numColSpan={1} numColSpanLg={2}>
          <Card>
            <Title>Newsletter revenue over time (USD)</Title>
            <AreaChart
              className="h-72 mt-4"
              data={chartdata}
              index="date"
              categories={['SemiAnalysis', 'The Pragmatic Engineer']}
              colors={['indigo', 'green']}
              valueFormatter={dataFormatter}
            />
          </Card>
        </Col>
      </Grid>
    </div>
  )
}

export default DashboardPage

and works!

Question: I looked for the docs in the repo, but didn't see them. Happy to write up a PR for RedwoodJS setup.

[mitrotasios]

hey @dthyresson thanks for providing this! We haven't open-sourced our docs yet, but we'll do that at some point. We're happy to provide the installation instructions for Redwood in the set-up guide in the meantime!

[dthyresson]

Thanks! Happy to help in any way - I can write out, test, review ... whatever you need.

[severinlandolt]

We are almost ready, have a look:

https://tremor-so-git-feat-analyticsrollout-tremor.vercel.app/docs/getting-started/installation

[dthyresson]

@severinlandolt That looks great. I have a few comments about perhaps using RedwoodJS's component generators to include the tremor components.

The basic setup is similar to the demo dashboard I just built here: https://github.com/dthyresson/redwoodjs-tremor-dashboard-demo

You can see a dynamic dashboard where data like KPI and SalesPeople data can be edited and reflected in the dashboard.

See: https://github.com/dthyresson/redwoodjs-tremor-dashboard-demo

I can, or RedwoodJS can or tremor can host this demo app if want and then link to it in docs.

[dthyresson]

Note: demo dashboard with RedwoodJS moved to https://github.com/redwoodjs/redwoodjs-tremor-dashboard-demo

[dthyresson]

@severinlandolt Any chance you could share the markdown with me. In general the beginning is fine (small weeks like the note admonition needed etc).

But, later need to change the use of rpm to yarn and I think it would make sense to introduce the rw component generators to:

yarn rw generate component KpiCard for that import and create component and then also to add it into the dashboard page.

Happy to write up but might be easier for me to do than sending edit notes?

Plus - I can test a run through of the steps quickly.

[dthyresson]

@severinlandolt -> Now available as markdown here: https://github.com/redwoodjs/redwoodjs-tremor-dashboard-demo/blob/main/installation-redwoodjs.md

[severinlandolt]

Thank you, I just wove it all together. I shortened some steps in the Dashboard section so that the whole page stays primarily about the installation. In the end, there are the links to your dashboard repo. I released it silently today: https://www.tremor.so/docs/getting-started/installation

[dthyresson]

Thanks @severinlandolt !

While I do understand that a shorted doc is helpful here, I do think it doesn't showcase redwood fully as to how it can use components that use tremor components.

But, no problem -- I have a solution!

I added my original doc to the redwoodJS How To docs are here: https://deploy-preview-8206--redwoodjs-docs.netlify.app/docs/canary/how-to/build-dashboards-fast-with-tremor

This is a preview, not yet released.

Maybe we can add to the next steps:

1. link to live demo site https://tremor-redwood-dashboard-demo.netlify.app
2. link to read more on the redwood docs site

Question: is it "tremor" or "Tremor" when using mid-sentence? I think I used both but want to be correct.

Also, it might be nice to add a style for the backtick style as I use them but spacing and look is a bit odd on the terror docs render.

Last, I'll share with team for any comments.

[dthyresson]

Just noticed:

These links seem off in the markdown render for other components and blocks.