Feature/esm doc (#175)

* first draft of the documentation

* first pass of documentation

* add change the import paths

* remove comments from .mdx

* fix documentation styles

* fix highlight

* added typo and textarea tests

* highlight in text

* Box

* Dot

* Card

* added tag

* removed unnecessary file

* Form

* Link

* Address

* Anchor

* Article

* Aside

* added Tabs

* HTMLButton

* Div

* reworked Switch

* converted Menu

* added select

* added illustratedMessage and RAdio

* removed unnecessary mdx imports / added missing filed

* Footer

* Header

* Img

* Input

* List

* Main

* Nav

* converted Tile

* added alert/badge/image

* Section

* Span

* Table

* Flex

* Renaming some nodes we see in the doc

* Grid

* Field

* Avatar

* Button

* added Modal / Disclosure-Arrow / CrossButton

* Autocomplete

* Counter

* added inputGroup / Transition

* Content / Footer / Header

* added Lozenge/Popover

* update doc features

* added loader and tooltip

* convert some files to ts

* remove yarn lock

* removed unnecessary sample

* removed unnecessary sample

* added checkboxgroup

* checkbox fixes

* added toolbar / nunberInput

* Divider/Listbox

* Illustration

* ThemeProvider

* added dateInput and dateRangeInput

* fix build

* fix source

* fix part of the linting

* fix a couple of errors

* fix fit property

* update select issues

* fix doc example

* woops

* lint

* fixed typing issue

* fix linting

* fix prop table

* fix 4 stories that were broken

* Feature/ds 414 styling orbiter (#177)

Fix styling

* Table

* Fix code blocks styling

* Fix lint

---------

Co-authored-by: Francis Thibault <[email protected]>
Co-authored-by: Victor Trinh <[email protected]>
Co-authored-by: victortrinh2 <[email protected]>

.eslintignore

@@ -5,3 +5,5 @@ dist
 *.svg
 package.json
 *.css
+!/.storybook
+!/**/.storybook

.github/workflows/ci.yml

@@ -86,6 +86,8 @@ jobs:
               run: |
                 corepack enable
                 pnpm install --frozen-lockfile
+            - name: Typecheck
+              run: pnpm run lint-ci-eslint
             - name: Build Packages
               run: pnpm run build
             - name: Run Jest

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

@@ -45,6 +45,10 @@
     column-gap: 8px;
 }
 
+.o-ui-sb-component-info-value ul li {
+    margin: 0;
+}
+
 .o-ui-sb-component-info code {
     white-space: nowrap;
 }

.storybook/components/index.ts

@@ -7,6 +7,5 @@ export * from "./tagline";
 export * from "./component-info";
 export * from "./snippet";
 export * from "./themed-snippet";
-export * from "./package-installation-snippet";
-export * from "./preview";
 export * from "./banner";
+export * from "./source";

.storybook/components/snippet/index.ts

@@ -1,2 +1 @@
-export * from "./Snippet";
 export * from "./useFormattedCode";

.storybook/components/snippet/useFormattedCode.ts

@@ -7,31 +7,35 @@ import prettierPostCss from "prettier/parser-postcss";
 const PrettierParser = {
     "javascript": "babel",
     "jsx": "babel",
+    "tsx": "babel-ts",
     "css": "css"
 };
 
+
 export function useFormattedCode(code: string, language: string) {
     return useMemo(() => {
-        const parser = PrettierParser[language];
+        formatCode(code, language);
+    }, [code, language]);
+}
 
-        if (!isNil(parser)) {
-            const prettyCode = prettier
-                .format(code, {
-                    parser: parser,
-                    plugins: [prettierBabel, prettierPostCss],
-                    tabWidth: 4,
-                    arrowParens: "avoid",
-                    printWidth: 100,
-                    trailingComma: "none"
-                })
-                .replace(">;", ">")
-                .trim();
+export function formatCode(code: string, language: string) {
+    const parser = PrettierParser[language];
 
-            console.log("useFormattedCode", code, prettyCode);
+    if (!isNil(parser)) {
+        const prettyCode = prettier
+            .format(code, {
+                parser: parser,
+                plugins: [prettierBabel, prettierPostCss],
+                tabWidth: 4,
+                arrowParens: "avoid",
+                printWidth: 100,
+                trailingComma: "none"
+            })
+            .replace(">;", ">")
+            .trim();
 
-            return prettyCode;
-        }
+        return prettyCode;
+    }
 
-        return code.trim();
-    }, [code, language]);
+    return code.trim();
 }

.storybook/components/source/Source.tsx

@@ -0,0 +1,10 @@
+import React, { ComponentProps } from "react";
+import { Source as StorybookSource } from "@storybook/addon-docs";
+
+type SourceProps = ComponentProps<typeof StorybookSource>;
+
+export const Source = (props: SourceProps) => {
+    const { language = "tsx", ...otherProps } = props;
+
+    return <StorybookSource language={language} dark {...otherProps} />;
+};

.storybook/components/source/index.ts

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