Merge pull request #214 from propeldata/sasha/ui-kit-maintenance-pack…

…age-1 Sasha/UI kit maintenance package 1
propeldata · May 22, 2024 · 18b3929 · 18b3929
2 parents ebdd0da + e61a297
commit 18b3929
Show file tree

Hide file tree

Showing 94 changed files with 207 additions and 128 deletions.
diff --git a/.changeset/chilled-kiwis-protect.md b/.changeset/chilled-kiwis-protect.md
@@ -0,0 +1,9 @@
+---
+'dashboard-example': patch
+'react-16': patch
+'react-17': patch
+'react-18': patch
+'@propeldata/ui-kit': patch
+---
+
+Provides a fix for missing Inter font
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/app/examples/react-16/package.json b/app/examples/react-16/package.json
@@ -6,6 +6,7 @@
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.0.18",
     "@propeldata/ui-kit": "workspace:^",
     "dashboard-example": "workspace:^",
     "react": "^16.8.0",

diff --git a/app/examples/react-16/src/App.js b/app/examples/react-16/src/App.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import { Dashboard } from 'dashboard-example'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
+import '@fontsource/inter/700.css'
 
 const { REACT_APP_CLIENT_ID, REACT_APP_CLIENT_SECRET } = process.env
 

diff --git a/app/examples/react-17/package.json b/app/examples/react-17/package.json
@@ -6,6 +6,7 @@
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.0.18",
     "dashboard-example": "workspace:^",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

diff --git a/app/examples/react-17/src/App.js b/app/examples/react-17/src/App.js
@@ -1,5 +1,9 @@
 import React from 'react'
 import { Dashboard } from 'dashboard-example'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
+import '@fontsource/inter/700.css'
 
 const { REACT_APP_CLIENT_ID, REACT_APP_CLIENT_SECRET } = process.env
 

diff --git a/app/examples/react-18/package.json b/app/examples/react-18/package.json
@@ -6,6 +6,7 @@
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.0.18",
     "@propeldata/ui-kit": "workspace:^",
     "dashboard-example": "workspace:^",
     "react": "^18.2.0",

diff --git a/app/examples/react-18/src/App.jsx b/app/examples/react-18/src/App.jsx
@@ -1,5 +1,9 @@
 import React from 'react'
 import { Dashboard } from 'dashboard-example'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
+import '@fontsource/inter/700.css'
 
 const { REACT_APP_CLIENT_ID, REACT_APP_CLIENT_SECRET } = process.env
 

diff --git a/app/storybook/.storybook/preview.tsx b/app/storybook/.storybook/preview.tsx
@@ -3,7 +3,7 @@ import type { Preview, StoryContext } from '@storybook/react'
 import React from 'react'
 import withAxiosDecorator from 'storybook-axios'
 import { ThemeProvider, useTheme } from '../../../packages/ui-kit/src/components/ThemeProvider'
-import { QueryClient, QueryClientProvider } from '../../../packages/ui-kit/src/helpers'
+import { QueryClient, QueryClientProvider } from '../../../packages/ui-kit/src/graphql'
 import axiosInstance from '../src/axios'
 import { parseStorySourceCode } from './blocks/SourceCode'
 import './global.css'

