Where can I find the most recent source code for basic built-in components?

rmq · January 13, 2023, 9:55pm

Hello, I was looking for the open source implementation of the built in Tabs component that I see in the drag and drop editor, but I only found this one which seems a little outdated and is different from the one I see on your editor. For example, it doesn’t have the prompt to add blocks in the tab contents area, doesn’t use react hooks and uses componentWillMount instead of componentDidMount.

github.com

BuilderIO/builder/blob/main/packages/widgets/src/components/Tabs.config.ts

const defaultTab = {
  '@type': '@builder.io/sdk:Element',
  responsiveStyles: {
    large: {
      paddingLeft: '20px',
      paddingRight: '20px',
      paddingTop: '10px',
      paddingBottom: '10px',
      minWidth: '100px',
      textAlign: 'center',
      // TODO: add to all
      display: 'flex',
      flexDirection: 'column',
      cursor: 'pointer',
      userSelect: 'none',
    },
  },
  component: {
    // Builder:text
    name: 'Text',

This file has been truncated. show original

github.com

BuilderIO/builder/blob/main/packages/widgets/src/components/Tabs.tsx

import * as React from 'react';
import { BuilderBlocks } from '@builder.io/react';

// TODO: manual typings and documentation for this with typedoc and in builder guides pages
type ElementType = any;

export interface TabsProps {
  tabs: {
    label: ElementType[];
    content: ElementType[];
  }[];
  builderBlock: any;
  defaultActiveTab?: number;
  collapsible?: boolean;
  tabHeaderLayout?: string;
  activeTabStyle?: any;
}

export class TabsComponent extends React.Component<TabsProps, { activeTab: number }> {
  state = {

This file has been truncated. show original

Where can I see the more recent Tabs component seen on your editor? Should I be checking a different branch from main? Thanks and my bad if the answer is super obvious and I missed it.

nicke920 · January 13, 2023, 10:52pm

Hi there,

Thanks for reaching out to support!

Hmmm that’s interesting! Perhaps you could be using the Tabs component from the NPM package here: @builder.io/widgets - npm

rmq · January 14, 2023, 5:41am

Hi! Thanks, but that’s the same package and repo as the one I linked, no? The only difference is that it’s bundled up. Let me know if I’m mistaken. I think I’m seeing the same code, especially after using the map file.

nicke920 · January 18, 2023, 7:34pm

Hey there,

It could be that the open source repo has yet to be updated to the most recent code. However, I just spoke with our Engineering lead and they mentioned that there is a tiny bit of code in the app that modifies some tab behaviour, but that it is extremely minor.

rmq · January 18, 2023, 8:08pm

hey! I appreciate that you went and asked, and good to know the difference is minor (I was just curious).

Topic		Replies	Views
React custom component containing editable subcomponents Technical Questions react	5	3663	October 13, 2021
Missing Form/Input components Visual Editor Help	8	763	March 10, 2023
Clarification Needed: Hiding built-in components while leaving styles tab accessible Technical Questions visual-editor , react , nextjs	7	720	May 11, 2022
Adding code to the visual builder template components Technical Questions visual-editor , react	1	409	January 25, 2022
Builder Devtools Fetch Error: Component 3d6da320 not found Technical Questions react , nextjs	5	287	November 14, 2023

Where can I find the most recent source code for basic built-in components?

Related Topics