DEV Community: Dima Portenko

Supercharge your NeoVim workflow with project-cli-commands.nvim

Dima Portenko — Sun, 21 Jul 2024 13:23:43 +0000

If you're a Neovim enthusiast looking for a way to streamline your workflow by quickly running terminal commands within your current project, then look no further. Introducing project-cli-commands.nvim, a powerful plugin that integrates with Telescope and ToggleTerm to provide a seamless experience for executing project-specific CLI commands.

What is project-cli-commands.nvim?

project-cli-commands.nvim is a Neovim plugin that allows you to run terminal commands effortlessly from within your editor. Whether you need to list files, run tests, or execute any custom script, this plugin has got you covered. It offers features like running commands with input, copying commands to clipboard, and injecting the current buffer path into commands.

Installation

To get started, add the following configuration to your Neovim setup:

{
  "dimaportenko/project-cli-commands.nvim",

  dependencies = {
    "akinsho/toggleterm.nvim",
    "nvim-telescope/telescope.nvim",
  },

  config = function()
    local OpenActions = require('project_cli_commands.open_actions')
    local RunActions = require('project_cli_commands.actions')

    local config = {
      running_telescope_mapping = {
        ['<C-c>'] = RunActions.exit_terminal,
        ['<C-f>'] = RunActions.open_float,
        ['<C-v>'] = RunActions.open_vertical,
        ['<C-h>'] = RunActions.open_horizontal,
      },
      open_telescope_mapping = {
        { mode = 'i', key = '<CR>',  action = OpenActions.execute_script_vertical },
        { mode = 'n', key = '<CR>',  action = OpenActions.execute_script_vertical },
        { mode = 'i', key = '<C-h>', action = OpenActions.execute_script },
        { mode = 'n', key = '<C-h>', action = OpenActions.execute_script },
        { mode = 'i', key = '<C-i>', action = OpenActions.execute_script_with_input },
        { mode = 'n', key = '<C-i>', action = OpenActions.execute_script_with_input },
        { mode = 'i', key = '<C-c>', action = OpenActions.copy_command_clipboard },
        { mode = 'n', key = '<C-c>', action = OpenActions.copy_command_clipboard },
        { mode = 'i', key = '<C-f>', action = OpenActions.execute_script_float },
        { mode = 'n', key = '<C-f>', action = OpenActions.execute_script_float },
        { mode = 'i', key = '<C-v>', action = OpenActions.execute_script_vertical },
        { mode = 'n', key = '<C-v>', action = OpenActions.execute_script_vertical },
      }
    }

    require('project_cli_commands').setup(config)
  end
}

Usage

Commands Configuration

Configuration for project-cli-commands.nvim is stored in a .nvim/config.json file. If the file does not exist, the plugin will prompt you to create one when you run Telescope project_cli_commands open.

Example config.json:

{
  "env": ".env",
  "commands": {
    "ls:la": "ls -tls",
    "current:ls": "ls -la ${currentBuffer}",
    "print:env": "echo $EXPO_TOKEN",
    "print:env:local": {
      "cmd": "echo $EXPO_TOKEN",
      "env": ".env.local",
      "after": "Telescope find_files"
    }
  }
}

env (optional): Path to the environment file to load before running the command.
commands: List of terminal commands with optional configurations.

Telescope Commands

Telescope project_cli_commands open: Opens Telescope with a list of commands from config.json.
Telescope project_cli_commands running: Opens Telescope with a list of running commands, allowing you to toggle or stop them.

Keymap

Add these key mappings to your Neovim configuration for quick access:

vim.api.nvim_set_keymap("n", "<leader>p", ":Telescope project_cli_commands open<cr>", { noremap = true, silent = true })
vim.api.nvim_set_keymap("n", "<leader>;", ":Telescope project_cli_commands running<cr>", { noremap = true, silent = true })

Features

Open Terminal with Command

You can open a terminal in float, vertical, or horizontal mode to run your commands.

Run Command with Input

This feature allows you to add extra arguments to your terminal command dynamically.

Copy Command to Clipboard

By pressing Ctrl+c, you can copy the command to your clipboard.

Run Command After

Run a Neovim command after the terminal command finishes execution.

Environment Variables

Load environment variables from a file before running a command.

Inject Current Buffer Path to Command

For example, to run tests for the current buffer:

{
  "commands": {
    "test:current": "jest ${currentBuffer}"
  }
}

List of Running Commands

Use Telescope project_cli_commands running to manage your running commands, including showing/hiding terminals or stopping commands.

Conclusion

project-cli-commands.nvim is a must-have plugin for Neovim users who want to boost their productivity by seamlessly integrating terminal commands into their workflow. Give it a try and see how it can transform your development experience!

Liquid Gauge React Native Skia

Dima Portenko — Mon, 20 Nov 2023 13:14:19 +0000

Intro

Some time ago I saw this cool Liquid Fill Gauge Gist with cool animated web svg component. Immediately I thought it would be cool to have it in react native. It took me some effort to make it work. So I decided to make a tutorial for it. I will use react-native-skia and react-native-reanimated.

First of all, let's install react-native-skia (please follow official docs for it). Now let's create new component and draw circle.



import { Canvas, Circle } from "@shopify/react-native-skia";

type Props = {
  size: number;
};

export const LiquidGaugeProgress = ({ size }: Props) => {
  const radius = size * 0.5;
  const circleThickness = radius * 0.05;

  return (
    <Canvas style={{ width: size, height: size }}>
      <Circle
        cx={radius}
        cy={radius}
        r={radius - circleThickness * 0.5}
        color="#178BCA"
        style="stroke"
        strokeWidth={circleThickness}
      />
    </Canvas>
  );
};

Render everything inside the Canvas with width and height of size. Draw Circle which fits canvas size. We will use stroke style to draw only border of the circle. We will use strokeWidth to set thickness of the border.