diff --git a/app/storybook/documentation/ui-kit/Installation.mdx b/app/storybook/documentation/ui-kit/Installation.mdx
@@ -32,6 +32,51 @@ To install the Propel UI Kit components, run the following command:
   `}
 />
 
+## Inter font
+
+The UI-kit uses the Inter font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.
+
+<Source
+  language="bash"
+  format="dedent"
+  dark
+  code={`
+    yarn add @fontsource/inter
+  `}
+/>
+
+Then you can import it in your app entry point like this:
+
+<Source
+  language="typescript"
+  format="dedent"
+  dark
+  code={`
+    import '@fontsource/inter/400.css'
+    import '@fontsource/inter/500.css'
+    import '@fontsource/inter/600.css'
+    import '@fontsource/inter/700.css'
+  `}
+/>
+
+### Google Web Fonts
+
+To install Inter through the Google Web Fonts CDN, add the following code inside your project's tag:
+
+<Source
+  language="html"
+  format="dedent"
+  dark
+  code={`
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=family=Inter:wght@400;500;600;700&display=swap"
+    />
+  `}
+/>
+
 You can read more about the why and [core principles](../?path=/docs/getting-started-overview--overview#core-principles)
 behind the Propel UI Kit.
 

diff --git a/app/storybook/documentation/ui-kit/api/AverageMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/AverageMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as AverageMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/AverageMetricQueryInput.stories'
+import * as AverageMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/AverageMetricQueryInput.stories'
 
 <Meta title="API/AverageMetricQueryInput" of={AverageMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/CountDistinctMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/CountDistinctMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as CountDistinctMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/CountDistinctMetricQueryInput.stories'
+import * as CountDistinctMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/CountDistinctMetricQueryInput.stories'
 
 <Meta title="API/CountDistinctMetricQueryInput" of={CountDistinctMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/CountMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/CountMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as CountMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/CountMetricQueryInput.stories'
+import * as CountMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/CountMetricQueryInput.stories'
 
 <Meta title="API/CountMetricQueryInput" of={CountMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/CustomMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/CustomMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as CustomMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/CustomMetricQueryInput.stories'
+import * as CustomMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/CustomMetricQueryInput.stories'
 
 <Meta title="API/CustomMetricQueryInput" of={CustomMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/DataPoolInput.mdx b/app/storybook/documentation/ui-kit/api/DataPoolInput.mdx
@@ -1,10 +1,11 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as DataPoolInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/DataPoolInput.stories'
+import * as DataPoolInputStories from '../../../../../packages/ui-kit/src/graphql/stories/DataPoolInput.stories'
 
 <Meta title="API/DataPoolInput" of={DataPoolInputStories} />
 
 # `DataPoolInput`
 
-**Note:** The properties below are mutually exclusive. Only one of these properties should be provided for a valid `DataPoolInput`.
+**Note:** The properties below are mutually exclusive. Only one of these properties should be provided for a valid
+`DataPoolInput`.
 
 <ArgTypes of={DataPoolInputStories} sort="alpha" />
diff --git a/app/storybook/documentation/ui-kit/api/DimensionInput.mdx b/app/storybook/documentation/ui-kit/api/DimensionInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as DimensionInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/DimensionInput.stories'
+import * as DimensionInputStories from '../../../../../packages/ui-kit/src/graphql/stories/DimensionInput.stories'
 
 <Meta title="API/DimensionInput" of={DimensionInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/FilterInput.mdx b/app/storybook/documentation/ui-kit/api/FilterInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as FilterInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/FilterInput.stories'
+import * as FilterInputStories from '../../../../../packages/ui-kit/src/graphql/stories/FilterInput.stories'
 
 <Meta title="API/FilterInput" of={FilterInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/MaxMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/MaxMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as MaxMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/MaxMetricQueryInput.stories'
+import * as MaxMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/MaxMetricQueryInput.stories'
 
 <Meta title="API/MaxMetricQueryInput" of={MaxMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/MetricInput.mdx b/app/storybook/documentation/ui-kit/api/MetricInput.mdx
@@ -1,11 +1,12 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
 import LinkTo from '@storybook/addon-links/react'
-import * as MetricInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/MetricInput.stories'
+import * as MetricInputStories from '../../../../../packages/ui-kit/src/graphql/stories/MetricInput.stories'
 
 <Meta title="API/MetricInput" of={MetricInputStories} />
 
 # `MetricInput`
 
-**Note:** The properties below are mutually exclusive. Only one of these properties should be provided for a valid `MetricInput`.
+**Note:** The properties below are mutually exclusive. Only one of these properties should be provided for a valid
+`MetricInput`.
 
-<ArgTypes of={MetricInputStories} sort="alpha" />
+<ArgTypes of={MetricInputStories} sort="alpha" />
diff --git a/app/storybook/documentation/ui-kit/api/MinMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/MinMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as MinMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/MinMetricQueryInput.stories'
+import * as MinMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/MinMetricQueryInput.stories'
 
 <Meta title="API/MinMetricQueryInput" of={MinMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/SumMetricQueryInput.mdx b/app/storybook/documentation/ui-kit/api/SumMetricQueryInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as SumMetricQueryInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/SumMetricQueryInput.stories'
+import * as SumMetricQueryInputStories from '../../../../../packages/ui-kit/src/graphql/stories/SumMetricQueryInput.stories'
 
 <Meta title="API/SumMetricQueryInput" of={SumMetricQueryInputStories} />
 

diff --git a/app/storybook/documentation/ui-kit/api/TimeRangeInput.mdx b/app/storybook/documentation/ui-kit/api/TimeRangeInput.mdx
@@ -1,5 +1,5 @@
 import { ArgTypes, Meta } from '@storybook/blocks'
-import * as TimeRangeInputStories from '../../../../../packages/ui-kit/src/helpers/graphql/stories/TimeRangeInput.stories'
+import * as TimeRangeInputStories from '../../../../../packages/ui-kit/src/graphql/stories/TimeRangeInput.stories'
 
 <Meta title="API/TimeRangeInput" of={TimeRangeInputStories} />
 

diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -8,8 +8,8 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "rm -rf dist && yarn graphql:build && yarn design-tokens:sync && yarn typecheck && rollup -c",
-    "graphql:build": "rm -rf src/helpers/graphql/generated && yarn graphql:gen",
-    "graphql:gen": "graphql-codegen --config src/helpers/graphql/codegen.yml && node src/helpers/graphql/script.cjs src/helpers/graphql/generated/index.ts",
+    "graphql:build": "rm -rf src/graphql/generated && yarn graphql:gen",
+    "graphql:gen": "graphql-codegen --config src/graphql/codegen.yml && node src/graphql/script.cjs src/graphql/generated/index.ts",
     "test": "jest",
     "test:coverage": "jest --ci --coverage --json --outputFile=coverage/coverage.json",
     "design-tokens:sync": "yarn design-tokens:clean && tsc -p ./scripts/tsconfig.json && yarn design-tokens:parse && yarn design-tokens:validate",

diff --git a/packages/ui-kit/src/components/AccessTokenProvider/AccessToken.stories.tsx b/packages/ui-kit/src/components/AccessTokenProvider/AccessToken.stories.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 
-import { fetchStorybookAccessToken, RelativeTimeRange, storybookCodeTemplate } from '../../helpers'
+import { Counter, TimeSeries } from '..'
 import axiosInstance from '../../../../../app/storybook/src/axios'
+import { RelativeTimeRange } from '../../graphql'
+import { fetchStorybookAccessToken, storybookCodeTemplate } from '../../helpers'
 import { AccessTokenProvider } from './AccessTokenProvider'
-import { TimeSeries, Counter } from '..'
 
 const meta: Meta = {
   title: 'PROVIDERS/AccessTokenProvider',

diff --git a/packages/ui-kit/src/components/AccessTokenProvider/AccessToken.test.tsx b/packages/ui-kit/src/components/AccessTokenProvider/AccessToken.test.tsx
@@ -6,7 +6,7 @@ import {
   RelativeTimeRange,
   TimeSeriesGranularity,
   TimeSeriesQuery
-} from '../../helpers'
+} from '../../graphql'
 
 import { Dom, mockCounterQuery, mockLeaderboardQuery, mockTimeSeriesQuery, setupTestHandlers } from '../../testing'
 import { Counter } from '../Counter'

diff --git a/packages/ui-kit/src/components/Counter/Counter.stories.tsx b/packages/ui-kit/src/components/Counter/Counter.stories.tsx
@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 import './Counter.stories.css'
 import axiosInstance from '../../../../../app/storybook/src/axios'
-import { quotedStringRegex, RelativeTimeRange, storybookCodeTemplate, useStorybookAccessToken } from '../../helpers'
+import { quotedStringRegex, storybookCodeTemplate, useStorybookAccessToken } from '../../helpers'
+import { RelativeTimeRange } from '../../graphql'
 import { Counter as CounterSource, CounterComponent } from './Counter'
 import { CounterProps } from './Counter.types'
 

diff --git a/packages/ui-kit/src/components/DataGrid/DataGrid.types.ts b/packages/ui-kit/src/components/DataGrid/DataGrid.types.ts
@@ -1,5 +1,5 @@
 import type { QueryProps } from '../../components/shared.types'
-import type { DataPoolInput, Sort } from '../../helpers'
+import type { DataPoolInput, Sort } from '../../graphql'
 
 export interface DataGridQueryProps extends Omit<QueryProps, 'metric'> {
   /** The columns to retrieve. */

diff --git a/packages/ui-kit/src/components/FilterProvider/FilterProvider.tsx b/packages/ui-kit/src/components/FilterProvider/FilterProvider.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useState } from 'react'
 
-import { FilterInput } from '../../helpers'
+import { FilterInput } from '../../graphql'
 
 interface FilterInputWithId extends FilterInput {
   id: symbol

diff --git a/packages/ui-kit/src/components/Leaderboard/Leaderboard.stories.tsx b/packages/ui-kit/src/components/Leaderboard/Leaderboard.stories.tsx
@@ -1,18 +1,13 @@
+import rawLeaderboardCss from '!!raw-loader!./Leaderboard.stories.css'
 import type { Meta, StoryContext, StoryObj } from '@storybook/react'
 import React, { useState } from 'react'
 import axiosInstance from '../../../../../app/storybook/src/axios'
-import {
-  quotedStringRegex,
-  RelativeTimeRange,
-  Sort,
-  storybookCodeTemplate,
-  useStorybookAccessToken
-} from '../../helpers'
+import { RelativeTimeRange, Sort } from '../../graphql'
+import { quotedStringRegex, storybookCodeTemplate, useStorybookAccessToken } from '../../helpers'
+import { ThemeTokenProps } from '../../themes'
+import { DefaultThemes, ThemeProvider } from '../ThemeProvider'
 import { Leaderboard as LeaderboardSource, LeaderboardComponent } from './Leaderboard'
 import './Leaderboard.stories.css'
-import rawLeaderboardCss from '!!raw-loader!./Leaderboard.stories.css'
-import { DefaultThemes, ThemeProvider } from '../ThemeProvider'
-import { ThemeTokenProps } from '../../themes'
 import { LeaderboardQueryProps } from './Leaderboard.types'
 
 const meta: Meta<typeof LeaderboardComponent> = {

diff --git a/packages/ui-kit/src/components/Leaderboard/Leaderboard.test.tsx b/packages/ui-kit/src/components/Leaderboard/Leaderboard.test.tsx
@@ -1,7 +1,8 @@
-import { render, waitFor, fireEvent } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import { Chart } from 'chart.js'
 import React from 'react'
-import { RelativeTimeRange, sleep } from '../../helpers'
+import { RelativeTimeRange } from '../../graphql'
+import { sleep } from '../../helpers'
 import { Dom, mockLeaderboardQuery, mockServer, setupTestHandlers } from '../../testing'
 import { AccessTokenProvider } from '../AccessTokenProvider'
 import { Leaderboard } from './Leaderboard'

diff --git a/packages/ui-kit/src/components/Leaderboard/Leaderboard.types.ts b/packages/ui-kit/src/components/Leaderboard/Leaderboard.types.ts
@@ -1,5 +1,6 @@
 import type { ChartConfiguration } from 'chart.js'
-import { DimensionInput, LeaderboardLabels, Sort } from '../../helpers'
+import { DimensionInput, Sort } from '../../graphql'
+import { LeaderboardLabels } from '../../helpers'
 import type { DataComponentProps, QueryProps } from '../shared.types'
 
 export type LeaderboardChartVariant = 'bar' | 'table'

diff --git a/packages/ui-kit/src/components/PieChart/PieChart.stories.tsx b/packages/ui-kit/src/components/PieChart/PieChart.stories.tsx
@@ -1,14 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import React, { useState } from 'react'
 import axiosInstance from '../../../../../app/storybook/src/axios'
-import {
-  FilterOperator,
-  quotedStringRegex,
-  RelativeTimeRange,
-  Sort,
-  storybookCodeTemplate,
-  useStorybookAccessToken
-} from '../../helpers'
+import { FilterOperator, RelativeTimeRange, Sort } from '../../graphql'
+import { quotedStringRegex, storybookCodeTemplate, useStorybookAccessToken } from '../../helpers'
 import { DefaultThemes, ThemeProvider, useSetupTheme } from '../ThemeProvider'
 import { PieChart as PieChartSource, PieChartComponent } from './PieChart'
 import { PieChartQueryProps } from './PieChart.types'

diff --git a/packages/ui-kit/src/components/PieChart/PieChart.test.tsx b/packages/ui-kit/src/components/PieChart/PieChart.test.tsx
@@ -1,7 +1,8 @@
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { Chart } from 'chart.js'
 import React from 'react'
-import { RelativeTimeRange, sleep } from '../../helpers'
+import { RelativeTimeRange } from '../../graphql'
+import { sleep } from '../../helpers'
 import { Dom, mockCounterQuery, mockLeaderboardQuery, mockServer, setupTestHandlers } from '../../testing'
 import { AccessTokenProvider } from '../AccessTokenProvider'
 import { PieChart } from './PieChart'