Merge pull request #178 from gsoft-inc/feature/esm_conversion

[ESM] Convert the code to esm

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "root": true,
+    "extends": ["plugin:@workleap/react-library"],
+    "rules": {
+        "no-console": ["warn", { "allow": ["warn", "error"] }],
+        "react/destructuring-assignment": "off",
+        "no-param-reassign": "off",
+
+        // New Workleap rules that we don't want to enforce yet
+        "@typescript-eslint/consistent-type-imports": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "react/no-unused-prop-types": "off"
+
+    },
+    "overrides": [
+        {
+            "files": ["*.mdx"],
+            "rules":{
+                "react/jsx-no-undef": "off"
+            }
+        },
+        {
+            "files": [
+                ".storybook/*",
+                "**/scripts/*.js"
+            ],
+            "rules":{
+                "no-console": "off"
+            }
+        }
+    ]
+}

.storybook/components/banner/Banner.tsx

@@ -1,7 +1,7 @@
 import "./Banner.css";
 
-import { Div, DivProps } from "@components/html";
-import { mergeProps } from "@components/shared";
+import { Div, DivProps } from "@components/html/index.ts";
+import { mergeProps } from "@components/shared/index.ts";
 
 export function Banner({ children, ...rest }: DivProps) {
     return (

.storybook/components/banner/index.ts

@@ -1 +1 @@
-export * from "./Banner";
+export * from "./Banner.tsx";

.storybook/components/checkered-background/CheckeredBackground.tsx

@@ -1,7 +1,7 @@
 import "./CheckeredBackground.css";
 
-import { Div, DivProps } from "@components/html";
-import { mergeProps } from "@components/shared";
+import { Div, DivProps } from "@components/html/index.ts";
+import { mergeProps } from "@components/shared/index.ts";
 
 export function CheckeredBackground({ children, ...rest }: DivProps) {
     return (

.storybook/components/checkered-background/index.ts

@@ -1 +1 @@
-export * from "./CheckeredBackground";
+export * from "./CheckeredBackground.tsx";

.storybook/components/component-info/ComponentInfo.tsx

@@ -1,8 +1,8 @@
 import "./ComponentInfo.css";
 
 import { ExternalLink, GithubLink, Link, useThemedSnippet } from "@stories/components";
-import { cssModule, mergeClasses } from "@components/shared";
-import { Div } from "@components/html";
+import { cssModule, mergeClasses } from "@components/shared/index.ts";
+import { Div } from "@components/html/index.ts";
 import { ComponentProps } from "react";
 
 const ExtendLinks = {

.storybook/components/component-info/index.ts

@@ -1 +1 @@
-export * from "./ComponentInfo";
+export * from "./ComponentInfo.tsx";

.storybook/components/external-link/index.ts

@@ -1 +1 @@
-export * from "./ExternalLink";
+export * from "./ExternalLink.tsx";

.storybook/components/github-link/GithubLink.tsx

@@ -1,7 +1,7 @@
 import { ExternalLink, ExternalLinkProps } from "@stories/components";
-import { Flex } from "@components/layout";
-import { Img } from "@components/html";
-import { getGithubUrl } from "./getGithubUrl";
+import { Flex } from "@components/layout/index.ts";
+import { Img } from "@components/html/index.ts";
+import { getGithubUrl } from "./getGithubUrl.ts";
 import GithubLogo from "./assets/logo-github-32.png";
 
 interface GithubLinkProps extends Omit<ExternalLinkProps, "href"> {

.storybook/components/github-link/index.ts

@@ -1,2 +1,2 @@
-export * from "./GithubLink";
-export * from "./getGithubUrl";
+export * from "./GithubLink.tsx";
+export * from "./getGithubUrl.ts";

.storybook/components/index.ts

@@ -1,11 +1,11 @@
-export * from "./checkered-background";
-export * from "./external-link";
-export * from "./github-link";
-export * from "./link";
-export * from "./table";
-export * from "./tagline";
-export * from "./component-info";
-export * from "./snippet";
-export * from "./themed-snippet";
-export * from "./banner";
-export * from "./source";
+export * from "./checkered-background/index.ts";
+export * from "./external-link/index.ts";
+export * from "./github-link/index.ts";
+export * from "./link/index.ts";
+export * from "./table/index.ts";
+export * from "./tagline/index.ts";
+export * from "./component-info/index.ts";
+export * from "./snippet/index.ts";
+export * from "./themed-snippet/index.ts";
+export * from "./banner/index.ts";
+export * from "./source/index.ts";

.storybook/components/link/index.ts

@@ -1 +1 @@
-export * from "./Link";
+export * from "./Link.tsx";

.storybook/components/snippet/index.ts

@@ -1 +1 @@
-export * from "./useFormattedCode";
+export * from "./useFormattedCode.ts";

.storybook/components/snippet/useFormattedCode.ts

@@ -1,4 +1,4 @@
-import { isNil } from "@components/shared";
+import { isNil } from "@components/shared/index.ts";
 import { useMemo } from "react";
 import prettier from "prettier/standalone";
 import prettierBabel from "prettier/parser-babel";
@@ -13,24 +13,24 @@ const PrettierParser = {
 
 
 export function useFormattedCode(code: string, language: string) {
-    return useMemo(() => {
-        formatCode(code, language);
+    return useMemo(async () => {
+        await formatCode(code, language);
     }, [code, language]);
 }
 
-export function formatCode(code: string, language: string) {
+export async function formatCode(code: string, language: string) {
     const parser = PrettierParser[language];
 
     if (!isNil(parser)) {
-        const prettyCode = prettier
+        const prettyCode = (await prettier
             .format(code, {
                 parser: parser,
                 plugins: [prettierBabel, prettierPostCss],
                 tabWidth: 4,
                 arrowParens: "avoid",
                 printWidth: 100,
                 trailingComma: "none"
-            })
+            }))
             .replace(">;", ">")
             .trim();
 

.storybook/components/source/index.ts

@@ -1 +1 @@
-export * from "./Source";
+export * from "./Source.tsx";

.storybook/components/table/Table.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import { isPlainObject, isString, mergeClasses } from "@components/shared";
+import { isPlainObject, isString, mergeClasses } from "@components/shared/index.ts";
 import { isElement } from "react-is";
 import { ComponentProps } from "react";
 

.storybook/components/table/index.ts

@@ -1 +1 @@
-export * from "./Table";
+export * from "./Table.tsx";

.storybook/components/tagline/index.ts

@@ -1 +1 @@
-export * from "./Tagline";
+export * from "./Tagline.tsx";

.storybook/components/themed-snippet/index.ts

@@ -1 +1 @@
-export * from "./useThemedSnippet";
+export * from "./useThemedSnippet.ts";

.storybook/components/themed-snippet/useThemedSnippet.ts

@@ -1,5 +1,5 @@
 import { DocsContext } from "@storybook/addon-docs";
-import { isNil, isString } from "@components/shared";
+import { isNil, isString } from "@components/shared/index.ts";
 import { useContext, useMemo } from "react";
 
 export function useThemedSnippet(snippets: string | Record<string, string>) {

.storybook/decorators/index.ts

@@ -1,4 +1,4 @@
-export * from "./withCenteredCanvas";
-export * from "./withBackgroundMatchingColorScheme";
-export * from "./withThemeProvider";
-export * from "./withDocsContainer";
+export * from "./withCenteredCanvas.tsx";
+export * from "./withBackgroundMatchingColorScheme.tsx";
+export * from "./withThemeProvider.tsx";
+export * from "./withDocsContainer.tsx";

.storybook/decorators/withBackgroundMatchingColorScheme.tsx

@@ -1,4 +1,4 @@
-import { isNil } from "@components/shared";
+import { isNil } from "@components/shared/index.ts";
 import { useEffect } from "react";
 
 const StyleElementId = "story-background-color";

.storybook/decorators/withCenteredCanvas.tsx

@@ -1,6 +1,6 @@
-import { Div } from "@components/html";
-import { Flex } from "@components/layout";
-import { isChromatic } from "../env";
+import { Div } from "@components/html/index.ts";
+import { Flex } from "@components/layout/index.ts";
+import { isChromatic } from "../env.ts";
 
 export function withCenteredCanvas(story, context) {
     const { parameters, viewMode } = context;

.storybook/decorators/withDocsContainer.tsx

@@ -1,9 +1,10 @@
-import { ThemeProvider } from "@components/styling";
+import { ThemeProvider } from "@components/styling/index.ts";
 import { DocsContainer } from "@storybook/blocks";
+import type { ComponentProps } from "react";
 import { MDXProvider } from "@mdx-js/react";
-import { mdxComponents } from "../mdx/components";
+import { mdxComponents } from "../mdx/components.ts";
 
-export function ThemedDocsContainer({ children, ...props }) {
+export function ThemedDocsContainer({ children, ...props }: ComponentProps<typeof DocsContainer>) {
     return (
         <ThemeProvider colorScheme="light">
             <MDXProvider

.storybook/decorators/withThemeProvider.tsx

@@ -1,5 +1,5 @@
-import { ThemeProvider } from "@components/styling";
-import { isChromatic } from "../env";
+import { ThemeProvider } from "@components/styling/index.ts";
+import { isChromatic } from "../env.ts";
 import { useEffect, useState, ReactNode } from "react";
 
 export function withThemeProvider(story, context) {
@@ -17,7 +17,7 @@ interface ThemeProviderDecorator {
 }
 
 function ThemeProviderDecorator({ children, context }: ThemeProviderDecorator) {
-    const [colorScheme, setColorScheme] = useState("light");
+    const [colorScheme, setColorScheme] = useState<"light" | "dark">("light");
 
     useEffect(() => {
         setColorScheme(context.globals.theme);

.storybook/main.ts

@@ -2,7 +2,7 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
 
-import { includeDocs, includeChromatic } from "./env";
+import { includeDocs, includeChromatic } from "./env.ts";
 
 // We sometimes need to disable the lazyCompilation to properly run the test runner on stories
 const isLazyCompilation = !(process.env.STORYBOOK_NO_LAZY === "true");

.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from "@storybook/manager-api";
-import { Themes } from "./styles/themes";
+import { Themes } from "./styles/themes.ts";
 
 addons.setConfig({
     theme: Themes.manager,

.storybook/mdx/components.ts

@@ -1,7 +1,10 @@
-import { H1, H2, H3, H4, H5, H6, LI, P } from "./typography";
-import { Highlight } from "./highlight";
+import { H1, H2, H3, H4, H5, H6, LI, P } from "./typography/index.ts";
+import { Highlight } from "./highlight/index.ts";
+import { MDXProvider } from "@mdx-js/react";
+import type { ComponentProps } from "react";
 
-export const mdxComponents = {
+export const mdxComponents: ComponentProps<typeof MDXProvider>["components"] = {
+    // @ts-ignore
     blockquote: Highlight,
     h1: H1,
     h2: H2,

.storybook/mdx/highlight/Highlight.tsx

@@ -1,4 +1,4 @@
-import { Div, DivProps } from "@components/html";
+import { Div, DivProps } from "@components/html/index.ts";
 import "./highlight.css";
 
 export function Highlight({ children, ...rest }: Omit<DivProps, "className">) {

.storybook/mdx/highlight/index.ts

@@ -1 +1 @@
-export * from "./Highlight";
+export * from "./Highlight.tsx";

.storybook/mdx/typography/Heading.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { mergeProps } from "../../../packages/components/src/shared";
+import { mergeProps } from "@components/shared/index.ts";
 
 export const H1 = ({ children, ...props }) => <h1 {...mergeProps(props, { className: "orbiter-doc-h1" })}>{children}</h1>;
 export const H2 = ({ children, ...props }) => <h2 {...mergeProps(props, { className: "orbiter-doc-h2" })}>{children}</h2>;

.storybook/mdx/typography/ListItem.tsx

@@ -1,3 +1,3 @@
-import { mergeProps } from "../../../packages/components/src/shared";
+import { mergeProps } from "@components/shared/index.ts";
 
 export const LI = props => <li {...mergeProps(props, { className: "orbiter-doc-li" })} />;

.storybook/mdx/typography/Paragraph.tsx

@@ -1,3 +1,3 @@
-import { mergeProps } from "../../../packages/components/src/shared";
+import { mergeProps } from "@components/shared/index.ts";
 
 export const P = props => <p {...mergeProps(props, { className: "orbiter-doc-p" })} />;

.storybook/mdx/typography/index.ts

@@ -1,3 +1,3 @@
-export * from "./Heading";
-export * from "./ListItem";
-export * from "./Paragraph";
+export * from "./Heading.tsx";
+export * from "./ListItem.tsx";
+export * from "./Paragraph.tsx";