Now let's add inner circle which will represent water wave later with clip path.



  ...

  const circleFillGap = 0.05 * radius;
  const fillCircleMargin = circleThickness + circleFillGap;
  const fillCircleRadius = radius - fillCircleMargin;

  return (
    <Canvas style={{ width: size, height: size }}>
      <Circle
          ...
      />

      <Circle
        cx={radius}
        cy={radius}
        r={fillCircleRadius}
        color="#178BCA"
      />
    </Canvas>
  );

We draw another circle which fill space inside. And we want to clip this circle with SVG path. We will use d3 library to generate this path, so let's install it.



npx expo install d3 @types/d3

Now we will have quate big code snippet of clipped inner circle with wave form path. I put comment almost on each line of code to explain what is doing. If you don't get something please ask in comments.



import { Canvas, Circle, Group, Path, Skia } from "@shopify/react-native-skia";
import { area, scaleLinear } from "d3";

type Props = {
  size: number;
  value: number;
};

export const LiquidGaugeProgress = ({ size, value }: Props) => {
  const radius = size * 0.5; // outer circle
  const circleThickness = radius * 0.05; // 0.05 just coefficient can be anything you like

  const circleFillGap = 0.05 * radius; // 0.05 just coefficient can be anything you like
  const fillCircleMargin = circleThickness + circleFillGap;
  const fillCircleRadius = radius - fillCircleMargin; // inner circle radius

  const minValue = 0; // min possible value
  const maxValue = 100; // max possible value
  const fillPercent = Math.max(minValue, Math.min(maxValue, value)) / maxValue; // percent of how much progress filled 

  const waveCount = 1; // how many full waves will be seen in the circle
  const waveClipCount = waveCount + 1; // extra wave for translate x animation
  const waveLength = (fillCircleRadius * 2) / waveCount; // wave length base on wave count 
  const waveClipWidth = waveLength * waveClipCount; // extra width for translate x animation
  const waveHeight = fillCircleRadius * 0.1; // wave height relative to the circle radius, if we change component size it will look same

  // Data for building the clip wave area.
  // [number, number] represent point
  // we have 40 points per wave
  // we generate as many points as 40 * waveClipCount
  const data: Array<[number, number]> = [];
  for (let i = 0; i <= 40 * waveClipCount; i++) {
    data.push([i / (40 * waveClipCount), i / 40]);
  }

  const waveScaleX = scaleLinear().range([0, waveClipWidth]).domain([0, 1]); // interpolate value between 0 and 1 to value between 0 and waveClipWidth 
  const waveScaleY = scaleLinear().range([0, waveHeight]).domain([0, 1]); // interpolate value between 0 and 1 to value between 0 and waveHeight

  // area take our data points 
  // output area with points (x, y0) and (x, y1)
  const clipArea = area()
    .x(function (d) {
      return waveScaleX(d[0]); // interpolate value between 0 and 1 to value between 0 and waveClipWidth 
    })
    .y0(function (d) {
      // interpolate value between 0 and 1 to value between 0 and waveHeight
      return waveScaleY(
        Math.sin(d[1] * 2 * Math.PI),
      );
    })
    .y1(function (_d) {
      // same y1 value for each point 
      return fillCircleRadius * 2 + waveHeight;
    });

  const clipSvgPath = clipArea(data); // convert data points as wave area and output as svg path string 
  const clipPath = Skia.Path.MakeFromSVGString(clipSvgPath); // convert svg path string to skia format path
  const transformMatrix = Skia.Matrix(); // create Skia tranform matrix 
  transformMatrix.translate(
    0, // translate x to 0, basically do nothing
    fillCircleMargin + (1 - fillPercent) * fillCircleRadius * 2 - waveHeight, // translate y to position where lower point of the wave in the innerCircleHeight * fillPercent
  );
  clipPath.transform(transformMatrix); // apply transform matrix to our clip path

  return (
    <Canvas style={{ width: size, height: size }}>
      <Circle
        cx={radius}
        cy={radius}
        r={radius - circleThickness * 0.5}
        color="#178BCA"
        style="stroke"
        strokeWidth={circleThickness}
      />

      {/* clip everything inside this group with clip path */}
      <Group clip={clipPath}> 
        <Circle cx={radius} cy={radius} r={fillCircleRadius} color="#178BCA" />
      </Group>
    </Canvas>
  );
};

Now when we have clip area let's add some text. Skia text component require font. So let's download roboto bold font. And put it into assets/fonts directory.



import { useFont, Text } from "@shopify/react-native-skia";
/image
// ...

const fontSize = radius / 2; // font size is half of the radius
const font = useFont(require('../assets/fonts/Roboto-Regular.ttf'), fontSize); // create font with font file and size

const text = `${value}`; // convert value to string
const textWidth = font?.getTextWidth(text) ?? 0; // get text width
const textTranslateX = radius - textWidth * 0.5; // calculate text X position to center it horizontally
const textTransform = [{ translateY: size * 0.5 - fontSize * 0.7 }]; // calculate vertical center position. Half canvas size - half font size. But since characters isn't centered inside font rect we do 0.7 instead of 0.5.

// ... 

return (
    <Canvas style={{ width: size, height: size }}>
      <Circle
        {/* ... */}
      />

      {/* Text which will be drawn above the wave (water) */}
      <Text
        x={textTranslateX}
        y={fontSize}
        text={text}
        font={font}
        color="#045681"
        transform={textTransform}
      />

      {/* clip everything inside this group with clip path */}
      <Group clip={clipPath}>
        <Circle cx={radius} cy={radius} r={fillCircleRadius} color="#178BCA" />

        {/* Text which will be drawn under the wave (water) */}
        <Text
          x={textTranslateX}
          y={fontSize}
          text={text}
          font={font}
          color="#A4DBf8"
          transform={textTransform}
        />
      </Group>
    </Canvas>
  );

