From 125de56096b401e3052a5f4b45460ff3f9f6092f Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Fri, 20 Oct 2023 16:41:57 +0530 Subject: [PATCH] fix: heading ** removed --- .../src/advanced/Fonts/index.stories.mdx | 26 +++++++++---------- .../src/more/Figma/index.stories.mdx | 4 +-- .../babel-plugin/index.stories.mdx | 6 ++--- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/example/storybook/src/advanced/Fonts/index.stories.mdx b/example/storybook/src/advanced/Fonts/index.stories.mdx index da922b100e..7df3ab82ff 100644 --- a/example/storybook/src/advanced/Fonts/index.stories.mdx +++ b/example/storybook/src/advanced/Fonts/index.stories.mdx @@ -23,7 +23,7 @@ When you want to use a specific font in your application, you have to follow two For this section, we will focus on loading fonts from [Google](https://fonts.google.com/) -### **For Expo projects** +### For Expo projects To load **Google fonts** in Expo, we have to install `expo-font` & follow following steps: @@ -55,8 +55,7 @@ import { Inter_500Medium, Inter_600SemiBold, Inter_700Bold, - Inter_900Black, -} from "@expo-google-fonts/inter"; + Inter_900Black, } from "@expo-google-fonts/inter"; ``` 5. Load the font in your application. @@ -94,7 +93,7 @@ import { useFonts } from 'expo-font'; }); ``` -### **For Next.js projects** +### For Next.js projects To load **google-fonts** in Next.js application, we have to follow following steps: @@ -112,15 +111,15 @@ To load **local-fonts** in Next.js application, we have to follow following step 1. Download the font files and add them to the `public/assets` folder. 2. Add the css to attach font files to the font family in the `global.css` file in the `styles` folder. -```bash +```css @font-face { - font-family: "inter"; + font-family: 'inter'; src: url('/assets/inter/Inter-Regular.ttf'); font-weight: normal; font-style: normal; } @font-face { - font-family: "inter"; + font-family: 'inter'; src: url('/asset/inter/Inter-Bold.ttf'); font-weight: bold; font-style: normal; @@ -132,7 +131,7 @@ To load **local-fonts** in Next.js application, we have to follow following step You already have the font loaded in your application, now you can apply the font in your application. Add the font name in the `gluestack.config.js` file in the `fonts` object. If you are confused where to find the fonts config object? Please go through [this](https://gluestack.io/ui/docs/theme-configuration/theme/default-tokens) documentation (specifically the typography section). -```bash +```js fonts: { heading: "inter", // Heading component uses this by default body: "inter", // Text component uses this by default @@ -145,7 +144,7 @@ fonts: { In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](/style) This package provides a simple way to use fonts using the FontResolver plugin. -```bash +```js import { FontResolver } from '@gluestack-style/react'; // const fontMapper = (style: any) => { @@ -154,9 +153,11 @@ import { FontResolver } from '@gluestack-style/react'; export const config = { aliases: {}, tokens: {}, - plugins: [new FontResolver({ - // mapFonts: fontMapper, - })], + plugins: [ + new FontResolver({ + // mapFonts: fontMapper, + }), + ], }; const StyledText = styled(Text, { @@ -165,7 +166,6 @@ const StyledText = styled(Text, { fontStyle: 'regular', fontSize: '$xl', }); - ``` You can use the `styled` function to style your components. For gluestack-ui components, we have used this styled function to style the components. diff --git a/example/storybook/src/more/Figma/index.stories.mdx b/example/storybook/src/more/Figma/index.stories.mdx index 8515ffc8f0..31abac4a18 100644 --- a/example/storybook/src/more/Figma/index.stories.mdx +++ b/example/storybook/src/more/Figma/index.stories.mdx @@ -15,13 +15,13 @@ Auto-generating Figma Kit for gluestack-ui Design System from Storybook ### Approach: -**Step 1: Storybook to Next** +1. Storybook to Next - Create individual pages for each component in Next.js. - Render all components with their various combinations, including variants and other properties. - Implement server-side rendering (SSR) to capture the styling and layout in the page source. -**Step 2: Next to Figma** +2. Next to Figma - Fetch the Document Object Model (DOM) for each component from the Next.js pages. - Generate Figma layers by traversing the DOM structure. diff --git a/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx b/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx index 4cf6405a72..0a0aaf721d 100644 --- a/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx +++ b/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx @@ -52,9 +52,9 @@ import { AppProvider, Box } from '@gluestack/design-system'; 4. Just make sure your `babel.config.js` and `gluestack-ui.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase. If you can't, then use the `configPath` option to specify the path of the `gluestack-ui.config.js/ts` file. -> **Note:** We already provide you with the plugin config for `@gluestack-ui/themed`. So you have to do minimal configuration to get it working. +> Note: We already provide you with the plugin config for `@gluestack-ui/themed`. So you have to do minimal configuration to get it working. -### **Let us see how this Babel plugin works.** +### Let us see how this Babel plugin works. - First, it traverses your files and tries to find your `component` imported from `@gluestack-ui/themed`. - Once it finds the component, it fetches the component props. @@ -212,7 +212,7 @@ module.exports = function (api) { - `components`: The `components` option allows you to specify the library/import_path name & file path of components created using `@gluestack-style/react`. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library. -> **Note**: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime. +> Note: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime. ```js // babel.config.js