Skip to content

mmmoore1313/StencilJS-React-practice-medium-part1

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

105 Commits

.github/workflows

.github/workflows

 
 

.storybook

.storybook

 
 

src

src

 
 

.editorconfig

.editorconfig

 
 

.gitignore

.gitignore

 
 

.prettierrc.json

.prettierrc.json

 
 

LICENSE

LICENSE

 
 

README.md

README.md

 
 

package-lock.json

package-lock.json

 
 

package.json

package.json

 
 

stencil.config.ts

stencil.config.ts

 
 

tsconfig.json

tsconfig.json

 
 

Repository files navigation

StencilJS-React-practice-medium

CONTENTS
About Technologies Used
Steps Links

About

This is built following the stencil.js tutorial found at Creating a Reusable Web Component with StencilJS

This repo is used as a scrap repo to test all major infrastucural changes that will be made to SPEC-ods.

Return to top

Steps

Steps taken
1. Create a project directory

1.1- mkdir <projectname>
1.2- cd <projectname>

2. Initialize the stencil

2.1- Run npm init stencil
2.2- Choose the component option
2.3- Name your project
2.4- Run npm install

3. Create a component.
3.1- Create component directory 
mkdir src/components/my-accordion
3.2- Create and fill out file component.tsx
3.2.1- Create component.tsx 
touch src/components/my-accordion/my-accordion.tsx
3.2.2- my-accordion.tsx 
import { Component, State, EventEmitter, Event, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-accordion',
  styleUrl: 'my-accordion.scss',
  shadow: true
})

export class MyComponent {

  @State() toggle: boolean = false;

  @Event() onToggle: EventEmitter;

  @Prop() label: string;

  @Prop() description: string;

  @Prop() width: string;

  @Prop() color: string;

  toggleComponent() {
    this.toggle = !this.toggle;
    this.onToggle.emit({ visible: this.toggle });
  }

  render() {

    return (
      <div>
      <button class="accordion"
      style={{
        width: this.width,
        backgroundColor: this.color,
      }}
      onClick={() => this.toggleComponent()}>
      {this.label}
      {this.toggle ? <span>&#9650;</span> : <span>&#9660;</span>}
      </button>
      <div class={`content-box ${this.toggle ? 'open' : 'close'}`}
      style={{width: this.width}}>
      <p>{this.description}</p>
      </div>
      </div>
    )
  }
}
3.3- Create a component.scss file
3.3.1- Create component.scss 
touch src/components/my-accordion/my-accordion.scss
3.3.2- Fill out component.scss file 
* {
    font-family: 'Lato', sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.accordion {
    cursor: pointer;
    padding: 18px;
    text-align: left;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    outline: 0;
    span {
        float: right;
    }
}
 
 .open {
    display: block;
    height: auto;
    border-radius: 20px;
    border: 0.5px solid rgb(199, 197, 197);
    width: 200px;
 }

 p {
    padding: 18px;
 }

 .close {
    display: none;
 }
3.4- Insert the component into the body index.html 
<body>
  <my-accordion width='100%' 
                label='Bacon Ipsum'
                color='pink'
                description="Bacon ipsum dolor amet pork chop sausage turkey spare ribs ham hock cupim pork loin capicola bacon ham filet mignon prosciutto boudin turducken. Shank corned beef burgdoggen jowl ribeye. Ham pork pastrami rump meatball buffalo venison andouille picanha fatback pork loin. Venison doner porchetta, chicken leberkas fatback burgdoggen ham andouille landjaeger alcatra. Pork belly pork jerky prosciutto leberkas tail salami tongue frankfurter turducken short loin flank."></my-accordion>
  <my-accordion width='100%'
                label='Cat Ipsum'
                color='aquamarine'
                description="Human give me attention meow i want to go outside let me go outside nevermind inside is better but cats are cute flex claws on the human's belly and purr like a lawnmower find something else more interesting, yet lick sellotape lick butt and make a weird face. The cat was chasing the mouse lick the plastic bag for furrier and even more furrier hairball but scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in. "></my-accordion>
  <my-accordion width='100%'
                color='#eee'
                description="I feel empty."></my-accordion>
</body>
3.5- Run npm start 
npm start
3.6- Publish your package
3.6.1- Build your component 
npm run build
3.6.2- Publish your compnent 
npm publish
4. Build the React app

The completion of this app can be found here

4.1- Create React App 
npx create-react-app appname
4.2- Download dependencies 
npm install
4.3- Install component package 
npm install mediumtutorial --save
4.4- Paste defineCustomElements into the index.js file 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { applyPolyfills, defineCustomElements } from 'spec-/loader';
// ^^^!!!This part is the magic import!!!^^^

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements(window);
});
// ^^^!!!This part is the magic export!!!^^^
4.5- Import component into App.js 
import React from 'react';
import './App.css';
import 'mediumtutorial';


function App() {

  const array = [
    {
      label: 'Accordion 1',
      description: 'Lorem ipsum',
      color: '#439ECA',
      width: '300px'
    },
    {
      label: 'Accordion 2',
      description: 'Lorem ipsum',
      color: '#7EC74A',
      width: '300px'
    },
    {
      label: 'Accordion 3',
      description: 'Lorem ipsum',
      color: '#F8CD41',
      width: '300px'
    }
  ]
  return (
    <div className="App">
      {
        array.map((array) => {
          return (
            <my-accordion 
            label={array.label}
            description={array.description}
            color={array.color}
            width={array.width}>
            </my-accordion>
          )})
      }
    </div>
  );
}

export default App;
Run the app

npm start

Technologies Used

More later
Return to top

Links

More later
Return to top

About

This is built following the stencil.js tutorial found at https://medium.com/stencil-tricks/creating-reusable-a-reusable-web-component-with-stenciljs-b2842af54c51

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

14 tags

Packages

No packages published

Languages