So we added font and calculated text posiotion (explained in the code comments). Then we added two Text components with same params but different colors. One reder above the water wave, and another - under the water wave. What give us nice effect that text is in the water.

Now we want to animated our wave. So let's install react-native-reanimated. Simply follow official documentation reanimated installation or for expo installation.

Now we create translateXAnimated which change from 0 to 1 over 9 seconds and repeat in infinity loop. Then we wrap our clipPath value in useDerivedValue where we apply our translateXAnimated to x position of clip path. Each line has extra comment. Don't hesitate to ask the question if you need additional explanation.



import {
  Easing,
  useDerivedValue,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

// ...

  const translateXAnimated = useSharedValue(0); // animated value translate wave horizontally
  useEffect(() => {
    translateXAnimated.value = withRepeat(
      // repeat animation
      withTiming(1, {
        // animate from 0 to 1
        duration: 9000, // animation duration
        easing: Easing.linear, // easing function
      }),
      -1, // repeat forever
    );
  }, []);

  const clipPath = useDerivedValue(() => {
    // animated value for clip wave path
    const clipP = Skia.Path.MakeFromSVGString(clipSvgPath); // convert svg path string to skia format path
    const transformMatrix = Skia.Matrix(); // create Skia tranform matrix
    transformMatrix.translate(
      fillCircleMargin - waveLength * translateXAnimated.value, // translate left from start of the first wave to the length of first wave
      fillCircleMargin + (1 - fillPercent) * fillCircleRadius * 2 - waveHeight, // translate y to position where lower point of the wave in the innerCircleHeight * fillPercent
    );
    clipP.transform(transformMatrix); // apply transform matrix to our clip path
    return clipP;
  }, [translateXAnimated]);

We can do same to animate Y translation.



  const translateYPercent = useSharedValue(0); // animated value translate wave vertically

  useEffect(() => {
    translateYPercent.value = withTiming(fillPercent, { // timing animation from 0 to `fillPercent`
      duration: 1000, // animation duration
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fillPercent]);


  // update transformMatrix like this
  transformMatrix.translate(
    fillCircleMargin - waveLength * translateXAnimated.value, // translate left from start of the first wave to the length of first wave
    fillCircleMargin + (1 - translateYPercent.value) * fillCircleRadius * 2 - waveHeight, // translate y to position where lower point of the wave in the innerCircleHeight * fillPercent
    // since Y axis 0 is in the top, we do animation from 1 to (1 - fillPercent)
  );

And last thing is to animate text value.



  const textValue = useSharedValue(0); // animated value for text

  useEffect(() => {
    textValue.value = withTiming(value, { // animate from 0 to `value`
      duration: 1000, // duration of animation
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);

  const text = useDerivedValue(() => { // derived value for the Text component
    return `${textValue.value.toFixed(0)}`; // convert to string 
  }, [textValue]);

Hooray! We did it. This is basically all in terms of tutorial scope. If you like to have a ready-to-use configurable component take a look react-native-gauge-pprogress a wrap it as a simple lib.

Collapsible Card with React Native Reanimated

Dima Portenko — Mon, 10 Jul 2023 17:05:05 +0000

In this tutorial, we'll create an animated collapsable card using react-native-reanimated. We'll be starting from a provided template, which can be found at this GitHub link. The template contains an Expo project with a FlatList. Each list item has an image, title, and description. Our goal is to make the description collapsable with a smooth animation.

## Getting Started

First, clone the project from GitHub and switch to the template branch:



git clone https://github.com/dimaportenko/reanimated-collapsable-card-tutorial.git
cd reanimated-collapsable-card-tutorial
git checkout template

Adding React Native Reanimated

We will be using the react-native-reanimated library to create our animations. To add it, run the following command:



npx expo install react-native-reanimated

Then, you'll need to update your babel.config.js:



module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Implementation

In our ListItem.tsx, we will add a new state for the height of the collapsable content:



const [height, setHeight] = useState(0);
const animatedHeight = useSharedValue(0);

We calculate the collapsible content height in the onLayout callback:



const onLayout = (event: LayoutChangeEvent) => {
  const onLayoutHeight = event.nativeEvent.layout.height;

  if (onLayoutHeight > 0 && height !== onLayoutHeight) {
    setHeight(onLayoutHeight);
  }
};

We'll create an animated style for our collapsable content:



const collapsableStyle = useAnimatedStyle(() => {
  animatedHeight.value = expanded ? withTiming(height) : withTiming(0);

  return {
    height: animatedHeight.value,
  };
}, [expanded, height]);

We'll wrap our collapsable content in an Animated.View:



<Animated.View style={[collapsableStyle, {overflow: 'hidden'}]}>
  <View style={{ position: 'absolute'  }} onLayout={onLayout}>
    <Text style={[styles.details, styles.text]}>{item.details}</Text>
  </View>
</Animated.View>

To make our code more maintainable, let's refactor the CollapsableContainer into a separate reusable component:



import React, { useState } from "react";
import { LayoutChangeEvent, View, Text } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

export const CollapsableContainer = ({
  children,
  expanded,
}: {
  children: React.ReactNode;
  expanded: boolean;
}) => {
  const [height, setHeight] = useState(0);
  const animatedHeight = useSharedValue(0);

  const onLayout = (event: LayoutChangeEvent) => {
    const onLayoutHeight = event.nativeEvent.layout.height;

    if (onLayoutHeight > 0 && height !== onLayoutHeight) {
      setHeight(onLayoutHeight);
    }
  };

  const collapsableStyle = useAnimatedStyle(() => {
    animatedHeight.value = expanded ? withTiming(height) : withTiming(0);

    return {
      height: animatedHeight.value,
    };
  }, [expanded, height]);

  return (
    <Animated.View style={[collapsableStyle, { overflow: "hidden" }]}>
      <View style={{ position: "absolute" }} onLayout={onLayout}>
        {children}
      </View>
    </Animated.View>
  );
};

Then, we can use our new CollapsableContainer component in the ListItem component:



export const ListItem = ({ item }: { item: ListItemType }) => {
  const [expanded, setExpanded] = useState(false);

  const onItemPress = () => {
    setExpanded(!expanded);
  };

  return (
    <View style={styles.wrap}>
      <TouchableWithoutFeedback onPress={onItemPress}>
        <View style={styles.container}>
          <Image source={{ uri: item.image }} style={styles.image} />
          <View style={styles.textContainer}>
            <Text style={styles.text}>{item.title}</Text>
            <Text style={styles.text}>{item.subtitle}</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <CollapsableContainer expanded={expanded}>
        <Text style={[styles.details, styles.text]}>{item.details}</Text>
      </CollapsableContainer>
    </View>
  );
};

That's it! You have successfully created an animated collapsable card in React Native using react-native-reanimated. This animated component provides a smooth user experience, and the separate CollapsableContainer component can be reused in different parts of your application. Happy coding! Final code

Creating an iOS Currency Exchange Rate Widget: A Step-by-Step Guide

Dima Portenko — Mon, 08 May 2023 18:46:29 +0000

Introduction:

Widgets are a powerful way to provide users with a glanceable view of your app's information right on their iPhone's Home Screen or Today View. With iOS 14 and later, you can create your own custom widgets to provide useful information at a glance. In this tutorial, we'll walk you through creating a currency exchange rate widget that fetches data from an API and displays it on the widget. We'll be using the endpoint from PrivatBank to retrieve exchange rates for USD and EUR against UAH.

Prerequisites:

Xcode (latest version)
macOS with the latest version of SwiftUI
Basic understanding of SwiftUI and Swift programming language
An active Apple Developer account

Let's get started!

1. Create a new Xcode project:

Open Xcode and create a new project using the "App" template under "iOS." Give your project a name, such as "Private Exchange," and choose "SwiftUI" as the Interface and "Swift" as the Language. Set the minimum deployment target to iOS 14 or later, as widgets are not supported in earlier versions.

2. Add a new Widget Extension:

In the Xcode Project Navigator, click on "File" > "New" > "Target." Choose the "Widget Extension" template and click "Next." Give your widget extension a name, such as "PrivateExchangeWidget," and make sure the "Language" is set to "Swift." Click "Finish" to create the widget extension.

3. Create a data model for the currency rates:

In the widget extension folder, create a new Swift file called "CurrencyRate.swift" and define a CurrencyRate struct that conforms to the Decodable protocol. This struct will represent the currency rate data fetched from the API.

   struct CurrencyRate: Decodable {
       let ccy: String
       let base_ccy: String
       let buy: String
       let sale: String
   }

4. Create a data fetcher to fetch currency rates from the API:

In the same folder, create another Swift file called "CurrencyRateFetcher.swift" and define a CurrencyRateFetcher class with a shared singleton instance. This class will be responsible for fetching currency rates from the API.

   import Foundation

   class CurrencyRateFetcher {
       static let shared = CurrencyRateFetcher()
       private let apiUrl = "https://api.privatbank.ua/p24api/pubinfo?exchange&coursid=5"

       func fetchRates(completion: @escaping ([CurrencyRate]?) -> Void) {
           guard let url = URL(string: apiUrl) else {
               completion(nil)
               return
           }

           let task = URLSession.shared.dataTask(with: url) { data, response, error in
               guard let data = data, error == nil else {
                   completion(nil)
                   return
               }

               let decoder = JSONDecoder()
               let currencyRates = try? decoder.decode([CurrencyRate].self, from: data)
               completion(currencyRates)
           }

           task.resume()
       }
   }

5. Modify the widget's timeline provider to fetch data (continued):

Update the getTimeline(for:in:completion:) method to fetch currency rates from the API and pass them to the SimpleEntry.

   func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
       CurrencyRateFetcher.shared.fetchRates { currencyRates in
           let currentDate = Date()
           let entry = SimpleEntry(date: currentDate, currencyRates: currencyRates)
           let refreshDate = Calendar.current.date(byAdding: .hour, value: 1, to: currentDate)!
           let timeline = Timeline(entries: [entry], policy: .after(refreshDate))
           completion(timeline)
       }
   }

This code fetches the currency rates and creates a timeline entry with the current date and fetched rates. The timeline policy is set to .after(refreshDate), which will refresh the data every hour.

6. Update the widget's view to display currency rates:

Open the main Swift file for the widget (e.g., "Private_Exchange.swift") and modify the Private_ExchangeEntryView to display the currency rates in a SwiftUI view.

   struct Private_ExchangeEntryView : View {
       var entry: Provider.Entry

       private func currencySymbol(for code: String) -> String {
           switch code {
           case "EUR":
               return "€"
           case "USD":
               return "$"
           case "UAH":
               return "₴"
           default:
               return code
           }
       }

       var body: some View {
           VStack {
               if let currencyRates = entry.currencyRates {
                   ForEach(currencyRates, id: \.ccy) { rate in
                       HStack {
                           Text("\(currencySymbol(for: rate.ccy))")
                           Spacer()
                           Text("\(Double(rate.buy)?.rounded(toPlaces: 2) ?? 0) / \(Double(rate.sale)?.rounded(toPlaces: 2) ?? 0)")
                       }
                   }
               } else {
                   Text("Loading...")
               }
           }
           .padding()
       }
   }

This code defines a currencySymbol(for:) function that returns the appropriate currency symbol for a given currency code. The view displays a list of currency rates using a VStack and ForEach, or a "Loading..." text if the rates are not yet available.

7. Test the widget:

Build and run the project on an iOS simulator or a physical device to see the currency exchange rate widget in action. You can add the widget to the Home Screen or Today View by following the standard process for adding widgets on iOS.

Conclusion:

In this tutorial, we've walked you through creating a custom currency exchange rate widget for iOS using SwiftUI and an API. You can now expand on this basic implementation to add more functionality, such as user-configurable currency pairs or different display styles for the widget. Happy coding!

Integrating TailwindCSS with a Dioxus Desktop App in Rust

Dima Portenko — Mon, 01 May 2023 21:51:46 +0000

In this guide, we'll walk you through setting up a Dioxus desktop app project with TailwindCSS integrated.

Setup

1. Install platform-specific dependencies for Dioxus.

2. Create a new Rust binary project and navigate to its directory:



   cargo new --bin desktop-tailwind
   cd desktop-tailwind

3. Add Dioxus and the desktop renderer as dependencies (this will edit your Cargo.toml):



   cargo add dioxus
   cargo add dioxus-desktop

4. Replace the contents of your main.rs file with the following code:



   #![allow(non_snake_case)]
   // Import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
   use dioxus::prelude::*;

   fn main() {
       // Launch the Dioxus app in a webview
       dioxus_desktop::launch(App);
   }

   // Define a component that renders a div with the text "Hello, world!"
   fn App(cx: Scope) -> Element {
       cx.render(rsx! {
           div {
               "Hello, world!"
           }
       })
   }

Integrating TailwindCSS

1. Initialize TailwindCSS:



   npx tailwindcss init

This command will create a tailwind.config.js file.

2. Update tailwind.config.js to watch rs files in the src directory:



   module.exports = {
     content: ["./src/**/*.{html,rs}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }

3. Create a src/input.css file with the following content:



   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. Update main.rs to add a link to the output CSS file and apply some TailwindCSS classes:



   fn App(cx: Scope) -> Element {
       cx.render(rsx! {
           link { rel: "stylesheet", href: "../dist/output.css" },
           div {
               class: "w-full h-screen bg-gray-300 flex items-center justify-center",
               "Hello, world!"
           }
       })
   }

5. Start the TailwindCSS watcher to generate the output CSS file:



   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

6. Run the application:



   cargo run

That's it! You now have a Dioxus desktop app project integrated with TailwindCSS.

Switching between camelCase and snake_case in NeoVim using Lua

Dima Portenko — Tue, 18 Apr 2023 19:19:42 +0000

Introduction:

In this blog post, we'll demonstrate how to create a custom Lua function for Neovim that allows you to switch between camelCase and snake_case for variable names. This can be quite useful when you're working with different programming languages or projects that follow different naming conventions. We'll also show you how to create a key binding for this function, allowing you to quickly toggle between the two cases with a simple key combination.

Step 1: Create the Lua Function

To get started, create a new Lua file called switch_case.lua in your Neovim configuration directory (typically ~/.config/nvim/ or ~/.config/nvim/lua/). Add the following code to this file:

local function switch_case()
  local line, col = unpack(vim.api.nvim_win_get_cursor(0))
  local word = vim.fn.expand('<cword>')
  local word_start = vim.fn.matchstrpos(vim.fn.getline('.'), '\\k*\\%' .. (col+1) .. 'c\\k*')[2]

  -- Detect camelCase
  if word:find('[a-z][A-Z]') then
    -- Convert camelCase to snake_case
    local snake_case_word = word:gsub('([a-z])([A-Z])', '%1_%2'):lower()
    vim.api.nvim_buf_set_text(0, line - 1, word_start, line - 1, word_start + #word, {snake_case_word})
  -- Detect snake_case
  elseif word:find('_[a-z]') then
    -- Convert snake_case to camelCase
    local camel_case_word = word:gsub('(_)([a-z])', function(_, l) return l:upper() end)
    vim.api.nvim_buf_set_text(0, line - 1, word_start, line - 1, word_start + #word, {camel_case_word})
  else
    print("Not a snake_case or camelCase word")
  end
end

return { switch_case = switch_case }

This function detects the case of the word under the cursor and converts it to the other case. The word's starting position within the line is calculated using the matchstrpos function, ensuring accurate replacement even if the cursor is in the middle of the word.

Step 2: Add the Function to Your Neovim Configuration

Now, let's add the Lua function to your Neovim configuration file (init.vim or init.lua). You'll also create a key binding for the function, allowing you to switch between camelCase and snake_case with a key combination. In this example, we'll use the <Leader>s key combination.

For init.vim:

luafile ~/.config/nvim/switch_case.lua
nnoremap <Leader>s :lua require'switch_case'.switch_case()<CR>

For init.lua:

require'switch_case'
vim.api.nvim_set_keymap('n', '<Leader>s', '<cmd>lua require("switch_case").switch_case()<CR>', {noremap = true, silent = true})

Step 3: Test Your New Function

With the function and key binding in place, open a file in Neovim and test it out. Place the cursor on a word in camelCase or snake_case, and press <Leader>s. The word should be converted to the other case.

Conclusion:

This blog post has demonstrated how to create a custom Lua function for Neovim to switch between camelCase and snake_case naming conventions. By incorporating this

React Native animated donut pie chart (reanimated + svg)

Dima Portenko — Sun, 06 Nov 2022 20:20:42 +0000

Hey folks! As the title said we will build a circular chart with react-native-svg and react-native-reanimated. Our final result will look like

On refresh action, we're generating random data for our chart and showing it in an animated manner.

Let's start with the template which has code generating random chart data.



export type PieChartData = {
  color: string;
  percent: number;
}[]

Since we have data we can start working on it's visualisation. Let's draw circle with react-native-svg first.



import Svg, {Circle} from 'react-native-svg';

const strokeWidth = 20;
const size = 200;
const center = size / 2;
const radius = (size - strokeWidth) / 2;

<Svg viewBox={`0 0 ${size} ${size}`}>
  <Circle
    cx={center}
    cy={center}
    r={radius}
    strokeWidth={strokeWidth}
    stroke={'blue'}
  />
</Svg>

So we added the root Svg component with viewBox of 200 x 200 size. And Circle inside with center, radius, stroke width, and color.

For the pie chart, we will need just a segment of a circle. We can archive it with strokeDashoffset and strokeDasharray params.



const circumference = 2 * Math.PI * radius;

<Circle
  // ...
  strokeDashoffset={circumference * (1 - 0.25)} // 25% circle segment
  strokeDasharray={circumference}
/>

First of all, we calculate the circumference. And if we want a circle segment length of 25% then the rest 75% suppose to be strokeDashoffset like circumference * (1 - 0.25).

Now we can loop over our data and draw all the chart segments.



<Svg viewBox={`0 0 ${size} ${size}`}>
  {data.map((item, index) => (
    <Circle
      key={`${item.color}-${index}`}
      cx={center}
      cy={center}
      r={radius}
      strokeWidth={strokeWidth}
      stroke={item.color}
      strokeDashoffset={circumference * (1 - item.percent)}
      strokeDasharray={circumference}
    />
  ))}
</Svg>

We drew segments but they place on top of each other. To fix this we can rotate each segment on a sum of the angles of previous segments.



const [startAngles, setStartAngles] = React.useState<number[]>([]);

const refresh = () => {
  const generatedData = generatePieChartData();

  let angle = 0;
  const angles: number[] = [];
  generatedData.forEach(item => {
    angles.push(angle);
    angle += item.percent * 360;
  });

  setData(generatedData);
  setStartAngles(angles);
};


<Circle
  // ...
  originX={center}
  originY={center}
  rotation={startAngles[index]}
/>

To get an angle for a segment we need to multiply 360 (degrees in a circle) by the chart item percent. To rotate each segment around the center we also need to specify originX and originY.

Ok, now we have a circle chart. Before starting animating it let's do small refactoring and move segment drawing in the separated component.



export const PieChartSegment: FC<{
  center: number;
  radius: number;
  strokeWidth: number;
  color: string;
  circumference: number;
  angle: number;
  percent: number;
}> = ({center, radius, strokeWidth, circumference, color, angle, percent}) => {
  return (
    <Circle
      cx={center}
      cy={center}
      r={radius}
      strokeWidth={strokeWidth}
      stroke={color}
      strokeDashoffset={circumference * (1 - percent)}
      strokeDasharray={circumference}
      originX={center}
      originY={center}
      rotation={angle}
    />
  );
};

Finally, let's use the reanimated library. Create AnimatedCircle component and use instead Circle.



import Animated from 'react-native-reanimated';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

Then we add animated value progress. Pass progress to the PieChartSegment and animate it with withTiming in the refresh function.



import Animated, {useSharedValue, withTiming} from 'react-native-reanimated';


export const PieChart = ({size = 200, strokeWidth = 20}: PieChartProps) => {
  const progress = useSharedValue(0);
  // ...

  const refresh = () => {
    // ...

    progress.value = 0;
    progress.value = withTiming(1, {
      duration: 1000,
    });
  };

  return (
    // ...
      <PieChartSegment
        // ...
        progress={progress}
      />
    // ...
  )

And in the PieChartSegment component, let's animate the segment length from 0 to its actual length.



const animatedProps = useAnimatedProps(() => {
  const strokeDashoffset = interpolate(
    progress.value,
    [0, 1],
    [circumference, circumference * (1 - percent)],
  );

  return {
    strokeDashoffset,
  };
});

return (
  <AnimatedCircle
    // ...
    animatedProps={animatedProps}
  />
);

Basically, we created animatedProps with strokeDashoffset interpolated value.

And the last step I want to do here is to animate the start position of each segment. Unfortunately, we can't simply interpolate rotation property (tbh I don't know why it just isn't working as I expect it). But we can't use the usual React Native transform styles.



const animatedProps = useAnimatedProps(() => {
  // ...
  const rotateAngle = interpolate(progress.value, [0, 1], [0, angle]);

  return {
    strokeDashoffset,
    transform: [
      {translateX: center},
      {translateY: center},
      {rotate: `${rotateAngle}deg`},
      {translateX: -center},
      {translateY: -center},
    ],
  };
});

return (
  <AnimatedCircle
    // ..
    // rotation={angle}
    // @ts-ignore
    animatedProps={animatedProps}
  />
);

Tricky part here is that you have to translate segment to the center, make rotation and then translate it back.

That's it. Final code is available on github. If you like it, please support me with likes and shares. Feel free to ask me anything in the comments.

Prepare Expo project with bash script to setup TypeScript ESLint Prettier

Dima Portenko — Sat, 02 Jul 2022 14:20:40 +0000

In this post I shared my step by step way to setup new expo project generally required to any project I would like to create. But after passed this instructions several times I found it very annoying and wasting my time. So I decided to write a script which will do all steps in one go.

Let's create directory and script file

mkdir -p automation/bin
cd automation/bin
touch quickstart

So quickstart will be our executable, continue with write our script in this file.

#!/usr/bin/env bash

This basically means that executable will be run by bash.

I would like to run command with project name as param

quickstart your-project-name-param

And I like to exit script if project name wasn't provided.

if [ -n "$1" ]; then
  echo $1
else
  echo "Error! Please enter project name!" 1>&2
  exit 1
fi

$1 is first script param. And now we can create expo project with typescript template

expo init -t expo-template-blank-typescript $1

Then move to the project directory and install dependencies

DIR="$(pwd)"
cd "$DIR/$1"

yarn add -D eslint prettier @react-native-community/eslint-config @typescript-eslint/eslint-plugin eslint-config-prettier

Create and fill .eslintrc.js

cat > .eslintrc.js <<EOF
module.exports = {
  extends: ['@react-native-community', "eslint-config-prettier"],
}
EOF

Update json files is easier to do inside the nodejs script automation/patch-json.js.

const fs = require('fs');

const args = process.argv.slice(2);
const getFilepath = (filename) => `${args[0]}/${filename}`
// console.log(args)

let fileName = getFilepath('tsconfig.json');
let file = require(fileName);

file.compilerOptions.module = "es6";

fs.writeFile(fileName, JSON.stringify(file), function writeJSON(err) {
  if (err) return console.log(err);
  console.log(JSON.stringify(file));
  console.log('writing to ' + fileName);
});

fileName = getFilepath('package.json');
file = require(fileName);

if (file.resolutions) {
  file.resolutions["@types/react"] = "^17"
} else {
  file.resolutions = {
    "@types/react": "^17"
  }
}

fs.writeFile(fileName, JSON.stringify(file), function writeJSON(err) {
  if (err) return console.log(err);
  console.log(JSON.stringify(file));
  console.log('writing to ' + fileName);
});

And we can run this node script like this

SCRIPTS_DIR="$(dirname -- "${BASH_SOURCE[0]}")/.."
node "$SCRIPTS_DIR/patch-json.js" "$DIR/$1"

SCRIPTS_DIR - directory where our patch-json.js script located. "$DIR/$1" - path of our newly created project.

Since I'm using WebStorm I would like to update .gitignore

echo ".idea" >> ".gitignore"

Apply all my rules with prettier

./node_modules/prettier/bin-prettier.js --write .

And commit changes to the git

git add .
git commit -m 'expostart script updates'

And the final step - to be able run the command from any directory I need to add my bin directory to the terminal PATH varilble. I'm using zsh so I'll put following to the ~/.zshrc

export PATH=$PATH:$HOME/scripts/expo/bin

Don't forget to source config before use

source ~/.zshrc

Now you can create new project with following command

quickstart your-project-name

You can find full script in the repository.

Expo TypeScript ESLint Prettier initial setup

Dima Portenko — Mon, 27 Jun 2022 21:15:21 +0000

Expo is great platform on top of React Native. Which is great out of box and simplify your life a lot. But there are things I'm missing from React Native setup when I'm creating new project with Expo. So I decided to make this post with initial setup to use it as personal documentation.

Also, you can find how to wrap this boileplate with bash script in this post.

Expo template

First of all, I'm creating project with expo-cli and TypeScript template.



expo init -t expo-template-blank-typescript your-project-name

Resolve TS2786: 'Animated.View' cannot be used as a JSX component

Now I added some code and see following error

So I'm following solution from the GitHub.



// package.json
"resolutions": { "@types/react": "^17" }

TypeScript, ESLint, Prettier dependencies

Basically following React Native TypeScript template, I'm using following dependencies



yarn add -D eslint prettier @react-native-community/eslint-config @typescript-eslint/eslint-plugin eslint-config-prettier

ESLint config

Let's add ESLint config in .eslintrc.js



module.exports = {
  extends: ['@react-native-community', "eslint-config-prettier"],
}

TS config

Add compileOptions to existing config tsconfig.json



{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "module": "es6"
  }
}

Update .gitignore

I'm using WebStorm IDE. So I likely want to have following addition in my .gitignore



# WebStorm
.idea

Code reformat and commit changes

And final stroke to reformat our template code according to our new setup with prettier.



./node_modules/prettier/bin-prettier.js --write .

And commit changes



git add .
git commit -m 'expo template config'

This small already helps me each time I setup new expo project. Hope it will help someone else as well.

CometChat Offline Support in React Native

Dima Portenko — Sat, 25 Jun 2022 14:37:00 +0000

When you building mobile chat app you definitely want keep your app usable while phone offline or with poor internet connection. Offline Chat Support is actually top voted feature request for CometChat Sdks. Unfortunately it's not there yet, but luckily there is undocumented functionality which allow you to implement it yourself.

Basically what we need is to store CometChat.BaseMessage as JSON string and restore message from this string back.

There is getRawMessage which return the raw JSON of the message. So to store array of the messages per group to some local storage we will do following

const setMessages = (groupId: string, messages: CometChat.BaseMessage[]) => {
    const rawMessages = messages.map(msg => msg.getRawMessage());
    const serialised = JSON.stringify(rawMessages);
    storage.set(groupId, serialised);
}

And to restore message back we can use CometChatHelper and it's method processMessage which takes rawMessage data and return instance of TextMessage | MediaMessage | CustomMessage | BaseMessage. So to get array of messages from storage back we have to do something like this

const getMessages = (groupId: string) => {
    const serialisedMessages = storage.getString(groupId);
    if (serialisedMessages) {
      const rawMessages = JSON.parse(serialisedMessages) as string[];
      return Promise.all(
        rawMessages.map(rawMsg =>
          CometChat.CometChatHelper.processMessage(rawMsg),
        ),
      );
    }
},

Here is my implementation of MessagesStorage with react-native-mmkv.

import {MMKV} from 'react-native-mmkv';
import {CometChat} from '@cometchat-pro/react-native-chat';

const storage = new MMKV({
  id: 'mmkv-messages-storage',
});

export const MessagesStorage = {
  setMessages: (groupId: string, messages: CometChat.BaseMessage[]) => {
    const rawMessages = messages.map(msg => msg.getRawMessage());
    const serialised = JSON.stringify(rawMessages);
    storage.set(groupId, serialised);
  },

  getMessages: (groupId: string) => {
    const serialisedMessages = storage.getString(groupId);
    if (serialisedMessages) {
      const rawMessages = JSON.parse(serialisedMessages) as string[];
      return Promise.all(
        rawMessages.map(rawMsg =>
          CometChat.CometChatHelper.processMessage(rawMsg),
        ),
      );
    }
  },
};

Now you can enjoy of opening your chat screen with immediate list of messages cached from previous chat open.

React Native custom progress indicator with Reanimated library

Dima Portenko — Wed, 18 May 2022 21:40:00 +0000

Hello folks! In this tutorial I would like to show how create high performant custom progress indicator with react-native-reanimated library.

Video version of this tutorial available on

Let's start with following template on github or expo snack.

export const ProgressIndicator: FC<{
  count?: number;
  itemWidth?: number;
  itemHeight?: number;
  duration?: number;
  itemsOffset?: number;
  topScale?: number;
}> = ({
  count = 8,
  itemWidth = 16,
  itemHeight = 4,
  duration = 5000,
  itemsOffset = 4,
  topScale = 4,
}) => {
  return (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        height: itemHeight * topScale,
        width: (itemWidth + itemsOffset) * count,
      }}
    >
      {[...Array(count)].map((x, index) => (
        <ProgressItem
          key={`progressItem${index}`}
          index={index}
          width={itemWidth}
          height={itemHeight}
          count={count}
          topScale={topScale}
        />
      ))}
    </View>
  );
};

export const ProgressItem: FC<{
  index: number;
  count: number;
  width: number;
  height: number;
  topScale: number;
}> = ({ index, width, height, count, topScale }) => {
  return (
    <View
      style={[
        {
          width,
          height,
          backgroundColor: "black",
        },
      ]}
    />
  );
};

So basically we have ProgressIndicator with styling props which renders count of ProgressItem components. ProgressItem is simply black rectangle. To achieve final result we will scale Y axis of rectangles in sequence.

First we need to add animated value and change it with timing animated function from react-native-reanimated library.

export const ProgressIndicator = ({duration, ...props}) => {
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withTiming(1, {
      duration,
    });
  }, []);
  // ...
};

We created shared value progress with value 0. And start change it withTiming from 0 to 1 in duration milliseconds.

Now let's pass progress value to the ProgressItem and animate scale of Y axis.

// ...
<ProgressItem
  // ...
  progress={progress}
/>
// ...

And use animated style in the Animated View.

  export const ProgressItem = ({ index, width, height, count, topScale, progress }) => {
  const animatedStyle = useAnimatedStyle(() => {

    const scaleY = interpolate(
      progress.value,
      [0, 1], // input progress value from 0 to 1
      [1, topScale], // output scale from 1 to 4 (topScale = 4)
      Extrapolation.CLAMP
    );
    return {
      transform: [{ scaleY }],
    };
  });
  return (
    <Animated.View
      style={[
        {
          width,
          height,
          backgroundColor: "black",
        },
        animatedStyle
      ]}
    />
  );
};

Basically what we did interpolate scaleY value from 1 to 4 inside useAnimatedStyle over duration milliseconds.

Now instead of scale all items simultaneously let's do it one by one. For this we need to split our animation progress for the item count.

const scaleY = interpolate(
  progress.value,
  [index / count, (index + 1) / count],
  [1, topScale],
  Extrapolation.CLAMP
);

Next step I would like to do is scale down before animate next item. In this case we need 3 output points [1, 4, 1] for each item.

const scaleY = interpolate(
  progress.value,
  [index / count, (index + 1) / count, (index + 2) / count],
  [1, topScale, 1],
  Extrapolation.CLAMP
);

And here we are

Now let's do our wave more smooth. We'll start next item animation earlier. To do it we split each progress piece by 3.

const parts = 3;
const wholeCount = count * 3; 
const scaleY = interpolate(
  progress.value,
  [index / wholeCount, (index + parts) / wholeCount, (index + 2 * parts) / wholeCount],
  [1, topScale, 1], 
  Extrapolation.CLAMP
);

Almost what we want but animations finished a bit earlier than our duration. To use whole duration our 3 point value for last index should be equal 1.

(index + 2 * parts) / wholeCount = 1
// where 
index = count - 1
// so
wholeCount = count - 1 + 2 * parts;

then

const parts = 3;
const wholeCount = count - 1 + 2 * parts; 
const scaleY = interpolate(
  progress.value,
  [index / wholeCount, (index + parts) / wholeCount, (index + 2 * parts) / wholeCount],
  [1, topScale, 1], 
  Extrapolation.CLAMP
);

Great! We are almost there. Our animation looks good, but now it plays only once after component mount. To fix this let's use withRepeat animation function. And we'll wrap our withTiming function like this

useEffect(() => {
  progress.value = withRepeat(
    withTiming(1, { duration }),
    -1,
    true
  );
}, []);

First argument is our withTiming function. Second is number of repetitions if negative it will be infinity loop. Third is reverse param, which means it will play our animations back and forth. Basically it will change our progress value from 0 to 1, then from 1 to 0 and repeat. In case reverse is false it will change value from 0 to 1, jump back and 0 to 1 again.

That's it! Please let me know what you think in the comments and of course feel free to ask any questions. Final code is available on snack and on github.

React Native Shadow View. Write once, run anywhere.

Dima Portenko — Sun, 17 Apr 2022 14:06:17 +0000

I love React Native. There is possible to write code without thinking about which platform it will be run on. But it's not always possible to overcome OS-specific things. One of those things is Android shadows styling. Over 4 years working with React Native I've never received a design that takes into account the Android way to deal with shadows. It is always easy to apply those styles with iOS API, but not clear what to do on the Android side.

I decided to take a look if there are any solutions done by the Android native developers community and found out ShadowLayout. The nice simple library is written in Kotlin.

I immediately thought, what if I can use the power of native modules and achieve the same shadow styles with one API for both iOS and Android. I tried and it works.

Happy to share my @dimaportenko/react-native-shadow-view library. Please let me know in the comments what you think about it.