feat(typescript): switch tests and stories to ts

.storybook/main.ts

@@ -0,0 +1,55 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+const path = require('path')
+const config: StorybookConfig = {
+  stories: [
+    '../packages/react/lib/**/*.stories.{js,tsx}',
+    '../packages/theme/lib/**/*.stories.{js, tsx}',
+    '../packages/**/lib/**/*.stories.{js,tsx}'
+  ],
+
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    {
+      name: 'storybook-addon-swc',
+      options: {
+        swcLoaderOptions: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+            },
+          },
+        },
+      },
+    },
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: {
+          implementation: require('postcss'),
+        },
+        sass: {
+          implementation: require('sass'),
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+
+  },
+  webpackFinal: (config) => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve?.alias,
+      '@junipero/react': path.resolve(__dirname, '../packages/react/lib/index.ts'),
+      '@junipero/core': path.resolve(__dirname, '../packages/core/lib/index.ts'),
+      '@junipero/transitions': path.resolve(__dirname, '../packages/transitions/lib/index.tsx'),
+      '@junipero/hooks': path.resolve(__dirname, '../packages/hooks/lib/index.ts'),
+    };
+    return config;
+  },
+};
+export default config

package.json

@@ -40,6 +40,7 @@
     "@storybook/addon-styling": "1.3.7",
     "@storybook/react": "7.5.1",
     "@storybook/react-webpack5": "7.5.1",
+    "@swc/core": "1.4.2",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
@@ -67,6 +68,7 @@
     "rollup-plugin-dts": "6.1.0",
     "sass": "1.69.5",
     "storybook": "7.5.1",
+    "storybook-addon-swc": "^1.2.0",
     "tailwindcss": "3.3.5",
     "typescript": "5.2.2"
   },

packages/core/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.stories.tsx"],
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "jsx": "react-jsx",
+    "paths": {}
+  }
+}

packages/core/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "extends": "../../tsconfig.json",
+  "exclude": ["node_modules/**/*"],
+
   "include": ["./lib/**/*"],
   "compilerOptions": {
     "declarationDir": "./dist/@types",

packages/hooks/lib/index.test.js → packages/hooks/lib/index.test.tsx

@@ -8,10 +8,13 @@ import {
   useInterval,
   useEffectAfterMount,
   useLayoutEffectAfterMount,
-} from './';
+} from '.';
 
 /* eslint-disable react/prop-types */
