Focusing

Josh Kuttler JoshK2

Focusing

Software Engineer 💫 💻

JoshK2 / crcl-stories.js

Last active October 24, 2019 15:38

Create React typescript components library - Storybook - stories file examples

	import React from 'react';
	import { action } from '@storybook/addon-actions';
	import Button from '../src/components/Button';

	export default {
	title: 'Button',
	};

	export const text = () => <Button text="Hello Button" onClick={action('clicked')} />;

JoshK2 / crcl-package2.json

Created September 5, 2019 15:29

Create React typescript components library - package.json after installing storybook

	{
	"name": "my-own-components-library",
	"version": "0.1.0",
	"private": false,
	"dependencies": {},
	"peerDependencies": {
	"react": "^16.9.0",
	"react-dom": "^16.9.0"
	},
	"devDependencies": {

JoshK2 / crcl-button.stories.js

Last active October 24, 2019 15:47

Create React typescript components library - button stories file

	import React from 'react';
	import { action } from '@storybook/addon-actions';
	import Button from './';

	export default {
	title: 'Button',
	};

	export const text = () => <Button text="Hello Button" onClick={action('clicked')} />;

JoshK2 / crcl-variables.scss

Created September 7, 2019 19:42

Create React typescript components library - variables scss file

JoshK2 / crcl-alert.scss

Created September 7, 2019 19:47

Create React typescript components library - using variables from another scss file

	@import '../../styles/variables.scss';

	.alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
	width: fit-content;
	&.primary {

JoshK2 / brtci-Button.tsx

Created October 23, 2019 13:36

simple Button component - build react typescript component in isolation

	import React, { Component, CSSProperties } from 'react';

	type ButtonProps = {
	text: string,
	disable?: boolean,
	onClick: Function
	}

	const css: CSSProperties = {
	padding: '5px 9px',

JoshK2 / brtci-Alert.tsx

Last active March 23, 2023 02:21

simple Alert component - build react typescript component in isolation

	import React, { Component, CSSProperties } from 'react';
	import Link from './Link';

	type AlertProps = {
	text: string,
	bgColor?: string,
	link?: string
	}

	const css: CSSProperties = {

JoshK2 / brtci-Link.tsx

Created October 23, 2019 15:42

simple Link component - build react typescript component in isolation

	import React, { Component, CSSProperties } from 'react';

	type LinkProps = {
	link: string
	}

	const css: CSSProperties = {
	fontSize: 16,
	color: '#000000',
	}

JoshK2 / bitconfig.json

Created October 27, 2019 15:22

Create React typescript components library - update bit config in package.json

	"bit": {
	"env": {
	"compiler": "bit.envs/compilers/[email protected]",
	"tester": "bit.envs/testers/[email protected]"
	},
	"componentsDefaultDirectory": "components/{name}",
	"packageManager": "npm",
	"overrides": {
	"*": {
	"dependencies": {

JoshK2 / import-all.js

Last active February 24, 2022 10:07

Import all components from a collection at bit.dev

	//IMPORTANT - install thie before: npm i child-process-promise --save-dev
	/*
	put this in your package.json script:
	"import-all": "node import-all.js"

	npm run import-all <user>.<collection> amount
	*/

	const exec = require('child-process-promise').exec;
	const args = process.argv;