fix: styles and remove imports

Smile-SA · Nov 30, 2023 · d6a5ff1 · d6a5ff1
1 parent b9d4be9
commit d6a5ff1
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 42 deletions.
diff --git a/docs/components/01-bit-converter.mdx b/docs/components/01-bit-converter.mdx
@@ -1,10 +1,7 @@
-import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';
-import Description from '../../src/components/Description/Description';
-
 # Bit Converter
 
 <Description
-  importExample={"import { BitConverter } from '@smile/react-front-kit';"}
+  importExample="import { BitConverter } from '@smile/react-front-kit';"
   packageInfo={{
     label: '@smile/react-front-kit',
     link: 'https://www.npmjs.com/package/@smile/react-front-kit',
@@ -23,9 +20,7 @@ import Description from '../../src/components/Description/Description';
 
 ## Props
 
-| Name            | Type                                                                           | Default | Description                                                                        |
-| --------------- | ------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------- |
-| options         | [`Options`](https://github.com/sindresorhus/pretty-bytes/blob/main/index.d.ts) | -       | `options` passed to [prettyBytes()](https://github.com/sindresorhus/pretty-bytes)) |
-| value <b>\*</b> | `number`                                                                       | -       | The `number` value to format                                                       |
-
-(<b>`*`</b> required prop)
+| Name              | Type                                                                           | Default | Description                                                                        |
+| ----------------- | ------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------- |
+| options           | [`Options`](https://github.com/sindresorhus/pretty-bytes/blob/main/index.d.ts) | -       | `options` passed to [prettyBytes()](https://github.com/sindresorhus/pretty-bytes)) |
+| value <Required/> | `number`                                                                       | -       | The `number` value to format                                                       |
diff --git a/docs/components/01-breadcrumbs.mdx b/docs/components/01-breadcrumbs.mdx
@@ -1,13 +1,10 @@
-import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';
-import Description from '../../src/components/Description/Description';
-
 # Breadcrumbs
 
 <Description
   extendsInfo={[
     { label: 'Breadcrumbs', link: 'https://v6.mantine.dev/core/breadcrumbs' },
   ]}
-  importExample={"import { Breadcrumbs } from '@smile/react-front-kit';"}
+  importExample="import { Breadcrumbs } from '@smile/react-front-kit';"
   packageInfo={{
     label: '@smile/react-front-kit',
     link: 'https://www.npmjs.com/package/@smile/react-front-kit',
@@ -25,10 +22,8 @@ import Description from '../../src/components/Description/Description';
 
 ## Props
 
-| Name               | Type        | Default                                                                                                                                                                                                                                                                 | Description                                                                   |
-| ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| children <b>\*</b> | `ReactNode` | -                                                                                                                                                                                                                                                                       | Elements inserted after the Breadcrumbs on the same row                       |
-| separator          | `string`    | <svg     fill ="none"     height ="14"     viewBox ="0 0 14 14"     width ="14"     xmlns ="http://www.w3.org/2000/svg"  > <path       d ="M5.25 10.5L8.75 7L5.25 3.5"       stroke ="#0B7285"       strokeLinecap ="round"       strokeLinejoin ="round"     /> </svg> | The `string` or SVG used as a separator between each level                    |
-| ...                | -           | -                                                                                                                                                                                                                                                                       | extends [Breadcrumbs props](https://v6.mantine.dev/core/breadcrumbs/?t=props) |
-
-(<b>`*`</b> required prop)
+| Name                 | Type        | Default                                                                                                                                                                                                                                                                 | Description                                                                   |
+| -------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| children <Required/> | `ReactNode` | -                                                                                                                                                                                                                                                                       | Elements inserted after the Breadcrumbs on the same row                       |
+| separator            | `string`    | <svg     fill ="none"     height ="14"     viewBox ="0 0 14 14"     width ="14"     xmlns ="http://www.w3.org/2000/svg"  > <path       d ="M5.25 10.5L8.75 7L5.25 3.5"       stroke ="#0B7285"       strokeLinecap ="round"       strokeLinejoin ="round"     /> </svg> | The `string` or SVG used as a separator between each level                    |
+| ...                  | -           | -                                                                                                                                                                                                                                                                       | extends [Breadcrumbs props](https://v6.mantine.dev/core/breadcrumbs/?t=props) |
diff --git a/docs/components/01-collapse-button.mdx b/docs/components/01-collapse-button.mdx
@@ -1,6 +1,3 @@
-import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';
-import Description from '../../src/components/Description/Description';
-
 # Collapse Button
 
 <Description
@@ -14,7 +11,7 @@ import Description from '../../src/components/Description/Description';
       link: 'https://v6.mantine.dev/core/collapse/',
     },
   ]}
-  importExample={"import { CollapseButton } from '@smile/react-front-kit';"}
+  importExample="import { CollapseButton } from '@smile/react-front-kit';"
   packageInfo={{
     label: '@smile/react-front-kit',
     link: 'https://www.npmjs.com/package/@smile/react-front-kit',
@@ -125,11 +122,9 @@ const [opened, setOpened] = useState(true);
 
 Only using `<CollapseButtonControlled>`, extends the uncontrolled `<CollapseButton>` props.
 
-| Name             | Type                     | Default | Description                                                                                                 |
-| ---------------- | ------------------------ | ------- | ----------------------------------------------------------------------------------------------------------- |
-| collapseProps    | `Partial<CollapseProps>` | -       | Passed to the `Collapse`, extends Mantine's [Collapse Props](https://v6.mantine.dev/core/collapse/?t=props) |
-| onCollapseChange | `ElementType`            | -       | Called when the dropdown icon is clicked                                                                    |
-| opened <b>\*</b> | `boolean`                | `false` | Controlled value of `Collapse`, controls of `Collapse` is opened or closed                                  |
-| ...              | -                        | -       | extends uncontrolled `CollapseButton` props                                                                 |
-
-(<b>`*`</b> required prop)
+| Name               | Type                     | Default | Description                                                                                                 |
+| ------------------ | ------------------------ | ------- | ----------------------------------------------------------------------------------------------------------- |
+| collapseProps      | `Partial<CollapseProps>` | -       | Passed to the `Collapse`, extends Mantine's [Collapse Props](https://v6.mantine.dev/core/collapse/?t=props) |
+| onCollapseChange   | `ElementType`            | -       | Called when the dropdown icon is clicked                                                                    |
+| opened <Required/> | `boolean`                | `false` | Controlled value of `Collapse`, controls of `Collapse` is opened or closed                                  |
+| ...                | -                        | -       | extends uncontrolled `CollapseButton` props                                                                 |
diff --git a/docs/components/01-dropzone.mdx b/docs/components/01-dropzone.mdx
@@ -1,13 +1,10 @@
-import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';
-import Description from '../../src/components/Description/Description';
-
 # Dropzone
 
 <Description
   extendsInfo={[
     { label: 'Dropzone', link: 'https://v6.mantine.dev/others/dropzone/' },
   ]}
-  importExample={"import { Dropzone } from '@smile/react-front-kit-dropzone';"}
+  importExample="import { Dropzone } from '@smile/react-front-kit-dropzone';"
   packageInfo={{
     label: '@smile/react-front-kit-dropzone',
     link: 'https://www.npmjs.com/package/@smile/react-front-kit-dropzone',

diff --git a/docs/components/01-sidebar-menu.mdx b/docs/components/01-sidebar-menu.mdx
@@ -1,11 +1,8 @@
-import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';
-import Description from '../../src/components/Description/Description';
-
 # Sidebar Menu
 
 <Description
   extendsInfo={[{ label: 'Paper', link: 'https://v6.mantine.dev/core/paper/' }]}
-  importExample={"import { SidebarMenu } from '@smile/react-front-kit';"}
+  importExample="import { SidebarMenu } from '@smile/react-front-kit';"
   packageInfo={{
     label: '@smile/react-front-kit',
     link: 'https://www.npmjs.com/package/@smile/react-front-kit',

diff --git a/src/components/Description/styles.module.css b/src/components/Description/styles.module.css
@@ -40,7 +40,7 @@
 }
 
 .codeBlock {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .codeBlock code {

diff --git a/src/components/Required/Required.tsx b/src/components/Required/Required.tsx
@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+
+export default function Required(): ReactElement {
+  return (
+    <b style={{ color: 'red', cursor: 'help' }} title="Required">
+      *
+    </b>
+  );
+}
diff --git a/src/theme/MDXComponents.ts b/src/theme/MDXComponents.ts
@@ -0,0 +1,12 @@
+import MdxComponents from '@theme-original/MDXComponents';
+
+import Description from '@site/src/components/Description/Description';
+import Required from '@site/src/components/Required/Required';
+import StorybookEmbed from '@site/src/components/StorybookEmbed/StorybookEmbed';
+
+export default {
+  ...MdxComponents,
+  Description,
+  Required,
+  StorybookEmbed,
+};