maecapozzi

import { baseTheme } from './theme.ts'

export const buttonTokens = {
  primary: {
    backgroundColor: theme.colors.primary;
    color: theme.colors.secondary;
  }
}

maecapozzi

import colors from './colors.ts';

const baseTheme = {
  colors: {
    // primary is a semantic name.  
    primary: colors.blue100,
    secondary: colors.gray:100,
  }
}

maecapozzi

// colors.ts

const blue100 = '#18253f'
const blue200 = '#1d3158'
const blue300 = '#224177'

const gray100 = '#000000'
const gray200 = '#1e2024'

const red100 = '#7f1218'

maecapozzi

{
  "name": "@constellation-components/button",
  "author": "maecapozzi <maecapozzi@gmail.com>",
  "version": "1.0.3-alpha.0",
  "description": "A button component",
  "main": "./dist/button.js",
  "types": "./dist/button.d.ts",
  "scripts": {
    "build": "tsc -p ./tsconfig.json"
  },

maecapozzi

const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer');
const { exec } = require('child_process');

// Pull the arguments off of the command
let args = process.argv.slice(2);


// Write your own custom questions that the script will ask

maecapozzi

// Sometimes you want to be able to pass a React component as a prop. One reason you might want to do this is routing.
// Imagine you want to create a special kind of route that can't be reached unless a user is logged in.

// A `<PrivateRoute />` component might be used like this: 
// This component lets you see your user profile, but only after you have logged in. 

// App.tsx

const App = () => (
  <Router>

maecapozzi

// Import Suspense and lazy from React
import React, { Component, Suspense, lazy } from 'react'
import axios from 'axios'
import styled from 'styled-components'
import { Container, Row, Col } from 'react-grid-system'

import { SearchBar } from './components/SearchBar'
import { SearchInput } from './components/SearchInput'

// Dynamically import the file 

maecapozzi

import React, { Suspense, lazy } from "react";
import axios from "axios";

// Thumbnails now lives in a different file (as it should)
// We dynamically import it when it's needed
const Videos = lazy(() => import("./Thumbnails"));

const Videos = ({ items }) => (
  <Thumbnails>
    {items.map(primeVideos => (

maecapozzi

// This file is pseudocode! Don't try to run this, it probably won't work :)
import React from "react";
import axios from "axios";
import Thumbnails from "./Thumbnails";

const Videos = ({ items }) => (
  <Thumbnails>
    {items.map(primeVideos => (
      <Thumbnail primeVides={primeVideos} />;
    ))}

maecapozzi

// Imagine your application code looks like this

const Button = styled.button`
  color: ${props => props.theme.main};
`

const theme = {
  main: 'mediumseagreen',
}