-const TestComponent = ({ target, onTimeout, onInterval }) => {
+const TestComponent = (
+  { target, onTimeout, onInterval }:
+  { target?: any, onTimeout?: any, onInterval?: any}
+) => {
   const [clicked, setClicked] = useState(false);
 
   useEventListener('click', () => {
@@ -72,7 +75,10 @@ describe('useTimeout(listener, time, changes)', () => {
 });
 
 /* eslint-disable react/prop-types */
-const EffectsTestComponent = ({ enabled, onEffect, onLayoutEffect }) => {
+const EffectsTestComponent = (
+  { enabled, onEffect, onLayoutEffect }:
+  { enabled?: boolean, onEffect?: ()=> void, onLayoutEffect?: ()=> void}
+): null => {
   onEffect && useEffectAfterMount(() => {
     onEffect();
   }, [enabled]);

packages/hooks/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["node_modules/**/*"],
+
+  "include": ["./lib/**/*"],
+  "compilerOptions": {
+    "paths": {
+      "@junipero/core": ["../core/lib/index.ts"],
+    }
+  }
+}

packages/react-d3-plugin/lib/Axis/index.tsx

@@ -15,19 +15,20 @@ import * as d3 from 'd3';
 import { useChart } from '../hooks';
 import { getAxisType } from '../utils';
 
-export declare interface AxisObject {
+type AxisDataType = Array<
+number |
+Date |
+{[key: string]: number} |
+string |
+[number, number] |
+[number, number] |
+Iterable<[number, number]>>;
+
+export declare interface AxisObject<T=AxisDataType> {
   type: typeof d3.axisLeft | typeof d3.axisBottom | typeof d3.axisRight |
     typeof d3.axisTop;
   scale: typeof d3.scaleLinear | typeof d3.scaleTime | typeof d3.scaleBand;
-  data: Array<
-    number |
-    Date |
-    {[key: string]: number} |
-    string |
-    [number, number] |
-    [number, number] |
-    Iterable<[number, number]>
-  >;
+  data: T;
   range?: d3.ScaleContinuousNumeric<number, number, never> |
     d3.ScaleTime<number, number, never> | d3.ScaleBand<number | Date>;
   min?: number | Date;

packages/react-d3-plugin/lib/Chart/index.stories.js → packages/react-d3-plugin/lib/Chart/index.stories.tsx

@@ -1,46 +1,51 @@
-import { useCallback, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useMemo, useState } from 'react';
 import * as d3 from 'd3';
 import { closestIndexTo, startOfMonth, startOfYear } from '@junipero/core';
+import { Card } from '@junipero/react';
 
-import Chart from './';
+import Chart from '.';
 import Bar from '../Bar';
 import Curve from '../Curve';
 import Marker from '../Marker';
-import { Card } from '../../../react/lib';
+import { AxisObject } from '../Axis';
 
 export default { title: 'react-d3-plugin/Chart' };
 
-const data = [
+const data: [Date, number][] = [
   [new Date('2020-01-01'), 10],
   [new Date('2020-01-02'), 50],
   [new Date('2020-01-03'), 30],
   [new Date('2020-01-04'), 40],
   [new Date('2020-01-05'), 20],
 ];
 
-const alternativeData = [
+const alternativeData: [Date, number][] = [
   [new Date('2020-01-01'), 4000],
   [new Date('2020-01-02'), 2000],
   [new Date('2020-01-03'), 5000],
   [new Date('2020-01-04'), 3000],
   [new Date('2020-01-05'), 7000],
 ];
 
-const barData = [
+const barData: [Date, { free: number, premium:number}][] = [
   [new Date('2020-01-01'), { free: 37, premium: 63 }],
   [new Date('2020-01-02'), { free: 16, premium: 84 }],
   [new Date('2020-01-03'), { free: 49, premium: 51 }],
   [new Date('2020-01-04'), { free: 61, premium: 39 }],
   [new Date('2020-01-05'), { free: 27, premium: 73 }],
 ];
 
-const axis = [{
+const axis: [
+    AxisObject<Array<Date>>,
+    AxisObject<Array<number>>,
+    AxisObject<Array<number>>
+] = [{
   type: d3.axisBottom,
   scale: d3.scaleTime,
   data: data.map(d => d[0]),
-  findSelectionIndex: position =>
+  findSelectionIndex: (position: Date) =>
     closestIndexTo(position, data.map(d => d[0])),
-  parseTitle: d => d.toLocaleDateString(),
+  parseTitle: (d: Date) => d.toLocaleDateString(),
   ticks: null,
 }, {
   type: d3.axisLeft,
@@ -58,11 +63,14 @@ const axis = [{
   min: 0,
 }];
 
-const barAxis = [{
+const barAxis: [
+  AxisObject<Array<Date>>,
+  AxisObject<Array<{ premium: number, free: number }>>
+] = [{
   type: d3.axisBottom,
   scale: d3.scaleBand,
-  data: barData.map(d => d[0]),
-  parseTitle: d => d?.toLocaleDateString(),
+  data: barData.map(d => d[0]) as any,
+  parseTitle: (d: Date) => d?.toLocaleDateString(),
   ticks: null,
 }, {
   type: d3.axisLeft,
@@ -72,8 +80,7 @@ const barAxis = [{
   max: 100,
   data: barData.map(d => d[1]),
 }];
-
-const Wrapper = ({ children }) => (
+const Wrapper = ({ children }: { children: JSX.Element | ReactNode}) => (
   <div
     style={{
       display: 'flex',
@@ -179,9 +186,9 @@ export const bars = () => (
       <Bar
         xAxisIndex={0}
         yAxisIndex={1}
-        tooltip={({ xIndex }) => (
+        tooltip={({ xIndex }: { xIndex: number}) => (
           <div>
-            <div>{ barAxis[0].data[xIndex]?.toISOString() }</div>
+            <div>{ (barAxis[0].data[xIndex] as Date)?.toISOString() }</div>
             <div>Free: { barAxis[1].data[xIndex]?.free }</div>
             <div>Premium: { barAxis[1].data[xIndex]?.premium }</div>
           </div>
@@ -229,11 +236,13 @@ export const withTooltip = () => (
       <Marker
         xAxisIndex={0}
         yAxisIndexes={[1, 2]}
-        tooltip={({ xIndex }) => (
+        tooltip={({ xIndex }: {xIndex: number}) => (
           <div>
             <div>{ axis[0].data[xIndex].toISOString() }</div>
-            <div>Data: { data[xIndex][1] }</div>
-            <div>Alternative data: { alternativeData[xIndex][1] }</div>
+            <div>Data: { data[xIndex][1] as number }</div>
+            <div>
+              Alternative data: { alternativeData[xIndex][1] as number }
+            </div>
           </div>
         )}
       />
@@ -254,7 +263,9 @@ export const withTooltip = () => (
 export const withGranularity = () => {
   const [granularity, setGranularity] = useState('day');
 
-  const rollup = useCallback((data, opts = {}) => {
+  const rollup = useCallback((
+    data: [Date, number][], opts: {aggregate?: string} = {}
+  ) => {
     switch (granularity) {
       case 'year':
       case 'month':

packages/react-d3-plugin/lib/Chart/index.test.js → packages/react-d3-plugin/lib/Chart/index.test.tsx

@@ -3,19 +3,19 @@ import * as d3 from 'd3';
 
 import Curve from '../Curve';
 import Marker from '../Marker';
-import Chart from './';
+import Chart from '.';
 
 describe('<Chart />', () => {
   it('should render', () => {
     const computedStylesMock = jest.spyOn(globalThis, 'getComputedStyle')
       .mockReturnValueOnce({
-        width: 1000,
-        height: 500,
-        paddingLeft: 0,
-        paddingRight: 0,
-        paddingTop: 0,
-        paddingBottom: 0,
-      });
+        width: '1000',
+        height: '500',
+        paddingLeft: '0',
+        paddingRight: '0',
+        paddingTop: '0',
+        paddingBottom: '0',
+      } as any);
 
     const { container, unmount } = render(
       <Chart
@@ -28,7 +28,7 @@ describe('<Chart />', () => {
             new Date('2020-10-01T00:00:00.000Z'),
             new Date('2020-10-02T00:00:00.000Z'),
           ],
-          parseTitle: d => d.toISOString(),
+          parseTitle: (d: Date) => d.toISOString(),
           ticks: null,
         }, {
           type: d3.axisLeft,

packages/react-d3-plugin/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "declarationDir": "./dist/types",
     "paths": {
-      "@junipero/core": ["../core/lib/index.ts"], // TODO rework aliases
+      "@junipero/core": ["../core/lib/index.ts"],
       "@junipero/hooks": ["../hooks/lib/index.ts"],
       "@junipero/react": ["../react/lib/index.ts"],
     }

packages/react/lib/TextField/index.test.tsx

@@ -6,7 +6,7 @@ import { blur, reset } from '~tests-utils';
 import Label from '../Label';
 import Abstract from '../Abstract';
 import FieldControl from '../FieldControl';
-import TextField from '.';
+import TextField, { TextFieldRef } from '.';
 
 describe('<TextField />', () => {
   it('should render', () => {
@@ -73,7 +73,7 @@ describe('<TextField />', () => {
 
   it('should allow to reset the field', async () => {
     const user = userEvent.setup();
-    const ref = createRef();
+    const ref = createRef<TextFieldRef>();
     const onChange = jest.fn();
     const { unmount, container } = render(
       <TextField ref={ref} value="John" onChange={onChange} />