Changed library to use typescript now. Experimental snippet component…

… also being developed

CONTRIBUTING.md

@@ -0,0 +1,2 @@
+# WIP
+

packages/react-code-blocks/.storybook/main.js

@@ -1,7 +1,12 @@
 module.exports = {
   stories: ['../stories/**/*.stories.(ts|tsx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
-  webpackFinal: async (config) => {
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-knobs',
+  ],
+  webpackFinal: async config => {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
       use: [

packages/react-code-blocks/package.json

@@ -44,9 +44,26 @@
   },
   "module": "dist/react-code-blocks.esm.js",
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-info": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-storysource": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/react": "^5.3.18",
     "@types/color": "^3.0.1",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
     "@types/react-syntax-highlighter": "^11.0.4",
     "@types/styled-components": "^5.1.0",
+    "babel-loader": "^8.1.0",
+    "react": "^16.13.1",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^16.13.1",
+    "ts-loader": "^6.2.2",
     "tsdx": "^0.13.2",
     "typescript": "^3.9.6"
   },

packages/react-code-blocks/src/ThemedCopyBlock.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { withTheme, ThemeProvider } from 'styled-components';
-import CopyBlock from 'components/CopyBlock';
+import CopyBlock from './components/CopyBlock';
 const CopyBlockWithTheme = withTheme(CopyBlock);
 const emptyTheme = {};
 

packages/react-code-blocks/src/components/CopyBlock.tsx

@@ -4,7 +4,7 @@ import CodeBlock from './CodeBlock';
 import Copy from './CopyIcon';
 import styled from 'styled-components';
 import { Theme, SupportedLanguages } from 'types';
-import useClipboard from 'hooks/use-clipboard';
+import useClipboard from '../hooks/use-clipboard';
 
 export interface Props {
   theme: Theme;
@@ -17,9 +17,8 @@ export interface Props {
 
 const Button = styled.button<Props>`
   position: absolute;
-  top: 0;
-  right: 0;
-  margin-right: 0.25rem;
+  top: 0.5em;
+  right: 0.75em;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

packages/react-code-blocks/src/components/Snippet/Snippet.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo, useRef, useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
-import withDefaults from 'hooks/with-defaults';
-import { SnippetTypes, CopyTypes } from 'utils/prop-types';
+import withDefaults from '../../hooks/with-defaults';
+import { CopyTypes } from '../../utils/prop-types';
 import { getStyles } from './styles';
 import SnippetIcon from './SnippetIcon';
-import useClipboard from 'hooks/use-clipboard';
+import useClipboard from '../../hooks/use-clipboard';
 
 interface Props {
   text?: string | string[];
@@ -72,7 +72,6 @@ const SnippetWrapper = styled.div<
 const defaultProps = {
   width: 'initial',
   copy: 'default' as CopyTypes,
-  type: 'default' as SnippetTypes,
   className: '',
 };
 
@@ -87,7 +86,6 @@ const textArrayToString = (text: string[]): string => {
 };
 
 const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
-  type,
   children,
   text,
   width,

packages/react-code-blocks/src/components/Snippet/index.tsx

@@ -1,3 +1,3 @@
-import Snippet from './snippet';
+import Snippet from './Snippet';
 
 export default Snippet;

packages/react-code-blocks/src/components/Snippet/styles.ts

@@ -1,4 +1,4 @@
-import { CodeBlockTheme } from 'types';
+import { CodeBlockTheme } from '../../types';
 
 export const getStyles = (theme: CodeBlockTheme) => {
   const styles = {

packages/react-code-blocks/src/themes/index.ts

@@ -0,0 +1,39 @@
+export { default as a11yDark } from './a11y-dark';
+export { default as a11yLight } from './a11y-light';
+export { default as anOldHope } from './an-old-hope';
+export { default as androidstudio } from './androidstudio';
+export { default as arta } from './arta';
+export { default as atomOneDark } from './atom-one-dark';
+export { default as atomOneLight } from './atom-one-light';
+export { default as codepen } from './codepen';
+export { default as dracula } from './dracula';
+export { default as far } from './far';
+export { default as github } from './github';
+export { default as googlecode } from './googlecode';
+export { default as hopscotch } from './hopscotch';
+export { default as hybrid } from './hybrid';
+export { default as irBlack } from './ir-black';
+export { default as monoBlue } from './mono-blue';
+export { default as monokaiSublime } from './monokai-sublime';
+export { default as monokai } from './monokai';
+export { default as nord } from './nord';
+export { default as obsidian } from './obsidian';
+export { default as ocean } from './ocean';
+export { default as paraisoDark } from './paraiso-dark';
+export { default as paraisoLight } from './paraiso-light';
+export { default as pojoaque } from './pojoaque';
+export { default as purebasic } from './purebasic';
+export { default as railscast } from './railscast';
+export { default as rainbow } from './rainbow';
+export { default as shadesOfPurple } from './shades-of-purple';
+export { default as solarizedDark } from './solarized-dark';
+export { default as solarizedLight } from './solarized-light';
+export { default as sunburst } from './sunburst';
+export { default as tomorrowNightBlue } from './tomorrow-night-blue';
+export { default as tomorrowNightBright } from './tomorrow-night-bright';
+export { default as tomorrowNightEighties } from './tomorrow-night-eighties';
+export { default as tomorrowNight } from './tomorrow-night';
+export { default as tomorrow } from './tomorrow';
+export { default as vs2015 } from './vs2015';
+export { default as xt256 } from './xt256';
+export { default as zenburn } from './zenburn';

packages/react-code-blocks/src/utils/prop-types.ts

@@ -1,17 +1,5 @@
 export const tuple = <T extends string[]>(...args: T) => args;
 
-const snippetTypes = tuple(
-  'default',
-  'secondary',
-  'success',
-  'warning',
-  'error',
-  'dark',
-  'lite'
-);
-
 const copyTypes = tuple('default', 'slient', 'prevent');
 
-export type SnippetTypes = typeof snippetTypes[number];
-
 export type CopyTypes = typeof copyTypes[number];

packages/react-code-blocks/stories/Code.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Code } from '../src';
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import { supportedLanguages, themeObj } from '../utils/knobs';
+import he from 'he';
+
+export default {
+  title: 'Code',
+  decorators: [withKnobs],
+};
+
+// By passing optional props to this story, you can control the props of the component when
+// you consume the story in a test.
+export const Default = () => {
+  const language = select(
+    'language',
+    Object.assign({}, ...supportedLanguages.map(val => ({ [val]: val }))),
+    'javascript'
+  );
+  //@ts-ignore
+  const themes = select('theme', themeObj, 'dracula');
+  const code = text('text', `const add = (x,y) => x+y;`);
+
+  return (
+    <div
+      style={{
+        fontFamily: 'Fira Code',
+      }}
+    >
+      <Code
+        text={he.decode(code)}
+        language={language}
+        theme={require('../src')[themes]}
+        wrapLines
+      />
+    </div>
+  );
+};

packages/react-code-blocks/stories/CodeBlock.stories.tsx

@@ -1,18 +1,40 @@
 import React from 'react';
-import { CodeBlock, dracula } from '../src';
+import { CodeBlock } from '../src';
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import { supportedLanguages, themeObj } from '../utils/knobs';
+import he from 'he';
 
 export default {
   title: 'Code Block',
+  decorators: [withKnobs],
 };
 
 // By passing optional props to this story, you can control the props of the component when
 // you consume the story in a test.
-export const Default = () => (
-  <CodeBlock
-    text={"const foo = 'bar';"}
-    language="javascript"
-    theme={dracula}
-    showLineNumbers
-    wrapLines
-  />
-);
+export const Default = () => {
+  const language = select(
+    'language',
+    Object.assign({}, ...supportedLanguages.map(val => ({ [val]: val }))),
+    'javascript'
+  );
+  //@ts-ignore
+  const themes = select('theme', themeObj, 'dracula');
+  const showLineNumbers = boolean('showLineNumbers', true);
+  const wrapLines = boolean('wrapLines', true);
+  const code = text('text', `const add = (x,y) => x+y;`);
+  return (
+    <div
+      style={{
+        fontFamily: 'Fira Code',
+      }}
+    >
+      <CodeBlock
+        text={he.decode(code)}
+        language={language}
+        theme={require('../src')[themes]}
+        showLineNumbers={showLineNumbers}
+        wrapLines={wrapLines}
+      />
+    </div>
+  );
+};

packages/react-code-blocks/stories/CopyBlock.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CopyBlock } from '../src';
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import { supportedLanguages, themeObj } from '../utils/knobs';
+import he from 'he';
+
+export default {
+  title: 'Copy Block',
+  decorators: [withKnobs],
+};
+
+// By passing optional props to this story, you can control the props of the component when
+// you consume the story in a test.
+export const Default = () => {
+  const language = select(
+    'language',
+    Object.assign({}, ...supportedLanguages.map(val => ({ [val]: val }))),
+    'python'
+  );
+  //@ts-ignore
+  const code = text(
+    'text',
+    `import pandas as pd
+df = pd.read_csv('some_random.csv');
+df.head(5)`
+  );
+  const themes = select('theme', themeObj, 'dracula');
+  const showLineNumbers = boolean('showLineNumbers', true);
+  const wrapLines = boolean('wrapLines', true);
+  const codeBlock = boolean('codeBlock', true);
+  return (
+    <div
+      style={{
+        fontFamily: 'Fira Code',
+      }}
+    >
+      <CopyBlock
+        text={he.decode(code)}
+        language={language}
+        theme={require('../src')[themes]}
+        {...{ showLineNumbers, wrapLines, codeBlock }}
+      />
+    </div>
+  );
+};

packages/react-code-blocks/stories/Snippet.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Snippet } from '../src';
+import { withKnobs, text, select } from '@storybook/addon-knobs';
+import { themeObj } from '../utils/knobs';
+import he from 'he';
+
+export default {
+  title: 'Snippet',
+  decorators: [withKnobs],
+};
+
+// By passing optional props to this story, you can control the props of the component when
+// you consume the story in a test.
+export const Default = () => {
+  //@ts-ignore
+  const themes = select('theme', themeObj, 'dracula');
+  const code = text('text', `df[df.index == 1]['name']`);
+  return (
+    <div
+      style={{
+        fontFamily: 'Fira Code',
+      }}
+    >
+      <Snippet text={he.decode(code)} theme={require('../src')[themes]} />
+    </div>
+  );
+};