[docs] Migrate styles api to @mantine/styles-api

Wurielle · Jan 31, 2022 · 0feee6d · 0feee6d
1 parent bf9184e
commit 0feee6d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 44 deletions.
diff --git a/docs/src/components/HomePage/Customize/Customize.tsx b/docs/src/components/HomePage/Customize/Customize.tsx
@@ -3,7 +3,7 @@ import { Link } from 'gatsby';
 import { ArrowRightIcon } from '@modulz/radix-icons';
 import { Text, SimpleGrid, Slider, Button } from '@mantine/core';
 import { Prism } from '@mantine/prism';
-import * as CORE_STYLES_API from '@mantine/core/src/styles.api';
+import { Slider as SliderStylesApi } from '@mantine/styles-api';
 import DataTable from '../../MdxPage/MdxProvider/DataTable/DataTable';
 import { PageSection } from '../PageSection/PageSection';
 
@@ -50,10 +50,7 @@ export function Customize() {
 
           <DataTable
             head={['Name', 'Description']}
-            data={Object.keys(CORE_STYLES_API.Slider).map((name) => [
-              name,
-              CORE_STYLES_API.Slider[name],
-            ])}
+            data={Object.keys(SliderStylesApi).map((name) => [name, SliderStylesApi[name]])}
           />
         </div>
 

diff --git a/docs/src/components/MdxPage/MdxPageTabs/StylesApi/StylesApiItem/StylesApiItem.tsx b/docs/src/components/MdxPage/MdxPageTabs/StylesApi/StylesApiItem/StylesApiItem.tsx
@@ -1,22 +1,10 @@
 import React from 'react';
 import { Table, Title, Text } from '@mantine/core';
 import { Prism } from '@mantine/prism';
-import * as CORE_STYLES_API from '@mantine/core/src/styles.api';
-import * as PRISM_STYLES_API from '@mantine/prism/src/styles.api';
-import * as DATES_STYLES_API from '@mantine/dates/src/styles.api';
-import * as RTE_STYLES_API from '@mantine/rte/src/styles.api';
-import * as DROPZONE_STYLES_API from '@mantine/dropzone/src/styles.api';
+import * as STYLES_API from '@mantine/styles-api';
 import { generateStylesCode, generateClassNamesCode } from '../generate-styles-code';
 import useStyles from './StylesApiItem.styles';
 
-const STYLES_API = {
-  ...CORE_STYLES_API,
-  ...PRISM_STYLES_API,
-  ...DATES_STYLES_API,
-  ...RTE_STYLES_API,
-  ...DROPZONE_STYLES_API,
-};
-
 interface StylesApiItemProps {
   component: string;
 }

diff --git a/docs/src/demos/hooks/use-form/auth.tsx b/docs/src/demos/hooks/use-form/auth.tsx
@@ -1,29 +1,30 @@
-import React from 'react';
-import { AuthenticationForm } from '@mantine/core/demos';
-import { useMantineTheme } from '@mantine/core';
-import { CodeDemo } from '@mantine/ds';
+// import React from 'react';
+// import { AuthenticationForm } from '@mantine/core/demos';
+// import { useMantineTheme } from '@mantine/core';
+// import { CodeDemo } from '@mantine/ds';
 
 // @ts-ignore
 // eslint-disable-next-line import/no-webpack-loader-syntax
-import code from '!!raw-loader!../../../../src/mantine-core/demos/AuthenticationForm/AuthenticationForm';
+// import code from '!!raw-loader!../../../../src/mantine-core/demos/AuthenticationForm/AuthenticationForm';
 
-export function UseFormAuthDemo({ toggle = false }: { toggle: boolean }) {
-  const theme = useMantineTheme();
+export function UseFormAuthDemo() {
+  // const theme = useMantineTheme();
+  return null;
 
-  return (
-    <CodeDemo
-      code={code.replace('../../src', '@mantine/core')}
-      language="tsx"
-      toggle={toggle}
-      demoBackground={theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0]}
-    >
-      <div style={{ maxWidth: 400, margin: 'auto' }}>
-        <AuthenticationForm
-          style={{
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          }}
-        />
-      </div>
-    </CodeDemo>
-  );
+  // return (
+  //   <CodeDemo
+  //     code={code.replace('../../src', '@mantine/core')}
+  //     language="tsx"
+  //     toggle={toggle}
+  //     demoBackground={theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0]}
+  //   >
+  //     <div style={{ maxWidth: 400, margin: 'auto' }}>
+  //       <AuthenticationForm
+  //         style={{
+  //           backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+  //         }}
+  //       />
+  //     </div>
+  //   </CodeDemo>
+  // );
 }
diff --git a/docs/src/docs/theming/styles-api.mdx b/docs/src/docs/theming/styles-api.mdx
@@ -7,7 +7,7 @@ order: 4
 
 import { providerStyles } from '@docs/demos';
 import { ButtonDemos, SliderDemos, TabsDemos, AccordionDemos, CalendarDemos } from '@mantine/demos';
-import * as CORE_STYLES_API from '@mantine/core/src/styles.api';
+import { Slider as SliderStylesApi } from '@mantine/styles-api';
 
 # Styles API
 
@@ -28,10 +28,10 @@ styles names table. Name column will tell you how to target specific element in
 
 <DataTable
   head={['Name', 'Static selector', 'Description']}
-  data={Object.keys(CORE_STYLES_API.Slider).map((name) => [
+  data={Object.keys(SliderStylesApi).map((name) => [
     name,
     `.mantine-slider-${name}`,
-    CORE_STYLES_API.Slider[name],
+    SliderStylesApi[name],
   ])}
 />
 

diff --git a/src/mantine-styles-api/src/PasswordInput.styles-api.ts b/src/mantine-styles-api/src/PasswordInput.styles-api.ts
@@ -0,0 +1,8 @@
+import type { PasswordInputStylesNames } from '@mantine/core';
+import { TextInput } from './TextInput.styles-api';
+
+export const PasswordInput: Record<PasswordInputStylesNames, string> = {
+  ...TextInput,
+  visibilityToggle: 'Visibility toggle button',
+  innerInput: 'Actual input element',
+};