Carbon: New default code snippet

[mfix22]

Hey Carbon users,
We want a new default code snippet (or maybe a few) and need your help.

What should we make it? 🙂Comment below with suggestions.

[mittalyashu]

What do you mean by default code snippet?

[mfix22]

Our default code text found here (https://github.com/dawnlabs/carbon/blob/master/lib/constants.js#L456) is what the editor is prefilled with when you first open up Carbon.

We have had the same one since the beginning, and it could use a refresher (:

[mittalyashu]

I got one.

var iAmAwesome = true;

if iAmAwesome {
   open(carbon)
} else {
  open(localScreenshotTool)
}

[mfix22]

// Built with Carbon
<Dropper
  onDrop={files => this.setState({ files })}
  filter={file => file.size < 10000 && file.type === 'image/png')}
>
  {({ isOver, canDrop, files }) => (
    <Overlay
      title={`Drop your files here to import ${isOver ? '✋' : '✊'}`}
    >
      <Upload files={files.map(file => file.content)} />
    </Overlay>
  )}
</Dropper>

[ghost]

@mfix22 Can I work on this?

[mfix22]

@MONIKA-KUMAR-JETHANI feel free to make suggestions in the comments of this issue! 🙂

[hcz]

It might be useful as an idea 😄
````
const WITH_LOVE = 'Carbon 🎨';

const OUR_TEAM = {
briandennis: 'Brian Dennis',
jakedex: 'Jake Dexheimer',
mfix22: 'Michael Fix'
};

function transformMembersList(team) {
return Object.keys(team).map(github => ({ name: team[github], github }))
};

const firstMember = team => team.length > 0 ? team[0].name : '';
````

[sdabhi23]

Should the same snippet be used for all languages or should the snippet change when the language is changed from the menu? 🤔

[mfix22]

I think it would overcomplicate things to switch the code when the language changes since we would have to keep track of if the user has typed anything before switching. I would love to replace the current one with a fresh JavaScript/React one, since that is mostly what Carbon was build with 🙂

[sdabhi23]

@mfix22 have you finalised a snippet? I like the one suggested by @hcz

[v-fernandez]

How about something like:

const ThemeContext = createContext({ theme: "light", toggleTheme: () => {} })

const ThemeProvider = props => {
  const [theme, setTheme] = useState("light")
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light")

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {props.children}
    </ThemeContext.Provider>
  )
}

[mfix22]

@v-fernandez I like this^ ! I think we should include something like this in our next array of default snippets